From 5996ff8d7407e83b60168e28708bf3608eabfe84 Mon Sep 17 00:00:00 2001
From: Anton Stjernquist <antonstjernquist@gmail.com>
Date: Mon, 9 Sep 2024 21:18:00 +0200
Subject: [PATCH] chore(casino): updated casino app

---
 src/ui/src/Apps/Casino/index.tsx | 61 ++++++++++++++++++++++++++++++--
 src/ui/src/index.css             | 22 ++++++++++++
 2 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/src/ui/src/Apps/Casino/index.tsx b/src/ui/src/Apps/Casino/index.tsx
index 1b3aa28d2..569036fae 100644
--- a/src/ui/src/Apps/Casino/index.tsx
+++ b/src/ui/src/Apps/Casino/index.tsx
@@ -1,15 +1,72 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { TopNavigation } from '../../components/Navigation/TopNavigation';
 
+/**
+ * Add jackpot icon, and bar to the symbols array
+ */
+const symbols = ['🍒', '🍋', '🍊', '🍉', '🍇', '⭐', '🔔', '🎰', '🍀'];
+
+const getRandomSymbol = () => symbols[Math.floor(Math.random() * symbols.length)];
+
+const useInterval = (callback: () => void, delay: number) => {
+  useEffect(() => {
+    const id = setInterval(callback, delay);
+    return () => clearInterval(id);
+  }, [callback, delay]);
+};
+
 export const CasinoApp = () => {
+  const [reels, setReels] = useState([getRandomSymbol(), getRandomSymbol(), getRandomSymbol()]);
+  const [spinning, setSpinning] = useState(false);
+  const [winner, setWinner] = useState(false);
+
   useEffect(() => {
     document.title = 'Casino';
   }, []);
 
+  const spinReels = () => {
+    setSpinning(true);
+    setWinner(false);
+    setTimeout(() => {
+      const newReels = [getRandomSymbol(), getRandomSymbol(), getRandomSymbol()];
+      setReels(newReels);
+      setSpinning(false);
+      checkWinner(newReels);
+    }, 1000);
+  };
+
+  useInterval(() => {
+    if (spinning) {
+      setReels([getRandomSymbol(), getRandomSymbol(), getRandomSymbol()]);
+    }
+  }, 100);
+
+  const checkWinner = (reels: string[]) => {
+    if (reels[0] === reels[1] && reels[1] === reels[2]) {
+      setWinner(true);
+    }
+  };
+
   return (
     <div className="flex flex-col gap-2 flex-1 h-full overflow-hidden">
       <TopNavigation title="Casino" />
-      <span>hello I am casino app</span>
+      <div className="flex flex-col items-center justify-center flex-1">
+        <div className="flex gap-4 text-6xl">
+          {reels.map((symbol, index) => (
+            <div key={index} className={`border p-4 ${spinning ? 'spin' : ''}`}>
+              {symbol}
+            </div>
+          ))}
+        </div>
+        <button
+          onClick={spinReels}
+          disabled={spinning}
+          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
+        >
+          {spinning ? 'Spinning...' : 'Spin'}
+        </button>
+        {winner && <div className="mt-4 text-2xl text-green-500">You Win!</div>}
+      </div>
     </div>
   );
 };
diff --git a/src/ui/src/index.css b/src/ui/src/index.css
index 0f2afca4a..531f39ea1 100644
--- a/src/ui/src/index.css
+++ b/src/ui/src/index.css
@@ -2,6 +2,28 @@
 @tailwind components;
 @tailwind utilities;
 
+@keyframes spinAnimation {
+  0% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: rotate(45deg);
+  }
+  50% {
+    transform: translateY(0);
+  }
+  75% {
+    transform: rotate(-45deg);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.spin {
+  animation: spinAnimation 1s ease-in-out;
+}
+
 #root {
   --geist-foreground: #ffffff;
   --geist-background: #000000;