Added Assassin styling for client

sorensenmarius · Mar 16, 2021 · 900fa65 · 900fa65
1 parent 48adfbe
commit 900fa65
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/src/views/client/GameStateComponents/AssassinTurn.tsx b/src/views/client/GameStateComponents/AssassinTurn.tsx
@@ -23,16 +23,17 @@ const AssassinTurn = ({game, me, socket} : IBasicProps) => {
         setLoading(true)
     }
 
-    if (me.roleId === Role.Assassin) {
-        return (
-            <div className='assassin-background'>
+    return (
+        <div className='assassin-background'>
+            {me.roleId === Role.Assassin ?
+            <> 
                 <h1>Assassinate Merlin</h1>
                 <SelectPlayers 
                     num={1}
                     players={game.players}
                     selected={selected}
                     setSelected={setSelected}
-                    red
+                    assassin
                 />
                 <Button
                     disabled={selected.length === 0}
@@ -41,11 +42,11 @@ const AssassinTurn = ({game, me, socket} : IBasicProps) => {
                 >
                     Assassinate {selected.length > 0 ? selected[0].name : ''}
                 </Button>
-            </div>
-        )
-    }
-    return (
-        <h1>Waiting for assassin</h1>
+            </>
+            :
+            <h1>Waiting for Assassin</h1>
+            }
+        </div>
     )
 }
 

diff --git a/src/views/client/Helpers/SelectPlayers.tsx b/src/views/client/Helpers/SelectPlayers.tsx
@@ -7,11 +7,16 @@ interface ISelectPlayersProps {
     players: Player[],
     selected: Player[],
     setSelected: (players: Player[]) => void
-    red?: boolean
+    assassin?: boolean
 }
 
-const SelectPlayers = ({num, players, selected, setSelected, red} : ISelectPlayersProps) => {
+const SelectPlayers = ({num, players, selected, setSelected, assassin} : ISelectPlayersProps) => {
     const updateSelected = (player: Player) => {
+        if (assassin) {
+            setSelected([player])
+            return
+        }
+
         if (selected.some(p => p.id === player.id)) {
             setSelected(selected.filter(p => p.id !== player.id))
         } else if (selected.length !== num) {
@@ -29,7 +34,7 @@ const SelectPlayers = ({num, players, selected, setSelected, red} : ISelectPlaye
                         key={p.id + '-select-players'}
                         className={`select-players-item 
                                         ${isSelected(p) ? 'selected' : ''}
-                                        ${red ? 'red' : ''}`}
+                                        ${assassin ? 'red' : ''}`}
                         onClick={() => updateSelected(p)}
                     >
                         <p>{p.name}</p>