diff --git a/backend/Entries/1.txt b/backend/Entries/1.txt new file mode 100644 index 0000000..9b4b233 --- /dev/null +++ b/backend/Entries/1.txt @@ -0,0 +1 @@ +54, Sampl \ No newline at end of file diff --git a/backend/Entries/10.txt b/backend/Entries/10.txt new file mode 100644 index 0000000..29fe42b --- /dev/null +++ b/backend/Entries/10.txt @@ -0,0 +1 @@ +288, Sampl \ No newline at end of file diff --git a/backend/Entries/11.txt b/backend/Entries/11.txt new file mode 100644 index 0000000..453caf0 --- /dev/null +++ b/backend/Entries/11.txt @@ -0,0 +1 @@ +543, Sampl \ No newline at end of file diff --git a/backend/Entries/12.txt b/backend/Entries/12.txt new file mode 100644 index 0000000..bdb417c --- /dev/null +++ b/backend/Entries/12.txt @@ -0,0 +1 @@ +567, Sampl \ No newline at end of file diff --git a/backend/Entries/13.txt b/backend/Entries/13.txt new file mode 100644 index 0000000..65ea95c --- /dev/null +++ b/backend/Entries/13.txt @@ -0,0 +1 @@ +146, Sampl \ No newline at end of file diff --git a/backend/Entries/14.txt b/backend/Entries/14.txt new file mode 100644 index 0000000..cd8c3ba --- /dev/null +++ b/backend/Entries/14.txt @@ -0,0 +1 @@ +216, Sampl \ No newline at end of file diff --git a/backend/Entries/15.txt b/backend/Entries/15.txt new file mode 100644 index 0000000..74ed7cf --- /dev/null +++ b/backend/Entries/15.txt @@ -0,0 +1 @@ +353, Sampl \ No newline at end of file diff --git a/backend/Entries/16.txt b/backend/Entries/16.txt new file mode 100644 index 0000000..7591f85 --- /dev/null +++ b/backend/Entries/16.txt @@ -0,0 +1 @@ +182, Sampl \ No newline at end of file diff --git a/backend/Entries/17.txt b/backend/Entries/17.txt new file mode 100644 index 0000000..2ff98c3 --- /dev/null +++ b/backend/Entries/17.txt @@ -0,0 +1 @@ +563, Sampl \ No newline at end of file diff --git a/backend/Entries/18.txt b/backend/Entries/18.txt new file mode 100644 index 0000000..3ee06e7 --- /dev/null +++ b/backend/Entries/18.txt @@ -0,0 +1 @@ +118, Sampl \ No newline at end of file diff --git a/backend/Entries/19.txt b/backend/Entries/19.txt new file mode 100644 index 0000000..7151d81 --- /dev/null +++ b/backend/Entries/19.txt @@ -0,0 +1 @@ +92, Sampl \ No newline at end of file diff --git a/backend/Entries/2.txt b/backend/Entries/2.txt new file mode 100644 index 0000000..68ff435 --- /dev/null +++ b/backend/Entries/2.txt @@ -0,0 +1 @@ +419, Sampl \ No newline at end of file diff --git a/backend/Entries/20.txt b/backend/Entries/20.txt new file mode 100644 index 0000000..c2329b3 --- /dev/null +++ b/backend/Entries/20.txt @@ -0,0 +1 @@ +352, Sampl \ No newline at end of file diff --git a/backend/Entries/21.txt b/backend/Entries/21.txt new file mode 100644 index 0000000..1735bff --- /dev/null +++ b/backend/Entries/21.txt @@ -0,0 +1 @@ +326, Sampl \ No newline at end of file diff --git a/backend/Entries/22.txt b/backend/Entries/22.txt new file mode 100644 index 0000000..0da238c --- /dev/null +++ b/backend/Entries/22.txt @@ -0,0 +1 @@ +307, Sampl \ No newline at end of file diff --git a/backend/Entries/23.txt b/backend/Entries/23.txt new file mode 100644 index 0000000..4f882ac --- /dev/null +++ b/backend/Entries/23.txt @@ -0,0 +1 @@ +437, Sampl \ No newline at end of file diff --git a/backend/Entries/24.txt b/backend/Entries/24.txt new file mode 100644 index 0000000..6323c8a --- /dev/null +++ b/backend/Entries/24.txt @@ -0,0 +1 @@ +582, Sampl \ No newline at end of file diff --git a/backend/Entries/25.txt b/backend/Entries/25.txt new file mode 100644 index 0000000..acce70d --- /dev/null +++ b/backend/Entries/25.txt @@ -0,0 +1 @@ +532, Sampl \ No newline at end of file diff --git a/backend/Entries/26.txt b/backend/Entries/26.txt new file mode 100644 index 0000000..91547a1 --- /dev/null +++ b/backend/Entries/26.txt @@ -0,0 +1 @@ +174, Sampl \ No newline at end of file diff --git a/backend/Entries/27.txt b/backend/Entries/27.txt new file mode 100644 index 0000000..0a4e16e --- /dev/null +++ b/backend/Entries/27.txt @@ -0,0 +1 @@ +376, Sampl \ No newline at end of file diff --git a/backend/Entries/28.txt b/backend/Entries/28.txt new file mode 100644 index 0000000..4f882ac --- /dev/null +++ b/backend/Entries/28.txt @@ -0,0 +1 @@ +437, Sampl \ No newline at end of file diff --git a/backend/Entries/29.txt b/backend/Entries/29.txt new file mode 100644 index 0000000..ee27a11 --- /dev/null +++ b/backend/Entries/29.txt @@ -0,0 +1 @@ +459, Sampl \ No newline at end of file diff --git a/backend/Entries/3.txt b/backend/Entries/3.txt new file mode 100644 index 0000000..7fdacd6 --- /dev/null +++ b/backend/Entries/3.txt @@ -0,0 +1 @@ +101, Sampl \ No newline at end of file diff --git a/backend/Entries/30.txt b/backend/Entries/30.txt new file mode 100644 index 0000000..5425288 --- /dev/null +++ b/backend/Entries/30.txt @@ -0,0 +1 @@ +23, Sampl \ No newline at end of file diff --git a/backend/Entries/31.txt b/backend/Entries/31.txt new file mode 100644 index 0000000..543388e --- /dev/null +++ b/backend/Entries/31.txt @@ -0,0 +1 @@ +268, Sampl \ No newline at end of file diff --git a/backend/Entries/32.txt b/backend/Entries/32.txt new file mode 100644 index 0000000..aa77cf5 --- /dev/null +++ b/backend/Entries/32.txt @@ -0,0 +1 @@ +42, Sampl \ No newline at end of file diff --git a/backend/Entries/33.txt b/backend/Entries/33.txt new file mode 100644 index 0000000..5fbfc39 --- /dev/null +++ b/backend/Entries/33.txt @@ -0,0 +1 @@ +391, Sampl \ No newline at end of file diff --git a/backend/Entries/34.txt b/backend/Entries/34.txt new file mode 100644 index 0000000..11dd2cd --- /dev/null +++ b/backend/Entries/34.txt @@ -0,0 +1 @@ +97, Sampl \ No newline at end of file diff --git a/backend/Entries/35.txt b/backend/Entries/35.txt new file mode 100644 index 0000000..0011e8e --- /dev/null +++ b/backend/Entries/35.txt @@ -0,0 +1 @@ +128, Sampl \ No newline at end of file diff --git a/backend/Entries/36.txt b/backend/Entries/36.txt new file mode 100644 index 0000000..678885b --- /dev/null +++ b/backend/Entries/36.txt @@ -0,0 +1 @@ +551, Sampl \ No newline at end of file diff --git a/backend/Entries/37.txt b/backend/Entries/37.txt new file mode 100644 index 0000000..1538390 --- /dev/null +++ b/backend/Entries/37.txt @@ -0,0 +1 @@ +377, Sampl \ No newline at end of file diff --git a/backend/Entries/38.txt b/backend/Entries/38.txt new file mode 100644 index 0000000..99e7ed8 --- /dev/null +++ b/backend/Entries/38.txt @@ -0,0 +1 @@ +208, Sampl \ No newline at end of file diff --git a/backend/Entries/39.txt b/backend/Entries/39.txt new file mode 100644 index 0000000..ad92f21 --- /dev/null +++ b/backend/Entries/39.txt @@ -0,0 +1 @@ +95, Sampl \ No newline at end of file diff --git a/backend/Entries/4.txt b/backend/Entries/4.txt new file mode 100644 index 0000000..0bbd986 --- /dev/null +++ b/backend/Entries/4.txt @@ -0,0 +1 @@ +30, Sampl \ No newline at end of file diff --git a/backend/Entries/40.txt b/backend/Entries/40.txt new file mode 100644 index 0000000..600db2c --- /dev/null +++ b/backend/Entries/40.txt @@ -0,0 +1 @@ +138, Sampl \ No newline at end of file diff --git a/backend/Entries/41.txt b/backend/Entries/41.txt new file mode 100644 index 0000000..fca7200 --- /dev/null +++ b/backend/Entries/41.txt @@ -0,0 +1 @@ +336, Sampl \ No newline at end of file diff --git a/backend/Entries/42.txt b/backend/Entries/42.txt new file mode 100644 index 0000000..80f9dfe --- /dev/null +++ b/backend/Entries/42.txt @@ -0,0 +1 @@ +5, Sampl \ No newline at end of file diff --git a/backend/Entries/43.txt b/backend/Entries/43.txt new file mode 100644 index 0000000..46e396b --- /dev/null +++ b/backend/Entries/43.txt @@ -0,0 +1 @@ +339, Sampl \ No newline at end of file diff --git a/backend/Entries/44.txt b/backend/Entries/44.txt new file mode 100644 index 0000000..c140a6e --- /dev/null +++ b/backend/Entries/44.txt @@ -0,0 +1 @@ +579, Sampl \ No newline at end of file diff --git a/backend/Entries/45.txt b/backend/Entries/45.txt new file mode 100644 index 0000000..583e144 --- /dev/null +++ b/backend/Entries/45.txt @@ -0,0 +1 @@ +542, Sampl \ No newline at end of file diff --git a/backend/Entries/46.txt b/backend/Entries/46.txt new file mode 100644 index 0000000..12d5de1 --- /dev/null +++ b/backend/Entries/46.txt @@ -0,0 +1 @@ +441, Sampl \ No newline at end of file diff --git a/backend/Entries/47.txt b/backend/Entries/47.txt new file mode 100644 index 0000000..b9b762f --- /dev/null +++ b/backend/Entries/47.txt @@ -0,0 +1 @@ +20, Sampl \ No newline at end of file diff --git a/backend/Entries/48.txt b/backend/Entries/48.txt new file mode 100644 index 0000000..33ee313 --- /dev/null +++ b/backend/Entries/48.txt @@ -0,0 +1 @@ +9, Sampl \ No newline at end of file diff --git a/backend/Entries/49.txt b/backend/Entries/49.txt new file mode 100644 index 0000000..b323965 --- /dev/null +++ b/backend/Entries/49.txt @@ -0,0 +1 @@ +560, Sampl \ No newline at end of file diff --git a/backend/Entries/5.txt b/backend/Entries/5.txt new file mode 100644 index 0000000..64a7974 --- /dev/null +++ b/backend/Entries/5.txt @@ -0,0 +1 @@ +310, Sampl \ No newline at end of file diff --git a/backend/Entries/50.txt b/backend/Entries/50.txt new file mode 100644 index 0000000..bda7495 --- /dev/null +++ b/backend/Entries/50.txt @@ -0,0 +1 @@ +511, Sampl \ No newline at end of file diff --git a/backend/Entries/6.txt b/backend/Entries/6.txt new file mode 100644 index 0000000..c072784 --- /dev/null +++ b/backend/Entries/6.txt @@ -0,0 +1 @@ +390, Sampl \ No newline at end of file diff --git a/backend/Entries/7.txt b/backend/Entries/7.txt new file mode 100644 index 0000000..4622325 --- /dev/null +++ b/backend/Entries/7.txt @@ -0,0 +1 @@ +241, Sampl \ No newline at end of file diff --git a/backend/Entries/8.txt b/backend/Entries/8.txt new file mode 100644 index 0000000..9de4d81 --- /dev/null +++ b/backend/Entries/8.txt @@ -0,0 +1 @@ +144, Sampl \ No newline at end of file diff --git a/backend/Entries/9.txt b/backend/Entries/9.txt new file mode 100644 index 0000000..58591cc --- /dev/null +++ b/backend/Entries/9.txt @@ -0,0 +1 @@ +397, Sampl \ No newline at end of file diff --git a/frontend/public/gbaplus.png b/frontend/public/gbaplus.png new file mode 100644 index 0000000..7589c41 Binary files /dev/null and b/frontend/public/gbaplus.png differ diff --git a/frontend/public/largeboy.png b/frontend/public/largeboy.png new file mode 100644 index 0000000..83f325f Binary files /dev/null and b/frontend/public/largeboy.png differ diff --git a/frontend/src/components/hallofame/Canvas.tsx b/frontend/src/components/hallofame/Canvas.tsx index bbe536d..4618bb4 100644 --- a/frontend/src/components/hallofame/Canvas.tsx +++ b/frontend/src/components/hallofame/Canvas.tsx @@ -1,15 +1,55 @@ import React, { useEffect, useRef, useState } from "react"; import { getRandomInt } from "./utils/misc"; -import gba from "/gba.png"; +import gba from "/largeboy.png"; import { fetchPokemonData } from "./fetchPokemonData"; let scaleFactor = 1; let maxX = 0; let maxY = 0; let side: number; +let pointerCanvas: HTMLCanvasElement; +let pointerCtx: CanvasRenderingContext2D; +const pokemonData: { + Pokiname: string; + PokiHeight: number; + PokeSprite: string; + img: HTMLImageElement; +}[] = []; +const coords: { xs: number; ys: number; xe: number; ye: number }[] = []; +//Here x,y are top left of the mini screen +//xl,yl are dimensions of the miniscreen and l,b are dimensions of the entire scene +//Their ratios are used to make it compatible with every screen +let pushFactor: number; +const x = 409, + y = 264, + xl = 1084, + yl = 787, + l = 1922, + b = 1321, + r = 50, + b1 = [47 + r, 471 + r], + b2 = [223 + r, 471 + r], + b3 = [1692 - 62 + r, 463 + r], + b4 = [1853 - 62 + r, 391 + r]; +const A = yl / b, + B = x / l, + C = y / b, + D = xl / l, + E = b / l, + F = xl / b; +let newRad: number, nb1: number[], nb2: number[], nb3: number[], nb4: number[]; +//const A = 0.476, +// B = 0.284, +// C = 0.191, +// D = 0.4381, +// E = 0.671, +// F = 0.709; const Canvas: React.FC = () => { + const [mode, setMode] = useState(-1); + const [pokeIndex, setPokeIndex] = useState(0); const videoCanvasRef = useRef(null); // Video canvas const imagesCanvasRef = useRef(null); // Images canvas + const pointerCanvasRef = useRef(null); //The pointer const videoRef = useRef(null); const [allAssetsLoaded, setAllAssetsLoaded] = useState(false); @@ -17,19 +57,23 @@ const Canvas: React.FC = () => { const fetchAndDrawPokemon = async () => { const videoCanvas = videoCanvasRef.current; const imagesCanvas = imagesCanvasRef.current; + pointerCanvas = imagesCanvasRef.current; const video = videoRef.current; - if (videoCanvas && imagesCanvas && video) { + if (videoCanvas && imagesCanvas && video && pointerCanvas) { const videoCtx = videoCanvas.getContext("2d"); const imagesCtx = imagesCanvas.getContext("2d"); - side = window.innerHeight; + pointerCtx = pointerCanvas.getContext("2d"); let sum = 0; - videoCanvas.width = (window.innerHeight * 2 * 9) / 10; - videoCanvas.height = (window.innerHeight * 9) / 10; + const bigSide = window.innerHeight; + videoCanvas.width = bigSide * 1.8; + videoCanvas.height = bigSide; imagesCanvas.width = videoCanvas.width; imagesCanvas.height = videoCanvas.height; - side = videoCanvas.height * 0.476; + pointerCanvas.width = videoCanvas.width; + pointerCanvas.height = videoCanvas.height; + side = videoCanvas.height * A; // Draw the gba image on both canvases const imga = new Image(); imga.src = gba; @@ -56,8 +100,38 @@ const Canvas: React.FC = () => { // Calculate the size and position of the video to fit within the gba screen const videoWidth = side; const videoHeight = side; - const videoX = videoCanvas.width * 0.28; - const videoY = videoCanvas.height * 0.191; + const videoX = videoCanvas.width * B; + const videoY = videoCanvas.height * C; + newRad = r; + nb1 = [ + (b1[0] * imagesCanvas.width) / l, + (b1[1] * imagesCanvas.height) / b, + ]; + nb2 = [ + (b2[0] * imagesCanvas.width) / l, + (b2[1] * imagesCanvas.height) / b, + ]; + nb3 = [ + (b3[0] * imagesCanvas.width) / l, + (b3[1] * imagesCanvas.height) / b, + ]; + nb4 = [ + (b4[0] * imagesCanvas.width) / l, + (b4[1] * imagesCanvas.height) / b, + ]; + // imagesCtx.fillStyle = "black"; + // pointerCtx?.beginPath(); + // pointerCtx?.arc(nb1[0], nb1[1], newRad, 0, Math.PI * 2, true); + // pointerCtx.fill(); + // pointerCtx?.beginPath(); + // pointerCtx?.arc(nb2[0], nb2[1], newRad, 0, Math.PI * 2, true); + // pointerCtx.fill(); + // pointerCtx?.beginPath(); + // pointerCtx?.arc(nb3[0], nb3[1], newRad, 0, Math.PI * 2, true); + // pointerCtx.fill(); + // pointerCtx?.beginPath(); + // pointerCtx?.arc(nb4[0], nb4[1], newRad, 0, Math.PI * 2, true); + // pointerCtx.fill(); // Play the video inside the gba screen (draw the video frame by frame) const drawVideo = () => { @@ -66,7 +140,7 @@ const Canvas: React.FC = () => { videoCtx.fillRect( videoX, videoY, - videoCanvas.width * 0.4381, + videoCanvas.width * D, videoHeight, ); videoCtx.drawImage( @@ -83,12 +157,7 @@ const Canvas: React.FC = () => { }; // Fetch Pokémon data and preload images - const pokemonData: { - Pokiname: string; - PokiHeight: number; - PokeSprite: string; - img: HTMLImageElement; - }[] = []; + const pokemons = await fetchPokemonData(); console.log("Pokemon are", pokemons); await Promise.all( @@ -117,10 +186,9 @@ const Canvas: React.FC = () => { ); // Once all Pokémon images have loaded, prepare to draw them - const estimatedSide = Math.sqrt(sum / 0.671); + const estimatedSide = Math.sqrt(sum / E); pokemonData.sort((a, b) => b.PokiHeight - a.PokiHeight); - const coords: { xs: number; ys: number; xe: number; ye: number }[] = []; let x = 0, y = 0; let max = pokemonData[0].PokiHeight; @@ -134,7 +202,7 @@ const Canvas: React.FC = () => { if (temp.ye > maxY) maxY = temp.ye; if (temp.xe > maxX) maxX = temp.xe; - x += (pokemonData[i].PokiHeight * getRandomInt(3, 8)) / 10; + x += (pokemonData[i].PokiHeight * getRandomInt(7, 10)) / 10; if (x > estimatedSide * 2) { x = 0; @@ -144,30 +212,21 @@ const Canvas: React.FC = () => { coords.push(temp); } - console.log(maxX, " ", imagesCanvas.width); scaleFactor = side / maxY; - const pushFactor = - (0.719 * imagesCanvas.width - - (maxX * scaleFactor + 0.284 * imagesCanvas.width)) / + pushFactor = + (F * imagesCanvas.width - + (maxX * scaleFactor + B * imagesCanvas.width)) / 2; // Draw Pokémon images on the images canvas const drawPokemonImages = () => { if (imagesCtx) { - imagesCtx.fillStyle = "white"; - imagesCtx.fillRect( - imagesCanvas.width * 0.28, - imagesCanvas.height * 0.191, - imagesCanvas.width * 0.4381, - side, - ); - for (let i = 0; i < pokemonData.length; i++) { imagesCtx.drawImage( pokemonData[i].img, coords[i].xs * scaleFactor + - 0.284 * imagesCanvas.width + + B * imagesCanvas.width + pushFactor, - coords[i].ys * scaleFactor + imagesCanvas.height * 0.191, + coords[i].ys * scaleFactor + imagesCanvas.height * C, pokemonData[i].PokiHeight * scaleFactor, pokemonData[i].PokiHeight * scaleFactor, ); @@ -183,7 +242,221 @@ const Canvas: React.FC = () => { fetchAndDrawPokemon(); }, [allAssetsLoaded]); + const runChecks = (e: React.MouseEvent) => { + const rect = pointerCanvas.getBoundingClientRect(); + + // Adjust the click coordinates relative to the canvas scale + const x = ((e.clientX - rect.left) / rect.width) * pointerCanvas.width; + const y = ((e.clientY - rect.top) / rect.height) * pointerCanvas.height; + + if (clicked(x, y, nb1, newRad)) { + prevClick(); + } else if (clicked(x, y, nb2, newRad)) { + nextClick(); + } else if (clicked(x, y, nb3, newRad)) { + nextMode(); + } else if (clicked(x, y, nb4, newRad)) { + prevMode(); + } + }; + // Assuming you are using React's useEffect for side effects + + useEffect(() => { + updateScene(pokeIndex); + }, [pokeIndex]); + + function nextClick() { + setPokeIndex((prevPokeIndex) => { + const newIndex = + prevPokeIndex !== pokemonData.length - 1 ? prevPokeIndex + 1 : 0; + return newIndex; + }); + } + + function prevClick() { + setPokeIndex((prevPokeIndex) => { + const newIndex = + prevPokeIndex !== 0 ? prevPokeIndex - 1 : pokemonData.length - 1; + return newIndex; + }); + } + + // Other parts of the code remain the same + + function updateScene(mod: number) { + if (mode === 0) standOut(); + else if (mode === 1) standOutpp(); + else normal(); + } + function prevMode() { + setMode((prevMode) => { + const newMode = prevMode !== -1 ? prevMode - 1 : 1; + changeMode(newMode); + return newMode; + }); + } + + function nextMode() { + setMode((prevMode) => { + const newMode = prevMode !== 1 ? prevMode + 1 : -1; + changeMode(newMode); + return newMode; + }); + } + + function changeMode(mod: number) { + console.log("The mode is ", mod); + switch (mod) { + case 0: + standOut(); + break; + case -1: + normal(); + break; + case 1: + standOutpp(); + } + } + function standOutpp() { + // Load the custom GBA font + pointerCtx.font = "14px gba"; // Setting the custom font + + // Set a classic Pokémon color palette + pointerCtx.fillStyle = "#A8C281"; // Background box color (greenish tone) + pointerCtx.fillRect( + B * pointerCanvas.width, // X-position + pointerCanvas.height * C, // Y-position + pointerCanvas.width * D, // Width of box + pointerCanvas.height * A, // Height of box + ); + + // Set stroke and text colors for more contrast + pointerCtx.strokeStyle = "black"; // Outline color + pointerCtx.fillStyle = "#FFFFFF"; // Text color (white for high contrast) + + // Drawing text (center-aligned for better look) + const textX = pointerCanvas.width * (B + 0.02); // X-position for text + const textYStart = pointerCanvas.height * (C + 0.05); // Y-start for the name + const lineSpacing = 20; // Spacing between lines of text + // Display the name "Peter" and roll number in the center of the box + pointerCtx.fillText( + "Name: Peter", // Example name + textX, + textYStart, + ); + pointerCtx.fillText( + "Roll Number: Peter 123", // Example roll number + textX, + textYStart + lineSpacing, + ); + + // Drawing the Pokémon image (centered in the box) + const pokeImageX = + pointerCanvas.width * (B + 0.5) - pointerCanvas.width * D * 0.1; // Center X-position for image + const pokeImageY = pointerCanvas.height * (C + 0.15); // Y-position for image + const pokeImageWidth = pointerCanvas.width * D * 0.2; // Width of image + const pokeImageHeight = pointerCanvas.height * A * 0.5; // Height of image + + pointerCtx.drawImage( + pokemonData[pokeIndex].img, + pokeImageX, + pokeImageY, + pokeImageWidth, + pokeImageHeight, + ); + + // Adding more text for Pokémon's name, ID, and height (below the image) + pointerCtx.fillStyle = "#F8E030"; // Use classic Pokémon yellow for name and details + pointerCtx.fillText( + "Pokémon: " + pokemonData[pokeIndex].Pokiname, + textX, + pokeImageY + pokeImageHeight + lineSpacing, // Below the image + ); + // pointerCtx.fillText( + // "ID: " + pokemonData[pokeIndex], // Example PokeID + // textX, + // pokeImageY + pokeImageHeight + 2 * lineSpacing, // Next line below the name + //); + pointerCtx.fillText( + "Height: " + pokemonData[pokeIndex].PokiHeight + "m", // Example height + textX, + pokeImageY + pokeImageHeight + 3 * lineSpacing, // Next line below the ID + ); + } + + function normal() { + pointerCtx.fillStyle = "#A8C281"; + pointerCtx.fillRect( + B * pointerCanvas.width, + pointerCanvas.height * C, + pointerCanvas.width * D, + pointerCanvas.height * A, + ); + for (let i = 0; i < pokemonData.length; i++) { + pointerCtx.drawImage( + pokemonData[i].img, + coords[i].xs * scaleFactor + B * pointerCanvas.width + pushFactor, + coords[i].ys * scaleFactor + pointerCanvas.height * C, + pokemonData[i].PokiHeight * scaleFactor, + pokemonData[i].PokiHeight * scaleFactor, + ); + } + } + function clicked( + x: number, + y: number, + buttonCoords: number[], + rad: number, + ): boolean { + const distance = (x - buttonCoords[0]) ** 2 + (y - buttonCoords[1]) ** 2; + if (distance <= rad ** 2) return true; + return false; + } + function standOut() { + console.log("Here"); + pointerCtx.fillStyle = "#A8C281"; + pointerCtx.fillRect( + B * pointerCanvas.width, + pointerCanvas.height * C, + pointerCanvas.width * D, + pointerCanvas.height * A, + ); + pointerCtx.globalAlpha = 0.5; + for (let i = 0; i < pokemonData.length; i++) { + if (i != pokeIndex) + pointerCtx.drawImage( + pokemonData[i].img, + coords[i].xs * scaleFactor + B * pointerCanvas.width + pushFactor, + coords[i].ys * scaleFactor + pointerCanvas.height * C, + pokemonData[i].PokiHeight * scaleFactor, + pokemonData[i].PokiHeight * scaleFactor, + ); + } + pointerCtx.globalAlpha = 1; + if (pokeIndex > pokemonData.length / 2) { + pointerCtx.drawImage( + pokemonData[pokeIndex].img, + coords[pokeIndex].xs * scaleFactor + + B * pointerCanvas.width + + pushFactor, + coords[pokeIndex].ys * scaleFactor + + pointerCanvas.height * C - + pokemonData[pokeIndex].PokiHeight * scaleFactor, + pokemonData[pokeIndex].PokiHeight * scaleFactor * 2, + pokemonData[pokeIndex].PokiHeight * scaleFactor * 2, + ); + } else + pointerCtx.drawImage( + pokemonData[pokeIndex].img, + coords[pokeIndex].xs * scaleFactor + + B * pointerCanvas.width + + pushFactor, + coords[pokeIndex].ys * scaleFactor + pointerCanvas.height * C, + pokemonData[pokeIndex].PokiHeight * scaleFactor * 1.5, + pokemonData[pokeIndex].PokiHeight * scaleFactor * 1.5, + ); + } return (
{/* Canvas for video */} @@ -200,6 +473,18 @@ const Canvas: React.FC = () => { }} > )} + {/* Canvas for images */} { return ( <> {" "} -
+