[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":29,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69630872fd608191bf9c1dd66d5d5344","versionInt","title","Scratch Repeat Say Start","type","code/react","content","import React, { useState, useRef, useEffect } from \"react\";\n\nexport default function ScratchPlayground() {\n const COLORS = [\n \"bg-red-400\",\"bg-orange-400\",\"bg-yellow-400\",\"bg-lime-400\",\"bg-green-400\",\n \"bg-teal-400\",\"bg-cyan-400\",\"bg-sky-400\",\"bg-blue-400\",\"bg-indigo-400\",\n \"bg-violet-400\",\"bg-purple-400\",\"bg-fuchsia-400\",\"bg-pink-400\",\"bg-rose-400\"\n ];\n\n const BLOCK_TEMPLATES = [\n { type: \"event\", label: \"When Start\", params: [] },\n { type: \"motion\", label: \"Move steps\", params: [10] },\n { type: \"motion\", label: \"Turn right\", params: [15] },\n { type: \"motion\", label: \"Turn left\", params: [15] },\n { type: \"motion\", label: \"Go to X,Y\", params: [0,0] },\n { type: \"motion\", label: \"Change X by\", params: [10] },\n { type: \"motion\", label: \"Change Y by\", params: [10] },\n { type: \"motion\", label: \"Set X to\", params: [0] },\n { type: \"motion\", label: \"Set Y to\", params: [0] },\n { type: \"looks\", label: \"Say\", params: [\"Hello!\"] },\n { type: \"control\", label: \"Wait secs\", params: [1] },\n // only Repeat is a container in the templates\n { type: \"control\", label: \"Repeat\", params: [5], children: [] }\n ].map((b,i)=> ({ id:`block-${i}`, color: COLORS[i % COLORS.length], ...b }));\n\n const [scriptBlocks, setScriptBlocks] = useState([]);\n const [running, setRunning] = useState(false);\n const [speech, setSpeech] = useState(null);\n const dragOrigin = useRef(null);\n const canvasRef = useRef(null);\n const spriteRef = useRef({ x: 150, y: 100, dir: 90 });\n const runRef = useRef(false);\n const speechRef = useRef(null);\n\n // Create a runtime instance of a block. IMPORTANT: always initialize `children` to an array\n // (this fixes the runtime splice crash when insertAtPath traverses children). We also keep\n // an `isContainer` flag to indicate whether the block *should* show an inner drop area.\n function makeInstance(block) {\n return {\n ...block,\n uid: `${block.id}-${Date.now()}-${Math.random().toString(36).slice(2,8)}`,\n params: Array.isArray(block.params) ? block.params.slice() : [],\n // always an array so traversal is safe\n children: Array.isArray(block.children) ? [] : [],\n // remember if the template declared children so we don't render inner area for normal blocks\n isContainer: Array.isArray(block.children)\n };\n }\n\n function onPaletteDragStart(e, block) {\n dragOrigin.current = { type: 'palette', block };\n e.dataTransfer.setData('text/plain', block.id);\n e.dataTransfer.effectAllowed = 'copy';\n }\n\n function onScriptDragStart(e, path) {\n dragOrigin.current = { type: 'script', path };\n e.dataTransfer.setData('text/plain', JSON.stringify(path));\n e.dataTransfer.effectAllowed = 'move';\n }\n\n function isSameParent(pathA, pathB) {\n if (pathA.length === 1 && pathB.length === 1) return true;\n if (pathA.length === 1 || pathB.length === 1) return false;\n const pa = pathA.slice(0, -1);\n const pb = pathB.slice(0, -1);\n return JSON.stringify(pa) === JSON.stringify(pb);\n }\n\n function isAncestor(ancestorPath, descendantPath) {\n if (ancestorPath.length >= descendantPath.length) return false;\n for (let i = 0; i < ancestorPath.length; i++) {\n if (ancestorPath[i] !== descendantPath[i]) return false;\n }\n return true;\n }\n\n // Insert newBlock into `blocks` at the specified path.\n // path = [i] means insert at index i in `blocks`.\n // path = [a,b,c] means go to blocks[a].children -> insert at index b in that array, etc.\n function insertAtPath(blocks, path, newBlock) {\n if (path.length === 1) {\n blocks.splice(path[0], 0, newBlock);\n return;\n }\n const parentPath = path.slice(0, -1);\n const insertIndex = path[path.length - 1];\n let target = blocks;\n // traverse creating children arrays if they don't exist (safety)\n for (let i = 0; i < parentPath.length; i++) {\n const idx = parentPath[i];\n if (!target[idx]) {\n // invalid path - create a safe placeholder container so we can splice into it\n target[idx] = { uid: `__placeholder-${Date.now()}`, params: [], children: [] };\n }\n if (!Array.isArray(target[idx].children)) target[idx].children = [];\n target = target[idx].children;\n }\n target.splice(insertIndex, 0, newBlock);\n }\n\n function removeAtPath(blocks, path) {\n if (path.length === 1) {\n return blocks.splice(path[0], 1)[0];\n }\n const parentPath = path.slice(0, -1);\n const removeIndex = path[path.length - 1];\n let target = blocks;\n for (let i = 0; i < parentPath.length; i++) {\n const idx = parentPath[i];\n if (!target[idx]) return undefined;\n if (!Array.isArray(target[idx].children)) target[idx].children = [];\n target = target[idx].children;\n }\n return target.splice(removeIndex, 1)[0];\n }\n\n function onScriptDrop(e, dropPath) {\n e.preventDefault();\n const origin = dragOrigin.current;\n if (!origin) return;\n\n // Prevent dropping a node into one of its own descendants\n if (origin.type === 'script' && isAncestor(origin.path, dropPath.slice(0, origin.path.length))) {\n dragOrigin.current = null;\n return;\n }\n\n const copy = JSON.parse(JSON.stringify(scriptBlocks));\n\n if (origin.type === 'palette') {\n const instance = makeInstance(origin.block);\n insertAtPath(copy, dropPath, instance);\n } else if (origin.type === 'script') {\n const sameParent = isSameParent(origin.path, dropPath);\n const moved = removeAtPath(copy, origin.path);\n if (moved === undefined) {\n dragOrigin.current = null;\n return; // nothing to move\n }\n let adjustedDropPath = dropPath.slice();\n if (sameParent) {\n const originIdx = origin.path[origin.path.length - 1];\n const dropIdx = dropPath[dropPath.length - 1];\n if (originIdx < dropIdx) adjustedDropPath[adjustedDropPath.length - 1] = dropIdx - 1;\n }\n insertAtPath(copy, adjustedDropPath, moved);\n }\n\n setScriptBlocks(copy);\n dragOrigin.current = null;\n }\n\n function allowDrop(e) { e.preventDefault(); }\n\n function getAtPath(blocks, path) {\n let cur = blocks;\n for (let i = 0; i < path.length; i++) {\n const idx = path[i];\n if (!cur[idx]) return { parent: cur, index: idx, node: undefined };\n if (i === path.length - 1) return { parent: cur, index: idx, node: cur[idx] };\n cur = cur[idx].children;\n }\n return { parent: cur, index: 0, node: undefined };\n }\n\n function updateParam(path, paramIndex, value) {\n setScriptBlocks(s => {\n const copy = JSON.parse(JSON.stringify(s));\n const { node } = getAtPath(copy, path);\n if (!node) return s;\n node.params[paramIndex] = value;\n return copy;\n });\n }\n\n function deleteBlock(path) {\n setScriptBlocks(s => {\n const copy = JSON.parse(JSON.stringify(s));\n removeAtPath(copy, path);\n return copy;\n });\n }\n\n function sleep(ms) { return new Promise(res => setTimeout(res, ms)); }\n\n async function executeBlocks(blocks) {\n if (!Array.isArray(blocks)) return;\n const ctx = canvasRef.current?.getContext('2d');\n for (const block of blocks) {\n if (!runRef.current) break;\n switch (block.label) {\n case 'Move steps':\n spriteRef.current.x += Math.cos(spriteRef.current.dir * Math.PI/180) * Number(block.params[0] || 0);\n spriteRef.current.y += Math.sin(spriteRef.current.dir * Math.PI/180) * Number(block.params[0] || 0);\n break;\n case 'Turn right':\n spriteRef.current.dir += Number(block.params[0] || 0);\n break;\n case 'Turn left':\n spriteRef.current.dir -= Number(block.params[0] || 0);\n break;\n case 'Go to X,Y':\n spriteRef.current.x = Number(block.params[0] || 0);\n spriteRef.current.y = Number(block.params[1] || 0);\n break;\n case 'Change X by':\n spriteRef.current.x += Number(block.params[0] || 0);\n break;\n case 'Change Y by':\n spriteRef.current.y += Number(block.params[0] || 0);\n break;\n case 'Set X to':\n spriteRef.current.x = Number(block.params[0] || 0);\n break;\n case 'Set Y to':\n spriteRef.current.y = Number(block.params[0] || 0);\n break;\n case 'Wait secs':\n await sleep(Number(block.params[0] || 0) * 1000);\n break;\n case 'Say':\n const text = String(block.params[0] ?? \"\");\n speechRef.current = text;\n setSpeech(text);\n if (ctx) drawSprite(ctx);\n await sleep(1000);\n speechRef.current = null;\n setSpeech(null);\n break;\n case 'Repeat':\n const times = Number(block.params[0] || 0);\n for (let i = 0; i < times; i++) {\n if (!runRef.current) break;\n await executeBlocks(block.children || []);\n }\n break;\n default:\n break;\n }\n if (ctx) drawSprite(ctx);\n await sleep(50);\n }\n }\n\n async function runScript() {\n if (!scriptBlocks.some(b => b.label === 'When Start')) return;\n const startIndex = scriptBlocks.findIndex(b => b.label === 'When Start');\n runRef.current = true;\n setRunning(true);\n await executeBlocks(scriptBlocks.slice(startIndex + 1));\n setRunning(false);\n runRef.current = false;\n }\n\n function stopScript() {\n runRef.current = false;\n setRunning(false);\n speechRef.current = null;\n setSpeech(null);\n const ctx = canvasRef.current?.getContext('2d');\n if (ctx) drawSprite(ctx);\n }\n\n function drawSprite(ctx) {\n const c = ctx || canvasRef.current?.getContext('2d');\n if (!c) return;\n c.clearRect(0,0,c.canvas.width,c.canvas.height);\n c.fillStyle = '#f0f0f0';\n c.fillRect(0, 0, c.canvas.width, c.canvas.height);\n c.fillStyle = 'orange';\n c.beginPath();\n c.arc(spriteRef.current.x, spriteRef.current.y, 20, 0, Math.PI * 2);\n c.fill();\n const curSpeech = speechRef.current ?? speech;\n if (curSpeech) {\n c.fillStyle = 'white';\n const text = String(curSpeech);\n c.font = '14px sans-serif';\n const w = c.measureText(text).width + 8;\n c.fillRect(spriteRef.current.x - w/2, spriteRef.current.y - 50, w, 24);\n c.strokeStyle = '#333';\n c.strokeRect(spriteRef.current.x - w/2, spriteRef.current.y - 50, w, 24);\n c.fillStyle = '#000';\n c.fillText(text, spriteRef.current.x - w/2 + 4, spriteRef.current.y - 34);\n }\n }\n\n useEffect(() => {\n const ctx = canvasRef.current?.getContext('2d');\n if (ctx) drawSprite(ctx);\n }, [speech]);\n\n const renderBlock = (block, path = []) => (\n { e.stopPropagation(); onScriptDragStart(e, path); }}\n // drop ON the block inserts *before* this block (same-level insert)\n onDrop={(e) => { e.stopPropagation(); onScriptDrop(e, path); }}\n onDragOver={(e) => e.preventDefault()}\n className={`flex flex-col gap-1 p-2 rounded-md shadow ${block.color} text-white`}\n >\n

\n {block.label}\n {Array.isArray(block.params) && block.params.map((p, i) => (\n updateParam(path, i, e.target.value)}\n className=\"px-2 py-0.5 rounded-md text-black bg-white border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 w-20 text-center shadow-sm\"\n />\n ))}\n \n

\n\n {block.isContainer && (\n { e.stopPropagation(); onScriptDrop(e, [...path, block.children.length]); }}\n onDragOver={allowDrop}\n >\n {block.children.length === 0 &&

Drop blocks here

}\n {block.children.map((child, idx) => renderBlock(child, [...path, idx]))}\n \n )}\n \n );\n\n return (\n

Blocks Palette

\n {BLOCK_TEMPLATES.map(b => (\n onPaletteDragStart(e, b)}\n className={`cursor-grab select-none p-2 rounded-md shadow-sm ${b.color} text-white font-medium`}\n >\n {b.label} {Array.isArray(b.params) && b.params.map((p, idx) => ({p}))}\n

\n ))}\n

\n\n

Script

\n \n \n

\n\n onScriptDrop(e, [scriptBlocks.length])}\n onDragOver={allowDrop}\n >\n {scriptBlocks.length === 0 && (\n

Drop blocks here to create a stack

\n )}\n\n

\n {scriptBlocks.map((b, idx) => renderBlock(b, [idx]))}\n

\n \n\n

Stage

\n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","17636971733044785026","traceTime",1783489364497]