added Storage and ControlsSettings

Signed-off-by: Pascal Syma <pascal@syma.dev>
2020-06-04 17:42:23 +02:00
parent 7c4d08cf8f
commit 07e08ba4f6
7 changed files with 262 additions and 45 deletions
@@ -0,0 +1,155 @@
+/*
+ * Copyright (c) 2020. Antonio Martinez Casadesus and Pascal Syma.
+ * All rights reserved.
+ */
+
+import Storage from "../Storage";
+
+export default class ControlsSettings extends Phaser.Scene {
+
+    constructor() {
+        super({
+            key: "ControlsSettings",
+            pixelArt: true
+        });
+    }
+
+    create() {
+        this.controls = Storage.get().controls;
+
+        console.log(this.controls);
+
+        let gridTable = this.rexUI.add.gridTable({
+                x: this.cameras.main.centerX,
+                y: this.cameras.main.centerY,
+                height: this.cameras.main.height,
+                width: this.cameras.main.width,
+
+                scrollMode: 0,
+                background: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, 0x7777ff),
+
+                table: {
+                    cellHeight: 80,
+                    columns: 2,
+                    mask: {
+                        padding: 2,
+                    },
+
+                    reuseCellContainer: true
+                },
+
+                slider: {
+                    track: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, 0x777777),
+                    thumb: this.rexUI.add.roundRectangle(0, 0, 0, 0, 13, 0xcccccc)
+                },
+
+                header: this.rexUI.add.label({
+                    height: 40,
+                    orientation: 0,
+                    background: this.rexUI.add.roundRectangle(0, 0, 20, 20, 0, 0x777777),
+                    text: this.add.text(0, 0, 'Controls')
+                }),
+
+                space: {
+                    left: 10,
+                    right: 10,
+                    top: 10,
+                    bottom: 10,
+
+                    table: 10,
+                    header: 10,
+                    footer: 10,
+                },
+
+                createCellContainerCallback: (cell, cellContainer) => {
+                    let width = cell.width,
+                        height = cell.height,
+                        item = cell.item,
+                        index = cell.index;
+
+                    if (cellContainer === null) {
+                        cellContainer = this.rexUI.add.label({
+                            width: width,
+                            height: height,
+
+                            orientation: 0,
+                            background: this.rexUI.add.roundRectangle(0, 0, 20, 20, 0).setStrokeStyle(2, 0x777777),
+                            icon: undefined,
+                            text: this.add.text(0, 0, ''),
+                            space: {
+                                icon: 10,
+                                left: 15,
+                                top: 0
+                            },
+                        });
+
+                    }
+
+                    cellContainer.setMinSize(width, height);
+                    cellContainer.getElement('text').setText(item[1].name + ": < " + this.getKeyById(item[1].bind) + " >");
+                    // cellContainer.getElement('icon').setFillStyle(0xffffff);
+                    cellContainer.getElement('background').setStrokeStyle(2, 0x777777).setDepth(0);
+
+                    cellContainer.data = item;
+
+                    return cellContainer;
+                },
+
+                items: Object.entries(this.controls),
+            }).layout()
+            // .drawBounds(this.add.graphics(), 0xff0000)
+        ;
+
+        gridTable
+            .on('cell.up', (cell, index, p) => {
+                if (this.listen)
+                    return;
+
+                this.listen = cell.data[0];
+
+                cell.getElement('background')
+                    .setStrokeStyle(2, 0xff0000)
+                    .setDepth(1);
+
+                cell.getElement('text').setText(cell.data[1].name + ": < ??? >");
+            })
+            .on('cell.over', (cell, index, p) => {
+                cell.getElement('background')
+                    .setStrokeStyle(2, 0xcccccc)
+                    .setDepth(1);
+            })
+            .on('cell.out', (cell, index, p) => {
+                cell.getElement('background')
+                    .setStrokeStyle(2, 0x777777)
+                    .setDepth(0);
+            });
+
+
+        this.input.keyboard.on('keydown', e => {
+            if (this.listen === undefined)
+                return;
+
+            this.controls[this.listen].bind = e.keyCode;
+
+            let config = Storage.get();
+
+            config.controls = this.controls;
+
+            Storage.set(config);
+
+            this.controls = Storage.get().controls;
+
+            gridTable
+                .setItems(Object.entries(this.controls))
+                .scrollToBottom();
+
+            this.listen = undefined;
+        });
+
+
+    }
+
+    getKeyById(id) {
+        return Object.keys(Phaser.Input.Keyboard.KeyCodes).find(k => Phaser.Input.Keyboard.KeyCodes[k] === id);
+    }
+}