@amphore-dev/kinogrida 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -92
- package/dist/classes/ArcShape.d.ts +0 -1
- package/dist/classes/ArcShape.d.ts.map +1 -1
- package/dist/classes/ArcShape.js +32 -41
- package/dist/classes/ArcShape.js.map +1 -1
- package/dist/classes/BaseShape.d.ts +4 -3
- package/dist/classes/BaseShape.d.ts.map +1 -1
- package/dist/classes/BaseShape.js +16 -7
- package/dist/classes/BaseShape.js.map +1 -1
- package/dist/classes/Kinogrida.d.ts +17 -21
- package/dist/classes/Kinogrida.d.ts.map +1 -1
- package/dist/classes/Kinogrida.js +334 -122
- package/dist/classes/Kinogrida.js.map +1 -1
- package/dist/classes/SquareShape.d.ts +0 -1
- package/dist/classes/SquareShape.d.ts.map +1 -1
- package/dist/classes/SquareShape.js +14 -30
- package/dist/classes/SquareShape.js.map +1 -1
- package/dist/constants/CKinogrida.d.ts +3 -0
- package/dist/constants/CKinogrida.d.ts.map +1 -0
- package/dist/constants/CKinogrida.js +16 -0
- package/dist/constants/CKinogrida.js.map +1 -0
- package/dist/constants/CShapes.d.ts +3 -6
- package/dist/constants/CShapes.d.ts.map +1 -1
- package/dist/constants/CShapes.js.map +1 -1
- package/dist/constants/index.d.ts +1 -0
- package/dist/constants/index.d.ts.map +1 -1
- package/dist/constants/index.js +1 -0
- package/dist/constants/index.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/types/TGrid.d.ts +2 -8
- package/dist/types/TGrid.d.ts.map +1 -1
- package/dist/types/TKinogrida.d.ts +19 -1
- package/dist/types/TKinogrida.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/index.js +1 -0
- package/dist/types/index.js.map +1 -1
- package/dist/utils/UShapes.d.ts +1 -1
- package/dist/utils/UShapes.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseShape.js","sourceRoot":"","sources":["../../src/classes/BaseShape.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,MAAM,OAAO,SAAS;IACR,IAAI,CAAQ;IACZ,CAAC,GAAW,CAAC,CAAC;IACd,CAAC,GAAW,CAAC,CAAC;IACd,KAAK,GAAW,
|
|
1
|
+
{"version":3,"file":"BaseShape.js","sourceRoot":"","sources":["../../src/classes/BaseShape.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,32 +1,28 @@
|
|
|
1
|
-
import { TGridConfig } from "../types/TGrid.js";
|
|
1
|
+
import { TGridConfig, TShapeConfig } from "../types/TGrid.js";
|
|
2
2
|
import { BaseShape } from "./BaseShape.js";
|
|
3
|
+
import { TDebugOptions, TKinogridaEventMap } from "../types/TKinogrida.js";
|
|
4
|
+
import { TShapeType } from "../constants/CShapes.js";
|
|
3
5
|
export declare class Kinogrida {
|
|
4
6
|
#private;
|
|
5
|
-
|
|
6
|
-
private context;
|
|
7
|
-
private boundHandleResize;
|
|
8
|
-
constructor(canvas: HTMLCanvasElement);
|
|
9
|
-
private setupCanvas;
|
|
10
|
-
clearGrid(): void;
|
|
11
|
-
initGrid(config?: Partial<TGridConfig>): void;
|
|
12
|
-
addCell(item: BaseShape, x: number, y: number): void;
|
|
13
|
-
updateGridConfig(config?: Partial<TGridConfig>): void;
|
|
14
|
-
private drawGrid;
|
|
15
|
-
private drawLockedCells;
|
|
16
|
-
private drawCellPositions;
|
|
17
|
-
private drawCells;
|
|
18
|
-
private handleResize;
|
|
19
|
-
toggleDebugMode(): void;
|
|
20
|
-
private attachEventListeners;
|
|
21
|
-
private detachEventListeners;
|
|
22
|
-
private animate;
|
|
23
|
-
private debug;
|
|
7
|
+
constructor(canvas: HTMLCanvasElement, options?: Partial<TGridConfig>);
|
|
24
8
|
play(): void;
|
|
25
9
|
pause(): void;
|
|
26
10
|
destroy(): void;
|
|
11
|
+
clearGrid(): void;
|
|
12
|
+
initGrid(config?: Partial<TGridConfig>): void;
|
|
13
|
+
fillGridRandomly(): void;
|
|
14
|
+
addCell(item: BaseShape | TShapeType, x: number, y: number, config?: TShapeConfig): void;
|
|
15
|
+
updateGridConfig(config?: Partial<TGridConfig>): void;
|
|
16
|
+
toggleDebugMode(value?: boolean | TDebugOptions): TDebugOptions;
|
|
27
17
|
setFillPercentage(percentage: number): void;
|
|
28
18
|
getFillPercentage(): number;
|
|
29
19
|
getConfig(): TGridConfig;
|
|
30
|
-
setConfig(config: Partial<TGridConfig
|
|
20
|
+
setConfig(config: Partial<TGridConfig>, reset?: boolean): void;
|
|
21
|
+
getCurrentFPS(): number;
|
|
22
|
+
getDeltaTime(): number;
|
|
23
|
+
getSpeed(): number;
|
|
24
|
+
setSpeed(speed: number): void;
|
|
25
|
+
on<K extends keyof TKinogridaEventMap>(event: K, callback: TKinogridaEventMap[K]): void;
|
|
26
|
+
off<K extends keyof TKinogridaEventMap>(event: K, callback: TKinogridaEventMap[K]): void;
|
|
31
27
|
}
|
|
32
28
|
//# sourceMappingURL=Kinogrida.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Kinogrida.d.ts","sourceRoot":"","sources":["../../src/classes/Kinogrida.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Kinogrida.d.ts","sourceRoot":"","sources":["../../src/classes/Kinogrida.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,WAAW,EAEX,YAAY,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,OAAO,EACH,aAAa,EAEb,kBAAkB,EACrB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAgB,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAGlE,qBAAa,SAAS;;gBA2DN,MAAM,EAAE,iBAAiB,EAAE,OAAO,GAAE,OAAO,CAAC,WAAW,CAAM;IAsBlE,IAAI,IAAI,IAAI;IASZ,KAAK,IAAI,IAAI;IAQb,OAAO,IAAI,IAAI;IAUf,SAAS,IAAI,IAAI;IAKjB,QAAQ,CAAC,MAAM,GAAE,OAAO,CAAC,WAAW,CAAM,GAAG,IAAI;IAiBjD,gBAAgB,IAAI,IAAI;IAkCxB,OAAO,CACV,IAAI,EAAE,SAAS,GAAG,UAAU,EAC5B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,CAAC,EAAE,YAAY,GACtB,IAAI;IA6BA,gBAAgB,CAAC,MAAM,GAAE,OAAO,CAAC,WAAW,CAAM,GAAG,IAAI;IAiDzD,eAAe,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,aAAa;IAa/D,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAO3C,iBAAiB,IAAI,MAAM;IAI3B,SAAS,IAAI,WAAW;IAIxB,SAAS,CACZ,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,EAC5B,KAAK,GAAE,OAAe,GACvB,IAAI;IAWA,aAAa,IAAI,MAAM;IAIvB,YAAY,IAAI,MAAM;IAItB,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7B,EAAE,CAAC,CAAC,SAAS,MAAM,kBAAkB,EACxC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAChC,IAAI;IAIA,GAAG,CAAC,CAAC,SAAS,MAAM,kBAAkB,EACzC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAChC,IAAI;CAwPV"}
|
|
@@ -2,53 +2,107 @@ import { BaseShape } from "./BaseShape.js";
|
|
|
2
2
|
import { randomInt } from "../utils/UMath.js";
|
|
3
3
|
import { getRandomColorPalette } from "../utils/UColors.js";
|
|
4
4
|
import { getRandomShapeType } from "../utils/UShapes.js";
|
|
5
|
+
import { SHAPES_TYPES } from "../constants/CShapes.js";
|
|
6
|
+
import { CDEFAULT_GRID_CONFIG } from "../constants/CKinogrida.js";
|
|
5
7
|
export class Kinogrida {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
+
// ── Canvas ──────────────────────────────────────────────
|
|
9
|
+
#canvas;
|
|
10
|
+
#context;
|
|
11
|
+
// ── State ───────────────────────────────────────────────
|
|
8
12
|
#isPlaying = false;
|
|
9
|
-
#
|
|
13
|
+
#debugOptions = {
|
|
14
|
+
showGrid: false,
|
|
15
|
+
showStats: false,
|
|
16
|
+
showLockedCells: false,
|
|
17
|
+
showPath: false,
|
|
18
|
+
showPosition: false,
|
|
19
|
+
};
|
|
20
|
+
#isInitialized = false;
|
|
21
|
+
// ── FPS / Timing ────────────────────────────────────────
|
|
22
|
+
#lastFrameTime = 0;
|
|
23
|
+
#frameCount = 0;
|
|
24
|
+
#fpsUpdateInterval = 1000;
|
|
25
|
+
#lastFpsUpdate = 0;
|
|
26
|
+
#currentFPS = 60;
|
|
27
|
+
#deltaTime = 16.67;
|
|
28
|
+
#animationFrameId = null;
|
|
29
|
+
// ── Grid / Cells ────────────────────────────────────────
|
|
10
30
|
#gridConfig = {
|
|
31
|
+
...CDEFAULT_GRID_CONFIG,
|
|
11
32
|
nbrColumns: Math.floor(window.innerWidth / 100),
|
|
12
33
|
nbrRows: Math.floor(window.innerHeight / 100),
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
offsetX: 0,
|
|
16
|
-
offsetY: 0,
|
|
17
|
-
width: 0,
|
|
18
|
-
height: 0,
|
|
19
|
-
lineWidth: 1,
|
|
20
|
-
debug: this.#debugMode,
|
|
21
|
-
context: null, // Will be set in setupCanvas
|
|
34
|
+
debug: this.#debugOptions,
|
|
35
|
+
context: null,
|
|
22
36
|
colors: getRandomColorPalette(),
|
|
23
37
|
};
|
|
24
38
|
#grid = [];
|
|
25
39
|
#cells = [];
|
|
26
|
-
#
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
40
|
+
#fillPercentage = 0.2;
|
|
41
|
+
// ── Input ───────────────────────────────────────────────
|
|
42
|
+
#mouseOverCell = null;
|
|
43
|
+
#engineOptions;
|
|
44
|
+
// ── Events ──────────────────────────────────────────────
|
|
45
|
+
#listeners = {
|
|
46
|
+
cellClick: [],
|
|
47
|
+
moveStart: [],
|
|
48
|
+
move: [],
|
|
49
|
+
moveEnd: [],
|
|
50
|
+
};
|
|
51
|
+
// ── Bound handlers ──────────────────────────────────────
|
|
52
|
+
#boundHandleResize;
|
|
53
|
+
#boundHandleMouseOver;
|
|
54
|
+
#boundMouseClick;
|
|
55
|
+
// ════════════════════════════════════════════════════════
|
|
56
|
+
// Constructor
|
|
57
|
+
// ════════════════════════════════════════════════════════
|
|
58
|
+
constructor(canvas, options = {}) {
|
|
59
|
+
this.#canvas = canvas;
|
|
60
|
+
this.#engineOptions = options;
|
|
31
61
|
const context = canvas.getContext("2d");
|
|
32
62
|
if (!context) {
|
|
33
63
|
throw new Error("Cannot get 2D context from canvas");
|
|
34
64
|
}
|
|
35
|
-
this
|
|
36
|
-
this
|
|
37
|
-
this.
|
|
65
|
+
this.#context = context;
|
|
66
|
+
this.#boundHandleResize = this.#handleResize.bind(this);
|
|
67
|
+
this.#boundHandleMouseOver = this.#handleMouseOver.bind(this);
|
|
68
|
+
this.#boundMouseClick = this.#handleMouseClick.bind(this);
|
|
69
|
+
this.#setupCanvas(options);
|
|
70
|
+
this.updateGridConfig(options);
|
|
38
71
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
this
|
|
44
|
-
|
|
72
|
+
// ════════════════════════════════════════════════════════
|
|
73
|
+
// Public – Lifecycle
|
|
74
|
+
// ════════════════════════════════════════════════════════
|
|
75
|
+
play() {
|
|
76
|
+
if (this.#isPlaying)
|
|
77
|
+
return;
|
|
78
|
+
this.#isPlaying = true;
|
|
79
|
+
this.#lastFrameTime = 0;
|
|
80
|
+
if (this.#animationFrameId === null) {
|
|
81
|
+
this.#animationFrameId = requestAnimationFrame(this.#animate);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
pause() {
|
|
85
|
+
this.#isPlaying = false;
|
|
86
|
+
if (this.#animationFrameId !== null) {
|
|
87
|
+
cancelAnimationFrame(this.#animationFrameId);
|
|
88
|
+
this.#animationFrameId = null;
|
|
89
|
+
}
|
|
45
90
|
}
|
|
91
|
+
destroy() {
|
|
92
|
+
this.pause();
|
|
93
|
+
this.#context.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
|
|
94
|
+
this.#detachEventListeners();
|
|
95
|
+
}
|
|
96
|
+
// ════════════════════════════════════════════════════════
|
|
97
|
+
// Public – Grid
|
|
98
|
+
// ════════════════════════════════════════════════════════
|
|
46
99
|
clearGrid() {
|
|
47
100
|
this.#grid = [];
|
|
48
101
|
this.#cells = [];
|
|
49
102
|
}
|
|
50
103
|
initGrid(config = {}) {
|
|
51
104
|
this.clearGrid();
|
|
105
|
+
this.updateGridConfig(config);
|
|
52
106
|
const { nbrColumns, nbrRows } = this.#gridConfig;
|
|
53
107
|
for (let i = 0; i < nbrRows; i++) {
|
|
54
108
|
const row = [];
|
|
@@ -57,12 +111,12 @@ export class Kinogrida {
|
|
|
57
111
|
}
|
|
58
112
|
this.#grid.push(row);
|
|
59
113
|
}
|
|
60
|
-
|
|
61
|
-
|
|
114
|
+
this.fillGridRandomly();
|
|
115
|
+
}
|
|
116
|
+
fillGridRandomly() {
|
|
117
|
+
const { nbrColumns, nbrRows } = this.#gridConfig;
|
|
62
118
|
const colors = this.#gridConfig.colors;
|
|
63
|
-
const maxCells = Math.floor(nbrColumns * nbrRows * this.#fillPercentage);
|
|
64
|
-
// debug
|
|
65
|
-
// const maxCells = 10;
|
|
119
|
+
const maxCells = Math.max(1, Math.floor(nbrColumns * nbrRows * this.#fillPercentage));
|
|
66
120
|
let addedCells = 0;
|
|
67
121
|
const maxAttempts = 100;
|
|
68
122
|
let attempts = 0;
|
|
@@ -73,68 +127,234 @@ export class Kinogrida {
|
|
|
73
127
|
const ShapeConstructor = getRandomShapeType();
|
|
74
128
|
this.addCell(new ShapeConstructor(this.#grid, x, y, {
|
|
75
129
|
color: colors[randomInt(0, colors.length - 1)],
|
|
76
|
-
radiusPercent: Math.random() < 0.5 ?
|
|
130
|
+
radiusPercent: Math.random() < 0.5 ? this.#gridConfig.cellSize : 0,
|
|
77
131
|
}), x, y);
|
|
78
132
|
addedCells++;
|
|
79
|
-
attempts = 0;
|
|
133
|
+
attempts = 0;
|
|
80
134
|
}
|
|
81
135
|
attempts++;
|
|
82
136
|
}
|
|
83
137
|
}
|
|
84
|
-
addCell(item, x, y) {
|
|
138
|
+
addCell(item, x, y, config) {
|
|
139
|
+
if (typeof item === "string") {
|
|
140
|
+
const ShapeConstructor = SHAPES_TYPES[item];
|
|
141
|
+
item = new ShapeConstructor(this.#grid, x, y, {
|
|
142
|
+
color: this.#gridConfig.colors[randomInt(0, this.#gridConfig.colors.length - 1)],
|
|
143
|
+
radiusPercent: Math.random() < 0.5 ? 1 : 0,
|
|
144
|
+
...config,
|
|
145
|
+
});
|
|
146
|
+
}
|
|
85
147
|
if (this.#grid[y][x] === null) {
|
|
86
148
|
this.#grid[y][x] = item;
|
|
87
149
|
this.#cells.push(item);
|
|
150
|
+
item.setEmitter((event, ...args) => {
|
|
151
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
152
|
+
this.#emit(event, ...args);
|
|
153
|
+
});
|
|
88
154
|
}
|
|
89
155
|
}
|
|
156
|
+
// ════════════════════════════════════════════════════════
|
|
157
|
+
// Public – Config / API
|
|
158
|
+
// ════════════════════════════════════════════════════════
|
|
90
159
|
updateGridConfig(config = {}) {
|
|
91
|
-
const { gridMargin, nbrColumns, nbrRows } =
|
|
92
|
-
|
|
160
|
+
const { gridMargin, nbrColumns, nbrRows } = {
|
|
161
|
+
...this.#engineOptions,
|
|
162
|
+
...this.#gridConfig,
|
|
163
|
+
...config,
|
|
164
|
+
};
|
|
165
|
+
const cellSize = Math.floor(Math.min((this.#canvas.width - 2 * gridMargin) / nbrColumns, (this.#canvas.height - 2 * gridMargin) / nbrRows));
|
|
93
166
|
const gridWidth = nbrColumns * cellSize;
|
|
94
167
|
const gridHeight = nbrRows * cellSize;
|
|
95
|
-
const offsetX = (this
|
|
96
|
-
const offsetY = (this
|
|
168
|
+
const offsetX = (this.#canvas.width - gridWidth) / 2;
|
|
169
|
+
const offsetY = (this.#canvas.height - gridHeight) / 2;
|
|
97
170
|
const lineWidth = Math.max(1, Math.floor(cellSize * 0.1));
|
|
98
171
|
const colors = config.colors || getRandomColorPalette();
|
|
99
172
|
this.#gridConfig = {
|
|
100
173
|
...this.#gridConfig,
|
|
101
|
-
offsetX,
|
|
102
|
-
offsetY,
|
|
103
|
-
width: gridWidth,
|
|
104
|
-
height: gridHeight,
|
|
105
174
|
cellSize,
|
|
106
175
|
lineWidth,
|
|
107
|
-
debug: this.#
|
|
108
|
-
context: this
|
|
176
|
+
debug: this.#debugOptions,
|
|
177
|
+
context: this.#context,
|
|
109
178
|
colors,
|
|
110
179
|
...config,
|
|
180
|
+
offsetX,
|
|
181
|
+
offsetY,
|
|
182
|
+
width: gridWidth,
|
|
183
|
+
height: gridHeight,
|
|
111
184
|
};
|
|
112
185
|
}
|
|
113
|
-
|
|
186
|
+
#resolveDebug(value) {
|
|
187
|
+
if (typeof value === "boolean") {
|
|
188
|
+
return {
|
|
189
|
+
showGrid: value,
|
|
190
|
+
showStats: value,
|
|
191
|
+
showLockedCells: value,
|
|
192
|
+
showPath: value,
|
|
193
|
+
showPosition: value,
|
|
194
|
+
};
|
|
195
|
+
}
|
|
196
|
+
return value;
|
|
197
|
+
}
|
|
198
|
+
toggleDebugMode(value) {
|
|
199
|
+
if (value === undefined) {
|
|
200
|
+
// Toggle: if any option is on, turn all off; otherwise turn all on
|
|
201
|
+
const allOff = Object.values(this.#debugOptions).every((v) => !v);
|
|
202
|
+
this.#debugOptions = this.#resolveDebug(allOff);
|
|
203
|
+
}
|
|
204
|
+
else {
|
|
205
|
+
this.#debugOptions = this.#resolveDebug(value);
|
|
206
|
+
}
|
|
207
|
+
this.#gridConfig.debug = this.#debugOptions;
|
|
208
|
+
return this.#debugOptions;
|
|
209
|
+
}
|
|
210
|
+
setFillPercentage(percentage) {
|
|
211
|
+
this.#fillPercentage = Math.max(0, Math.min(1, percentage));
|
|
212
|
+
this.initGrid({
|
|
213
|
+
colors: this.#gridConfig.colors,
|
|
214
|
+
});
|
|
215
|
+
}
|
|
216
|
+
getFillPercentage() {
|
|
217
|
+
return this.#fillPercentage;
|
|
218
|
+
}
|
|
219
|
+
getConfig() {
|
|
220
|
+
return this.#gridConfig;
|
|
221
|
+
}
|
|
222
|
+
setConfig(config, reset = false) {
|
|
223
|
+
if (reset) {
|
|
224
|
+
this.initGrid({
|
|
225
|
+
...config,
|
|
226
|
+
colors: this.#gridConfig.colors,
|
|
227
|
+
});
|
|
228
|
+
}
|
|
229
|
+
else {
|
|
230
|
+
this.updateGridConfig(config);
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
getCurrentFPS() {
|
|
234
|
+
return this.#currentFPS;
|
|
235
|
+
}
|
|
236
|
+
getDeltaTime() {
|
|
237
|
+
return this.#deltaTime;
|
|
238
|
+
}
|
|
239
|
+
getSpeed() {
|
|
240
|
+
return this.#gridConfig.speed;
|
|
241
|
+
}
|
|
242
|
+
setSpeed(speed) {
|
|
243
|
+
this.#gridConfig.speed = speed;
|
|
244
|
+
}
|
|
245
|
+
// ════════════════════════════════════════════════════════
|
|
246
|
+
// Events Subscription
|
|
247
|
+
// ════════════════════════════════════════════════════════
|
|
248
|
+
on(event, callback) {
|
|
249
|
+
this.#listeners[event].push(callback);
|
|
250
|
+
}
|
|
251
|
+
off(event, callback) {
|
|
252
|
+
const list = this.#listeners[event];
|
|
253
|
+
const index = list.indexOf(callback);
|
|
254
|
+
if (index !== -1)
|
|
255
|
+
list.splice(index, 1);
|
|
256
|
+
}
|
|
257
|
+
// ════════════════════════════════════════════════════════
|
|
258
|
+
// Private – Setup
|
|
259
|
+
// ════════════════════════════════════════════════════════
|
|
260
|
+
#setupCanvas(options) {
|
|
261
|
+
this.#setCanvasSize();
|
|
262
|
+
this.#attachEventListeners();
|
|
263
|
+
this.initGrid(options);
|
|
264
|
+
this.#isInitialized = true;
|
|
265
|
+
}
|
|
266
|
+
#setCanvasSize() {
|
|
267
|
+
this.#canvas.width = this.#canvas.clientWidth;
|
|
268
|
+
this.#canvas.height = this.#canvas.clientHeight;
|
|
269
|
+
const dpr = window.devicePixelRatio || 1;
|
|
270
|
+
this.#canvas.width = this.#canvas.clientWidth * dpr;
|
|
271
|
+
this.#canvas.height = this.#canvas.clientHeight * dpr;
|
|
272
|
+
this.#context.scale(dpr, dpr);
|
|
273
|
+
}
|
|
274
|
+
#attachEventListeners() {
|
|
275
|
+
window.addEventListener("resize", this.#boundHandleResize);
|
|
276
|
+
this.#canvas.addEventListener("mousemove", this.#boundHandleMouseOver);
|
|
277
|
+
this.#canvas.addEventListener("click", this.#boundMouseClick);
|
|
278
|
+
}
|
|
279
|
+
#detachEventListeners() {
|
|
280
|
+
window.removeEventListener("resize", this.#boundHandleResize);
|
|
281
|
+
this.#canvas.removeEventListener("mousemove", this.#boundHandleMouseOver);
|
|
282
|
+
this.#canvas.removeEventListener("click", this.#boundMouseClick);
|
|
283
|
+
}
|
|
284
|
+
// ════════════════════════════════════════════════════════
|
|
285
|
+
// Private – Animation / Render
|
|
286
|
+
// ════════════════════════════════════════════════════════
|
|
287
|
+
// Arrow function to preserve `this` binding for requestAnimationFrame
|
|
288
|
+
#animate = (currentTime = performance.now()) => {
|
|
289
|
+
if (!this.#isInitialized || !this.#isPlaying) {
|
|
290
|
+
this.#animationFrameId = null;
|
|
291
|
+
return;
|
|
292
|
+
}
|
|
293
|
+
if (this.#lastFrameTime > 0) {
|
|
294
|
+
this.#deltaTime = currentTime - this.#lastFrameTime;
|
|
295
|
+
this.#frameCount++;
|
|
296
|
+
if (currentTime - this.#lastFpsUpdate >= this.#fpsUpdateInterval) {
|
|
297
|
+
this.#currentFPS =
|
|
298
|
+
(this.#frameCount * 1000) /
|
|
299
|
+
(currentTime - this.#lastFpsUpdate);
|
|
300
|
+
this.#frameCount = 0;
|
|
301
|
+
this.#lastFpsUpdate = currentTime;
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
else {
|
|
305
|
+
this.#lastFpsUpdate = currentTime;
|
|
306
|
+
}
|
|
307
|
+
this.#lastFrameTime = currentTime;
|
|
308
|
+
this.#context.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
|
|
309
|
+
this.#drawMouseOverHighlight();
|
|
310
|
+
const dbg = this.#debugOptions;
|
|
311
|
+
if (dbg.showGrid) {
|
|
312
|
+
this.#drawGrid();
|
|
313
|
+
}
|
|
314
|
+
if (dbg.showLockedCells) {
|
|
315
|
+
this.#drawLockedCells();
|
|
316
|
+
}
|
|
317
|
+
this.#drawCells();
|
|
318
|
+
if (dbg.showPosition) {
|
|
319
|
+
this.#drawCellPositions();
|
|
320
|
+
}
|
|
321
|
+
if (dbg.showStats) {
|
|
322
|
+
this.#showStats();
|
|
323
|
+
}
|
|
324
|
+
this.#animationFrameId = requestAnimationFrame(this.#animate);
|
|
325
|
+
};
|
|
326
|
+
#drawCells() {
|
|
327
|
+
this.#context.lineWidth = this.#gridConfig.lineWidth;
|
|
328
|
+
this.#context.strokeStyle = "white";
|
|
329
|
+
this.#cells.forEach((cell) => {
|
|
330
|
+
cell.update(this.#grid, this.#gridConfig, this.#context, this.#deltaTime);
|
|
331
|
+
});
|
|
332
|
+
}
|
|
333
|
+
#drawGrid() {
|
|
114
334
|
const { nbrColumns, nbrRows, offsetX, offsetY, cellSize, width, height, } = this.#gridConfig;
|
|
115
|
-
this
|
|
116
|
-
this
|
|
335
|
+
this.#context.strokeStyle = "white";
|
|
336
|
+
this.#context.lineWidth = 1;
|
|
117
337
|
for (let i = 0; i <= nbrColumns; i++) {
|
|
118
338
|
const x = offsetX + i * cellSize;
|
|
119
|
-
this
|
|
120
|
-
this
|
|
121
|
-
this
|
|
122
|
-
this
|
|
339
|
+
this.#context.beginPath();
|
|
340
|
+
this.#context.moveTo(x, offsetY);
|
|
341
|
+
this.#context.lineTo(x, offsetY + height);
|
|
342
|
+
this.#context.stroke();
|
|
123
343
|
}
|
|
124
344
|
for (let j = 0; j <= nbrRows; j++) {
|
|
125
345
|
const y = offsetY + j * cellSize;
|
|
126
|
-
this
|
|
127
|
-
this
|
|
128
|
-
this
|
|
129
|
-
this
|
|
346
|
+
this.#context.beginPath();
|
|
347
|
+
this.#context.moveTo(offsetX, y);
|
|
348
|
+
this.#context.lineTo(offsetX + width, y);
|
|
349
|
+
this.#context.stroke();
|
|
130
350
|
}
|
|
131
351
|
}
|
|
132
|
-
drawLockedCells() {
|
|
352
|
+
#drawLockedCells() {
|
|
133
353
|
this.#cells.forEach((cell) => {
|
|
134
|
-
cell.drawLockedCells(this
|
|
354
|
+
cell.drawLockedCells(this.#context, this.#gridConfig);
|
|
135
355
|
});
|
|
136
356
|
}
|
|
137
|
-
drawCellPositions() {
|
|
357
|
+
#drawCellPositions() {
|
|
138
358
|
const { cellSize, offsetX, offsetY, nbrColumns, nbrRows } = this.#gridConfig;
|
|
139
359
|
for (let y = 0; y < nbrRows; y++) {
|
|
140
360
|
for (let x = 0; x < nbrColumns; x++) {
|
|
@@ -142,82 +362,74 @@ export class Kinogrida {
|
|
|
142
362
|
if (cell instanceof BaseShape) {
|
|
143
363
|
const centerX = offsetX + x * cellSize + cellSize / 2;
|
|
144
364
|
const centerY = offsetY + y * cellSize + cellSize / 2;
|
|
145
|
-
this
|
|
146
|
-
this
|
|
147
|
-
this
|
|
148
|
-
this
|
|
149
|
-
this
|
|
365
|
+
this.#context.fillStyle = "white";
|
|
366
|
+
this.#context.font = `${cellSize * 0.3}px Arial`;
|
|
367
|
+
this.#context.textAlign = "center";
|
|
368
|
+
this.#context.textBaseline = "middle";
|
|
369
|
+
this.#context.fillText(`(${x},${y})`, centerX, centerY);
|
|
150
370
|
}
|
|
151
371
|
}
|
|
152
372
|
}
|
|
153
373
|
}
|
|
154
|
-
|
|
155
|
-
this
|
|
156
|
-
this.#cells.forEach((cell) => {
|
|
157
|
-
cell.update(this.#grid, this.#gridConfig, this.context);
|
|
158
|
-
});
|
|
159
|
-
}
|
|
160
|
-
handleResize() {
|
|
161
|
-
this.canvas.width = this.canvas.clientWidth;
|
|
162
|
-
this.canvas.height = this.canvas.clientHeight;
|
|
163
|
-
this.updateGridConfig({
|
|
164
|
-
colors: this.#gridConfig.colors, // Preserve the current color palette
|
|
165
|
-
});
|
|
166
|
-
this.drawGrid();
|
|
167
|
-
}
|
|
168
|
-
toggleDebugMode() {
|
|
169
|
-
this.#debugMode = !this.#debugMode;
|
|
170
|
-
this.#gridConfig.debug = this.#debugMode;
|
|
171
|
-
}
|
|
172
|
-
attachEventListeners() {
|
|
173
|
-
window.addEventListener("resize", this.boundHandleResize);
|
|
174
|
-
}
|
|
175
|
-
detachEventListeners() {
|
|
176
|
-
window.removeEventListener("resize", this.boundHandleResize);
|
|
177
|
-
}
|
|
178
|
-
animate = () => {
|
|
179
|
-
if (!this.#isInitialized || !this.#isPlaying)
|
|
374
|
+
#drawMouseOverHighlight() {
|
|
375
|
+
if (!this.#mouseOverCell || !this.#gridConfig.showMouseHighlight)
|
|
180
376
|
return;
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
}
|
|
185
|
-
this.drawCells();
|
|
186
|
-
requestAnimationFrame(this.animate);
|
|
187
|
-
};
|
|
188
|
-
debug = () => {
|
|
189
|
-
this.drawGrid();
|
|
190
|
-
this.drawLockedCells();
|
|
191
|
-
this.drawCellPositions();
|
|
192
|
-
};
|
|
193
|
-
play() {
|
|
194
|
-
if (this.#isPlaying)
|
|
377
|
+
const { x, y } = this.#mouseOverCell;
|
|
378
|
+
const { offsetX, offsetY, cellSize } = this.#gridConfig;
|
|
379
|
+
if (!this.#grid[y] || this.#grid[y][x] === undefined)
|
|
195
380
|
return;
|
|
196
|
-
this.#
|
|
197
|
-
|
|
381
|
+
if (this.#grid[y][x] !== null)
|
|
382
|
+
this.#context.fillStyle = "rgba(255, 0, 0, 0.2)";
|
|
383
|
+
else
|
|
384
|
+
this.#context.fillStyle = "rgba(255, 255, 255, 0.2)";
|
|
385
|
+
this.#context.beginPath();
|
|
386
|
+
this.#context.roundRect(offsetX + x * cellSize, offsetY + y * cellSize, cellSize, cellSize, 8);
|
|
387
|
+
this.#context.fill();
|
|
388
|
+
this.#context.closePath();
|
|
198
389
|
}
|
|
199
|
-
|
|
200
|
-
this.#
|
|
390
|
+
#showStats() {
|
|
391
|
+
this.#context.fillStyle = "white";
|
|
392
|
+
this.#context.font = "16px Arial";
|
|
393
|
+
this.#context.textAlign = "left";
|
|
394
|
+
this.#context.fillStyle = "rgba(0, 0, 0, 0.5)";
|
|
395
|
+
this.#context.fillRect(5, 5, 120, 70);
|
|
396
|
+
this.#context.fillStyle = "white";
|
|
397
|
+
this.#context.fillText(`FPS: ${Math.floor(this.#currentFPS)}`, 10, 20);
|
|
398
|
+
this.#context.fillText(`Cells: ${this.#cells.length}`, 10, 40);
|
|
399
|
+
this.#context.fillText(`Grid: ${this.#grid.length}x${this.#grid[0]?.length || 0}`, 10, 60);
|
|
201
400
|
}
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
401
|
+
// ════════════════════════════════════════════════════════
|
|
402
|
+
// Private – Event handlers
|
|
403
|
+
// ════════════════════════════════════════════════════════
|
|
404
|
+
#handleResize() {
|
|
405
|
+
this.#setCanvasSize();
|
|
406
|
+
this.updateGridConfig({
|
|
407
|
+
colors: this.#gridConfig.colors,
|
|
408
|
+
});
|
|
409
|
+
this.#drawGrid();
|
|
206
410
|
}
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
411
|
+
#getMousePosition(e) {
|
|
412
|
+
const { offsetX, offsetY, cellSize } = this.#gridConfig;
|
|
413
|
+
const gridX = Math.floor((e.offsetX - offsetX) / cellSize);
|
|
414
|
+
const gridY = Math.floor((e.offsetY - offsetY) / cellSize);
|
|
415
|
+
if (gridX >= 0 &&
|
|
416
|
+
gridX < this.#gridConfig.nbrColumns &&
|
|
417
|
+
gridY >= 0 &&
|
|
418
|
+
gridY < this.#gridConfig.nbrRows) {
|
|
419
|
+
return { x: gridX, y: gridY };
|
|
420
|
+
}
|
|
421
|
+
return null;
|
|
212
422
|
}
|
|
213
|
-
|
|
214
|
-
|
|
423
|
+
#handleMouseOver(e) {
|
|
424
|
+
const cellPos = this.#getMousePosition(e);
|
|
425
|
+
this.#mouseOverCell = cellPos;
|
|
215
426
|
}
|
|
216
|
-
|
|
217
|
-
|
|
427
|
+
#handleMouseClick(e) {
|
|
428
|
+
const cellPos = this.#getMousePosition(e);
|
|
429
|
+
this.#emit("cellClick", cellPos?.x ?? -1, cellPos?.y ?? -1, !!cellPos);
|
|
218
430
|
}
|
|
219
|
-
|
|
220
|
-
this.
|
|
431
|
+
#emit(event, ...args) {
|
|
432
|
+
this.#listeners[event].forEach((cb) => cb(...args));
|
|
221
433
|
}
|
|
222
434
|
}
|
|
223
435
|
//# sourceMappingURL=Kinogrida.js.map
|