184 lines
7.4 KiB
HTML
184 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SOULGATE</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Cinzel:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"pixi.js": "https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.mjs"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<canvas id="game-canvas"></canvas>
|
|
|
|
<div id="home-screen">
|
|
|
|
<div class="home-top-bar">
|
|
<button id="settings-btn" class="icon-btn" title="Settings">⚙</button>
|
|
</div>
|
|
|
|
<div class="home-center">
|
|
<div class="home-panel">
|
|
<h1 class="home-title">SOULGATE</h1>
|
|
<p class="home-subtitle">GUARDIANS OF SOULS</p>
|
|
<div class="home-divider"></div>
|
|
|
|
<div id="home-username" class="home-section">
|
|
<input id="username-input" type="text" class="mc-input" placeholder="Your name..." maxlength="20" autofocus>
|
|
<button id="username-btn" class="mc-btn mc-btn-sm">OK</button>
|
|
</div>
|
|
|
|
<div id="home-buttons" class="home-section hidden">
|
|
<button id="join-game-btn" class="mc-btn">Join Game</button>
|
|
<button id="create-game-btn" class="mc-btn">Create Game</button>
|
|
<button id="leaderboard-btn" class="mc-btn">Leaderboard</button>
|
|
</div>
|
|
|
|
<div id="join-row" class="home-section hidden">
|
|
<input id="code-input" type="text" class="mc-input mc-input-code" placeholder="CODE" maxlength="6">
|
|
<button id="join-confirm-btn" class="mc-btn mc-btn-sm">Join</button>
|
|
<button id="join-cancel-btn" class="mc-btn mc-btn-sm mc-btn-cancel">X</button>
|
|
</div>
|
|
|
|
<div id="home-status" class="home-status">Connecting...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="home-bottom-bar">
|
|
<a href="https://discord.com" target="_blank" rel="noopener" class="social-link" title="Discord"><img src="assets/discord.svg" alt="Discord" class="social-icon"></a>
|
|
<a href="https://x.com" target="_blank" rel="noopener" class="social-link" title="Twitter/X"><img src="assets/twitter.png" alt="Twitter/X" class="social-icon social-icon-invert"></a>
|
|
<span class="version-label">by Ylies Amara</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="lobby-screen" class="hidden">
|
|
<div class="lobby-panel">
|
|
<div class="lobby-header">
|
|
<button id="lobby-back-btn" class="mc-btn mc-btn-sm">Back</button>
|
|
<div id="lobby-code" class="lobby-code">
|
|
Code : <strong id="code-display">------</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="lobby-section-title">Choose your class</p>
|
|
<div class="class-btns">
|
|
<button class="class-btn" data-class="kael">
|
|
<span class="class-name">Kael</span>
|
|
<span class="class-role">Tank</span>
|
|
</button>
|
|
<button class="class-btn" data-class="seris">
|
|
<span class="class-name">Seris</span>
|
|
<span class="class-role">Assassin</span>
|
|
</button>
|
|
<button class="class-btn" data-class="aldric">
|
|
<span class="class-name">Aldric</span>
|
|
<span class="class-role">Mage</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="players-lobby" class="players-lobby"></div>
|
|
|
|
<div class="lobby-actions">
|
|
<button id="ready-btn" class="mc-btn" disabled>Ready</button>
|
|
<button id="start-btn" class="mc-btn mc-btn-gold hidden">Start Game</button>
|
|
</div>
|
|
|
|
<div id="overlay-msg" class="msg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loading-screen" class="hidden">
|
|
<div class="loading-text">CHARGEMENT...</div>
|
|
</div>
|
|
|
|
<button id="fullscreen-btn" class="fullscreen-btn hidden" title="Plein ecran">⛶</button>
|
|
|
|
|
|
<div id="boss-bar" class="hidden">
|
|
<div class="boss-bar-box">
|
|
<div class="boss-bar-name" id="boss-bar-name">VEXARIS</div>
|
|
<div class="boss-bar-track"><div class="boss-bar-fill" id="boss-bar-fill"></div></div>
|
|
<div class="boss-bar-hp" id="boss-bar-hp">600 / 600</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="upgrade-panel" class="hidden">
|
|
<div class="upgrade-box">
|
|
<div class="upgrade-title">PREPARATION — <span id="prep-timer">20</span>s</div>
|
|
<div class="upgrade-souls">Ames : <strong id="soul-count">0</strong></div>
|
|
<div id="upgrade-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="player-hud" class="hidden">
|
|
<div id="hud-header">
|
|
<span id="hud-class-name">KAEL</span>
|
|
<span id="hud-souls">Ames : 0</span>
|
|
</div>
|
|
<div id="hud-hp-wrap"><div id="hud-hp-fill"></div><span id="hud-hp-text">150 / 150</span></div>
|
|
<div id="hud-skills">
|
|
<div class="hud-skill" id="hud-s1"><div class="cd-fill"></div><span class="key">1</span></div>
|
|
<div class="hud-skill" id="hud-s2"><div class="cd-fill"></div><span class="key">2</span></div>
|
|
<div class="hud-skill" id="hud-se"><div class="cd-fill"></div><span class="key">E</span></div>
|
|
</div>
|
|
<div id="hud-buffs"></div>
|
|
</div>
|
|
|
|
<div id="soulgate-hud" class="hidden">
|
|
<span class="sg-label">SOULGATE</span>
|
|
<div id="sg-track"><div id="sg-fill"></div></div>
|
|
<span id="sg-hp-text">100 / 100</span>
|
|
</div>
|
|
|
|
<div id="wave-hud" class="hidden">
|
|
<div id="wave-label">Vague 1 / 3</div>
|
|
<div id="wave-state-label">Combat</div>
|
|
<div id="wave-enemies">Ennemis : 0</div>
|
|
</div>
|
|
|
|
<div id="leaderboard-screen" class="hidden">
|
|
<div class="lb-panel">
|
|
<div class="lb-header">
|
|
<button id="lb-back-btn" class="mc-btn mc-btn-sm">← Retour</button>
|
|
<h2 class="lb-title">LEADERBOARD</h2>
|
|
</div>
|
|
<div class="lb-table-wrap">
|
|
<table class="lb-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Équipe</th>
|
|
<th>Score</th>
|
|
<th>Temps</th>
|
|
<th>Vagues</th>
|
|
<th>Joueurs</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="lb-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="endgame-overlay" class="hidden">
|
|
<div id="endgame-box">
|
|
<div id="endgame-title"></div>
|
|
<div id="endgame-sub"></div>
|
|
<div id="endgame-score" class="endgame-stat"></div>
|
|
<div id="endgame-time" class="endgame-stat"></div>
|
|
<div id="endgame-waves" class="endgame-stat"></div>
|
|
<div id="endgame-form"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="js/main.js"></script>
|
|
</body>
|
|
</html> |
