[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":26,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68bc38badd14819190331b8447918d4f","versionInt","title","Recursive Tower Game","type","code/react","content","import React, { useState, useEffect } from 'react';\nimport { Play, RotateCcw, CheckCircle, AlertCircle, Lightbulb } from 'lucide-react';\n\nconst RecursiveTowerGame = () => {\n const [currentLevel, setCurrentLevel] = useState(0);\n const [isRunning, setIsRunning] = useState(false);\n const [callStack, setCallStack] = useState([]);\n const [result, setResult] = useState(null);\n const [showHint, setShowHint] = useState(false);\n const [playerCode, setPlayerCode] = useState('');\n const [feedback, setFeedback] = useState('');\n\n const levels = [\n {\n id: 0,\n title: \"ספירה לאחור\",\n description: \"צור פעולה שסופרת מ-n עד 1\",\n problem: \"Countdown(5) אמורה להדפיס: 5, 4, 3, 2, 1\",\n baseCase: \"if (n <= 0) return;\",\n recursiveStep: \"Countdown(n - 1);\",\n hint: \"מקרה בסיס: מתי עלינו להפסיק לספור? צעד רקורסיבי: מה הגרסה הקטנה יותר של Countdown(n)?\",\n starterCode: `static void Countdown(int n)\n{\n // מקרה בסיס: מתי להפסיק?\n \n \n // הדפס את המספר הנוכחי\n Console.WriteLine(n);\n \n // צעד רקורסיבי: בעיה קטנה יותר\n \n}`,\n solution: `static void Countdown(int n)\n{\n if (n <= 0) return;\n Console.WriteLine(n);\n Countdown(n - 1);\n}`,\n testInput: 5\n },\n {\n id: 1,\n title: \"מחשבון עצרת\",\n description: \"חישוב n! = n × (n-1) × ... × 1\",\n problem: \"Factorial(4) אמורה להחזיר 24\",\n baseCase: \"if (n <= 1) return 1;\",\n recursiveStep: \"return n * Factorial(n - 1);\",\n hint: \"מקרה בסיס: מה ערכי הבסיס של Factorial? צעד רקורסיבי: איך Factorial(n) קשור ל‑Factorial(n‑1)?\",\n starterCode: `static int Factorial(int n)\n{\n // מקרה בסיס: העצרת הקטנה ביותר\n \n \n // צעד רקורסיבי: n כפול עצרת קטנה יותר\n \n}`,\n solution: `static int Factorial(int n)\n{\n if (n <= 1) return 1;\n return n * Factorial(n - 1);\n}`,\n testInput: 4\n },\n {\n id: 2,\n title: \"גובה פירמידה\",\n description: \"חישוב סך כל הקוביות הדרושות לפירמידה\",\n problem: \"Pyramid(3) זקוקה ל-6 קוביות (3 + 2 + 1)\",\n baseCase: \"if (n <= 0) return 0;\",\n recursiveStep: \"return n + Pyramid(n - 1);\",\n hint: \"מקרה בסיס: כמה קוביות לגובה 0? צעד רקורסיבי: n + Pyramid(n‑1) (פירמידה קטנה יותר)\",\n starterCode: `static int Pyramid(int n)\n{\n // מקרה בסיס: אין רמות\n \n \n // צעד רקורסיבי: הרמה הזו + פירמידה קטנה יותר\n \n}`,\n solution: `static int Pyramid(int n)\n{\n if (n <= 0) return 0;\n return n + Pyramid(n - 1);\n}`,\n testInput: 3\n },\n {\n id: 3,\n title: \"כוח מתמטי\",\n description: \"חישוב x^n (x בחזקת n)\",\n problem: \"Power(2, 4) אמורה להחזיר 16\",\n baseCase: \"if (n == 0) return 1;\",\n recursiveStep: \"return x * Power(x, n - 1);\",\n hint: \"מקרה בסיס: מה זה כל מספר בחזקת 0? צעד רקורסיבי: איך Power(x,n) קשור ל‑Power(x,n‑1)?\",\n starterCode: `static int Power(int x, int n)\n{\n // מקרה בסיס: כל מספר בחזקת 0\n \n \n // צעד רקורסיבי: x כפול חזקה קטנה יותר\n \n}`,\n solution: `static int Power(int x, int n)\n{\n if (n == 0) return 1;\n return x * Power(x, n - 1);\n}`,\n testInput: [2, 4]\n },\n {\n id: 4,\n title: \"חיפוש במערך\",\n description: \"מציאת סכום כל האלמנטים במערך\",\n problem: \"SumArray([1, 2, 3, 4]) אמורה להחזיר 10\",\n baseCase: \"if (i >= arr.Length) return 0;\",\n recursiveStep: \"return arr[i] + SumArray(arr, i + 1);\",\n hint: \"מקרה בסיס: כש‑i הגיע לסוף המערך. צעד רקורסיבי: arr[i] + SumArray(arr, i+1) (ללא slice).\",\n starterCode: `static int SumArray(int[] arr, int i = 0)\n{\n // מקרה בסיס: כשהאינדקס הגיע לסוף\n \n \n // צעד רקורסיבי: איבר נוכחי + סכום יתרת המערך ע\"י הגדלת אינדקס\n \n}`,\n solution: `static int SumArray(int[] arr, int i = 0)\n{\n if (i >= arr.Length) return 0;\n return arr[i] + SumArray(arr, i + 1);\n}`,\n testInput: [1, 2, 3, 4]\n },\n {\n id: 5,\n title: \"רצף פיבונאצ'י\",\n description: \"חישוב המספר ה-n ברצף פיבונאצ'י\",\n problem: \"Fibonacci(6) אמורה להחזיר 8 (0,1,1,2,3,5,8)\",\n baseCase: \"if (n <= 1) return n;\",\n recursiveStep: \"return Fibonacci(n - 1) + Fibonacci(n - 2);\",\n hint: \"מקרה בסיס: Fibonacci(0) ו‑Fibonacci(1). צעד רקורסיבי: Fibonacci(n) = Fibonacci(n‑1) + Fibonacci(n‑2)\",\n starterCode: `static int Fibonacci(int n)\n{\n // מקרה בסיס: המספרים הראשונים ברצף\n \n \n // צעד רקורסיבי: סכום שני המספרים הקודמים\n \n}`,\n solution: `static int Fibonacci(int n)\n{\n if (n <= 1) return n;\n return Fibonacci(n - 1) + Fibonacci(n - 2);\n}`,\n testInput: 6\n }\n ];\n\n const currentLevelData = levels[currentLevel];\n\n const runCode = async () => {\n setIsRunning(true);\n setCallStack([]);\n setResult(null);\n setFeedback('');\n\n // Simple code execution simulation\n try {\n // Extract function body for validation\n const codeLines = playerCode.split('\\n').map(line => line.trim()).filter(line => line);\n const hasBaseCase = codeLines.some(line => \n line.includes('if') && (line.includes('return') || line.includes('<=') || line.includes('==='))\n );\n \n let functionName = '';\n if (currentLevel === 0) functionName = 'Countdown';\n else if (currentLevel === 1) functionName = 'Factorial';\n else if (currentLevel === 2) functionName = 'Pyramid';\n else if (currentLevel === 3) functionName = 'Power';\n else if (currentLevel === 4) functionName = 'SumArray';\n else if (currentLevel === 5) functionName = 'Fibonacci';\n\n const hasRecursiveCall = codeLines.some(line => \n line.includes(functionName) && line.includes('(') && \n (\n line.includes('n-1') || line.includes('n - 1') ||\n line.includes('arr.slice') ||\n line.includes('n-2') ||\n line.includes('i+1') || line.includes('i + 1') ||\n line.includes('index+1') || line.includes('index + 1')\n )\n );\n\n if (!hasBaseCase) {\n setFeedback('❌ חסר מקרה בסיס! הפעולה שלך צריכה תנאי עצירה.');\n setIsRunning(false);\n return;\n }\n\n if (!hasRecursiveCall) {\n setFeedback('❌ חסר צעד רקורסיבי! הפעולה שלך צריכה לקרוא לעצמה עם בעיה קטנה יותר.');\n setIsRunning(false);\n return;\n }\n\n // Simulate execution with call stack visualization\n if (currentLevel === 3) {\n await simulateExecution(currentLevelData.testInput[0], currentLevelData.testInput[1]);\n } else {\n await simulateExecution(currentLevelData.testInput);\n }\n \n setFeedback('✅ כל הכבוד! הפעולה הרקורסיבית שלך עובדת נכון!');\n } catch (error) {\n setFeedback('❌ נראה שיש שגיאה בקוד שלך. בדוק את התחביר!');\n }\n \n setIsRunning(false);\n };\n\n const simulateExecution = async (input1, input2 = null) => {\n const steps = [];\n\n // Simulate the recursive calls based on level\n if (currentLevel === 0) { // Countdown\n const simulate = (value, depth = 0) => {\n if (value <= 0) {\n steps.push({ type: 'base', value, depth, result: null });\n return null;\n }\n steps.push({ type: 'call', value, depth });\n simulate(value - 1, depth + 1);\n steps.push({ type: 'return', value, depth, result: null });\n return null;\n };\n simulate(input1);\n } else if (currentLevel === 1) { // factorial\n const simulate = (value, depth = 0) => {\n if (value <= 1) {\n steps.push({ type: 'base', value, depth, result: 1 });\n return 1;\n }\n steps.push({ type: 'call', value, depth });\n const recursiveResult = simulate(value - 1, depth + 1);\n const result = value * recursiveResult;\n steps.push({ type: 'return', value, depth, result });\n return result;\n };\n simulate(input1);\n } else if (currentLevel === 2) { // pyramid\n const simulate = (value, depth = 0) => {\n if (value <= 0) {\n steps.push({ type: 'base', value, depth, result: 0 });\n return 0;\n }\n steps.push({ type: 'call', value, depth });\n const recursiveResult = simulate(value - 1, depth + 1);\n const result = value + recursiveResult;\n steps.push({ type: 'return', value, depth, result });\n return result;\n };\n simulate(input1);\n } else if (currentLevel === 3) { // power\n const simulate = (x, n, depth = 0) => {\n if (n === 0) {\n steps.push({ type: 'base', value: `${x}, ${n}`, depth, result: 1 });\n return 1;\n }\n steps.push({ type: 'call', value: `${x}, ${n}`, depth });\n const recursiveResult = simulate(x, n - 1, depth + 1);\n const result = x * recursiveResult;\n steps.push({ type: 'return', value: `${x}, ${n}`, depth, result });\n return result;\n };\n simulate(input1, input2);\n } else if (currentLevel === 4) { // sumArray (index-based)\n const simulate = (arr, i = 0, depth = 0) => {\n if (i >= arr.length) {\n steps.push({ type: 'base', value: `[${arr.join(',')}] , i=${i}`, depth, result: 0 });\n return 0;\n }\n steps.push({ type: 'call', value: `[${arr.join(',')}] , i=${i}`, depth });\n const recursiveResult = simulate(arr, i + 1, depth + 1);\n const result = arr[i] + recursiveResult;\n steps.push({ type: 'return', value: `[${arr.join(',')}] , i=${i}`, depth, result });\n return result;\n };\n simulate(input1);\n } else if (currentLevel === 5) { // fibonacci\n const memo = {};\n const simulate = (n, depth = 0) => {\n if (n <= 1) {\n steps.push({ type: 'base', value: n, depth, result: n });\n return n;\n }\n if (memo[n]) return memo[n];\n \n steps.push({ type: 'call', value: n, depth });\n const result1 = simulate(n - 1, depth + 1);\n const result2 = simulate(n - 2, depth + 1);\n const result = result1 + result2;\n memo[n] = result;\n steps.push({ type: 'return', value: n, depth, result });\n return result;\n };\n simulate(input1);\n }\n\n // Get function name for display\n let functionName = '';\n if (currentLevel === 0) functionName = 'Countdown';\n else if (currentLevel === 1) functionName = 'Factorial';\n else if (currentLevel === 2) functionName = 'Pyramid';\n else if (currentLevel === 3) functionName = 'Power';\n else if (currentLevel === 4) functionName = 'SumArray';\n else if (currentLevel === 5) functionName = 'Fibonacci';\n\n // Animate the steps\n for (let i = 0; i < steps.length; i++) {\n const step = steps[i];\n \n if (step.type === 'call') {\n setCallStack(prev => [...prev, { \n call: `${functionName}(${step.value})`,\n depth: step.depth \n }]);\n } else if (step.type === 'base') {\n setCallStack(prev => [...prev, { \n call: `${functionName}(${step.value}) → ${step.result}`,\n depth: step.depth,\n isBase: true \n }]);\n } else if (step.type === 'return') {\n setCallStack(prev => {\n const newStack = [...prev];\n // Update the call to show return value\n for (let j = newStack.length - 1; j >= 0; j--) {\n if (newStack[j].depth === step.depth && !newStack[j].returned) {\n newStack[j].call = `${functionName}(${step.value}) → ${step.result}`;\n newStack[j].returned = true;\n break;\n }\n }\n return newStack;\n });\n }\n \n await new Promise(resolve => setTimeout(resolve, 800));\n }\n\n // Set final result\n if (steps.length > 0) {\n const finalStep = steps[steps.length - 1];\n setResult(finalStep.result);\n }\n };\n\n const resetLevel = () => {\n setCallStack([]);\n setResult(null);\n setFeedback('');\n setPlayerCode(currentLevelData.starterCode);\n };\n\n const nextLevel = () => {\n if (currentLevel < levels.length - 1) {\n setCurrentLevel(currentLevel + 1);\n setCallStack([]);\n setResult(null);\n setFeedback('');\n setShowHint(false);\n }\n };\n\n useEffect(() => {\n setPlayerCode(currentLevelData.starterCode);\n setCallStack([]);\n setResult(null);\n setFeedback('');\n setShowHint(false);\n }, [currentLevel]);\n\n return (\n

🏗️ המגדל הרקורסיבי

למד רקורסיה על ידי בניית פעולות שקוראות לעצמן!

\n\n {/* Level Progress */}\n

\n {levels.map((_, index) => (\n \n {index + 1}\n

\n ))}\n

\n\n

\n {/* Left Panel - Problem & Code */}\n

{currentLevelData.title}

{currentLevelData.description}

{currentLevelData.problem}

\n \n {/* Hint Button */}\n setShowHint(!showHint)}\n className=\"flex items-center space-x-2 mb-4 px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg transition-colors\"\n >\n \n {showHint ? 'הסתר רמז' : 'הראה רמז'}\n \n\n {showHint && (\n

{currentLevelData.hint}

\n )}\n

\n\n {/* Code Editor */}\n

הקוד שלך:

\n setPlayerCode(e.target.value)}\n className=\"w-full h-64 bg-black/50 text-green-300 font-mono p-4 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none\"\n placeholder=\"כתוב כאן את הפעולה הרקורסיבית שלך...\"\n dir=\"ltr\"\n />\n \n {/* Controls */}\n

\n \n \n {isRunning ? 'רץ...' : 'הרץ קוד'}\n \n \n \n \n איפוס\n \n

\n\n {/* Feedback */}\n {feedback && (\n

{feedback}

\n {feedback.includes('✅') && currentLevel < levels.length - 1 && (\n \n שלב הבא ←\n \n )}\n {feedback.includes('✅') && currentLevel === levels.length - 1 && (\n

🎉 מזל טוב! סיימת את כל השלבים!

עכשיו אתה מבין רקורסיה!

\n )}\n

\n\n {/* Right Panel - Call Stack Visualization */}\n

📚 מחסנית הקריאות

\n צפה איך הפעולה שלך קוראת לעצמה ונפתרת:\n

\n \n

\n {callStack.length === 0 ? (\n

הרץ את הקוד כדי לראות את מחסנית הקריאות!

\n ) : (\n callStack.map((call, index) => (\n \n {call.call}\n {call.isBase && (מקרה בסיס!)}\n

\n ))\n )}\n

\n\n {result !== null && (\n

תוצאה סופית:

{result}

\n )}\n\n {/* Key Concepts Box */}\n

🔑 מושגי מפתח:

\n מקרה בסיס:\n {currentLevelData.baseCase}\n

\n צעד רקורסיבי:\n {currentLevelData.recursiveStep}\n

\n \n \n );\n};\n\nexport default RecursiveTowerGame;\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","1121594442838112066","traceTime",1776400213081]