Refactor room inside lobby
This commit is contained in:
parent
3d384384bb
commit
3ea031caa3
GPG Key ID:
44AD3571EB09A39E
|
|
@ -1,18 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
|
||||
<title>mcgvue</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but mcgvue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
|
||||
<title>MLPCARDGAME</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but mcgvue doesn't work properly without JavaScript enabled. Please enable it to
|
||||
continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -45,11 +45,6 @@ export default new Router({
|
|||
topnav: "Lobby"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/room",
|
||||
name: "room",
|
||||
component: RoomView
|
||||
},
|
||||
{
|
||||
path: "/settings",
|
||||
name: "settings",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,16 @@ const getters: GetterTree<NetworkState, AppState> = {
|
|||
|
||||
connectionType(state): "client" | "server" | "none" {
|
||||
return state.peerType;
|
||||
},
|
||||
|
||||
inRoom(state): boolean {
|
||||
if (state.peerType == "client") {
|
||||
return state.connectionStatus == "connected";
|
||||
}
|
||||
if (state.peerType == "server") {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,21 +4,15 @@ import { LocalClient, PeerServer, PeerClient } from "@/network";
|
|||
|
||||
const mutations: MutationTree<NetworkState> = {
|
||||
becomeServer(state, payload: { local: LocalClient; server: PeerServer }) {
|
||||
state = {
|
||||
...state,
|
||||
peerType: "server",
|
||||
local: payload.local,
|
||||
server: payload.server
|
||||
};
|
||||
state.peerType = "server";
|
||||
(state as ServerNetworkState).local = payload.local;
|
||||
(state as ServerNetworkState).server = payload.server;
|
||||
},
|
||||
|
||||
becomeClient(state, payload: { peer: PeerClient }) {
|
||||
state = {
|
||||
...state,
|
||||
connectionStatus: "connecting",
|
||||
peerType: "client",
|
||||
peer: payload.peer
|
||||
};
|
||||
state.peerType = "client";
|
||||
(state as ClientNetworkState).connectionStatus = "connecting";
|
||||
(state as ClientNetworkState).peer = payload.peer;
|
||||
},
|
||||
|
||||
connected(state) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<section class="lobby">
|
||||
<TopNav />
|
||||
<section class="body">
|
||||
<section v-if="!inRoom" class="body">
|
||||
<section id="info">
|
||||
<b-field label="Your name">
|
||||
<b-input :disabled="busy" v-model="playerName"></b-input>
|
||||
|
|
@ -78,6 +78,9 @@
|
|||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="room" v-else>
|
||||
<section class="info"></section>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -183,7 +186,7 @@
|
|||
import { Component, Vue } from "vue-property-decorator";
|
||||
import TopNav from "@/components/Navigation/TopNav.vue";
|
||||
import { StartServerOptions, ConnectOptions } from "@/store/network/types";
|
||||
import { Action } from "vuex-class";
|
||||
import { Action, Getter } from "vuex-class";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
|
|
@ -203,6 +206,9 @@ export default class Lobby extends Vue {
|
|||
@Action("connect", { namespace: "network" })
|
||||
private connect!: (options: ConnectOptions) => void;
|
||||
|
||||
@Getter("inRoom", { namespace: "network" })
|
||||
private inRoom!: boolean;
|
||||
|
||||
private data() {
|
||||
return {
|
||||
playerName:
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
<template>
|
||||
<section class="room"></section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component({
|
||||
components: {}
|
||||
})
|
||||
export default class RoomView extends Vue {}
|
||||
</script>
|
||||
Loading…
Reference in New Issue