tobspr
4 years ago
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