Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

selectCharacterScene and customCharacterScene in svelte

Browse source
This commit is contained in:
GRL 2021-05-31 17:50:14 +02:00
parent 120a488121
commit 4923ce8b83
12 changed files with 249 additions and 391 deletions
Download patch file Download diff file Expand all files Collapse all files

110
front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte Normal file
View file

@ -0,0 +1,110 @@
<script lang="typescript">
import { Game } from "../../Phaser/Game/Game";
import { CustomizeScene } from "../../Phaser/Login/CustomizeScene";
export let game: Game;
const customCharacterScene = game.scene.scenes.find((scene) => scene instanceof CustomizeScene);
let activeRow = customCharacterScene.activeRow;
function selectLeft() {
customCharacterScene.moveCursorHorizontally(-1);
}
function selectRight() {
customCharacterScene.moveCursorHorizontally(1);
}
function selectUp() {
customCharacterScene.moveCursorVertically(-1);
activeRow = customCharacterScene.activeRow;
}
function selectDown() {
customCharacterScene.moveCursorVertically(1);
activeRow = customCharacterScene.activeRow;
}
function previousScene() {
customCharacterScene.backToPreviousScene();
}
function finish() {
customCharacterScene.nextSceneToCamera();
}
</script>
<form class="customCharacterScene">
<section class="text-center">
<h2>Customize your WOKA</h2>
</section>
<section class="action action-move">
<button class="customCharacterSceneButton customCharacterSceneButtonLeft nes-btn" on:click|preventDefault={ selectLeft }> &lt; </button>
<button class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
</section>
<section class="action">
{#if activeRow === 0}
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ previousScene }>Return</button>
{/if}
{#if activeRow !== 0}
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up.png" alt=""/></button>
{/if}
{#if activeRow === 5}
<button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ finish }>Finish</button>
{/if}
{#if activeRow !== 5}
<button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ selectDown }>Next <img src="resources/objects/arrow_down.png" alt=""/></button>
{/if}
</section>
</form>
<style lang="scss">
form.customCharacterScene {
font-family: "Press Start 2P";
pointer-events: auto;
color: #ebeeee;
}
.customCharacterScene button {
font-family: "Press Start 2P";
}
.customCharacterScene section {
margin: 10px;
}
.customCharacterScene section.action {
text-align: center;
margin-top: 55vh;
}
.customCharacterScene section h2 {
font-family: "Press Start 2P";
margin: 1px;
}
.customCharacterScene section.text-center{
text-align: center;
}
.customCharacterScene section button.customCharacterSceneButton{
position: absolute;
top: 33vh;
margin: 0;
}
.customCharacterScene section button.customCharacterSceneFormBack{
color: #292929;
}
.customCharacterScene button.customCharacterSceneButtonLeft{
left: 33vw;
}
.customCharacterScene button.customCharacterSceneButtonRight{
right: 33vw;
}
@media only screen and (max-width: 800px) {
.customCharacterScene button.customCharacterSceneButtonLeft{
left: 10vw;
}
.customCharacterScene button.customCharacterSceneButtonRight{
right: 10vw;
}
}
</style>