From 69ff15ff7155fd4cec62adff81b2474a8d11860f Mon Sep 17 00:00:00 2001 From: Malte Riechmann Date: Fri, 29 Jan 2021 21:45:01 +0100 Subject: [PATCH 01/37] Run containers in the background using detached mode --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index faafed98..1ca5a48a 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Install Docker. Run: ``` -docker-compose up +docker-compose up -d ``` The environment will start. From 16daf7332a869d4d2aea930c065f942f63a34e36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Fri, 16 Apr 2021 21:29:05 +0200 Subject: [PATCH 02/37] Adding the ability to display "Text" objects from Tiled I honestly don't believe text objects look good on map, and in real maps, I think text should be written on tiles. However, for a variety of use cases (like in test maps in the /maps/test directory, it can be useful to be able to display some text easily on a map. This PR adds the ability to display this text. Note: the "font" support cannot work correctly, as Tiled is listing fonts from the local system, and those fonts are not available in a browser. --- front/src/Phaser/Components/TextUtils.ts | 45 ++++++ front/src/Phaser/Game/GameScene.ts | 17 ++- front/src/Phaser/Map/ITiledMap.ts | 14 ++ maps/tests/text_object.json | 179 +++++++++++++++++++++++ 4 files changed, 254 insertions(+), 1 deletion(-) create mode 100644 front/src/Phaser/Components/TextUtils.ts create mode 100644 maps/tests/text_object.json diff --git a/front/src/Phaser/Components/TextUtils.ts b/front/src/Phaser/Components/TextUtils.ts new file mode 100644 index 00000000..0161f52d --- /dev/null +++ b/front/src/Phaser/Components/TextUtils.ts @@ -0,0 +1,45 @@ +import {ITiledMapObject} from "../Map/ITiledMap"; +import Text = Phaser.GameObjects.Text; +import {GameScene} from "../Game/GameScene"; +import TextStyle = Phaser.GameObjects.TextStyle; + +export class TextUtils { + public static createTextFromITiledMapObject(scene: GameScene, object: ITiledMapObject): void { + if (object.text === undefined) { + throw new Error('This object has not textual representation.'); + } + const options: {font?: string} = {}; + let font = ''; + if (object.text.italic) { + font += 'italic '; + } + // Note: there is no support for "strikeout" and "underline" + let fontSize: number = 16; + if (object.text.pixelsize) { + font += object.text.pixelsize+'px '; + fontSize = object.text.pixelsize; + } else { + font += '16px '; + } + if (object.text.fontfamily) { + font += '"'+object.text.fontfamily+'"'; + } + if (font !== '') { + options.font = font; + } + const textElem = scene.add.text(object.x, object.y, object.text.text, options); + textElem.setFontSize(fontSize); + let color = '#000000'; + if (object.text.color !== undefined) { + color = object.text.color; + } + textElem.setColor(color); + if (object.text.wrap) { + textElem.setWordWrapWidth(textElem.width); + } + textElem.setAngle(object.rotation); + if (object.text.halign !== undefined) { + textElem.setAlign(object.text.halign); + } + } +} diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 08afca58..d97c6dbc 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -18,7 +18,14 @@ import { RESOLUTION, ZOOM_LEVEL } from "../../Enum/EnvironmentVariable"; -import {ITiledMap, ITiledMapLayer, ITiledMapLayerProperty, ITiledMapObject, ITiledTileSet} from "../Map/ITiledMap"; +import { + ITiledMap, + ITiledMapLayer, + ITiledMapLayerProperty, + ITiledMapObject, + ITiledText, + ITiledTileSet +} from "../Map/ITiledMap"; import {AddPlayerInterface} from "./AddPlayerInterface"; import {PlayerAnimationDirections} from "../Player/Animation"; import {PlayerMovement} from "./PlayerMovement"; @@ -81,6 +88,7 @@ import DOMElement = Phaser.GameObjects.DOMElement; import {Subscription} from "rxjs"; import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream"; import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager"; +import {TextUtils} from "../Components/TextUtils"; export interface GameSceneInitInterface { initPosition: PointInterface|null, @@ -398,6 +406,13 @@ export class GameScene extends ResizableScene implements CenterListener { if (layer.type === 'objectgroup' && layer.name === 'floorLayer') { depth = 10000; } + if (layer.type === 'objectgroup') { + for (const object of layer.objects) { + if (object.text) { + TextUtils.createTextFromITiledMapObject(this, object); + } + } + } } if (depth === -2) { throw new Error('Your map MUST contain a layer of type "objectgroup" whose name is "floorLayer" that represents the layer characters are drawn at.'); diff --git a/front/src/Phaser/Map/ITiledMap.ts b/front/src/Phaser/Map/ITiledMap.ts index 39e0a1f5..c3f9d10b 100644 --- a/front/src/Phaser/Map/ITiledMap.ts +++ b/front/src/Phaser/Map/ITiledMap.ts @@ -94,6 +94,20 @@ export interface ITiledMapObject { * Polyline points */ polyline: {x: number, y: number}[]; + + text?: ITiledText +} + +export interface ITiledText { + text: string, + wrap?: boolean, + fontfamily?: string, + pixelsize?: number, + color?: string, + underline?: boolean, + italic?: boolean, + strikeout?: boolean, + halign?: "center"|"right"|"justify"|"left" } export interface ITiledTileSet { diff --git a/maps/tests/text_object.json b/maps/tests/text_object.json new file mode 100644 index 00000000..2c3612f0 --- /dev/null +++ b/maps/tests/text_object.json @@ -0,0 +1,179 @@ +{ "compressionlevel":-1, + "height":10, + "infinite":false, + "layers":[ + { + "data":[1, 1, 1, 1, 1, 1, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + "height":10, + "id":1, + "name":"floor", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":10, + "x":0, + "y":0 + }, + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "height":10, + "id":2, + "name":"start", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":10, + "x":0, + "y":0 + }, + { + "draworder":"topdown", + "id":3, + "name":"floorLayer", + "objects":[ + { + "height":154.708861498919, + "id":1, + "name":"", + "rotation":0, + "text": + { + "color":"#ffff00", + "fontfamily":"Sans Serif", + "text":"A yellow text that wraps automatically.\n\nIt is 16px high.", + "wrap":true + }, + "type":"", + "visible":true, + "width":127.701300455634, + "x":192.052147832817, + "y":5.45414451778726 + }, + { + "height":19, + "id":3, + "name":"", + "rotation":0, + "text": + { + "text":"Default text", + "wrap":true + }, + "type":"", + "visible":true, + "width":113.494863163736, + "x":1.76065884397454, + "y":8.44497342134471 + }, + { + "height":19, + "id":5, + "name":"", + "rotation":0, + "text": + { + "text":"A very long text with no world wrap so it keeps going" + }, + "type":"", + "visible":true, + "width":349.4375, + "x":1.01295161808517, + "y":168.828173374613 + }, + { + "height":19, + "id":6, + "name":"", + "rotation":45, + "text": + { + "text":"A rotated text" + }, + "type":"", + "visible":true, + "width":117.607252906128, + "x":62.3249441410129, + "y":41.3440913604766 + }, + { + "height":48.1605818096851, + "id":7, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"Sans Serif", + "italic":true, + "pixelsize":27, + "strikeout":true, + "text":"Italic 27px", + "underline":true + }, + "type":"", + "visible":true, + "width":337.807030930545, + "x":6.6207558122554, + "y":209.952070798528 + }, + { + "height":40, + "id":9, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"Sans Serif", + "halign":"center", + "pixelsize":15, + "text":"This text should appear below the plant and be centered", + "wrap":true + }, + "type":"", + "visible":true, + "width":317.4375, + "x":0.78125, + "y":269.5 + }], + "opacity":1, + "type":"objectgroup", + "visible":true, + "x":0, + "y":0 + }, + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 78, 79, 80, 0, 0, 0, 0, 0, 0, 0, 89, 90, 91, 0, 0, 0, 0, 0, 0, 0, 100, 101, 102, 0, 0, 0, 0], + "height":10, + "id":8, + "name":"over", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":10, + "x":0, + "y":0 + }], + "nextlayerid":9, + "nextobjectid":10, + "orientation":"orthogonal", + "renderorder":"right-down", + "tiledversion":"2021.03.23", + "tileheight":32, + "tilesets":[ + { + "columns":11, + "firstgid":1, + "image":"tileset1.png", + "imageheight":352, + "imagewidth":352, + "margin":0, + "name":"tileset1", + "spacing":0, + "tilecount":121, + "tileheight":32, + "tilewidth":32 + }], + "tilewidth":32, + "type":"map", + "version":1.5, + "width":10 +} \ No newline at end of file From 110511461a2c4df4ef3a7383bc91c68fb1cff494 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Sat, 17 Apr 2021 18:55:39 +0200 Subject: [PATCH 03/37] Fixing WorkWrap --- front/src/Phaser/Components/TextUtils.ts | 42 ++++++++++++++---------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/front/src/Phaser/Components/TextUtils.ts b/front/src/Phaser/Components/TextUtils.ts index 0161f52d..beee840a 100644 --- a/front/src/Phaser/Components/TextUtils.ts +++ b/front/src/Phaser/Components/TextUtils.ts @@ -8,38 +8,46 @@ export class TextUtils { if (object.text === undefined) { throw new Error('This object has not textual representation.'); } - const options: {font?: string} = {}; - let font = ''; + const options: { + fontStyle?: string, + fontSize?: string, + fontFamily?: string, + color?: string, + align?: string, + wordWrap?: { + width: number, + useAdvancedWrap?: boolean + } + } = {}; if (object.text.italic) { - font += 'italic '; + options.fontStyle = 'italic'; } // Note: there is no support for "strikeout" and "underline" let fontSize: number = 16; if (object.text.pixelsize) { - font += object.text.pixelsize+'px '; fontSize = object.text.pixelsize; - } else { - font += '16px '; } + options.fontSize = fontSize + 'px'; if (object.text.fontfamily) { - font += '"'+object.text.fontfamily+'"'; + options.fontFamily = '"'+object.text.fontfamily+'"'; } - if (font !== '') { - options.font = font; - } - const textElem = scene.add.text(object.x, object.y, object.text.text, options); - textElem.setFontSize(fontSize); let color = '#000000'; if (object.text.color !== undefined) { color = object.text.color; } - textElem.setColor(color); - if (object.text.wrap) { - textElem.setWordWrapWidth(textElem.width); + options.color = color; + if (object.text.wrap === true) { + options.wordWrap = { + width: object.width, + //useAdvancedWrap: true + } } - textElem.setAngle(object.rotation); if (object.text.halign !== undefined) { - textElem.setAlign(object.text.halign); + options.align = object.text.halign; } + + console.warn(options); + const textElem = scene.add.text(object.x, object.y, object.text.text, options); + textElem.setAngle(object.rotation); } } From 94317be1aedff4c4c3ffab705974cfffa42f210a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Sat, 17 Apr 2021 21:31:09 +0200 Subject: [PATCH 04/37] Improving test cases This PR improves test cases by adding a "index.html" webpage listing test maps and by adding text in the map, explaining what needs to be tested. --- maps/tests/iframe_api.json | 33 +++++++++++------ maps/tests/index.html | 63 ++++++++++++++++++++++++++++++++ maps/tests/jitsi_config.json | 33 +++++++++++------ maps/tests/jitsi_custom_url.json | 33 +++++++++++------ maps/tests/script.js | 4 +- maps/tests/script_api.json | 49 ++++++++++++++++++++----- 6 files changed, 170 insertions(+), 45 deletions(-) create mode 100644 maps/tests/index.html diff --git a/maps/tests/iframe_api.json b/maps/tests/iframe_api.json index 96d92423..fa138500 100644 --- a/maps/tests/iframe_api.json +++ b/maps/tests/iframe_api.json @@ -1,11 +1,4 @@ { "compressionlevel":-1, - "editorsettings": - { - "export": - { - "target":"." - } - }, "height":10, "infinite":false, "layers":[ @@ -60,7 +53,25 @@ "draworder":"topdown", "id":3, "name":"floorLayer", - "objects":[], + "objects":[ + { + "height":141, + "id":1, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"Sans Serif", + "pixelsize":11, + "text":"Test:\nWalk on carpet, an iframe open, click the \"Send chat message\" button\nResult:\nThe chat opens and a \"Hello world!\" message is displayed.\nTest:\nEnter something in the chat\nResult:\nThe message is displayed in the iframe", + "wrap":true + }, + "type":"", + "visible":true, + "width":316.770833333333, + "x":0.28125, + "y":187.833333333333 + }], "opacity":1, "type":"objectgroup", "visible":true, @@ -68,10 +79,10 @@ "y":0 }], "nextlayerid":6, - "nextobjectid":1, + "nextobjectid":3, "orientation":"orthogonal", "renderorder":"right-down", - "tiledversion":"1.3.3", + "tiledversion":"2021.03.23", "tileheight":32, "tilesets":[ { @@ -89,6 +100,6 @@ }], "tilewidth":32, "type":"map", - "version":1.2, + "version":1.5, "width":10 } \ No newline at end of file diff --git a/maps/tests/index.html b/maps/tests/index.html new file mode 100644 index 00000000..f53bbae9 --- /dev/null +++ b/maps/tests/index.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ResultTest
+ Success Failure Pending + + Testing Jitsi special config parameters +
+ Success Failure Pending + + Testing jitsiUrl property +
+ Success Failure Pending + + Testing scripting API with an iFrame +
+ Success Failure Pending + + Testing scripting API with a script +
+ + + + + diff --git a/maps/tests/jitsi_config.json b/maps/tests/jitsi_config.json index d806b751..9a812cc8 100644 --- a/maps/tests/jitsi_config.json +++ b/maps/tests/jitsi_config.json @@ -1,11 +1,4 @@ { "compressionlevel":-1, - "editorsettings": - { - "export": - { - "target":"." - } - }, "height":10, "infinite":false, "layers":[ @@ -70,7 +63,25 @@ "draworder":"topdown", "id":3, "name":"floorLayer", - "objects":[], + "objects":[ + { + "height":83.6666666666666, + "id":1, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"Sans Serif", + "pixelsize":13, + "text":"Test:\nWalk on the carpet and press space\nResult:\nJitsi opens, background in green and audio\/video is muted", + "wrap":true + }, + "type":"", + "visible":true, + "width":315.4375, + "x":2.28125, + "y":235.166666666667 + }], "opacity":1, "type":"objectgroup", "visible":true, @@ -78,10 +89,10 @@ "y":0 }], "nextlayerid":6, - "nextobjectid":1, + "nextobjectid":2, "orientation":"orthogonal", "renderorder":"right-down", - "tiledversion":"1.4.3", + "tiledversion":"2021.03.23", "tileheight":32, "tilesets":[ { @@ -99,6 +110,6 @@ }], "tilewidth":32, "type":"map", - "version":1.4, + "version":1.5, "width":10 } \ No newline at end of file diff --git a/maps/tests/jitsi_custom_url.json b/maps/tests/jitsi_custom_url.json index 65e3be9f..637796a1 100644 --- a/maps/tests/jitsi_custom_url.json +++ b/maps/tests/jitsi_custom_url.json @@ -1,11 +1,4 @@ { "compressionlevel":-1, - "editorsettings": - { - "export": - { - "target":"." - } - }, "height":10, "infinite":false, "layers":[ @@ -60,7 +53,25 @@ "draworder":"topdown", "id":3, "name":"floorLayer", - "objects":[], + "objects":[ + { + "height":94.6489098314831, + "id":1, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"Sans Serif", + "pixelsize":11, + "text":"Test:\nWalk on the carpet and press space\nResult:\nJitsi opens on meet.jit.si (check this in the network tab). Note: this test only makes sense if the default configured Jitsi instance is NOT meet.jit.si (check your .env file)", + "wrap":true + }, + "type":"", + "visible":true, + "width":317.361946929159, + "x":2.32853056864467, + "y":224.602707451482 + }], "opacity":1, "type":"objectgroup", "visible":true, @@ -68,10 +79,10 @@ "y":0 }], "nextlayerid":6, - "nextobjectid":1, + "nextobjectid":2, "orientation":"orthogonal", "renderorder":"right-down", - "tiledversion":"1.3.3", + "tiledversion":"2021.03.23", "tileheight":32, "tilesets":[ { @@ -89,6 +100,6 @@ }], "tilewidth":32, "type":"map", - "version":1.2, + "version":1.5, "width":10 } \ No newline at end of file diff --git a/maps/tests/script.js b/maps/tests/script.js index 5c129f1e..25e47249 100644 --- a/maps/tests/script.js +++ b/maps/tests/script.js @@ -3,8 +3,8 @@ console.log('SCRIPT LAUNCHED'); var isFirstTimeTuto = false; var textFirstPopup = 'Hey ! This is how to open start a discussion with someone ! You can be 4 max in a booble'; var textSecondPopup = 'You can also use the chat to communicate ! '; -var targetObjectTutoBubble ='tutoBobble'; -var targetObjectTutoChat ='tutoChat'; +var targetObjectTutoBubble ='myPopup1'; +var targetObjectTutoChat ='myPopup2'; var popUpExplanation = undefined; function launchTuto (){ WA.openPopup(targetObjectTutoBubble, textFirstPopup, [ diff --git a/maps/tests/script_api.json b/maps/tests/script_api.json index 54d93819..73ef9d01 100644 --- a/maps/tests/script_api.json +++ b/maps/tests/script_api.json @@ -1,11 +1,4 @@ { "compressionlevel":-1, - "editorsettings": - { - "export": - { - "target":"." - } - }, "height":10, "infinite":false, "layers":[ @@ -95,6 +88,42 @@ "width":125.735549178518, "x":13.649632619596, "y":50.8502491249093 + }, + { + "height":67, + "id":3, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"Sans Serif", + "pixelsize":11, + "text":"Test:\nWalk on top carpet\nResult:\nA message \"Don't step on my carpet\" is displayed", + "wrap":true + }, + "type":"", + "visible":true, + "width":252.4375, + "x":2.78125, + "y":2.5 + }, + { + "height":67, + "id":4, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"Sans Serif", + "pixelsize":11, + "text":"Test:\nWalk on bottom carpet\nResult:\nA series of 2 popups open. A bubble opens. The player cannot move until popup closes.\nWhen the player leaves the zone, the bubble closes.", + "wrap":true + }, + "type":"", + "visible":true, + "width":252.438, + "x":-1.71899999999999, + "y":163.5 }], "opacity":1, "type":"objectgroup", @@ -103,7 +132,7 @@ "y":0 }], "nextlayerid":8, - "nextobjectid":3, + "nextobjectid":5, "orientation":"orthogonal", "properties":[ { @@ -112,7 +141,7 @@ "value":"script.js" }], "renderorder":"right-down", - "tiledversion":"1.4.3", + "tiledversion":"2021.03.23", "tileheight":32, "tilesets":[ { @@ -130,6 +159,6 @@ }], "tilewidth":32, "type":"map", - "version":1.4, + "version":1.5, "width":10 } \ No newline at end of file From 2c862fe7e7ced311b198a19fceaf10e662ea7170 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 20 Apr 2021 18:49:42 +0200 Subject: [PATCH 05/37] Refactor Login Scene --- front/dist/resources/html/loginScene.html | 101 ++++++++++++++ front/dist/resources/objects/play_button.png | Bin 969 -> 0 bytes front/dist/resources/style/mobile-style.scss | 17 +++ front/src/Phaser/Login/LoginScene.ts | 135 ++++++++----------- 4 files changed, 176 insertions(+), 77 deletions(-) create mode 100644 front/dist/resources/html/loginScene.html delete mode 100644 front/dist/resources/objects/play_button.png create mode 100644 front/dist/resources/style/mobile-style.scss diff --git a/front/dist/resources/html/loginScene.html b/front/dist/resources/html/loginScene.html new file mode 100644 index 00000000..b237b3e2 --- /dev/null +++ b/front/dist/resources/html/loginScene.html @@ -0,0 +1,101 @@ + + + diff --git a/front/dist/resources/objects/play_button.png b/front/dist/resources/objects/play_button.png deleted file mode 100644 index 36aa309b6b26ddb120f8562bcb8c5090c8e8f38f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 969 zcmV;)12+7LP)jd6qRl{>LPf>_yuuR;D=wb2R1}h;Etm#RLFm zW z<#^dSuC!0nuyEc2=$TnB*O^|w`M&^eCNTb=0PFyGmYVr(JVp6lo_wU@n9iQMygZE! zGP)y75q)Qy6!v?%{wPS*YB}>&hILUeBzpk`vqo~8f{4qv@Y@`jnc_YlT?0AB-X_aqwF32)^Q7uS-xZh1*^ z&2g8NB)2^Eaf0MgpQSL#agwL$ktXJ^w5Msas>=QDHvqS5{KOfOTO_a54COa~2cEYZ zb^!bW@DjlH*s7#j%Too9Gx~7rKUYcalwD$mT;CjW?FxWP2d*6fa2CKE$*BST$;Y|` zV0ws9XMB4NGus8QO7c}MZeL>Yeh6*8RXZqHy^`|ZHP8?_LQzz&H*^zM%#MBGF`3%_|Qhf$~0+ana=>G+G<~- ziAxM+Hx4gi?|kYYKLLD{XbvBB4k>?xdQC>6=?1s3_h7z^uqefgewNt@)u1v>;+WYz rje-zD2qA div { + max-height: 240px; + } + + .sidebar > div { + max-height: 240px; + } + + .sidebar{ + max-width: 200px; + } + + .btn-cam-action div{ + bottom: 50px; + } +} \ No newline at end of file diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 057cb6ae..ecffa6e5 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -1,30 +1,17 @@ import {gameManager} from "../Game/GameManager"; -import {TextField} from "../Components/TextField"; -import {TextInput} from "../Components/TextInput"; -import Image = Phaser.GameObjects.Image; import {SelectCharacterSceneName} from "./SelectCharacterScene"; import {ResizableScene} from "./ResizableScene"; -import {isUserNameValid, maxUserNameLength} from "../../Connexion/LocalUser"; import { localUserStore } from "../../Connexion/LocalUserStore"; -import Rectangle = Phaser.GameObjects.Rectangle; -import {touchScreenManager} from "../../Touch/TouchScreenManager"; -import {PinchManager} from "../UserInput/PinchManager"; +import {MenuScene} from "../Menu/MenuScene"; -//todo: put this constants in a dedicated file export const LoginSceneName = "LoginScene"; -enum LoginTextures { - icon = "icon", - mainFont = "main_font" -} + +const loginSceneKey = 'loginScene'; export class LoginScene extends ResizableScene { - private nameInput!: TextInput; - private textField!: TextField; - private infoTextField!: TextField; - private pressReturnField!: TextField; - private logo!: Image; + + private loginSceneElement!: Phaser.GameObjects.DOMElement; private name: string = ''; - private mobileTapRectangle!: Rectangle; constructor() { super({ @@ -34,81 +21,75 @@ export class LoginScene extends ResizableScene { } preload() { - //this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); - this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png"); - // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap - this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); + this.load.html(loginSceneKey, 'resources/html/loginScene.html'); } create() { - if (touchScreenManager.supportTouchScreen) { - new PinchManager(this); - } + const middleX = this.getMiddleX(); + this.loginSceneElement = this.add.dom((middleX/2), 0).createFromCache(loginSceneKey); + MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey); - this.nameInput = new TextInput(this, this.game.renderer.width / 2, 70, maxUserNameLength, this.name,(text: string) => { - this.name = text; - localUserStore.setName(text); - }) - .setInteractive() - .on('pointerdown', () => { - this.nameInput.focus(); - }) - - this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:') - .setInteractive() - .on('pointerdown', () => { - this.nameInput.focus(); - }) - // For mobile purposes - we need a big enough touchable area. - this.mobileTapRectangle = this.add.rectangle( - this.game.renderer.width / 2, - 130, - this.game.renderer.width / 2, - 60, - ).setInteractive() - .on('pointerdown', () => { - this.login(this.name) - }) - this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Touch here\n\n or \n\nPress enter to start') - - this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon); - this.add.existing(this.logo); - - const infoText = "Commands: \n - Arrows or W, A, S, D to move\n - SHIFT to run"; - this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText, false); - - this.input.keyboard.on('keyup-ENTER', () => { - if (isUserNameValid(this.name)) { - this.login(this.name); + const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement; + const inputElement = this.loginSceneElement.getChildByID('loginSceneName') as HTMLInputElement; + inputElement.value = localUserStore.getName() ?? ''; + inputElement.focus(); + inputElement.addEventListener('keypress', (event: KeyboardEvent) => { + if(inputElement.value.length > 8){ + event.preventDefault(); + return; } + pErrorElement.innerHTML = ''; + if (event.key === 'Enter') { + event.preventDefault(); + this.login(inputElement); + return; + } + }); + + const continuingButton = this.loginSceneElement.getChildByID('loginSceneFormSubmit') as HTMLButtonElement; + continuingButton.addEventListener('click', (e) => { + e.preventDefault(); + this.login(inputElement); }); } - update(time: number, delta: number): void { - if (this.name == '') { - this.pressReturnField?.setVisible(false); - } else { - this.pressReturnField?.setVisible(!!(Math.floor(time / 500) % 2)); + private login(inputElement: HTMLInputElement): void { + const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement; + this.name = inputElement.value; + if (this.name === '') { + pErrorElement.innerHTML = 'The name is empty'; + return } - } - - private login(name: string): void { if (this.name === '') return - gameManager.setPlayerName(name); + gameManager.setPlayerName(this.name); this.scene.stop(LoginSceneName) gameManager.tryResumingGame(this, SelectCharacterSceneName); this.scene.remove(LoginSceneName) } - public onResize(ev: UIEvent): void { - this.textField.x = this.game.renderer.width / 2; - this.nameInput.setX(this.game.renderer.width / 2 - 64); - this.pressReturnField.x = this.game.renderer.width / 2; - this.mobileTapRectangle.x = this.game.renderer.width / 2; - this.logo.x = this.game.renderer.width - 30; - this.logo.y = this.game.renderer.height - 20; - this.infoTextField.y = this.game.renderer.height - 35; + update(time: number, delta: number): void { + const middleX = this.getMiddleX(); + this.tweens.add({ + targets: this.loginSceneElement, + x: (middleX/2), + duration: 1000, + ease: 'Power3' + }); } + public onResize(ev: UIEvent): void { + const middleX = this.getMiddleX(); + this.tweens.add({ + targets: this.loginSceneElement, + x: (middleX/2), + duration: 1000, + ease: 'Power3' + }); + } + + private getMiddleX() : number{ + const middleX = ((window.innerWidth) - ((this.loginSceneElement && this.loginSceneElement.width > 0 ? this.loginSceneElement.width : 200 /*FIXME to use a const will be injected in HTMLElement*/)*2)) / 2; + return (middleX > 0 ? middleX : 0); + } } From 09d5e0b689da3a707cbc327e5190871cbf4fedf5 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 20 Apr 2021 18:58:19 +0200 Subject: [PATCH 06/37] Fix center select name modal --- front/dist/resources/html/loginScene.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/front/dist/resources/html/loginScene.html b/front/dist/resources/html/loginScene.html index b237b3e2..7011227d 100644 --- a/front/dist/resources/html/loginScene.html +++ b/front/dist/resources/html/loginScene.html @@ -4,7 +4,8 @@ border: 1px solid #42464b; border-radius: 6px; margin: 20px auto 0; - width: 200px; + width: 90%; + max-width: 200px; height: 200px; } #loginScene h1 { From 30c1825abd23e3d6a0050b5087dfa620348a4ebf Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 20 Apr 2021 19:54:37 +0200 Subject: [PATCH 07/37] Update syle mobile - update my video side - update user video side - update button video cam and microphone side --- front/dist/resources/style/index.scss | 3 +- front/dist/resources/style/mobile-style.scss | 53 ++++++++++++++++---- front/dist/resources/style/style.css | 18 ------- 3 files changed, 45 insertions(+), 29 deletions(-) diff --git a/front/dist/resources/style/index.scss b/front/dist/resources/style/index.scss index 4d0355b7..7454b991 100644 --- a/front/dist/resources/style/index.scss +++ b/front/dist/resources/style/index.scss @@ -1,2 +1,3 @@ @import "cowebsite.scss"; -@import "style.css"; \ No newline at end of file +@import "style.css"; +@import "mobile-style.scss"; \ No newline at end of file diff --git a/front/dist/resources/style/mobile-style.scss b/front/dist/resources/style/mobile-style.scss index 286735b4..329dc78d 100644 --- a/front/dist/resources/style/mobile-style.scss +++ b/front/dist/resources/style/mobile-style.scss @@ -1,17 +1,50 @@ -@media only screen and (max-width: 600px) { - .sidebar > div { - max-height: 240px; +@media only screen and (max-width: 700px) { + video#myCamVideo { + width: 200px; } - .sidebar > div { - max-height: 240px; + .sidebar { + width: 20%; + min-width: 200px; + position: absolute; + display: block; + right: 0; + height: 80%; + + &> div { + max-height: 120px; + min-width: 200px; + } + + .video-container{ + min-width: 200px; + } } - .sidebar{ - max-width: 200px; + .btn-cam-action div { + bottom: 30px; + + &.btn-micro { + right: 15px; + } + + &.btn-monitor { + right: 171px; + } + + &.btn-video { + right: 95px; + } } - .btn-cam-action div{ - bottom: 50px; + .main-section { + position: absolute; + width: 100%; + min-width: 400px; + + & > div { + z-index: 2; + } } -} \ No newline at end of file +} + diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index ff79245c..492f5fa3 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -338,24 +338,6 @@ body { } -@media (max-aspect-ratio: 1/1) { - .game-overlay { - flex-direction: column; - } - - .sidebar { - flex-direction: row; - align-items: flex-end; - } - - .sidebar > div { - max-width: 21%; - } - - .sidebar > div:hover { - max-width: 25%; - } -} #game { width: 100%; From 20e0a2553e9319877ecd9ea9b5adecb219b0141b Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 20 Apr 2021 21:11:05 +0200 Subject: [PATCH 08/37] Update cowebsite mobile style --- front/dist/resources/style/cowebsite.scss | 48 ------------ front/dist/resources/style/mobile-style.scss | 80 +++++++++++++++++--- 2 files changed, 69 insertions(+), 59 deletions(-) diff --git a/front/dist/resources/style/cowebsite.scss b/front/dist/resources/style/cowebsite.scss index b752728d..515dc0df 100644 --- a/front/dist/resources/style/cowebsite.scss +++ b/front/dist/resources/style/cowebsite.scss @@ -87,51 +87,3 @@ } } } -@media (max-aspect-ratio: 1/1) { - - #main-container { - display: flex; - flex-direction: column-reverse; - } - - - #cowebsite { - left: 0; - top: 0; - width: 100%; - height: 50%; - display: flex; - flex-direction: column-reverse; - - &.loading { - transform: translateY(-90%); - } - &.hidden { - transform: translateY(-100%); - } - - main { - height: 100%; - } - - - aside { - height: 30px; - cursor: ns-resize; - flex-direction: column; - - img { - cursor: ns-resize; - } - } - - .top-right-btn { - &#cowebsite-close { - right: 0px; - } - &#cowebsite-fullscreen { - right: 25px; - } - } - } -} \ No newline at end of file diff --git a/front/dist/resources/style/mobile-style.scss b/front/dist/resources/style/mobile-style.scss index 329dc78d..452e1604 100644 --- a/front/dist/resources/style/mobile-style.scss +++ b/front/dist/resources/style/mobile-style.scss @@ -1,6 +1,6 @@ @media only screen and (max-width: 700px) { video#myCamVideo { - width: 200px; + width: 150px; } .sidebar { @@ -21,19 +21,28 @@ } } - .btn-cam-action div { - bottom: 30px; - - &.btn-micro { - right: 15px; + .btn-cam-action { + &:hover{ + transform: translateY(20px); } + div { + &:hover { + background-color: #666; + } - &.btn-monitor { - right: 171px; - } + bottom: 30px; - &.btn-video { - right: 95px; + &.btn-micro { + right: 0; + } + + &.btn-monitor { + right: 130px; + } + + &.btn-video { + right: 65px; + } } } @@ -48,3 +57,52 @@ } } +@media (max-aspect-ratio: 1/1) { + + #main-container { + display: flex; + flex-direction: column-reverse; + } + + + #cowebsite { + left: 0; + top: 0; + width: 100%; + height: 50%; + display: flex; + flex-direction: column-reverse; + + &.loading { + transform: translateY(-90%); + } + &.hidden { + transform: translateY(-100%); + } + + main { + height: 100%; + } + + + aside { + height: 30px; + cursor: ns-resize; + flex-direction: column; + + img { + cursor: ns-resize; + } + } + + .top-right-btn { + &#cowebsite-close { + right: 0; + } + &#cowebsite-fullscreen { + left: 0; + } + } + } +} + From 78d888ffaf9ba95d905a23776d202088db403c6e Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 21 Apr 2021 00:53:45 +0200 Subject: [PATCH 09/37] Update menu mobile - Add mobile style share modal - Add mobile style settings modal - Add menu mobile style --- front/dist/resources/html/gameMenu.html | 18 ++++++ front/dist/resources/html/gameMenuIcon.html | 8 ++- .../dist/resources/html/gameQualityMenu.html | 8 +-- front/dist/resources/html/gameShare.html | 8 +-- .../resources/html/helpCameraSettings.html | 20 ++----- front/dist/resources/html/loginScene.html | 23 +++++--- .../Phaser/Menu/HelpCameraSettingsScene.ts | 57 ++++++++++++++++--- front/src/Phaser/Menu/MenuScene.ts | 2 +- 8 files changed, 102 insertions(+), 42 deletions(-) diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html index ce740ec5..399cf349 100644 --- a/front/dist/resources/html/gameMenu.html +++ b/front/dist/resources/html/gameMenu.html @@ -1,4 +1,7 @@