Tronax/tab-shooter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: initialize Tab Shooter Chrome extension game

Browse source
This commit is contained in:
Janik Dietz 2026-08-04 07:13:45 +02:00
commit 0f566b02ac
Signed by: Tronax
SSH key fingerprint: SHA256:2pKKXDZucWvaF/GzXNz0FY53EAO1YDLN80bqS+TTz/o
11 changed files with 1614 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

96
popup.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Tab Shooter</title>
<link rel="stylesheet" href="popup.css" />
</head>
<body>
<div id="app">
<!-- START SCREEN -->
<div id="start-screen" class="screen visible">
<h1 class="title">🚀 TAB <span>SHOOTER</span></h1>
<p class="subtitle">Mach Schluss mit dem Tab-Chaos.<br />Schieß sie alle ab.</p>
<div class="scope-select">
<label class="scope-label">Welche Tabs ins Visier nehmen?</label>
<div class="scope-buttons">
<button id="scope-current" class="scope-btn active" data-scope="current">
<span class="scope-icon">🪟</span>
<span class="scope-text">Aktuelles<br>Fenster</span>
</button>
<button id="scope-all" class="scope-btn" data-scope="all">
<span class="scope-icon">🌐</span>
<span class="scope-text">Alle<br>Fenster</span>
</button>
</div>
</div>
<button id="start-btn" class="primary-btn">SPIEL STARTEN</button>
<div class="highscore-display">
<span class="hs-label">🏆 Highscore</span>
<span id="hs-value" class="hs-value">0</span>
</div>
<div class="controls-hint">
<div><kbd>←</kbd> <kbd>→</kbd> / <kbd>A</kbd> <kbd>D</kbd> — Bewegen</div>
<div><kbd>Leertaste</kbd> / <kbd>Klick</kbd> — Schießen</div>
<div><kbd>Maus</kbd> — Ebenfalls steuerbar</div>
</div>
</div>
<!-- GAME SCREEN -->
<div id="game-screen" class="screen">
<canvas id="game-canvas" width="420" height="600"></canvas>
<div id="hud">
<div class="hud-item">
<span class="hud-label">SCORE</span>
<span id="hud-score" class="hud-value">0</span>
</div>
<div class="hud-item">
<span class="hud-label">LIVES</span>
<span id="hud-lives" class="hud-value">❤️❤️❤️</span>
</div>
<div class="hud-item">
<span class="hud-label">TABS</span>
<span id="hud-tabs" class="hud-value">0</span>
</div>
<div class="hud-item powerup-indicator" id="hud-powerups"></div>
</div>
</div>
<!-- GAME OVER SCREEN -->
<div id="gameover-screen" class="screen">
<h1 class="title small">💥 GAME OVER</h1>
<div class="result-stats">
<div class="stat-row">
<span>Tabs vernichtet:</span>
<span id="result-tabs" class="stat-value">0</span>
</div>
<div class="stat-row">
<span>Score:</span>
<span id="result-score" class="stat-value">0</span>
</div>
<div class="stat-row highlight">
<span>🏆 Highscore:</span>
<span id="result-highscore" class="stat-value">0</span>
</div>
</div>
<div id="new-record" class="new-record hidden">⚡ NEUER REKORD! ⚡</div>
<button id="replay-btn" class="primary-btn">NOCHMAL</button>
<button id="menu-btn" class="secondary-btn">ZUM MENÜ</button>
</div>
<!-- LOADING / EMPTY STATE -->
<div id="empty-screen" class="screen">
<div class="empty-icon">🎉</div>
<h2 class="title small">Keine Tabs offen!</h2>
<p class="subtitle">Du hast aktuell keine Tabs zum Abschießen.<br />Chaosfrei!</p>
<button id="empty-menu-btn" class="secondary-btn">ZUM MENÜ</button>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>