@@ -9,6 +9,7 @@ import { computed, ref } from 'vue';
99import { useMutex } from ' @tb-dev/vue' ;
1010import { useRouter } from ' vue-router' ;
1111import { formatToday } from ' @/lib/date' ;
12+ import { joinRemoteGame } from ' @/core/game' ;
1213import { useUserStore } from ' @/stores/user' ;
1314import Loading from ' @/components/Loading.vue' ;
1415import { isValidPassword } from ' @/lib/schema' ;
@@ -34,19 +35,27 @@ const { authorizationToken } = storeToRefs(userStore);
3435
3536const { remoteWorld, loading } = useRemoteWorld (worldId );
3637
37- const password = ref <Option <string >>();
38+ const worldPassword = ref <Option <string >>();
3839
3940const { locked, lock } = useMutex ();
4041const canJoin = computed (() => {
4142 return (
4243 Boolean (remoteWorld .value ) &&
4344 Boolean (authorizationToken .value ) &&
44- (! remoteWorld .value ?.hasPassword || isValidPassword (password .value ))
45+ (! remoteWorld .value ?.hasPassword || isValidPassword (worldPassword .value ))
4546 );
4647});
4748
4849async function join() {
49- await lock (async () => {});
50+ await lock (async () => {
51+ if (remoteWorld .value && authorizationToken .value ) {
52+ await joinRemoteGame ({
53+ worldId: remoteWorld .value .id ,
54+ worldPassword: worldPassword .value ,
55+ authorizationToken: authorizationToken .value ,
56+ });
57+ }
58+ });
5059}
5160 </script >
5261
@@ -69,11 +78,8 @@ async function join() {
6978 <Box :label =" t('updated-at')" :content =" formatToday(remoteWorld.updatedAtDate)" />
7079 </div >
7180
72- <div class =" w-full flex justify-center items-center" >
73- <span
74- v-if =" remoteWorld.description"
75- class =" md:max-w-6/8 break-all wrap-anywhere text-center text-muted-foreground"
76- >
81+ <div v-if =" remoteWorld.description" class =" w-full flex justify-center items-center py-2" >
82+ <span class =" md:max-w-6/8 text-sm md:text-base text-center text-muted-foreground break-all wrap-anywhere" >
7783 {{ remoteWorld.description }}
7884 </span >
7985 </div >
@@ -82,7 +88,7 @@ async function join() {
8288 <CardFooter class =" w-full flex flex-col gap-4!" >
8389 <Input
8490 v-if =" remoteWorld.hasPassword"
85- v-model =" password "
91+ v-model =" worldPassword "
8692 type =" password"
8793 :placeholder =" t('password')"
8894 :disabled =" locked"
0 commit comments