fix: move char selector card can submit state to char list

Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · May 31, 2024 · b9d34a1 · b9d34a1
1 parent 3a3e6d0
commit b9d34a1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/src/components/auth/CharacterSelector.vue b/src/components/auth/CharacterSelector.vue
@@ -30,6 +30,12 @@ watch(chars, async () => {
         await chooseCharacter(chars.value[0].char!.userId, true);
     }
 });
+
+const canSubmit = ref(true);
+const onSubmitThrottle = useThrottleFn(async (charId: number) => {
+    canSubmit.value = false;
+    await chooseCharacter(charId, true).finally(() => useTimeoutFn(() => (canSubmit.value = true), 400));
+}, 1000);
 </script>
 
 <template>
@@ -56,7 +62,7 @@ watch(chars, async () => {
             }"
             :ui="{ item: 'basis-full sm:basis-1/4', container: 'rounded-lg' }"
         >
-            <CharacterSelectorCard :key="item.userId" :char="item.char" :disabled="!item.available" />
+            <CharacterSelectorCard :key="item.userId" :char="item.char" :disabled="!item.available" :can-submit="canSubmit" @selected="onSubmitThrottle($event)" />
         </UCarousel>
 
         <UContainer v-if="chars?.find((c) => c.available === false)" class="mt-4" :ui="{ constrained: 'max-w-xl' }">

diff --git a/src/components/auth/CharacterSelectorCard.vue b/src/components/auth/CharacterSelectorCard.vue
@@ -8,25 +8,24 @@ import ProfilePictureImg from '~/components/partials/citizens/ProfilePictureImg.
 const authStore = useAuthStore();
 
 const { lastCharID } = storeToRefs(authStore);
-const { chooseCharacter } = authStore;
 
-const props = withDefaults(
+withDefaults(
     defineProps<{
         char: User;
-        disabled?: boolean;
+        unavailable?: boolean;
+        canSubmit?: boolean;
     }>(),
     {
-        disabled: false,
+        unavailable: false,
+        canSubmit: true,
     },
 );
 
-const { game } = useAppConfig();
+defineEmits<{
+    (e: 'selected', id: number): void;
+}>();
 
-const canSubmit = ref(true);
-const onSubmitThrottle = useThrottleFn(async (_) => {
-    canSubmit.value = false;
-    await chooseCharacter(props.char.userId, true).finally(() => useTimeoutFn(() => (canSubmit.value = true), 400));
-}, 1000);
+const { game } = useAppConfig();
 </script>
 
 <template>
@@ -84,12 +83,12 @@ const onSubmitThrottle = useThrottleFn(async (_) => {
             <UButton
                 block
                 class="inline-flex items-center"
-                :disabled="disabled || !canSubmit"
+                :disabled="unavailable || !canSubmit"
                 :loading="!canSubmit"
-                :icon="disabled ? 'i-mdi-lock' : undefined"
-                @click="onSubmitThrottle(char.userId)"
+                :icon="unavailable ? 'i-mdi-lock' : undefined"
+                @click="$emit('selected', char.userId)"
             >
-                {{ !disabled ? $t('common.choose') : $t('components.auth.CharacterSelectorCard.disabled_char') }}
+                {{ !unavailable ? $t('common.choose') : $t('components.auth.CharacterSelectorCard.disabled_char') }}
             </UButton>
         </template>
     </UCard>