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

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

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