Merge pull request #497 from thecodingmachine/notifOutSound

Change out notification sound
This commit is contained in:
grégoire parant 2020-12-17 14:28:40 +01:00 committed by GitHub
commit ce4bb4221f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 115 additions and 66 deletions

View File

@ -2,7 +2,7 @@
# -*- mode: ruby -*- # -*- mode: ruby -*-
# vi: set ft=ruby : # vi: set ft=ruby :
# Box / OS # Box / OS
VAGRANT_BOX = 'bento/ubuntu-19.10' VAGRANT_BOX = 'bento/ubuntu-20.04'
# VM User — 'vagrant' by default # VM User — 'vagrant' by default
VM_USER = 'vagrant' VM_USER = 'vagrant'
@ -58,7 +58,7 @@ Vagrant.configure(2) do |config|
apt-get update -y apt-get update -y
apt-get install -y git apt-get install -y git
apt-get install -y apt-transport-https 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 curl
apt-get install -y gnupg-agent apt-get install -y gnupg-agent
apt-get install -y software-properties-common apt-get install -y software-properties-common

View File

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

View File

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

View File

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

Binary file not shown.

View File

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

11
front/dist/static/images/menu.svg vendored Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 752 B

View File

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

View File

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