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:
parent
0f566b02ac
commit
25fc6fb345
8 changed files with 1064 additions and 798 deletions
61
game.css
Normal file
61
game.css
Normal 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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue