-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfunction-generator.html
More file actions
314 lines (297 loc) · 13.9 KB
/
Copy pathfunction-generator.html
File metadata and controls
314 lines (297 loc) · 13.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta information for search engines, social media, and responsiveness -->
<meta charset="UTF-8" />
<meta name="description" content="Easily create custom Minecraft Bedrock function files with our online generator. Use our tool to draw hitboxes, assign commands, and preview your work." />
<meta name="keywords" content="Minecraft, Bedrock, Function Generator, Commands, Scripting, Hitbox, Advanced" />
<meta name="author" content="vertX" />
<meta name="robots" content="index, follow" />
<meta property="og:title" content="Function Generator" />
<meta property="og:description" content="Create and download custom function files for Minecraft Bedrock Edition with our advanced tool that supports hitboxes and dynamic commands." />
<meta property="og:url" content="https://vertx-dev.github.io/" />
<meta property="og:type" content="website" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Function Generator</title>
<!-- Link to the stylesheet for page styling -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<!-- Header Section: Introduction and Overview -->
<header>
<h1>Minecraft Advanced Hitbox Function Generator</h1>
<!-- Expandable information about what the tool does -->
<details>
<summary>Info</summary>
<p>
This tool allows you to create powerful Minecraft functions by drawing precise hitboxes and assigning commands with color-coded organization. Customize your commands with multi-line inputs, player-relative positioning, and even dynamic calculations using the {math:} syntax. Ideal for designing combat skills, spell effects, or other complex command-based mechanics, this generator streamlines the process and lets you preview your work in real time.
</p>
</details>
</header>
<!-- Main Application Section: Core functionality of the tool -->
<main>
<!-- Mobile toggle for enabling draggable elements on smaller screens -->
<div>
<label class="switch-mobile">
<input type="checkbox" id="switch-mobile-pc">
<span class="slider"></span>
<span class="switch-text">DRAGGABLE</span>
</label>
</div>
<div>
<label class="move-canvas">
<input type="checkbox" id="move-grid" checked="checked">
<span class="slider"></span>
<span class="switch-text">MOVE</span>
</label>
</div>
<div>
<label class="test-mode">
<input type="checkbox" id="debug-auto">
<span class="slider"></span>
<span class="switch-text">Auto fill</span>
</label>
</div>
<div>
<button id="reset-grid-btn" class="btn">Reset grid</button>
</div>
<div class="app-container">
<!-- Left Panel: Control Panel for Modes and Commands -->
<div class="left-panel">
<div class="control-panel">
<div class="mode-section">
<h3>Current Mode</h3>
<!-- Displays the current mode and associated color -->
<div id="current-mode-display" class="current-mode-box">
<span id="mode-name">None</span>
<div id="mode-color" class="color-square"></div>
</div>
<!-- Button to open the color selection modal -->
<button id="select-color-btn" class="btn">Select Color</button>
<!-- Button to open the add command modal -->
<button id="add-command-btn" class="btn">Add Command</button>
</div>
</div>
</div>
<!-- Center Panel: Canvas Area for Hitbox Drawing -->
<div class="center-panel">
<div class="canvas-container">
<!-- The canvas element where users can draw and manipulate hitboxes -->
<canvas id="grid-canvas" width="640" height="640"></canvas>
</div>
</div>
<!-- Right Panel: Coordinate Controls for Positioning -->
<div class="right-panel">
<div class="coordinate-controls">
<h3>Coordinate Offsets</h3>
<h4>By default, the player is positioned in the top left corner.</h4>
<!-- Input for adjusting the X offset -->
<div class="offset-control">
<label for="x-offset">X Offset:</label>
<input type="number" id="x-offset" value="0" />
</div>
<!-- Input for adjusting the Z offset -->
<div class="offset-control">
<label for="z-offset">Z Offset:</label>
<input type="number" id="z-offset" value="0" />
</div>
<!-- Buttons for previewing and saving the configuration -->
<div class="action-buttons">
<button id="preview-btn" class="btn">Preview</button>
<button id="save-btn" class="btn">Save</button>
</div>
</div>
</div>
</div>
</main>
<!-- Modals Section: Additional pop-up windows for user interaction -->
<!-- Select Color Modal: Allows users to choose a color for commands or hitboxes -->
<div id="select-color-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Select Color</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<!-- Grid of color options dynamically generated -->
<div id="color-list" class="color-grid"></div>
</div>
</div>
</div>
<!-- Add Command Modal: Form for adding new commands with custom settings -->
<div id="add-command-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Add Command</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<form id="add-command-form">
<!-- Command Name input -->
<div class="form-group">
<label for="command-name">Command Name:</label>
<input type="text" id="command-name" required />
</div>
<!-- Color input for the command, including live preview -->
<div class="form-group">
<label for="command-color">Color (hex):</label>
<div class="form-group" id="color-group">
<input type="color" id="command-color" required />
<div>
<button class="color-preview" id="color-preview"></button>
</div>
</div>
</div>
<!-- Command Template section with instructions for using placeholders -->
<div class="form-group">
<label for="command-template">Command Template:</label>
<textarea id="command-template" rows="4" required></textarea>
<div class="template-help">
<p>Use {x}, {y}, {z} as placeholders for coordinates.</p>
</div>
</div>
<!-- Submit button for adding the command -->
<div class="form-actions">
<button id="templates-btn" class="btn" type="button">Templates</button>
<button type="submit" class="btn">Add</button>
</div>
</form>
</div>
</div>
</div>
<!-- Preview Modal: Shows a preview of the generated commands for review -->
<div id="preview-modal" class="modal">
<div class="modal-content modal-lg">
<div class="modal-header">
<h2>Preview Commands</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<!-- Preformatted text area displaying command output -->
<pre id="preview-content"></pre>
<div class="modal-actions">
<button id="copy-btn" class="btn">Copy to Clipboard</button>
</div>
</div>
</div>
</div>
<!-- Save Modal: Provides an interface to name and download the generated function file -->
<div id="save-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Save File</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<form id="save-form">
<div class="form-group">
<label for="file-name">File Name:</label>
<input type="text" id="file-name" value="commands.mcfunction" required />
</div>
<div class="form-actions">
<button type="submit" class="btn">Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- Templates Modal: Lists predefined command templates categorized by type -->
<div id="templates-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Command Templates</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<!-- List of available command templates organized by categories -->
<ul id="templates-list">
<!-- Normal Target Commands Category -->
<li class="template-tag normal-target-tag">Normal Target Commands</li>
<li>
<div class="template-header"><strong>Mark targets</strong></div>
<code>execute at @s positioned ^{x}^^{z} run tag @e[r=1] add </code>
<button class="copy-template-btn" data-template="execute at @s positioned ^{x}^^{z} run tag @e[r=1] add ">Copy</button>
</li>
<li>
<div class="template-header"><strong>Mark 1 target</strong></div>
<code>execute at @s positioned ^{x}^^{z} run tag @e[r=1,c=1] add </code>
<button class="copy-template-btn" data-template="execute at @s positioned ^{x}^^{z} run tag @e[r=1] add ">Copy</button>
</li>
<li>
<div class="template-header"><strong>Damage target</strong></div>
<code>execute at @s positioned ^{x}^^{z} run damage @e[r=1] </code>
<button class="copy-template-btn" data-template="execute at @s positioned ^{x}^^{z} run damage @e[r=1] ">Copy</button>
</li>
<li>
<div class="template-header"><strong>Effect on target</strong></div>
<code>execute at @s positioned ^{x}^^{z} run effect @e[r=1] effect 1 1 true </code>
<button class="copy-template-btn" data-template="execute at @s positioned ^{x}^^{z} run effect @e[r=1] ">Copy</button>
</li>
<!-- Special Commands Category -->
<li class="template-tag special-target-tag">Special Commands</li>
<li>
<div class="template-header"><strong>Crouch test</strong></div>
<code>{crouch:True} and {crouch:False} execute commands based on the entity's crouching state</code>
<button class="copy-template-btn" data-template="{crouch:True}">Copy</button>
</li>
<li>
<div class="template-header"><strong>Math</strong></div>
<code>{math:expression} computes and replaces the result of the expression</code>
<button class="copy-template-btn" data-template="{math:}">Copy</button>
</li>
<li>
<div class="template-header"><strong>Random number</strong></div>
<code>{random:min,max} is replaced with a random integer between min and max</code>
<button class="copy-template-btn" data-template="{random:min,max}">Copy</button>
</li>
<li>
<div class="template-header"><strong>In water</strong></div>
<code>{inWater:True} and {inWater:False} check if entity in water</code>
<button class="copy-template-btn" data-template="{inWater:True}">Copy</button>
</li>
<li>
<div class="template-header"><strong>In air</strong></div>
<code>{inAir:True} and {inAir:False} check if entity in air</code>
<button class="copy-template-btn" data-template="{inAir:True}">Copy</button>
</li>
<li>
<div class="template-header"><strong>Repeat commands</strong></div>
<code>Syntax: #repeat:command|loops|variables#<br><br>Use @i@ for the current iteration and @var0@, @var1@, etc., for variables (semicolon-separated)</code>
<button class="copy-template-btn" data-template="#repeat:cmd|loops|var1;var2#">Copy</button>
</li>
<li>
<div class="template-header"><strong>Trajectory</strong></div>
<code>{trajectory:g,y}<br>g - gravity, drop by g for every block traveled</code>
<button class="copy-template-btn" data-template="{trajectory:0.1,1}">Copy</button>
</li>
<li>
<div class="template-header"><strong>Knockback</strong></div>
<code>Syntax: #knb:radius|type|power|damage/tag#<br>1 - range; 2 - power(2.1 - horizontal, 2.2 - vertical); 3 - amount of damage and tag</code>
<button class="copy-template-btn" data-template="#knb:7|b,d|3,2|10#">Copy</button>
</li>
</ul>
</div>
</div>
</div>
<!-- Alert Modal: Provides notifications or alerts to the user -->
<div id="alert-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="alert-title">Alert</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<!-- Alert message placeholder -->
<p id="alert-message"></p>
<div class="modal-actions">
<button class="btn close-modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<!-- Link to the main application JavaScript file that controls behavior -->
<script src="app.js"></script>
</body>
</html>