more example TS declaration fix

packages/examples/src/examples/aseprite/ExampleAseprite.tsx

@@ -18,7 +18,9 @@ export const ExampleAseprite = () => {
 				id="animation_name"
 				onChange={(event) => {
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-					paladin.renderable.setCurrentAnimation(event.target.value);
+					(paladin.renderable as me.Sprite).setCurrentAnimation(
+						event.target.value,
+					);
 				}}
 			>
 				<option value="step">step</option>

packages/examples/src/examples/aseprite/entities.ts

@@ -16,7 +16,7 @@ export class Paladin extends me.Entity {
 		// create a new sprite with all animations from the paladin atlas
 		this.renderable = textureAtlas.createAnimationFromName();
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-		this.renderable.setCurrentAnimation("run front");
+		(this.renderable as me.Sprite).setCurrentAnimation("run front");
 
 		this.anchorPoint.set(0.5, 0.0);
 		this.renderable.scale(4);

packages/examples/src/examples/aseprite/play.ts

@@ -4,7 +4,7 @@ import { Paladin } from "./entities";
 export let paladin: me.Entity;
 
 export class PlayScreen extends me.Stage {
-	onResetEvent() {
+	override onResetEvent() {
 		paladin = new Paladin();
 		me.game.world.addChild(paladin, 2);
 	}

packages/examples/src/examples/graphics/ExampleGraphics.tsx

@@ -1,10 +1,12 @@
 import {
+	type CanvasRenderer,
 	Color,
 	Ellipse,
 	Polygon,
 	Renderable,
 	RoundRect,
 	Tween,
+	type WebGLRenderer,
 	game,
 	video,
 } from "melonjs";
@@ -25,6 +27,17 @@ const createGame = () => {
 	}
 
 	class Graphics extends Renderable {
+		starMask: Polygon;
+		polymask: Polygon;
+		circleMask: Ellipse;
+		stripe1: Polygon;
+		stripe2: Polygon;
+		stripe3: Polygon;
+		roundRect1: RoundRect;
+		roundRect2: RoundRect;
+		rrect1Tween: Tween;
+		rrect2Tween: Tween;
+		color: Color;
 		// constructor
 		constructor() {
 			super(0, 0, game.viewport.width, game.viewport.height);
@@ -105,12 +118,12 @@ const createGame = () => {
 			this.anchorPoint.set(0, 0);
 		}
 
-		update() {
+		override update() {
 			return true;
 		}
 
 		// draw function
-		draw(renderer) {
+		override draw(renderer: WebGLRenderer | CanvasRenderer) {
 			renderer.clearColor("#FFFFFF");
 
 			renderer.setGlobalAlpha(1.0);
@@ -180,5 +193,4 @@ const createGame = () => {
 
 	game.world.addChild(new Graphics());
 };
-
 export const ExampleGraphics = createExampleComponent(createGame);

packages/examples/src/examples/whac-a-mole/ExampleWhacAMole.ts

@@ -18,7 +18,7 @@ const createGame = () => {
 	save.add({ hiscore: 0 });
 
 	// set the local hiscore value
-	data.hiscore = save.hiscore;
+	data.hiscore = save.hiscore as number;
 
 	// set all ressources to be loaded
 	loader.preload(resources, () => {

packages/examples/src/examples/whac-a-mole/HUD.ts

@@ -1,14 +1,25 @@
-import { BitmapText, Container, Renderable, video } from "melonjs";
+import {
+	BitmapText,
+	type CanvasRenderer,
+	Container,
+	Renderable,
+	type WebGLRenderer,
+	video,
+} from "melonjs";
+
 import { data } from "./data";
 
 /**
  * a basic HUD item to display score
  */
 class ScoreItem extends Renderable {
+	private scoreRef: string;
+	private font: BitmapText; // Declare the 'font' property
+
 	/**
 	 * constructor
 	 */
-	constructor(score, align, x, y) {
+	constructor(score: string, align: string, x: number, y: number) {
 		// call the super constructor
 		// (size does not matter here)
 		super(x, y, 10, 10);
@@ -31,8 +42,13 @@ class ScoreItem extends Renderable {
 	/**
 	 * draw the score
 	 */
-	draw(context) {
-		this.font.draw(context, data[this.scoreRef], this.pos.x, this.pos.y);
+	override draw(renderer: WebGLRenderer | CanvasRenderer) {
+		this.font.draw(
+			renderer,
+			data[this.scoreRef].toString(),
+			this.pos.x,
+			this.pos.y,
+		);
 	}
 }
 
@@ -48,7 +64,7 @@ export class HUDContainer extends Container {
 		this.isPersistent = true;
 
 		// make sure our object is always draw first
-		this.z = Number.POSITIVE_INFINITY;
+		this.depth = Number.POSITIVE_INFINITY;
 
 		// give a name
 		this.name = "HUD";

packages/examples/src/examples/whac-a-mole/data.ts

@@ -1,8 +1,13 @@
+// Add an index signature to the 'data' object
+interface Data {
+	[key: string]: number;
+}
+
 /**
  * local game data
  */
-export const data = {
+export const data: Data = {
 	// score information
-	score: 0,
-	hiscore: 0,
+	score: 0 as number,
+	hiscore: 0 as number,
 };

packages/examples/src/examples/whac-a-mole/manager.ts

@@ -5,6 +5,9 @@ import { MoleEntity } from "./mole";
  * a mole manager (to manage movement, etc..)
  */
 export class MoleManager extends Renderable {
+	moles: MoleEntity[]; // declare the 'moles' property
+	timer: number; // declare the 'timer' property
+
 	constructor() {
 		// call the super constructor
 		super(0, 0, {
@@ -39,7 +42,7 @@ export class MoleManager extends Renderable {
 	/*
 	 * update function
 	 */
-	update(dt) {
+	override update(dt: number) {
 		// every 1/2 seconds display moles randomly
 		this.timer += dt;
 		if (this.timer >= 500) {

packages/examples/src/examples/whac-a-mole/mole.ts

@@ -6,7 +6,14 @@ import { data } from "./data";
  * note : we don"t use EntityObject, since we wont" use regular collision, etc..
  */
 export class MoleEntity extends Sprite {
-	constructor(x, y) {
+	isVisible: boolean;
+	isOut: boolean;
+	timer: number;
+	initialPos: number;
+	displayTween: Tween;
+	hideTween: Tween;
+
+	constructor(x: number, y: number) {
 		// call the constructor
 		super(x, y, { image: "mole", framewidth: 178, frameheight: 140 });
 
@@ -30,10 +37,6 @@ export class MoleEntity extends Sprite {
 
 		this.initialPos = this.pos.y;
 
-		// tween to display/hide the moles
-		this.displayTween = null;
-		this.hideTween = null;
-
 		this.isKinematic = false;
 
 		// register on mouse event
@@ -124,7 +127,7 @@ export class MoleEntity extends Sprite {
 	/**
 	 * update the mole
 	 */
-	update(dt) {
+	override update(dt: number) {
 		if (this.isVisible) {
 			// call the super function to manage animation
 			super.update(dt);