Changeset 3a783f2 for components

Timestamp:

07/05/22 16:36:24 (2 years ago)

Author:

anastasovv <simon@…>

Branches:

main

Children:

189cd8f

Parents:

b13f93b

Message:

Finished poker and added ball to roulette

Location:

components

Files:

• poker/PokerHeader.jsx (modified) (4 diffs)
• poker/PokerSections.jsx (modified) (2 diffs)
• poker/sections/Messages.jsx (modified) (2 diffs)
• poker/sections/PlayButtons.jsx (modified) (5 diffs)
• poker/sections/Pot.jsx (added)
• poker/sections/RaiseModal.jsx (added)
• roulette/Ball.jsx (added)
• roulette/Sections.jsx (modified) (2 diffs)

components/poker/PokerHeader.jsx

@@ -23 +23 @@
     const styleState = useSelector(state => state.style);
 
-    useEffect(() => async function() {
+    useEffect(() => {
         // display loading screen
         dispatch(setStyle({
@@ -30 +30 @@
         }));
 
-        let interval = setInterval(() => {
-            axios.get(`/api/poker?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
-                if (res.data?.success) {
-                    dispatch(setPokerGame(res.data?.pokerGame))
-                }
-            });
-        }, 3000);
+        let interval;
 
         axios.get(`/api/poker?action=get_player_info_on_enter&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
@@ -51 +45 @@
                     displayLoadingScreen: false,
                 }))
+
+                interval = setInterval(() => {
+                    axios.get(`/api/poker?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(newRes => {
+                        if (newRes.data?.success) {
+                            dispatch(setPokerGame(newRes.data?.pokerGame))
+        
+                            if (newRes.data?.pokerGame?.player?.credits !== playerState.player.credits && newRes.data?.pokerGame?.player?.credits > 0) {
+                                dispatch(setPlayer({
+                                    ...playerState.player,
+                                    credits: newRes.data?.pokerGame?.player?.credits,
+                                }))
+                            }
+                        }
+                    });
+                }, 2000);
             }
             else {
@@ -66 +75 @@
             }
         });
-        
-        return () => clearInterval(interval);
-    }, [playerState.pokerGame.player.table])
+    }, [])
+
+    function leaveTable() {
+        axios.get(`/api/poker?action=leave_table&session_id=${localStorage.CAESSINO_SESSION_ID}`);
+    }
 
     return (
         <header className="header">
-            <Link href="/" passHref>
-                <h2>
-                    <AiOutlineArrowLeft />
-                </h2>
-            </Link>
+            <div style={{display: 'flex', alignItems: 'center'}}>
+                <Link href="/" passHref>
+                    <h2>
+                        <AiOutlineArrowLeft />
+                    </h2>
+                </Link>
+                { playerState.pokerGame.player.table.length > 0 && <button style={{marginBottom: '4px', marginLeft: '32px', fontSize: '16px'}} className="tertiaryButton" onClick={() => leaveTable()}>Leave Table</button> }
+            </div>
             <nav>
                 <ul>

components/poker/PokerSections.jsx

@@ -9 +9 @@
 
 import { useSelector, useDispatch } from 'react-redux'
+import Pot from './sections/Pot'
+import RaiseModal from './sections/RaiseModal'
 
 const PokerSections = () => {
@@ -24 +26 @@
           <CardsInTheMiddle/>
 
+          <Pot/>
+
           <PlayButtons/>
+
+          <RaiseModal/>
       </>
     )

components/poker/sections/Messages.jsx

@@ -17 +17 @@
         turnMessage = `It\'s ${playerState.pokerGame.table.players[playerState.pokerGame.table.turnIdx].displayName}\'s turn.`;
 
-        if (playerState.pokerGame.table.lastBet > 0) {
-            callMessage = `${playerState.pokerGame.table.players[playerState.pokerGame.table.turnIdx].displayName} must at least call $${playerState.pokerGame.table.lastBet}`;
+        if (parseInt(playerState.pokerGame.table.lastBet) > 0) {
+            callMessage = `${playerState.pokerGame.table.players[playerState.pokerGame.table.turnIdx].displayName} must at least call $${Math.min(playerState.player.credits, playerState.pokerGame.table.lastBet)}`;
         }
     }
@@ -24 +24 @@
     return (
         <div className="pokerMessagesContainer">
-            { playerState.pokerGame.table.started && <p>Round {playerState.pokerGame.table.round}/5{roundMessage}</p> }
+            { playerState.pokerGame.table.started && playerState.pokerGame.table.ended && playerState.pokerGame.table.winners.length === 1 && <p>Game over - {playerState.pokerGame.table.winners[0]?.displayName} won ${playerState.pokerGame.table.winners[0]?.wonAmount} with a {playerState.pokerGame.table.winners[0]?.hand?.hand} combination! Congratulations.</p> }
+            { playerState.pokerGame.table.started && playerState.pokerGame.table.ended && playerState.pokerGame.table.winners.length > 1 && <p>Game over - {playerState.pokerGame.table.winners.map(e=>e.displayName).join(", ")} drew!</p> }
+            { playerState.pokerGame.table.started && playerState.pokerGame.table.ended && <p>New game will start soon.</p> }
+
+            { playerState.pokerGame.table.started && !playerState.pokerGame.table.ended && <p>Round {playerState.pokerGame.table.round}/4{roundMessage}</p> }
             { !playerState.pokerGame.table.started && <p>Waiting for coordinator {playerState.pokerGame.table.creator} to start the game.</p> }
-            { playerState.pokerGame.table.started && <p>{turnMessage}</p> }
-            { playerState.pokerGame.table.started && <p>{callMessage}</p> }
+            { playerState.pokerGame.table.started && !playerState.pokerGame.table.ended && <p>{turnMessage}</p> }
+            { playerState.pokerGame.table.started && !playerState.pokerGame.table.ended && <p>{callMessage}</p> }
         </div>
     )

components/poker/sections/PlayButtons.jsx

@@ -4 +4 @@
 
 import axios from 'axios';
-import { setPokerGame } from '../../../redux/reducers/playerSlice';
+import { setPoker } from '../../../redux/reducers/styleSlice';
 
 const PlayButtons = () => {
@@ -10 +10 @@
 
   const playerState = useSelector(state => state.player);
+  const styleState = useSelector(state => state.style);
 
   function sitDown() {
@@ -20 +21 @@
 
   const checkClass = playerState.pokerGame.table.lastBet === 0 ? 'secondaryButton' : 'tertiaryButton';
-  const callClass = 'secondaryButton'
+  const callClass = playerState.pokerGame.table.lastBet > 0 ? 'secondaryButton' : 'tertiaryButton'
   const raiseClass = playerState.pokerGame.table.round >= 2 ? 'secondaryButton' : 'tertiaryButton';
   const foldClass = 'secondaryButton';
@@ -33 +34 @@
 
   function raise() {
-    axios.get(`/api/poker?action=game_action&session_id=${localStorage.CAESSINO_SESSION_ID}&specificAction=raise&betAmount=0`);
+    dispatch(setPoker({
+        ...styleState.poker,
+        displays: {
+            ...styleState.poker.displays,
+            raiseModal: true,
+        },
+    }))
   }
 
@@ -40 +47 @@
   }
 
-  if (playerState.pokerGame.table.started && playerState.pokerGame.player.isSatDown) {
+  if (playerState.pokerGame.table.started && playerState.pokerGame.player.isSatDown && parseInt(playerState.pokerGame.table.round) < 5) {
     return (
       <div className="pokerPlayButtonsContainer">

components/roulette/Sections.jsx

@@ -1 +1 @@
 import React from 'react'
+import Ball from './Ball';
 
 import BetModal from './BetModal';
@@ -19 +20 @@
         <img id="rouletteWheelImg" src="/images/roulette-wheel.png" alt="Roulette wheel" style={{transform: 'translate(-50%, -50%)'}}/>
 
+        <Ball/>
+
         <PlayersDisplay/>