mcg/mlpcardgame
2
0
Fork 0
Code Issues 23 Pull requests 1 Releases Wiki Activity

Refactor room inside lobby
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse source
This commit is contained in:
Hamcha 2019-09-23 17:22:06 +02:00
parent 3d384384bb
commit 3ea031caa3
Signed by: hamcha
GPG key ID: 44AD3571EB09A39E
6 changed files with 44 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
public/index.html
View file

@ -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>
<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>

5
src/router.ts
View file

@ -45,11 +45,6 @@ export default new Router({
topnav: "Lobby"
}
},
{
path: "/room",
name: "room",
component: RoomView
},
{
path: "/settings",
name: "settings",

10
src/store/network/getters.ts
View file

@ -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;
}
};

18
src/store/network/mutations.ts
View file

@ -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) {

10
src/views/Lobby.vue
View file

@ -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:

14
src/views/Room.vue
View file

@ -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>