Skip to content

Commit 873e4aa

Browse files
Gatoc-IdkGatoc-Idk
authored
Add files via upload
1 parent e9f2f5e commit 873e4aa

File tree

1 file changed

+182
-0
lines changed

1 file changed

+182
-0
lines changed

‎Index.html.html‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
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</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</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+
<!-- Toolbox -->
90+
<xml id="toolbox" style="display: none">
91+
<category name="Logic" colour="%{BKY_LOGIC_HUE}">
92+
<block type="controls_if"></block>
93+
<block type="logic_compare"></block>
94+
<block type="logic_operation"></block>
95+
<block type="logic_boolean"></block>
96+
</category>
97+
<category name="Loops" colour="%{BKY_LOOPS_HUE}">
98+
<block type="controls_repeat_ext"></block>
99+
<block type="controls_whileUntil"></block>
100+
</category>
101+
<category name="Math" colour="%{BKY_MATH_HUE}">
102+
<block type="math_number">
103+
<field name="NUM">0</field>
104+
</block>
105+
<block type="math_arithmetic"></block>
106+
<block type="math_round"></block>
107+
</category>
108+
<category name="Text" colour="%{BKY_TEXTS_HUE}">
109+
<block type="text"></block>
110+
<block type="text_print"></block>
111+
<block type="text_prompt"></block>
112+
</category>
113+
<category name="Variables" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}">
114+
<block type="variables_get"></block>
115+
<block type="variables_set"></block>
116+
</category>
117+
<category name="Functions" colour="%{BKY_PROCEDURES_HUE}">
118+
<block type="procedures_defnoreturn"></block>
119+
<block type="procedures_callnoreturn"></block>
120+
</category>
121+
</xml>
122+
123+
<!-- Blockly + JavaScript -->
124+
<script>
125+
const workspace = Blockly.inject('blocklyDiv', {
126+
toolbox: document.getElementById('toolbox'),
127+
scrollbars: true,
128+
});
129+
130+
function updateCode() {
131+
const code = Blockly.JavaScript.workspaceToCode(workspace);
132+
document.getElementById('code').textContent = code;
133+
}
134+
135+
function runCode() {
136+
updateCode(); // Ensure code is up-to-date
137+
const code = document.getElementById('code').textContent;
138+
try {
139+
const result = eval(code);
140+
document.getElementById('output').innerText = "Output: " + (result !== undefined ? result : "(no output)");
141+
} catch (e) {
142+
document.getElementById('output').innerText = "Error: " + e.message;
143+
}
144+
}
145+
146+
function copyCode() {
147+
const code = document.getElementById('code').textContent;
148+
navigator.clipboard.writeText(code)
149+
.then(() => alert("Code copied to clipboard!"))
150+
.catch(err => alert("Failed to copy code: " + err));
151+
}
152+
153+
// Define custom blocks
154+
Blockly.defineBlocksWithJsonArray([
155+
{
156+
"type": "text_prompt",
157+
"message0": "prompt with message %1",
158+
"args0": [
159+
{
160+
"type": "input_value",
161+
"name": "TEXT",
162+
"check": "String"
163+
}
164+
],
165+
"output": "String",
166+
"colour": 160,
167+
"tooltip": "Prompts the user for input.",
168+
"helpUrl": ""
169+
}
170+
]);
171+
172+
Blockly.JavaScript['text_prompt'] = function(block) {
173+
const msg = Blockly.JavaScript.valueToCode(block, 'TEXT', Blockly.JavaScript.ORDER_NONE) || '""';
174+
const code = `prompt(${msg})`;
175+
return [code, Blockly.JavaScript.ORDER_FUNCTION_CALL];
176+
};
177+
178+
workspace.addChangeListener(updateCode);
179+
updateCode();
180+
</script>
181+
</body>
182+
</html>

0 commit comments

Comments
 (0)