Add welcome popup for the dice game, update README.md

BTI-US · Jan 19, 2025 · 150a7db · 150a7db
1 parent e7d6208
commit 150a7db
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,16 @@
-# DiceRollerSimulator-Three
+# DiceRoller-ChubGame
 
-[![Deploy static content to Pages](https://github.com/BTI-US/DiceRollerSimulator-ThreeJS/actions/workflows/static.yml/badge.svg?branch=main)](https://github.com/BTI-US/DiceRollerSimulator-ThreeJS/actions/workflows/static.yml)
+[![Deploy static content to Pages](https://github.com/BTI-US/DiceRoller-ChubGame/actions/workflows/static.yml/badge.svg?branch=main)](https://github.com/BTI-US/DiceRoller-ChubGame/actions/workflows/static.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-- Last Modified: 2025-01-05
+- Last Modified: 2025-01-19
 - Author: Phill Weston
 
 ![screenshot](images/diceRollerSimulator0.jpg)
 
-A 3D dice simulator built on Three.js, utilizing Cannon.js as the physics engine, allowing users to control the number of the dices.
+A 3D dice simulator built on Three.js, utilizing Cannon.js as the physics engine, allowing users to control the number of the dices. This dice game is the first game developed by ChubGame.
 
-Now you can find a live version at [here](https://dice,chubgame.com/).
+Now you can find a live version at [here](https://dice.chubgame.com/).
 
 ## Features
 
@@ -48,7 +48,7 @@ Now you can find a live version at [here](https://dice,chubgame.com/).
 ### Clone the repository
 
 ```shell
-git clone https://github.com/BTI-US/DiceRollerSimulator-ThreeJS.git
+git clone https://github.com/BTI-US/DiceRoller-ChubGame.git
 ```
 
 ### Install packages
@@ -69,6 +69,7 @@ npm run dev
 |-|-|-|
 |`VITE_VALIDATE_PROMOTION_CODE_API`|API endpoint to validate promotion code|`https://chubgame.com/wp-json/chubgame/v1/validate`|
 |`VITE_SEND_DICE_DATA_API`|API endpoint to send dice data|`https://chubgame.com/wp-json/chubgame/v1/send`|
+|`VITE_CHECK_BALANCE_API`|API Endpoint to check the user balance|`https://chubgame.com/wp-json/chubgame/v1/check-balance`|
 |`VITE_MAX_DICE_AMOUNT`|Maximum number of dice allowed|`10`|
 
 ## WordPress API Endpoints

diff --git a/src/App.jsx b/src/App.jsx
@@ -9,18 +9,19 @@
  */
 import { useState, useEffect } from 'react';
 import { createDices } from './3d.js';
-import { FaCopy, FaInfoCircle, FaCoins, FaArrowLeft, FaPlay, FaForward, FaTimes, FaCheck, FaSave } from 'react-icons/fa';
+import { FaCopy, FaInfoCircle, FaCoins, FaArrowLeft, FaPlay, FaForward, FaTimes, FaCheck, FaSave, FaBook } from 'react-icons/fa';
 
 const VALIDATE_PROMOTION_CODE_API = import.meta.env.VITE_VALIDATE_PROMOTION_CODE_API;
 const SEND_DICE_DATA_API = import.meta.env.VITE_SEND_DICE_DATA_API;
 const CHECK_BALANCE_API = import.meta.env.VITE_CHECK_BALANCE_API;
 const MAX_DICE_AMOUNT = parseInt(import.meta.env.VITE_MAX_DICE_AMOUNT, 10);  // Parsing as an integer
 
 const App = () => {
+    const [showWelcomeDialog, setShowWelcomeDialog] = useState(true);
     const [diceAmount, setDiceAmount] = useState(6);
     const [totalPoints, setTotalPoints] = useState(null);
     const [showPopup, setShowPopup] = useState(false);
-    const [showPromotionDialog, setShowPromotionDialog] = useState(true);
+    const [showPromotionDialog, setShowPromotionDialog] = useState(false);
     const [promotionCode, setPromotionCode] = useState('');
     const [promotionSkipped, setPromotionSkipped] = useState(false);
     const [successPopup, setSuccessPopup] = useState('');
@@ -47,6 +48,11 @@ const App = () => {
             setTimeout(() => setWarnPopup(''), 3000); // Hide warning popup after 3 seconds
         }
     }, []);
+
+    const handleStart = () => {
+        setShowWelcomeDialog(false);
+        setShowPromotionDialog(true);
+    };
 
     const handleOpenRegulation = () => {
         setShowRegulationDialog(true);
@@ -294,6 +300,47 @@ const App = () => {
 
     return (
         <div className="font-['Cherry_Bomb_One',system-ui] select-none">
+            {showWelcomeDialog && (
+                <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+                    <div className="bg-white p-4 rounded shadow-lg text-center">
+                        <h2 className="text-xl mb-4">Welcome to ChubGame!</h2>
+                        <p className="text-xl mb-4">Get ready to play the exciting 3D dice game and earn your chips!</p>
+                        <div className="mb-4 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 flex items-center">
+                            <FaInfoCircle className="mr-2" />
+                            <p>Click the following button to read our game regulation and our policy.</p>
+                        </div>
+                        <div className="flex justify-center space-x-4 mb-4">
+                            <button
+                                onClick={handleOpenRegulation}
+                                className="px-4 py-2 bg-gray-500 text-white rounded transition-transform duration-300 hover:bg-yellow-500 hover:scale-105 active:bg-green-500 flex items-center"
+                            >
+                                <FaBook className="mr-2" /> Game Regulation
+                            </button>
+                            <button
+                                onClick={handleOpenAbout}
+                                className="px-4 py-2 bg-gray-500 text-white rounded transition-transform duration-300 hover:bg-yellow-500 hover:scale-105 active:bg-green-500 flex items-center"
+                            >
+                                <FaInfoCircle className="mr-2" /> About ChubGame
+                            </button>
+                        </div>
+                        <div className="mt-4 flex justify-center space-x-4">
+                            <button
+                                onClick={() => window.close()}
+                                className="px-4 py-2 bg-red-500 text-white rounded transition-transform duration-300 hover:bg-yellow-500 hover:scale-105 active:bg-green-500 flex items-center"
+                            >
+                                <FaTimes className="mr-2" /> Close
+                            </button>
+                            <button
+                                onClick={handleStart}
+                                className="px-4 py-2 bg-blue-500 text-white rounded transition-transform duration-300 hover:bg-yellow-500 hover:scale-105 active:bg-green-500 flex items-center"
+                            >
+                                <FaPlay className="mr-2" /> Start
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
             {showPromotionDialog && (
                 <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
                     <div className="bg-white p-4 rounded shadow-lg text-center">