Merge pull request #497 from thecodingmachine/notifOutSound

Change out notification sound

Vagrantfile.template

@@ -2,7 +2,7 @@
 # -*- mode: ruby -*-
 # vi: set ft=ruby :
 # Box / OS
-VAGRANT_BOX = 'bento/ubuntu-19.10'
+VAGRANT_BOX = 'bento/ubuntu-20.04'
 
 # VM User — 'vagrant' by default
 VM_USER = 'vagrant'
@@ -58,7 +58,7 @@ Vagrant.configure(2) do |config|
     apt-get update -y
     apt-get install -y git
     apt-get install -y apt-transport-https
-    apt-get install -y build-essential
+    apt-get install -y ca-certificates
     apt-get install -y curl
     apt-get install -y gnupg-agent
     apt-get install -y software-properties-common
@@ -66,8 +66,8 @@ Vagrant.configure(2) do |config|
     apt-key fingerprint 0EBFCD88
     add-apt-repository \
        "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
-       $(lsb_release -cs) \
+        $(lsb_release -cs) \
-       stable"
+        stable"
     apt-get update -y
     apt-get install -y docker-ce docker-ce-cli containerd.io
     curl -L "https://github.com/docker/compose/releases/download/1.25.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

front/dist/resources/html/gameMenu.html

@@ -1,9 +1,16 @@
 <style>
+    *{
+        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;
+    }
     #gameMenu button {
         background-color: black;
         color: white;
         border-radius: 7px;
-        cursor: url('../logos/cursor_pointer.png'), pointer;
+        padding-bottom: 4px;
     }
     #gameMenu section {
         margin: 10px;
@@ -16,9 +23,6 @@
         <section>
             <button id="shareButton">Share url</button>
         </section>
-        <section>
-            <button id="sparkButton">Create map</button>
-        </section>
         <section>
             <button id="changeNameButton">Edit name</button>
         </section>
@@ -28,6 +32,9 @@
         <section>
             <button id="editGameSettingsButton">Settings</button>
         </section>
+        <section>
+            <button id="sparkButton">Create map</button>
+        </section>
         <section id="adminConsoleSection" hidden>
             <button id="adminConsoleButton">Admin console</button>
         </section>

front/dist/resources/html/gameMenuIcon.html

@@ -1,10 +1,18 @@
 <style>
-
+    *{
+        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;
+    }
     #menuIcon button {
         background-color: black;
         color: white;
         border-radius: 7px;
-        cursor: url('../logos/cursor_pointer.png'), pointer;
+    }
+    #menuIcon button img{
+        width: 14px;
     }
     #menuIcon section {
         margin: 10px;
@@ -12,6 +20,8 @@
 </style>
 <main id="menuIcon" hidden>
     <section>
-        <button id="openMenuButton">Menu</button>
+        <button id="openMenuButton">
+            <img src="/static/images/menu.svg">
+        </button>
     </section>
 </main>

front/dist/resources/html/gameQualityMenu.html

@@ -1,4 +1,11 @@
 <style>
+    *{
+        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;
+    }
     #gameQuality {
         background: #eceeee;
         border: 1px solid #42464b;
@@ -34,7 +41,6 @@
         height: 30px;
         transition: box-shadow 0.3s;
         width: 240px;
-        cursor: url('../logos/cursor_pointer.png'), pointer;
     }
     #gameQuality section {
         margin: 10px;
@@ -44,7 +50,7 @@
         background-color: black;
         color: white;
         border-radius: 7px;
-        cursor: url('../logos/cursor_pointer.png'), pointer;
+        padding-bottom: 4px;
     }
 </style>
 

front/dist/resources/style/style.css

@@ -1,9 +1,9 @@
 *{
     font-family: 'Open Sans', sans-serif;
-    cursor: url('../logos/cursor_normal.png'), auto;
+    cursor: url('/resources/logos/cursor_normal.png'), auto;
 }
 * a, button, select{
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 body{
     overflow: hidden;
@@ -112,7 +112,7 @@ video#myCamVideo{
 }
 /*btn animation*/
 .btn-cam-action div{
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     position: absolute;
     border: solid 0px black;
     width: 44px;
@@ -299,7 +299,7 @@ body {
         right: -100px;
         background: none;
         border: none;
-        cursor: url('../logos/cursor_pointer.png'), pointer;
+        cursor: url('/resources/logos/cursor_pointer.png'), pointer;
         animation: right .2s ease;
     }
     #cowebsite .close-btn img{
@@ -389,7 +389,7 @@ body {
     margin: 2%;
     flex-basis: 96%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     /*flex-shrink: 2;*/
 }
 
@@ -406,7 +406,7 @@ body {
 .sidebar > div {
     margin: 2%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     border-radius: 15px 15px 15px 15px;
 }
 
@@ -437,7 +437,7 @@ body {
     margin: 1%;
     max-height: 96%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s;
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 
 .chat-mode > div:hover {
@@ -473,7 +473,8 @@ body {
     min-height: 200px;
     max-height: 80%;
     top: -80%;
-    left: 10%;
+    /*left: 10%;*/
+    left: 250px;
     background: #333333;
     z-index: 200;
     transition: all 0.1s ease-out;
@@ -530,7 +531,7 @@ body {
     margin-top: 6px;
     width: 30px;
     height: 30px;
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     padding: 0 5px;
     transition: all .5s ease;
     transform: rotateY(0);
@@ -554,7 +555,7 @@ body {
 
 .main-console div.console:hover,
 .message-container div.clear:hover {
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     top: calc(100% + 5px);
     transform: scale(1.2) translateY(3px);
 }
@@ -587,7 +588,7 @@ body {
     transition: all .2s ease;
 }
 .main-console .btn-action .btn:hover{
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     background-color: #ffda01;
     color: black;
     border: 1px solid black;
@@ -602,7 +603,7 @@ body {
 
 .main-console .menu span {
     margin: 20px;
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 
 .main-console .menu span.active {
@@ -636,12 +637,14 @@ body {
 }
 .main-console section div.upload label img{
     height: 150px;
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 .main-console section div.upload label img{
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 
+
+
 /*audio html when audio message playing*/
 .main-container .audio-playing {
     position: absolute;
@@ -729,7 +732,7 @@ div.modal-report-user{
     right: 0;
     left: auto;
     top: 0;
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     width: 15px;
     height: 15px;
     margin: 10px;
@@ -748,7 +751,7 @@ div.modal-report-user{
     transition: all .2s ease;
 }
 .modal-report-user button:hover{
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     background-color: #ffda01;
     color: black;
     border: 1px solid black;
@@ -791,7 +794,7 @@ div.modal-report-user{
 }
 .discussion .active-btn{
     display: none;
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     height: 50px;
     width: 50px;
     background-color: #2d2d2dba;
@@ -820,7 +823,7 @@ div.modal-report-user{
     right: 10px;
     background: none;
     border: none;
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 .discussion .close-btn img{
     height: 15px;
@@ -845,7 +848,7 @@ div.modal-report-user{
     background-color: #ffffff69;
     padding: 5px;
     border-radius: 15px;
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 
 .discussion .participants .participant:hover{
@@ -878,7 +881,7 @@ div.modal-report-user{
 }
 
 .discussion .participants .participant button.report-btn{
-    cursor: url('../logos/cursor_pointer.png'), pointer;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     position: absolute;
     background-color: #2d2d2dba;
     right: 34px;

front/dist/static/images/menu.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M368,207.7H16c-8.8,0-16-7.2-16-16s7.2-16,16-16h352c8.8,0,16,7.2,16,16S376.8,207.7,368,207.7z"/>
+<path class="st0" d="M368,85H16C7.2,85,0,77.8,0,69s7.2-16,16-16h352c8.8,0,16,7.2,16,16S376.8,85,368,85z"/>
+<path class="st0" d="M368,330.3H16c-8.8,0-16-7.2-16-16s7.2-16,16-16h352c8.8,0,16,7.2,16,16S376.8,330.3,368,330.3z"/>
+</svg>

front/src/Administration/ConsoleGlobalMessageManager.ts

@@ -21,11 +21,11 @@ export class ConsoleGlobalMessageManager {
 
     private readonly divMainConsole: HTMLDivElement;
     private readonly divMessageConsole: HTMLDivElement;
-    private readonly divSettingConsole: HTMLDivElement;
+    //private readonly divSettingConsole: HTMLDivElement;
     private readonly buttonMainConsole: HTMLDivElement;
     private readonly buttonSendMainConsole: HTMLImageElement;
-    private readonly buttonAdminMainConsole: HTMLImageElement;
+    //private readonly buttonAdminMainConsole: HTMLImageElement;
-    private readonly buttonSettingsMainConsole: HTMLImageElement;
+    //private readonly buttonSettingsMainConsole: HTMLImageElement;
     private activeConsole: boolean = false;
     private activeMessage: boolean = false;
     private activeSetting: boolean = false;
@@ -40,11 +40,12 @@ export class ConsoleGlobalMessageManager {
         this.divMainConsole.className = CLASS_CONSOLE_MESSAGE;
         this.divMessageConsole = document.createElement('div');
         this.divMessageConsole.className = 'message';
-        this.divSettingConsole = document.createElement('div');
+        //this.divSettingConsole = document.createElement('div');
-        this.divSettingConsole.className = 'setting';
+        //this.divSettingConsole.className = 'setting';
         this.buttonSendMainConsole = document.createElement('img');
-        this.buttonSettingsMainConsole = document.createElement('img');
+        this.buttonSendMainConsole.id = 'btn-send-message';
-        this.buttonAdminMainConsole = document.createElement('img');
+        //this.buttonSettingsMainConsole = document.createElement('img');
+        //this.buttonAdminMainConsole = document.createElement('img');
         this.userInputManager = userInputManager;
         this.initialise();
         
@@ -103,33 +104,33 @@ export class ConsoleGlobalMessageManager {
             }
         });
 
-        this.buttonAdminMainConsole.src = 'resources/logos/setting-yellow.svg';
+        /*this.buttonAdminMainConsole.src = 'resources/logos/setting-yellow.svg';
         this.buttonAdminMainConsole.addEventListener('click', () => {
             window.open(ADMIN_URL, '_blank');
-        });
+        });*/
 
-        this.buttonSettingsMainConsole.src = 'resources/logos/monitor-yellow.svg';
+        /*this.buttonSettingsMainConsole.src = 'resources/logos/monitor-yellow.svg';
         this.buttonSettingsMainConsole.addEventListener('click', () => {
             if(this.activeSetting){
                 this.disabledSettingConsole();
             }else{
                 this.activeSettingConsole();
             }
-        });
+        });*/
 
         this.divMessageConsole.appendChild(typeConsole);
 
-        if(this.isAdmin) {
+        /*if(this.isAdmin) {
             this.buttonMainConsole.appendChild(this.buttonSendMainConsole);
-            this.buttonMainConsole.appendChild(this.buttonAdminMainConsole);
+            //this.buttonMainConsole.appendChild(this.buttonAdminMainConsole);
-            this.createTextMessagePart();
+        }*/
-            this.createUploadAudioPart();
+        this.createTextMessagePart();
-        }
+        this.createUploadAudioPart();
-        this.buttonMainConsole.appendChild(this.buttonSettingsMainConsole);
+        //this.buttonMainConsole.appendChild(this.buttonSettingsMainConsole);
 
         this.divMainConsole.appendChild(this.buttonMainConsole);
         this.divMainConsole.appendChild(this.divMessageConsole);
-        this.divMainConsole.appendChild(this.divSettingConsole);
+        //this.divMainConsole.appendChild(this.divSettingConsole);
 
         const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
         mainSectionDiv.appendChild(this.divMainConsole);
@@ -343,40 +344,50 @@ export class ConsoleGlobalMessageManager {
     }
 
     activeMessageConsole(){
-        this.activeMessage = true;
+        if(!this.isAdmin){
-        if(this.activeSetting){
+            throw "User is not admin";
-            this.disabledSettingConsole();
         }
+        if(this.activeMessage){
+            this.disabledMessageConsole();
+            return;
+        }
+        this.activeMessage = true;
         this.active();
         this.divMessageConsole.classList.add('active');
         this.buttonMainConsole.hidden = false;
         this.buttonSendMainConsole.classList.add('active');
+        //if button not
+        try{
+            HtmlUtils.getElementByIdOrFail('btn-send-message');
+        }catch (e) {
+            this.buttonMainConsole.appendChild(this.buttonSendMainConsole);
+        }
     }
 
     disabledMessageConsole(){
         this.activeMessage = false;
         this.disabled();
-        this.buttonMainConsole.hidden = false;
+        this.buttonMainConsole.hidden = true;
         this.divMessageConsole.classList.remove('active');
         this.buttonSendMainConsole.classList.remove('active');
     }
 
-    activeSettingConsole(){
+    /*activeSettingConsole(){
         this.activeSetting = true;
         if(this.activeMessage){
-            this.disabledMessageConsole();
+            this.disabledSettingConsole();
         }
         this.active();
         this.divSettingConsole.classList.add('active');
-        this.buttonSettingsMainConsole.classList.add('active');
+        //this.buttonSettingsMainConsole.classList.add('active');
     }
 
     disabledSettingConsole(){
         this.activeSetting = false;
         this.disabled();
         this.divSettingConsole.classList.remove('active');
-        this.buttonSettingsMainConsole.classList.remove('active');
+        //this.buttonSettingsMainConsole.classList.remove('active');
-    }
+    }*/
 
     private getSectionId(id: string) : string {
         return `section-${id}`;

front/src/Phaser/Menu/MenuScene.ts

@@ -53,6 +53,9 @@ export class MenuScene extends Phaser.Scene {
         this.menuButton.on('click', () => {
             this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
         });
+
+        this.menuElement.addListener('click');
+        this.menuElement.on('click', this.onMenuClick.bind(this));
     }
     
     private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
@@ -70,13 +73,11 @@ export class MenuScene extends Phaser.Scene {
     openSideMenu() {
         if (this.sideMenuOpened) return;
         this.sideMenuOpened = true;
-        this.menuButton.getChildByID('openMenuButton').innerHTML = 'Close'
+        this.menuButton.getChildByID('openMenuButton').innerHTML = 'X';
         if (gameManager.getCurrentGameScene(this).connection.isAdmin()) {
             const adminSection = this.menuElement.getChildByID('adminConsoleSection') as HTMLElement;
             adminSection.hidden = false;
         }
-        this.menuElement.addListener('click');
-        this.menuElement.on('click', this.onMenuClick.bind(this));
         this.tweens.add({
             targets: this.menuElement,
             x: openedSideMenuX,
@@ -89,14 +90,14 @@ export class MenuScene extends Phaser.Scene {
         if (!this.sideMenuOpened) return;
         this.sideMenuOpened = false;
         this.closeGameQualityMenu()
-        this.menuButton.getChildByID('openMenuButton').innerHTML = 'Menu'
+        this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
+        gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.disabledMessageConsole();
         this.tweens.add({
             targets: this.menuElement,
             x: closedSideMenuX,
             duration: 500,
             ease: 'Power3'
         });
-        this.menuElement.removeListener('click');
     }