Oliver/Gravwell-Online
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the JoinLobby modal nicer

Browse source
This commit is contained in:
Oliver Akins 2022-03-15 01:34:09 -06:00
parent bcc0664342
commit c340755ba2
No known key found for this signature in database
GPG key ID: 3C2014AF9457AF99
2 changed files with 20 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

19
web-svelte/src/components/modals/JoinLobby.svelte
View file

@ -1,22 +1,24 @@
<script lang="ts"> <script lang="ts">
import { isHost, myName, gameCode, players, state } from "../../stores"; import { onDestroy, createEventDispatcher, onMount } from "svelte";
import { isHost, myName, gameCode, players } from "../../stores";
import SciFiButton from "../SciFi-Button.svelte"; import SciFiButton from "../SciFi-Button.svelte";
import { ILobbyInfo, Status } from "common"; import { ILobbyInfo, Status } from "common";
import { onDestroy, onMount } from "svelte";
import BaseModal from "./BaseModal.svelte"; import BaseModal from "./BaseModal.svelte";
import { socket } from "../../main"; import { socket } from "../../main";
const emit = createEventDispatcher();
export let open: boolean = false; export let open: boolean = false;
export let joining: boolean = false; export let joining: boolean;
let errorMessage: string|null = null; let errorMessage: string|null = null;
function handleLobbyConnection(data: ILobbyInfo) { function handleLobbyConnection(data: ILobbyInfo) {
if (data.status == Status.Success) { if (data.status == Status.Success) {
console.log(`Succesfully joined lobby`); console.debug(`Succesfully joined lobby`);
gameCode.set(data.game_code); gameCode.set(data.game_code);
players.set(data.players); players.set(data.players);
state.set(`multiplayer-lobby`); emit(`joined`);
} else { } else {
console.error(data); console.error(data);
errorMessage = data.message; errorMessage = data.message;
@ -24,20 +26,17 @@ function handleLobbyConnection(data: ILobbyInfo) {
}; };
onMount(() => { onMount(() => {
if (joining) {
socket.on(`res:lobby.players.join`, handleLobbyConnection); socket.on(`res:lobby.players.join`, handleLobbyConnection);
} else {
socket.on(`res:lobby.create`, handleLobbyConnection); socket.on(`res:lobby.create`, handleLobbyConnection);
};
}); });
function connectToLobby() { function connectToLobby() {
errorMessage = null; errorMessage = null;
isHost.set(joining); isHost.set(!joining);
// Emit the correct event for the modal type // Emit the correct event for the modal type
if (joining) { if (joining) {
socket.emit(`req:lobby.players.create`, { socket.emit(`req:lobby.players.join`, {
name: $myName, name: $myName,
game_code: $gameCode, game_code: $gameCode,
}); });

9
web-svelte/src/views/home.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import LobbyModal from "../components/modals/JoinLobby.svelte"; import LobbyModal from "../components/modals/JoinLobby.svelte";
import SciFiButton from "../components/SciFi-Button.svelte"; import SciFiButton from "../components/SciFi-Button.svelte";
import { state } from "../stores";
// The modals that can appear from this component // The modals that can appear from this component
const modal = { const modal = {
@ -18,12 +19,20 @@ function joinGame() {
modal.joinLobby = true; modal.joinLobby = true;
}; };
function joinedLobby() {
modal.joinLobby = false;
setTimeout(() => {
state.set("multiplayer-lobby");
}, 750);
};
function singleplayerGame() {}; function singleplayerGame() {};
</script> </script>
<LobbyModal <LobbyModal
open="{modal.joinLobby}" open="{modal.joinLobby}"
joining="{joiningLobby}" joining="{joiningLobby}"
on:joined={joinedLobby}
on:close="{_ => modal.joinLobby = false}" on:close="{_ => modal.joinLobby = false}"
/> />