Score Log, options menu fix

src/components/Card.tsx

@@ -64,12 +64,12 @@ export const Card = ({
     const popupTags = game.state === 'scoring' && debuffed ?
         <div id='debuffed-tag' className='tag'>Debuffed</div> :
         <>
-            {enhancement !== undefined && enhancement !== Enhancement.Base &&
-                <div id='enhancement' className={`tag ${enhancement}`}>{`${Enhancement[enhancement]} Card`}</div>
-            }
             {edition !== undefined &&
                 <div id='edition' className={`tag ${edition}`}>{Edition[edition]}</div>
             }
+            {enhancement !== undefined && enhancement !== Enhancement.Base &&
+                <div id='enhancement' className={`tag ${enhancement}`}>{`${Enhancement[enhancement]} Card`}</div>
+            }
             {seal !== undefined &&
                 <div id='seal' className={`tag ${seal}`}>{`${Seal[seal]} Seal`}</div>
             }

src/components/DeckMenu.css

@@ -141,7 +141,7 @@
     margin: 4px;
 }
 
-tr {
+#suits tr {
     display: flex;
     flex-direction: row;
 }

src/components/InfoPanel.tsx

@@ -7,7 +7,7 @@ import { Options } from './Options'
 export const InfoPanel = () => {
     const { state: game } = useContext(GameStateContext)
     const [ runMenu, setRunMenu ] = useState(false)
-    const [ optionsMenu, setOptionsMenu ] = useState(true)
+    const [ optionsMenu, setOptionsMenu ] = useState(false)
 
     return (
         <div id='info'>

src/components/Round.css

@@ -35,6 +35,10 @@
     margin: 0 8px;
 }
 
+#score-display:hover {
+    cursor: pointer;
+}
+
 #stake-icon {
     width: 24px;
     height: 24px;

src/components/Round.tsx

@@ -1,17 +1,21 @@
-import { useContext } from 'react'
+import { useContext, useState } from 'react'
 import stake_icon from '../assets/white_stake.webp'
 import { GameStateContext } from '../GameState'
 import './Round.css'
+import { ScoreLog } from './ScoreLog'
 
 export const Round = () => {
     const { state: game } = useContext(GameStateContext)
+    const [ logMenu, setLogMenu ] = useState(false)
+
     return (
         <div id='round-score'>
             <div id='round-score-text'>Round<br/>score</div>
-            <div id='score-display'>
+            <div id='score-display' onClick={() => setLogMenu(true)}>
                 <img id='stake-icon' src={stake_icon} />
                 <div id='score'>{game.stats.score}</div>
             </div>
+            {logMenu && <ScoreLog setMenu={setLogMenu} />}
         </div>
     )
 }

src/components/ScoreLog.css

@@ -0,0 +1,41 @@
+#score-log-outline {
+    position: absolute;
+    z-index: 1;
+    background-color: var(--light-grey);
+    border-radius: 8px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+#score-log {
+    background-color: var(--grey);
+    border-radius: 8px;
+    margin: 4px;
+    width: 512px;
+    max-height: 640px;
+    overflow: scroll;
+}
+
+#score-log > table {
+    font-size: 20px;
+    border-collapse: collapse;
+}
+
+#score-log > table > tr {
+    border-bottom: 1px solid aliceblue;
+}
+
+#score-log > table > tr:last-child { border: none }
+
+#score-log > table > #headings {
+    font-size: 32px;
+}
+
+#score-log-back {
+    text-align: center;
+    font-size: 32px;
+    background-color: var(--orange);
+    border-radius: 8px;
+    margin: 2px;
+}

src/components/ScoreLog.tsx

@@ -0,0 +1,54 @@
+import { useContext } from "react"
+import { GameStateContext } from "../GameState"
+import './ScoreLog.css'
+
+type ScoreLogProps = {
+    setMenu: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export const ScoreLog = (props: ScoreLogProps) => {
+    const { state: game } = useContext(GameStateContext)
+
+    const chipFormat = (chips: number | undefined, mult: number | undefined, mult_type: string | undefined) => {
+        if(chips !== undefined) {
+            if(mult !== undefined && mult_type === undefined) { return <td className='blue' style={{fontSize: '24px'}}>{chips}</td>}
+            return <td className='blue'>{`+${chips}`}</td>
+        }
+        return <td />
+    }
+
+    const multFormat = (mult: number | undefined, mult_type: string | undefined) => {
+        if(mult !== undefined) {
+            if(mult < 0) { return <td className='red'>{mult}</td> }
+            if(mult_type === undefined) { return <td className='red' style={{fontSize: '24px'}}>{mult}</td>}
+            if(mult_type === '+') { return <td className='red'>{`+${mult}`}</td>}
+            return <td className='red-invert'>{`X${mult}`}</td>
+        }
+        return <td />
+    }
+
+    return (
+        <div id='score-log-outline'>
+            <div id='score-log'>
+                <table style={{width: '100%'}}>
+                    <tr id='headings'>
+                        <th style={{width: '60%'}}>Name</th>
+                        <th>Chips</th>
+                        <th>Mult</th>
+                    </tr>
+                    {game.scoreLog.map((entry, i) => (
+                        entry.chips === undefined && entry.mult === undefined ?
+                            <tr key={i} style={{fontSize: '24px', backgroundColor: 'var(--dark-grey)'}}><td colSpan={3}>{entry.name}</td></tr> :
+                            <tr key={i}>
+                                <td>{entry.name}</td>
+                                {chipFormat(entry.chips, entry.mult, entry.mult_type)}
+                                {multFormat(entry.mult, entry.mult_type)}
+                            </tr>
+                        )
+                    )}
+                </table>
+            </div>
+            <div id='score-log-back' onClick={() => props.setMenu(false)}>Back</div>
+        </div>
+    )
+}

src/components/UseConsumable.ts

@@ -220,7 +220,7 @@ export const useConsumable = (game: GameState, dispatch: React.Dispatch<GameActi
                 case 'The Wheel of Fortune':
                     const WoFJokers = game.jokers.filter(j => j.edition === undefined)
                     if(WoFJokers.length === 0) { return false }
-                    if(Random.next() < 2.25) {
+                    if(Random.next() < .25) {
                         const joker = WoFJokers[Math.floor(Random.next() * WoFJokers.length)]
                         switch(Math.floor(Random.next() * 3)) {
                             case 0: joker.edition = Edition.Foil; break