IceBreakerGame

package.json

@@ -16,7 +16,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@types/node": "^20.1.2",
+    "@types/node": "^20.4.3",
     "flowbite": "^1.6.5",
     "flowbite-react": "^0.4.3",
     "prismjs": "^1.29.0",
@@ -28,8 +28,8 @@
   },
   "devDependencies": {
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.38.0",

src/main.tsx

@@ -21,6 +21,7 @@ import QuizComponent from "./pages/marcos/quizcomponents";
 import GuessWord from "./pages/eljohn/Guess";
 import Main from "./pages/sagun/App";
 import Hangman from "./pages/erica/App";
+import IceBreakerGame from "./pages/eljay/components/App";
 
 const router = createBrowserRouter([
   {
@@ -102,6 +103,10 @@ const router = createBrowserRouter([
     path: "/games/Hangman",
     element: <Hangman />,
   },
+  {
+    path: "/games/IceBreakerGame",
+    element: <IceBreakerGame />,
+  },
 ]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

src/pages/eljay/components/App.css

@@ -0,0 +1,70 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #e476ff;
+  }
+
+  .app {
+    background-color: #7503e0;
+    box-shadow: 0 4px 8px rgba(117, 40, 40, 0.1);
+    border-radius: 8px;
+    padding: 20px;
+    max-width: 500px;
+    width: 90%;
+  }
+
+  .question-section {
+    text-align: center;
+    padding: 20px;
+  }
+
+  .question-section h2 {
+    margin-bottom: 20px;
+  }
+
+  .answer-section {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+  }
+
+  button {
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    background-color: #353234;
+    color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .dare-section {
+    text-align: center;
+    padding: 20px;
+    background-color: #885fe7;
+    border-radius: 8px;
+    margin-top: 20px;
+  }
+
+  .dare-section h3 {
+    margin-bottom: 10px;
+  }
+
+  .score-section {
+    text-align: center;
+    padding: 20px;
+  }
+
+  .score-section h2 {
+    margin-bottom: 20px;
+  }
+
+  .score-section button {
+    background-color: #353234;
+  }
+

src/pages/eljay/components/App.tsx

@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react';
+import '../components/App.css';
+
+// Sample true or false questions with random dares
+const questions = [
+  {
+    question: 'JavaScript is a statically typed language.',
+    answer: false,
+  },
+  {
+    question: 'The "for" loop is the only type of loop in JavaScript',
+    answer: false,
+  },
+  {
+    question: 'Python is an object-oriented programming language.',
+    answer: true,
+  },
+  {
+    question: 'CSS is used to add interactivity and behavior to a website.',
+    answer: false,
+  },
+  {
+    question: 'React is a front-end JavaScript library for building user interfaces.',
+    answer: true,
+  },
+  {
+    question: ' PHP is a server-side programming language.',
+    answer: true,
+  },
+  {
+    question: 'In Python, you can use the "else" clause in a try-except block.',
+    answer: true,
+  },
+  {
+    question: 'HTML is a programming language used for creating the structure of web pages.',
+    answer: false,
+  },
+  {
+    question: 'Java is a compiled language.',
+    answer: true,
+  },
+  {
+    question: 'Git is a version control system primarily used for managing code repositories.',
+    answer: true,
+  },
+
+];
+
+const dares = [
+  'Do your best chicken dance for 10 seconds!',
+  'Sing your favorite song loudly!',
+  'Tell a joke to the group!',
+  'Do five jumping jacks!',
+  'Spin in a circle three times!',
+  'Give a compliment to the person on your right!',
+  'Speak in a silly accent for the next three questions.',
+  'Perform your best impression of a famous movie character for 30 seconds.',
+  'Do an interpretive dance of your favorite emoji.',
+  'Wear your clothes backward for the rest of the game.',
+];
+
+const App: React.FC = () => {
+  const [currentQuestion, setCurrentQuestion] = useState(0);
+  const [userAnswers, setUserAnswers] = useState<boolean[]>([]);
+  const [showScore, setShowScore] = useState(false);
+  const [randomDare, setRandomDare] = useState<string>('');
+
+  useEffect(() => {
+    getRandomDare();
+  }, []);
+
+  const getRandomDare = () => {
+    const randomIndex = Math.floor(Math.random() * dares.length);
+    setRandomDare(dares[randomIndex]);
+  };
+
+  const handleAnswer = (answer: boolean) => {
+    setUserAnswers((prevAnswers) => [...prevAnswers, answer]);
+
+    if (currentQuestion + 1 < questions.length) {
+      setCurrentQuestion((prevQuestion) => prevQuestion + 1);
+      getRandomDare(); // Get a new random dare for the next question
+    } else {
+      setShowScore(true);
+    }
+  };
+
+  const resetGame = () => {
+    setCurrentQuestion(0);
+    setUserAnswers([]);
+    setShowScore(false);
+    getRandomDare(); // Get a random dare when starting the game again
+  };
+
+  return (
+    <div className="app">
+      {showScore ? (
+        <div className="score-section">
+          <h2>Score: {userAnswers.filter((answer, index) => answer === questions[index].answer).length}/{questions.length}</h2>
+          <button onClick={resetGame}>Play Again</button>
+        </div>
+      ) : (
+        <div className="question-section">
+          <h2>{questions[currentQuestion].question}</h2>
+          <div className="answer-section">
+            <button onClick={() => handleAnswer(true)}>True</button>
+            <button onClick={() => handleAnswer(false)}>False</button>
+          </div>
+          <div className="dare-section">
+            <h3>Dare:</h3>
+            <p>{randomDare}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default App;

src/pages/eljay/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ice Breaker Game with Random Dare</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

src/pages/eljay/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

src/pages/eljay/webpack.config.js

@@ -0,0 +1,30 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src./eljay/index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: 'ts-loader',
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    compress: true,
+    port: 3000,
+  },
+};