87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
<template>
|
|
<div id="joinroom">
|
|
<label class="name-label" for>Name:</label>
|
|
<input
|
|
required
|
|
id="name"
|
|
v-model="name"
|
|
type="text"
|
|
placeholder="Enter a username"
|
|
maxlength="25"
|
|
minlength="1"
|
|
/>
|
|
<label class="code-label" for="code">Room Code:</label>
|
|
<input id="code" type="text" v-model="code" placeholder="Optional room code" minlength="4" />
|
|
|
|
<button @click="checkRoom" id="join">Join!</button>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
import { axios_api } from "../util/api";
|
|
import {Room} from "../models/Room";
|
|
|
|
@Component({
|
|
name: "JoinRoom",
|
|
})
|
|
export default class JoinRoom extends Vue {
|
|
private code: string = "";
|
|
private name: string = "";
|
|
|
|
private checkRoom() {
|
|
if (this.name.length < 1 || this.name.length > 25) {
|
|
return;
|
|
}
|
|
if (this.code.length >= 4) {
|
|
this.code = this.code.trim();
|
|
axios_api
|
|
.get(`/room/${this.code}`)
|
|
.then((data) => {
|
|
this.$router.push(`/game/${this.code}?name=${this.name}`);
|
|
})
|
|
.catch((response) => {
|
|
console.log("Error?" + response);
|
|
alert("Sadly, this room does not exist...");
|
|
});
|
|
} else if (this.code.length === 0) {
|
|
axios_api.post("/room").then((data) => {
|
|
const room: Room = data.data;
|
|
this.$router.push(`/game/${room.code}?name=${this.name}`);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
#joinroom {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 2fr;
|
|
grid-row-gap: 15px;
|
|
}
|
|
|
|
.code-label {
|
|
grid-row: 2;
|
|
grid-column: 2;
|
|
min-width: 100px;
|
|
}
|
|
#code {
|
|
grid-row: 2;
|
|
grid-column: 3;
|
|
}
|
|
.name-label {
|
|
grid-row: 1;
|
|
grid-column: 2;
|
|
}
|
|
#name {
|
|
grid-row: 1;
|
|
grid-column: 3;
|
|
}
|
|
|
|
#join {
|
|
grid-row-start: 3;
|
|
grid-row-end: 5;
|
|
grid-column-start: 2;
|
|
grid-column-end: 4;
|
|
}
|
|
</style>
|