Index: components/admin/Calculations.jsx
===================================================================
--- components/admin/Calculations.jsx	(revision faff3347934f6f886535c1e4519dcea679db385d)
+++ components/admin/Calculations.jsx	(revision faff3347934f6f886535c1e4519dcea679db385d)
@@ -0,0 +1,156 @@
+import React from 'react'
+
+
+function calculateHandValue(cards) {
+    let value = 0;
+    let aces = 0;
+    for (let i = 0; i < cards.length; i++) {
+      let card = cards[i];
+      if (card.substring(1) === 'A') {
+        value += 11;
+        aces++;
+      } else if (card.substring(1) === 'X' || card.substring(1) === 'J' || card.substring(1) === 'Q' || card.substring(1) === 'K') {
+        value += 10;
+      } else {
+        value += parseInt(card.substring(1));
+      }
+    }
+    while (value > 21 && aces > 0) {
+      value -= 10;
+      aces--;
+    }
+    return value;
+}
+
+const hands = [
+    'Royal Flush',
+    'Straight Flush',
+    'Four of a Kind',
+    'Full House',
+    'Flush',
+    'Straight',
+    'Three of a Kind',
+    'Two Pairs',
+    'Pair',
+    'High Card',
+]
+
+const order = "23456789XJQKA"
+function getHandDetails(hand) {
+    const cards = hand
+    const faces = cards.map(a => String.fromCharCode([77 - order.indexOf(a[1])])).sort()
+    const suits = cards.map(a => a[0]).sort()
+    const counts = faces.reduce(count, {})
+    const duplicates = Object.values(counts).reduce(count, {})
+    const flush = suits[0] === suits[4]
+    const first = faces[0].charCodeAt(1)
+    const straight = faces.every((f, index) => f.charCodeAt(1) - first === index)
+    let rank =
+        (flush && straight && 1) ||
+        (duplicates[4] && 2) ||
+        (duplicates[3] && duplicates[2] && 3) ||
+        (flush && 4) ||
+        (straight && 5) ||
+        (duplicates[3] && 6) ||
+        (duplicates[2] > 1 && 7) ||
+        (duplicates[2] && 8) ||
+        9;
+
+    return { hand: hands[rank], highCard: faces.sort(byCountFirst).join("") }
+
+    function byCountFirst(a, b) {
+        //Counts are in reverse order - bigger is better
+        const countDiff = counts[b] - counts[a]
+        if (countDiff) return countDiff // If counts don't match return
+        return b > a ? -1 : b === a ? 0 : 1
+    }
+
+    function count(c, a) {
+        c[a] = (c[a] || 0) + 1
+        return c
+    }
+}
+
+function compareHands(h1, h2) {
+    let d1 = getHandDetails(h1)
+    let d2 = getHandDetails(h2)
+    if (hands.indexOf(d1.hand) === hands.indexOf(d2.hand)) {
+        if (d1.highCard < d2.highCard) {
+            return d2;
+        } else if (d1.highCard > d2.highCard) {
+            return d1;
+        } else {
+            return d1;
+        }
+    }
+    return hands.indexOf(d1.hand) < hands.indexOf(d2.hand) ? d2 : d1;
+}
+
+function getBestHandDetails(playerCards, tableCards) {
+    let combinations = getCardCombinations(playerCards, tableCards);
+
+    let h1 = combinations[0];
+    let bestHand = h1;
+    combinations.forEach(combination => {
+        bestHand = compareHands(h1, combination);
+        h1 = combination;
+    })
+
+    return bestHand;
+}
+
+function getCardCombinations(playerCards, tableCards) {
+    let combinations = [];
+
+    if (tableCards[3] !== undefined) {
+        combinations.push([playerCards[0], tableCards[0], tableCards[1], tableCards[2], tableCards[3]])
+        combinations.push([playerCards[1], tableCards[0], tableCards[1], tableCards[2], tableCards[3]])
+        combinations.push([playerCards[0], playerCards[1], tableCards[0], tableCards[1], tableCards[3]])
+        combinations.push([playerCards[0], playerCards[1], tableCards[0], tableCards[2], tableCards[3]])
+        combinations.push([playerCards[0], playerCards[1], tableCards[1], tableCards[2], tableCards[3]])
+    }
+    
+    if (tableCards[4] !== undefined) {
+        combinations.push([playerCards[0], tableCards[0], tableCards[1], tableCards[2], tableCards[4]])
+        combinations.push([playerCards[0], tableCards[0], tableCards[1], tableCards[4], tableCards[3]])
+        combinations.push([playerCards[0], tableCards[0], tableCards[4], tableCards[2], tableCards[3]])
+        combinations.push([playerCards[0], tableCards[4], tableCards[1], tableCards[2], tableCards[3]])
+        
+        combinations.push([playerCards[1], tableCards[0], tableCards[1], tableCards[2], tableCards[4]])
+        combinations.push([playerCards[1], tableCards[0], tableCards[1], tableCards[4], tableCards[3]])
+        combinations.push([playerCards[1], tableCards[0], tableCards[4], tableCards[2], tableCards[3]])
+        combinations.push([playerCards[1], tableCards[4], tableCards[1], tableCards[2], tableCards[3]])
+        combinations.push([playerCards[0], playerCards[1], tableCards[0], tableCards[1], tableCards[4]])
+    
+        combinations.push([playerCards[0], playerCards[1], tableCards[0], tableCards[2], tableCards[4]])
+        combinations.push([playerCards[0], playerCards[1], tableCards[0], tableCards[3], tableCards[4]])
+        combinations.push([playerCards[0], playerCards[1], tableCards[1], tableCards[2], tableCards[4]])
+        combinations.push([playerCards[0], playerCards[1], tableCards[1], tableCards[3], tableCards[4]])
+    
+        combinations.push([playerCards[0], playerCards[1], tableCards[2], tableCards[3], tableCards[4]])
+    }
+
+    combinations.push([playerCards[0], playerCards[1], tableCards[0], tableCards[1], tableCards[2]])
+
+    return combinations;
+}
+
+const Calculations = ({action, cards, cards2}) => {
+    if (action === 'calculateHandValue') {
+        return (
+            <>
+                {calculateHandValue(cards)}
+            </>
+        )
+    }
+    else {
+        return (
+            <>
+                { cards.length > 0 && cards2.length > 0 && getBestHandDetails(cards, cards2).hand}
+                { (cards.length === 0 || cards2.length === 0) && <span>-</span>}
+            </>
+        )
+    }
+}
+  
+export default Calculations
Index: components/admin/LiveGames.jsx
===================================================================
--- components/admin/LiveGames.jsx	(revision e90323425d07a533dfc916a6cd7c156c1cc2b8f6)
+++ components/admin/LiveGames.jsx	(revision faff3347934f6f886535c1e4519dcea679db385d)
@@ -8,4 +8,6 @@
 import { setAdminInformation } from '../../redux/reducers/adminInformationSlice';
 import { setAdmin } from '../../redux/reducers/adminSlice';
+import FreeflowCard from '../FreeflowCard';
+import Calculations from './Calculations';
 
 const LiveGames = () => {
@@ -16,12 +18,26 @@
 
   useEffect(() => {
-    axios.get(`/api/postgre?action=get_live_games_as_admin&admin_id=${localStorage.CAESSINO_ADMIN_ID}`).then(res => {
-      if (res.data?.success) {
-        dispatch(setAdminInformation({
-          ...adminInformationState.adminInformation,
-          complaints: res.data?.complaints,
-        }))
-      }
-    })
+    let interval = setInterval(() => {
+      axios.get(`/api/postgre?action=get_live_games_as_admin&admin_id=${localStorage.CAESSINO_ADMIN_ID}`).then(res => {
+        if (res.data?.success) {
+          dispatch(setAdminInformation({
+            ...adminInformationState.adminInformation,
+            liveGames: {
+              blackjack: {
+                rooms: res.data?.blackjack,
+              },
+              roulette: res.data?.roulette,
+              poker: {
+                tables: res.data?.poker,
+              },
+            }
+          }))
+        }
+      })
+    }, 1000);
+
+    return () => {
+      if (interval !== null) clearInterval(interval);
+  };
   }, [])
   
@@ -37,16 +53,109 @@
 
   return (
-    <div className="fullscreen top-to-bottom-centered admin complaintsScreen">
+    <div className="fullscreen top-to-bottom-centered admin liveGamesScreen">
       <div>
-          <p className="link" onClick={() => hideLiveGamesScreen()}>⬅ Go Back</p>
+        <p className="link" onClick={() => hideLiveGamesScreen()}>⬅ Go Back</p>
 
-          <h3>These are the current live games. You can click on one to see more details about it.</h3>
+        <h3>These are the current live games.</h3>
 
-          { adminInformationState.complaints?.map(complaint => (
-            <div key={complaint.by + complaint.description.substr(0, 20)}>
-              { complaint.by }
-              { complaint.description }
+        <div className="liveGamesMegaContainer">
+          <div className="liveBlackjackGames liveGamesContainer">
+            <h3>Live BLackjack Games:</h3>
+            { adminInformationState.adminInformation.liveGames.blackjack?.rooms?.map(room => (
+              <div key={room.id} className="liveBlackjackGame">
+                <div>
+                  <div>
+                    { room?.playerCards?.map((card, i) => (
+                      <FreeflowCard key={`playercard${i}`} card={card}/>
+                    ))}
+                    <h5><Calculations action="calculateHandValue" cards={room.playerCards}/></h5>
+                  </div>
+                  <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>
+                  </div>
+                </div>
+                <div>
+                  <div>
+                    <h5><Calculations action="calculateHandValue" cards={room.dealerCards}/></h5>
+                    { room?.dealerCards?.map((card, i) => (
+                      <FreeflowCard key={`dealercard${i}`} card={card}/>
+                    ))}
+                  </div>
+                  <p>Dealer {room.dealerName}</p>
+                </div>
+              </div>
+            )) }
+          </div>
+
+          <div className="liveRouletteGame liveGamesContainer">
+            <h3>Live Roulette Game:</h3>
+            <div>
+              <h6>
+                <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(", ")}
+              </h6>
+              <h6 style={{marginTop: '2rem'}}><span>Players:</span></h6>
+              { adminInformationState.adminInformation?.liveGames?.roulette?.players?.map((player, i) => (
+                <div key={player.session_id} className="playerInLiveRouletteGame">
+                  <div>
+                    <h6><span>Player {i+1} -&gt;</span></h6>
+                  </div>
+                  <div>
+                    <h6><span>{player.name} (${player.betAmount})</span></h6>
+                  </div>
+                  <div>
+                    <h6><span>Betted on: </span>{player.whichBets.join(", ")}</h6>
+                  </div>
+                  <div>
+                    <h6><span>Outcome: {player.outcome}</span></h6>
+                  </div>
+                </div>
+              )) }
             </div>
-          )) }
+          </div>
+
+          <div className="livePokerGames liveGamesContainer">
+            <h3>Live Poker Games:</h3>
+            { adminInformationState.adminInformation.liveGames.poker?.tables?.map(table => (
+              <div key={table.id} className="livePokerGame">
+                <h6>
+                  <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(", ")}
+                </h6>
+                <div className="cardsOnTable" style={{marginTop: '2rem'}}>
+                  { table?.cards?.map((card, i) => (
+                    <FreeflowCard key={`tablecard${i}`} card={card}/>
+                  ))}
+                </div>
+                <h6 style={{marginTop: '2rem'}}><span>Players:</span></h6>
+                {table.players?.map(player => (
+                  <div key={player.id} className="playerInLivePokerGame">
+                    <div>
+                      <h6><span>Player {player.displayName} (${player.betAmount})</span></h6>
+                    </div>
+                    <div className="cards">
+                      { player?.cards?.map((card, i) => (
+                        <FreeflowCard key={`playercard${i}`} card={card}/>
+                      ))}
+                    </div>
+                    <div>
+                      <h6><span>Hand: </span><Calculations action="getBestHandDetails" cards={player.cards} cards2={table.cards}/></h6>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )) }
+          </div>
+        </div>
       </div>
     </div>
