166 lines
8.8 KiB
TypeScript
166 lines
8.8 KiB
TypeScript
import { tileSample, roundedHex } from '../src/tile-shape.js';
|
|
import { _decorator, Component, Graphics, UITransform, Node, EventTouch, Vec3, Color, JsonAsset, Texture2D, Sprite, SpriteFrame, Rect, Mask } from 'cc';
|
|
import { Game, solveRotations, trace, validateLevel } from '../src/core.js';
|
|
import { layout, hitCell } from '../src/geometry.js';
|
|
import { drawScene } from '../src/renderer.js';
|
|
import { TILE_FRAMES, TILE_ASPECT } from '../src/sprites.js';
|
|
import { LEVELS } from '../src/levels.js';
|
|
const { ccclass, property, requireComponent } = _decorator;
|
|
type Point = { x: number; y: number };
|
|
type PooledSprite = { node: Node; sprite: Sprite; transform: UITransform; mask: Mask };
|
|
|
|
// The static tracks use Graphics; the exact generated textures use SpriteFrames.
|
|
// Arrows use a separate foreground Graphics so they stay above the sprite atlas.
|
|
class CocosPainter {
|
|
private cursor = 0;
|
|
private overlay = false;
|
|
private pool: PooledSprite[] = [];
|
|
private frames: SpriteFrame[] = [];
|
|
constructor(private root: Node, private board: Graphics, private arrows: Graphics, private w: number, private h: number, texture: Texture2D | null) {
|
|
if (texture) this.frames = TILE_FRAMES.map(f => { const frame = new SpriteFrame(); frame.texture = texture; const sample=tileSample(f); frame.rect = new Rect(sample.x, sample.y, sample.w, sample.h); return frame; });
|
|
}
|
|
begin(w: number, h: number) {
|
|
this.w = w; this.h = h; this.cursor = 0; this.overlay = false;
|
|
this.board.clear(); this.arrows.clear(); this.pool.forEach(p => p.node.active = false);
|
|
}
|
|
dispose() { this.frames.forEach(f => f.destroy()); }
|
|
private x(x: number) { return x - this.w / 2; }
|
|
private y(y: number) { return this.h / 2 - y; }
|
|
private color(hex: string) {
|
|
const rgb = parseInt(hex.slice(1,7),16), alpha = hex.length === 9 ? parseInt(hex.slice(7),16) : 255;
|
|
return new Color((rgb >> 16) & 255, (rgb >> 8) & 255, rgb & 255, alpha);
|
|
}
|
|
sprite(index: number, x: number, y: number, radius: number) {
|
|
if (!this.frames[index]) return false;
|
|
if (!this.pool[this.cursor]) {
|
|
const node = new Node('Tile'); node.layer = this.root.layer; node.parent = this.root;
|
|
node.addComponent(UITransform);const mask=node.addComponent(Mask);mask.type=Mask.Type.GRAPHICS_STENCIL;
|
|
const face=new Node('Matte texture');face.layer=node.layer;face.parent=node;
|
|
const transform=face.addComponent(UITransform);const sprite=face.addComponent(Sprite);
|
|
sprite.sizeMode = Sprite.SizeMode.CUSTOM;
|
|
this.pool.push({ node, transform, sprite, mask });
|
|
}
|
|
const p = this.pool[this.cursor++], f = TILE_FRAMES[index], w = radius * 2, h = w * TILE_ASPECT;
|
|
p.node.active = true; p.node.setSiblingIndex(this.cursor - 1);
|
|
p.node.getComponent(UITransform)!.setContentSize(w,h);
|
|
const stencil=p.mask.subComp as Graphics;stencil.clear();const shape=roundedHex(0,0,radius);
|
|
shape.forEach((v:Point,i:number)=>i?stencil.lineTo(v.x,v.y):stencil.moveTo(v.x,v.y));stencil.close();stencil.fill();
|
|
p.sprite.spriteFrame = this.frames[index];
|
|
p.transform.setAnchorPoint(f.anchorX, 1 - f.anchorY); p.transform.setContentSize(w, h);
|
|
p.node.setPosition(this.x(x), this.y(y), 0);
|
|
this.arrows.node.setSiblingIndex(this.root.children.length - 1);
|
|
this.overlay = true; return true;
|
|
}
|
|
polygon(points: Point[], fill: string) {
|
|
const g = this.overlay ? this.arrows : this.board;
|
|
points.forEach((p,i) => i ? g.lineTo(this.x(p.x),this.y(p.y)) : g.moveTo(this.x(p.x),this.y(p.y)));
|
|
g.close(); g.fillColor = this.color(fill); g.fill();
|
|
}
|
|
line(points: Point[], color: string, width: number) {
|
|
if (!points.length) return;
|
|
const g = this.overlay ? this.arrows : this.board;
|
|
points.forEach((p,i) => i ? g.lineTo(this.x(p.x),this.y(p.y)) : g.moveTo(this.x(p.x),this.y(p.y)));
|
|
g.lineWidth = width; g.strokeColor = this.color(color); g.stroke();
|
|
}
|
|
circle(x: number, y: number, r: number, fill: string) {
|
|
this.board.circle(this.x(x),this.y(y),r); this.board.fillColor = this.color(fill); this.board.fill();
|
|
}
|
|
}
|
|
|
|
@ccclass('HexTrailsBoard')
|
|
@requireComponent(UITransform)
|
|
@requireComponent(Graphics)
|
|
export class HexTrailsBoard extends Component {
|
|
@property(JsonAsset) levelAsset: JsonAsset | null = null;
|
|
@property(Texture2D) tileAtlas: Texture2D | null = null;
|
|
@property levelIndex = 0;
|
|
private game: any;
|
|
private viewport: any;
|
|
private elapsed = 0;
|
|
private moving: any = null;
|
|
private rotating: any = null;
|
|
private path: any = null;
|
|
private hintId: string | null = null;
|
|
private painter!: CocosPainter;
|
|
|
|
onLoad() {
|
|
const ui = this.getComponent(UITransform)!;
|
|
ui.setAnchorPoint(0.5,0.5);
|
|
const graphics = this.getComponent(Graphics)!;
|
|
graphics.lineCap = Graphics.LineCap.ROUND; graphics.lineJoin = Graphics.LineJoin.ROUND;
|
|
const arrowNode = new Node('ArrowOverlay'); arrowNode.layer = this.node.layer; arrowNode.parent = this.node;
|
|
arrowNode.addComponent(UITransform);
|
|
const arrowGraphics = arrowNode.addComponent(Graphics);
|
|
this.painter = new CocosPainter(this.node,graphics,arrowGraphics,ui.width,ui.height,this.tileAtlas);
|
|
this.node.on(Node.EventType.TOUCH_END,this.onTouch,this);
|
|
this.node.on(Node.EventType.SIZE_CHANGED,this.redraw,this);
|
|
this.loadLevel(this.levelAsset?.json ?? LEVELS[Math.max(0,Math.min(LEVELS.length-1,this.levelIndex))]);
|
|
}
|
|
onDestroy() {
|
|
this.node.off(Node.EventType.TOUCH_END,this.onTouch,this);
|
|
this.node.off(Node.EventType.SIZE_CHANGED,this.redraw,this);
|
|
this.painter?.dispose();
|
|
}
|
|
loadLevel(level: any) {
|
|
const errors = validateLevel(level); if (errors.length) throw new Error(errors.join('; '));
|
|
this.game = new Game(level); this.moving = null; this.rotating = null; this.path = null; this.hintId = null;
|
|
this.redraw(); this.emitState();
|
|
}
|
|
private onTouch(event: EventTouch) {
|
|
if (!this.game || this.moving || this.rotating) return;
|
|
const ui = this.getComponent(UITransform)!, loc = event.getUILocation();
|
|
const p = ui.convertToNodeSpaceAR(new Vec3(loc.x,loc.y,0));
|
|
const cell = hitCell(this.game.level.cells,this.viewport,p.x+ui.width/2,ui.height/2-p.y);
|
|
if (!cell) return;
|
|
const tile = this.game.tiles.find((t:any) => t.q===cell.q && t.r===cell.r); if (!tile) return;
|
|
const route = this.game.tap(tile.id); this.hintId = null; this.path = null; this.elapsed = 0;
|
|
if (route.status === 'exit') this.moving = { route,progress:0,duration:Math.min(1.7,0.55+route.steps.length*0.085) };
|
|
else if (route.status === 'blocked' || route.status === 'loop') {
|
|
this.path = route;
|
|
if (route.travelPoints) this.moving = { route,progress:0,duration:1.25 };
|
|
this.node.emit('trail-blocked',route);
|
|
}
|
|
this.redraw(); this.emitState();
|
|
}
|
|
rotateLeft() { this.rotate(-1); }
|
|
rotateRight() { this.rotate(1); }
|
|
private rotate(direction: number) {
|
|
if (this.moving || this.rotating) return;
|
|
if (this.game.rotate(direction).status !== 'rotated') return;
|
|
this.path = null; this.hintId = null; this.elapsed = 0;
|
|
this.rotating = { direction,angle:-direction*Math.PI/3 };
|
|
this.redraw(); this.emitState();
|
|
}
|
|
update(dt:number) {
|
|
if (!this.moving && !this.rotating) return;
|
|
this.elapsed += dt;
|
|
if (this.moving) { this.moving.progress = Math.min(1,this.elapsed/this.moving.duration); if (this.moving.progress >= 1) this.moving = null; }
|
|
if (this.rotating) { const t = Math.min(1,this.elapsed/0.42); this.rotating.angle = -this.rotating.direction*Math.PI/3*Math.pow(1-t,3); if (t>=1) this.rotating = null; }
|
|
this.redraw(); if (!this.moving && !this.rotating) this.emitState();
|
|
}
|
|
undo() {
|
|
if (this.moving || this.rotating) return;
|
|
this.game.undo(); this.path = null; this.hintId = null; this.redraw(); this.emitState();
|
|
}
|
|
restart() { this.loadLevel(this.game.initialLevel); }
|
|
hint() {
|
|
if (this.moving || this.rotating) return;
|
|
const solution = solveRotations({ ...this.game.level,tiles:this.game.tiles,moveLimit:this.game.moves });
|
|
const action = solution.actions[0];
|
|
if (!solution.solvable || !action) { this.node.emit('trail-no-hint',solution); return; }
|
|
if (action.type === 'rotate') this.node.emit('trail-hint-rotation',action.direction);
|
|
else { const t=this.game.tiles.find((p:any)=>p.id===action.id); this.path=trace(this.game.level,t,this.game.tiles); this.hintId=t.id; this.redraw(); }
|
|
}
|
|
private emitState() {
|
|
const busy=!!this.moving || !!this.rotating;
|
|
this.node.emit('trail-state',{moves:this.game.moves,remaining:this.game.tiles.length,orientation:this.game.orientation*60,won:this.game.won&&!busy,lost:this.game.lost,busy});
|
|
}
|
|
private redraw() {
|
|
if (!this.game) return;
|
|
const ui=this.getComponent(UITransform)!;
|
|
this.painter.begin(ui.width,ui.height);
|
|
this.viewport=layout(this.game.level.cells,ui.width,ui.height);
|
|
drawScene(this.painter,this.game.level,this.game.tiles,this.viewport,{path:this.path,hint:this.hintId,animation:this.moving,boardAngle:this.rotating?.angle||0});
|
|
}
|
|
}
|