Adding more ban format (#18) (#19)

* Adding more formats (50%) * Adding more formats (55%) * Adding more ban pick formats (99%)
emilebui · Jun 28, 2023 · d99f441 · d99f441
1 parent f1465b0
commit d99f441
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 71 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}))