percoandClaude Fable 5
103be8e9c7
Éditeur visuel (terrain, monstres avec gabarits, objets, départ, sortie), test en un clic, publication via une API node sans dépendance (server.js, validation serveur, stockage JSON sur volume), écran « Niveaux de la communauté » et liens partageables ?level=<id>. Le conteneur passe de nginx à node:22-alpine. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
124 lines
4.2 KiB
HTML
124 lines
4.2 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>
|
||
<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>
|
||
</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>Outils</h3>
|
||
<div id="ed-tools"></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.</p>
|
||
<p>La sortie ▼ est optionnelle : sans elle, il faut terrasser tous les monstres pour gagner.</p>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Écran de jeu -->
|
||
<div id="screen-game" class="screen hidden">
|
||
<header>
|
||
<h1>🧌 MountyCrawl</h1>
|
||
<div id="depth-label">Profondeur −1</div>
|
||
</header>
|
||
<div id="layout">
|
||
<aside id="panel-left">
|
||
<h2 id="troll-title"></h2>
|
||
<div id="stats"></div>
|
||
<h3>S'améliorer (PI)</h3>
|
||
<div id="improve"></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="log"></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>
|
||
|
||
<script src="js/game.js"></script>
|
||
<script src="js/editor.js"></script>
|
||
</body>
|
||
</html>
|