[feat] Finalize snake game, add background and improve on game mechanics with countdown

Author: peterver

src/components/Layout.tsx

@@ -1,8 +1,9 @@
 import {css} from '../css';
 import { Footer } from './atoms/Footer';
+import { Background } from './atoms/Background';
 
 type LayoutOptions = {
-  children:JSX.Element;
+  children:any;
   title?:string;
 };
 
@@ -33,6 +34,7 @@ export function Layout ({children, title = "atomic-tetris"}:LayoutOptions) {
         background: css.$t.bg,
         color: css.$t.fg,
       })}>
+        <Background />
         {children}
         <Footer />
       </body>

src/components/atoms/Background.tsx

@@ -0,0 +1,16 @@
+import { css } from "~/css";
+
+export function Background () {
+  return (<div className={css.use('cover', {
+    overflow: 'hidden',
+    zIndex: -1,
+    background: css.$t.bgSynth,
+    opacity: .8,
+    [css.before]: css.mix('cover', {
+      content: '""',
+      opacity: .6,
+      backgroundImage: css.$t.bgSynthLines,
+      maskImage: 'linear-gradient(to top, transparent, black 50%)',
+    }),
+  })}></div>);
+}

src/components/atoms/Game.tsx

@@ -1,6 +1,7 @@
 import { CFG, css } from '~/css';
 import { GameCanvas } from './GameCanvas';
 import { type RelayEvents, Script } from '~/script';
+import { GameCountdown } from './GameCountdown';
 
 type GameOptions = {
   sound: RelayEvents['audio:register'];
@@ -21,6 +22,7 @@ export type GameStore = {
 
 export type GameEvents = {
   'game:evt:boot': void;
+  'game:evt:countdown': void;
 };
 
 export function Game({
@@ -50,6 +52,7 @@ export function Game({
     >
       <GameCanvas columns={columns} rows={rows} size={CFG.SIZE} />
       {children}
+      <GameCountdown evtStart={evtStart} />
       <div>
         <Script data={{ gameSound, evtStart, evtPause, evtOver }}>
           {({ el, data, $ }) => {
@@ -90,7 +93,9 @@ export function Game({
                 el.$publish(data.evtPause);
               } else if (e.key === 'r') {
                 isPaused = false;
-                el.$publish(data.evtStart);
+                el.$publish('audio:pause');
+                el.$publish(data.evtPause);
+                el.$publish('game:evt:countdown');
               }
             });
 

src/components/atoms/GameCountdown.tsx

@@ -0,0 +1,55 @@
+import { css } from '~/css';
+import {type RelayEvents, Script} from '~/script';
+
+type GameCountdownProps = {
+  evtStart:keyof RelayEvents;
+};
+
+export function GameCountdown ({evtStart}:GameCountdownProps) {
+  return (<div className={css({
+    display: 'none',
+    [css.attr('data-running')]: css.mix('f', 'fj_c', 'fa_c', 'title', {
+      position: 'absolute',
+      inset: 0,
+      background: css.$t.overlayBg,
+      color: css.$t.fg,
+      fontSize: '7rem',
+      pointerEvents: 'none',
+      zIndex: 999,
+    }),
+  })}>
+    <Script data={{evtStart}}>{({el,data}) => {
+      let timer:number|null = null;
+      let count = 3;
+
+      function render () {
+        el.textContent = String(count);
+      }
+
+      function clearTimer () {
+        el.removeAttribute('data-running');
+        if (timer) clearInterval(timer);
+        timer = null;
+      }
+
+      function setTimer () {
+        clearTimer();
+        el.setAttribute('data-running', '');
+        count = 3;
+        render();
+        timer = setInterval(() => {
+          count -= 1;
+          render();
+          if (count === 0) {
+            clearTimer();
+            el.$publish(data.evtStart);
+          }
+        }, 1000);
+      }
+
+      el.$subscribe('game:evt:countdown', () => setTimer());
+
+      el.$unmount = () => clearTimer();
+    }}</Script>
+  </div>);
+}

src/components/atoms/GamePreview.tsx

@@ -29,6 +29,7 @@ export function GamePreview({
       padding: css.$v.spaceM,
       textAlign: 'center',
       cursor: 'crosshair',
+      boxShadow: '0 6px 10px 5px rgba(0, 0, 0, .3)',
       h2: css.mix('header', { marginBottom: css.$v.spaceM }),
       p: css.mix('body', { marginBottom: css.$v.spaceM}),
       div: {

src/components/atoms/GameStartButton.tsx

@@ -35,12 +35,13 @@ export function GameStartButton(data: GameStartButtonOptions) {
 
           function setTimer() {
             clearTimer();
-            setInterval(() => data.$set('timer', data.timer - 1), 1000);
+            int = setInterval(() => data.$set('timer', data.timer - 1), 1000);
           }
 
           function start() {
-            el.$publish(data.eventStart);
+            el.$publish('game:evt:countdown');
             clearTimer();
+            el.setAttribute('data-hidden', '');
             counter.style.display = 'none';
           }
 
@@ -56,9 +57,16 @@ export function GameStartButton(data: GameStartButtonOptions) {
           /* On game over, enable our button again */
           el.$subscribe(data.eventOver, () => {
             $.clear(el);
+            el.removeAttribute('data-hidden');
             el.textContent = 'Play again?';
           });
 
+          el.$subscribe('game:evt:countdown', () => {
+            counter.style.display = 'none';
+            clearTimer();
+            el.setAttribute('data-hidden', '');
+          });
+
           /* On game start, hide element */
           el.$subscribe(data.eventStart, () => (el.setAttribute('data-hidden', '')));
 

src/css.ts

@@ -22,7 +22,7 @@ export const css = createCss({
     fg: '#ffffff',
     board_bg: '#050b24',
     board_fg: '#ffffff',
-    board_grid: '#2B2B2B',
+    board_grid: '#3B3B3B',
     board_border: '#ffffff',
     panelBg: '#02080F',
     panelFg: '#FFFFFF',
@@ -37,6 +37,8 @@ export const css = createCss({
     keyCapSide1: '#d2d2d2',
     keyCapSide2: '#c2c2c2',
     overlayBg: 'rgba(12, 18, 32, .75)',
+    bgSynth: 'linear-gradient(to top, #0f0c29, #302b63, #24243e)',
+    bgSynthLines: 'repeating-linear-gradient(to right,rgba(255, 0, 150, 0.2) 0,rgba(255, 0, 150, 0.2) 1px,transparent 1px,transparent 40px),repeating-linear-gradient(to top,rgba(0, 200, 255, 0.2) 0,rgba(0, 200, 255, 0.2) 1px,transparent 1px,transparent 40px)',
   },
   var: {
     fontSizeBody: '1.6rem',
@@ -101,6 +103,25 @@ export const css = createCss({
       duration: '200ms',
       easingFunction: 'ease-in-out',
     },
+    goldenGlow: {
+      keyframes: {
+        '0%': {
+          filter: 'drop-shadow(0 0 1px #fff8d1) brightness(1)',
+          transform: 'scale(1)',
+        },
+        '50%': {
+          filter: 'drop-shadow(0 0 5px #ffe066) brightness(1.3)',
+          transform: 'scale(1.08)',
+        },
+        '100%': {
+          filter: 'drop-shadow(0 0 1px #fff8d1) brightness(1)',
+          transform: 'scale(1)',
+        },
+      },
+      easingFunction: 'ease-in-out',
+      duration: '1000ms',
+      iterationCount: 'infinite',
+    },
   },
   definitions: (mod) => ({
     f: () => ({ display: 'flex' }),
@@ -111,6 +132,13 @@ export const css = createCss({
     fj_sb: () => ({ justifyContent: 'space-between' }),
     fh: () => ({ flexDirection: 'row' }),
     fv: () => ({ flexDirection: 'column' }),
+    cover: () => ({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    }),
     title: () => ({
       fontFamily: mod.$v.fontFamilyHeader,
       fontSize: mod.$v.fontSizeTitle,

src/routes/index.tsx

@@ -66,12 +66,8 @@ export async function routes<State extends Record<string, unknown>>(
                 </GamePreview>
               ))}
             </section>
-            <button
-              className={css.use('button', {
-                marginTop: 'calc(' + css.$v.spaceL + ' * 2)',
-              })}
-            >
-              Choose for me
+            <button className={css.use('linkButton', {marginTop: css.$v.spaceL})}>
+              I don't know what to choose
               <Script data={{ length: PREVIEWS.length }}>
                 {({ el, data, $ }) => {
                   $.on(el, 'click', () =>