init commit
This commit is contained in:
commit
f716b05e18
7 changed files with 2766 additions and 0 deletions
156
index.html
Normal file
156
index.html
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Geo-Step - Настольная игра-путешествие по миру</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="game-container">
|
||||
<!-- Верхняя панель -->
|
||||
<header class="game-header">
|
||||
<div class="header-left">
|
||||
<h1>🌍 Geo-Step Game</h1>
|
||||
<div class="game-subtitle">Настольная игра по изучению карты мира</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="current-player" id="currentPlayer">
|
||||
<span class="player-label">Ходит:</span>
|
||||
<span class="player-name" id="currentPlayerName">Игрок 1</span>
|
||||
</div>
|
||||
<div class="current-player" style="background: rgba(46, 204, 113, 0.2);">
|
||||
<span class="player-label">🏆 Цель:</span>
|
||||
<span class="player-name">5000</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Модальное окно начала игры -->
|
||||
<div id="startModal" class="modal" style="display: block;">
|
||||
<div class="modal-content">
|
||||
<h2>🎮 Начало игры</h2>
|
||||
<div class="start-game-form">
|
||||
<div class="form-group">
|
||||
<label>Количество игроков:</label>
|
||||
<div class="player-count-buttons">
|
||||
<button class="player-count-btn active" data-count="1">1</button>
|
||||
<button class="player-count-btn" data-count="2">2</button>
|
||||
<button class="player-count-btn" data-count="3">3</button>
|
||||
<button class="player-count-btn" data-count="4">4</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="playerNamesContainer">
|
||||
<div class="form-group">
|
||||
<label>Имя игрока 1:</label>
|
||||
<input type="text" id="player1Name" value="Игрок 1" class="player-name-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="startGameBtn" class="btn-primary btn-large">Начать игру</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Основная область игры -->
|
||||
<div class="game-main">
|
||||
<!-- Карта мира -->
|
||||
<div class="map-container">
|
||||
<canvas id="worldMap"></canvas>
|
||||
<div class="map-legend">
|
||||
<h4>Легенда</h4>
|
||||
<div class="legend-item">
|
||||
<span style="display: inline-block; width: 12px; height: 12px; background: #457b9d; border-radius: 50%; border: 2px solid white;"></span>
|
||||
Порт
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span style="display: inline-block; width: 12px; height: 12px; background: #e63946; border-radius: 50%; border: 2px solid white;"></span>
|
||||
Город
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span style="display: inline-block; width: 12px; height: 12px; background: #f77f00; border-radius: 50%; border: 2px solid white;"></span>
|
||||
Хаб
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span style="display: inline-block; width: 8px; height: 8px; background: white; border-radius: 50%; border: 1px solid #999;"></span>
|
||||
Морской путь
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span style="display: inline-block; width: 12px; height: 12px; background: #27ae60; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 10px rgba(46,204,113,0.5);"></span>
|
||||
Пункт назначения
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Боковая панель с информацией -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h2>👥 Игроки</h2>
|
||||
</div>
|
||||
|
||||
<div class="players-list" id="playersList">
|
||||
<!-- Игроки будут добавлены динамически -->
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<h3>🎲 Бросить кости</h3>
|
||||
<div class="dice-container">
|
||||
<div class="dice" id="dice1">?</div>
|
||||
<div class="dice" id="dice2">?</div>
|
||||
</div>
|
||||
<button id="rollDiceBtn" class="btn-primary btn-block">🎲 Бросить кости</button>
|
||||
<div class="dice-result" id="diceResult" style="display: none;">
|
||||
<p>Выпало: <span id="diceTotal" class="dice-total">0</span></p>
|
||||
<p class="dice-hint">Выберите куда пойти</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<h3>📋 Текущее задание</h3>
|
||||
<div class="current-mission-box" id="currentMissionBox">
|
||||
<p class="no-mission">Нет активного задания</p>
|
||||
</div>
|
||||
<button id="newMissionBtn" class="btn-secondary btn-block">Взять новое задание</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<h3>ℹ️ Информация о локации</h3>
|
||||
<div class="info-box" id="locationInfo">
|
||||
<p>Кликните на точку на карте</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<button id="endTurnBtn" class="btn-end-turn btn-block" disabled>Закончить ход</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно выбора задания -->
|
||||
<div id="missionModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>📦 Выберите задание</h2>
|
||||
<div id="missionsListModal" class="missions-grid">
|
||||
<!-- Задания будут добавлены динамически -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно завершения задания -->
|
||||
<div id="completeModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>🎉 Задание выполнено!</h2>
|
||||
<div id="completeModalBody"></div>
|
||||
<button id="closeCompleteModal" class="btn-primary">Продолжить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="data.js"></script>
|
||||
<script src="map.js"></script>
|
||||
<script src="game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue