156 lines
4.7 KiB
JavaScript
156 lines
4.7 KiB
JavaScript
/*
|
|
* 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);
|
|
}
|
|
}
|