107 lines
6.6 KiB
HTML
107 lines
6.6 KiB
HTML
<!-- file: Web/game-snake-poc/frontend/main.html -->
|
|
<!-- version: 2 -->
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport">
|
|
<meta content="#593196" name="theme-color">
|
|
<link rel="stylesheet" href="sass/main.scss">
|
|
<title>Snake POC — Web direct</title>
|
|
</head>
|
|
|
|
<body>
|
|
<header class="app-header">
|
|
<nav class="navbar h-100 py-0 bg-light text-dark">
|
|
<div class="container-fluid px-3 px-md-4 flex-nowrap">
|
|
<div class="navbar-brand d-flex align-items-center me-3 flex-nowrap min-w-0">
|
|
<span class="app-logo d-inline-flex align-items-center justify-content-center text-primary" aria-hidden="true">
|
|
<i class="fa-solid fa-gamepad"></i>
|
|
</span>
|
|
<span class="ps-2 fs-4 fw-semibold text-primary text-nowrap">Snake POC</span>
|
|
<span class="mx-2 fs-5 text-body-secondary d-none d-sm-inline" aria-hidden="true">—</span>
|
|
<span class="fs-5 text-body text-nowrap d-none d-sm-inline">Web direct</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 ms-auto">
|
|
<span class="badge text-bg-light border text-dark d-none d-md-inline">Rust/WASM</span>
|
|
<span id="runtime-status" class="badge text-bg-secondary" role="status" aria-live="polite">Initialisation…</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="app-main container-fluid p-0" data-simplebar>
|
|
<section class="app-content">
|
|
<div class="container-fluid px-3 px-md-4 py-3 py-md-4">
|
|
<div class="card app-shell-card mx-auto shadow-sm border-0">
|
|
<div class="card-body p-3 p-md-4">
|
|
<div class="d-flex align-items-start justify-content-between gap-3 flex-wrap mb-3">
|
|
<div>
|
|
<h1 class="h3 mb-1">Snake</h1>
|
|
<p class="text-body-secondary mb-0">Gameplay Rust portable, adapter WebAssembly et rendu Canvas piloté par TypeScript.</p>
|
|
</div>
|
|
<div class="d-flex gap-2 flex-wrap" aria-label="État de la partie">
|
|
<output id="score" class="badge text-bg-primary">Score : 0</output>
|
|
<output id="length" class="badge text-bg-info">Longueur : 0</output>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 g-lg-4 align-items-start">
|
|
<div class="col-12 col-lg-8">
|
|
<div class="card border-primary-subtle shadow-sm">
|
|
<div class="card-body p-2 p-sm-3">
|
|
<div class="game-stage">
|
|
<canvas id="game" width="640" height="640" tabindex="0" aria-label="Zone de jeu Snake"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-4">
|
|
<div class="card shadow-sm app-controls-card">
|
|
<div class="card-header d-flex align-items-center justify-content-between gap-2">
|
|
<span class="fw-semibold"><i class="fa-solid fa-keyboard me-2" aria-hidden="true"></i>Contrôles</span>
|
|
<span class="small text-body-secondary">clavier / tactile</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="small text-body-secondary">Utilisez les flèches, WASD, ZQSD ou les boutons directionnels.</p>
|
|
<div class="direction-pad mx-auto" aria-label="Contrôles directionnels tactiles">
|
|
<button class="btn btn-outline-primary direction-up" type="button" data-direction="up" aria-label="Haut">
|
|
<i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
|
|
</button>
|
|
<button class="btn btn-outline-primary direction-left" type="button" data-direction="left" aria-label="Gauche">
|
|
<i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
|
|
</button>
|
|
<button class="btn btn-outline-primary direction-down" type="button" data-direction="down" aria-label="Bas">
|
|
<i class="fa-solid fa-arrow-down" aria-hidden="true"></i>
|
|
</button>
|
|
<button class="btn btn-outline-primary direction-right" type="button" data-direction="right" aria-label="Droite">
|
|
<i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
<div class="alert alert-info small mt-3 mb-0" role="note">
|
|
Les entrées ne font pas avancer la simulation : elles sont consommées au prochain <code>tick()</code> WASM.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p id="startup-error" class="alert alert-danger mt-3 mb-0" role="alert" hidden></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="app-footer bg-dark text-light">
|
|
<div class="container h-100 d-flex align-items-center justify-content-center">
|
|
<small>© 2026 SASEDEV</small>
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="module" src="ts/main.ts" defer></script>
|
|
</body>
|
|
</html>
|