Allow clicking on variants to select them
This commit is contained in:
parent
8416562016
commit
3a846ab3c9
|
@ -119,6 +119,9 @@
|
||||||
@include S(grid-gap, 5px);
|
@include S(grid-gap, 5px);
|
||||||
|
|
||||||
.variant {
|
.variant {
|
||||||
|
pointer-events: all;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
grid-row: 2 / 3;
|
grid-row: 2 / 3;
|
||||||
@include S(border-radius, $globalBorderRadius);
|
@include S(border-radius, $globalBorderRadius);
|
||||||
background: rgba($ingameHudBg, 0.3);
|
background: rgba($ingameHudBg, 0.3);
|
||||||
|
@ -130,6 +133,13 @@
|
||||||
@include S(padding, 3px);
|
@include S(padding, 3px);
|
||||||
@include S(grid-gap, 10px);
|
@include S(grid-gap, 10px);
|
||||||
|
|
||||||
|
transition: background-color 0.12s ease-in-out;
|
||||||
|
|
||||||
|
&:hover:not(.active) {
|
||||||
|
background: rgba($colorBlueBright, 0.8);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background-color: rgba($colorBlueBright, 0.8);
|
background-color: rgba($colorBlueBright, 0.8);
|
||||||
|
|
|
@ -5,6 +5,7 @@ export const CHANGELOG = [
|
||||||
entries: [
|
entries: [
|
||||||
"Preparations for the wires update",
|
"Preparations for the wires update",
|
||||||
"Update belt placement performance on huge factories (by Phlosioneer)",
|
"Update belt placement performance on huge factories (by Phlosioneer)",
|
||||||
|
"Allow clicking on variants to select them",
|
||||||
"Add setting (on by default) to store the last used rotation per building instead of globally storing it (by Magos)",
|
"Add setting (on by default) to store the last used rotation per building instead of globally storing it (by Magos)",
|
||||||
"Added chinese (traditional) translation",
|
"Added chinese (traditional) translation",
|
||||||
"Updated translations",
|
"Updated translations",
|
||||||
|
|
|
@ -16,6 +16,7 @@ import { defaultBuildingVariant } from "../../meta_building";
|
||||||
import { THEME } from "../../theme";
|
import { THEME } from "../../theme";
|
||||||
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||||
import { HUDBuildingPlacerLogic } from "./building_placer_logic";
|
import { HUDBuildingPlacerLogic } from "./building_placer_logic";
|
||||||
|
import { ClickDetector } from "../../../core/click_detector";
|
||||||
|
|
||||||
export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
|
export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
|
||||||
/**
|
/**
|
||||||
|
@ -56,6 +57,12 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
|
||||||
this.currentInterpolatedCornerTile = new Vector();
|
this.currentInterpolatedCornerTile = new Vector();
|
||||||
|
|
||||||
this.lockIndicatorSprite = Loader.getSprite("sprites/misc/lock_direction_indicator.png");
|
this.lockIndicatorSprite = Loader.getSprite("sprites/misc/lock_direction_indicator.png");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stores the click detectors for the variants so we can clean them up later
|
||||||
|
* @type {Array<ClickDetector>}
|
||||||
|
*/
|
||||||
|
this.variantClickDetectors = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -98,6 +105,22 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
cleanup() {
|
||||||
|
super.cleanup();
|
||||||
|
this.cleanupVariantClickDetectors();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cleans up all variant click detectors
|
||||||
|
*/
|
||||||
|
cleanupVariantClickDetectors() {
|
||||||
|
for (let i = 0; i < this.variantClickDetectors.length; ++i) {
|
||||||
|
const detector = this.variantClickDetectors[i];
|
||||||
|
detector.cleanup();
|
||||||
|
}
|
||||||
|
this.variantClickDetectors = [];
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Rerenders the variants displayed
|
* Rerenders the variants displayed
|
||||||
*/
|
*/
|
||||||
|
@ -107,6 +130,9 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
|
||||||
|
|
||||||
const metaBuilding = this.currentMetaBuilding.get();
|
const metaBuilding = this.currentMetaBuilding.get();
|
||||||
|
|
||||||
|
// First, clear up all click detectors
|
||||||
|
this.cleanupVariantClickDetectors();
|
||||||
|
|
||||||
if (!metaBuilding) {
|
if (!metaBuilding) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -147,6 +173,12 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
|
||||||
spriteWrapper.setAttribute("data-tile-h", dimensions.y);
|
spriteWrapper.setAttribute("data-tile-h", dimensions.y);
|
||||||
|
|
||||||
spriteWrapper.innerHTML = sprite.getAsHTML(iconSize * dimensions.x, iconSize * dimensions.y);
|
spriteWrapper.innerHTML = sprite.getAsHTML(iconSize * dimensions.x, iconSize * dimensions.y);
|
||||||
|
|
||||||
|
const detector = new ClickDetector(element, {
|
||||||
|
consumeEvents: true,
|
||||||
|
targetOnly: true,
|
||||||
|
});
|
||||||
|
detector.click.add(() => this.currentVariant.set(variant));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue