|
|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
import { BaseHUDPart } from "../base_hud_part";
|
|
|
|
|
import { makeDiv } from "../../../core/utils";
|
|
|
|
|
import { clamp, makeDiv, smoothPulse } from "../../../core/utils";
|
|
|
|
|
import { GameRoot } from "../../root";
|
|
|
|
|
import { MinerComponent } from "../../components/miner";
|
|
|
|
|
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
|
|
|
|
@ -10,6 +10,15 @@ import { enumItemProcessorTypes, ItemProcessorComponent } from "../../components
|
|
|
|
|
import { ShapeItem } from "../../items/shape_item";
|
|
|
|
|
import { WireComponent } from "../../components/wire";
|
|
|
|
|
import { LeverComponent } from "../../components/lever";
|
|
|
|
|
import { DrawParameters } from "../../../core/draw_parameters";
|
|
|
|
|
import { globalConfig } from "../../../core/config";
|
|
|
|
|
import { Vector } from "../../../core/vector";
|
|
|
|
|
import { MetaMinerBuilding } from "../../buildings/miner";
|
|
|
|
|
import { gMetaBuildingRegistry } from "../../../core/global_registries";
|
|
|
|
|
import { MetaBeltBuilding } from "../../buildings/belt";
|
|
|
|
|
import { BeltComponent } from "../../components/belt";
|
|
|
|
|
import { MetaTrashBuilding } from "../../buildings/trash";
|
|
|
|
|
import { SOUNDS } from "../../../platform/sound";
|
|
|
|
|
|
|
|
|
|
// @todo: Make dictionary
|
|
|
|
|
const tutorialsByLevel = [
|
|
|
|
|
@ -24,12 +33,30 @@ const tutorialsByLevel = [
|
|
|
|
|
// 1.2. connect to hub
|
|
|
|
|
{
|
|
|
|
|
id: "1_2_conveyor",
|
|
|
|
|
condition: /** @param {GameRoot} root */ root => root.hubGoals.getCurrentGoalDelivered() === 0,
|
|
|
|
|
condition: /** @param {GameRoot} root */ root => {
|
|
|
|
|
const paths = root.systemMgr.systems.belt.beltPaths;
|
|
|
|
|
const miners = root.entityMgr.getAllWithComponent(MinerComponent);
|
|
|
|
|
for (let i = 0; i < paths.length; i++) {
|
|
|
|
|
const path = paths[i];
|
|
|
|
|
const acceptingEntity = path.computeAcceptingEntityAndSlot().entity;
|
|
|
|
|
if (!acceptingEntity || !acceptingEntity.components.Hub) {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
// Find a miner which delivers to this belt path
|
|
|
|
|
for (let k = 0; k < miners.length; ++k) {
|
|
|
|
|
const miner = miners[k];
|
|
|
|
|
if (miner.components.ItemEjector.slots[0].cachedBeltPath === path) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
// 1.3 wait for completion
|
|
|
|
|
{
|
|
|
|
|
id: "1_3_expand",
|
|
|
|
|
condition: () => true,
|
|
|
|
|
condition: /** @param {GameRoot} root */ root => true,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
// Level 2
|
|
|
|
|
@ -55,11 +82,7 @@ const tutorialsByLevel = [
|
|
|
|
|
// 2.3 place more cutters
|
|
|
|
|
{
|
|
|
|
|
id: "2_3_more_cutters",
|
|
|
|
|
condition: /** @param {GameRoot} root */ root =>
|
|
|
|
|
root.entityMgr
|
|
|
|
|
.getAllWithComponent(ItemProcessorComponent)
|
|
|
|
|
.filter(e => e.components.ItemProcessor.type === enumItemProcessorTypes.cutter).length <
|
|
|
|
|
3,
|
|
|
|
|
condition: /** @param {GameRoot} root */ root => true,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
@ -158,7 +181,7 @@ export class HUDInteractiveTutorial extends BaseHUDPart {
|
|
|
|
|
|
|
|
|
|
onHintChanged(hintId) {
|
|
|
|
|
this.elementDescription.innerHTML = T.ingame.interactiveTutorial.hints[hintId];
|
|
|
|
|
|
|
|
|
|
document.documentElement.setAttribute("data-tutorial-step", hintId);
|
|
|
|
|
const folder = G_WEGAME_VERSION
|
|
|
|
|
? "interactive_tutorial.cn.noinline"
|
|
|
|
|
: "interactive_tutorial.noinline";
|
|
|
|
|
@ -167,6 +190,9 @@ export class HUDInteractiveTutorial extends BaseHUDPart {
|
|
|
|
|
"url('" + cachebust("res/ui/" + folder + "/" + hintId + ".gif") + "')";
|
|
|
|
|
this.element.classList.toggle("animEven");
|
|
|
|
|
this.element.classList.toggle("animOdd");
|
|
|
|
|
if (hintId) {
|
|
|
|
|
this.root.app.sound.playUiSound(SOUNDS.tutorialStep);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
update() {
|
|
|
|
|
@ -187,4 +213,226 @@ export class HUDInteractiveTutorial extends BaseHUDPart {
|
|
|
|
|
this.currentHintId.set(targetHintId);
|
|
|
|
|
this.domAttach.update(!!targetHintId);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
* @param {DrawParameters} parameters
|
|
|
|
|
*/
|
|
|
|
|
draw(parameters) {
|
|
|
|
|
const animation = smoothPulse(this.root.time.now());
|
|
|
|
|
const currentBuilding = this.root.hud.parts.buildingPlacer.currentMetaBuilding.get();
|
|
|
|
|
|
|
|
|
|
if (["1_1_extractor"].includes(this.currentHintId.get())) {
|
|
|
|
|
if (
|
|
|
|
|
currentBuilding &&
|
|
|
|
|
currentBuilding.getId() === gMetaBuildingRegistry.findByClass(MetaMinerBuilding).getId()
|
|
|
|
|
) {
|
|
|
|
|
// Find closest circle patch to hub
|
|
|
|
|
|
|
|
|
|
let closest = null;
|
|
|
|
|
let closestDistance = 1e10;
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i > -globalConfig.mapChunkSize; --i) {
|
|
|
|
|
for (let j = 0; j < globalConfig.mapChunkSize; ++j) {
|
|
|
|
|
const resourceItem = this.root.map.getLowerLayerContentXY(i, j);
|
|
|
|
|
if (
|
|
|
|
|
resourceItem instanceof ShapeItem &&
|
|
|
|
|
resourceItem.definition.getHash() === "CuCuCuCu"
|
|
|
|
|
) {
|
|
|
|
|
let distance = Math.hypot(i, j);
|
|
|
|
|
if (!closest || distance < closestDistance) {
|
|
|
|
|
const tile = new Vector(i, j);
|
|
|
|
|
if (!this.root.map.getTileContent(tile, "regular")) {
|
|
|
|
|
closest = tile;
|
|
|
|
|
closestDistance = distance;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (closest) {
|
|
|
|
|
parameters.context.fillStyle = "rgba(74, 237, 134, " + (0.5 - animation * 0.2) + ")";
|
|
|
|
|
parameters.context.strokeStyle = "rgb(74, 237, 134)";
|
|
|
|
|
parameters.context.lineWidth = 2;
|
|
|
|
|
parameters.context.beginRoundedRect(
|
|
|
|
|
closest.x * globalConfig.tileSize - 2 * animation,
|
|
|
|
|
closest.y * globalConfig.tileSize - 2 * animation,
|
|
|
|
|
globalConfig.tileSize + 4 * animation,
|
|
|
|
|
globalConfig.tileSize + 4 * animation,
|
|
|
|
|
3
|
|
|
|
|
);
|
|
|
|
|
parameters.context.fill();
|
|
|
|
|
parameters.context.stroke();
|
|
|
|
|
parameters.context.globalAlpha = 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.currentHintId.get() === "1_2_conveyor") {
|
|
|
|
|
if (
|
|
|
|
|
currentBuilding &&
|
|
|
|
|
currentBuilding.getId() === gMetaBuildingRegistry.findByClass(MetaBeltBuilding).getId()
|
|
|
|
|
) {
|
|
|
|
|
// Find closest miner
|
|
|
|
|
const miners = this.root.entityMgr.getAllWithComponent(MinerComponent);
|
|
|
|
|
|
|
|
|
|
let closest = null;
|
|
|
|
|
let closestDistance = 1e10;
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < miners.length; i++) {
|
|
|
|
|
const miner = miners[i];
|
|
|
|
|
const distance = miner.components.StaticMapEntity.origin.lengthSquare();
|
|
|
|
|
|
|
|
|
|
if (![0, 90].includes(miner.components.StaticMapEntity.rotation)) {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
if (!closest || distance < closestDistance) {
|
|
|
|
|
closest = miner;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (closest) {
|
|
|
|
|
// draw line from miner to hub -> But respect orientation
|
|
|
|
|
|
|
|
|
|
const staticComp = closest.components.StaticMapEntity;
|
|
|
|
|
|
|
|
|
|
const offset = staticComp.rotation === 0 ? new Vector(0.5, 0) : new Vector(1, 0.5);
|
|
|
|
|
|
|
|
|
|
const anchor =
|
|
|
|
|
staticComp.rotation === 0
|
|
|
|
|
? new Vector(staticComp.origin.x + 0.5, 0.5)
|
|
|
|
|
: new Vector(-0.5, staticComp.origin.y + 0.5);
|
|
|
|
|
|
|
|
|
|
const target = staticComp.rotation === 0 ? new Vector(-2.1, 0.5) : new Vector(-0.5, 2.1);
|
|
|
|
|
|
|
|
|
|
parameters.context.globalAlpha = 0.1 + animation * 0.1;
|
|
|
|
|
parameters.context.strokeStyle = "rgb(74, 237, 134)";
|
|
|
|
|
parameters.context.lineWidth = globalConfig.tileSize / 2;
|
|
|
|
|
parameters.context.beginPath();
|
|
|
|
|
parameters.context.moveTo(
|
|
|
|
|
(staticComp.origin.x + offset.x) * globalConfig.tileSize,
|
|
|
|
|
(staticComp.origin.y + offset.y) * globalConfig.tileSize
|
|
|
|
|
);
|
|
|
|
|
parameters.context.lineTo(
|
|
|
|
|
anchor.x * globalConfig.tileSize,
|
|
|
|
|
anchor.y * globalConfig.tileSize
|
|
|
|
|
);
|
|
|
|
|
parameters.context.lineTo(
|
|
|
|
|
target.x * globalConfig.tileSize,
|
|
|
|
|
target.y * globalConfig.tileSize
|
|
|
|
|
);
|
|
|
|
|
parameters.context.stroke();
|
|
|
|
|
parameters.context.globalAlpha = 1;
|
|
|
|
|
|
|
|
|
|
const arrowSprite = this.root.hud.parts.buildingPlacer.lockIndicatorSprites.regular;
|
|
|
|
|
|
|
|
|
|
let arrows = [];
|
|
|
|
|
|
|
|
|
|
let pos = staticComp.origin.add(offset);
|
|
|
|
|
let delta = anchor.sub(pos).normalize();
|
|
|
|
|
let maxIter = 999;
|
|
|
|
|
|
|
|
|
|
while (pos.distanceSquare(anchor) > 1 && maxIter-- > 0) {
|
|
|
|
|
pos = pos.add(delta);
|
|
|
|
|
arrows.push({
|
|
|
|
|
pos: pos.sub(offset),
|
|
|
|
|
rotation: staticComp.rotation,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pos = anchor.copy();
|
|
|
|
|
delta = target.sub(pos).normalize();
|
|
|
|
|
const localDelta =
|
|
|
|
|
staticComp.rotation === 0 ? new Vector(-1.5, -0.5) : new Vector(-0.5, 0.5);
|
|
|
|
|
while (pos.distanceSquare(target) > 1 && maxIter-- > 0) {
|
|
|
|
|
pos = pos.add(delta);
|
|
|
|
|
arrows.push({
|
|
|
|
|
pos: pos.add(localDelta),
|
|
|
|
|
rotation: 90 - staticComp.rotation,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < arrows.length; i++) {
|
|
|
|
|
const { pos, rotation } = arrows[i];
|
|
|
|
|
const worldPos = pos.toWorldSpaceCenterOfTile();
|
|
|
|
|
const angle = Math.radians(rotation);
|
|
|
|
|
|
|
|
|
|
parameters.context.translate(worldPos.x, worldPos.y);
|
|
|
|
|
parameters.context.rotate(angle);
|
|
|
|
|
parameters.context.drawImage(
|
|
|
|
|
arrowSprite,
|
|
|
|
|
-6,
|
|
|
|
|
-globalConfig.halfTileSize -
|
|
|
|
|
clamp((this.root.time.realtimeNow() * 1.5) % 1.0, 0, 1) *
|
|
|
|
|
1 *
|
|
|
|
|
globalConfig.tileSize +
|
|
|
|
|
globalConfig.halfTileSize -
|
|
|
|
|
6,
|
|
|
|
|
12,
|
|
|
|
|
12
|
|
|
|
|
);
|
|
|
|
|
parameters.context.rotate(-angle);
|
|
|
|
|
parameters.context.translate(-worldPos.x, -worldPos.y);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
parameters.context.fillStyle = "rgb(30, 40, 60)";
|
|
|
|
|
parameters.context.font = "15px GameFont";
|
|
|
|
|
|
|
|
|
|
if (staticComp.rotation === 0) {
|
|
|
|
|
const pos = staticComp.origin.toWorldSpace().subScalars(2, 10);
|
|
|
|
|
parameters.context.translate(pos.x, pos.y);
|
|
|
|
|
parameters.context.rotate(-Math.radians(90));
|
|
|
|
|
parameters.context.fillText(
|
|
|
|
|
T.ingame.interactiveTutorial.hints["1_2_hold_and_drag"],
|
|
|
|
|
0,
|
|
|
|
|
0
|
|
|
|
|
);
|
|
|
|
|
parameters.context.rotate(Math.radians(90));
|
|
|
|
|
parameters.context.translate(-pos.x, -pos.y);
|
|
|
|
|
} else {
|
|
|
|
|
const pos = staticComp.origin.toWorldSpace().addScalars(40, 50);
|
|
|
|
|
parameters.context.fillText(
|
|
|
|
|
T.ingame.interactiveTutorial.hints["1_2_hold_and_drag"],
|
|
|
|
|
pos.x,
|
|
|
|
|
pos.y
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.currentHintId.get() === "2_2_place_trash") {
|
|
|
|
|
// Find cutters
|
|
|
|
|
if (
|
|
|
|
|
currentBuilding &&
|
|
|
|
|
currentBuilding.getId() === gMetaBuildingRegistry.findByClass(MetaTrashBuilding).getId()
|
|
|
|
|
) {
|
|
|
|
|
const entities = this.root.entityMgr.getAllWithComponent(ItemProcessorComponent);
|
|
|
|
|
for (let i = 0; i < entities.length; i++) {
|
|
|
|
|
const entity = entities[i];
|
|
|
|
|
if (entity.components.ItemProcessor.type !== enumItemProcessorTypes.cutter) {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const slot = entity.components.StaticMapEntity.localTileToWorld(
|
|
|
|
|
new Vector(1, -1)
|
|
|
|
|
).toWorldSpace();
|
|
|
|
|
parameters.context.fillStyle = "rgba(74, 237, 134, " + (0.5 - animation * 0.2) + ")";
|
|
|
|
|
parameters.context.strokeStyle = "rgb(74, 237, 134)";
|
|
|
|
|
parameters.context.lineWidth = 2;
|
|
|
|
|
parameters.context.beginRoundedRect(
|
|
|
|
|
slot.x - 2 * animation,
|
|
|
|
|
slot.y - 2 * animation,
|
|
|
|
|
globalConfig.tileSize + 4 * animation,
|
|
|
|
|
globalConfig.tileSize + 4 * animation,
|
|
|
|
|
3
|
|
|
|
|
);
|
|
|
|
|
parameters.context.fill();
|
|
|
|
|
parameters.context.stroke();
|
|
|
|
|
parameters.context.globalAlpha = 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
tobspr
2 years ago
