Clean up

hahahackers · Mar 12, 2024 · 52bdc2f · 52bdc2f
1 parent 136885a
commit 52bdc2f
Show file tree

Hide file tree

Showing 30 changed files with 315 additions and 527 deletions.
diff --git a/app/_components/renderers/HtmlRenderer.tsx b/app/_components/renderers/HtmlRenderer.tsx
@@ -0,0 +1,45 @@
+import cx from 'clsx';
+import { Cell, Game } from '../types';
+import { observer } from 'mobx-react-lite';
+
+export const HtmlRenderer = observer(function HtmlRenderer({ game }: { game: Game }) {
+  return (
+    <main className="flex justify-center items-center flex-col h-screen">
+      <p className="mb-2">Points: {game.points}</p>
+      <div className="flex flex-col gap-1.5 border-2 border-slate-300 rounded-md p-1">
+        {game.board.map((col, x) => (
+          <div className="flex gap-1.5" key={x}>
+            {col.map((row, y) => (
+              <div
+                className={cx('w-8 h-8 flex justify-center items-center rounded ', {
+                  'bg-green-300': row === Cell.Snake,
+                  'bg-green-300 eyes eyes-up': row === Cell.HeadUp,
+                  'bg-green-300 eyes eyes-right': row === Cell.HeadRight,
+                  'bg-green-300 eyes eyes-down': row === Cell.HeadDown,
+                  'bg-green-300 eyes eyes-left': row === Cell.HeadLeft,
+
+                  'bg-slate-50': row === Cell.Empty && (y - x) % 2 === 0,
+                  'bg-slate-100': row === Cell.Empty && (y - x) % 2 !== 0,
+
+                  'bg-red-500': row === Cell.Fruit,
+                })}
+                key={y}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+      {game.phase === 'lost' && (
+        <div className="mt-12 flex gap-2 items-center">
+          <span>You Lose!</span>
+          <button
+            className="px-2 py-1 bg-slate-200 rounded hover:bg-slate-300 transition-colors"
+            onClick={() => game.start()}
+          >
+            Play Again
+          </button>
+        </div>
+      )}
+    </main>
+  );
+});
diff --git a/app/_components/types.ts b/app/_components/types.ts
@@ -0,0 +1,25 @@
+export type Phase = 'idle' | 'running' | 'lost';
+
+export enum Direction {
+  Up = 'up',
+  Down = 'down',
+  Left = 'left',
+  Right = 'right',
+}
+
+export enum Cell {
+  Empty = '_',
+  Snake = 'S',
+  HeadUp = 'HU',
+  HeadRight = 'HR',
+  HeadDown = 'HD',
+  HeadLeft = 'HL',
+  Fruit = 'F',
+}
+
+export interface Game {
+  board: string[][];
+  phase: Phase;
+  points: number;
+  start: () => void;
+}
diff --git a/app/_components/utils.ts b/app/_components/utils.ts
@@ -0,0 +1,4 @@
+import _ from 'lodash';
+
+export const array2D = (count: number, cb: (x: number, y: number) => any) =>
+  _.times(count, (y) => _.times(count, (x) => cb(x, y)));
diff --git a/app/effector-snake/game.tsx b/app/effector-snake/game.tsx
diff --git a/app/effector-snake/store.ts b/app/effector-snake/store.ts
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,12 +1,11 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
-import './utils';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
+  title: 'Snake',
   description: 'Generated by create next app',
 };
 
@@ -18,13 +17,13 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${inter.className} h-screen flex flex-col`}>
-        <nav>
-          <ul className="flex gap-4 uppercaseh">
+        <nav className="m-2">
+          <ul className="flex gap-4">
             <li>
-              <a href="snake">Snake</a>
+              <a href="react">React</a>
             </li>
             <li>
-              <a href="plainsnake">Also Snake</a>
+              <a href="react-mobx">React + MobX</a>
             </li>
           </ul>
         </nav>

diff --git a/app/mobx-canvas/canvas-renderer.tsx b/app/mobx-canvas/canvas-renderer.tsx
diff --git a/app/mobx-canvas/game/controls.ts b/app/mobx-canvas/game/controls.ts
diff --git a/app/mobx-canvas/game/fruit.ts b/app/mobx-canvas/game/fruit.ts
diff --git a/app/mobx-canvas/game/game.ts b/app/mobx-canvas/game/game.ts
diff --git a/app/mobx-canvas/game/snake.ts b/app/mobx-canvas/game/snake.ts
diff --git a/app/mobx-canvas/page.tsx b/app/mobx-canvas/page.tsx
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,5 @@
 import { redirect } from 'next/navigation';
 
 export default function Page() {
-  redirect('/snake');
+  redirect('/react-mobx');
 }
diff --git a/app/react-mobx/game.tsx b/app/react-mobx/game.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { useEffect } from 'react';
+import { game } from './store';
+import { observer } from 'mobx-react-lite';
+import { HtmlRenderer } from '@/app/_components/renderers/HtmlRenderer';
+
+const Game = observer(() => {
+  useEffect(() => {
+    if (game.phase === 'idle') {
+      game.setup();
+      game.start();
+    }
+  }, []);
+
+  return <HtmlRenderer game={game} />;
+});
+
+export default Game;
diff --git a/app/effector-snake/page.tsx → app/react-mobx/page.tsx b/app/effector-snake/page.tsx → app/react-mobx/page.tsx
@@ -4,6 +4,6 @@ const DynamicGame = dynamic(() => import('./game'), {
   ssr: false,
 });
 
-export default function Page() {
+export default function Home() {
   return <DynamicGame />;
 }