Skip to content

Commit e9f2f5e

Browse files
Gatoc-IdkGatoc-Idk
authored
Add files via upload
0 parents  commit e9f2f5e

File tree

1 file changed

+164
-0
lines changed

1 file changed

+164
-0
lines changed

‎index.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Blockly JavaScript Builder DEMO</title>
7+
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
8+
<style>
9+
body {
10+
font-family: sans-serif;
11+
margin: 0;
12+
display: flex;
13+
flex-direction: column;
14+
height: 100vh;
15+
}
16+
#main {
17+
display: flex;
18+
flex: 1;
19+
}
20+
#blocklyDiv {
21+
height: 100%;
22+
width: 60%;
23+
}
24+
#rightPanel {
25+
width: 40%;
26+
display: flex;
27+
flex-direction: column;
28+
border-left: 1px solid #ccc;
29+
background: #f9f9f9;
30+
}
31+
#codeHeader {
32+
padding: 10px;
33+
background: #fff;
34+
display: flex;
35+
align-items: center;
36+
justify-content: space-between;
37+
border-bottom: 1px solid #ccc;
38+
}
39+
#codeArea {
40+
flex: 1;
41+
padding: 10px;
42+
overflow: auto;
43+
}
44+
#codeArea pre {
45+
background: #eee;
46+
padding: 10px;
47+
border-radius: 5px;
48+
height: 100%;
49+
margin: 0;
50+
white-space: pre-wrap;
51+
word-wrap: break-word;
52+
}
53+
#buttons {
54+
padding: 10px;
55+
border-top: 1px solid #ccc;
56+
background: #fff;
57+
}
58+
button {
59+
margin-right: 10px;
60+
padding: 5px 10px;
61+
cursor: pointer;
62+
}
63+
#output {
64+
margin-top: 10px;
65+
font-family: monospace;
66+
}
67+
</style>
68+
</head>
69+
<body>
70+
<h2 style="margin: 10px;">Blockly JavaScript Builder DEMO</h2>
71+
<div id="main">
72+
<div id="blocklyDiv"></div>
73+
<div id="rightPanel">
74+
<div id="codeHeader">
75+
<h4 style="margin: 0;">📄 JavaScript Code</h4>
76+
<button onclick="runCode()">▶ Run</button>
77+
</div>
78+
<div id="codeArea">
79+
<pre id="code"></pre>
80+
</div>
81+
<div id="buttons">
82+
<button onclick="updateCode()">🔄 Update</button>
83+
<button onclick="copyCode()">📋 Copy Code</button>
84+
<div id="output"></div>
85+
</div>
86+
</div>
87+
</div>
88+
89+
<xml id="toolbox" style="display: none">
90+
<category name="Logic" colour="%{BKY_LOGIC_HUE}">
91+
<block type="controls_if"></block>
92+
<block type="logic_compare"></block>
93+
<block type="logic_operation"></block>
94+
<block type="logic_boolean"></block>
95+
</category>
96+
<category name="Loops" colour="%{BKY_LOOPS_HUE}">
97+
<block type="controls_repeat_ext"></block>
98+
<block type="controls_whileUntil"></block>
99+
</category>
100+
<category name="Math" colour="%{BKY_MATH_HUE}">
101+
<block type="math_number">
102+
<field name="NUM">0</field>
103+
</block>
104+
<block type="math_arithmetic"></block>
105+
<block type="math_random_float"></block> <!-- Random block -->
106+
</category>
107+
<category name="Text" colour="%{BKY_TEXTS_HUE}">
108+
<block type="text"></block>
109+
<block type="text_print"></block>
110+
</category>
111+
<category name="Variables" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}"></category>
112+
<category name="Functions" custom="PROCEDURE" colour="%{BKY_PROCEDURES_HUE}"></category>
113+
</xml>
114+
115+
<script>
116+
const workspace = Blockly.inject('blocklyDiv', {
117+
toolbox: document.getElementById('toolbox'),
118+
scrollbars: true,
119+
});
120+
121+
function updateCode() {
122+
const code = Blockly.JavaScript.workspaceToCode(workspace);
123+
document.getElementById('code').textContent = code;
124+
}
125+
126+
function runCode() {
127+
const code = Blockly.JavaScript.workspaceToCode(workspace);
128+
try {
129+
const result = eval(code);
130+
document.getElementById('output').innerText = "Output: " + (result !== undefined ? result : "(no output)");
131+
} catch (e) {
132+
document.getElementById('output').innerText = "Error: " + e.message;
133+
}
134+
}
135+
136+
function copyCode() {
137+
const code = document.getElementById('code').textContent;
138+
navigator.clipboard.writeText(code)
139+
.then(() => alert("Code copied to clipboard!"))
140+
.catch(err => alert("Failed to copy code: " + err));
141+
}
142+
143+
// Add custom JavaScript Blocks
144+
Blockly.defineBlocksWithJsonArray([
145+
{
146+
"type": "math_random_float",
147+
"message0": "random number (0–1)",
148+
"output": "Number",
149+
"colour": 230,
150+
"tooltip": "Returns a random number between 0 and 1",
151+
"helpUrl": ""
152+
}
153+
]);
154+
155+
// Define JavaScript behavior for custom block
156+
Blockly.JavaScript['math_random_float'] = function(block) {
157+
return ['Math.random()', Blockly.JavaScript.ORDER_FUNCTION_CALL];
158+
};
159+
160+
updateCode();
161+
workspace.addChangeListener(updateCode);
162+
</script>
163+
</body>
164+
</html>

0 commit comments

Comments
 (0)