Maybe fix nonexisting user

src/components/PlayerSelection.vue

@@ -2,7 +2,7 @@
   <h2>Select Players</h2>
   <div class="col" v-auto-animate>
     <button
-      v-for="user in selectedUsers"
+      v-for="user in players"
       :style="{
         opacity: user == draggedUser ? 0.3 : user == hoverUser ? 0.6 : 1,
       }"
@@ -48,38 +48,28 @@ export type UserCurrentInfo = User & {
   beers?: number
 }
 
-const props = defineProps<{
-  players: UserCurrentInfo[]
-}>()
-
-const emit = defineEmits<{
-  update: [players: UserCurrentInfo[]]
-}>()
+const players = defineModel<UserCurrentInfo[]>('players', { required: true })
 
 const usersStore = useUsersStore()
-
-const selectedUsers = ref<UserCurrentInfo[]>(props.players)
 const draggedUser = ref<UserCurrentInfo | null>(null)
 const hoverUser = ref<UserCurrentInfo | null>(null)
 
 const clearPlayers = () => {
-  if (!usersStore.getCurrentUser || selectedUsers.value.length == 1) {
-    selectedUsers.value = []
+  if (!usersStore.getCurrentUser || players.value.length == 1) {
+    players.value = []
   } else {
-    selectedUsers.value = [usersStore.getCurrentUser]
+    players.value = [usersStore.getCurrentUser]
   }
-  emit('update', selectedUsers.value)
 }
 
 const searchForPlayer = () => {
   useModalStore().push(
     PlayerSearch,
-    { selectedUsers: selectedUsers.value },
+    { selectedUsers: players.value },
     {
       select: (user) => {
-        selectedUsers.value.push(user)
+        players.value.push(user)
         useModalStore().pop()
-        emit('update', selectedUsers.value)
       },
     }
   )
@@ -91,9 +81,9 @@ const editUser = (user: UserCurrentInfo) => {
     { user, leftButtonText: 'Remove' },
     {
       cancel: () => {
-        const index = selectedUsers.value.indexOf(user)
+        const index = players.value.indexOf(user)
         if (index >= 0) {
-          selectedUsers.value.splice(index, 1)
+          players.value.splice(index, 1)
         }
         useModalStore().pop()
       },
@@ -104,25 +94,26 @@ const editUser = (user: UserCurrentInfo) => {
       },
     }
   )
-  emit('update', selectedUsers.value)
 }
 
 const dragUser = (from: UserCurrentInfo | null, to: UserCurrentInfo) => {
   if (!from) return
-  const fromIndex = selectedUsers.value.indexOf(from)
-  const toIndex = selectedUsers.value.indexOf(to)
-  selectedUsers.value[fromIndex] = to
-  selectedUsers.value[toIndex] = from
+  const fromIndex = players.value.indexOf(from)
+  const toIndex = players.value.indexOf(to)
+  players.value[fromIndex] = to
+  players.value[toIndex] = from
   draggedUser.value = null
-  emit('update', selectedUsers.value)
 }
 
 watch(
   () => usersStore.getCurrentUser,
   (user) => {
-    if (user && !selectedUsers.value.find((u) => u.id == user.id)) {
-      selectedUsers.value.push(user)
-      emit('update', selectedUsers.value)
+    if (!user) return
+    const player = players.value.find((p) => p.id == user.id)
+    if (!player) {
+      players.value.push(user)
+    } else {
+      Object.assign(player, user)
     }
   },
   { immediate: true }

src/stores/auth.ts

@@ -1,14 +1,41 @@
+import Prompt from '@/components/Prompt.vue'
 import { supabase } from '@/supabase'
 import { User as AuthUser } from '@supabase/supabase-js'
 import { acceptHMRUpdate, defineStore } from 'pinia'
+import { useLoadingStore } from './loading'
+import { useModalStore } from './modal'
 import { useOnlineStore } from './online'
-import { useStatsStore } from './stats'
 import { User, useUsersStore } from './users'
+import { useStatsStore } from './stats'
 
 const initAuth = async (auth: AuthUser) => {
   useAuthStore().auth = auth
   useOnlineStore().initRoom(auth.id)
-  await useUsersStore().fetchUsers()
+  const usersStore = useUsersStore()
+  await usersStore.fetchUsers()
+  if (!usersStore.getCurrentUser) {
+    // uh oh!
+    useModalStore().push(
+      Prompt,
+      {
+        text: "Something went wrong! Your username has been reset. Go to 'My Profile' to edit.",
+        buttons: [
+          {
+            text: 'Ok.',
+            onClick: async () => {
+              useLoadingStore().loading = true
+              await useAuthStore().setUserParams({ name: '<?>' })
+              useLoadingStore().loading = false
+              useModalStore().pop()
+              await initAuth(auth)
+            },
+          },
+        ],
+      },
+      {}
+    )
+    return
+  }
   await useStatsStore().fetchAll()
   await supabase
     .from('users')
@@ -72,12 +99,12 @@ export const useAuthStore = defineStore('auth', {
         // because user from parameter may include other fields
         name: user.name,
         createdAt: user.createdAt,
-        id: user.id,
+        id: user.id ?? this.auth.id,
         walkOn: user.walkOn,
         walkOnTime: user.walkOnTime,
         walkOnEndTime: user.walkOnEndTime,
       } satisfies Partial<User>
-      if (prevName.data?.length == 0) {
+      if (!prevName.data) {
         await supabase.from('users').insert(copy)
       } else {
         await supabase.from('users').update(copy).eq('id', this.auth.id)

src/stores/users.ts

@@ -21,14 +21,6 @@ export const useUsersStore = defineStore('users', {
       }
     },
 
-    getUser(id?: string) {
-      return this.users.find((user) => user.id == id)
-    },
-
-    getName(id?: string) {
-      return this.users.find((user) => user.id == id)?.name ?? 'Unknown'
-    },
-
     getUserSelectionHistory() {
       const json = localStorage.getItem('userSelectionHistory')
       return json ? (JSON.parse(json) as string[]) : []
@@ -59,6 +51,14 @@ export const useUsersStore = defineStore('users', {
         ...user,
       }
     },
+
+    getUser: (state) => (id?: string) => {
+      return state.users.find((user) => user.id == id)
+    },
+
+    getName: (state) => (id?: string) => {
+      return state.users.find((user) => user.id == id)?.name ?? 'Unknown'
+    },
   },
 })
 

src/views/HomeView.vue

@@ -19,10 +19,7 @@
     @update-type-attributes="homeStore.typeAttributes = $event"
   ></GameSelection>
 
-  <PlayerSelection
-    :players="homeStore.players"
-    @update="homeStore.players = $event"
-  ></PlayerSelection>
+  <PlayerSelection v-model:players="homeStore.players"></PlayerSelection>
 
   <br />
   <button