|
|
|
import { BaseHUDPart } from "../base_hud_part";
|
|
|
|
import { makeDiv } from "../../../core/utils";
|
|
|
|
import { getStringForKeyCode } from "../../key_action_mapper";
|
|
|
|
import { TrackedState } from "../../../core/tracked_state";
|
|
|
|
|
|
|
|
export class HUDKeybindingOverlay extends BaseHUDPart {
|
|
|
|
initialize() {
|
|
|
|
this.shiftDownTracker = new TrackedState(this.onShiftStateChanged, this);
|
|
|
|
|
|
|
|
this.root.hud.signals.selectedPlacementBuildingChanged.add(
|
|
|
|
this.onSelectedBuildingForPlacementChanged,
|
|
|
|
this
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
onShiftStateChanged(shiftDown) {
|
|
|
|
this.element.classList.toggle("shiftDown", shiftDown);
|
|
|
|
}
|
|
|
|
|
|
|
|
createElements(parent) {
|
|
|
|
const mapper = this.root.gameState.keyActionMapper;
|
|
|
|
|
|
|
|
const getKeycode = id => {
|
|
|
|
return getStringForKeyCode(mapper.getBinding(id).keyCode);
|
|
|
|
};
|
|
|
|
|
|
|
|
this.element = makeDiv(
|
|
|
|
parent,
|
|
|
|
"ingame_HUD_KeybindingOverlay",
|
|
|
|
[],
|
|
|
|
`
|
|
|
|
<div class="binding">
|
|
|
|
<code class="keybinding">${getKeycode("center_map")}</code>
|
|
|
|
<label>Center</label>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="binding">
|
|
|
|
<code class="keybinding leftMouse"></code><i></i>
|
|
|
|
<code class="keybinding">${getKeycode("map_move_up")}</code>
|
|
|
|
<code class="keybinding">${getKeycode("map_move_left")}</code>
|
|
|
|
<code class="keybinding">${getKeycode("map_move_down")}</code>
|
|
|
|
<code class="keybinding">${getKeycode("map_move_right")}</code>
|
|
|
|
<label>Move</label>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="binding noPlacementOnly">
|
|
|
|
<code class="keybinding rightMouse"></code><i></i>
|
|
|
|
<code class="keybinding shift">ALT</code>+
|
|
|
|
<code class="keybinding leftMouse"></code>
|
|
|
|
<label>Delete</label>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="binding placementOnly">
|
|
|
|
<code class="keybinding rightMouse"></code> <i></i>
|
|
|
|
<code class="keybinding">${getKeycode("building_abort_placement")}</code>
|
|
|
|
<label>Stop placement</label>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="binding placementOnly">
|
|
|
|
<code class="keybinding">${getKeycode("rotate_while_placing")}</code>
|
|
|
|
<label>Rotate Building</label>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="binding placementOnly">
|
|
|
|
<code class="keybinding shift">⇧ SHIFT</code>
|
|
|
|
<label>Place Multiple</label>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="binding placementOnly">
|
|
|
|
<code class="keybinding shift">ALT</code>
|
|
|
|
<label>Reverse orientation</label>
|
|
|
|
</div>
|
|
|
|
`
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
onSelectedBuildingForPlacementChanged(selectedMetaBuilding) {
|
|
|
|
this.element.classList.toggle("placementActive", !!selectedMetaBuilding);
|
|
|
|
}
|
|
|
|
|
|
|
|
update() {
|
|
|
|
this.shiftDownTracker.set(this.root.app.inputMgr.shiftIsDown);
|
|
|
|
}
|
|
|
|
}
|