CubiCode

/* ── Block definitions ──────────────────────────────────── */ Blockly.defineBlocksWithJsonArray([ { "type": "container_block", "message0": "CubiCode RGB light: %1 %2", "args0": [ { "type": "input_dummy" }, { "type": "input_statement", "name": "DO" } ], "colour": 230, "tooltip": "Drag the action block in here!" }, { "type": "action_block", "message0": "Green light 🟢", "previousStatement": null, "nextStatement": null, "colour": 120, "tooltip": "Drag me into the blue block!" } ]); /* ── Workspace ───────────────────────────────────────────── */ const workspace = Blockly.inject('blocklyDiv', { renderer: 'zelos', trashcan: false, zoom: { controls: false, wheel: false, startScale: 1.1}, move: { drag: true, scrollbars: false, wheel: false }, grid: { spacing: 24, length: 3, colour: '#cbd5e1', snap: false } }); /* ── Pre-place blocks ───────────────────────────────────── */ const containerBlock = workspace.newBlock('container_block'); containerBlock.initSvg(); containerBlock.render(); containerBlock.moveBy(30, 20); containerBlock.setDeletable(false); containerBlock.setMovable(false); const actionBlock = workspace.newBlock('action_block'); actionBlock.initSvg(); actionBlock.render(); actionBlock.setDeletable(false); actionBlock.setMovable(true); setTimeout(() => { const metrics = workspace.getMetrics(); if (!metrics) return; const x = (metrics.viewWidth / 2) - 50; const y = (metrics.viewHeight / 2) + 20; actionBlock.moveBy(x, y); }, 0); workspace.addChangeListener((event) => { if (event.type === Blockly.Events.BLOCK_CREATE) { updateGlow(); } }); /* ── Lamp elements ─────────────────────────────────────── */ const hintTxt = document.getElementById('cubicodehint'); let wasConnected = false; function checkConnection() { try { const input = containerBlock.getInput('DO'); const isConnected = !!(input && input.connection && input.connection.targetBlock()); if (isConnected === wasConnected) return; wasConnected = isConnected; if (isConnected) { lampoff.classList.add('lit'); lampon.classList.add('lit'); hintTxt.textContent = '✅ Connected – lamp is on!'; } else { lampoff.classList.remove('lit'); lampon.classList.remove('lit'); hintTxt.textContent = '↓ Drag the green block into the blue one'; } } catch (e) {} } workspace.addChangeListener(checkConnection); function updateGlow() { const root = actionBlock.getSvgRoot(); if (!root) return; const isConnected = !!actionBlock.getParent(); if (isConnected) { root.classList.remove('action-hint'); } else { root.classList.add('action-hint'); } } workspace.addChangeListener((event) => { if ( event.type === Blockly.Events.BLOCK_MOVE || event.type === Blockly.Events.BLOCK_CHANGE || event.type === Blockly.Events.BLOCK_CREATE ) { updateGlow(); } });