Sasedev/games
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.3.0-0-pre.4-fix.1

Browse Source
This commit is contained in:
SinuS von SifriduS
2026-09-20 13:26:07 +02:00
parent c4b68b8a60
commit f433e99a12
15 changed files with 400 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Web/game-snake-poc/frontend/main.html
View File

@@ -1,5 +1,5 @@
<!-- file: Web/game-snake-poc/frontend/main.html -->
<!-- version: 1 -->
<!-- version: 2 -->
<!DOCTYPE html>
<html lang="fr">
@@ -31,9 +31,9 @@
</nav>
</header>
<main class="app-main container-fluid p-0">
<section class="app-content h-100">
<div class="container-fluid px-3 px-md-4 py-3 py-md-4 h-100">
<main class="app-main container-fluid p-0" data-simplebar>
<section class="app-content">
<div class="container-fluid px-3 px-md-4 py-3 py-md-4">
<div class="card app-shell-card mx-auto shadow-sm border-0">
<div class="card-body p-3 p-md-4">
<div class="d-flex align-items-start justify-content-between gap-3 flex-wrap mb-3">

9
Web/game-snake-poc/frontend/sass/_app.scss
View File

@@ -1,5 +1,5 @@
// file: Web/game-snake-poc/frontend/sass/_app.scss
// version: 1
// version: 2
$app-header-height: 72px;
$app-footer-height: 42px;
@@ -40,6 +40,7 @@ body {
.app-main {
position: relative;
width: 100%;
height: calc(100vh - $app-header-height - $app-footer-height);
margin-top: $app-header-height;
margin-bottom: $app-footer-height;
@@ -47,7 +48,7 @@ body {
}
.app-content {
overflow: auto;
min-height: 100%;
}
.app-logo {
@@ -64,7 +65,9 @@ body {
.game-stage {
width: 100%;
aspect-ratio: 1 / 1;
max-width: 520px;
margin-inline: auto;
aspect-ratio: 3 / 5;
overflow: hidden;
background: $black;
border: 1px solid rgba($primary, 0.35);

248
Web/game-snake-poc/frontend/sass/_simplebar.scss Normal file
View File

@@ -0,0 +1,248 @@
// file: Web/game-snake-poc/frontend/sass/_simplebar.scss
// version: 1
/* Rtl support */
[data-simplebar] {
position: relative;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.simplebar-wrapper {
overflow: hidden;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
.simplebar-mask {
direction: inherit;
position: absolute;
overflow: hidden;
padding: 0;
margin: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: auto !important;
height: auto !important;
// z-index: 0;
inset: 0;
}
.simplebar-offset {
direction: inherit !important;
box-sizing: inherit !important;
resize: none !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
-webkit-overflow-scrolling: touch;
inset: 0;
}
.simplebar-content-wrapper {
direction: inherit;
box-sizing: border-box !important;
position: relative;
display: block;
height: 100%;
width: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
}
.simplebar-hide-scrollbar {
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
position: fixed;
left: 0;
visibility: hidden;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
.simplebar-content {
&:before {
content: ' ';
display: table;
}
&:after {
content: ' ';
display: table;
}
}
.simplebar-placeholder {
max-height: 100%;
max-width: 100%;
width: 100%;
pointer-events: none;
}
.simplebar-height-auto-observer-wrapper {
box-sizing: inherit !important;
height: 100%;
width: 100%;
max-width: 1px;
position: relative;
float: left;
max-height: 1px;
overflow: hidden;
// z-index: -1;
padding: 0;
margin: 0;
pointer-events: none;
flex-grow: inherit;
flex-shrink: 0;
flex-basis: 0;
}
.simplebar-height-auto-observer {
box-sizing: inherit;
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 1000%;
width: 1000%;
min-height: 1px;
min-width: 1px;
overflow: hidden;
pointer-events: none;
// z-index: -1;
}
.simplebar-track {
// z-index: 1;
position: absolute;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
[data-simplebar].simplebar-dragging {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.simplebar-content {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.simplebar-track {
pointer-events: all;
}
}
.simplebar-scrollbar {
position: absolute;
left: 0;
right: 0;
min-height: 10px;
&:before {
position: absolute;
content: '';
background: black;
border-radius: 7px;
left: 2px;
right: 2px;
opacity: 0;
transition: opacity 0.2s 0.5s linear;
top: 2px;
bottom: 2px;
}
}
.simplebar-scrollbar.simplebar-visible {
&:before {
opacity: 0.5;
transition-delay: 0s;
transition-duration: 0s;
}
}
.simplebar-track.simplebar-vertical {
top: 0;
width: 11px;
}
.simplebar-track.simplebar-horizontal {
left: 0;
height: 11px;
.simplebar-scrollbar {
right: auto;
left: 0;
top: 0;
bottom: 0;
min-height: 0;
min-width: 10px;
width: auto;
}
}
[data-simplebar-direction='rtl'] {
.simplebar-track.simplebar-vertical {
right: auto;
left: 0;
}
}
.simplebar-dummy-scrollbar-size {
direction: rtl;
position: fixed;
opacity: 0;
visibility: hidden;
height: 500px;
width: 500px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: scrollbar !important;
>div {
width: 200%;
height: 200%;
margin: 10px 0;
}
}
.simplebar-hover {
cursor: pointer;
}

3
Web/game-snake-poc/frontend/sass/main.scss
View File

@@ -1,9 +1,10 @@
// file: Web/game-snake-poc/frontend/sass/main.scss
// version: 1
// version: 2
@import "bootstrap/scss/functions";
@import "variables";
@import "fontawesome";
@import "simplebar";
@import "bootstrap/scss/bootstrap";
@import "bootswatch";
@import "app";

6
Web/game-snake-poc/frontend/ts/main.ts
View File

@@ -1,9 +1,13 @@
// file: Web/game-snake-poc/frontend/ts/main.ts
// version: 1
// version: 2
import ResizeObserver from "resize-observer-polyfill";
import "simplebar";
import { startGame } from "./game";
import { bindInputs } from "./input";
(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
function requireElement<T extends Element>(selector: string): T {
const element = document.querySelector<T>(selector);
if (element === null) {

4
Web/game-snake-poc/package.json
View File

@@ -10,7 +10,9 @@
},
"dependencies": {
"@fortawesome/fontawesome-free": "^7.3",
"bootstrap": "^5.3"
"bootstrap": "^5.3",
"resize-observer-polyfill": "^1.5",
"simplebar": "^6.3"
},
"devDependencies": {
"@types/bootstrap": "^5.2",

1
Web/game-snake-poc/tsconfig.json
View File

@@ -23,7 +23,6 @@
"vite/client",
"node"
],
"baseUrl": ".",
"paths": {
"@snake-wasm": [
"../../../builds/sasedev-games/game-snake-poc-web/wasm/game_snake_poc_wasm.js"