2021-05-31 17:50:14 +02:00
|
|
|
<script lang="typescript">
|
2021-06-15 18:34:11 +02:00
|
|
|
import type { Game } from "../../Phaser/Game/Game";
|
2021-12-06 16:12:37 +01:00
|
|
|
import { CustomizeScene, CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
|
|
|
|
import { activeRowStore } from "../../Stores/CustomCharacterStore";
|
2022-01-21 17:06:03 +01:00
|
|
|
import LL from "../../i18n/i18n-svelte";
|
2021-05-31 17:50:14 +02:00
|
|
|
|
|
|
|
export let game: Game;
|
|
|
|
|
2021-06-15 18:34:11 +02:00
|
|
|
const customCharacterScene = game.scene.getScene(CustomizeSceneName) as CustomizeScene;
|
2021-05-31 17:50:14 +02:00
|
|
|
|
|
|
|
function selectLeft() {
|
|
|
|
customCharacterScene.moveCursorHorizontally(-1);
|
|
|
|
}
|
|
|
|
|
|
|
|
function selectRight() {
|
|
|
|
customCharacterScene.moveCursorHorizontally(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
function selectUp() {
|
|
|
|
customCharacterScene.moveCursorVertically(-1);
|
|
|
|
}
|
|
|
|
|
|
|
|
function selectDown() {
|
|
|
|
customCharacterScene.moveCursorVertically(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
function previousScene() {
|
|
|
|
customCharacterScene.backToPreviousScene();
|
|
|
|
}
|
|
|
|
|
|
|
|
function finish() {
|
|
|
|
customCharacterScene.nextSceneToCamera();
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<form class="customCharacterScene">
|
|
|
|
<section class="text-center">
|
2022-01-21 17:06:03 +01:00
|
|
|
<h2>{$LL.woka.customWoka.title()}</h2>
|
2021-05-31 17:50:14 +02:00
|
|
|
</section>
|
|
|
|
<section class="action action-move">
|
2021-12-06 16:12:37 +01:00
|
|
|
<button
|
|
|
|
class="customCharacterSceneButton customCharacterSceneButtonLeft nes-btn"
|
|
|
|
on:click|preventDefault={selectLeft}
|
|
|
|
>
|
|
|
|
<
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn"
|
|
|
|
on:click|preventDefault={selectRight}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
</button>
|
2021-05-31 17:50:14 +02:00
|
|
|
</section>
|
|
|
|
<section class="action">
|
2021-06-29 18:39:43 +02:00
|
|
|
{#if $activeRowStore === 0}
|
2021-12-06 16:12:37 +01:00
|
|
|
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={previousScene}
|
2022-01-21 17:06:03 +01:00
|
|
|
>{$LL.woka.customWoka.navigation.return()}</button
|
2021-12-06 16:12:37 +01:00
|
|
|
>
|
2021-05-31 17:50:14 +02:00
|
|
|
{/if}
|
2021-06-29 18:39:43 +02:00
|
|
|
{#if $activeRowStore !== 0}
|
2021-12-06 16:12:37 +01:00
|
|
|
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={selectUp}
|
2022-01-21 17:06:03 +01:00
|
|
|
>{$LL.woka.customWoka.navigation.back()}
|
2021-12-19 16:01:51 +01:00
|
|
|
<img src="resources/objects/arrow_up_black.png" alt="" /></button
|
2021-12-06 16:12:37 +01:00
|
|
|
>
|
2021-05-31 17:50:14 +02:00
|
|
|
{/if}
|
2021-06-29 18:39:43 +02:00
|
|
|
{#if $activeRowStore === 5}
|
2021-12-06 16:12:37 +01:00
|
|
|
<button
|
|
|
|
type="submit"
|
|
|
|
class="customCharacterSceneFormSubmit nes-btn is-primary"
|
2022-01-21 17:06:03 +01:00
|
|
|
on:click|preventDefault={finish}>{$LL.woka.customWoka.navigation.finish()}</button
|
2021-12-06 16:12:37 +01:00
|
|
|
>
|
2021-05-31 17:50:14 +02:00
|
|
|
{/if}
|
2021-06-29 18:39:43 +02:00
|
|
|
{#if $activeRowStore !== 5}
|
2021-12-06 16:12:37 +01:00
|
|
|
<button
|
|
|
|
type="submit"
|
|
|
|
class="customCharacterSceneFormSubmit nes-btn is-primary"
|
2021-12-19 16:01:51 +01:00
|
|
|
on:click|preventDefault={selectDown}
|
2022-01-21 17:06:03 +01:00
|
|
|
>{$LL.woka.customWoka.navigation.next()}
|
2021-12-19 16:01:51 +01:00
|
|
|
<img src="resources/objects/arrow_down.png" alt="" /></button
|
2021-12-06 16:12:37 +01:00
|
|
|
>
|
2021-05-31 17:50:14 +02:00
|
|
|
{/if}
|
|
|
|
</section>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2022-01-05 10:27:40 +01:00
|
|
|
@import "../../../style/breakpoints.scss";
|
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
form.customCharacterScene {
|
2021-06-01 16:29:49 +02:00
|
|
|
font-family: "Press Start 2P";
|
2021-12-06 16:12:37 +01:00
|
|
|
pointer-events: auto;
|
|
|
|
color: #ebeeee;
|
|
|
|
|
|
|
|
section {
|
|
|
|
margin: 10px;
|
|
|
|
|
|
|
|
&.action {
|
|
|
|
text-align: center;
|
|
|
|
margin-top: 55vh;
|
|
|
|
}
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
font-family: "Press Start 2P";
|
|
|
|
margin: 1px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.text-center {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
button.customCharacterSceneButton {
|
|
|
|
position: absolute;
|
|
|
|
top: 33vh;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
button.customCharacterSceneFormBack {
|
|
|
|
color: #292929;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
|
|
|
font-family: "Press Start 2P";
|
|
|
|
|
|
|
|
&.customCharacterSceneButtonLeft {
|
|
|
|
left: 33vw;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.customCharacterSceneButtonRight {
|
|
|
|
right: 33vw;
|
|
|
|
}
|
|
|
|
}
|
2021-06-01 16:29:49 +02:00
|
|
|
}
|
|
|
|
|
2022-01-05 10:27:40 +01:00
|
|
|
@include media-breakpoint-up(md) {
|
2021-12-06 16:12:37 +01:00
|
|
|
form.customCharacterScene button.customCharacterSceneButtonLeft {
|
|
|
|
left: 5vw;
|
|
|
|
}
|
|
|
|
form.customCharacterScene button.customCharacterSceneButtonRight {
|
|
|
|
right: 5vw;
|
|
|
|
}
|
2021-06-01 16:29:49 +02:00
|
|
|
}
|
2021-06-15 18:34:11 +02:00
|
|
|
</style>
|