nes.css style

front/dist/resources/html/CustomCharacterScene.html

@@ -1,14 +1,11 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #customizeScene {
         background: #0000;
         /*border: 1px solid #ebeeee;*/
         border-radius: 6px;
         margin: 10px auto 0;
         color: #ebeeee;
-        overflow: scroll;
+        overflow: auto;
         width: 42vw;
         height: 38vh;
         /*max-width: 300px;*/
@@ -27,19 +24,6 @@
         text-align: center;
         text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
     }
-    #customizeScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
     #customizeScene section {
         margin: 10px;
     }
@@ -52,13 +36,6 @@
     #customizeScene section.action.action-move { 
         top: 55%;
     }
-    #customizeScene button {
-        margin: 2px 10px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
     #customizeScene button#customizeSceneFormCancel {
         background-color: #aca6a600;
         color: #292929;
@@ -144,16 +121,16 @@
 
 <form id="customizeScene" hidden>
     <section class="text-center">
-        <h5>Custom your WOKA</h3>
+        <h5>Custom your Avatar</h3>
     </section>
     <section class="action action-move">
-        <button class="customizeSceneButton" id="customizeSceneButtonLeft"> < </button>
+        <button class="customizeSceneButton nes-btn" id="customizeSceneButtonLeft"> < </button>
-        <button class="customizeSceneButton" id="customizeSceneButtonRight"> > </button>
+        <button class="customizeSceneButton nes-btn" id="customizeSceneButtonRight"> > </button>
         <!--<button class="customizeSceneButton" id="customizeSceneButtonUp"> < </button>
         <button class="customizeSceneButton" id="customizeSceneButtonDown"> > </button>-->
     </section>
     <section class="action">
         <a type="submit" id="customizeSceneFormBack">Back <img src="resources/objects/arrow_up.png"/></a>
-        <button type="submit" id="customizeSceneFormSubmit">Next <img src="resources/objects/arrow_up.png"/></button>
+        <button type="submit" class="nes-btn" id="customizeSceneFormSubmit">Next <img src="resources/objects/arrow_up.png"/></button>
     </section>
 </form>

front/dist/resources/html/EnableCameraScene.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #enableCameraScene {
         background: #000000;
         /*border: 1px solid #ebeeee;*/
@@ -51,13 +48,6 @@
         top: 40vh;
         width: 100%;
     }
-    #enableCameraScene button {
-        margin: 10px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
     #enableCameraScene button#enableCameraSceneFormCancel {
         background-color: #c7c7c700;
         color: #292929;
@@ -118,6 +108,6 @@
         </select>
     </section>-->
     <section class="action">
-        <button type="submit" id="enableCameraSceneFormSubmit">Let's go!</button>
+        <button type="submit" id="enableCameraSceneFormSubmit" class="nes-btn">Let's go!</button>
     </section>
 </form>

front/dist/resources/html/SelectCharacterScene.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #selectCharacterScene {
         background: #0000;
         /*border: 1px solid #ebeeee;*/
@@ -27,19 +24,6 @@
         text-align: center;
         text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
     }
-    #selectCharacterScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
     #selectCharacterScene section {
         margin: 10px;
     }
@@ -48,14 +32,6 @@
         margin: 0;
         margin-top: 28vh;
     }
-    #selectCharacterScene button {
-        margin: 10px 0px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-        width: 100px;
-    }
     #selectCharacterScene button#selectCharacterSceneFormCancel {
         background-color: #aca6a600;
         color: #292929;
@@ -109,13 +85,6 @@
         display: none;
         right: 1vw;
     }
-    #selectCharacterScene section button#selectCharacterSceneFormCustomYourOwnSubmit{
-        font-size: 14px;
-        width: auto;
-        margin-top: -2px;
-        background-color: #ffd700;
-        color: black;
-    }
     @media only screen and (max-width: 800px),
             only screen and (max-height: 600px) {
         #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
@@ -129,12 +98,12 @@
 
 <form id="selectCharacterScene" hidden>
     <section class="text-center">
-        <h5>Select your WOKA</h5>
+        <h5>Select your Avatar</h5>
-        <button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
+        <button class="selectCharacterButton nes-btn" id="selectCharacterButtonLeft"> < </button>
-        <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
+        <button class="selectCharacterButton nes-btn" id="selectCharacterButtonRight"> > </button>
     </section>
     <section class="action">
-        <button type="submit" id="selectCharacterSceneFormSubmit">Continue</button>
+        <button type="submit" class="nes-btn" id="selectCharacterSceneFormSubmit">Continue</button>
-        <button type="submit" id="selectCharacterSceneFormCustomYourOwnSubmit">Custom your WOKA</button>
+        <button type="submit" class="nes-btn is-warning" id="selectCharacterSceneFormCustomYourOwnSubmit">Custom your Avatar</button>
     </section>
 </form>

front/dist/resources/html/SelectCompanionScene.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #selectCompanionScene {
         background: #0000;
         /*border: 1px solid #ebeeee;*/
@@ -9,7 +6,7 @@
         margin: 10px auto 0;
         color: #ebeeee;
         max-height: 40vh;
-        overflow: scroll;
+        overflow: auto;
         max-width: 300px;
         width: 40vw;
     }
@@ -26,19 +23,6 @@
         text-align: center;
         text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
     }
-    #selectCompanionScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
     #selectCompanionScene section {
         margin: 10px;
     }
@@ -47,14 +31,6 @@
         margin: 0;
         margin-top: 20vh;
     }
-    #selectCompanionScene button {
-        margin: 10px 4px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-        width: 100px;
-    }
     #selectCompanionScene button#selectCompanionSceneFormCancel {
         background-color: #aca6a600;
         color: #292929;
@@ -117,12 +93,12 @@
 
 <form id="selectCompanionScene" hidden>
     <section class="text-center">
-        <h5>Select your WOKA</h5>
+        <h5>Select your Companion</h5>
-        <button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
+        <button class="selectCharacterButton nes-btn" id="selectCharacterButtonLeft"> < </button>
-        <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
+        <button class="selectCharacterButton nes-btn" id="selectCharacterButtonRight"> > </button>
     </section>
     <section class="action">
-        <a herf="#" id="selectCompanionSceneFormBack">Back</a>
+        <a herf="#" class="nes-btn is-dark" id="selectCompanionSceneFormBack">Back</a>
-        <button type="submit" id="selectCompanionSceneFormSubmit">Continue</button>
+        <button type="submit" class="nes-btn" id="selectCompanionSceneFormSubmit">Continue</button>
     </section>
 </form>

front/dist/resources/html/gameMenu.html

@@ -1,15 +1,6 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameMenu main{
-        margin-top: 15px;
+        margin-top: 30px;
-    }
-    #gameMenu button {
-        background-color: black;
-        color: white;
-        border-radius: 7px;
-        padding-bottom: 2px;
     }
     #gameMenu section {
         margin: 10px;
@@ -43,22 +34,22 @@
 
     <main>
         <section>
-            <button id="shareButton">Share url</button>
+            <button id="shareButton" class="nes-btn">Share url</button>
         </section>
         <section>
-            <button id="changeSkinButton">Edit skin</button>
+            <button id="changeSkinButton" class="nes-btn">Edit skin</button>
         </section>
         <section>
-            <button id="changeCompanionButton">Edit companion</button>
+            <button id="changeCompanionButton" class="nes-btn">Edit companion</button>
         </section>
         <section>
-            <button id="editGameSettingsButton">Settings</button>
+            <button id="editGameSettingsButton" class="nes-btn">Settings</button>
         </section>
         <section>
-            <button id="toggleFullscreen">Toggle fullscreen</button>
+            <button id="toggleFullscreen" class="nes-btn">Toggle fullscreen</button>
         </section>
         <section id="adminConsoleSection" hidden>
-            <button id="adminConsoleButton">Admin console</button>
+            <button id="adminConsoleButton" class="nes-btn">Admin console</button>
         </section>
         <section id="socialLinks" hidden>
         </section>

front/dist/resources/html/gameMenuIcon.html

@@ -1,15 +1,6 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
-    #menuIcon button {
-        background-color: black;
-        color: white;
-        border-radius: 7px;
-        padding: 2px 8px;
-    }
     #menuIcon button img{
-        width: 14px;
+        width: 8px;
         padding-top: 0;
         cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     }
@@ -24,7 +15,7 @@
 </style>
 <main id="menuIcon" hidden>
     <section>
-        <button id="openMenuButton">
+        <button id="openMenuButton" class="nes-btn is-dark">
             <img src="/static/images/menu.svg">
         </button>
     </section>

front/dist/resources/html/gameQualityMenu.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameQuality {
         background: #eceeee;
         border: 1px solid #42464b;
@@ -26,59 +23,40 @@
         text-align: center;
         text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
     }
-    #gameQuality select {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-    }
     #gameQuality section {
         margin: 10px;
     }
     #gameQuality section.action{
         text-align: center;
     }
-    #gameQuality button {
-        margin: 10px;
-        background-color: black;
-        color: white;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    #gameQuality button#gameQualityFormCancel {
-        background-color: #c7c7c700;
-        color: #292929;
-    }
 </style>
 
 <form id="gameQuality" hidden>
     <section>
         <h5>Game quality</h3>
         <p class="cautiousText">(Editing these settings will restart the game)</p>
-        <select id="select-game-quality">
+        <div  class="nes-select">
-            <option value="120">High video quality (120 fps)</option>
+            <select id="select-game-quality">
-            <option value="60">Medium video quality (60 fps, recommended)</option>
+                <option value="120">High video quality (120 fps)</option>
-            <option value="40">Minimum video quality (40 fps)</option>
+                <option value="60">Medium video quality (60 fps, recommended)</option>
-            <option value="20">Small video quality (20 fps)</option>
+                <option value="40">Minimum video quality (40 fps)</option>
-        </select>
+                <option value="20">Small video quality (20 fps)</option>
+            </select>
+        </div>
     </section>
     <section>
         <h5>Video quality</h3>
-        <select id="select-video-quality">
+        <div  class="nes-select">
-            <option value="30">High video quality (30 fps)</option>
+            <select id="select-video-quality">
-            <option value="20">Medium video quality (20 fps, recommended)</option>
+                <option value="30">High video quality (30 fps)</option>
-            <option value="10">Minimum video quality (10 fps)</option>
+                <option value="20">Medium video quality (20 fps, recommended)</option>
-            <option value="5">Small video quality (5 fps)</option>
+                <option value="10">Minimum video quality (10 fps)</option>
-        </select>
+                <option value="5">Small video quality (5 fps)</option>
+            </select>
+        </div>
     </section>
     <section class="action">
-        <button type="submit" id="gameQualityFormSubmit">Save</button>
+        <button type="submit" class="nes-btn" id="gameQualityFormSubmit" >Save</button>
-        <button type="reset" class="close" id="gameQualityFormCancel">Cancel</button>
+        <button type="reset" class="close nes-btn is-error" id="gameQualityFormCancel">Cancel</button>
     </section>
 </form>

front/dist/resources/html/gameReport.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameReport {
         background: #eceeee;
         border: 1px solid #42464b;

front/dist/resources/html/gameShare.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameShare {
         background: #eceeee;
         border: 1px solid #42464b;

front/dist/resources/html/helpCameraSettings.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #helpCameraSettings {
         background: #eceeee;
         border: 1px solid #42464b;

front/dist/resources/html/loginScene.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #loginScene {
         background: #000000;
         /*border: 1px solid #ebeeee;*/
@@ -11,7 +8,7 @@
         max-width: 200px;
         color: #ebeeee;
         max-height: 40vh;
-        overflow: scroll;
+        overflow: auto;
     }
     #loginScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -26,19 +23,6 @@
         text-align: center;
         text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
     }
-    #loginScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
     #loginScene section {
         margin: 10px;
     }
@@ -46,14 +30,6 @@
         text-align: center;
         margin: 0;
     }
-    #loginScene button {
-        margin: 10px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-        width: 100px;
-    }
     #loginScene button#loginSceneFormCancel {
         background-color: #c7c7c700;
         color: #292929;
@@ -105,10 +81,10 @@
         <p class="err" id="errorLoginScene"></p>
     </section>
     <section>
-        <input type="text" name="email" id="loginSceneName">
+        <input type="text" name="email" class="nes-input" id="loginSceneName">
-        <p>By continuing, you are agreeing our <a href="https://workadventu.re/terms-of-use" target="_blank">terms of use</a>, <a href="https://workadventu.re/privacy-policy" target="_blank">privacy policy</a> and <a href="https://workadventu.re/cookie-policy" target="_blank">cookie policy</a>.</p>
+        <p></p>
     </section>
     <section class="action">
-        <button type="submit" id="loginSceneFormSubmit">Continue</button>
+        <button class="nes-btn" type="submit" id="loginSceneFormSubmit">Continue</button>
     </section>
 </form>

front/dist/resources/html/warningContainer.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #warningMain {
         border-radius: 5px;
         height: 100px;

front/dist/resources/style/index.scss

@@ -1,3 +1,9 @@
+@import "~@fontsource/press-start-2p/scss/mixins";
+@include fontFace(
+  $fontDir: "./resources/fonts"
+);
+@import "~nes.css/css/nes.min.css";
+@import "nes.custom.css";
 @import "cowebsite.scss";
 @import "cowebsite-mobile.scss";
 @import "style.css";

front/dist/resources/style/nes.custom.css

@@ -0,0 +1,10 @@
+.nes-btn.is-dark {
+  border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>');
+  outline-color: #e7e7e7;
+  color: #fff;
+  background-color: #212529;
+}
+
+.nes-btn {
+  font-size: 8px;
+}

front/dist/resources/style/style.css

@@ -1,12 +1,9 @@
-*{
-    font-family: 'Open Sans', sans-serif;
-    cursor: url('/resources/logos/cursor_normal.png'), auto;
-}
 * a, button, select{
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 body{
     overflow: hidden;
+    font-size: 10px;
 }
 body button:focus,
 body img:focus,
@@ -1124,14 +1121,10 @@ div.action{
 }
 div.action p.action-body{
     padding: 10px;
-    background-color: #2d2d2dba;
+    font-size: 12px;
-    color: #fff;
-    font-size: 14px;
     font-weight: 500;
     text-align: center;
     max-width: 250px;
-    margin-left: calc(50% - 125px);
-    border-radius: 15px;
 }
 .popUpElement{
     font-family: 'Press Start 2P';

front/package.json

@@ -25,11 +25,13 @@
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
+    "@fontsource/press-start-2p": "^4.2.2",
     "@types/simple-peer": "^9.6.0",
     "@types/socket.io-client": "^1.4.32",
     "axios": "^0.21.1",
     "generic-type-guard": "^3.2.0",
     "google-protobuf": "^3.13.0",
+    "nes.css": "^2.3.0",
     "phaser": "3.24.1",
     "phaser3-rex-plugins": "^1.1.42",
     "queue-typescript": "^1.0.1",

front/src/Phaser/Game/GameScene.ts

@@ -1506,7 +1506,7 @@ ${escapedMessage}
                 if(JITSI_PRIVATE_MODE && !jitsiUrl) {
                     const adminTag = allProps.get("jitsiRoomAdminTag") as string | undefined;
 
-                    this.connection.emitQueryJitsiJwtMessage(roomName, adminTag);
+                    this.connection && this.connection.emitQueryJitsiJwtMessage(roomName, adminTag);
                 } else {
                     this.startJitsi(roomName, undefined);
                 }

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -39,7 +39,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     preload() {
         addLoader(this);
 
-        this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
+        this.load.html(selectCharacterKey, 'resources/html/SelectCharacterScene.html');
 
         this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {

front/src/WebRtc/LayoutManager.ts

@@ -328,6 +328,8 @@ class LayoutManager {
         //create div and text html component
         const p = document.createElement('p');
         p.classList.add('action-body');
+        p.classList.add('nes-btn');
+        p.classList.add('is-dark');
         p.innerText = text;
 
         const div = document.createElement('div');

front/yarn.lock

@@ -23,6 +23,11 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@fontsource/press-start-2p@^4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@fontsource/press-start-2p/-/press-start-2p-4.2.2.tgz#5831b4c72c19432f29a587ed77ca3030d5876779"
+  integrity sha512-9kFqYj0wkYzp+vdWLeGyzGDBv0tZ/LMqCFFjAOMyJv/7JddagZFhOkrwbQaeaqQFRa/lupz4Q1zgLggMXi8KxQ==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -3390,6 +3395,11 @@ neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+nes.css@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/nes.css/-/nes.css-2.3.0.tgz#112c834dd8a18cda570ab76d66b26b078a94c919"
+  integrity sha512-lCFZs9vj3f5RVdbvTL/kSxiYsOARwSeAdJaMNo+bCgmWOO9x8ay7QpT4yQVKHy3r5Dttzd0uqVdpt3fvvx6EpQ==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"