feat: add fullscreen mode and extract shared game engine

- Add new fullscreen game mode playable in a dedicated browser tab
- Extract shared game logic into `engine.js` to be used by both popup and fullscreen modes
- Implement self-protection to prevent closing the game tab or popup tab
- Update documentation and bump version to 1.1.0
This commit is contained in:
Janik Dietz 2026-08-04 08:02:53 +02:00
parent 0f566b02ac
commit 25fc6fb345
Signed by: Tronax
SSH key fingerprint: SHA256:2pKKXDZucWvaF/GzXNz0FY53EAO1YDLN80bqS+TTz/o
8 changed files with 1064 additions and 798 deletions

61
game.css Normal file
View file

@ -0,0 +1,61 @@
/* ============================================================
TAB SHOOTER Vollbild-Modus (game.html)
Baut auf popup.css auf und überschreibt nur, was nötig ist.
============================================================ */
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
body.fullscreen {
width: 100vw;
height: 100vh;
}
#app.fullscreen-app {
width: 100vw;
height: 100vh;
}
/* Spiel-Screen zentriert das Canvas im Vollbild */
#game-screen {
justify-content: center;
align-items: center;
}
#game-canvas {
width: min(900px, 96vw);
height: min(680px, 88vh);
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.05),
0 0 60px rgba(0, 240, 255, 0.15);
cursor: crosshair;
}
/* HUD im Vollbild: schwebt oben über dem Canvas, zentriert */
#game-screen #hud {
top: max(12px, 6vh);
left: 50%;
transform: translateX(-50%);
width: min(900px, 96vw);
border-radius: 12px;
}
/* Start-Screen im Vollbild etwas luftiger */
#start-screen .scope-select {
max-width: 520px;
}
#start-screen .primary-btn {
padding: 16px 64px;
font-size: 18px;
}
/* Gtooltip-hinweis im Vollbild-Menü: das ist dieser Tab */
#start-screen .subtitle strong {
color: #00ff88;
}