Changeset 22367db for components

Timestamp:

07/19/22 19:38:51 (2 years ago)

Author:

anastasovv <simon@…>

Branches:

main

Children:

41d3f60

Parents:

faff334

Message:

Added authentication with google

Location:

components

Files:

• GamesHistory.jsx (modified) (6 diffs)
• Header.jsx (modified) (2 diffs)
• LoginScreen.jsx (modified) (2 diffs)
• admin/LiveGames.jsx (modified) (6 diffs)
• blackjack/BlackjackHeader.jsx (modified) (3 diffs)
• poker/PokerHeader.jsx (modified) (3 diffs)
• roulette/RouletteHeader.jsx (modified) (3 diffs)

components/GamesHistory.jsx

@@ -39 +39 @@
                             <h5><Calculations action="calculateHandValue" cards={room.playerCards}/></h5>
                         </div>
-                        <p>Player {room.displayName} (${parseInt(room.initialBet) + parseInt(room.sideBet)})</p>
+                        <p>Player {room?.displayName} (${parseInt(room.initialBet) + parseInt(room.sideBet)})</p>
                         </div>
                         <div>
                         <div>
-                            <h6><span>Outcome:</span><br/>{room.outcome}</h6>
-                            <h6><span>Side Bet Outcome:</span><br/>{room.sideBetOutcome}</h6>
+                            <h6><span>Played on:<br/>{room.finished}</span></h6>
+                            { room?.outcome?.lenght > 0 && <h6><span>Outcome:</span><br/>{room.outcome}</h6> }
+                            { room?.sideBetOutcome.lenght > 0 && <h6><span>Side Bet Outcome:</span><br/>{room.sideBetOutcome}</h6> }
                         </div>
                         </div>
@@ -65 +66 @@
                         <div key={`roulettegame${gameIdx}`}>
                             <h6>
+                                <span>Played on: {game?.finished}</span><br/>
                                 <span>Ball on number: </span>{game?.magicNumber}&nbsp;&nbsp;&nbsp;&nbsp;
                                 <span>Winning bets: </span>{game?.winningBets?.join(", ")}
@@ -75 +77 @@
                                 </div>
                                 <div>
-                                    <h6><span>{player.name} (${player.betAmount})</span></h6>
+                                    <h6><span>{player.name} (</span>${player.betAmount}<span>)</span></h6>
                                 </div>
                                 <div>
@@ -81 +83 @@
                                 </div>
                                 <div>
-                                    <h6><span>Outcome: {player.outcome}</span></h6>
+                                    <h6><span>Outcome: </span>{player.outcome}</h6>
                                 </div>
                                 </div>
@@ -94 +96 @@
                     <div key={table.id} className="livePokerGame">
                         <h6>
-                        <span>Pot: </span>{table?.pot}&nbsp;&nbsp;&nbsp;&nbsp;
-                        <span>Winners: </span>{table?.winners?.map(e=>e.displayName)?.join(", ")}
+                        <span>Played on: {table?.finished}</span><br/>
+                        <span>Pot: </span>${table?.pot}&nbsp;&nbsp;&nbsp;&nbsp;
+                        <span>Winners: </span>{table?.winners?.map(e=>e?.displayName)?.join(", ")}
                         </h6>
                         <div className="cardsOnTable" style={{marginTop: '2rem'}}>
@@ -106 +109 @@
                         <div key={player.id} className="playerInLivePokerGame">
                             <div>
-                            <h6><span>Player {player.displayName} (${player.betAmount})</span></h6>
+                            <h6><span>Player {player?.displayName} (</span>${player.betAmount}<span>)</span></h6>
                             </div>
                             <div className="cards">

components/Header.jsx

@@ -11 +11 @@
 import axios from 'axios';
 
+import { signOut, useSession } from 'next-auth/react';
+
 const Header = () => {
+  const { data: googleSession } = useSession();
+
+  useEffect(() => {
+    if (googleSession && (!localStorage.CAESSINO_SESSION_ID || localStorage.CAESSINO_SESSION_ID === "")) {
+      axios.post(`/api/postgre`, {
+        action: 'login_via_google',
+        googleSession: googleSession,
+      })
+        .then(res => {
+          if (res.data?.success) {
+            localStorage.CAESSINO_SESSION_ID = res.data?.session?.id;
+
+            dispatch(setPlayer({
+                ...playerState.player,
+                username: res.data?.session?.username,
+                displayName: res.data?.session?.displayName,
+                credits: res.data?.session.credits,
+                session_id: res.data?.session?.id,
+            }));
+
+            dispatch(setStyle({
+                ...styleState.style,
+                displayLoadingScreen: false,
+                displayLoginScreen: false,
+                loginScreenInfo: {
+                    username: '',
+                    password: '',
+                },
+                notification: {
+                    show: true,
+                    text: 'Successfully logged in.',
+                    status: 'success',
+                },
+                inlineAlertText: '',
+            }));
+          }
+      });
+    }
+  }, [googleSession])
+
+
   const dispatch = useDispatch();
 
@@ -50 +93 @@
           credits: 0,
         }))
+        signOut();
       }
     })

components/LoginScreen.jsx

@@ -7 +7 @@
 import { setPlayer } from '../redux/reducers/playerSlice';
 import { setStyle } from '../redux/reducers/styleSlice';
+
+import { FcGoogle } from 'react-icons/fc';
+import { signIn } from 'next-auth/react';
 
 import axios from 'axios';
@@ -146 +149 @@
                         <button className="secondaryButton" onClick={() => login()}>Log In</button>
                     </div>
+                    <button onClick={() => signIn()} className="primaryButton" style={{marginTop: '10rem', color: '#eee', padding: '.6rem 2rem'}}><FcGoogle style={{padding: '.2rem', background: '#eee', borderRadius: '50%', fontSize: '2rem', marginBottom: '-.4rem'}}/> Log In With Google</button>
                 </div>
             </div>

components/admin/LiveGames.jsx

@@ -71 +71 @@
                     <h5><Calculations action="calculateHandValue" cards={room.playerCards}/></h5>
                   </div>
-                  <p>Player {room.displayName} (${parseInt(room.initialBet) + parseInt(room.sideBet)})</p>
+                  <p>Player {room?.displayName} (${parseInt(room.initialBet) + parseInt(room.sideBet)})</p>
                 </div>
                 <div>
                   <div>
                       <h6><span>Status:</span><br/>{room.status}</h6>
-                      <h6><span>Outcome:</span><br/>{room.outcome}</h6>
-                      <h6><span>Side Bet Outcome:</span><br/>{room.sideBetOutcome}</h6>
+                      { room?.outcome?.length > 0 && <h6><span>Outcome:</span><br/>{room.outcome}</h6> }
+                      { room?.sideBetOutcome?.length > 0 && <h6><span>Side Bet Outcome:</span><br/>{room.sideBetOutcome}</h6> }
                   </div>
                 </div>
@@ -99 +99 @@
                 <span>Status: </span>{adminInformationState.adminInformation?.liveGames?.roulette?.status}&nbsp;&nbsp;&nbsp;&nbsp;
                 <span>Time to start: </span>{adminInformationState.adminInformation?.liveGames?.roulette?.timeToStart}&nbsp;&nbsp;&nbsp;&nbsp;
-                <span>Ball on number: </span>{adminInformationState.adminInformation?.liveGames?.roulette?.magicNumber}&nbsp;&nbsp;&nbsp;&nbsp;
-                <span>Winning bets: </span>{adminInformationState.adminInformation?.liveGames?.roulette?.winningBets?.join(", ")}
+                { adminInformationState.adminInformation?.liveGames?.roulette?.magicNumber != -1 && <><span>Ball on number: </span>{adminInformationState.adminInformation?.liveGames?.roulette?.magicNumber}&nbsp;&nbsp;&nbsp;&nbsp;</> }
+                { adminInformationState.adminInformation?.liveGames?.roulette?.magicNumber != -1 && <><span>Winning bets: </span>{adminInformationState.adminInformation?.liveGames?.roulette?.winningBets?.join(", ")}</> }
               </h6>
               <h6 style={{marginTop: '2rem'}}><span>Players:</span></h6>
@@ -109 +109 @@
                   </div>
                   <div>
-                    <h6><span>{player.name} (${player.betAmount})</span></h6>
+                    <h6><span>{player.name} (${player?.betAmount})</span></h6>
                   </div>
                   <div>
-                    <h6><span>Betted on: </span>{player.whichBets.join(", ")}</h6>
+                    { player?.whichBets?.length > 0 && <h6><span>Betted on: </span>{player?.whichBets?.join(", ")}</h6> }
                   </div>
                   <div>
-                    <h6><span>Outcome: {player.outcome}</span></h6>
+                    { adminInformationState.adminInformation?.liveGames?.roulette?.magicNumber != -1 && player?.whichBets?.length > 0 && <h6><span>Outcome: </span>{player.outcome}</h6> }
                   </div>
                 </div>
@@ -129 +129 @@
                   <span>Round: </span>{table?.round}/4&nbsp;&nbsp;&nbsp;&nbsp;
                   <span>Started: </span>{table?.started}&nbsp;&nbsp;&nbsp;&nbsp;
-                  <span>Player on turn: </span>{table?.turnIdx}&nbsp;&nbsp;&nbsp;&nbsp;
-                  <span>Pot: </span>{table?.pot}&nbsp;&nbsp;&nbsp;&nbsp;
-                  <span>Winners: </span>{table?.winners?.map(e=>e.displayName)?.join(", ")}
+                  <span>Player on turn: </span>{table.players[table.turnIdx]?.displayName ?? '-'}&nbsp;&nbsp;&nbsp;&nbsp;
+                  <span>Pot: </span>${table?.pot}&nbsp;&nbsp;&nbsp;&nbsp;
+                  { table?.winners?.length > 0 && <><span>Winners: </span>{table?.winners?.map(e=>e?.displayName)?.join(", ")}</> }
                 </h6>
                 <div className="cardsOnTable" style={{marginTop: '2rem'}}>
@@ -142 +142 @@
                   <div key={player.id} className="playerInLivePokerGame">
                     <div>
-                      <h6><span>Player {player.displayName} (${player.betAmount})</span></h6>
+                      <h6><span>Player {player?.displayName} (${player.betAmount})</span></h6>
                     </div>
                     <div className="cards">
@@ -150 +150 @@
                     </div>
                     <div>
-                      <h6><span>Hand: </span><Calculations action="getBestHandDetails" cards={player.cards} cards2={table.cards}/></h6>
+                      { table?.cards?.length > 0 && <h6><span>Hand: </span><Calculations action="getBestHandDetails" cards={player.cards} cards2={table.cards}/></h6> }
                     </div>
                   </div>

components/blackjack/BlackjackHeader.jsx

@@ +1 @@
+/* eslint-disable @next/next/no-html-link-for-pages */
 import React from 'react'
 
@@ -62 +63 @@
                             dispatch(setBlackjackGame(newRes.data?.blackjackGame))
 
-                            if (newRes.data?.blackjackGame?.credits !== playerState.player.credits && parseInt(newRes.data?.blackjackGame?.credits) > 0) {
+                            if (newRes.data?.blackjackGame?.credits !== playerState.player.credits && parseInt(newRes.data?.blackjackGame?.credits) >= 0) {
                                 dispatch(setPlayer({
                                     ...playerState.player,
@@ -138 +139 @@
     return (
         <header className="header">
-            <Link href="/" passHref>
+            <a href="/">
                 <h2>
                     <AiOutlineArrowLeft />
                 </h2>
-            </Link>
+            </a>
             <nav>
                 <ul>

components/poker/PokerHeader.jsx

@@ +1 @@
+/* eslint-disable @next/next/no-html-link-for-pages */
 import React from 'react'
 
@@ -49 +50 @@
                             dispatch(setPokerGame(newRes.data?.pokerGame))
         
-                            if (newRes.data?.pokerGame?.player?.credits !== playerState.player.credits && newRes.data?.pokerGame?.player?.credits > 0) {
+                            if (newRes.data?.pokerGame?.player?.credits !== playerState.player.credits && newRes.data?.pokerGame?.player?.credits >= 0) {
                                 dispatch(setPlayer({
                                     ...playerState.player,
@@ -110 +111 @@
         <header className="header">
             <div style={{display: 'flex', alignItems: 'center'}}>
-                <Link href="/" passHref>
+                <a href="/">
                     <h2>
                         <AiOutlineArrowLeft />
                     </h2>
-                </Link>
+                </a>
                 { playerState.pokerGame?.player?.table?.length > 0 && <button style={{marginBottom: '4px', marginLeft: '32px', fontSize: '16px'}} className="tertiaryButton" onClick={() => leaveTable()}>Leave Table</button> }
             </div>

components/roulette/RouletteHeader.jsx

@@ +1 @@
+/* eslint-disable @next/next/no-html-link-for-pages */
 import React from 'react'
 
@@ -76 +77 @@
                             }
 
-                            if (newRes.data?.rouletteGame?.player?.credits !== playerState.player.credits && newRes.data?.rouletteGame?.player?.credits > 0) {
+                            if (newRes.data?.rouletteGame?.player?.credits !== playerState.player.credits && newRes.data?.rouletteGame?.player?.credits >= 0) {
                                 dispatch(setPlayer({
                                     ...playerState.player,
@@ -146 +147 @@
     return (
         <header className="header">
-            <Link href="/" passHref>
+            <a href="/">
                 <h2>
                     <AiOutlineArrowLeft />
                 </h2>
-            </Link>
+            </a>
             <nav>
                 <ul>