Add base functionality to the view switching

This commit is contained in:
Oliver-Akins 2020-09-27 16:13:35 -06:00
parent 3168adb3a5
commit 0c16448d43

View file

@ -1,46 +1,65 @@
<template>
<div id="app">
<WS-Entry
v-if="state == 'ws-url'"
@set-ws-url="websocket_url = $event"
<WS-Test
v-if="state == 'ws-test'"
/>
<Join-Or-Host
v-else-if="state == 'game-type'"
@is-host="is_host = $event"
@go-to="state = $event"
/>
<Game-Code
v-else-if="state == 'game-code'"
@set-game-code="game_code = $event"
@go-to="state = $event"
/>
<div
v-else-if="state == 'lobby'"
@go-to="state = $event"
>
IT'S A LOBBY
</div>
</div>
</template>
<script>
import JoinHost from './components/JoinHost';
import GameCodeEntry from './components/GameCode';
import WebsocketEntry from './components/WebsocketURL';
import WebsocketTests from './components/WebsocketTesting';
export default {
name: 'App',
components: {
'WS-Entry': WebsocketEntry,
'WS-Test': WebsocketTests,
'Game-Code': GameCodeEntry,
'Join-Or-Host': JoinHost,
},
data() {return {
state: `ws-url`,
websocket_url: ``,
/*
The different states are used to indicate what part of the game players
should be seeing.
Valid values:
ws-test - Purely development driven, allows testing the socket
events on the server
game-type - The first screen that the user will see, this is when
the user will choose to join an existing game or create a new
one
game-code - This is displayed when users are joining a game, it
allows entering a username and game code, if the game code
is supplied in the URL Search Parameters, default to that,
otherwise leave the field empty.
lobby - When the player is in the lobby, this displays all the
players in the game so far, and updates as new players join.
If the player is the host, they can re-arrange the presidential
order by dragging and dropping the list of players, they also
get a "Start Game" button that allows them to, well... start
the game.
*/
state: `ws-test`,
game_code: ``,
is_host: false,
}},
methods: {
set_ws(ws_uri) {
this.websocket_url = ws_uri;
this.state = `game-code`;
},
set_gamecode(gamecode) {
this.game_code = gamecode;
this.state = `game`;
},
},
methods: {},
}
</script>