<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RPG Maker MZ Mock Client</title>
<style>
body {
font-family: sans-serif;
background-color: #2c3e50;
color: #ecf0f1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#game-screen {
width: 816px;
height: 624px;
background-color: #34495e;
border: 4px solid #95a5a6;
position: relative;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.window {
background-color: rgba(0, 0, 0, 0.6);
border: 2px solid #fff;
border-radius: 4px;
padding: 10px;
position: absolute;
}
#status-window {
top: 20px;
left: 20px;
width: 300px;
height: 400px;
}
h2 {
margin-top: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
padding-bottom: 5px;
}
.actor-info {
margin-bottom: 15px;
padding: 5px;
background: rgba(255, 255, 255, 0.1);
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #e67e22;
border: none;
color: white;
border-radius: 4px;
}
button:hover {
background-color: #d35400;
}
</style>
</head>
<body>
<div id="game-screen">
<div id="status-window" class="window">
<h2>Status Menu</h2>
<div id="actors-list">Loading...</div>
</div>
</div>
<button onclick="location.reload()">Reload Game (F5)</button>
<script>
async function loadGameData() {
try {
// Load System data to get currency, etc. (Mocking usage)
const systemRes = await fetch('data/System.json?t=' + Date.now());
const systemData = await systemRes.json();
// Load Actors data
const actorsRes = await fetch('data/Actors.json?t=' + Date.now());
const actorsData = await actorsRes.json();
const listEl = document.getElementById('actors-list');
listEl.innerHTML = '';
// Actors.json index 0 is null
for (let i = 1; i < actorsData.length; i++) {
const actor = actorsData[i];
if (!actor) continue;
const div = document.createElement('div');
div.className = 'actor-info';
div.innerHTML = `
<strong>${actor.name}</strong><br>
Class ID: ${actor.classId}<br>
Level: ${actor.level || 1}
`;
listEl.appendChild(div);
}
} catch (error) {
console.error(error);
document.getElementById('actors-list').innerText = 'Error loading data. Ensure server is running.';
}
}
loadGameData();
</script>
</body>
</html>
