Fix Cricket in online mode

src/components/CricketGameInput.vue

@@ -67,24 +67,34 @@
 <script lang="ts" setup>
 import { stringMaxLength } from '@/functions/string'
 import { CricketGameState } from '@/games/cricket'
-import { useGameStore } from '@/stores/game'
 import { useUsersStore } from '@/stores/users'
-import { Segment, multiplierToString } from '@/types/game'
+import {
+  Game,
+  GameController,
+  GameState,
+  Segment,
+  multiplierToString,
+} from '@/types/game'
 import { computed, ref } from 'vue'
 
-const selectedMultiplier = ref(1)
-const selectedSector = ref<number | null>(null)
-const gameState = computed(() => useGameStore().gameState as CricketGameState)
-const currentPlayer = computed(() =>
-  gameState.value.players.find((p) => p.id == gameState.value.player)
-)
+const props = defineProps<{
+  game: Game
+  gameState: CricketGameState
+  gameController: GameController<GameState>
+}>()
 
 const emit = defineEmits<{
   hit: [segment: Segment]
   miss: []
   undo: []
 }>()
 
+const selectedMultiplier = ref(1)
+const selectedSector = ref<number | null>(null)
+const currentPlayer = computed(() =>
+  props.gameState.players.find((p) => p.id == props.gameState.player)
+)
+
 const selectSector = (sector: number) => {
   if (sector == 0) {
     emit('miss')

src/components/KillerGameInput.vue

@@ -79,23 +79,26 @@
 
 <script lang="ts" setup>
 import { KillerController, KillerPlayer } from '@/games/killer'
-import { useGameStore } from '@/stores/game'
 import { useUsersStore } from '@/stores/users'
-import { Segment, multiplierToString } from '@/types/game'
+import { Game, GameState, Segment, multiplierToString } from '@/types/game'
 import { onMounted, ref } from 'vue'
 
-const selectedMultiplier = ref(1)
-const selectedSector = ref<number | null>(null)
-const gameStore = useGameStore()
-
-const players = ref<KillerPlayer[]>([])
+const props = defineProps<{
+  game: Game
+  gameState: GameState
+  gameController: KillerController
+}>()
 
 const emit = defineEmits<{
   hit: [segment: Segment]
   miss: []
   undo: []
 }>()
 
+const selectedMultiplier = ref(1)
+const selectedSector = ref<number | null>(null)
+const players = ref<KillerPlayer[]>([])
+
 const selectSector = (sector: number | null) => {
   if (sector == null) throw Error()
   if (sector == 0) {
@@ -112,10 +115,9 @@ const selectSector = (sector: number | null) => {
 
 const updatePlayers = () => {
   players.value =
-    (useGameStore().getController() as KillerController)
+    props.gameController
       .getKillerPlayers()
-      .filter((player) => !gameStore.gameState?.rank.includes(player.userId)) ??
-    []
+      .filter((player) => !props.gameState?.rank.includes(player.userId)) ?? []
 }
 
 onMounted(() => {

src/components/MainGame.vue

@@ -53,6 +53,8 @@
       v-if="showInput"
       :is="getInputComponent(game.type)"
       :game="game"
+      :game-state="gameState"
+      :game-controller="gameController"
       @hit="emit('hit', $event)"
       @miss="emit('miss')"
       @undo="emit('undo')"

src/components/RtcGameInput.vue

@@ -24,6 +24,8 @@
 <script lang="ts" setup>
 import {
   Game,
+  GameController,
+  GameState,
   Multiplier,
   Segment,
   getTypeAttribute,
@@ -33,6 +35,8 @@ import { ref } from 'vue'
 
 const props = defineProps<{
   game: Game
+  gameState: GameState
+  gameController: GameController<GameState>
 }>()
 
 const emit = defineEmits<{

src/components/X01GameInput.vue

@@ -43,12 +43,24 @@
 </template>
 
 <script lang="ts" setup>
-import { Segment, multiplierToString } from '@/types/game'
+import {
+  Game,
+  GameController,
+  GameState,
+  Segment,
+  multiplierToString,
+} from '@/types/game'
 import { ref } from 'vue'
 
 const selectedMultiplier = ref(1)
 const selectedSector = ref<number | null>(null)
 
+defineProps<{
+  game: Game
+  gameState: GameState
+  gameController: GameController<GameState>
+}>()
+
 const emit = defineEmits<{
   hit: [segment: Segment]
   miss: []

src/stores/online.ts

@@ -45,7 +45,6 @@ export const useOnlineStore = defineStore('online', {
       this.outChannel = supabase
         .channel(`game-${userId}`)
         .on('broadcast', { event: 'input' }, (args) => {
-          console.log(args)
           const gameStore = useGameStore()
           const player = gameStore.gameState?.player
           if (args.payload.userId != player) return