nouvelle page d'accueil

server/package-lock.json

@@ -1179,6 +1179,11 @@
         "parse-passwd": "^1.0.0"
       }
     },
+    "hover.css": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/hover.css/-/hover.css-2.3.2.tgz",
+      "integrity": "sha1-8HGT2cdAnU45UTTTsiFbmetV4NM="
+    },
     "indexof": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",

server/package.json

@@ -13,6 +13,7 @@
   "author": "JOJO",
   "license": "MIT",
   "dependencies": {
+    "hover.css": "^2.3.2",
     "mariadb": "^2.3.1",
     "socket.io": "^2.3.0"
   },

src/App.vue

@@ -1,44 +1,13 @@
 <template>
-  <div id="app">
-    <div class="container-fluid">
-      <div class="row">
-        <div
-          class="col-2"
-          v-if="!hideTest"
-          style="background-color:lightgreen;"
-        >
-          <span class="title-medieval">For tests</span>
-          <br />
-          <button
-            class="btn btn-primary custom-button"
-            @click="display = 'app-menu'"
-          >
-            Enter Menu
-          </button>
-          <br />
-          <br />
-          <button
-            class="btn btn-primary custom-button"
-            @click="display = 'app-game'"
-          >
-            Enter Game
-          </button>
-        </div>
-        <div class="col">
-          <button style="font-size:8px" @click="hideTest = !hideTest">
-            Test
-          </button>
-          <keep-alive>
-            <component
-              :is="display"
-              @join-game-id="launchOnlineGame($event)"
-              :username="username"
-              :game-id="onlineGameId"
-            ></component>
-          </keep-alive>
-        </div>
-      </div>
-    </div>
+  <div id="app" class="appBackground">
+    <keep-alive>
+      <component
+        :is="display"
+        @join-game-id="launchOnlineGame($event)"
+        :username="username"
+        :game-id="onlineGameId"
+      ></component>
+    </keep-alive>
   </div>
 </template>
 
@@ -80,20 +49,15 @@ export default {
 
 <style scoped lang="scss">
 @import './styles/fonts/fonts.scss';
-
-.title-medieval {
-  font-family: MedievalSharp, cursive;
-  font-size: 30px;
-  font-weight: bold;
-  text-transform: capitalize;
-}
-.custom-button {
-  font-family: MedievalSharp, cursive;
-  font-size: 20px;
-  background-color: transparent;
-  color: red;
-  border: none;
-  font-weight: bold;
-  text-transform: capitalize;
+.appBackground {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background: url(./assets/Background.png) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  overflow: hidden;
 }
 </style>

src/menu/AppMenu.vue

@@ -1,26 +1,34 @@
 <template>
-  <div>
-    <div class="row">
-      <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
-        <h2>Menu</h2>
-      </div>
-    </div>
-    <keep-alive include="menu-login">
-      <component
-        :is="menuPage"
-        @enter-online="enterOnline"
-        @enter-game-creation="enterGameCreation"
-        @enter-local="enterLocal"
-        @back="menuPage = previousPage.pop()"
-        @home="
-          menuPage = 'menu-login';
-          previousPage = [];
-        "
-        :username="username"
-        v-on="$listeners"
-      ></component>
-    </keep-alive>
-  </div>
+  <b-container>
+    <b-row class="justify-content-center mb-4 pt-3">
+      <b-col lg="8" md="7" sm="8" xl="8">
+        <a href="#">
+          <b-img class="titleImg" :src="require('../assets/Title.png')"></b-img>
+        </a>
+      </b-col>
+    </b-row>
+    <b-row class="justify-content-center mt-3 mb-5">
+      <b-col lg="8" md="7" sm="8" xl="8">
+        <div class="backgroundMenu">
+          <keep-alive include="menu-login">
+            <component
+              :is="menuPage"
+              @enter-online="enterOnline"
+              @enter-game-creation="enterGameCreation"
+              @enter-local="enterLocal"
+              @back="menuPage = previousPage.pop()"
+              @home="
+                menuPage = 'menu-login';
+                previousPage = [];
+              "
+              :username="username"
+              v-on="$listeners"
+            ></component>
+          </keep-alive>
+        </div>
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
@@ -58,4 +66,18 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.titleImg {
+  max-width: 100%;
+}
+.backgroundMenu {
+  /* The image used */
+  background-image: url('../assets/parchemin.png');
+  /* Full height */
+  height: 100%;
+  /* Center and scale the image nicely */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+</style>

src/menu/login/MenuLogin.vue

@@ -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="$emit('enter-local')"
           :disabled="isOneGameRunning"
         >
           Local Game
         </button>
-      </div>
-    </div>
-  </div>
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
@@ -109,4 +124,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>

src/menu/online-room/MenuOnlineRoom.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="row">
-    <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
-      <div id="online-games">
-        Existing Games
-        <hr />
-        <div style="border:1px solid black; height:300px">
+  <b-container class="gamesListContainer">
+    <b-row>
+      <b-col cols="auto">
+        <h1>
+          Existing Games
+        </h1>
+        <div id="online-games">
           <div v-if="loading">
             <h3>{{ loadingMessage }}</h3>
           </div>
@@ -17,25 +18,29 @@
             ></game-item>
           </div>
         </div>
-      </div>
 
-      <div id="online-room-buttons">
-        <div>
-          <button class="btn btn-primary" @click="$emit('enter-game-creation')">
-            Create new game
-          </button>
-          <button
-            class="btn btn-primary"
-            :disabled="resumeDisabled"
-            @click="joinGame()"
-          >
-            Join / Resume game
-          </button>
-          <button class="btn btn-primary" @click="$emit('back')">Back</button>
+        <div id="online-room-buttons">
+          <div>
+            <button class="btn" @click="$emit('enter-game-creation')">
+              New game
+              <br />
+              <b-icon icon="plus-circle"></b-icon>
+            </button>
+            <button class="btn" :disabled="resumeDisabled" @click="joinGame()">
+              Join
+              <br />
+              <b-icon icon="controller"></b-icon>
+            </button>
+            <button class="btn btn_primary" @click="$emit('back')">
+              Return
+              <br />
+              <b-icon icon="arrow-counterclockwise"></b-icon>
+            </button>
+          </div>
         </div>
-      </div>
-    </div>
-  </div>
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
@@ -103,5 +108,11 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-// @import '../style/style.scss';
+.gamesListContainer {
+  margin-left: 15%;
+}
+.gamesListContainer {
+  font-family: MedievalSharp, cursive;
+  color: #a41515;
+}
 </style>