222 lines
8.1 KiB
HTML
222 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>MountyCrawl — Le Monde Souterrain</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Écran de création du troll -->
|
||
<div id="screen-create" class="screen">
|
||
<div class="create-box">
|
||
<h1>🧌 MountyCrawl</h1>
|
||
<p class="subtitle">Le Monde Souterrain — hommage à MountyHall, la Terre des Trõlls</p>
|
||
<p class="lore">Au 24<sup>e</sup> cycle après Ragnarok, les Trõlls descendent dans le Monde Souterrain
|
||
en quête de monstres, de trésors et de gloire. Choisis ta race, jeune Trõllinet,
|
||
et pars affronter le Béhémoth qui rôde dans les profondeurs…</p>
|
||
<input type="text" id="troll-name" placeholder="Nom de ton Trõll" maxlength="20" value="Trõllinet">
|
||
<div id="race-list"></div>
|
||
<button id="btn-start" class="big-btn">⚔️ Descendre dans le Monde Souterrain</button>
|
||
<button id="btn-mp" class="big-btn">🧌🧌 Monde partagé (multijoueur) <span id="mp-info"></span></button>
|
||
<div class="menu-row">
|
||
<button id="btn-community" class="menu-btn">🌍 Niveaux de la communauté</button>
|
||
<button id="btn-editor" class="menu-btn">🛠️ Éditeur de niveaux</button>
|
||
<button id="btn-rules" class="menu-btn">📜 Règles des talents</button>
|
||
<button id="btn-treasures" class="menu-btn">🧪 Potions & Parchemins</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Écran des niveaux communautaires -->
|
||
<div id="screen-community" class="screen hidden">
|
||
<div class="create-box">
|
||
<h1>🌍 Niveaux de la communauté</h1>
|
||
<p class="subtitle">Tu y joueras avec le Trõll configuré sur l'écran d'accueil</p>
|
||
<div id="level-list"><p class="lore">Chargement…</p></div>
|
||
<button id="btn-comm-back" class="big-btn">← Retour à la Taverne</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Écran éditeur de niveaux -->
|
||
<div id="screen-editor" class="screen hidden">
|
||
<header>
|
||
<h1>🛠️ Éditeur de niveaux</h1>
|
||
<button id="ed-back" class="menu-btn">← Retour à la Taverne</button>
|
||
</header>
|
||
<div id="ed-layout">
|
||
<aside id="ed-palette">
|
||
<h3>Terrain</h3>
|
||
<div id="ed-tiles"></div>
|
||
<h3>Monstres</h3>
|
||
<select id="ed-tpl"></select>
|
||
<div id="ed-monsters"></div>
|
||
<h3>Objets</h3>
|
||
<div id="ed-items"></div>
|
||
<h3>Portes (vers un niveau publié)</h3>
|
||
<select id="ed-door-target"></select>
|
||
<div id="ed-doors"></div>
|
||
<h3>Outils</h3>
|
||
<div id="ed-tools"></div>
|
||
<h3>Mes niveaux publiés</h3>
|
||
<div id="ed-mine"></div>
|
||
</aside>
|
||
<main id="ed-main">
|
||
<canvas id="ed-map" width="672" height="480"></canvas>
|
||
<div id="ed-meta">
|
||
<input id="ed-name" placeholder="Nom du niveau" maxlength="40">
|
||
<input id="ed-author" placeholder="Ton pseudo d'auteur" maxlength="30">
|
||
</div>
|
||
<div id="ed-actions">
|
||
<button id="ed-test" class="big-btn">▶️ Tester le niveau</button>
|
||
<button id="ed-publish" class="big-btn">🌍 Publier en ligne</button>
|
||
</div>
|
||
<div id="ed-status"></div>
|
||
<div class="help" id="ed-help">
|
||
<p>Clic / glisser : peindre la sélection · Un niveau publiable a un point de départ 🧌 et au moins un monstre, une porte ou une sortie.</p>
|
||
<p>Victoire : atteindre la sortie ▼ si elle existe, sinon terrasser tous les monstres. Les portes 🚪 téléportent vers un autre niveau publié (PV, PI et équipement conservés) — idéal pour chaîner une campagne.</p>
|
||
<p>Tes niveaux publiés restent modifiables depuis « Mes niveaux publiés » (la clé d'auteur est gardée par ton navigateur).</p>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Écran de jeu -->
|
||
<div id="screen-game" class="screen hidden">
|
||
<header>
|
||
<h1>🧌 MountyCrawl</h1>
|
||
<div class="header-right">
|
||
<div id="depth-label">Profondeur −1</div>
|
||
<button id="btn-rules-game" class="menu-btn">📜 Règles</button>
|
||
<button id="btn-treasures-game" class="menu-btn">🧪 Trésors</button>
|
||
</div>
|
||
</header>
|
||
<div id="layout">
|
||
<aside id="panel-left">
|
||
<h2 id="troll-title"></h2>
|
||
<div class="panel-tabs" role="tablist">
|
||
<button type="button" id="tab-stats" class="panel-tab active" role="tab" aria-selected="true">Caractéristiques</button>
|
||
<button type="button" id="tab-effects" class="panel-tab" role="tab" aria-selected="false">Effets <span id="fx-badge" class="fx-badge hidden"></span></button>
|
||
</div>
|
||
<div id="panel-tab-stats" role="tabpanel">
|
||
<div id="stats"></div>
|
||
<h3>S'améliorer (PI)</h3>
|
||
<div id="improve"></div>
|
||
</div>
|
||
<div id="panel-tab-effects" class="hidden" role="tabpanel">
|
||
<div id="effects-panel"></div>
|
||
</div>
|
||
</aside>
|
||
<main id="panel-center">
|
||
<canvas id="map" width="672" height="480"></canvas>
|
||
<div id="pa-bar"></div>
|
||
<div id="actions"></div>
|
||
</main>
|
||
<aside id="panel-right">
|
||
<h3>Équipement</h3>
|
||
<div id="equipment"></div>
|
||
<h3>Sac</h3>
|
||
<div id="inventory"></div>
|
||
<h3>Aide</h3>
|
||
<div class="help">
|
||
<p>ZQSD / flèches : se déplacer (1 PA)</p>
|
||
<p>Marcher sur un ennemi : attaquer (3 PA)</p>
|
||
<p>Espace : passer la DLA</p>
|
||
<p>La DLA passée, les monstres agissent et tu régénères.</p>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
<div id="bottom-row">
|
||
<div id="log"></div>
|
||
<div id="combat-detail">
|
||
<div class="cd-header">⚔️ Détail du combat</div>
|
||
<div class="cd-empty">— Aucun combat pour l'instant —</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Écran multijoueur : monde partagé persistant -->
|
||
<div id="screen-mp" class="screen hidden">
|
||
<header>
|
||
<h1>🧌🧌 Le Monde Souterrain partagé</h1>
|
||
<div class="header-right">
|
||
<div id="mp-status">Connexion…</div>
|
||
<button id="mp-leave" class="menu-btn">← Quitter</button>
|
||
</div>
|
||
</header>
|
||
<div id="layout">
|
||
<aside id="panel-left">
|
||
<h2 id="mp-troll-title"></h2>
|
||
<div id="mp-stats"></div>
|
||
<h3>S'améliorer (PI)</h3>
|
||
<div id="mp-improve"></div>
|
||
<h3>Effets actifs</h3>
|
||
<div id="mp-effects"></div>
|
||
</aside>
|
||
<main id="panel-center">
|
||
<canvas id="mp-map" width="960" height="672"></canvas>
|
||
<div id="mp-pa-bar"></div>
|
||
<div id="mp-actions"></div>
|
||
</main>
|
||
<aside id="panel-right">
|
||
<h3>Équipement</h3>
|
||
<div id="mp-equipment"></div>
|
||
<h3>Sac</h3>
|
||
<div id="mp-inventory"></div>
|
||
<h3>Aide</h3>
|
||
<div class="help">
|
||
<p>ZQSD / flèches : se déplacer (1 PA) — marcher sur un monstre l'attaque (3 PA)</p>
|
||
<p>Tes PA se rechargent à ta DLA (compte à rebours en haut).</p>
|
||
<p>Le monde vit en continu : chaque monstre agit à sa propre DLA, même quand tu ne regardes pas !</p>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
<div id="bottom-row">
|
||
<div id="mp-log"></div>
|
||
<div id="mp-world-log">
|
||
<div class="cd-header">🌍 Échos du Monde Souterrain</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Écran des règles des talents -->
|
||
<div id="screen-rules" class="screen hidden">
|
||
<header>
|
||
<h1>📜 Règles des talents</h1>
|
||
<button id="rules-back" class="menu-btn">← Retour</button>
|
||
</header>
|
||
<div id="rules-body"></div>
|
||
</div>
|
||
|
||
<!-- Écran des trésors : potions et parchemins -->
|
||
<div id="screen-treasures" class="screen hidden">
|
||
<header>
|
||
<h1>🧪 Trésors du Hall — Potions & Parchemins</h1>
|
||
<button id="treasures-back" class="menu-btn">← Retour</button>
|
||
</header>
|
||
<div id="treasures-body"></div>
|
||
</div>
|
||
|
||
<!-- Écran de fin -->
|
||
<div id="screen-end" class="screen hidden">
|
||
<div class="create-box">
|
||
<h1 id="end-title"></h1>
|
||
<p id="end-text" class="lore"></p>
|
||
<button id="btn-restart" class="big-btn">🍺 Retour à la Taverne (rejouer)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<footer id="app-footer" class="app-footer" aria-label="Version"></footer>
|
||
|
||
<script src="js/potions.js"></script>
|
||
<script src="js/scrolls.js"></script>
|
||
<script src="js/gear.js"></script>
|
||
<script src="js/game.js"></script>
|
||
<script src="js/editor.js"></script>
|
||
<script src="js/mp-client.js"></script>
|
||
<script src="js/rules.js"></script>
|
||
<script src="js/treasures.js"></script>
|
||
</body>
|
||
</html>
|