mirror of
https://github.com/GoodStartLabs/AI_Diplomacy.git
synced 2026-04-23 16:59:10 +00:00
189 lines
No EOL
6.3 KiB
HTML
189 lines
No EOL
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Diplomacy Animation Demo</title>
|
|
<!-- Import map for Three.js and dependencies -->
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
|
|
"three/examples/jsm/controls/OrbitControls.js": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/controls/OrbitControls.js",
|
|
"three/examples/jsm/loaders/GLTFLoader.js": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/GLTFLoader.js"
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.animation-container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
}
|
|
#map-container {
|
|
width: 100%;
|
|
height: 600px;
|
|
position: relative;
|
|
background-color: #87CEEB;
|
|
margin-top: 20px;
|
|
}
|
|
#animation-controls {
|
|
margin-top: 20px;
|
|
}
|
|
.control-group {
|
|
margin-bottom: 10px;
|
|
}
|
|
button {
|
|
padding: 10px 15px;
|
|
background-color: #4a5568;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin-right: 8px;
|
|
}
|
|
button:hover {
|
|
background-color: #2d3748;
|
|
}
|
|
#debug-info {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
background-color: #ffe6e6;
|
|
border: 1px solid #ffcccc;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="animation-container">
|
|
<h1>Diplomacy Animation Demo</h1>
|
|
<div id="animation-controls">
|
|
<div class="control-group">
|
|
<button id="prev-phase">◀ Prev</button>
|
|
<button id="play-button">▶ Play</button>
|
|
<button id="next-phase">Next ▶</button>
|
|
<label>Speed:
|
|
<select id="speed-control">
|
|
<option value="0.5">0.5x</option>
|
|
<option value="1" selected>1x</option>
|
|
<option value="2">2x</option>
|
|
<option value="4">4x</option>
|
|
</select>
|
|
</label>
|
|
<span id="phase-display">Phase: 1/3</span>
|
|
</div>
|
|
<div class="control-group">
|
|
<label><input type="checkbox" id="show-order-viz" checked> Show Order Visualizations</label>
|
|
<label><input type="checkbox" id="animate-units" checked> Animate Unit Movements</label>
|
|
<label><input type="checkbox" id="use-easing" checked> Use Animation Easing</label>
|
|
<label><input type="checkbox" id="auto-advance" checked> Auto-Advance to Next Phase</label>
|
|
</div>
|
|
</div>
|
|
<div id="map-container"></div>
|
|
<div id="debug-info"></div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
const debugInfo = document.getElementById('debug-info');
|
|
debugInfo.textContent = 'Loading...';
|
|
|
|
try {
|
|
// First, load the modules
|
|
const { GameStateManager } = await import('./utils/GameStateManager.js');
|
|
const { AnimationPlayer } = await import('./components/AnimationPlayer.js');
|
|
|
|
debugInfo.textContent += '\nLoaded GameStateManager and AnimationPlayer modules';
|
|
|
|
// Create a game state manager
|
|
const gameStateManager = new GameStateManager();
|
|
|
|
// Load the test game data
|
|
fetch('./assets/test-game.json')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load test game data: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(gameData => {
|
|
debugInfo.textContent += '\nLoaded test game data';
|
|
return gameStateManager.loadGameState(gameData);
|
|
})
|
|
.then(() => {
|
|
debugInfo.textContent += '\nInitialized game state manager';
|
|
|
|
// Create the animation player
|
|
const animationPlayer = new AnimationPlayer({
|
|
containerId: 'map-container',
|
|
gameStateManager: gameStateManager,
|
|
mapVariant: 'standard',
|
|
detailLevel: 'medium'
|
|
});
|
|
|
|
// Set up controls
|
|
document.getElementById('prev-phase').addEventListener('click', () => {
|
|
animationPlayer.prev();
|
|
});
|
|
|
|
document.getElementById('play-button').addEventListener('click', () => {
|
|
if (animationPlayer.isPlaying) {
|
|
animationPlayer.pause();
|
|
document.getElementById('play-button').textContent = '▶ Play';
|
|
} else {
|
|
animationPlayer.play();
|
|
document.getElementById('play-button').textContent = '⏸ Pause';
|
|
}
|
|
});
|
|
|
|
document.getElementById('next-phase').addEventListener('click', () => {
|
|
animationPlayer.next();
|
|
});
|
|
|
|
document.getElementById('speed-control').addEventListener('change', (e) => {
|
|
animationPlayer.setSpeed(parseFloat(e.target.value));
|
|
});
|
|
|
|
document.getElementById('show-order-viz').addEventListener('change', (e) => {
|
|
animationPlayer.showOrderVisualizations = e.target.checked;
|
|
});
|
|
|
|
document.getElementById('animate-units').addEventListener('change', (e) => {
|
|
animationPlayer.animateUnitMovements = e.target.checked;
|
|
});
|
|
|
|
document.getElementById('use-easing').addEventListener('change', (e) => {
|
|
animationPlayer.setEasing(e.target.checked);
|
|
});
|
|
|
|
document.getElementById('auto-advance').addEventListener('change', (e) => {
|
|
animationPlayer.setAutoAdvance(e.target.checked);
|
|
});
|
|
|
|
debugInfo.textContent += '\nAnimation player initialized successfully';
|
|
setTimeout(() => {
|
|
debugInfo.style.display = 'none';
|
|
}, 3000);
|
|
})
|
|
.catch(error => {
|
|
debugInfo.textContent += `\nError: ${error.message}`;
|
|
console.error('Error initializing animation:', error);
|
|
});
|
|
|
|
} catch (error) {
|
|
debugInfo.textContent += `\nError loading modules: ${error.message}`;
|
|
console.error('Error loading modules:', error);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |