felixfoertsch/impstr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rewrite impstr in typescript + tailwind, deploy as static pwa

Browse Source
This commit is contained in:
Felix Förtsch
2026-02-26 09:12:28 +01:00
parent 3ccc3c931f
commit 99a81345b6
20 changed files with 788 additions and 769 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
index.html
View File

@@ -1,145 +0,0 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#f8f3e7" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Imposter</title>
<link rel="stylesheet" href="styles.css" />
<link rel="manifest" href="manifest.json" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<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=Unbounded:wght@300;500;700&family=Space+Grotesk:wght@400;600&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main class="app">
<section class="screen" id="setup">
<header class="hero">
<div class="hero__tag">Handy weiterreichen</div>
<h1>Imposter</h1>
<p>
Trage Spieler ein, starte die Runde, und zeige jedem sein
Wort oder "IMPOSTER". Danach findet ihr heraus, wer das Wort
nicht kennt.
</p>
</header>
<div class="card">
<h2>Spieler</h2>
<div class="input-row">
<input
id="player-input"
type="text"
placeholder="Name eingeben"
autocomplete="off"
/>
<button id="add-player" class="btn">Hinzufuegen</button>
</div>
<ul id="player-list" class="player-list"></ul>
<div class="actions">
<button id="clear-players" class="btn btn--ghost">
Liste leeren
</button>
<button id="start-game" class="btn btn--primary">
Runde starten
</button>
</div>
<p id="setup-hint" class="hint">Mindestens 3 Spieler.</p>
</div>
</section>
<section class="screen hidden" id="round">
<div class="card">
<div class="round-header">
<div class="round-count" id="round-count">Spieler 1 / 1</div>
<button id="restart" class="btn btn--ghost">Neue Runde</button>
</div>
<div id="round-screen" class="pass-screen">
<h2>Phase 1: Zuweisung</h2>
<div class="player-chip" id="current-player">Spieler</div>
<div class="flip-card" id="reveal-card">
<div class="flip-card__inner">
<div class="flip-card__front">
<div class="reveal-label">Antippen zum Aufdecken</div>
</div>
<div class="flip-card__back">
<div class="reveal-label">Dein Hinweis</div>
<div class="reveal-word" id="reveal-word">WORT</div>
</div>
</div>
</div>
<p class="hint">
Tippe auf die Karte, um dein Wort zu sehen. Gib das Handy
danach weiter.
</p>
<div class="actions actions--end">
<button id="handoff" class="btn btn--primary btn--big">
Weitergeben
</button>
</div>
</div>
</div>
</section>
<section class="screen hidden" id="discussion">
<div class="card">
<div class="round-header">
<div class="round-count" id="discussion-count">
Diskussion 1 / 1
</div>
<button id="discussion-restart" class="btn btn--ghost">
Neue Runde
</button>
</div>
<div class="pass-screen">
<h2>Wer ist dran?</h2>
<div
class="player-chip player-chip--large"
id="discussion-player"
>
Spieler
</div>
<p class="hint">Gib das Handy weiter.</p>
<div class="actions">
<button id="imposter-found" class="btn btn--ghost">
Imposter gefunden
</button>
<button
id="discussion-next"
class="btn btn--primary btn--big"
>
Weitergeben
</button>
</div>
</div>
</div>
</section>
<section class="screen hidden" id="done">
<div class="card">
<h2>Runde beendet</h2>
<p>Optional: Neue Runde starten oder Spieler bearbeiten.</p>
<div class="actions">
<button id="edit-players" class="btn btn--ghost">
Spieler bearbeiten
</button>
<button id="play-again" class="btn btn--primary">
Neue Runde
</button>
</div>
</div>
</section>
</main>
<div class="update-banner hidden" id="update-banner">
Neue Version verfügbar
<button id="update-btn" class="btn btn--primary">Aktualisieren</button>
</div>
<script src="app.js"></script>
</body>
</html>