cleaning
This commit is contained in:
@@ -8,64 +8,105 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎬 Визуализатор решений</h1>
|
||||
<p class="subtitle">Гонки на бумаге / Paper Racing</p>
|
||||
|
||||
<div class="nav-links">
|
||||
<a href="editor.html">🏁 Редактор карт</a>
|
||||
<a href="player.html">🎬 Визуализатор решений</a>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<h3>📂 Загрузка файлов</h3>
|
||||
<div class="buttons">
|
||||
<button class="btn-primary" id="loadMapBtn" onclick="document.getElementById('mapInput').click()">📂 Загрузить карту</button>
|
||||
<button class="btn-success" id="loadSolutionBtn" onclick="document.getElementById('solutionInput').click()">🎬 Загрузить решение</button>
|
||||
</div>
|
||||
<input type="file" id="mapInput" accept=".json" onchange="loadMap(event)">
|
||||
<input type="file" id="solutionInput" accept=".json" onchange="loadSolution(event)">
|
||||
<div class="header">
|
||||
<div class="header-title">
|
||||
<h1>🎬 Гонки на бумаге</h1>
|
||||
<p class="subtitle">Визуализатор решений</p>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="editor.html">🏁 Редактор карт</a>
|
||||
<a href="player.html" class="active">🎬 Визуализатор решений</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas-wrapper">
|
||||
<canvas id="mapCanvas"></canvas>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div class="sidebar">
|
||||
<div class="control-group">
|
||||
<h3>📂 Загрузка файлов</h3>
|
||||
<div class="buttons">
|
||||
<button class="btn-primary" id="loadMapBtn" onclick="document.getElementById('mapInput').click()">📂 Загрузить карту</button>
|
||||
<button class="btn-success" id="loadSolutionBtn" onclick="document.getElementById('solutionInput').click()">🎬 Загрузить решение</button>
|
||||
</div>
|
||||
<input type="file" id="mapInput" accept=".json" onchange="loadMap(event)">
|
||||
<input type="file" id="solutionInput" accept=".json" onchange="loadSolution(event)">
|
||||
</div>
|
||||
|
||||
<div id="playbackControls" class="visualization-panel hidden">
|
||||
<h3>🎮 Управление воспроизведением</h3>
|
||||
|
||||
<div class="playback-controls">
|
||||
<button class="playback-btn" onclick="playVisualization()" id="playBtn">▶ Play</button>
|
||||
<button class="playback-btn" onclick="pauseVisualization()" id="pauseBtn" disabled>⏸ Pause</button>
|
||||
<button class="playback-btn" onclick="resetVisualization()">⏮ Reset</button>
|
||||
<button class="playback-btn" onclick="stepBackward()">⏪ Back</button>
|
||||
<button class="playback-btn" onclick="stepForward()">⏩ Forward</button>
|
||||
|
||||
<div class="speed-control">
|
||||
<label for="speedSlider">Скорость:</label>
|
||||
<input type="range" id="speedSlider" min="1" max="10" value="5" onchange="updateSpeed()">
|
||||
<span id="speedValue">5x</span>
|
||||
<div id="playbackControls" class="visualization-panel">
|
||||
<h3>🎮 Управление воспроизведением</h3>
|
||||
|
||||
<div class="playback-controls">
|
||||
<button class="playback-btn" onclick="playVisualization()" id="playBtn" disabled>▶ Воспроизвести</button>
|
||||
<button class="playback-btn" onclick="pauseVisualization()" id="pauseBtn" disabled>⏸ Пауза</button>
|
||||
<button class="playback-btn" onclick="resetVisualization()" id="resetBtn" disabled>⏮ Сброс</button>
|
||||
<button class="playback-btn" onclick="stepBackward()" id="backBtn" disabled>⏪ Назад</button>
|
||||
<button class="playback-btn" onclick="stepForward()" id="forwardBtn" disabled>⏩ Вперёд</button>
|
||||
|
||||
<div class="speed-control">
|
||||
<div class="speed-control-header">
|
||||
<label for="speedSlider">Скорость:</label>
|
||||
<span id="speedValue">5x</span>
|
||||
</div>
|
||||
<input type="range" id="speedSlider" min="1" max="10" value="5" onchange="updateSpeed()" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="stepInfo" class="step-info">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Шаг</span>
|
||||
<span class="info-value" id="stepNumber">0 / 0</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Позиция (x, y)</span>
|
||||
<span class="info-value" id="positionValue">(0, 0)</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Скорость (vx, vy)</span>
|
||||
<span class="info-value" id="velocityValue">(0, 0)</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Ускорение (ax, ay)</span>
|
||||
<span class="info-value" id="accelerationValue">(0, 0)</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Очки</span>
|
||||
<span class="info-value" id="scoreValue">0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>📖 Легенда цветов</h3>
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color road"></div>
|
||||
<span>Дорога (0)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color stone"></div>
|
||||
<span>Камень (1)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color snow"></div>
|
||||
<span>Снег (2)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color ice"></div>
|
||||
<span>Лёд (3)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color checkpoint"></div>
|
||||
<span>Чекпоинт (4)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color start"></div>
|
||||
<span>Старт (5)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="stepInfo" class="step-info hidden">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Шаг</span>
|
||||
<span class="info-value" id="stepNumber">0 / 0</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Позиция (x, y)</span>
|
||||
<span class="info-value" id="positionValue">(0, 0)</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Скорость (vx, vy)</span>
|
||||
<span class="info-value" id="velocityValue">(0, 0)</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Ускорение (ax, ay)</span>
|
||||
<span class="info-value" id="accelerationValue">(0, 0)</span>
|
||||
<div class="canvas-wrapper">
|
||||
<canvas id="mapCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,36 +119,6 @@
|
||||
• 🔴 Красный круг - текущая позиция<br>
|
||||
• ➡️ Красная стрелка - направление и скорость движения
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>📖 Легенда цветов</h3>
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color road"></div>
|
||||
<span>Дорога (0)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color stone"></div>
|
||||
<span>Камень (1)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color snow"></div>
|
||||
<span>Снег (2)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color ice"></div>
|
||||
<span>Лёд (3)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color checkpoint"></div>
|
||||
<span>Чекпоинт (4)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color start"></div>
|
||||
<span>Старт (5)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="common.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user