Compare commits

...

3 commits

Author SHA1 Message Date
91701b594f
Disable host check for ngrok support
All checks were successful
continuous-integration/drone/push Build is passing
2019-09-23 16:19:09 +02:00
e67f49fb06
Better mobile support 2019-09-23 16:18:55 +02:00
4306045991
Add player name 2019-09-23 15:10:26 +02:00
2 changed files with 117 additions and 94 deletions

View file

@ -2,70 +2,62 @@
<section class="lobby"> <section class="lobby">
<TopNav /> <TopNav />
<section class="body"> <section class="body">
<section class="host"> <section id="info">
<header> <b-field label="Your name">
<h1>Host a new session</h1> <b-input v-model="playerName"></b-input>
</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> </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>
</b-field>
</div>
<div class="center">
<b-button type="is-primary" class="wide" :disabled="!canHost">
Create
</b-button>
</div>
</section> </section>
<section class="join"> <section id="join">
<header> <header>
<h1>Join someone's session</h1> <h1>Join someone's session</h1>
</header> </header>
<b-field label="Session ID"> <b-field label="Session ID" class="only-full">
<b-input v-model="joinSessionID"></b-input> <b-input v-model="joinSessionID"></b-input>
</b-field> </b-field>
<div class="center submit"> <div class="center submit only-full">
<b-button type="is-primary" class="wide" :disabled="!canJoin"> <b-button
type="is-primary"
@click="join"
class="wide"
:disabled="!canJoin"
>
Join Join
</b-button> </b-button>
</div> </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>
<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">
Create
</b-button>
</div>
</section> </section>
</section> </section>
</section> </section>
@ -85,16 +77,33 @@
.body { .body {
flex: 1; flex: 1;
display: flex; display: grid;
padding: 10px; padding: 10px;
padding-top: 0; padding-top: 0;
grid-template: 150px 1fr / 1fr 1fr;
#info {
grid-row: 1;
grid-column: 1 / end;
}
#join,
#host {
grid-row: 2;
}
#join {
grid-column: 2;
}
#host {
grid-column: 1;
}
section { section {
margin: 10px; margin: 10px;
border: 1px solid rgba($white, 20%); border: 1px solid rgba($white, 20%);
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
flex: 1;
header { header {
font-family: $fantasy; font-family: $fantasy;
h1 { h1 {
@ -111,6 +120,11 @@
margin: 10px auto; margin: 10px auto;
} }
.full {
width: 100%;
margin: 10px;
}
.center { .center {
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -123,15 +137,26 @@
} }
} }
.only-mobile {
display: none;
}
@media (max-width: 500px) { @media (max-width: 500px) {
.only-full {
display: none;
}
.only-mobile {
display: inherit;
}
.body { .body {
display: flex;
flex-direction: column;
section { section {
padding: 10px; padding: 10px;
header h1 { header h1 {
font-size: 14pt; font-size: 14pt;
} }
} }
flex-flow: column-reverse;
} }
} }
</style> </style>
@ -139,7 +164,8 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import TopNav from "@/components/Navigation/TopNav.vue"; import TopNav from "@/components/Navigation/TopNav.vue";
import { allSets, setNames } from "../mlpccg"; import { StartServerOptions } from "@/store/network/types";
import { Action } from "vuex-class";
@Component({ @Component({
components: { components: {
@ -147,53 +173,43 @@ import { allSets, setNames } from "../mlpccg";
} }
}) })
export default class Lobby extends Vue { export default class Lobby extends Vue {
private hostType!: string; private playerName!: string;
private hostDraftType!: string; private hostMaxPlayers!: number;
private hostDraftSet!: string; private hostPassword!: string;
private hostDraftCubeURL!: string;
private joinSessionID!: string; private joinSessionID!: string;
private sets!: string[]; private sets!: string[];
private setNames!: Record<string, string>; private setNames!: Record<string, string>;
@Action("startServer", { namespace: "network" })
private startServer!: (options: StartServerOptions) => void;
private data() { private data() {
return { return {
hostType: "game", playerName:
hostDraftType: "set", "Guest-" +
hostDraftSet: "FF", Math.random()
hostDraftCubeURL: "", .toString()
joinSessionID: "", .slice(2, 8),
sets: allSets, hostMaxPlayers: 8,
setNames: setNames hostPassword: "",
joinSessionID: ""
}; };
} }
private get canHost(): boolean { private async create() {
switch (this.hostType) { this.startServer({
case "game": playerInfo: {
return true; name: this.playerName
case "draft": },
switch (this.hostDraftType) { roomInfo: {
case "set": max_players: 8,
if (!this.sets.includes(this.hostDraftSet)) { password: ""
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 async join() {}
private get canJoin(): boolean { private get canJoin(): boolean {
return this.joinSessionID != ""; return this.joinSessionID != "";
} }

View file

@ -1,4 +1,11 @@
module.exports = { module.exports = {
configureWebpack: {
devServer: {
disableHostCheck: true,
host: "0.0.0.0"
}
},
publicPath: process.env.SUBPATH ? process.env.SUBPATH : "", publicPath: process.env.SUBPATH ? process.env.SUBPATH : "",
pluginOptions: { pluginOptions: {