mirror of
https://github.com/GoodStartLabs/AI_Diplomacy.git
synced 2026-04-23 16:59:10 +00:00
175 lines
No EOL
4.7 KiB
HTML
175 lines
No EOL
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple Diplomacy Viewer</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 30px;
|
|
}
|
|
button {
|
|
padding: 12px 20px;
|
|
background-color: #4a5568;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin: 10px;
|
|
}
|
|
button:hover {
|
|
background-color: #2d3748;
|
|
}
|
|
#status {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background-color: #e6f7ff;
|
|
border-left: 4px solid #1890ff;
|
|
text-align: left;
|
|
}
|
|
#game-preview {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background-color: #f0f0f0;
|
|
border-radius: 5px;
|
|
text-align: left;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
#file-input {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Diplomacy Game Viewer</h1>
|
|
|
|
<p>Load a Diplomacy game file to view its contents</p>
|
|
|
|
<button id="load-btn">Load Game File</button>
|
|
<input type="file" id="file-input" accept=".json,.lmvsgame">
|
|
|
|
<div id="status">Ready to load file...</div>
|
|
|
|
<div id="game-preview"></div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Elements
|
|
const loadBtn = document.getElementById('load-btn');
|
|
const fileInput = document.getElementById('file-input');
|
|
const status = document.getElementById('status');
|
|
const gamePreview = document.getElementById('game-preview');
|
|
|
|
// Event listeners
|
|
loadBtn.addEventListener('click', function() {
|
|
fileInput.click();
|
|
});
|
|
|
|
fileInput.addEventListener('change', function(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) {
|
|
status.textContent = 'No file selected';
|
|
return;
|
|
}
|
|
|
|
status.textContent = `Loading file: ${file.name}...`;
|
|
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = function() {
|
|
try {
|
|
const data = JSON.parse(reader.result);
|
|
processGameFile(data);
|
|
} catch (error) {
|
|
status.textContent = `Error parsing file: ${error.message}`;
|
|
}
|
|
};
|
|
|
|
reader.onerror = function() {
|
|
status.textContent = 'Error reading file';
|
|
};
|
|
|
|
reader.readAsText(file);
|
|
});
|
|
|
|
// Process game file
|
|
function processGameFile(data) {
|
|
// Detect file type
|
|
let gameType = 'unknown';
|
|
let phaseCount = 0;
|
|
|
|
if (data.rounds && Array.isArray(data.rounds)) {
|
|
gameType = 'AI Diplomacy Results';
|
|
phaseCount = data.rounds.length;
|
|
} else if (data.phases && Array.isArray(data.phases)) {
|
|
gameType = 'Standard Game Format';
|
|
phaseCount = data.phases.length;
|
|
} else if (data.state_history) {
|
|
gameType = 'Legacy Format';
|
|
phaseCount = Object.keys(data.state_history).length;
|
|
}
|
|
|
|
// Update status
|
|
status.textContent = `File loaded successfully!
|
|
Type: ${gameType}
|
|
Phases: ${phaseCount}`;
|
|
|
|
// Create preview
|
|
let preview = '';
|
|
|
|
if (gameType === 'AI Diplomacy Results' && data.rounds) {
|
|
// Sample the first round
|
|
const round = data.rounds[0];
|
|
preview += `<h3>Sample Round: ${round.name || 'Unnamed'}</h3>`;
|
|
|
|
if (round.state && round.state.units) {
|
|
preview += '<h4>Units:</h4><ul>';
|
|
for (const [power, units] of Object.entries(round.state.units)) {
|
|
if (Array.isArray(units)) {
|
|
units.forEach(unit => {
|
|
preview += `<li>${power}: ${unit}</li>`;
|
|
});
|
|
}
|
|
}
|
|
preview += '</ul>';
|
|
}
|
|
|
|
if (round.orders) {
|
|
preview += '<h4>Orders:</h4><ul>';
|
|
for (const [power, orders] of Object.entries(round.orders)) {
|
|
if (Array.isArray(orders)) {
|
|
orders.forEach(order => {
|
|
preview += `<li>${power}: ${order}</li>`;
|
|
});
|
|
}
|
|
}
|
|
preview += '</ul>';
|
|
}
|
|
}
|
|
|
|
gamePreview.innerHTML = preview;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |