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>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<WS-Entry
|
<WS-Test
|
||||||
v-if="state == 'ws-url'"
|
v-if="state == 'ws-test'"
|
||||||
@set-ws-url="websocket_url = $event"
|
|
||||||
/>
|
/>
|
||||||
<Join-Or-Host
|
<Join-Or-Host
|
||||||
v-else-if="state == 'game-type'"
|
v-else-if="state == 'game-type'"
|
||||||
|
@is-host="is_host = $event"
|
||||||
|
@go-to="state = $event"
|
||||||
/>
|
/>
|
||||||
<Game-Code
|
<Game-Code
|
||||||
v-else-if="state == '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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import JoinHost from './components/JoinHost';
|
import JoinHost from './components/JoinHost';
|
||||||
import GameCodeEntry from './components/GameCode';
|
import GameCodeEntry from './components/GameCode';
|
||||||
import WebsocketEntry from './components/WebsocketURL';
|
import WebsocketTests from './components/WebsocketTesting';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: {
|
components: {
|
||||||
'WS-Entry': WebsocketEntry,
|
'WS-Test': WebsocketTests,
|
||||||
'Game-Code': GameCodeEntry,
|
'Game-Code': GameCodeEntry,
|
||||||
'Join-Or-Host': JoinHost,
|
'Join-Or-Host': JoinHost,
|
||||||
},
|
},
|
||||||
data() {return {
|
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: ``,
|
game_code: ``,
|
||||||
|
is_host: false,
|
||||||
}},
|
}},
|
||||||
methods: {
|
methods: {},
|
||||||
set_ws(ws_uri) {
|
|
||||||
this.websocket_url = ws_uri;
|
|
||||||
this.state = `game-code`;
|
|
||||||
},
|
|
||||||
set_gamecode(gamecode) {
|
|
||||||
this.game_code = gamecode;
|
|
||||||
this.state = `game`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue