Compare commits
No commits in common. "b0b14bc5594ebd3c3e38fca368ef0161c2dddd8f" and "f47280d432126e4a65b8add0e633666d58091f85" have entirely different histories.
b0b14bc559
...
f47280d432
@ -9,41 +9,11 @@ const usernameKey = "Username";
|
|||||||
|
|
||||||
export function Index() {
|
export function Index() {
|
||||||
const [userInfo, setUserInfo] = createSignal<UserInfo | null>(null);
|
const [userInfo, setUserInfo] = createSignal<UserInfo | null>(null);
|
||||||
const [validated, setValidated] = createSignal(false);
|
|
||||||
|
|
||||||
onMount(async() => {
|
onMount(() => {
|
||||||
// attempt to get userinfo from localstorage
|
// attempt to get userinfo from localstorage
|
||||||
// validate userinfo with backend
|
// validate userinfo with backend
|
||||||
const UserId = localStorage.getItem(userIdKey);
|
console.log("validating userinfo in localstorage");
|
||||||
const Username = localStorage.getItem(usernameKey);
|
|
||||||
|
|
||||||
if (UserId === null || Username === null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setUserInfo({
|
|
||||||
UserId,
|
|
||||||
Username,
|
|
||||||
});
|
|
||||||
setValidated(false);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// validate in backend
|
|
||||||
await backend.get("/validate", {
|
|
||||||
headers: {
|
|
||||||
"Authorization": `Bearer ${UserId}`,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// If the previous hasn't throw, the token is valid.
|
|
||||||
setValidated(true);
|
|
||||||
} catch (e) {
|
|
||||||
// If this throws, the userid is not validated
|
|
||||||
localStorage.removeItem(userIdKey);
|
|
||||||
localStorage.removeItem(usernameKey);
|
|
||||||
setUserInfo(null);
|
|
||||||
setValidated(false);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -56,17 +26,10 @@ export function Index() {
|
|||||||
<div class="py-4">
|
<div class="py-4">
|
||||||
<h2 class="text-xl py-2 font-black">Play:</h2>
|
<h2 class="text-xl py-2 font-black">Play:</h2>
|
||||||
<Show when={userInfo() === null}>
|
<Show when={userInfo() === null}>
|
||||||
<UserRegistration setUserInfo={(i) => {
|
<UserRegistration setUserInfo={setUserInfo} />
|
||||||
setValidated(true);
|
|
||||||
setUserInfo(i);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={userInfo() !== null && !validated()}>
|
<Show when={userInfo() !== null}>
|
||||||
<p>Validating user id...</p>
|
<p>:D (user registered)</p>
|
||||||
</Show>
|
|
||||||
<Show when={userInfo() !== null && validated()}>
|
|
||||||
<LobbyConnection />
|
|
||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
@ -161,54 +124,3 @@ function UserRegistration(props: {setUserInfo: (u: UserInfo) => void}) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function LobbyConnection() {
|
|
||||||
const [loading, setLoading] = createSignal(false);
|
|
||||||
|
|
||||||
const joinLobby = (ev: Event) => {
|
|
||||||
ev.preventDefault();
|
|
||||||
};
|
|
||||||
|
|
||||||
const createLobby = async() => {
|
|
||||||
//
|
|
||||||
setLoading(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="pl-2 border-l border-c-border-1">
|
|
||||||
<h3 class="text-xl py-2 font-bold">Join a lobby:</h3>
|
|
||||||
|
|
||||||
<form onSubmit={joinLobby}>
|
|
||||||
<label for="lobby-join-input">
|
|
||||||
Enter the ID of the lobby you want to join:
|
|
||||||
</label>
|
|
||||||
<br />
|
|
||||||
<input
|
|
||||||
id="lobby-join-input"
|
|
||||||
type="text"
|
|
||||||
class="bg-c-bg text-c-on-bg py-1 px-2 rounded border border-c-border-1 my-2"
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<button
|
|
||||||
class="inline-block py-2 px-4 rounded bg-blue-600 text-white
|
|
||||||
disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
type="submit"
|
|
||||||
disabled={loading() || true}
|
|
||||||
>
|
|
||||||
Join lobby
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<h3 class="text-xl pt-6 pb-2 font-bold">Create a new lobby:</h3>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="inline-block py-2 px-4 rounded bg-blue-600 text-white
|
|
||||||
disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
onClick={createLobby}
|
|
||||||
disabled={loading()}
|
|
||||||
>
|
|
||||||
Create a new lobby
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
@ -5,7 +5,7 @@ export const backend = axios.create({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export type UserInfo = {
|
export type UserInfo = {
|
||||||
UserId: string,
|
UserId: number,
|
||||||
Username: string,
|
Username: string,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user