Compare commits
No commits in common. "91701b594f705ed6518eebc1976ff59278daa543" and "01ff7422078eb91f770c1fe7205db3e6bc6a1f0d" have entirely different histories.
91701b594f
...
01ff742207
2 changed files with 96 additions and 119 deletions
|
|
@ -2,63 +2,71 @@
|
|||
<section class="lobby">
|
||||
<TopNav />
|
||||
<section class="body">
|
||||
<section id="info">
|
||||
<b-field label="Your name">
|
||||
<b-input v-model="playerName"></b-input>
|
||||
</b-field>
|
||||
</section>
|
||||
<section id="join">
|
||||
<header>
|
||||
<h1>Join someone's session</h1>
|
||||
</header>
|
||||
<b-field label="Session ID" class="only-full">
|
||||
<b-input v-model="joinSessionID"></b-input>
|
||||
</b-field>
|
||||
<div class="center submit only-full">
|
||||
<b-button
|
||||
type="is-primary"
|
||||
@click="join"
|
||||
class="wide"
|
||||
:disabled="!canJoin"
|
||||
>
|
||||
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">
|
||||
<section class="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 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>
|
||||
</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">
|
||||
<b-button type="is-primary" class="wide" :disabled="!canHost">
|
||||
Create
|
||||
</b-button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="join">
|
||||
<header>
|
||||
<h1>Join someone's session</h1>
|
||||
</header>
|
||||
<b-field label="Session ID">
|
||||
<b-input v-model="joinSessionID"></b-input>
|
||||
</b-field>
|
||||
<div class="center submit">
|
||||
<b-button type="is-primary" class="wide" :disabled="!canJoin">
|
||||
Join
|
||||
</b-button>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -77,33 +85,16 @@
|
|||
|
||||
.body {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
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 {
|
||||
margin: 10px;
|
||||
border: 1px solid rgba($white, 20%);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
header {
|
||||
font-family: $fantasy;
|
||||
h1 {
|
||||
|
|
@ -120,11 +111,6 @@
|
|||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
|
@ -137,26 +123,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 14pt;
|
||||
}
|
||||
}
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -164,8 +139,7 @@
|
|||
<script lang="ts">
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import TopNav from "@/components/Navigation/TopNav.vue";
|
||||
import { StartServerOptions } from "@/store/network/types";
|
||||
import { Action } from "vuex-class";
|
||||
import { allSets, setNames } from "../mlpccg";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
|
|
@ -173,42 +147,52 @@ import { Action } from "vuex-class";
|
|||
}
|
||||
})
|
||||
export default class Lobby extends Vue {
|
||||
private playerName!: string;
|
||||
private hostMaxPlayers!: number;
|
||||
private hostPassword!: string;
|
||||
private hostType!: string;
|
||||
private hostDraftType!: string;
|
||||
private hostDraftSet!: string;
|
||||
private hostDraftCubeURL!: 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:
|
||||
"Guest-" +
|
||||
Math.random()
|
||||
.toString()
|
||||
.slice(2, 8),
|
||||
hostMaxPlayers: 8,
|
||||
hostPassword: "",
|
||||
joinSessionID: ""
|
||||
hostType: "game",
|
||||
hostDraftType: "set",
|
||||
hostDraftSet: "FF",
|
||||
hostDraftCubeURL: "",
|
||||
joinSessionID: "",
|
||||
sets: allSets,
|
||||
setNames: setNames
|
||||
};
|
||||
}
|
||||
|
||||
private async create() {
|
||||
this.startServer({
|
||||
playerInfo: {
|
||||
name: this.playerName
|
||||
},
|
||||
roomInfo: {
|
||||
max_players: 8,
|
||||
password: ""
|
||||
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 async join() {}
|
||||
|
||||
private get canJoin(): boolean {
|
||||
return this.joinSessionID != "";
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
module.exports = {
|
||||
configureWebpack: {
|
||||
devServer: {
|
||||
disableHostCheck: true,
|
||||
host: "0.0.0.0"
|
||||
}
|
||||
},
|
||||
|
||||
publicPath: process.env.SUBPATH ? process.env.SUBPATH : "",
|
||||
|
||||
pluginOptions: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue