Merge branch 'main' of https://github.com/ntnui-darts/dartpp into main

src/components/Modal.vue

@@ -26,7 +26,7 @@ defineProps<{
 .modal {
   position: relative;
   background-color: var(--c-background);
-  border-radius: 1.5em;
+  border-radius: 1em;
   box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.5);
   min-height: 25%;
   max-height: 80%;

src/components/ModalView.vue

@@ -13,7 +13,10 @@
     class="overlay clickthrough modal-wrapper col center"
     style="height: 100%"
   >
-    <Modal :component="component"></Modal>
+    <Modal
+      v-show="component == modalStore.components.at(-1)"
+      :component="component"
+    ></Modal>
   </div>
 </template>
 

src/components/PlayerOptions.vue

@@ -0,0 +1,35 @@
+<template>
+  <h3>Status of {{ user.name }}</h3>
+  <label for="beers">Beers</label>
+  <input id="beers" type="number" v-model="beers" />
+  <label for="arrows">Arrows</label>
+  <input id="arrows" type="text" v-model="arrows" />
+  <br />
+  <div class="row">
+    <button @click="emit('cancel')">Cancel</button>
+    <button @click="emit('submit', { beers, arrows })">Confirm</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { User } from '@/stores/users'
+import { ref } from 'vue'
+
+const beers = ref(0)
+const arrows = ref('unknown')
+
+defineProps<{
+  user: User
+}>()
+
+const emit = defineEmits<{
+  cancel: []
+  submit: [data: { beers: number; arrows: string }]
+}>()
+</script>
+
+<style>
+input {
+  min-width: 250px;
+}
+</style>

src/components/PlayerSearch.vue

@@ -0,0 +1,79 @@
+<template>
+  <input
+    type="text"
+    ref="inputElement"
+    v-model="searchText"
+    placeholder="Search by name.."
+  />
+
+  <div class="col" style="height: 400px; overflow: auto">
+    <button
+      v-for="user in searchResultUsers"
+      :key="user.id"
+      :id="user.id"
+      :disabled="props.selectedUsers.some((u) => u.id == user.id)"
+      @click="select(user)"
+    >
+      {{ user.name }}
+    </button>
+    <p v-if="searchResultUsers.length == 0">No results 🤔</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useModalStore } from '@/stores/modal'
+import { User, useUsersStore } from '@/stores/users'
+import { ref, computed, onMounted } from 'vue'
+import PlayerOptions from './PlayerOptions.vue'
+
+const props = defineProps<{
+  selectedUsers: User[]
+}>()
+
+const emit = defineEmits<{
+  select: [user: User]
+}>()
+
+const usersStore = useUsersStore()
+
+const inputElement = ref<HTMLInputElement | null>(null)
+const searchText = ref('')
+
+const searchResultUsers = computed(() => {
+  return usersStore.users
+    .filter((user) =>
+      user.name.toLowerCase().includes(searchText.value.toLowerCase())
+    )
+    .slice(0, 10)
+})
+
+onMounted(() => {
+  inputElement.value?.focus()
+})
+
+const select = (user: User) => {
+  useModalStore().push(
+    PlayerOptions,
+    { user },
+    {
+      cancel: () => useModalStore().pop(),
+      submit: (data: { beers: number; arrows: string }) => {
+        emit('select', {
+          ...user,
+          ...data,
+        })
+        useModalStore().pop()
+      },
+    }
+  )
+}
+</script>
+
+<style scoped>
+input {
+  min-width: 250px;
+}
+button {
+  flex: 0;
+}
+</style>

src/components/PlayerSelection.vue

@@ -0,0 +1,70 @@
+<template>
+  <h2>Select Players</h2>
+  <div class="col" v-auto-animate>
+    <button
+      v-for="user in selectedUsers"
+      :key="user.id"
+      :id="user.id"
+      :class="{ selected: true }"
+      @click="toggleUser(user)"
+    >
+      {{ user.name }}
+    </button>
+  </div>
+  <button @click="searchForPlayer">+ Add Player</button>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { User, useUsersStore } from '@/stores/users'
+import { useModalStore } from '@/stores/modal'
+import PlayerSearch from './PlayerSearch.vue'
+
+export type UserCurrentInfo = User & {
+  arrows?: string
+  beers?: number
+}
+
+const emit = defineEmits<{
+  update: [players: UserCurrentInfo[]]
+}>()
+
+const usersStore = useUsersStore()
+
+const selectedUsers = ref<UserCurrentInfo[]>([])
+
+const searchForPlayer = () => {
+  useModalStore().push(
+    PlayerSearch,
+    { selectedUsers: selectedUsers.value },
+    {
+      select: (user) => {
+        selectedUsers.value.push(user)
+        useModalStore().pop()
+        emit('update', selectedUsers.value)
+      },
+    }
+  )
+}
+
+const toggleUser = (user: UserCurrentInfo) => {
+  const index = selectedUsers.value.findIndex((u) => u.id == user.id)
+  if (index == -1) {
+    selectedUsers.value.push(user)
+  } else {
+    selectedUsers.value.splice(index, 1)
+  }
+  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)
+    }
+  },
+  { immediate: true }
+)
+</script>

src/style.css

@@ -34,7 +34,6 @@ button {
   background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
-  flex: 1;
 }
 button:hover {
   border-color: var(--c-green);
@@ -59,6 +58,10 @@ button:disabled {
   gap: 1em;
 }
 
+.row > button {
+  flex: 1;
+}
+
 .spaced {
   justify-content: space-between;
 }
@@ -68,7 +71,9 @@ button:disabled {
 }
 
 input {
-  padding: 0.5em;
+  padding: 1em;
+  border-radius: 0.5em;
+  border: none;
 }
 
 .clickable {

src/views/HomeView.vue

@@ -15,43 +15,35 @@
     </button>
   </div>
   <component
-    :is="getOptionsInput(gameType)"
+    :is="getOptionsComponent(gameType)"
     @update="typeAttributes = $event"
   ></component>
-  <h2>Select Players</h2>
-  <div v-auto-animate class="col">
-    <button
-      v-for="user in usersStore.users"
-      :key="user.id"
-      :id="user.id"
-      :class="{ selected: selectedUsers.has(user.id) }"
-      @click="toggleUser(user)"
-    >
-      {{ user.name }}
-    </button>
-  </div>
+  <PlayerSelection @update="players = $event"></PlayerSelection>
   <br />
   <br />
-  <button :disabled="selectedUsers.size == 0" @click="onPlay">Play</button>
+  <button :disabled="players.length == 0" @click="onPlay">Play</button>
 </template>
 
 <script lang="ts" setup>
 import ReloadView from '@/components/ReloadView.vue'
 import { router } from '@/router'
 import { GameType, Leg, GameDisplayNames } from '@/types/game'
-import { useUsersStore, User } from '@/stores/users'
+import { useUsersStore } from '@/stores/users'
 import { nanoid } from 'nanoid'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useModalStore } from '@/stores/modal'
 import { useGameStore } from '@/stores/game'
 import X01OptionsInput from '@/components/X01OptionsInput.vue'
 import RtcOptionsInput from '@/components/RtcOptionsInput.vue'
+import PlayerSelection, {
+  UserCurrentInfo,
+} from '@/components/PlayerSelection.vue'
 
 const gameStore = useGameStore()
 const usersStore = useUsersStore()
 
 const typeAttributes = ref<string[]>([])
-const selectedUsers = ref(new Set<string>())
+const players = ref<UserCurrentInfo[]>([])
 const gameType = ref<GameType>('301')
 
 onMounted(() => {
@@ -60,17 +52,7 @@ onMounted(() => {
   }
 })
 
-watch(
-  () => usersStore.getCurrentUser,
-  (user) => {
-    if (user) {
-      selectedUsers.value.add(user.id)
-    }
-  },
-  { immediate: true }
-)
-
-const getOptionsInput = (type: GameType) => {
+const getOptionsComponent = (type: GameType) => {
   switch (type) {
     case '301':
     case '501':
@@ -81,43 +63,35 @@ const getOptionsInput = (type: GameType) => {
   }
 }
 
-const toggleUser = (user: User) => {
-  if (selectedUsers.value.has(user.id)) {
-    selectedUsers.value.delete(user.id)
-  } else {
-    selectedUsers.value.add(user.id)
-  }
-}
-
 const selectGameType = (type: GameType) => {
   if (gameType.value == type) return
   gameType.value = type
 }
 
 const onPlay = () => {
-  if (selectedUsers.value.size == 0) return
+  if (players.value.length == 0) return
   if (!usersStore.getCurrentUser) return
   const gameId = nanoid()
-  const players = Array.from(selectedUsers.value)
+
   gameStore.setCurrentGame({
     id: gameId,
     userId: usersStore.getCurrentUser.id,
     typeAttributes: typeAttributes.value,
     type: gameType.value,
     result: [],
-    players,
-    legs: players.map(
-      (userId) =>
+    players: players.value.map((player) => player.id),
+    legs: players.value.map(
+      (player) =>
         ({
           id: nanoid(),
-          userId,
+          userId: player.id,
           visits: [],
-          arrows: 'unknown',
+          arrows: player.arrows ?? 'unknown',
           confirmed: false,
           gameId: gameId,
           typeAttributes: typeAttributes.value,
           type: gameType.value,
-          beers: null,
+          beers: player.beers ?? null,
           finish: false,
           createdAt: new Date().toISOString(),
         } satisfies Leg)