Compare commits
No commits in common. "6ef829dbc8df88b13fd47d23a0374096e3282437" and "67f0e397779d09f891d7a49969ef6cc184328a45" have entirely different histories.
6ef829dbc8
...
67f0e39777
|
|
@ -1,6 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
|
||||
style="shape-rendering: auto; display: block;" width="50" height="50">
|
||||
<circle stroke-linecap="round" fill="none" stroke="#16a34a"
|
||||
stroke-width="8" r="32" cy="50" cx="50" data-idx="2">
|
||||
</circle>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 314 B |
|
|
@ -4,8 +4,8 @@ import { backend, set_auth_token, UserInfo } from "../utils";
|
|||
import { Card } from "../components/Card";
|
||||
import { AxiosError } from "axios";
|
||||
|
||||
export const userIdKey = "UserId";
|
||||
export const usernameKey = "Username";
|
||||
const userIdKey = "UserId";
|
||||
const usernameKey = "Username";
|
||||
|
||||
export function Index() {
|
||||
const [userInfo, setUserInfo] = createSignal<UserInfo | null>(null);
|
||||
|
|
@ -66,7 +66,7 @@ export function Index() {
|
|||
<p>Validating user id...</p>
|
||||
</Show>
|
||||
<Show when={userInfo() !== null && validated()}>
|
||||
<LobbyConnection user_id={userInfo()!.UserId} />
|
||||
<LobbyConnection />
|
||||
</Show>
|
||||
</div>
|
||||
<hr />
|
||||
|
|
@ -162,7 +162,7 @@ function UserRegistration(props: {setUserInfo: (u: UserInfo) => void}) {
|
|||
);
|
||||
}
|
||||
|
||||
function LobbyConnection(props: {user_id: string}) {
|
||||
function LobbyConnection() {
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [error, setError] = createSignal("");
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -175,9 +175,7 @@ function LobbyConnection(props: {user_id: string}) {
|
|||
setLoading(true);
|
||||
|
||||
try {
|
||||
const res = await backend.post<{LobbyId: string}>("/lobby/new", {
|
||||
UserId: props.user_id,
|
||||
});
|
||||
const res = await backend.post<{LobbyId: string}>("/lobby/new");
|
||||
console.log(res.data);
|
||||
// Redirect to the lobby component using the received lobby id
|
||||
navigate(`/lobby/${res.data.LobbyId}`);
|
||||
|
|
|
|||
|
|
@ -1,102 +1,39 @@
|
|||
import { Show, createSignal, onCleanup, onMount } from "solid-js";
|
||||
import { Show, createSignal, onMount } from "solid-js";
|
||||
import LoadingIcon from "../assets/loading.svg";
|
||||
import ErrorIcon from "../assets/error.svg";
|
||||
import ConnectedIcon from "../assets/ok.svg";
|
||||
import { userIdKey } from "./Index";
|
||||
import { useNavigate, useParams } from "@solidjs/router";
|
||||
|
||||
enum LobbyStatus {
|
||||
Connecting,
|
||||
Connected,
|
||||
Disconnected,
|
||||
Authenticating,
|
||||
Error,
|
||||
}
|
||||
|
||||
type LobbyMsg = {
|
||||
action: string,
|
||||
value: string,
|
||||
}
|
||||
|
||||
const connectionRetryInterval = 5000;
|
||||
|
||||
export function Lobby() {
|
||||
const [status, setStatus] = createSignal(LobbyStatus.Disconnected);
|
||||
const navigate = useNavigate();
|
||||
const params = useParams();
|
||||
|
||||
const [status, setStatus] = createSignal(LobbyStatus.Connecting);
|
||||
let ws: WebSocket|null = null;
|
||||
|
||||
const lobbyConnect = () => {
|
||||
setStatus(LobbyStatus.Connecting);
|
||||
const lobbyConnect = async() => {
|
||||
ws = new WebSocket(`${import.meta.env.VITE_WS_URL}/lobby/connect`);
|
||||
|
||||
ws.addEventListener("open", onWsOpen);
|
||||
ws.addEventListener("message", onWsMessage);
|
||||
ws.addEventListener("error", onWsError);
|
||||
ws.addEventListener("close", onWsClose);
|
||||
};
|
||||
|
||||
const onWsOpen = () => {
|
||||
console.log("Connection open. Authenticating...");
|
||||
setStatus(LobbyStatus.Authenticating);
|
||||
|
||||
// The first message must be authenticating with the server
|
||||
// TODO
|
||||
|
||||
const userId = localStorage.getItem(userIdKey);
|
||||
if (userId === null) {
|
||||
// Redirect to home page
|
||||
ws?.close(1000);
|
||||
navigate("/");
|
||||
return;
|
||||
}
|
||||
|
||||
// Send an auth message to the server
|
||||
// The server will respond with either "authenticated" or "unauthenticated"
|
||||
// The message sent is <userid>,<lobbyid>
|
||||
ws!.send(JSON.stringify({
|
||||
action: "auth",
|
||||
value: `${userId},${params.id}`,
|
||||
}));
|
||||
};
|
||||
|
||||
const onWsMessage = (ev: MessageEvent) => {
|
||||
const data = JSON.parse(ev.data) as LobbyMsg;
|
||||
|
||||
switch (data.action) {
|
||||
case "auth": {
|
||||
if (data.value === "authenticated") {
|
||||
ws.addEventListener("open", () => {
|
||||
console.log("Connection open!");
|
||||
setStatus(LobbyStatus.Connected);
|
||||
} else if (data.value === "unauthenticated") {
|
||||
ws?.close(1000);
|
||||
navigate("/");
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const onWsError = (ev: Event) => {
|
||||
console.error("error in connection");
|
||||
ws.addEventListener("message", (ev) => {
|
||||
console.log("message from ws!");
|
||||
console.log(ev);
|
||||
});
|
||||
|
||||
ws.addEventListener("error", (ev) => {
|
||||
console.error(ev);
|
||||
setStatus(LobbyStatus.Error);
|
||||
};
|
||||
});
|
||||
|
||||
const onWsClose = (ev: CloseEvent) => {
|
||||
if (ev.code === 1000) {
|
||||
// The connection was normally closed
|
||||
return;
|
||||
}
|
||||
|
||||
// If the previous state is "Error", we don't set
|
||||
// the state to Disconnected
|
||||
if (status() !== LobbyStatus.Error) {
|
||||
setStatus(LobbyStatus.Disconnected);
|
||||
}
|
||||
|
||||
console.log(`connection closed. reconnecting in ${connectionRetryInterval}ms`);
|
||||
setTimeout(lobbyConnect, connectionRetryInterval);
|
||||
ws.addEventListener("close", () => {
|
||||
console.log("connection closed");
|
||||
});
|
||||
};
|
||||
|
||||
const send = () => {
|
||||
|
|
@ -110,10 +47,6 @@ export function Lobby() {
|
|||
};
|
||||
|
||||
onMount(lobbyConnect);
|
||||
onCleanup(() => {
|
||||
console.log("lobby cleanup");
|
||||
ws?.close(1000);
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="w-[40rem] mx-auto bg-c-bg-2 my-4 p-4 rounded shadow-md">
|
||||
|
|
@ -121,24 +54,12 @@ export function Lobby() {
|
|||
Lobby
|
||||
</h1>
|
||||
|
||||
<Show when={status() === LobbyStatus.Disconnected}>
|
||||
<p>
|
||||
<img class="inline-block h-6 animate-spin" src={LoadingIcon} alt="..." />
|
||||
Disconected. Attempting reconnection in {connectionRetryInterval / 1000} seconds.
|
||||
</p>
|
||||
</Show>
|
||||
<Show when={status() === LobbyStatus.Connecting}>
|
||||
<p>
|
||||
<img class="inline-block h-6 animate-spin" src={LoadingIcon} alt="..." />
|
||||
Connecting to the lobby
|
||||
</p>
|
||||
</Show>
|
||||
<Show when={status() === LobbyStatus.Authenticating}>
|
||||
<p>
|
||||
<img class="inline-block h-6 animate-spin" src={LoadingIcon} alt="..." />
|
||||
Authenticating with the server
|
||||
</p>
|
||||
</Show>
|
||||
|
||||
<Show when={status() === LobbyStatus.Error}>
|
||||
<p>
|
||||
|
|
@ -148,11 +69,6 @@ export function Lobby() {
|
|||
</Show>
|
||||
|
||||
<Show when={status() === LobbyStatus.Connected}>
|
||||
<p>
|
||||
<img class="inline-block h-6" src={ConnectedIcon} alt="..." />
|
||||
Connected
|
||||
</p>
|
||||
|
||||
<button class="bg-cyan-500 p-2 rounded text-white" onClick={send}>Send message</button>
|
||||
</Show>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue