Add base functionality to the view switching
This commit is contained in:
parent
3168adb3a5
commit
0c16448d43
1 changed files with 37 additions and 18 deletions
55
src/App.vue
55
src/App.vue
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue