24Play-Mykyta-Slobodianiuk
321 lines
15 KiB
TypeScript
321 lines
15 KiB
TypeScript
import { Sprite, SpriteMaterial, Texture, TextureLoader, SRGBColorSpace, Vector3 } from "three";
|
||
import * as TWEEN from "@tweenjs/tween.js";
|
||
import { CameraC_internal } from "@hitplay/playable_template";
|
||
import { ThreeC } from "./ThreeC";
|
||
import { TestSceneC } from "./TestSceneC"; // for groundY (ground level)
|
||
import { GameEvents } from "../core/GameEvents";
|
||
import { GameLoop } from "../core/GameLoop";
|
||
import { images } from "../resources/resources";
|
||
import { worldToScreen } from "../utils/screen";
|
||
|
||
// Tunables — tweak here
|
||
const PIECES_MIN = 3; // min pieces per drop
|
||
const PIECES_MAX = 6; // max pieces per drop
|
||
const SCATTER_MIN = 0.6; // near landing radius
|
||
const SCATTER_MAX = 1.4; // far landing radius (wider scatter)
|
||
const ANGLE_JITTER = 0.3; // fraction of the sector used for jitter (smaller = more even, fewer overlaps)
|
||
const PIECE_SIZE = 0.6; // size of the falling loot (bigger than UI → shrinks in flight)
|
||
|
||
const ARC_HEIGHT = 1.2; // height of the first (main) flight — the tallest hop
|
||
const FLIGHT_MS = 520; // duration of the first flight
|
||
const BOUNCES = 2; // how many bounces after landing
|
||
const BOUNCE_HEIGHT = 0.4; // each bounce = this fraction of the previous height
|
||
const BOUNCE_TIME = 0.6; // each bounce is shorter in time
|
||
const BOUNCE_FORWARD = 0.5; // each bounce covers this fraction of the previous horizontal step
|
||
const FLIGHT_STRETCH = 0.22; // vertical stretch in flight (softer = smoother, less rubbery)
|
||
const LAND_SQUASH = 0.72; // squash on the final landing (gentler)
|
||
const LAND_POP_MS = 180; // duration of the final "pop"
|
||
|
||
// Collect (#8): when/where the wood flies to the UI.
|
||
const COLLECT_LEAD_MS = 170; // start the collect this long BEFORE the bounces finish,
|
||
// so the shrink+flight flow out of the last bounce
|
||
const COLLECT_STAGGER_MS = 70; // extra per-piece delay so they stream in, not all at once
|
||
const UI_ICON_SIZE = 28; // wood arrival size (px) — about the wood plank on the panel
|
||
const UI_WOOD_X_FRAC = 0.82; // where the wood art sits across the panel (right-side plank)
|
||
const FLY_MS = 950; // flight duration — slower, calmer travel to the UI (size tracks it)
|
||
const FLY_ARC_PX = 90; // how high the flight bows upward (curved path, not a straight line)
|
||
const BLINK_MS = 120; // ramp-up of the white glint
|
||
|
||
const _spriteTop = new Vector3(); // scratch: a sprite's top point, for measuring its screen size
|
||
|
||
export class LootC {
|
||
static pieces: Sprite[] = [];
|
||
static balance = 0; // collected wood the player can spend
|
||
private static texture: Texture | null = null;
|
||
private static uiIcon: HTMLImageElement | null = null;
|
||
private static countEl: HTMLElement | null = null; // the "×N" label next to the icon
|
||
// Our tween group, pumped each frame (tween.js v25 needs an explicit group).
|
||
private static tweens = new TWEEN.Group();
|
||
|
||
static init() {
|
||
this.texture = new TextureLoader().load(images.woodIconUrl);
|
||
this.texture.colorSpace = SRGBColorSpace; // correct color
|
||
|
||
// The wood icon/count live in the HUD (built by HudC). We just reference
|
||
// them: read the icon's screen position as the fly target, write the count.
|
||
this.uiIcon = document.getElementById("wood-ui") as HTMLImageElement | null;
|
||
this.countEl = document.getElementById("wood-count");
|
||
this.renderCount();
|
||
|
||
// Listen for loot spawns (from crate breaks or state changes)
|
||
GameEvents.onLootSpawn.addDelegate(({ position, count }) => this.spawn(position, count));
|
||
|
||
// ⚠️ Key: pump our group every frame, otherwise the tweens don't advance.
|
||
GameLoop.register(() => this.tweens.update());
|
||
}
|
||
|
||
/** Current spendable wood. */
|
||
static getBalance(): number {
|
||
return this.balance;
|
||
}
|
||
|
||
/** Spend up to `amount` wood; returns how much was actually taken (clamped to balance). */
|
||
static spend(amount: number): number {
|
||
const taken = Math.min(amount, this.balance);
|
||
this.balance -= taken;
|
||
this.renderCount();
|
||
if (taken > 0) {
|
||
GameEvents.onWoodSpent.Invoke({ amount: taken, balance: this.balance });
|
||
}
|
||
return taken;
|
||
}
|
||
|
||
/** Screen-pixel center of the UI wood icon (used as a fly source/target). */
|
||
static uiIconScreenCenter(): { x: number; y: number } {
|
||
return this.uiIconCenter();
|
||
}
|
||
|
||
private static renderCount() {
|
||
if (this.countEl) this.countEl.textContent = `${this.balance}`;
|
||
}
|
||
|
||
/** Spawn loot at a point. If count is omitted → random PIECES_MIN..PIECES_MAX. */
|
||
static spawn(origin: Vector3, count?: number) {
|
||
const pieceCount = count ?? (PIECES_MIN + Math.floor(Math.random() * (PIECES_MAX - PIECES_MIN + 1)));
|
||
const sectorAngle = (Math.PI * 2) / pieceCount; // each piece gets its own slice of the circle
|
||
|
||
for (let i = 0; i < pieceCount; i++) {
|
||
const piece = this.createPiece();
|
||
piece.position.copy(origin);
|
||
|
||
// Even sector + a little jitter → pieces spread out and don't clump.
|
||
const angle = i * sectorAngle + (Math.random() - 0.5) * sectorAngle * ANGLE_JITTER;
|
||
const radius = SCATTER_MIN + Math.random() * (SCATTER_MAX - SCATTER_MIN);
|
||
const landing = new Vector3(
|
||
origin.x + Math.cos(angle) * radius,
|
||
TestSceneC.groundY + PIECE_SIZE / 2, // sprite center above ground → its bottom touches the ground
|
||
origin.z + Math.sin(angle) * radius,
|
||
);
|
||
|
||
this.animatePiece(piece, origin.clone(), landing, i);
|
||
this.pieces.push(piece);
|
||
}
|
||
}
|
||
|
||
/** Flat piece: a Sprite (billboard — always faces the camera) with the wood texture. */
|
||
private static createPiece(): Sprite {
|
||
const material = new SpriteMaterial({ map: this.texture, transparent: true });
|
||
const piece = new Sprite(material);
|
||
piece.scale.set(PIECE_SIZE, PIECE_SIZE, 1);
|
||
ThreeC.addToScene(piece);
|
||
return piece;
|
||
}
|
||
|
||
/** A piece flies in an arc, bounces a couple times, then pops on landing. */
|
||
private static animatePiece(piece: Sprite, from: Vector3, to: Vector3, index = 0) {
|
||
const restY = to.y; // sprite center at rest
|
||
|
||
// One hop: a parabolic arc from (fromX,fromZ) to (toX,toZ), stretched while
|
||
// moving fast (the "squash & stretch" that sells the speed).
|
||
const hop = (fromX: number, fromZ: number, toX: number, toZ: number, peakHeight: number, durationMs: number) =>
|
||
new TWEEN.Tween({ t: 0 }, this.tweens)
|
||
.to({ t: 1 }, durationMs)
|
||
.easing(TWEEN.Easing.Linear.None)
|
||
.onUpdate(({ t }) => {
|
||
piece.position.x = fromX + (toX - fromX) * t;
|
||
piece.position.z = fromZ + (toZ - fromZ) * t;
|
||
piece.position.y = restY + peakHeight * 4 * t * (1 - t); // parabolic arc
|
||
// |1-2t|: fast on the way up/down → stretch; at the peak → normal.
|
||
// Scale the stretch by hop height (small bounces stretch less).
|
||
const stretch = 1 + FLIGHT_STRETCH * (peakHeight / ARC_HEIGHT) * Math.abs(1 - 2 * t);
|
||
piece.scale.set(PIECE_SIZE / stretch, PIECE_SIZE * stretch, 1);
|
||
});
|
||
|
||
// Horizontal throw direction (target = the final resting spot).
|
||
const deltaX = to.x - from.x, deltaZ = to.z - from.z;
|
||
const totalDist = Math.hypot(deltaX, deltaZ) || 1e-4;
|
||
const dirX = deltaX / totalDist, dirZ = deltaZ / totalDist;
|
||
|
||
// Share the horizontal distance across the flight + bounces (so the piece
|
||
// also moves forward on each bounce, not just up). Each hop covers
|
||
// BOUNCE_FORWARD× the previous one, so the steps form a geometric series
|
||
// whose sum we divide the total distance by to get the first step.
|
||
const hopCount = BOUNCES + 1;
|
||
const forwardSum = (1 - Math.pow(BOUNCE_FORWARD, hopCount)) / (1 - BOUNCE_FORWARD);
|
||
let stepDist = totalDist / forwardSum;
|
||
let curX = from.x, curZ = from.z;
|
||
let peakHeight = ARC_HEIGHT, durationMs = FLIGHT_MS;
|
||
let firstHop: TWEEN.Tween<{ t: number }> | null = null;
|
||
let prevHop: TWEEN.Tween<{ t: number }> | null = null;
|
||
const allTweens: TWEEN.Tween<any>[] = []; // every hop/pop tween (so we can stop them early)
|
||
let bouncesMs = 0; // total duration of all the hop arcs
|
||
|
||
for (let i = 0; i < hopCount; i++) {
|
||
const nextX = curX + dirX * stepDist, nextZ = curZ + dirZ * stepDist;
|
||
const hopTween = hop(curX, curZ, nextX, nextZ, peakHeight, durationMs);
|
||
allTweens.push(hopTween);
|
||
if (!firstHop) firstHop = hopTween; else prevHop!.chain(hopTween);
|
||
prevHop = hopTween;
|
||
bouncesMs += durationMs;
|
||
curX = nextX; curZ = nextZ;
|
||
stepDist *= BOUNCE_FORWARD; peakHeight *= BOUNCE_HEIGHT; durationMs *= BOUNCE_TIME;
|
||
}
|
||
|
||
// Landing pop: squash on the ground, then spring back. Only seen if the piece
|
||
// somehow isn't collected first (the collect normally lifts off before this).
|
||
const groundY = restY - PIECE_SIZE / 2;
|
||
const pop = new TWEEN.Tween({ t: 0 }, this.tweens)
|
||
.to({ t: 1 }, LAND_POP_MS)
|
||
.easing(TWEEN.Easing.Back.Out)
|
||
.onUpdate(({ t }) => {
|
||
const squash = LAND_SQUASH + (1 - LAND_SQUASH) * t; // 0.72 → 1 (with a slight overshoot)
|
||
piece.scale.set(PIECE_SIZE / squash, PIECE_SIZE * squash, 1);
|
||
piece.position.y = groundY + (PIECE_SIZE * squash) / 2; // bottom stays on the ground
|
||
});
|
||
allTweens.push(pop);
|
||
prevHop!.chain(pop);
|
||
|
||
firstHop!.start();
|
||
|
||
// Lift off into the UI a bit BEFORE the bounces finish, so the shrink + flight
|
||
// flow straight out of the last bounce (no "settle, pause, then fly"). Stop the
|
||
// remaining bounce/pop on this piece and hand straight over to the collect.
|
||
const liftOffDelayMs = Math.max(FLIGHT_MS * 0.7, bouncesMs - COLLECT_LEAD_MS) + index * COLLECT_STAGGER_MS;
|
||
setTimeout(() => {
|
||
allTweens.forEach(tween => tween.stop());
|
||
this.collect(piece);
|
||
}, liftOffDelayMs);
|
||
}
|
||
|
||
/**
|
||
* Collect: swap the 3D sprite for an HTML image at the same screen spot, then
|
||
* shrink it and fly it into the top-right UI counter.
|
||
*/
|
||
private static collect(piece: Sprite) {
|
||
if (!this.pieces.includes(piece)) return; // already collected/removed
|
||
const cam = CameraC_internal.camera;
|
||
const canvas = document.querySelector("canvas");
|
||
if (!cam || !canvas) return;
|
||
const rect = canvas.getBoundingClientRect();
|
||
|
||
// Sprite center + size in screen pixels.
|
||
const center = worldToScreen(piece.position, cam, rect);
|
||
_spriteTop.copy(piece.position); _spriteTop.y += piece.scale.y / 2;
|
||
const sizePx = Math.max(8, Math.abs(center.y - worldToScreen(_spriteTop, cam, rect).y) * 2);
|
||
|
||
// Drop the 3D sprite; the HTML image takes over from the same spot.
|
||
this.remove(piece);
|
||
|
||
const flier = document.createElement("img");
|
||
flier.src = images.woodIconUrl;
|
||
flier.style.cssText =
|
||
`position:fixed; left:0; top:0; width:${sizePx}px; height:${sizePx}px;` +
|
||
// above #hud (z-index 9999) so the wood clearly flies on top of, and into, the icon
|
||
`z-index:10000; pointer-events:none; transform:translate(-50%,-50%); will-change:left,top,width,height;`;
|
||
document.body.appendChild(flier);
|
||
|
||
// White "glint" copy that rides on top of the flier and fades out as it moves.
|
||
const flash = document.createElement("img");
|
||
flash.src = images.woodIconUrl;
|
||
flash.style.cssText = flier.style.cssText;
|
||
flash.style.filter = "brightness(0) invert(1)"; // solid white silhouette
|
||
flash.style.zIndex = "10001";
|
||
document.body.appendChild(flash);
|
||
|
||
const target = this.uiIconCenter();
|
||
|
||
// Curved flight path (quadratic Bézier): start → a lifted control point → UI.
|
||
// The upward bow makes the wood swoop in an arc instead of a flat diagonal,
|
||
// which reads much smoother.
|
||
const startX = center.x, startY = center.y;
|
||
const endX = target.x, endY = target.y;
|
||
const ctrlX = (startX + endX) / 2;
|
||
const ctrlY = Math.min(startY, endY) - FLY_ARC_PX;
|
||
|
||
// Shared animation state: progress along the path (0→1), current size, and
|
||
// the white glint's opacity. All three tweens below mutate this one object.
|
||
const anim = { progress: 0, size: sizePx, glow: 0 };
|
||
const place = (el: HTMLElement) => {
|
||
const inv = 1 - anim.progress; // (1−t) term of the Bézier
|
||
const x = inv * inv * startX + 2 * inv * anim.progress * ctrlX + anim.progress * anim.progress * endX;
|
||
const y = inv * inv * startY + 2 * inv * anim.progress * ctrlY + anim.progress * anim.progress * endY;
|
||
el.style.left = `${x}px`;
|
||
el.style.top = `${y}px`;
|
||
el.style.width = `${anim.size}px`;
|
||
el.style.height = `${anim.size}px`;
|
||
};
|
||
const apply = () => { place(flier); place(flash); flash.style.opacity = `${anim.glow}`; };
|
||
apply();
|
||
|
||
// Flight along the curve — owns the cleanup. Ease in AND out so it starts and
|
||
// arrives gently.
|
||
const fly = new TWEEN.Tween(anim, this.tweens)
|
||
.to({ progress: 1 }, FLY_MS)
|
||
.easing(TWEEN.Easing.Quadratic.InOut)
|
||
.onUpdate(apply)
|
||
.onComplete(() => {
|
||
flier.remove();
|
||
flash.remove();
|
||
this.balance++;
|
||
this.renderCount();
|
||
this.pulseUiIcon();
|
||
GameEvents.onWoodCollected.Invoke({ amount: 1, balance: this.balance });
|
||
});
|
||
// Shrink — SAME duration as the flight, so the two start AND finish together
|
||
// (no "shrink first"); Sinusoidal makes the size change extra smooth.
|
||
const shrink = new TWEEN.Tween(anim, this.tweens)
|
||
.to({ size: UI_ICON_SIZE }, FLY_MS)
|
||
.easing(TWEEN.Easing.Sinusoidal.InOut)
|
||
.onUpdate(apply);
|
||
// Blink — a quick glint that overlaps the start of the motion.
|
||
const flashIn = new TWEEN.Tween(anim, this.tweens)
|
||
.to({ glow: 1 }, BLINK_MS)
|
||
.easing(TWEEN.Easing.Quadratic.Out)
|
||
.onUpdate(apply);
|
||
const flashOut = new TWEEN.Tween(anim, this.tweens)
|
||
.to({ glow: 0 }, BLINK_MS * 1.6)
|
||
.easing(TWEEN.Easing.Quadratic.In)
|
||
.onUpdate(apply);
|
||
flashIn.chain(flashOut);
|
||
|
||
// Kick them off together → one blended, fluid collect.
|
||
fly.start();
|
||
shrink.start();
|
||
flashIn.start();
|
||
}
|
||
|
||
private static uiIconCenter() {
|
||
const r = this.uiIcon?.getBoundingClientRect();
|
||
// Aim at the wood plank on the right of the panel, not the panel's center,
|
||
// so the loot lands on the actual wood art.
|
||
return r ? { x: r.left + r.width * UI_WOOD_X_FRAC, y: r.top + r.height / 2 } : { x: 0, y: 0 };
|
||
}
|
||
|
||
/** A small "pulse" of the UI icon when a piece arrives. */
|
||
private static pulseUiIcon() {
|
||
const el = this.uiIcon;
|
||
if (!el) return;
|
||
el.style.transform = "scale(1.25)";
|
||
setTimeout(() => { if (this.uiIcon) this.uiIcon.style.transform = "scale(1)"; }, 120);
|
||
}
|
||
|
||
/** Remove a piece from the scene and free its material (the texture is shared,
|
||
* so it's loaded once in init() and never disposed per-piece). */
|
||
static remove(piece: Sprite) {
|
||
ThreeC.removeFromScene(piece);
|
||
(piece.material as SpriteMaterial).dispose();
|
||
const i = this.pieces.indexOf(piece);
|
||
if (i >= 0) this.pieces.splice(i, 1);
|
||
}
|
||
}
|