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">
|
<section class="lobby">
|
||||||
<TopNav />
|
<TopNav />
|
||||||
<section class="body">
|
<section class="body">
|
||||||
<section id="info">
|
<section class="host">
|
||||||
<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">
|
|
||||||
<header>
|
<header>
|
||||||
<h1>Host a new session</h1>
|
<h1>Host a new session</h1>
|
||||||
</header>
|
</header>
|
||||||
<div class="columns">
|
<b-field label="Session type" />
|
||||||
<div class="column">
|
<b-field>
|
||||||
<b-field label="Max players">
|
<b-radio-button
|
||||||
<b-numberinput
|
class="full-btn"
|
||||||
controls-position="compact"
|
v-model="hostType"
|
||||||
v-model="hostMaxPlayers"
|
native-value="game"
|
||||||
></b-numberinput>
|
>
|
||||||
</b-field>
|
<span>Game</span>
|
||||||
</div>
|
</b-radio-button>
|
||||||
<div class="column">
|
<b-radio-button
|
||||||
<b-field label="Password">
|
class="full-btn"
|
||||||
<b-input v-model="hostPassword"></b-input>
|
v-model="hostType"
|
||||||
</b-field>
|
native-value="draft"
|
||||||
</div>
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<b-button type="is-primary" @click="create" class="wide">
|
<b-button type="is-primary" class="wide" :disabled="!canHost">
|
||||||
Create
|
Create
|
||||||
</b-button>
|
</b-button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -77,33 +85,16 @@
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: grid;
|
display: flex;
|
||||||
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 {
|
||||||
|
|
@ -120,11 +111,6 @@
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.full {
|
|
||||||
width: 100%;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -137,26 +123,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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>
|
||||||
|
|
@ -164,8 +139,7 @@
|
||||||
<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 { StartServerOptions } from "@/store/network/types";
|
import { allSets, setNames } from "../mlpccg";
|
||||||
import { Action } from "vuex-class";
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -173,43 +147,53 @@ import { Action } from "vuex-class";
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export default class Lobby extends Vue {
|
export default class Lobby extends Vue {
|
||||||
private playerName!: string;
|
private hostType!: string;
|
||||||
private hostMaxPlayers!: number;
|
private hostDraftType!: string;
|
||||||
private hostPassword!: string;
|
private hostDraftSet!: 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 {
|
||||||
playerName:
|
hostType: "game",
|
||||||
"Guest-" +
|
hostDraftType: "set",
|
||||||
Math.random()
|
hostDraftSet: "FF",
|
||||||
.toString()
|
hostDraftCubeURL: "",
|
||||||
.slice(2, 8),
|
joinSessionID: "",
|
||||||
hostMaxPlayers: 8,
|
sets: allSets,
|
||||||
hostPassword: "",
|
setNames: setNames
|
||||||
joinSessionID: ""
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
private async create() {
|
private get canHost(): boolean {
|
||||||
this.startServer({
|
switch (this.hostType) {
|
||||||
playerInfo: {
|
case "game":
|
||||||
name: this.playerName
|
return true;
|
||||||
},
|
case "draft":
|
||||||
roomInfo: {
|
switch (this.hostDraftType) {
|
||||||
max_players: 8,
|
case "set":
|
||||||
password: ""
|
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 {
|
private get canJoin(): boolean {
|
||||||
return this.joinSessionID != "";
|
return this.joinSessionID != "";
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,4 @@
|
||||||
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: {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue