129 lines
4.0 KiB
HTML
129 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>hoel</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<svg id="gear-icon" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M19.4 15
|
|
a1.7 1.7 0 0 0 .3 1.8l.1.1
|
|
a2 2 0 0 1-2.8 2.8l-.1-.1
|
|
a1.7 1.7 0 0 0-1.8-.3
|
|
a1.7 1.7 0 0 0-1 1.5V21
|
|
a2 2 0 0 1-4 0v-.1
|
|
a1.7 1.7 0 0 0-1-1.5
|
|
a1.7 1.7 0 0 0-1.8.3l-.1.1
|
|
a2 2 0 0 1-2.8-2.8l.1-.1
|
|
a1.7 1.7 0 0 0 .3-1.8
|
|
a1.7 1.7 0 0 0-1.5-1H3
|
|
a2 2 0 0 1 0-4h.1
|
|
a1.7 1.7 0 0 0 1.5-1
|
|
a1.7 1.7 0 0 0-.3-1.8l-.1-.1
|
|
a2 2 0 0 1 2.8-2.8l.1.1
|
|
a1.7 1.7 0 0 0 1.8.3
|
|
a1.7 1.7 0 0 0 1-1.5V3
|
|
a2 2 0 0 1 4 0v.1
|
|
a1.7 1.7 0 0 0 1 1.5
|
|
a1.7 1.7 0 0 0 1.8-.3l.1-.1
|
|
a2 2 0 0 1 2.8 2.8l-.1.1
|
|
a1.7 1.7 0 0 0-.3 1.8
|
|
a1.7 1.7 0 0 0 1.5 1H21
|
|
a2 2 0 0 1 0 4h-.1
|
|
a1.7 1.7 0 0 0-1.5 1z"></path>
|
|
</svg>
|
|
|
|
<div id="settings-menu">
|
|
<div class="menu-title">Game Settings</div>
|
|
<div class="menu-text">
|
|
This game uses a browser cookie to save your progress across sessions.
|
|
The cookie stores your black hole mass, consumed resources, upgrade levels and spawn timers.
|
|
</div>
|
|
<div class="menu-text">
|
|
By using this website, you consent to storing a cookie on your device.
|
|
</div>
|
|
<button id="reset-btn" class="menu-btn danger">Reset</button>
|
|
<div id="save-status" style="margin-top: 12px; font-size: 10px; color: rgba(100, 200, 100, 0.6);"></div>
|
|
</div>
|
|
|
|
<div id="stats-panel">
|
|
<div id="total-mass"></div>
|
|
</br>
|
|
<div id="total-level" class="stat-line"></div>
|
|
</div>
|
|
|
|
<div id="upgrade-panel">
|
|
<div class="upgrade-row">
|
|
</br>
|
|
<div id="spendable-mass">Available to Spend: 0 kg</div>
|
|
</br>
|
|
<div id="asteroid-level"></div>
|
|
<button id="asteroid-upgrade-btn" class="upgrade-btn" disabled>Upgrade (Cost: 1 tonne)</button>
|
|
</div>
|
|
<div class="upgrade-row">
|
|
<div id="comet-level"></div>
|
|
<button id="comet-upgrade-btn" class="upgrade-btn" disabled>Upgrade (Cost: 10 tonnes)</button>
|
|
</div>
|
|
<div class="upgrade-row">
|
|
<div id="planet-level"></div>
|
|
<button id="planet-upgrade-btn" class="upgrade-btn" disabled>Upgrade (Cost: 100 tonnes)</button>
|
|
</div>
|
|
<div class="upgrade-row">
|
|
<div id="giant-level"></div>
|
|
<button id="giant-upgrade-btn" class="upgrade-btn" disabled>Upgrade (Cost: 1000 tonnes)</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaderboard Toggle -->
|
|
<div id="leaderboardToggle" class="score-icon">
|
|
<svg viewBox="0 0 24 24">
|
|
<!-- Large circle -->
|
|
<path d="
|
|
M 6 6
|
|
a 4 4 0 1 0 8 0
|
|
a 4 4 0 1 0 -8 0
|
|
" stroke="#fff"/>
|
|
|
|
<!-- Medium circle -->
|
|
<path d="
|
|
M 14 13
|
|
a 3 3 0 1 0 6 0
|
|
a 3 3 0 1 0 -6 0
|
|
" stroke="#fff"/>
|
|
|
|
<!-- Small circle -->
|
|
<path d="
|
|
M 5 16.5
|
|
a 4 4 0 1 0 8 0
|
|
a 4 4 0 1 0 -8 0
|
|
" stroke="#fff"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Leaderboard Panel -->
|
|
<div id="leaderboardPanel" class="modal">
|
|
<div class="modal-content">
|
|
<div class="leaderboard-title">
|
|
<span class="rank" style="width:20px;"></span>
|
|
<span class="name" style="flex:1; min-width:80px;">Name</span>
|
|
<span id="sortMass" class="value mass" style="min-width: 115px; cursor:pointer">Mass</span>
|
|
<span id="sortAge" class="value age" style="padding-right: 30px; cursor:pointer">Age</span>
|
|
</div>
|
|
<div id="leaderboardList"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<canvas id="space"></canvas>
|
|
|
|
<script src="js/config.js"></script>
|
|
<script src="js/helpers.js"></script>
|
|
<script src="js/entities.js"></script>
|
|
<script src="js/storage.js"></script>
|
|
<script src="js/ui.js"></script>
|
|
<script src="js/game.js"></script>
|
|
</body>
|
|
</html>
|