Merged in feature/TH-19-import-germania-one-font (pull request #4)

Feature/TH-19 import germania one font

.vscode/settings.json

@@ -8,7 +8,7 @@
         "./"
     ],
     "javascript.validate.enable": false,
-    "window.zoomLevel": -1,
+    "window.zoomLevel": 0,
     "[javascript]": {
         "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
     },

package-lock.json

@@ -12546,6 +12546,18 @@
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
       "dev": true
     },
+    "style-resources-loader": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/style-resources-loader/-/style-resources-loader-1.3.3.tgz",
+      "integrity": "sha512-vDD2HyG6On8H9gWUN9O9q1eXR/JnXpCkNvpusvgFsRQ9JZGF9drzvwKEigR9vqlmUbXO2t/vIIabpYMmis0eAQ==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.6",
+        "is-promise": "^2.1.0",
+        "loader-utils": "^1.2.3",
+        "schema-utils": "^2.6.1"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -13318,6 +13330,12 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-cli-plugin-style-resources-loader": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-style-resources-loader/-/vue-cli-plugin-style-resources-loader-0.1.4.tgz",
+      "integrity": "sha512-aK2TyVThZO6oVPZJpCckha8ALcg1RXKYLNqtuy1fNv+24x6zGWKpSK+FHAo47B7yeRlFS9DbKo+cvUFMqWaZ7Q==",
+      "dev": true
+    },
     "vue-clickaway": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/vue-clickaway/-/vue-clickaway-2.2.2.tgz",

package.json

@@ -3,14 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vue-cli-service serve --open",
     "build": "vue-cli-service build",
-    "build-dev": "vue-cli-service build --mode development",
-    "tu": "vue-cli-service test:unit --watch",
     "lint": "vue-cli-service lint",
-    "server-dev": "cd server && npm run server-dev",
     "appserver": "node app-server/app-server.js",
-    "server": "cd server && npm start"
+    "build-dev": "vue-cli-service build --mode development",
+    "dev": "vue-cli-service serve --open",
+    "server": "cd server && npm start",
+    "server-dev": "cd server && npm run server-dev",
+    "tu": "vue-cli-service test:unit --watch"
   },
   "dependencies": {
     "bootstrap": "^4.4.1",
@@ -39,6 +39,8 @@
     "node-sass": "^4.12.0",
     "prettier": "^1.19.1",
     "sass-loader": "^8.0.2",
+    "style-resources-loader": "^1.3.2",
+    "vue-cli-plugin-style-resources-loader": "^0.1.4",
     "vue-template-compiler": "^2.6.11"
   }
 }

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
+    <meta name="copyright" content="SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

src/App.vue

@@ -1,32 +1,43 @@
 <template>
   <div id="app">
-    <div class="container" style="position: absolute;">
-      <span>For tests :</span>
-      <button class="btn btn-primary" @click="display = 'app-menu'">
-        Menu
-      </button>
-      <button class="btn btn-primary" @click="display = 'app-game'">
-        Game
-      </button>
-    </div>
-    <div class="container fill" style="height: 100vh;">
-      <!-- <div class="bg"> -->
-      <keep-alive>
-        <transition
-          enter-active-class="animated bounceInUp"
-          leave-active-class="animated bounceOutDown"
-          mode="out-in"
-          appear
+    <div class="container-fluid">
+      <div class="row">
+        <div
+          class="col-2"
+          v-if="!hideTest"
+          style="background-color:lightgreen;"
         >
-          <component
-            :is="display"
-            @join-game-id="launchOnlineGame($event)"
-            :username="username"
-            :game-id="onlineGameId"
-          ></component>
-        </transition>
-      </keep-alive>
-      <!-- </div> -->
+          <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>
 </template>
@@ -41,7 +52,8 @@ export default {
     return {
       display: 'app-menu',
       username: '',
-      onlineGameId: -1
+      onlineGameId: -1,
+      hideTest: true
     };
   },
   components: {
@@ -66,24 +78,22 @@ export default {
 };
 </script>
 
-<style scoped>
-.bg {
-  height: 100%;
-  width: auto;
-  position: relative;
+<style scoped lang="scss">
+@import './styles/fonts/fonts.scss';
+
+.title-medieval {
+  font-family: MedievalSharp, cursive;
+  font-size: 30px;
+  font-weight: bold;
+  text-transform: capitalize;
 }
-.bg::after {
-  content: '';
-  background: url('./assets/twelveHeroes_cover.png');
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: contain;
-  opacity: 0.7;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  position: absolute;
-  z-index: -1;
+.custom-button {
+  font-family: MedievalSharp, cursive;
+  font-size: 20px;
+  background-color: transparent;
+  color: red;
+  border: none;
+  font-weight: bold;
+  text-transform: capitalize;
 }
 </style>

src/styles/fonts/fonts.scss

@@ -0,0 +1,9 @@
+
+@font-face {
+  font-family: 'MedievalSharp';
+  src: url('~@/assets/fonts/MedievalSharp.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'TexGyre';
+  src: url('~@/assets/fonts/TexGyre.otf') format('opentype');
+}

src/styles/global.scss

@@ -0,0 +1 @@
+@import "fonts/fonts.scss";

vue.config.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   devServer: {
     overlay: {
@@ -5,5 +7,13 @@ module.exports = {
       errors: true
     }
   },
-  runtimeCompiler: true
+
+  runtimeCompiler: true,
+
+  pluginOptions: {
+    'style-resources-loader': {
+      preProcessor: 'scss',
+      patterns: [path.resolve(__dirname, './src/styles/global.scss')]
+    }
+  }
 };