OLC-2024 finished

build/assets/index.html

@@ -13,19 +13,6 @@
             overflow: hidden;
             font-family: sans-serif;
         }
-
-        #controls {
-            position: fixed;
-            width: calc(var(--slot-size) * 9);
-            height: var(--slot-size);
-            border: 1px solid gray;
-            background: white;
-            bottom: 10px;
-            left: 0;
-            right: 0;
-            display: flex;
-            margin: auto;
-        }
     </style>
     $ICON$
 </head>

build/build.ts

@@ -6,7 +6,7 @@ import { buildHTML } from "./html";
 import select from '@inquirer/select';
 import { isGame, getGames } from './isGame';
 
-const outDir = path.resolve(import.meta.dir, '..', '..', 'dist');
+const outDir = path.resolve(import.meta.dir, '..', 'dist');
 await fs.mkdir(outDir, { recursive: true });
 
 let game = process.argv[2];

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "start": "bun --hot build/server.ts",
-    "build": "bun build/build.ts"
+    "bake": "bun build/build.ts"
   },
   "dependencies": {
     "@inquirer/select": "2.3.10",

src/games/binario/assets/ui.module.css

@@ -47,4 +47,17 @@ body {
     top: 5px;
     right: 5px;
     text-shadow: rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 0.540302px 0.841471px 0px, rgb(255, 255, 255) -0.416147px 0.909297px 0px, rgb(255, 255, 255) -0.989992px 0.14112px 0px, rgb(255, 255, 255) -0.653644px -0.756802px 0px, rgb(255, 255, 255) 0.283662px -0.958924px 0px, rgb(255, 255, 255) 0.96017px -0.279415px 0px;
+}
+
+.controls {
+    position: fixed;
+    width: calc(var(--slot-size) * 9);
+    height: var(--slot-size);
+    border: 1px solid gray;
+    background: white;
+    bottom: 10px;
+    left: 0;
+    right: 0;
+    display: flex;
+    margin: auto;
 }

src/games/binario/ui.tsx

@@ -70,7 +70,7 @@ export default class UI {
 
     constructor() {
         this.root = document.createElement('div');
-        this.root.id = 'controls';
+        this.root.className = styles.controls;
         document.body.appendChild(this.root);
 
         this.render();

src/games/olc-run-2024/index.tsx

@@ -4,6 +4,7 @@ import { choice, delay, randInt, range } from "@common/utils";
 import figuresImage from './assets/figures.png';
 import placeSound from './assets/place.ogg';
 import fillSound from './assets/fill.ogg';
+import wrongSound from './assets/wrong.ogg';
 
 let display: BrickDisplay;
 const field: BrickDisplayImage = {
@@ -19,6 +20,7 @@ let nextFigure: BrickDisplayImage = generateFigure();
 let currentFigureX = 4;
 let currentFigureY = 14;
 let currentFigureBlink: boolean;
+let frame: number = 0;
 const rowsToClear = new Set<number>();
 const colsToClear = new Set<number>();
 
@@ -103,7 +105,12 @@ function tryToPlace() {
 
         if (!canPlaceAnywhere(currentFigure)) {
             display.gameOver = true;
+            wrongSound.currentTime = 0;
+            wrongSound.play();
         }
+    } else {
+        wrongSound.currentTime = 0;
+        wrongSound.play();
     }
 }
 
@@ -143,6 +150,7 @@ function reset() {
     currentFigureY = 14;
     field.image = [];
     display.score = 0;
+    display.gameOver = false;
 }
 
 function onKeyDown(e: KeyboardEvent) {
@@ -172,10 +180,16 @@ function onKeyDown(e: KeyboardEvent) {
             currentFigure = BrickDisplay.rotateSprite(currentFigure, 90);
         }
     }
+    e.stopPropagation();
+    e.preventDefault();
+    return false;
 }
 
 async function loop() {
-    currentFigureBlink = !currentFigureBlink;
+    frame++;
+    if (frame % 6 === 0) {
+        currentFigureBlink = !currentFigureBlink;
+    }
 
     if (rowsToClear.size > 0 || colsToClear.size > 0) {
         display.score += Math.pow(rowsToClear.size + colsToClear.size, 2) * 100;