[fix] Tetris unmount

Author: peterver

src/components/atoms/GameModal.tsx

@@ -3,22 +3,19 @@ import { ModalClose } from '../modules/Modal';
 
 type GameModalOptions = {
   columns: number;
-  rows: number;
   copyWidth?: number;
   children: any;
 };
 
 export function GameModal({
   columns,
-  rows,
   copyWidth = 40,
   children,
 }: GameModalOptions) {
   return (
     <div
       className={css.use('f', 'fh', 'fj_sb', 'panel', {
         width: `calc(${columns * CFG.SIZE}px + ${copyWidth}rem)`,
-        height: `${rows * CFG.SIZE + 40}px`,
         position: 'relative',
         padding: css.$v.spaceL,
       })}

src/components/atoms/GameSidebar.tsx

@@ -20,7 +20,7 @@ export function GameSidebar({
   return (
     <div className={cls}>
       {children}
-      <GameStartButton eventOver={evtEnd} eventStart={evtStart} timer={60} />
+      <GameStartButton eventOver={evtEnd} eventStart={evtStart} timer={60} style={{marginTop: 'calc(' + css.$v.spaceL + ' * 2)'}} />
     </div>
   );
 }

src/components/atoms/GameStartButton.tsx

@@ -5,11 +5,19 @@ type GameStartButtonOptions = {
   timer: number;
   eventStart: keyof RelayEvents;
   eventOver: keyof RelayEvents;
+  style?: Record<string, unknown>;
 };
 
 export function GameStartButton(data: GameStartButtonOptions) {
   return (
-    <button type="button" className={css.use('button', { width: '100%' })}>
+    <button type="button" className={css.use('button', {
+      width: '100%',
+      [css.attr('data-hidden')]: {
+        visibility: 'hidden',
+        pointerEvents: 'none',
+        cursor: 'none',
+      },
+    }, data.style || {})}>
       Start Now (<span>{data.timer}</span>s)
       <Script data={data}>
         {({ el, data, $ }) => {
@@ -49,11 +57,10 @@ export function GameStartButton(data: GameStartButtonOptions) {
           el.$subscribe(data.eventOver, () => {
             $.clear(el);
             el.textContent = 'Play again?';
-            el.style.display = 'inline-block';
           });
 
           /* On game start, hide element */
-          el.$subscribe(data.eventStart, () => (el.style.display = 'none'));
+          el.$subscribe(data.eventStart, () => (el.setAttribute('data-hidden', '')));
 
           /* Start the clock on game boot */
           el.$subscribeOnce('game:evt:boot', setTimer);

src/routes/breakout/Game.tsx

@@ -43,7 +43,7 @@ export function BreakoutGame() {
   const gameBoardId = css.cid();
 
   return (
-    <GameModal columns={BREAKOUT_CFG.COLS} rows={BREAKOUT_CFG.ROWS}>
+    <GameModal columns={BREAKOUT_CFG.COLS}>
       <GameConfig preview={PREVIEW} />
       <GameSidebar
         evtStart="breakout:start"

src/routes/snake/constants.tsx

@@ -10,6 +10,6 @@ export const PREVIEW = {
 };
 
 export const CFG = {
-  COLS: 20 /* Board Columns */,
-  ROWS: 20 /* Board Rows */,
+  COLS: 15 /* Board Columns */,
+  ROWS: 15 /* Board Rows */,
 };

src/routes/tetris/Game.tsx

@@ -34,7 +34,7 @@ export type TetrisGameEvents = {
 
 export function TetrisGame() {
   return (
-    <GameModal columns={TETRIS_CFG.COLS} rows={TETRIS_CFG.ROWS} copyWidth={45}>
+    <GameModal columns={TETRIS_CFG.COLS} copyWidth={45}>
       <GameConfig preview={PREVIEW} />
       <GameSidebar evtStart="tetris:start" evtEnd="tetris:gameover" width={35}>
         <GameExplanation
@@ -118,8 +118,13 @@ export function TetrisGame() {
               render();
             }
 
-            function setTimer() {
+            function clearTimer() {
               if (tick) clearInterval(tick);
+              tick = null;
+            }
+
+            function setTimer() {
+              clearTimer();
               tick = setInterval(() => {
                 if (!isPaused) {
                   el.$publish('tetris:evt:move', 'down');
@@ -226,12 +231,9 @@ export function TetrisGame() {
 
             el.$subscribe('tetris:pause', () => (isPaused = !isPaused));
 
-            el.$subscribe('tetris:gameover', () => {
-              if (tick) clearInterval(tick);
-              tick = null;
-            });
+            el.$subscribe('tetris:gameover', () => clearTimer());
 
-            $.on(document, 'keydown', (e) => {
+            const keydownhandler = $.on(document, 'keydown', (e) => {
               if (isPaused || !tick) return;
               let dir: TetrisGameEvents['tetris:evt:move'] | null = null;
               switch (e.key) {
@@ -253,6 +255,11 @@ export function TetrisGame() {
               }
               if (dir) el.$publish('tetris:evt:move', dir);
             });
+
+            el.$unmount = () => {
+              keydownhandler();
+              clearTimer();
+            };
           }}
         </Script>
       </Game>

src/routes/tetris/atoms/Pieces.tsx

@@ -34,6 +34,7 @@ export function Block({ color, matrix }: BlockOptions) {
       <Script data={{ x, y, matrix, color }}>
         {({ el, data, $ }) => {
           let { x, y } = data;
+          const { matrix } = data;
           let matrix_idx = 0;
           let isFirstCheck = true;
           const CELLS = $.queryAll(el, '[data-index]');