Help dialog beta

src/assets/jsons/block_help.json

@@ -0,0 +1,29 @@
+{
+    "group_particle": "This block allows you to define a particle or group of particles.",
+    "swap": "This block swaps the current particle with the particle found in the specified direction.",
+    "copy_myself": "This block creates a duplicate of the current particle at the specified position.",
+    "change_into": "This block changes the type of the particle in the specified direction to the selected type.",
+    "touching": "This block is used to determine if the particle is touching a particle of a specific type in any of its eight directions.",
+    "number_of": "This block returns the number of particles of a specific type in the specified direction. It allows you to count the number of particles in a particular direction.",
+    "type_of": "Returns the type of the particule in the specified direction.",
+    "particle_in_direction": "This block returns the type of the particle in the specified direction. It allows you to access the type of a particle in a particular direction.",
+    "direction": "This block allows you to define a certain direction or random, which choose a random direction among the others",
+    "randomTransformation": "This blocks determines that the logic excecuted will be random from the directions specified and generated by the clause.",
+    "for_each_transformation": "These two blocks dictate changes in the behavior contained within them. They offer four clauses within the dropdown menu.",
+    "rotated_by": "This block defines the behavior of a particle when it is rotated by a specified amount. It allows you to specify what actions the particle should take when it undergoes a rotation.",
+    "controls_if": "The if block facilitates decision-making within a program. It allows you to define the actions a particle should take when a condition is met.",
+    "one_in_chance": "This block is used to generate an event with a specific probability. When you place this block in your program, you are telling the program that you want an event to occur with a probability of one in every 'x' times, where 'x' is a number you choose.",
+    "comparison": "This block is used to compare two numeric values based on three conditions: 'is equal to', 'is bigger than', and 'is smaller than'. It returns either true or false based on whether the specified condition is met.",
+    "bool_comparison": "This block functions similarly to the numeric comparison block, but instead of comparing numeric values, it compares two boolean (true/false) values. It evaluates these boolean values based on two conditions: 'and' and 'or'. To return true, both boolean values must be true when using the 'and' condition, whereas the 'or' condition returns true when either or both conditions are true.",
+    "boolean": "These blocks return either true or false depending on specific characteristics and their definitions. They are used within conditional blocks to make decisions based on certain conditions.",
+    "not": "Takes a boolean value as input and returns the opposite of that value. if the input is true, it will return false and if the input is false, it will return true.",
+    "custom_field_slider": "This block returns the number indicated by the slider. It allows you to specify a numeric value using a slider control.",
+    "is": "This block is used to determine if a particle is touching a specific type of particle in a particular direction.",
+    "random_from": "This block returns a random value between the two specified values, allowing you to generate random numbers within a specified range.",
+    "particle_properties": "This block returns the value of the specified property of a particle in the specified direction. It allows you to access specific properties of particles within the simulation.",
+    "increase_by": "This block increases the specified property of the particle in a direction by a certain amount.",
+    "set_to": "This block sets the specified property of the particle in the specified direction to a certain value.",
+    "repeat_n_times": "This block enables you to repeat a set of actions a specified number of times. It allows you to automate tasks by executing the same set of actions multiple times in sequence.",
+    "every_n_frames": "This block allows you to define the behavior of a particle to occur at regular intervals, specifically every 'x' number of frames. It provides a way to schedule actions or events to happen periodically within the animation or simulation.",
+    "note": "This block cannot be attached to any other block nor does it create any behavior. It allows you to create comments about your particle to explain its functionality."
+}

src/components/BlockDialog.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useSound } from "@vueuse/sound";
 import click from "../assets/sounds/select.wav";
+import { toolbox } from "../assets/blockly/toolbox";
 import * as Blockly from "blockly";
-
+import helpJSON from "../assets/jsons/block_help.json";
 const { play } = useSound(click, { volume: 0.5, interrupt: true });
 
 defineExpose({
@@ -17,19 +18,74 @@ function showModal() {
 
     modal.value.showModal();
     play({ playbackRate: 1 });
+
+    // Iterate all workspaces and call zoomToFit
+    window.dispatchEvent(new Event("resize"));
+
+    requestAnimationFrame(() => {
+        for (const ws of workspaces.value) {
+            ws.zoomToFit();
+        }
+    });
+
+    // Set focus to modal to avoid focusing the first block
+    modal.value.focus();
 }
 
 function closeModal() {
     play({ playbackRate: 1.5 });
 }
 
 const modal = ref(null);
+const workspaces = ref([]);
+
+onMounted(() => {
+
+    for (const block of toolbox.contents) {
+        const blocklyDiv = document.getElementById("model" + block.type);
+        const ws = Blockly.inject(blocklyDiv, {
+            toolbox: toolbox,
+            readOnly: true,
+            renderer: "Zelos",
+            scrollbars: false,
+            move: {
+                scrollbars: { horizontal: false, vertical: true },
+                drag: false,
+                wheel: false,
+            },
+            zoom: {
+                controls: false,
+                wheel: false,
+            },
+        });
+
+        // Hidin scrollbars
+        // I cant set them to false because blockly will complain
+        const rect = blocklyDiv.querySelectorAll("rect");
+        rect.forEach((r) => {
+            r.style.display = "none";
+        });
+
+        const newBlock = ws.newBlock(block.type);
+        newBlock.initSvg();
+        newBlock.render();
+
+        workspaces.value.push(ws);
+        ws.zoomToFit();
+    }
+
+});
+
 </script>
 
 <template>
-    <dialog @close="closeModal" ref="modal" class="backdrop:backdrop-blur-sm backdrop:backdrop-brightness-75 rounded-xl px-4 py-1">
+    <dialog @close="closeModal" ref="modal"
+        class="backdrop:backdrop-blur-sm backdrop:backdrop-brightness-75 rounded-xl px-4 py-1">
         <div class="w-[90vmin] lg:max-h-[90vmin] max-h-[90vh]">
-        sdfsf
+            <div class="w-full h-full " v-for="block in toolbox.contents" :key="block.type">
+                <div class="w-full h-24 border-0" :id="'model' + block.type"></div>
+                <p class="mb-8">{{ helpJSON[block.type] }}</p>
+            </div>
         </div>
     </dialog>
 </template>

src/components/Blockly.vue

@@ -79,6 +79,8 @@ onMounted(() => {
     toolbox,
   });
 
+  store.mainWorkspace = ws;
+
   ws.addChangeListener((e) => {
     // Don't run the code when the workspace finishes loading; we're
     // already running it once when the application starts.

src/components/CanvasControls.vue

@@ -114,5 +114,5 @@ function showModal() {
 
       <button @mouseenter="playHoverSound" :class="buttonClass" title="Clear all the particles" @click="showModal"><i class="text-orange-400 ph-duotone ph-question"></i></button>
   </div>
-  <BlockDialog ref="modal" @click="showModal"></BlockDialog>
+  <BlockDialog ref="modal" v-if="store.mainWorkspace" @click="showModal"></BlockDialog>
 </template>

src/stores/simulation.js

@@ -22,6 +22,7 @@ export const useSimulationStore = defineStore("simulation", () => {
     const particle_array_length = computed(() => particle_array.value.length)
     const canvas_size = ref(150)
     const debug = ref(false)
+    const mainWorkspace = ref(null)
 
     // Surprinsingly this works, it seems I can do anything on setup pinia stores
     // This only gets called once as every other call to useSimulationStore will return the same instance (memoized store)
@@ -75,7 +76,7 @@ export const useSimulationStore = defineStore("simulation", () => {
 
     const loadWorkspace = (index) => {
         Blockly.Events.disable();
-        const workspace = Blockly.getMainWorkspace();
+        const workspace = mainWorkspace.value;
         const data = particle_array.value[index]?.blockly_workspace;
         if (data) {
             Blockly.serialization.workspaces.load(data, workspace);
@@ -99,14 +100,14 @@ export const useSimulationStore = defineStore("simulation", () => {
     }
 
     const regenerateCode = () => {
-        const ws = Blockly.getMainWorkspace();
+        const ws = mainWorkspace.value;
         const particle_base = ws.getBlocksByType("particle_base")[0];
         generated_code.value = jsonGenerator.blockToCode(particle_base);
         particle_array.value[selected_particle.value].update_data(JSON.parse(generated_code.value));
     }
 
     const saveWorkspace = (index) => {
-        const json = Blockly.serialization.workspaces.save(Blockly.getMainWorkspace());
+        const json = Blockly.serialization.workspaces.save(mainWorkspace.value);
         particle_array.value[index].blockly_workspace = json;
     }
 
@@ -140,6 +141,7 @@ export const useSimulationStore = defineStore("simulation", () => {
         debug,
         canvas_size,
         particle_array_length,
+        mainWorkspace,
         addParticle,
         removeParticle,
         removeSelectedParticle,