From d99f441bb9f0969ffcf0803ec9eb2477f6b7b19b Mon Sep 17 00:00:00 2001
From: Emile Bui <33470772+emilebui@users.noreply.github.com>
Date: Wed, 28 Jun 2023 13:59:43 +0700
Subject: [PATCH] Adding more ban format (#18) (#19)

* Adding more formats (50%)

* Adding more formats (55%)

* Adding more ban pick formats (99%)
---
 src/components/App/App.module.css        |  12 ++
 src/components/App/App.tsx               |  46 +++++---
 src/components/Menu/GameSettingPopup.tsx |  40 +++----
 src/data/turn_info.ts                    | 134 +++++++++++++++++++----
 src/game/game_logic.tsx                  |  25 ++++-
 src/game/game_state.tsx                  |   4 +-
 6 files changed, 190 insertions(+), 71 deletions(-)

diff --git a/src/components/App/App.module.css b/src/components/App/App.module.css
index 76f3b2c..b2d382c 100644
--- a/src/components/App/App.module.css
+++ b/src/components/App/App.module.css
@@ -65,6 +65,18 @@
   grid-template-columns: repeat(4, var(--size-card-min-width));
 }
 
+.grid.team1 {
+  grid-template-columns: repeat(1, var(--size-card-min-width));
+}
+
+.grid.team2 {
+  grid-template-columns: repeat(2, var(--size-card-min-width));
+}
+
+.grid.team3 {
+  grid-template-columns: repeat(3, var(--size-card-min-width));
+}
+
 @media (min-width: 768px) {
   .grid {
     grid-template-columns: repeat(auto-fill, min(var(--size-card-min-width)));
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 556f24b..5807673 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -70,7 +70,7 @@ const App: Component<AppProps> = (props) => {
     }
 
     let ws_uri = `${import.meta.env.VITE_WS_URI}/play?gid=${gid}&cid=${cid}&nickname=${nickname}&avatar=${ava}&casual=${casual}&numban=${numBan}`
-
+    console.log(ws_uri)
     if (watch) {
         ws_uri = `${import.meta.env.VITE_WS_URI}/watch?gid=${gid}&cid=${cid}&nickname=${nickname}`
     }
@@ -220,18 +220,38 @@ const App: Component<AppProps> = (props) => {
                             }
                         </button>
                     </div>
-                    <h3 class={styles.title}>Ban List</h3>
-                    <div class={styles.teams}>
-                        <div class={`${styles.grid} ${styles.team}`}>
-                            <For each={banlist1}>{(id, i) => id2Card(id, i())}</For>
-                        </div>
-                        <div class={`${styles.timer2} ${styles.chat_hidden}`}>
-                            <p>Time Remaining</p>
-                        </div>
-                        <div class={`${styles.grid} ${styles.team}`}>
-                            <For each={banlist2}>{(id, i) => id2Card(id, i(), 4)}</For>
-                        </div>
-                    </div>
+                    {
+                        gameSetting.ban_number != 0 &&
+                        <>
+                            <h3 class={styles.title}>Ban List</h3>
+                            <div class={styles.teams}>
+                                <div class={`${styles.grid}`}
+                                     classList={{
+                                         [styles.team]: gameSetting.ban_number == 4,
+                                         [styles.team3]: gameSetting.ban_number == 3,
+                                         [styles.team2]: gameSetting.ban_number == 2,
+                                         [styles.team1]: gameSetting.ban_number == 1
+                                     }}
+                                >
+                                    <For each={banlist1}>{(id, i) => id2Card(id, i())}</For>
+                                </div>
+                                <div class={`${styles.timer2} ${styles.chat_hidden}`}>
+                                    <p>Time Remaining</p>
+                                </div>
+                                <div class={`${styles.grid}`}
+                                     classList={{
+                                         [styles.team]: gameSetting.ban_number == 4,
+                                         [styles.team3]: gameSetting.ban_number == 3,
+                                         [styles.team2]: gameSetting.ban_number == 2,
+                                         [styles.team1]: gameSetting.ban_number == 1
+                                     }}
+                                >
+                                    <For each={banlist2}>{(id, i) => id2Card(id, i(), 4)}</For>
+                                </div>
+                            </div>
+                        </>
+                    }
+
                     <h3 class={styles.title}>Pick List</h3>
                     <div class={styles.teams}>
                         <div class={`${styles.grid} ${styles.team}`}>
diff --git a/src/components/Menu/GameSettingPopup.tsx b/src/components/Menu/GameSettingPopup.tsx
index 371df2c..ec5a937 100644
--- a/src/components/Menu/GameSettingPopup.tsx
+++ b/src/components/Menu/GameSettingPopup.tsx
@@ -21,40 +21,26 @@ const GSForm: Component<GSInterface> = props => {
     )
 
     const update_setting = () => {
-        setGameSetting("casual", casual())
-        setGameSetting("ban_number", banNumber())
+        let temp_bn = banNumber()
+        let temp_c = casual()
+        setGameSetting("casual", temp_c)
+        setGameSetting("ban_number", temp_bn)
         props.close()
     }
 
-    const update_ban = (value: any) => {
-        if (value === "No Ban") {
-            setBanNumber(0)
-        } else {
-            setBanNumber(value)
-        }
-    }
-
-    const get_ban_select = (bn: number) => {
-        if (bn === 0) {
-            return "No Ban"
-        } else {
-            return bn
-        }
-    }
-
     // @ts-ignore
     return (
         <div class="gs_container">
             <h2 class="popup-title">Game Settings</h2>
-            {/*<div>*/}
-            {/*    <h4>Number of Ban</h4>*/}
-            {/*    <Select*/}
-            {/*        class="custom"*/}
-            {/*        initialValue={get_ban_select(banNumber())}*/}
-            {/*        options={["No Ban", 1, 2, 3, 4]}*/}
-            {/*        onChange={e => setBanNumber(e)}*/}
-            {/*    />*/}
-            {/*</div>*/}
+            <div>
+                <h4>Number of Ban</h4>
+                <Select
+                    class="custom"
+                    initialValue={banNumber()}
+                    options={["0", 1, 2, 3, 4]}
+                    onChange={e => setBanNumber(e)}
+                />
+            </div>
             <div>
                 <div class="tooltip"><h4>Casual Mode</h4>
                     <span class="tooltiptext">Players can choose the same characters rather than not being able to pick characters that were already picked by other player</span>
diff --git a/src/data/turn_info.ts b/src/data/turn_info.ts
index c531a90..ab7c6e6 100644
--- a/src/data/turn_info.ts
+++ b/src/data/turn_info.ts
@@ -1,27 +1,113 @@
 export const TargetCard2TurnMap = {
-    1: 0,
-    2: 4,
-    3: 1,
-    4: 5,
-    5: 2,
-    6: 6,
-    7: 8,
-    8: 16,
-    9: 17,
-    10: 9,
-    11: 10,
-    12: 18,
-    13: 19,
-    14: 11,
-    15: 3,
-    16: 7,
-    17: 20,
-    18: 12,
-    19: 13,
-    20: 21,
-    21: 22,
-    22: 14,
-    23: 15,
-    24: 23,
+    4: {
+        1: 0,
+        2: 4,
+        3: 1,
+        4: 5,
+        5: 2,
+        6: 6,
+        7: 8,
+        8: 16,
+        9: 17,
+        10: 9,
+        11: 10,
+        12: 18,
+        13: 19,
+        14: 11,
+        15: 3,
+        16: 7,
+        17: 20,
+        18: 12,
+        19: 13,
+        20: 21,
+        21: 22,
+        22: 14,
+        23: 15,
+        24: 23,
+    },
+    3: {
+        1: 0,
+        2: 4,
+        3: 1,
+        4: 5,
+        5: 8,
+        6: 16,
+        7: 17,
+        8: 9,
+        9: 10,
+        10: 18,
+        11: 19,
+        12: 11,
+        13: 2,
+        14: 6,
+        15: 20,
+        16: 12,
+        17: 13,
+        18: 21,
+        19: 22,
+        20: 14,
+        21: 15,
+        22: 23,
+    },
+    2: {
+        1: 0,
+        2: 4,
+        3: 8,
+        4: 16,
+        5: 17,
+        6: 9,
+        7: 10,
+        8: 18,
+        9: 19,
+        10: 11,
+        11: 1,
+        12: 5,
+        13: 20,
+        14: 12,
+        15: 13,
+        16: 21,
+        17: 22,
+        18: 14,
+        19: 15,
+        20: 23,
+    },
+    1: {
+        1: 0,
+        2: 4,
+        3: 8,
+        4: 16,
+        5: 17,
+        6: 9,
+        7: 10,
+        8: 18,
+        9: 19,
+        10: 11,
+        11: 20,
+        12: 12,
+        13: 13,
+        14: 21,
+        15: 22,
+        16: 14,
+        17: 15,
+        18: 23,
+    },
+    0: {
+        1: 8,
+        2: 16,
+        3: 17,
+        4: 9,
+        5: 10,
+        6: 18,
+        7: 19,
+        8: 11,
+        9: 20,
+        10: 12,
+        11: 13,
+        12: 21,
+        13: 22,
+        14: 14,
+        15: 15,
+        16: 23,
+    },
 }
 
diff --git a/src/game/game_logic.tsx b/src/game/game_logic.tsx
index 9e9e6a3..d3ad5bf 100644
--- a/src/game/game_logic.tsx
+++ b/src/game/game_logic.tsx
@@ -13,7 +13,8 @@ import {
     setP1Info,
     setp2Info, setPick, setPickList1, setPickList2,
     setPlayerTurn,
-    setResMsg, setSelectedCharacters, setTimer, timer
+    setResMsg, setSelectedCharacters, setTimer, timer,
+    setGameSetting, banlist1, gameSetting
 } from "~/game/game_state";
 import {chosenCharacter, setTargetCard} from "~/data/store";
 import {TargetCard2TurnMap} from "~/data/turn_info";
@@ -66,6 +67,9 @@ function GameStateUpdate(res : ResMessage) {
     let game_state = JSON.parse(res.data)
     console.log(game_state)
 
+    // Update Game Setting
+    GameSettingUpdate(game_state)
+
     // Update Player Info
     PlayerUpdate(game_state)
 
@@ -95,6 +99,16 @@ function GameStateUpdate(res : ResMessage) {
     }
 }
 
+function GameSettingUpdate(gs: any) {
+    const num_ban = parseInt(gs.settings.num_ban)
+    setGameSetting("ban_number", num_ban)
+
+    if (banlist1.length != num_ban) {
+        setBanList1(Array.from({length: num_ban}))
+        setBanList2(Array.from({length: num_ban}))
+    }
+}
+
 function GameEndUpdate(gs : any) {
     if (gs.status === GameStatus.ENDED) {
         setGameEnded(true)
@@ -124,8 +138,9 @@ function SelectedCardUpdate(gs :any) {
 
 const TargetUpdate = (gs : any) => {
     const turn = gs.turn
+    const format = gs.settings.num_ban
     // @ts-ignore
-    const targetPos = TargetCard2TurnMap[turn]
+    const targetPos = TargetCard2TurnMap[format][turn]
     setTargetCard(targetPos)
 }
 
@@ -134,13 +149,13 @@ const BoardUpdate = (gs : any) => {
     // Update p1_ban
     const p1_ban = gs.board.p_1_ban
     if (p1_ban) {
-        setBanList1(createTeamArray(p1_ban, 4))
+        setBanList1(createTeamArray(p1_ban, gameSetting.ban_number))
     }
 
     // Update p2_ban
     const p2_ban = gs.board.p_2_ban
     if (p2_ban) {
-        setBanList2(createTeamArray(p2_ban, 4))
+        setBanList2(createTeamArray(p2_ban, gameSetting.ban_number))
     }
 
     // Update p1_pick
@@ -200,7 +215,7 @@ function EnableBtn(b : boolean) {
 }
 
 const checkNewGame = (gs : any) => {
-    if (gs.board.p_1_ban === null) {
+    if (gs.turn === 1) {
         return true
     } else {
         console.log(gs.board.p_1_ban)
diff --git a/src/game/game_state.tsx b/src/game/game_state.tsx
index bd3ea50..236f16b 100644
--- a/src/game/game_state.tsx
+++ b/src/game/game_state.tsx
@@ -24,8 +24,8 @@ const [p1Info, setP1Info] = createStore<Player>({...EmptyPlayer, side: Side.LEFT
 const [p2Info, setp2Info] = createStore<Player>({...EmptyPlayer, side: Side.RIGHT})
 
 const  [selectedCharacters, setSelectedCharacters] = createStore<GenshinCharacter['id'][]>([])
-const [banlist1, setBanList1] = createStore<GenshinCharacter['id'][]>(Array.from({length: 4}))
-const [banlist2, setBanList2] = createStore<GenshinCharacter['id'][]>(Array.from({length: 4}))
+const [banlist1, setBanList1] = createStore<GenshinCharacter['id'][]>(Array.from({length: 1}))
+const [banlist2, setBanList2] = createStore<GenshinCharacter['id'][]>(Array.from({length: 1}))
 const [picklist1, setPickList1] = createStore<GenshinCharacter['id'][]>(Array.from({length: 8}))
 const [picklist2, setPickList2] = createStore<GenshinCharacter['id'][]>(Array.from({length: 8}))