diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html index 0c39d1e3..1c806a6f 100644 --- a/front/dist/resources/html/CustomCharacterScene.html +++ b/front/dist/resources/html/CustomCharacterScene.html @@ -45,10 +45,9 @@ } #customizeScene section.action { text-align: center; - position: absolute; + position: sticky; bottom: 0; top: 100%; - width: 100%; } #customizeScene section.action.action-move { top: 55%; @@ -95,21 +94,18 @@ #customizeScene section input#customizeSceneLink{ background-color: #a1a3a3; } - #customizeScene section img{ - width: 160px; - margin: 20px 0; - } #customizeScene section button.customizeSceneButton{ position: absolute; margin: 0; - width: 25px; top: -8vh; + font-size: 10px; + padding: 2px 4px; } #customizeScene section button.customizeSceneButton#customizeSceneButtonLeft{ - left: 1vw; + left: 0vw; } #customizeScene section button.customizeSceneButton#customizeSceneButtonRight{ - right: 1vw; + right: 0vw; } #customizeScene section button.customizeSceneButton#customizeSceneButtonUp{ left: calc(2vw + 40px); @@ -121,6 +117,16 @@ transform: rotate(90deg); margin-top: 20px; } + #customizeScene section.action img{ + width: 8px; + height: 8px; + } + #customizeScene section.action a#customizeSceneFormBack img{ + margin-top: -2px; + } + #customizeScene section.action button#customizeSceneFormSubmit img{ + transform: rotate(180deg); + } @media only screen and (max-width: 600px) { #customizeScene { max-width: 160px; @@ -147,7 +153,7 @@ -->
- Back - + Back +
diff --git a/front/dist/resources/style/cowebsite-mobile.scss b/front/dist/resources/style/cowebsite-mobile.scss new file mode 100644 index 00000000..85b41511 --- /dev/null +++ b/front/dist/resources/style/cowebsite-mobile.scss @@ -0,0 +1,49 @@ +@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; + } + } + } + } + \ No newline at end of file diff --git a/front/dist/resources/style/index.scss b/front/dist/resources/style/index.scss index 7454b991..67e85c5b 100644 --- a/front/dist/resources/style/index.scss +++ b/front/dist/resources/style/index.scss @@ -1,3 +1,4 @@ @import "cowebsite.scss"; +@import "cowebsite-mobile.scss"; @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 e48f152d..d9ed4b2e 100644 --- a/front/dist/resources/style/mobile-style.scss +++ b/front/dist/resources/style/mobile-style.scss @@ -57,53 +57,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: 0; - } - &#cowebsite-fullscreen { - left: 0; - } - } - } -} - diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index f5bec168..8e74b182 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -129,7 +129,7 @@ export class CustomizeScene extends AbstractCharacterScene { if(index === -1 && this.activeRow === 5){ const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement; - button.innerText = 'Next'; + button.innerHTML = `Next `; } if(index === 1 && this.activeRow === 4){ @@ -137,6 +137,16 @@ export class CustomizeScene extends AbstractCharacterScene { button.innerText = 'Finish'; } + if(index === -1 && this.activeRow === 1){ + const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement; + button.innerText = `Back`; + } + + if(index === 1 && this.activeRow === 0){ + const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement; + button.innerHTML = `Back `; + } + this.activeRow += index; if (this.activeRow < 0) { this.activeRow = 0 @@ -306,37 +316,4 @@ export class CustomizeScene extends AbstractCharacterScene { this.scene.sleep(CustomizeSceneName); this.scene.run(SelectCharacterSceneName); } - - /** - * TODO fix me and mutualize code - */ - defineSetupPosition() : {playerX: number, playerY: number, playerScale: number, playserOpactity: number, playerVisible: boolean}{ - throw new Error('defineSetupPosition cannot be used'); - return {playerX: 0, playerY: 0, playerScale: 0, playserOpactity: 0, playerVisible: false}; - } - - /** - * TODO fix me and mutualize code - */ - nextSceneToCameraScene(): void { - throw new Error('nextSceneToCameraScene cannot be used in this scene'); - } - - /** - * TODO fix me and mutualize code - */ - nextSceneToCustomizeScene(): void { - throw new Error('nextSceneToCustomizeScene cannot be used in this scene'); - } - - /** - * TODO fix me and mutualize code - * Returns pixel position by on column and row number - */ - getCharacterPosition(): [number, number] { - return [ - this.game.renderer.width / 2, - this.game.renderer.height / 2 - ]; - } }