[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_179":180,"_181":182},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_107":85,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":25,"_124":125,"_126":57,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","019d68f6-56ab-7088-8cef-20414928fca8","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, {\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\n// --- Configuration ---\nconst FONT_FAMILY = \"'Courier New', Courier, monospace\";\nconst GRAVITY = 0.5;\nconst JUMP_POWER = -11.5;\nconst SPEED = 4.5;\nconst FRICTION = 0.8;\n\nconst FINAL_MESSAGE = {\n title: \"Ήρθες σε μένα! 💖\",\n body:\n \"Ξεπέρασες κάθε εμπόδιο και έφτασες στο τέρμα. Αλλά η αλήθεια είναι ότι ο τυχερός είμαι εγώ που έτρεξες σε εμένα. Σ' αγαπώ!\",\n};\n\n// --- Levels Design ---\n// 0 = Κενό, 1 = Πλατφόρμα, 2 = Καρδιά, 3 = Κοπέλα (Παίκτης 👸), 4 = Εσύ (Στόχος 🧑)\nconst LEVELS = [\n // Πίστα 1: Εύκολη (Εξοικείωση με τα άλματα)\n [\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 2, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 4],\n [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1],\n [3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1],\n [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1],\n ],\n // Πίστα 2: Μεσαία (Πιο πολλά κενά)\n [\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 4],\n [0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],\n [3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1],\n [1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1],\n ],\n // Πίστα 3: Δύσκολη (Απαιτεί καλό συγχρονισμό)\n [\n [\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n ],\n [\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 2,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n ],\n [\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 0,\n 0,\n 0,\n 0,\n 2,\n 0,\n 0,\n 0,\n 0,\n 0,\n 2,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n ],\n [\n 0,\n 0,\n 0,\n 2,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 1,\n 0,\n 0,\n 1,\n 1,\n 1,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 4,\n ],\n [\n 0,\n 1,\n 1,\n 1,\n 1,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 1,\n ],\n [\n 3,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 1,\n 1,\n ],\n [\n 1,\n 1,\n 0,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 1,\n 1,\n 1,\n ],\n ],\n];\n\nconst BLOCK_SIZE = 45; // Λίγο μεγαλύτερα τουβλάκια για ευκολία\n\nfunction App() {\n const [gameState, setGameState] = useState<\n \"START\" | \"PLAYING\" | \"LEVEL_CLEARED\" | \"WON\" | \"LOST\"\n >(\"START\");\n const [currentLevel, setCurrentLevel] = useState(0);\n const [reactScore, setReactScore] = useState(0); // Χρησιμοποιείται μόνο για τα μενού\n\n const canvasRef = useRef(null);\n const animationId = useRef();\n const keys = useRef({ left: false, right: false, up: false });\n\n // Game Engine State - Αποθηκεύει το σκορ εδώ για να δουλεύει σωστά στην οθόνη\n const engine = useRef({\n player: {\n x: 0,\n y: 0,\n width: 30,\n height: 30,\n dx: 0,\n dy: 0,\n isGrounded: false,\n },\n goal: { x: 0, y: 0, width: 40, height: 40 },\n platforms: [] as { x: number; y: number; w: number; h: number }[],\n hearts: [] as { x: number; y: number; collected: boolean }[],\n camera: { x: 0, y: 0 },\n levelWidth: 0,\n levelHeight: 0,\n score: 0,\n });\n\n // --- Initialize Specific Level ---\n const initLevel = useCallback((levelIndex: number, keepScore = false) => {\n const eng = engine.current;\n eng.platforms = [];\n eng.hearts = [];\n\n if (!keepScore) eng.score = 0; // Reset σκορ μόνο αν ξεκινάει από την αρχή\n\n keys.current = { left: false, right: false, up: false };\n\n const grid = LEVELS[levelIndex];\n eng.levelWidth = grid[0].length * BLOCK_SIZE;\n eng.levelHeight = grid.length * BLOCK_SIZE;\n\n for (let row = 0; row < grid.length; row++) {\n for (let col = 0; col < grid[row].length; col++) {\n const val = grid[row][col];\n const x = col * BLOCK_SIZE;\n const y = row * BLOCK_SIZE;\n\n if (val === 1) {\n eng.platforms.push({ x, y, w: BLOCK_SIZE, h: BLOCK_SIZE });\n } else if (val === 2) {\n eng.hearts.push({ x: x + 10, y: y + 10, collected: false });\n } else if (val === 3) {\n eng.player.x = x;\n eng.player.y = y;\n eng.player.dx = 0;\n eng.player.dy = 0;\n } else if (val === 4) {\n eng.goal.x = x;\n eng.goal.y = y - 10;\n }\n }\n }\n\n setCurrentLevel(levelIndex);\n setGameState(\"PLAYING\");\n }, []);\n\n // --- Game Loop (Physics & Drawing) ---\n useEffect(() => {\n if (gameState !== \"PLAYING\") return;\n\n const canvas = canvasRef.current;\n const ctx = canvas?.getContext(\"2d\");\n if (!canvas || !ctx) return;\n\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight * 0.60;\n\n const eng = engine.current;\n\n const gameLoop = () => {\n // --- 1. PHYSICS & INPUT ---\n if (keys.current.left) eng.player.dx -= 0.6;\n if (keys.current.right) eng.player.dx += 0.6;\n\n eng.player.dx *= FRICTION;\n if (eng.player.dx > SPEED) eng.player.dx = SPEED;\n if (eng.player.dx < -SPEED) eng.player.dx = -SPEED;\n\n if (keys.current.up && eng.player.isGrounded) {\n eng.player.dy = JUMP_POWER;\n eng.player.isGrounded = false;\n keys.current.up = false;\n }\n\n eng.player.dy += GRAVITY;\n\n // --- 2. COLLISION X ---\n eng.player.x += eng.player.dx;\n for (let p of eng.platforms) {\n if (\n eng.player.x < p.x + p.w && eng.player.x + eng.player.width > p.x &&\n eng.player.y < p.y + p.h && eng.player.y + eng.player.height > p.y\n ) {\n if (eng.player.dx > 0) eng.player.x = p.x - eng.player.width;\n if (eng.player.dx < 0) eng.player.x = p.x + p.w;\n eng.player.dx = 0;\n }\n }\n\n // --- 3. COLLISION Y ---\n eng.player.y += eng.player.dy;\n eng.player.isGrounded = false;\n for (let p of eng.platforms) {\n if (\n eng.player.x < p.x + p.w && eng.player.x + eng.player.width > p.x &&\n eng.player.y < p.y + p.h && eng.player.y + eng.player.height > p.y\n ) {\n if (eng.player.dy > 0) {\n eng.player.y = p.y - eng.player.height;\n eng.player.dy = 0;\n eng.player.isGrounded = true;\n } else if (eng.player.dy < 0) {\n eng.player.y = p.y + p.h;\n eng.player.dy = 0;\n }\n }\n }\n\n // Fall off map\n if (eng.player.y > eng.levelHeight + 150) {\n setReactScore(eng.score);\n setGameState(\"LOST\");\n return;\n }\n\n if (eng.player.x < 0) eng.player.x = 0;\n if (eng.player.x + eng.player.width > eng.levelWidth) {\n eng.player.x = eng.levelWidth - eng.player.width;\n }\n\n // --- 4. COLLECTIBLES & GOAL ---\n eng.hearts.forEach((h) => {\n if (!h.collected) {\n if (\n eng.player.x < h.x + 20 && eng.player.x + eng.player.width > h.x &&\n eng.player.y < h.y + 20 && eng.player.y + eng.player.height > h.y\n ) {\n h.collected = true;\n eng.score += 1; // Ενημέρωση σκορ στη μηχανή!\n }\n }\n });\n\n // Goal Reached\n if (\n eng.player.x < eng.goal.x + eng.goal.width &&\n eng.player.x + eng.player.width > eng.goal.x &&\n eng.player.y < eng.goal.y + eng.goal.height &&\n eng.player.y + eng.player.height > eng.goal.y\n ) {\n setReactScore(eng.score);\n if (currentLevel < LEVELS.length - 1) {\n setGameState(\"LEVEL_CLEARED\");\n } else {\n setGameState(\"WON\");\n }\n return;\n }\n\n // --- 5. CAMERA ---\n eng.camera.x = eng.player.x - canvas.width / 2.5;\n if (eng.camera.x < 0) eng.camera.x = 0;\n if (eng.camera.x > eng.levelWidth - canvas.width) {\n eng.camera.x = Math.max(0, eng.levelWidth - canvas.width);\n }\n\n // --- 6. DRAWING ---\n ctx.fillStyle = \"#87CEEB\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n ctx.save();\n ctx.translate(-eng.camera.x, 0);\n\n // Πλατφόρμες\n ctx.fillStyle = \"#4ade80\";\n eng.platforms.forEach((p) => {\n ctx.fillRect(p.x, p.y, p.w, p.h);\n ctx.fillStyle = \"#a36a00\";\n ctx.fillRect(p.x, p.y + 10, p.w, p.h - 10);\n ctx.fillStyle = \"#4ade80\";\n });\n\n // Καρδιές\n ctx.font = \"22px Arial\";\n eng.hearts.forEach((h) => {\n if (!h.collected) ctx.fillText(\"❤️\", h.x, h.y + 15);\n });\n\n // Goal (Εσύ 🧑)\n ctx.font = \"40px Arial\";\n ctx.fillText(\"🧑\", eng.goal.x, eng.goal.y + 35);\n\n // Player (Εκείνη 👸)\n ctx.font = \"30px Arial\";\n ctx.fillText(\"👸\", eng.player.x, eng.player.y + 25);\n\n ctx.restore();\n\n // UI: Score (Τώρα δουλεύει σωστά!)\n ctx.fillStyle = \"black\";\n ctx.font = \"bold 20px Courier New\";\n ctx.fillText(`Αγάπη: ${eng.score}`, 20, 30);\n\n animationId.current = requestAnimationFrame(gameLoop);\n };\n\n gameLoop();\n\n return () => {\n if (animationId.current) cancelAnimationFrame(animationId.current);\n };\n }, [gameState, currentLevel]);\n\n return (\n

\n {gameState === \"START\" && (\n

Love Quest 👸

\n Ένα κλασικό παιχνίδι αποκλειστικά για εσένα!
\n
\n Πέρασε και τις 3 πίστες, μάζεψε τις καρδιές, και έλα να με βρεις στο\n τέρμα!\n

\n \n

\n )}\n\n {(gameState === \"PLAYING\" || gameState === \"LOST\" ||\n gameState === \"WON\" || gameState === \"LEVEL_CLEARED\") && (\n

\n Πίστα: {currentLevel + 1} / {LEVELS.length}\n

\n )}\n\n {gameState === \"LEVEL_CLEARED\" && (\n

Με βρήκες! 💖

\n Τα κατάφερες τέλεια στην Πίστα {currentLevel + 1}. Συνεχίζουμε;\n

\n initLevel(currentLevel + 1, true)}\n style={styles.button}\n >\n Επόμενη Πίστα ➡️\n \n

\n )}\n\n {gameState === \"LOST\" && (\n

Ουπς! 🥺

\n Έπεσες στο κενό... Αλλά εγώ θα σε πιάνω πάντα!\n

\n {/* Αν χάσει, ξαναπαίζει την ίδια πίστα! */}\n initLevel(currentLevel, true)}\n style={styles.button}\n >\n Try Again 🔄\n \n

\n )}\n\n {gameState === \"WON\" && (\n

🎉👸❤️🧑🎉

{FINAL_MESSAGE.title}

{FINAL_MESSAGE.body}

Μάζεψες {reactScore} καρδιές!

\n )}\n

\n );\n}\n\n// --- CSS Styles ---\nconst styles: { [key: string]: React.CSSProperties } = {\n page: {\n fontFamily: FONT_FAMILY,\n backgroundColor: \"#1e293b\",\n minHeight: \"100vh\",\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n margin: 0,\n overflow: \"hidden\",\n touchAction: \"none\",\n userSelect: \"none\",\n WebkitUserSelect: \"none\",\n },\n gameContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n width: \"100%\",\n height: \"100vh\",\n position: \"relative\",\n },\n levelHeader: {\n position: \"absolute\",\n top: 10,\n right: 20,\n backgroundColor: \"rgba(255,255,255,0.7)\",\n padding: \"5px 10px\",\n borderRadius: \"10px\",\n fontWeight: \"bold\",\n zIndex: 5,\n },\n canvas: {\n display: \"block\",\n width: \"100%\",\n backgroundColor: \"#87CEEB\",\n },\n\n controlsArea: {\n flex: 1,\n backgroundColor: \"#cbd5e1\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"0 25px\",\n borderTop: \"6px solid #94a3b8\",\n },\n dpad: {\n display: \"flex\",\n gap: \"15px\",\n },\n controlBtn: {\n width: \"70px\",\n height: \"70px\",\n borderRadius: \"50%\",\n backgroundColor: \"#475569\",\n border: \"4px solid #334155\",\n color: \"white\",\n fontSize: \"26px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n boxShadow: \"0 5px 0 #1e293b\",\n cursor: \"pointer\",\n touchAction: \"none\",\n outline: \"none\",\n },\n jumpBtn: {\n width: \"90px\",\n height: \"90px\",\n backgroundColor: \"#e11d48\",\n border: \"4px solid #be123c\",\n fontSize: \"18px\",\n fontWeight: \"bold\",\n boxShadow: \"0 6px 0 #881337\",\n },\n\n overlay: {\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"rgba(30, 41, 59, 0.95)\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n zIndex: 10,\n padding: \"20px\",\n boxSizing: \"border-box\",\n textAlign: \"center\",\n },\n title: {\n fontSize: \"36px\",\n color: \"#fb7185\",\n marginBottom: \"20px\",\n textShadow: \"2px 2px 0px #000\",\n },\n instructions: {\n fontSize: \"16px\",\n color: \"#e2e8f0\",\n lineHeight: \"1.6\",\n marginBottom: \"40px\",\n },\n button: {\n padding: \"15px 30px\",\n fontSize: \"20px\",\n backgroundColor: \"#fb7185\",\n color: \"white\",\n border: \"4px solid #fff\",\n borderRadius: \"10px\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n fontFamily: FONT_FAMILY,\n textTransform: \"uppercase\",\n },\n\n wonCard: {\n backgroundColor: \"#fff0f6\",\n padding: \"30px\",\n borderRadius: \"20px\",\n boxShadow: \"0 10px 25px rgba(0,0,0,0.5)\",\n border: `4px solid #fb7185`,\n textAlign: \"center\",\n maxWidth: \"350px\",\n },\n confetti: { fontSize: \"30px\", marginBottom: \"15px\" },\n successTitle: {\n fontSize: \"24px\",\n color: \"#e11d48\",\n marginBottom: \"15px\",\n fontWeight: \"bold\",\n },\n loveText: {\n fontSize: \"16px\",\n lineHeight: \"1.6\",\n color: \"#334155\",\n margin: \"0 0 15px 0\",\n fontStyle: \"italic\",\n },\n scoreText: {\n fontSize: \"18px\",\n color: \"#d63384\",\n fontWeight: \"bold\",\n margin: 0,\n },\n};\n\nfunction client() {\n const styleSheet = document.createElement(\"style\");\n styleSheet.type = \"text/css\";\n styleSheet.innerText = `\n body { margin: 0; display: block; min-height: 100vh; overflow: hidden; background-color: #1e293b; } \n #root { display: block; width: 100%; height: 100vh; }\n button:active { transform: translateY(4px); box-shadow: 0 0 0 transparent !important; }\n `;\n document.head.appendChild(styleSheet);\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n Love Quest 👸\n \n \n \n \n

\n \n \n \n `,\n { headers: { \"content-type\": \"text/html; charset=UTF-8\" } },\n );\n}","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, {\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\n// --- Configuration ---\nconst FONT_FAMILY = \"'Courier New', Courier, monospace\";\nconst GRAVITY = 0.5;\nconst JUMP_POWER = -11.5;\nconst SPEED = 4.5;\nconst FRICTION = 0.8;\n\nconst FINAL_MESSAGE = {\n title: \"Ήρθες σε μένα! 💖\",\n body:\n \"Ξεπέρασες κάθε εμπόδιο, πάτησες κάθε τέρας και έφτασες στο τέρμα. Αλλά η αλήθεια είναι ότι ο τυχερός είμαι εγώ που έτρεξες σε εμένα. Σ' αγαπώ!\",\n};\n\n// --- Levels Design ---\n// 0=Κενό, 1=Πλατφόρμα, 2=Καρδιά, 3=Κοπέλα (Παίκτης 👸), 4=Εσύ (Στόχος 🧑), 5=Τερατάκι (👾)\nconst LEVELS = [\n // Πίστα 1: Εύκολη (Ένα τερατάκι για δοκιμή)\n [\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 2, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 4],\n [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1],\n [3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 1, 1, 1],\n [1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1],\n ],\n // Πίστα 2: Μεσαία (Περισσότερα τερατάκια και άλματα)\n [\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 4],\n [0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],\n [3, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 5, 0, 0, 1, 1],\n [1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1],\n ],\n // Πίστα 3: Δύσκολη (Στρατηγική και αντανακλαστικά)\n [\n [\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n ],\n [\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 2,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n ],\n [\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 0,\n 0,\n 0,\n 0,\n 2,\n 0,\n 0,\n 0,\n 0,\n 0,\n 2,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n ],\n [\n 0,\n 0,\n 0,\n 2,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 1,\n 0,\n 0,\n 1,\n 1,\n 1,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 4,\n ],\n [\n 0,\n 1,\n 1,\n 1,\n 1,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 1,\n ],\n [\n 3,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 5,\n 0,\n 0,\n 5,\n 0,\n 0,\n 0,\n 0,\n 0,\n 5,\n 0,\n 0,\n 0,\n 5,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 1,\n ],\n [\n 1,\n 1,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 1,\n 1,\n 1,\n 1,\n 0,\n 0,\n 0,\n 1,\n 1,\n 1,\n 1,\n 1,\n 1,\n 1,\n 0,\n 0,\n 1,\n 1,\n 1,\n 1,\n ],\n ],\n];\n\nconst BLOCK_SIZE = 45;\n\nfunction App() {\n const [gameState, setGameState] = useState<\n \"START\" | \"PLAYING\" | \"LEVEL_CLEARED\" | \"WON\" | \"LOST\"\n >(\"START\");\n const [currentLevel, setCurrentLevel] = useState(0);\n const [reactScore, setReactScore] = useState(0);\n\n const canvasRef = useRef(null);\n const animationId = useRef();\n const keys = useRef({ left: false, right: false, up: false });\n\n // Game Engine State\n const engine = useRef({\n player: {\n x: 0,\n y: 0,\n width: 30,\n height: 30,\n dx: 0,\n dy: 0,\n isGrounded: false,\n },\n goal: { x: 0, y: 0, width: 40, height: 40 },\n platforms: [] as { x: number; y: number; w: number; h: number }[],\n hearts: [] as { x: number; y: number; collected: boolean }[],\n enemies: [] as {\n x: number;\n y: number;\n w: number;\n h: number;\n dx: number;\n startX: number;\n isDead: boolean;\n }[],\n camera: { x: 0, y: 0 },\n levelWidth: 0,\n levelHeight: 0,\n score: 0,\n });\n\n // --- Initialize Specific Level ---\n const initLevel = useCallback((levelIndex: number, keepScore = false) => {\n const eng = engine.current;\n eng.platforms = [];\n eng.hearts = [];\n eng.enemies = []; // Καθαρισμός εχθρών\n\n if (!keepScore) eng.score = 0;\n\n keys.current = { left: false, right: false, up: false };\n\n const grid = LEVELS[levelIndex];\n eng.levelWidth = grid[0].length * BLOCK_SIZE;\n eng.levelHeight = grid.length * BLOCK_SIZE;\n\n for (let row = 0; row < grid.length; row++) {\n for (let col = 0; col < grid[row].length; col++) {\n const val = grid[row][col];\n const x = col * BLOCK_SIZE;\n const y = row * BLOCK_SIZE;\n\n if (val === 1) {\n eng.platforms.push({ x, y, w: BLOCK_SIZE, h: BLOCK_SIZE });\n } else if (val === 2) {\n eng.hearts.push({ x: x + 10, y: y + 10, collected: false });\n } else if (val === 3) {\n eng.player.x = x;\n eng.player.y = y;\n eng.player.dx = 0;\n eng.player.dy = 0;\n } else if (val === 4) {\n eng.goal.x = x;\n eng.goal.y = y - 10;\n } else if (val === 5) {\n // Δημιουργία Εχθρού\n eng.enemies.push({\n x: x,\n y: y + 10,\n w: 30,\n h: 30,\n dx: 1.5,\n startX: x,\n isDead: false,\n });\n }\n }\n }\n\n setCurrentLevel(levelIndex);\n setGameState(\"PLAYING\");\n }, []);\n\n // --- Game Loop (Physics & Drawing) ---\n useEffect(() => {\n if (gameState !== \"PLAYING\") return;\n\n const canvas = canvasRef.current;\n const ctx = canvas?.getContext(\"2d\");\n if (!canvas || !ctx) return;\n\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight * 0.60;\n\n const eng = engine.current;\n\n const gameLoop = () => {\n // --- 1. PHYSICS & INPUT ---\n if (keys.current.left) eng.player.dx -= 0.6;\n if (keys.current.right) eng.player.dx += 0.6;\n\n eng.player.dx *= FRICTION;\n if (eng.player.dx > SPEED) eng.player.dx = SPEED;\n if (eng.player.dx < -SPEED) eng.player.dx = -SPEED;\n\n if (keys.current.up && eng.player.isGrounded) {\n eng.player.dy = JUMP_POWER;\n eng.player.isGrounded = false;\n keys.current.up = false;\n }\n\n eng.player.dy += GRAVITY;\n\n // --- 2. COLLISION X (Player vs Platforms) ---\n eng.player.x += eng.player.dx;\n for (let p of eng.platforms) {\n if (\n eng.player.x < p.x + p.w && eng.player.x + eng.player.width > p.x &&\n eng.player.y < p.y + p.h && eng.player.y + eng.player.height > p.y\n ) {\n if (eng.player.dx > 0) eng.player.x = p.x - eng.player.width;\n if (eng.player.dx < 0) eng.player.x = p.x + p.w;\n eng.player.dx = 0;\n }\n }\n\n // --- 3. COLLISION Y (Player vs Platforms) ---\n eng.player.y += eng.player.dy;\n eng.player.isGrounded = false;\n for (let p of eng.platforms) {\n if (\n eng.player.x < p.x + p.w && eng.player.x + eng.player.width > p.x &&\n eng.player.y < p.y + p.h && eng.player.y + eng.player.height > p.y\n ) {\n if (eng.player.dy > 0) {\n eng.player.y = p.y - eng.player.height;\n eng.player.dy = 0;\n eng.player.isGrounded = true;\n } else if (eng.player.dy < 0) {\n eng.player.y = p.y + p.h;\n eng.player.dy = 0;\n }\n }\n }\n\n // Fall off map\n if (eng.player.y > eng.levelHeight + 150) {\n setReactScore(eng.score);\n setGameState(\"LOST\");\n return;\n }\n\n if (eng.player.x < 0) eng.player.x = 0;\n if (eng.player.x + eng.player.width > eng.levelWidth) {\n eng.player.x = eng.levelWidth - eng.player.width;\n }\n\n // --- 4. ENEMIES (Update & Collision) ---\n for (let enemy of eng.enemies) {\n if (enemy.isDead) continue;\n\n // Κίνηση Εχθρού (Περιπολία αριστερά - δεξιά)\n enemy.x += enemy.dx;\n if (enemy.x > enemy.startX + 60 || enemy.x < enemy.startX - 60) {\n enemy.dx *= -1; // Αλλάζει κατεύθυνση αν απομακρυνθεί πολύ\n }\n\n // Σύγκρουση Παίκτη με Εχθρό\n if (\n eng.player.x < enemy.x + enemy.w &&\n eng.player.x + eng.player.width > enemy.x &&\n eng.player.y < enemy.y + enemy.h &&\n eng.player.y + eng.player.height > enemy.y\n ) {\n // Το έκανε σαν Mario; (Προσγειώθηκε στο κεφάλι του εχθρού από πάνω)\n // Ελέγχουμε αν έπεφτε (dy > 0) και αν το κάτω μέρος της κοπέλας ήταν περίπου στο ύψος του πάνω μέρους του τέρατος\n if (\n eng.player.dy > 0 &&\n eng.player.y + eng.player.height - eng.player.dy <= enemy.y + 15\n ) {\n enemy.isDead = true; // Το τέρας πεθαίνει\n eng.player.dy = JUMP_POWER * 0.8; // Κάνει αναπήδηση!\n eng.score += 5; // Bonus πόντοι\n } else {\n // Χτύπησε από το πλάι ή από κάτω -> Game Over\n setReactScore(eng.score);\n setGameState(\"LOST\");\n return;\n }\n }\n }\n\n // --- 5. COLLECTIBLES & GOAL ---\n eng.hearts.forEach((h) => {\n if (!h.collected) {\n if (\n eng.player.x < h.x + 20 && eng.player.x + eng.player.width > h.x &&\n eng.player.y < h.y + 20 && eng.player.y + eng.player.height > h.y\n ) {\n h.collected = true;\n eng.score += 1;\n }\n }\n });\n\n if (\n eng.player.x < eng.goal.x + eng.goal.width &&\n eng.player.x + eng.player.width > eng.goal.x &&\n eng.player.y < eng.goal.y + eng.goal.height &&\n eng.player.y + eng.player.height > eng.goal.y\n ) {\n setReactScore(eng.score);\n if (currentLevel < LEVELS.length - 1) {\n setGameState(\"LEVEL_CLEARED\");\n } else {\n setGameState(\"WON\");\n }\n return;\n }\n\n // --- 6. CAMERA ---\n eng.camera.x = eng.player.x - canvas.width / 2.5;\n if (eng.camera.x < 0) eng.camera.x = 0;\n if (eng.camera.x > eng.levelWidth - canvas.width) {\n eng.camera.x = Math.max(0, eng.levelWidth - canvas.width);\n }\n\n // --- 7. DRAWING ---\n ctx.fillStyle = \"#87CEEB\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n ctx.save();\n ctx.translate(-eng.camera.x, 0);\n\n // Πλατφόρμες\n ctx.fillStyle = \"#4ade80\";\n eng.platforms.forEach((p) => {\n ctx.fillRect(p.x, p.y, p.w, p.h);\n ctx.fillStyle = \"#a36a00\";\n ctx.fillRect(p.x, p.y + 10, p.w, p.h - 10);\n ctx.fillStyle = \"#4ade80\";\n });\n\n // Καρδιές\n ctx.font = \"22px Arial\";\n eng.hearts.forEach((h) => {\n if (!h.collected) ctx.fillText(\"❤️\", h.x, h.y + 15);\n });\n\n // Εχθροί (Τερατάκια)\n ctx.font = \"30px Arial\";\n eng.enemies.forEach((e) => {\n if (!e.isDead) ctx.fillText(\"👾\", e.x, e.y + 25);\n });\n\n // Goal (Εσύ 🧑)\n ctx.font = \"40px Arial\";\n ctx.fillText(\"🧑\", eng.goal.x, eng.goal.y + 35);\n\n // Player (Εκείνη 👸)\n ctx.font = \"30px Arial\";\n ctx.fillText(\"👸\", eng.player.x, eng.player.y + 25);\n\n ctx.restore();\n\n // UI: Score\n ctx.fillStyle = \"black\";\n ctx.font = \"bold 20px Courier New\";\n ctx.fillText(`Αγάπη: ${eng.score}`, 20, 30);\n\n animationId.current = requestAnimationFrame(gameLoop);\n };\n\n gameLoop();\n\n return () => {\n if (animationId.current) cancelAnimationFrame(animationId.current);\n };\n }, [gameState, currentLevel]);\n\n return (\n

\n {gameState === \"START\" && (\n

Love Quest 👸

\n Ένα κλασικό παιχνίδι αποκλειστικά για εσένα!
\n
\n Πέρασε τα εμπόδια, πάτα πάνω στα τερατάκια (👾) για να τα νικήσεις,\n και έλα να με βρεις στο τέρμα!\n

\n \n

\n )}\n\n {(gameState === \"PLAYING\" || gameState === \"LOST\" ||\n gameState === \"WON\" || gameState === \"LEVEL_CLEARED\") && (\n

\n Πίστα: {currentLevel + 1} / {LEVELS.length}\n

\n )}\n\n {gameState === \"LEVEL_CLEARED\" && (\n

Με βρήκες! 💖

\n Τα κατάφερες τέλεια στην Πίστα {currentLevel + 1}. Συνεχίζουμε;\n

\n initLevel(currentLevel + 1, true)}\n style={styles.button}\n >\n Επόμενη Πίστα ➡️\n \n

\n )}\n\n {gameState === \"LOST\" && (\n

Ουπς! 🥺

\n Σκόνταψες σε ένα εμπόδιο... Αλλά εγώ θα σε πιάνω πάντα!\n

\n initLevel(currentLevel, true)}\n style={styles.button}\n >\n Try Again 🔄\n \n

\n )}\n\n {gameState === \"WON\" && (\n

🎉👸❤️🧑🎉

{FINAL_MESSAGE.title}

{FINAL_MESSAGE.body}

Μάζεψες {reactScore} πόντους αγάπης!

\n )}\n

\n \n \n \n `,\n { headers: { \"content-type\": \"text/html; charset=UTF-8\" } },\n );\n}","createdAt",["D",1775583333103],"branchVersion","branchId","2a199d08-32a6-11f1-95f2-42dde27851f2","id","2a154c58-32a6-11f1-95f2-42dde27851f2","mario",["D",1775582467628],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c201a-c6d5-73df-9c72-e5a567918c20","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019c201a-c6d5-73df-9c72-eb12f876751d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":50,"_92":93,"_94":95,"_96":45,"_97":98},"isOwned",6,"main","projectId","forkedBranchId","fdd9b22e-27b0-11f0-aecd-569c3dd06744","forkedBranchVersion",11,"forkedProjectPrivacy","forkedProjectId","fdd966ca-27b0-11f0-aecd-569c3dd06744","forkedProjectOrgId","1ea2ca52-aecd-4993-8c60-cb61483dff1b","projectName","userHandle","alexandrosgalazoulas96","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5ODYyMzhDV3h6QnVKc2dNaFN0akxjMUJSaCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":175,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":176,"_79":177,"_81":178,"_83":25},"tree",[166,167],"files",[166,167],"counts",{"_156":61,"_157":152,"_158":61,"_159":160,"_161":162},"contents",[140,141],"upstreamProject",{"_43":93,"_32":137,"_52":-5,"_53":-5,"_49":50,"_77":138},"upstreamBranch",{"_43":88,"_38":131,"_132":133,"_32":85,"_86":93,"_13":90,"_87":-5,"_89":-5,"_134":135,"_47":-5,"_83":25,"_49":50,"_97":136,"_62":95,"_96":137},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],"updatedAt",["D",1739338420215],"lockfileKey","1767110342515-esm.town_v_mewtru_valentine@11-main","mewtru","valentine",{"_99":136,"_106":139},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_43":149,"_32":150,"_30":151,"_143":-5,"_41":42,"_40":152,"_144":57,"_38":153,"_13":61,"_33":20,"_35":154,"_24":25,"_147":-5,"_27":155},{"_43":142,"_32":28,"_30":31,"_143":-5,"_41":42,"_40":14,"_144":25,"_38":145,"_13":146,"_33":34,"_35":37,"_24":25,"_147":-5,"_27":148},"2de6cca6-32a8-11f1-89cd-42dde27851f2","parentId","latest",["D",1775583333103],4,"label",[28],"2a1c8658-32a6-11f1-95f2-42dde27851f2","README.md","019d68f6-56ab-7088-8cef-1d484923490a",1,["D",1775582467628],"Hello!!! \n\nFeel free to mess around with this val and make it your own :). Just click on \"Fork\" in the top right.\n\nYou can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!\n\nHave fun with it and hopefully your crush says yes hehe.",[150],"pulls","branches","forks","envVars",{"_163":61,"_165":61},"connections",{"_163":61,"_164":61},"count","unfilledCount","emptyCount",{"_43":149,"_32":150,"_30":151,"_143":-5,"_41":42,"_40":152,"_144":57,"_38":172,"_13":61,"_33":20,"_35":154,"_24":25,"_147":-5,"_169":173,"_27":174},{"_43":142,"_32":28,"_30":31,"_143":-5,"_41":42,"_40":14,"_144":25,"_38":168,"_13":146,"_33":34,"_35":37,"_24":25,"_147":-5,"_169":170,"_27":171},["D",1775583333103],"children",[],[28],["D",1775582467628],[],[150],["D",1775582467628],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":50,"_92":93,"_94":95,"_96":45,"_97":98},"ctx",{"_77":-5,"_128":212,"_213":214,"_215":216,"_217":25,"_218":25,"_219":25,"_220":57,"_221":-5,"_222":-7,"_223":-7,"_224":61,"_225":25,"_226":25,"_227":-5,"_228":25,"_229":25,"_230":25,"_231":-5},"ENV",{"_183":184,"_185":186,"_187":85,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v5