0.3.0-0-pre.4

2026-09-20 13:14:40 +02:00
parent c7ccf57723
commit c4b68b8a60
27 changed files with 1195 additions and 48 deletions
--- a/Web/game-snake-poc/frontend/sass/_app.scss
+++ b/Web/game-snake-poc/frontend/sass/_app.scss
@@ -0,0 +1,145 @@
+// file: Web/game-snake-poc/frontend/sass/_app.scss
+// version: 1
+
+$app-header-height: 72px;
+$app-footer-height: 42px;
+
+html,
+body {
+    width: 100%;
+    min-width: 320px;
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    overflow: hidden;
+    background: $gray-100;
+    overscroll-behavior: none;
+}
+
+.min-w-0 {
+    min-width: 0;
+}
+
+.app-header {
+    position: fixed;
+    inset: 0 0 auto;
+    height: $app-header-height;
+    z-index: 1020;
+    border-bottom: 2px solid rgba($primary, 0.3);
+}
+
+.app-footer {
+    position: fixed;
+    inset: auto 0 0;
+    height: $app-footer-height;
+    z-index: 1020;
+    border-top: 2px solid rgba($primary, 0.3);
+}
+
+.app-main {
+    position: relative;
+    height: calc(100vh - $app-header-height - $app-footer-height);
+    margin-top: $app-header-height;
+    margin-bottom: $app-footer-height;
+    overflow: hidden;
+}
+
+.app-content {
+    overflow: auto;
+}
+
+.app-logo {
+    width: 42px;
+    height: 42px;
+    font-size: 1.75rem;
+}
+
+.app-shell-card {
+    width: 100%;
+    max-width: 1180px;
+    min-width: 0;
+}
+
+.game-stage {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
+    background: $black;
+    border: 1px solid rgba($primary, 0.35);
+}
+
+#game {
+    display: block;
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+    outline: none;
+}
+
+#game:focus-visible {
+    box-shadow: inset 0 0 0 3px rgba($primary, 0.85);
+}
+
+.app-controls-card {
+    min-width: 0;
+}
+
+.direction-pad {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(64px, 88px));
+    grid-template-rows: repeat(2, minmax(56px, 72px));
+    gap: 0.5rem;
+    justify-content: center;
+    user-select: none;
+}
+
+.direction-pad .btn {
+    touch-action: manipulation;
+    font-size: 1.25rem;
+}
+
+.direction-up {
+    grid-column: 2;
+    grid-row: 1;
+}
+
+.direction-left {
+    grid-column: 1;
+    grid-row: 2;
+}
+
+.direction-down {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+.direction-right {
+    grid-column: 3;
+    grid-row: 2;
+}
+
+@media (max-width: 575.98px) {
+    $mobile-header-height: 64px;
+
+    .app-header {
+        height: $mobile-header-height;
+    }
+
+    .app-main {
+        height: calc(100vh - $mobile-header-height - $app-footer-height);
+        margin-top: $mobile-header-height;
+    }
+
+    .app-logo {
+        width: 34px;
+        height: 34px;
+        font-size: 1.4rem;
+    }
+
+    .direction-pad {
+        width: 100%;
+        grid-template-columns: repeat(3, minmax(72px, 1fr));
+    }
+}