mirror of
https://github.com/Terncode/pixel.horse.git
synced 2026-09-25 22:25:53 +02:00
101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
|
|
import { PonyInfo, PonyState } from '../../../common/interfaces';
|
|
import { createCanvas, disableImageSmoothing } from '../../../common/canvasUtils';
|
|
import { toPalette, createDefaultPony, syncLockedPonyInfo } from '../../../common/ponyInfo';
|
|
import { defaultPonyState, defaultDrawPonyOptions } from '../../../common/ponyHelpers';
|
|
import { ContextSpriteBatch } from '../../../graphics/contextSpriteBatch';
|
|
import { compressPonyString, decompressPony } from '../../../common/compressPony';
|
|
import { drawPony } from '../../../client/ponyDraw';
|
|
import { faHome } from '../../../client/icons';
|
|
import { paletteSpriteSheet } from '../../../generated/sprites';
|
|
import { loadAndInitSpriteSheets } from '../../../client/loadSprites';
|
|
|
|
@Component({
|
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
standalone: false,
|
|
selector: 'tools-variants',
|
|
templateUrl: 'tools-variants.pug',
|
|
styleUrls: ['tools-variants.scss'],
|
|
})
|
|
export class ToolsVariants implements OnInit {
|
|
readonly homeIcon = faHome;
|
|
@ViewChild('canvas', { static: true }) canvas!: ElementRef;
|
|
fields: string[];
|
|
vertical: keyof PonyInfo = 'backMane';
|
|
horizontal: keyof PonyInfo = 'mane';
|
|
coat = 'red';
|
|
hair = 'gold';
|
|
justHead = false;
|
|
scale = 2;
|
|
private pony: PonyInfo = createDefaultPony();
|
|
private state: PonyState = defaultPonyState();
|
|
constructor() {
|
|
this.fields = Object.keys(this.pony)
|
|
.filter(key => {
|
|
const value = (this.pony as any)[key];
|
|
return value && value.type !== undefined;
|
|
});
|
|
}
|
|
ngOnInit() {
|
|
loadAndInitSpriteSheets()
|
|
.then(() => this.redraw());
|
|
}
|
|
redraw() {
|
|
this.draw();
|
|
}
|
|
private draw() {
|
|
this.pony.coatFill = this.coat;
|
|
this.pony.mane!.fills![0] = this.hair;
|
|
syncLockedPonyInfo(this.pony);
|
|
|
|
this.fields.forEach(f => (this.pony as any)[f].type = 0);
|
|
(this.pony as any)[this.vertical].type = 999;
|
|
(this.pony as any)[this.horizontal].type = 999;
|
|
|
|
const fixed: any = decompressPony(compressPonyString(this.pony));
|
|
const maxX = fixed[this.horizontal].type;
|
|
const maxY = fixed[this.vertical].type;
|
|
|
|
const scale = this.scale;
|
|
const info = toPalette(this.pony);
|
|
const buffer = createCanvas(80, 80);
|
|
const batch = new ContextSpriteBatch(buffer);
|
|
const options = defaultDrawPonyOptions();
|
|
|
|
const canvas = this.canvas.nativeElement as HTMLCanvasElement;
|
|
canvas.width = ((maxX + 1) * (this.justHead ? 45 : 60) + 10) * scale;
|
|
canvas.height = ((maxY + 1) * (this.justHead ? 45 : 60) + 10) * scale;
|
|
|
|
const viewContext = canvas.getContext('2d')!;
|
|
viewContext.save();
|
|
disableImageSmoothing(viewContext);
|
|
viewContext.scale(scale, scale);
|
|
|
|
viewContext.fillStyle = 'LightGreen';
|
|
viewContext.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
for (let y = 0; y <= maxY; y++) {
|
|
(info as any)[this.vertical].type = y;
|
|
|
|
for (let x = 0; x <= maxX; x++) {
|
|
batch.start(paletteSpriteSheet, 0);
|
|
|
|
(info as any)[this.horizontal].type = x;
|
|
|
|
drawPony(batch, info, this.state, 40, 60, options);
|
|
|
|
batch.end();
|
|
|
|
if (this.justHead) {
|
|
viewContext.drawImage(buffer, 0, 0, 55, 45, x * 45 - 10, y * 45, 55, 45);
|
|
}
|
|
else {
|
|
viewContext.drawImage(buffer, x * 60 - 10, y * 60);
|
|
}
|
|
}
|
|
}
|
|
|
|
viewContext.restore();
|
|
}
|
|
}
|