Claw Machine IK

\n\n {/* Display Score in Controls */}\n

Game Score

{score}

\n\n

Manual Controls

\n \n

\n \n Target X: {Math.round(targetX)}\n \n setTargetX(parseInt(e.target.value))}\n disabled={mouseControl}\n />\n

\n \n Target Y: {Math.round(targetY)}\n \n {/* Adjusted max Y based on new arm length potentially */}\n setTargetY(parseInt(e.target.value))}\n disabled={mouseControl}\n />\n

\n \n

\n State: {isGrabbing ? (grabbedToyId ? `Grabbing Toy ${grabbedToyId}` : \"Closing Claw\") : \"Claw Open\"}\n

\n\n

Behaviors

\n \n setWallAvoidance(e.target.checked)} />{\" \"}\n Wall Avoidance\n \n

\n \n setAutoOpen(e.target.checked)} />{\" \"}\n Auto-Open Near Objects\n \n

\n \n setHumanlikeMotion(e.target.checked)} />\n {\" \"}\n Human-like Motion\n \n

Note: Random drop chance enabled.

\n\n

Environment

\n \n \n

\n \n Gravity: {gravity.toFixed(1)}\n \n setGravity(parseFloat(e.target.value))}\n />\n

\n\n

Status

\n Wall Avoidance: \n {\" \"}\n {behaviorStates.wallAvoidance ? \"Active\" : \"Inactive\"}\n

\n Auto-Open: {\" \"}\n {behaviorStates.autoOpen ? \"Active\" : \"Inactive\"}\n

\n Human-like: {\" \"}\n {behaviorStates.humanMotion ? \"Active\" : \"Inactive\"}\n

\n \n \n );\n}\n\n// --- Val Town Boilerplate ---\n\nfunction App() {\n return ;\n}\n\nfunction client() {\n let rootEl = document.getElementById(\"root\");\n if (!rootEl) {\n rootEl = document.createElement(\"div\");\n rootEl.id = \"root\";\n document.body.appendChild(rootEl);\n }\n document.body.style.margin = \"0\";\n document.body.style.height = \"100vh\";\n document.documentElement.style.height = \"100vh\";\n createRoot(rootEl).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const css = `\n body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; background-color: #f0f0f0; height: 100vh; }\n #root { height: 100%; }\n #container { display: flex; height: 100vh; }\n #canvas-container { flex: 3; position: relative; background-color: #ddd; }\n #controls { flex: 1; background-color: #f8f8f8; padding: 20px; box-shadow: -2px 0 10px rgba(0,0,0,0.1); overflow-y: auto; max-width: 350px; /* Max width for controls */ }\n canvas { display: block; background-color: #fff; width: 100%; height: 100%; }\n h1, h2 { margin-top: 0; margin-bottom: 10px; color: #333; } h1 { font-size: 1.5em;} h2 {font-size: 1.2em;}\n .control-group { margin-bottom: 20px; padding: 15px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }\n label { display: block; margin-bottom: 8px; font-weight: bold; }\n input[type=\"range\"] { width: calc(100% - 10px); margin-bottom: 10px; cursor: pointer; }\n input[type=\"checkbox\"] { margin-right: 5px; vertical-align: middle; }\n label>input[type=\"checkbox\"] { margin-bottom: 0;} /* Align checkbox better */\n button { padding: 8px 12px; margin: 5px 5px 5px 0; border: none; border-radius: 4px; background-color: #4CAF50; color: white; cursor: pointer; transition: background-color 0.3s; }\n button:hover { background-color: #45a049; }\n button:disabled { background-color: #ccc; cursor: not-allowed; }\n #debug-info { position: absolute; bottom: 10px; left: 10px; background-color: rgba(255,255,255,0.7); padding: 5px; border-radius: 3px; font-family: monospace; font-size: 12px; z-index: 10; }\n .status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; border: 1px solid #aaa;}\n .behavior-active { background-color: #4CAF50; }\n .behavior-inactive { background-color: #ccc; }\n span[id$=\"-value\"] { font-weight: normal; margin-left: 5px; display: inline-block; min-width: 30px; text-align: right; background-color: #eee; padding: 2px 4px; border-radius: 3px;}\n p { margin-top: 5px; margin-bottom: 10px;}\n `;\n\n return new Response(\n `\n \n \n \n \n \n IK Claw Machine Playground v2 (Val Town)\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/Learn/ik/code/main.tsx","extension","actionData","errors"]