127 lines
3.3 KiB
TypeScript
127 lines
3.3 KiB
TypeScript
import { Deck } from "../deck";
|
|
import { Hand } from "../hand";
|
|
import { Group } from "../group"
|
|
|
|
// Configuration globale
|
|
const CANVAS_ID = "myCanvas";
|
|
const BG_COLOR = "#007730";
|
|
const BG_RECT = { x: 50, y: 50, w: 1000, h: 1000 };
|
|
const FPS = 30;
|
|
const FRAME_INTERVAL = 1000 / FPS;
|
|
|
|
// variables globales
|
|
const DECKS: Array<Deck> = [];
|
|
const HANDS: Array<Hand> = [];
|
|
|
|
// Optimisation des références
|
|
let animationFrameId: number;
|
|
let lastFrameTime = 0;
|
|
const callbacks: Array<() => void> = [];
|
|
|
|
// Pré-calcul des dimensions
|
|
const canvas = document.getElementById(CANVAS_ID) as HTMLCanvasElement;
|
|
const ctx = canvas.getContext("2d") as NonNullable<CanvasRenderingContext2D>;
|
|
|
|
// Cache statique
|
|
const staticCanvas = document.createElement('canvas') as HTMLCanvasElement;
|
|
const staticCtx = staticCanvas.getContext("2d") as NonNullable<CanvasRenderingContext2D>;
|
|
staticCanvas.width = canvas.width;
|
|
staticCanvas.height = canvas.height;
|
|
|
|
// Pré-rendu du fond
|
|
function prerenderBackground() {
|
|
staticCtx.clearRect(0, 0, canvas.width, canvas.height);
|
|
staticCtx.fillStyle = BG_COLOR;
|
|
staticCtx.fillRect(BG_RECT.x, BG_RECT.y, BG_RECT.w, BG_RECT.h);
|
|
};
|
|
|
|
function drawFrame() {
|
|
if (!ctx) return;
|
|
|
|
// Effacement intelligent (uniquement la zone nécessaire)
|
|
prerenderBackground();
|
|
|
|
// Ici viendrait le dessin des éléments dynamiques
|
|
// Par exemple:
|
|
// drawDeck();
|
|
// drawHands();
|
|
|
|
// Dessin du cache statique
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.drawImage(staticCanvas, 0, 0);
|
|
}
|
|
|
|
function animationLoop(currentTime: number) {
|
|
animationFrameId = requestAnimationFrame(animationLoop);
|
|
|
|
const deltaTime = currentTime - lastFrameTime;
|
|
if (deltaTime < FRAME_INTERVAL) return;
|
|
|
|
lastFrameTime = currentTime - (deltaTime % FRAME_INTERVAL);
|
|
drawFrame();
|
|
}
|
|
|
|
function initEventListeners() {
|
|
const handlers = {
|
|
mousemove: (e: MouseEvent) => {
|
|
// Logique de gestion du mouvement de la souris
|
|
},
|
|
mousedown: (e: MouseEvent) => {
|
|
// Logique de gestion du clic de souris
|
|
}
|
|
};
|
|
|
|
callbacks.push(() => {
|
|
canvas.removeEventListener('mousemove', handlers.mousemove);
|
|
canvas.removeEventListener('mousedown', handlers.mousedown);
|
|
});
|
|
|
|
canvas.addEventListener('mousemove', handlers.mousemove);
|
|
canvas.addEventListener('mousedown', handlers.mousedown);
|
|
}
|
|
|
|
async function preloadDeck(deck: Deck) {
|
|
await deck.preload();
|
|
}
|
|
async function preloadHand(hand: Hand) {
|
|
await hand.preload();
|
|
}
|
|
|
|
export function cleanup() {
|
|
cancelAnimationFrame(animationFrameId);
|
|
callbacks.forEach(fn => fn());
|
|
}
|
|
|
|
export async function initDisplay() {
|
|
if (!ctx) {
|
|
console.error("Context canvas indisponible");
|
|
return;
|
|
}
|
|
|
|
// Préchargement des ressources si nécessaire
|
|
// const deck = new Deck();
|
|
// await preloadDeck(deck);
|
|
DECKS.push(
|
|
);
|
|
HANDS.push(
|
|
);
|
|
await Promise.all(DECKS.map(d => preloadDeck(d)));
|
|
await Promise.all(HANDS.map(h => preloadHand(h)));
|
|
|
|
initEventListeners();
|
|
requestAnimationFrame(animationLoop);
|
|
window.cleanup = cleanup;
|
|
}
|
|
|
|
// Déclaration globale pour TypeScript
|
|
declare global {
|
|
interface Window {
|
|
cleanup: () => void;
|
|
}
|
|
}
|
|
|
|
// Initialisation automatique si le script est chargé directement
|
|
if (typeof window !== 'undefined') {
|
|
initDisplay().catch(console.error);
|
|
}
|
|
|