<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>霧解除探索ゲーム</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
/>
<style>
body {
margin: 0;
font-family: sans-serif;
}
header {
padding: 8px 12px;
background: #222;
color: #fff;
}
#controls {
padding: 8px 12px;
background: #eee;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
#locationmap {
height: calc(100vh - 110px);
}
button {
padding: 6px 12px;
font-size: 14px;
cursor: pointer;
}
.status {
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h2 id="title">霧解除探索ゲーム</h2>
</header>
<div id="controls">
<button id="start">START</button>
<button id="stop">STOP</button>
<span id="rate" class="status">制圧率: 0%</span>
<span id="baseStatus" class="status">拠点: 0 / 0</span>
</div>
<div id="locationmap"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="fog.js"></script>
</body>
</html>
