Updated

base_app/package.json

@@ -9,6 +9,7 @@
     "nes.css": "^2.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.25.1",
     "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -35,5 +36,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@shadcn/ui": "^0.0.4",
+    "autoprefixer": "^10.4.19",
+    "gh-pages": "^6.1.1",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^3.4.7"
   }
 }

base_app/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

base_app/src/App.js

@@ -1,12 +1,17 @@
 import React from 'react';
-import PortfolioPage from './PortfolioPage';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import LandingPage from './components/LandingPage';
+import RockPaperScissors from './components/RockPaperScissors';
 
-function App() {
+const App = () => {
   return (
-    <div className="App">
-      <PortfolioPage />
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/rock-paper-scissors" element={<RockPaperScissors />} />
+      </Routes>
+    </Router>
   );
-}
+};
 
 export default App;

base_app/src/LandingPage.js → base_app/src/components/LandingPage.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import "nes.css/css/nes.min.css";
 
 const LandingPage = () => {
@@ -15,12 +16,14 @@ const LandingPage = () => {
           <li>Pixelated graphics</li>
           <li>Nostalgic sound effects</li>
           <li>Classic game references</li>
+          <li>Rock Paper Scissors game</li>
         </ul>
       </div>
 
       <div style={{ marginTop: '2rem' }}>
         <button type="button" className="nes-btn is-primary">Start Adventure</button>
         <button type="button" className="nes-btn is-success" style={{ marginLeft: '1rem' }}>Learn More</button>
+        <Link to="/rock-paper-scissors" className="nes-btn is-warning" style={{ marginLeft: '1rem' }}>Play Rock Paper Scissors</Link>
       </div>
 
       <progress className="nes-progress is-success" value="90" max="100" style={{ marginTop: '2rem' }}></progress>

base_app/src/components/RockPaperScissors.js

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import "nes.css/css/nes.min.css";
+
+const choices = [
+  { name: 'Rock', emoji: '🪨' },
+  { name: 'Paper', emoji: '📄' },
+  { name: 'Scissors', emoji: '✂️' }
+];
+
+const RockPaperScissors = () => {
+  const [playerChoice, setPlayerChoice] = useState(null);
+  const [computerChoice, setComputerChoice] = useState(null);
+  const [result, setResult] = useState('');
+  const [showResult, setShowResult] = useState(false);
+  const [score, setScore] = useState({ player: 0, computer: 0 });
+
+  const playSound = (frequency, duration) => {
+    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    const oscillator = audioContext.createOscillator();
+    oscillator.type = 'square';
+    oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
+    oscillator.connect(audioContext.destination);
+    oscillator.start();
+    oscillator.stop(audioContext.currentTime + duration);
+  };
+
+  const handleChoice = (choice) => {
+    setPlayerChoice(choice);
+    const computerChoice = choices[Math.floor(Math.random() * choices.length)];
+    setComputerChoice(computerChoice);
+    playSound(440, 0.1); // Play a sound when making a choice
+    determineWinner(choice, computerChoice);
+  };
+
+  const determineWinner = (player, computer) => {
+    if (player.name === computer.name) {
+      setResult("It's a tie!");
+      playSound(330, 0.3); // Play a 'tie' sound
+    } else if (
+      (player.name === 'Rock' && computer.name === 'Scissors') ||
+      (player.name === 'Paper' && computer.name === 'Rock') ||
+      (player.name === 'Scissors' && computer.name === 'Paper')
+    ) {
+      setResult('You win!');
+      setScore(prevScore => ({ ...prevScore, player: prevScore.player + 1 }));
+      playSound(523, 0.3); // Play a 'win' sound
+    } else {
+      setResult('Computer wins!');
+      setScore(prevScore => ({ ...prevScore, computer: prevScore.computer + 1 }));
+      playSound(262, 0.3); // Play a 'lose' sound
+    }
+    setShowResult(true);
+  };
+
+  const resetGame = () => {
+    setPlayerChoice(null);
+    setComputerChoice(null);
+    setResult('');
+    setShowResult(false);
+  };
+
+  return (
+    <div className="nes-container with-title is-centered max-w-2xl mx-auto my-8">
+      <p className="title">Rock Paper Scissors</p>
+      <div className="nes-container is-rounded mb-4">
+        <p className="mb-4">Choose your weapon!</p>
+        <div className="flex justify-center gap-4">
+          {choices.map((choice) => (
+            <button
+              key={choice.name}
+              className="nes-btn"
+              onClick={() => handleChoice(choice)}
+            >
+              {choice.emoji}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="nes-container is-rounded mb-4">
+        <p className="mb-2">Score</p>
+        <p>
+          Player: <span className="nes-text is-primary">{score.player}</span> - 
+          Computer: <span className="nes-text is-error">{score.computer}</span>
+        </p>
+      </div>
+      <AlertDialog open={showResult} onOpenChange={setShowResult}>
+        <AlertDialogContent className="nes-dialog">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="nes-text is-primary">{result}</AlertDialogTitle>
+            <AlertDialogDescription>
+              You chose {playerChoice?.emoji} - Computer chose {computerChoice?.emoji}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={resetGame} className="nes-btn is-primary">
+              Play Again
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
+
+export default RockPaperScissors;

base_app/src/index.css

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
   margin: 0;
   font-family: 'Press Start 2P', cursive;

base_app/tailwind.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}