|
|
@@ -1,43 +1,58 @@
|
|
|
<template>
|
|
|
- <div class="row">
|
|
|
- <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
|
|
|
- <div class="form-group">
|
|
|
+ <b-container class="backgroundPadding">
|
|
|
+ <b-row class="justify-content-center">
|
|
|
+ <b-col cols="auto">
|
|
|
<input
|
|
|
type="text"
|
|
|
placeholder="Username"
|
|
|
autocomplete="off"
|
|
|
- class="form-control"
|
|
|
+ class="inputUsername"
|
|
|
v-model="username"
|
|
|
:disabled="lockUsername"
|
|
|
@keydown.enter="connect()"
|
|
|
/>
|
|
|
+ </b-col>
|
|
|
+ </b-row>
|
|
|
+ <b-row class="justify-content-center">
|
|
|
+ <b-col cols="auto">
|
|
|
<button
|
|
|
- class="btn btn-primary form-control"
|
|
|
+ class="loginButtons hvr-pulse"
|
|
|
@click.prevent="connect"
|
|
|
:disabled="connectButton.disabled"
|
|
|
>
|
|
|
{{ connectButton.text }}
|
|
|
</button>
|
|
|
- <p>
|
|
|
- {{ connectionStatus }}
|
|
|
- </p>
|
|
|
+ </b-col>
|
|
|
+ </b-row>
|
|
|
+ <b-row class="justify-content-center">
|
|
|
+ <b-col md="3" lg="3" sm="3" xl="3">
|
|
|
+ <b-img class="swordsImg" :src="require('../../assets/epees.png')">
|
|
|
+ </b-img>
|
|
|
+ </b-col>
|
|
|
+ </b-row>
|
|
|
+ <b-row class="justify-content-center">
|
|
|
+ <b-col cols="auto">
|
|
|
<button
|
|
|
- class="btn btn-primary form-control"
|
|
|
+ class="loginButtons onlineButton hvr-pulse"
|
|
|
:disabled="onlineButtonDisable || isOneGameRunning"
|
|
|
@click.prevent="$emit('enter-online', username)"
|
|
|
>
|
|
|
Online Game
|
|
|
</button>
|
|
|
+ </b-col>
|
|
|
+ </b-row>
|
|
|
+ <b-row class="justify-content-center">
|
|
|
+ <b-col cols="auto">
|
|
|
<button
|
|
|
- class="btn btn-primary form-control"
|
|
|
+ class="loginButtons hvr-pulse"
|
|
|
@click.prevent="test"
|
|
|
:disabled="isOneGameRunning"
|
|
|
>
|
|
|
Local Game
|
|
|
</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </b-col>
|
|
|
+ </b-row>
|
|
|
+ </b-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -112,4 +127,145 @@ export default {
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
// @import '../style/style.scss';
|
|
|
+@font-face {
|
|
|
+ font-family: 'MedievalSharp';
|
|
|
+ src: url('../../assets/fonts/MedievalSharp.ttf') format('truetype');
|
|
|
+}
|
|
|
+@media (min-width: 1280px) {
|
|
|
+ .backgroundPadding {
|
|
|
+ padding-top: 7%;
|
|
|
+ padding-bottom: 7%;
|
|
|
+ }
|
|
|
+ .inputUsername {
|
|
|
+ padding: 10%;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ .loginButtons {
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media (min-width: 1001px) and (max-width: 1279px) {
|
|
|
+ .backgroundPadding {
|
|
|
+ padding-top: 8%;
|
|
|
+ padding-bottom: 8%;
|
|
|
+ }
|
|
|
+ .inputUsername {
|
|
|
+ padding: 10%;
|
|
|
+ font-size: 23px;
|
|
|
+ }
|
|
|
+ .loginButtons {
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 800px) and (max-width: 1000px) {
|
|
|
+ .backgroundPadding {
|
|
|
+ padding-top: 10%;
|
|
|
+ padding-bottom: 10%;
|
|
|
+ }
|
|
|
+ .inputUsername {
|
|
|
+ padding: 10%;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ .loginButtons {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media (max-width: 799px) {
|
|
|
+ .backgroundPadding {
|
|
|
+ padding-top: 6%;
|
|
|
+ padding-bottom: 6%;
|
|
|
+ }
|
|
|
+ .inputUsername {
|
|
|
+ padding: 10%;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ .loginButtons {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.inputUsername {
|
|
|
+ background-image: url('../../assets/username field.png');
|
|
|
+ /* Full height */
|
|
|
+ max-width: 100%;
|
|
|
+ /* Center and scale the image nicely */
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ background-color: transparent;
|
|
|
+ font-family: MedievalSharp, cursive;
|
|
|
+ border: none;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.loginButtons {
|
|
|
+ font-family: MedievalSharp, cursive;
|
|
|
+ color: #a41515;
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ font-weight: 900;
|
|
|
+}
|
|
|
+.loginButtons:focus {
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+.onlineButton:disabled {
|
|
|
+ color: #a4151548;
|
|
|
+}
|
|
|
+.swordsImg {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+}
|
|
|
+.inputUsername::-webkit-input-placeholder {
|
|
|
+ text-align: center;
|
|
|
+ color: #a4151548;
|
|
|
+}
|
|
|
+.inputUsername:-moz-placeholder {
|
|
|
+ text-align: center;
|
|
|
+ color: #a4151548;
|
|
|
+}
|
|
|
+.inputUsername::-moz-placeholder {
|
|
|
+ text-align: center;
|
|
|
+ color: #a4151548;
|
|
|
+}
|
|
|
+.inputUsername:-ms-input-placeholder {
|
|
|
+ text-align: center;
|
|
|
+ color: #a4151548;
|
|
|
+}
|
|
|
+/* Pulse */
|
|
|
+@-webkit-keyframes hvr-pulse {
|
|
|
+ 25% {
|
|
|
+ -webkit-transform: scale(1.1);
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+ 75% {
|
|
|
+ -webkit-transform: scale(0.9);
|
|
|
+ transform: scale(0.9);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes hvr-pulse {
|
|
|
+ 25% {
|
|
|
+ -webkit-transform: scale(1.1);
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+ 75% {
|
|
|
+ -webkit-transform: scale(0.9);
|
|
|
+ transform: scale(0.9);
|
|
|
+ }
|
|
|
+}
|
|
|
+.hvr-pulse {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ -webkit-transform: perspective(1px) translateZ(0);
|
|
|
+ transform: perspective(1px) translateZ(0);
|
|
|
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
|
|
+}
|
|
|
+.hvr-pulse:hover:enabled {
|
|
|
+ -webkit-animation-name: hvr-pulse;
|
|
|
+ animation-name: hvr-pulse;
|
|
|
+ -webkit-animation-duration: 1s;
|
|
|
+ animation-duration: 1s;
|
|
|
+ -webkit-animation-timing-function: linear;
|
|
|
+ animation-timing-function: linear;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ animation-iteration-count: infinite;
|
|
|
+}
|
|
|
</style>
|
Martin
