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

Add Lobby #43

Merged
hamcha merged 18 commits from feature/lobby into master 2019-10-16 08:31:04 +00:00
Conversation 1 Commits 18 Files changed 13 +64 -96
1 changed files with 64 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit e67f49fb06 - Show all commits

160
src/views/Lobby.vue
View file

@ -11,10 +11,10 @@
<header>
<h1>Join someone's session</h1>
</header>
<b-field label="Session ID">
<b-field label="Session ID" class="only-full">
<b-input v-model="joinSessionID"></b-input>
</b-field>
<div class="center submit">
<div class="center submit only-full">
<b-button
type="is-primary"
@click="join"
@ -24,60 +24,37 @@
Join
</b-button>
</div>
<b-field class="only-mobile full">
<b-input placeholder="Session ID" v-model="joinSessionID"></b-input>
<p class="control">
<b-button type="is-primary" @click="join" :disabled="!canJoin">
Join
</b-button>
</p>
</b-field>
</section>
<section id="host">
<header>
<h1>Host a new session</h1>
</header>
<b-field label="Session type" />
<b-field>
<b-radio-button
class="full-btn"
v-model="hostType"
native-value="game"
>
<span>Game</span>
</b-radio-button>
<b-radio-button
class="full-btn"
v-model="hostType"
native-value="draft"
>
<span>Draft</span>
</b-radio-button>
</b-field>
<div v-if="hostType == 'game'">
<!--TODO-->
</div>
<div v-if="hostType == 'draft'">
<b-field label="Draft type">
<b-select v-model="hostDraftType" placeholder="Select type">
<option value="set">Set draft</option>
<option value="cube">Cube (random) draft</option>
<option value="i8pcube">Cube (seeded) draft</option>
</b-select>
</b-field>
<b-field label="Set" v-if="hostDraftType == 'set'">
<b-select v-model="hostDraftSet" placeholder="Select set">
<option v-for="set in sets" :key="set" :value="set">
{{ setNames[set] }}
</option>
</b-select>
</b-field>
<b-field
label="Cube URL"
v-if="hostDraftType == 'cube' || hostDraftType == 'i8pcube'"
>
<b-input v-model="hostDraftCubeURL"></b-input>
<div class="columns">
<div class="column">
<b-field label="Max players">
<b-numberinput
controls-position="compact"
v-model="hostMaxPlayers"
></b-numberinput>
</b-field>
</div>
<div class="column">
<b-field label="Password">
<b-input v-model="hostPassword"></b-input>
</b-field>
</div>
</div>
<div class="center">
<b-button
type="is-primary"
@click="create"
class="wide"
:disabled="!canHost"
>
<b-button type="is-primary" @click="create" class="wide">
Create
</b-button>
</div>
@ -143,6 +120,11 @@
margin: 10px auto;
}
.full {
width: 100%;
margin: 10px;
}
.center {
width: 100%;
text-align: center;
@ -155,15 +137,20 @@
}
}
@media (max-width: 500px) {
.body {
grid-template: 120px 1fr 1fr /1fr;
#info,
#join,
#host {
grid-row: auto;
grid-column: auto;
.only-mobile {
display: none;
}
@media (max-width: 500px) {
.only-full {
display: none;
}
.only-mobile {
display: inherit;
}
.body {
display: flex;
flex-direction: column;
section {
padding: 10px;
header h1 {
@ -177,7 +164,8 @@
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TopNav from "@/components/Navigation/TopNav.vue";
import { allSets, setNames } from "../mlpccg";
import { StartServerOptions } from "@/store/network/types";
import { Action } from "vuex-class";
@Component({
components: {
@ -186,14 +174,15 @@ import { allSets, setNames } from "../mlpccg";
})
export default class Lobby extends Vue {
private playerName!: string;
private hostType!: string;
private hostDraftType!: string;
private hostDraftSet!: string;
private hostDraftCubeURL!: string;
private hostMaxPlayers!: number;
private hostPassword!: string;
private joinSessionID!: string;
private sets!: string[];
private setNames!: Record<string, string>;
@Action("startServer", { namespace: "network" })
private startServer!: (options: StartServerOptions) => void;
private data() {
return {
playerName:
@ -201,47 +190,26 @@ export default class Lobby extends Vue {
Math.random()
.toString()
.slice(2, 8),
hostType: "game",
hostDraftType: "set",
hostDraftSet: "FF",
hostDraftCubeURL: "",
joinSessionID: "",
sets: allSets,
setNames: setNames
hostMaxPlayers: 8,
hostPassword: "",
joinSessionID: ""
};
}
private async create() {}
private async create() {
this.startServer({
playerInfo: {
name: this.playerName
},
roomInfo: {
max_players: 8,
password: ""
}
});
}
private async join() {}
private get canHost(): boolean {
switch (this.hostType) {
case "game":
return true;
case "draft":
switch (this.hostDraftType) {
case "set":
if (!this.sets.includes(this.hostDraftSet)) {
return false;
}
return true;
case "block":
//TODO
return false;
case "cube":
case "i8pcube":
if (this.hostDraftCubeURL == "") {
return false;
}
return true;
}
return false;
default:
return false;
}
}
private get canJoin(): boolean {
return this.joinSessionID != "";
}