50 lines
No EOL
1.3 KiB
Vue
50 lines
No EOL
1.3 KiB
Vue
<template>
|
|
<div class="flex flex-col h-full justify-center items-center gap-8 text-4xl md:text-8xl">
|
|
<input
|
|
v-model="usernameInput"
|
|
class="bg-transparent text-white text-6xl text-center font-fat w-full focus:outline-none border-none"
|
|
placeholder="Username"
|
|
maxlength="20"
|
|
/>
|
|
<button
|
|
class="font-bold font-inherit text-inherit text-2xl md:text-4xl border border-solid border-gray-500 rounded<md bg-white bg-opacity-0 transition px-10 py-4 cursor-pointer"
|
|
:class="$style.button"
|
|
:disabled="usernameInput.length <= 0 || usernameInput.length > 20"
|
|
@click="submit()"
|
|
>
|
|
Continue
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
.button {
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&:not(:disabled):hover {
|
|
--un-bg-opacity: 10%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watchEffect } from "vue"
|
|
import { useGame } from "../clientGame"
|
|
import { LOBBY_CODE_LENGTH } from "../../shared/constants"
|
|
import { useBrowserLocation } from "@vueuse/core"
|
|
import { useAuth } from "../auth"
|
|
|
|
const auth = useAuth()
|
|
const usernameInput = ref("")
|
|
const isLoading = ref(false)
|
|
|
|
async function submit() {
|
|
if (isLoading.value) return
|
|
isLoading.value = true
|
|
await auth.login(usernameInput.value)
|
|
window.location.reload() // so that the WebSocket reconnects with the cookie set
|
|
isLoading.value = false
|
|
}
|
|
</script> |