parent
2968fe3788
commit
3714a59fca
After Width: | Height: | Size: 634 B |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,5 @@
|
|||||||
|
#state_AboutState {
|
||||||
|
.content {
|
||||||
|
@include PlainText;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,54 @@
|
|||||||
|
#state_KeybindingsState {
|
||||||
|
.content {
|
||||||
|
.topEntries {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
@include S(grid-gap, 5px);
|
||||||
|
@include S(margin-bottom, 10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
display: block;
|
||||||
|
background: #eee;
|
||||||
|
@include S(padding, 4px);
|
||||||
|
@include PlainText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category {
|
||||||
|
.entry {
|
||||||
|
display: grid;
|
||||||
|
@include S(margin-top, 2px);
|
||||||
|
@include S(padding-top, 2px);
|
||||||
|
@include S(grid-gap, 4px);
|
||||||
|
grid-template-columns: 1fr #{D(100px)} auto auto;
|
||||||
|
border-bottom: #{D(1px)} dotted #eee;
|
||||||
|
color: #888c8f;
|
||||||
|
.mapping {
|
||||||
|
color: $colorBlueBright;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
@include S(height, 15px);
|
||||||
|
@include S(width, 15px);
|
||||||
|
@include IncreasedClickArea(0px);
|
||||||
|
background: transparent center center / 40% no-repeat;
|
||||||
|
opacity: 0.9;
|
||||||
|
&.editKeybinding {
|
||||||
|
background-image: uiResource("icons/edit_key.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
&.resetKeybinding {
|
||||||
|
background-image: uiResource("icons/reset_key.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: default;
|
||||||
|
opacity: 0.1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,27 @@
|
|||||||
|
import { BaseHUDPart } from "../base_hud_part";
|
||||||
|
import { DrawParameters } from "../../../core/draw_parameters";
|
||||||
|
|
||||||
|
export class HUDWatermark extends BaseHUDPart {
|
||||||
|
createElements() {}
|
||||||
|
|
||||||
|
initialize() {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {DrawParameters} parameters
|
||||||
|
*/
|
||||||
|
drawOverlays(parameters) {
|
||||||
|
const w = this.root.gameWidth;
|
||||||
|
|
||||||
|
parameters.context.fillStyle = "#f77";
|
||||||
|
parameters.context.font = "50px GameFont";
|
||||||
|
parameters.context.textAlign = "center";
|
||||||
|
parameters.context.fillText("DEMO VERSION", w / 2, 100);
|
||||||
|
|
||||||
|
parameters.context.fillStyle = "#aaaca9";
|
||||||
|
parameters.context.font = "20px GameFont";
|
||||||
|
parameters.context.fillText("Get shapez.io on steam for the full experience!", w / 2, 140);
|
||||||
|
|
||||||
|
parameters.context.textAlign = "left";
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,35 @@
|
|||||||
|
import { TextualGameState } from "../core/textual_game_state";
|
||||||
|
import { SOUNDS } from "../platform/sound";
|
||||||
|
import { T } from "../translations";
|
||||||
|
import { KEYMAPPINGS, getStringForKeyCode } from "../game/key_action_mapper";
|
||||||
|
import { Dialog } from "../core/modal_dialog_elements";
|
||||||
|
|
||||||
|
export class AboutState extends TextualGameState {
|
||||||
|
constructor() {
|
||||||
|
super("AboutState");
|
||||||
|
}
|
||||||
|
|
||||||
|
getStateHeaderTitle() {
|
||||||
|
return T.about.title;
|
||||||
|
}
|
||||||
|
|
||||||
|
getMainContentHTML() {
|
||||||
|
return `
|
||||||
|
This game is open source and developed by <a href="https://github.com/tobspr" target="_blank">Tobias Springer</a> (this is me).
|
||||||
|
<br><br>
|
||||||
|
If you want to contribute, check out <a href="https://github.com/tobspr/shapez.io" target="_blank">shapez.io on github</a>.
|
||||||
|
<br><br>
|
||||||
|
This game wouldn't have been possible without the great discord community arround my games - You should really join the <a href="https://discord.gg/HN7EVzV" target="_blank">discord server</a>!
|
||||||
|
<br><br>
|
||||||
|
The soundtrack was made by <a href="https://soundcloud.com/pettersumelius" target="_blank">Peppsen</a> - He's awesome.
|
||||||
|
<br><br>
|
||||||
|
Finally, huge thanks to my best friend <a href="https://github.com/niklas-dahl" target="_blank">Niklas</a> - Without our factorio sessions this game would never have existed.
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
onEnter() {}
|
||||||
|
|
||||||
|
getDefaultPreviousState() {
|
||||||
|
return "SettingsState";
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,171 @@
|
|||||||
|
import { TextualGameState } from "../core/textual_game_state";
|
||||||
|
import { SOUNDS } from "../platform/sound";
|
||||||
|
import { T } from "../translations";
|
||||||
|
import { KEYMAPPINGS, getStringForKeyCode } from "../game/key_action_mapper";
|
||||||
|
import { Dialog } from "../core/modal_dialog_elements";
|
||||||
|
|
||||||
|
export class KeybindingsState extends TextualGameState {
|
||||||
|
constructor() {
|
||||||
|
super("KeybindingsState");
|
||||||
|
}
|
||||||
|
|
||||||
|
getStateHeaderTitle() {
|
||||||
|
return T.keybindings.title;
|
||||||
|
}
|
||||||
|
|
||||||
|
getMainContentHTML() {
|
||||||
|
return `
|
||||||
|
|
||||||
|
<div class="topEntries">
|
||||||
|
<span class="hint">${T.keybindings.hint}</span>
|
||||||
|
<button class="styledButton resetBindings">${T.keybindings.resetKeybindings}</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="keybindings">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
onEnter() {
|
||||||
|
const keybindingsElem = this.htmlElement.querySelector(".keybindings");
|
||||||
|
|
||||||
|
this.trackClicks(this.htmlElement.querySelector(".resetBindings"), this.resetBindings);
|
||||||
|
|
||||||
|
for (const category in KEYMAPPINGS) {
|
||||||
|
const categoryDiv = document.createElement("div");
|
||||||
|
categoryDiv.classList.add("category");
|
||||||
|
keybindingsElem.appendChild(categoryDiv);
|
||||||
|
|
||||||
|
const labelDiv = document.createElement("strong");
|
||||||
|
labelDiv.innerText = T.keybindings.categoryLabels[category];
|
||||||
|
labelDiv.classList.add("categoryLabel");
|
||||||
|
categoryDiv.appendChild(labelDiv);
|
||||||
|
|
||||||
|
for (const keybindingId in KEYMAPPINGS[category]) {
|
||||||
|
const mapped = KEYMAPPINGS[category][keybindingId];
|
||||||
|
|
||||||
|
const elem = document.createElement("div");
|
||||||
|
elem.classList.add("entry");
|
||||||
|
elem.setAttribute("data-keybinding", keybindingId);
|
||||||
|
categoryDiv.appendChild(elem);
|
||||||
|
|
||||||
|
const title = document.createElement("span");
|
||||||
|
title.classList.add("title");
|
||||||
|
title.innerText = T.keybindings.mappings[keybindingId];
|
||||||
|
elem.appendChild(title);
|
||||||
|
|
||||||
|
const mappingDiv = document.createElement("span");
|
||||||
|
mappingDiv.classList.add("mapping");
|
||||||
|
elem.appendChild(mappingDiv);
|
||||||
|
|
||||||
|
const editBtn = document.createElement("button");
|
||||||
|
editBtn.classList.add("styledButton", "editKeybinding");
|
||||||
|
|
||||||
|
const resetBtn = document.createElement("button");
|
||||||
|
resetBtn.classList.add("styledButton", "resetKeybinding");
|
||||||
|
|
||||||
|
if (mapped.builtin) {
|
||||||
|
editBtn.classList.add("disabled");
|
||||||
|
resetBtn.classList.add("disabled");
|
||||||
|
} else {
|
||||||
|
this.trackClicks(editBtn, () => this.editKeybinding(keybindingId));
|
||||||
|
this.trackClicks(resetBtn, () => this.resetKeybinding(keybindingId));
|
||||||
|
}
|
||||||
|
elem.appendChild(editBtn);
|
||||||
|
elem.appendChild(resetBtn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.updateKeybindings();
|
||||||
|
}
|
||||||
|
|
||||||
|
editKeybinding(id) {
|
||||||
|
const dialog = new Dialog({
|
||||||
|
app: this.app,
|
||||||
|
title: T.dialogs.editKeybinding.title,
|
||||||
|
contentHTML: T.dialogs.editKeybinding.desc,
|
||||||
|
buttons: ["cancel:good"],
|
||||||
|
type: "info",
|
||||||
|
});
|
||||||
|
|
||||||
|
dialog.inputReciever.keydown.add(({ keyCode, shift, alt, event }) => {
|
||||||
|
if (keyCode === 27) {
|
||||||
|
this.dialogs.closeDialog(dialog);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
// Enter
|
||||||
|
keyCode === 13 ||
|
||||||
|
// TAB
|
||||||
|
keyCode === 9
|
||||||
|
) {
|
||||||
|
// Ignore builtins
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.app.settings.updateKeybindingOverride(id, keyCode);
|
||||||
|
|
||||||
|
this.dialogs.closeDialog(dialog);
|
||||||
|
this.updateKeybindings();
|
||||||
|
});
|
||||||
|
|
||||||
|
dialog.inputReciever.backButton.add(() => {});
|
||||||
|
|
||||||
|
this.dialogs.internalShowDialog(dialog);
|
||||||
|
this.app.sound.playUiSound(SOUNDS.dialogOk);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateKeybindings() {
|
||||||
|
const overrides = this.app.settings.getKeybindingOverrides();
|
||||||
|
for (const category in KEYMAPPINGS) {
|
||||||
|
for (const keybindingId in KEYMAPPINGS[category]) {
|
||||||
|
const mapped = KEYMAPPINGS[category][keybindingId];
|
||||||
|
|
||||||
|
const container = this.htmlElement.querySelector("[data-keybinding='" + keybindingId + "']");
|
||||||
|
assert(container, "Container for keybinding not found: " + keybindingId);
|
||||||
|
|
||||||
|
let keyCode = mapped.keyCode;
|
||||||
|
if (overrides[keybindingId]) {
|
||||||
|
keyCode = overrides[keybindingId];
|
||||||
|
}
|
||||||
|
|
||||||
|
const mappingDiv = container.querySelector(".mapping");
|
||||||
|
mappingDiv.innerHTML = getStringForKeyCode(keyCode);
|
||||||
|
mappingDiv.classList.toggle("changed", !!overrides[keybindingId]);
|
||||||
|
|
||||||
|
const resetBtn = container.querySelector("button.resetKeybinding");
|
||||||
|
resetBtn.classList.toggle("disabled", mapped.builtin || !overrides[keybindingId]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
resetKeybinding(id) {
|
||||||
|
this.app.settings.resetKeybindingOverride(id);
|
||||||
|
this.updateKeybindings();
|
||||||
|
}
|
||||||
|
|
||||||
|
resetBindings() {
|
||||||
|
const { reset } = this.dialogs.showWarning(
|
||||||
|
T.dialogs.resetKeybindingsConfirmation.title,
|
||||||
|
T.dialogs.resetKeybindingsConfirmation.desc,
|
||||||
|
["cancel:good", "reset:bad"]
|
||||||
|
);
|
||||||
|
|
||||||
|
reset.add(() => {
|
||||||
|
this.app.settings.resetKeybindingOverrides();
|
||||||
|
this.updateKeybindings();
|
||||||
|
|
||||||
|
this.dialogs.showInfo(T.dialogs.keybindingsResetOk.title, T.dialogs.keybindingsResetOk.desc);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getDefaultPreviousState() {
|
||||||
|
return "SettingsState";
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue