Logo added

README.md

@@ -1,6 +1,6 @@
-# RetroNode
+# retroNode
 
-RetroNode is a Vue.js-based tool that makes it easy to design rpg text/graphic adventures through a visual scripting interface. It aims to streamline the game design process, allowing developers and storytellers to construct intricate narrative paths with ease. Each node within RetroNode symbolizes a distinct room or scene, equipped with drag-and-drop capabilities for intuitive spatial arrangement and granular scene configuration.
+retroNode is a Vue.js-based tool that makes it easy to design rpg text/graphic adventures through a visual scripting interface. It aims to streamline the game design process, allowing developers and storytellers to construct intricate narrative paths with ease. Each node within retroNode symbolizes a distinct room or scene, equipped with drag-and-drop capabilities for intuitive spatial arrangement and granular scene configuration.
 
 ## Features
 
@@ -12,17 +12,17 @@ RetroNode is a Vue.js-based tool that makes it easy to design rpg text/graphic a
 
 ## Dependencies
 
-RetroNode leverages the power of Vue.js for its core functionality, enriched with the following key libraries:
+retroNode leverages the power of Vue.js for its core functionality, enriched with the following key libraries:
 
 - **Vue.js** (`vue`): A progressive JavaScript framework for building user interfaces.
 - **Fabric.js** (`fabric`): A powerful library for HTML5 canvas manipulation, enabling interactive drawing and object management.
-- **Vuedraggable** (`vuedraggable`): A Vue component that allows drag-and-drop functionality, integral for the user interface of RetroNode.
+- **Vuedraggable** (`vuedraggable`): A Vue component that allows drag-and-drop functionality, integral for the user interface of retroNode.
 
 Additionally, **core-js** is used to ensure that the application runs smoothly across all modern browsers by providing necessary polyfills.
 
 ## Using Tailwind CSS
 
-RetroNode utilizes Tailwind CSS for styling. For convenience and ease of use during development, RetroNode includes Tailwind CSS via CDN. This setup is sufficient for development and prototyping purposes. However, if you plan to use RetroNode in a production environment, or if you need to customize Tailwind's configuration, you may consider installing Tailwind CSS in your project.
+retroNode utilizes Tailwind CSS for styling. For convenience and ease of use during development, retroNode includes Tailwind CSS via CDN. This setup is sufficient for development and prototyping purposes. However, if you plan to use retroNode in a production environment, or if you need to customize Tailwind's configuration, you may consider installing Tailwind CSS in your project.
 
 ## To-do
 
@@ -32,10 +32,10 @@ As of publication, the Zoom is a bit wonky, since I am having troubles calculati
 
 1. **Prerequisites**:
    - Ensure you have [Node.js](https://nodejs.org/) installed.
-   - RetroNode is built for Vue.js projects. If you haven't already set up a Vue.js environment, you can do so by following the [official Vue.js guide](https://vuejs.org/v2/guide/installation.html).
+   - retroNode is built for Vue.js projects. If you haven't already set up a Vue.js environment, you can do so by following the [official Vue.js guide](https://vuejs.org/v2/guide/installation.html).
 
 2. **Clone the Repository**:
-   Clone RetroNode into your project directory.
+   Clone retroNode into your project directory.
    ```sh
    git clone https://github.com/doncabreraphone/retroNode.git
    ```
@@ -59,15 +59,15 @@ As of publication, the Zoom is a bit wonky, since I am having troubles calculati
 
 ## Contribution and Development
 
-Contributions to RetroNode are highly encouraged. If you have suggestions for improvement or have identified bugs, please feel free to submit an issue or a pull request. Let's collaborate to enhance RetroNode's capabilities for the game development community.
+Contributions to retroNode are highly encouraged. If you have suggestions for improvement or have identified bugs, please feel free to submit an issue or a pull request. Let's collaborate to enhance retroNode's capabilities for the game development community.
 
 ## Licensing
 
-RetroNode is made available under the MIT License, permitting widespread use and modification. For full license details, refer to the LICENSE file.
+retroNode is made available under the MIT License, permitting widespread use and modification. For full license details, refer to the LICENSE file.
 
 ## Acknowledgements
 
-Special thanks to the open-source community and all contributors who have played a role in the development and refinement of RetroNode, making it a valuable tool for narrative-driven game development.
+Special thanks to the open-source community and all contributors who have played a role in the development and refinement of retroNode, making it a valuable tool for narrative-driven game development.
 
 
 

src/App.vue

@@ -15,13 +15,11 @@
 -->
 
 <template>
-
-
   <div id="app flex justify-center">
     <canvas id="scenarioCanvas"></canvas>
     <div class="max-w-full h-screen p-4">
       <div id="writeBoard" class="fixed mb-5 w-2/3 pr-3 z-10">
-       <button
+        <button
           @click="addScenario"
           class="bg-white border px-4 leading-relaxed border-gray-400 text-gray-500 rounded p-2 transition duration-200 hover:translate-y-[-2px] hover:shadow-lg hover:text-black hover:bg-gray-100"
         >
@@ -34,6 +32,24 @@
           Export Scenarios
         </button>
 
+        <div
+          id="console"
+          class="inline ml-5 text-white bg-lime-500 p-1 px-3 rounded hidden"
+        >
+          Message...
+        </div>
+
+        <div
+            id="logo"
+            class="text-gray-500 text-xl font-['Open_Sans'] absolute top-[4px] left-[25%]  font-bold inline ml-60"
+        >
+        <a href="https://github.com/doncabreraphone/retroNode">retroNode
+        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-diagram-2-fill absolute top-[-5px] left-[-35px]" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H11a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 5 7h2.5V6A1.5 1.5 0 0 1 6 4.5zm-3 8A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5z"/>
+        </svg>
+        </a>
+        </div>
+
         <div
           id="drawing"
           class="inline ml-8 text-sm text-gray-500 float-right mr-5 mt-2"
@@ -103,7 +119,7 @@
 
       <div
         id="exported"
-        class="w-1/3 fixed py-3 px-6 right-0 top-0 h-screen overflow-auto z-10 bg-white"
+        class="w-1/3 fixed py-3 overflow-hidden px-6 right-0 top-0 h-screen overflow-auto z-10 bg-white"
       >
         <h1 class="text-lg font-semibold mt-4">
           Scenarios<span
@@ -144,13 +160,11 @@
         @update-position="handleUpdatePosition"
         @updateCanvasDimensions="updateCanvasDimensions"
         @imageSelected="handleImageSelected"
-
       ></ScenarioComponent>
     </div>
   </div>
 </template>
 
-
 <!-- 
     
 - Vue.js component for interactive canvas design and editing, using Fabric.js.
@@ -213,11 +227,22 @@ export default {
 
   methods: {
     updateCanvasDimensions() {
-      // Assuming initCanvas has been adjusted to be callable as needed,
-      // and not just on component mount.
       this.initCanvas();
     },
 
+    showMessage(message) {
+      const consoleElement = document.getElementById("console");
+      if (consoleElement) {
+        consoleElement.innerHTML = message; // Set the message
+        consoleElement.classList.remove("hidden"); // Make the console visible
+
+        // Hide the console after 2 seconds
+        setTimeout(() => {
+          consoleElement.classList.add("hidden");
+        }, 1700);
+      }
+    },
+
     handleImageSelected({ scenarioId, image }) {
       console.log("Received scenarioId:", scenarioId); // Debug log
       console.log("Scenarios before find:", this.scenarios); // Debug log
@@ -278,12 +303,15 @@ export default {
           this.imagePreview = this.scenarios[0].scenarioImagePath;
         }
 
-        this.canvas.loadFromJSON(savedState.canvas, () => {
+          this.canvas.loadFromJSON(savedState.canvas, () => {
           this.canvas.renderAll();
         });
       } else {
-        console.log("No saved state found in localStorage.");
+        showMessage("Save data not found!")
       }
+
+      this.showMessage("Loading...")
+
     },
 
     handleUpdatePosition(payload) {
@@ -340,6 +368,7 @@ export default {
       const appStateString = JSON.stringify(completeAppState);
       // console.log("Saved App State:", appStateString); // Log the complete app state string
       localStorage.setItem("appState", appStateString);
+      this.showMessage("Saving...");
     },
 
     // Assuming you have a method to update scenario positions when they are moved on the canvas
@@ -379,65 +408,65 @@ export default {
       this.canvas.wrapperEl.style.zIndex = "";
       // Optionally, add other event listeners or functions here
 
-          // Set the initial zoom level
-          this.currentZoomLevel = 1; // Start with a 1:1 scale
-
-        // Add wheel event listener to handle zoom
-        this.canvas.wrapperEl.addEventListener('wheel', (event) => {
+      // Set the initial zoom level
+      this.currentZoomLevel = 1; // Start with a 1:1 scale
 
-            // console.log("Wheel event detected"); // Check if the event is fired
-            // console.log("Shift key state:", event.shiftKey); 
+      // Add wheel event listener to handle zoom
+      this.canvas.wrapperEl.addEventListener(
+        "wheel",
+        (event) => {
+          // console.log("Wheel event detected"); // Check if the event is fired
+          // console.log("Shift key state:", event.shiftKey);
 
-            // Check if the Shift key is pressed
-            if (!event.shiftKey) {
-                return; // Do nothing if Shift isn't held down
-            }
-            console.log("wheel working");
-            // Prevent the default scroll behavior
-            event.preventDefault();
-            
-            // Determine the direction of the wheel movement (zoom in or out)
-            const delta = event.deltaY;
-            let newZoomLevel = this.currentZoomLevel + (delta > 0 ? -0.1 : 0.1);
-            
-            // Cap the zoom level between 0.5 and 1.5
-            if(newZoomLevel < 0.75) {
-                newZoomLevel = 0.75;
-                // console.log('Reached minimum zoom level');
-            } else if(newZoomLevel > 1) {
-                newZoomLevel = 1;
-                // console.log('Reached maximum zoom level');
-            }
-            
-            // Only apply the zoom if it's within the allowed range
-            if(newZoomLevel !== this.currentZoomLevel) {
-                this.setZoomLevel(newZoomLevel);
-                this.currentZoomLevel = newZoomLevel;
-            }
-            
-        }, { passive: false });
+          // Check if the Shift key is pressed
+          if (!event.shiftKey) {
+            return; // Do nothing if Shift isn't held down
+          }
+          console.log("wheel working");
+          // Prevent the default scroll behavior
+          event.preventDefault();
+
+          // Determine the direction of the wheel movement (zoom in or out)
+          const delta = event.deltaY;
+          let newZoomLevel = this.currentZoomLevel + (delta > 0 ? -0.1 : 0.1);
+
+          // Cap the zoom level between 0.5 and 1.5
+          if (newZoomLevel < 0.75) {
+            newZoomLevel = 0.75;
+            this.showMessage('Reached minimum zoom level');
+          } else if (newZoomLevel > 1) {
+            newZoomLevel = 1;
+            this.showMessage('Reached maximum zoom level');
+          }
 
+          // Only apply the zoom if it's within the allowed range
+          if (newZoomLevel !== this.currentZoomLevel) {
+            this.setZoomLevel(newZoomLevel);
+            this.currentZoomLevel = newZoomLevel;
+          }
+        },
+        { passive: false }
+      );
     },
     setZoomLevel(zoomLevel) {
-  // Set the zoom level
-  this.canvas.setZoom(zoomLevel);
-
-  // Calculate the canvas width and height at the current zoom level
-  const zoomedWidth = this.canvas.getWidth() * zoomLevel;
-  const zoomedHeight = this.canvas.getHeight() * zoomLevel;
+      // Set the zoom level
+      this.canvas.setZoom(zoomLevel);
 
-  // Calculate the offset to center the content
-  const xOffset = (this.canvas.getWidth() - zoomedWidth) / 2;
-  const yOffset = (this.canvas.getHeight() - zoomedHeight) / 2;
+      // Calculate the canvas width and height at the current zoom level
+      const zoomedWidth = this.canvas.getWidth() * zoomLevel;
+      const zoomedHeight = this.canvas.getHeight() * zoomLevel;
 
-  // Update the canvas viewport transformation to apply the offset
-  this.canvas.viewportTransform[4] = xOffset; // X offset
-  this.canvas.viewportTransform[5] = yOffset; // Y offset
+      // Calculate the offset to center the content
+      const xOffset = (this.canvas.getWidth() - zoomedWidth) / 2;
+      const yOffset = (this.canvas.getHeight() - zoomedHeight) / 2;
 
-  // Request a re-render of the canvas
-  this.canvas.requestRenderAll();
-},
+      // Update the canvas viewport transformation to apply the offset
+      this.canvas.viewportTransform[4] = xOffset; // X offset
+      this.canvas.viewportTransform[5] = yOffset; // Y offset
 
+      // Request a re-render of the canvas
+      this.canvas.requestRenderAll();
+    },
 
     toggleDrawingMode() {
       const drawing = document.getElementById("drawing");
@@ -458,7 +487,7 @@ export default {
         this.canvas.freeDrawingBrush.color = "#eee"; // Match your canvas background
         this.canvas.freeDrawingBrush.width = 30; // Eraser size
         drawing.innerHTML = `
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eraser-fill float-left mr-1 mt-1" viewBox="0 0 16 16">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eraser-fill float-left mr-1" viewBox="0 0 16 16">
                     <path d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828zm.66 11.34L3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293z"/>
                 </svg> Eraser Mode...`;
       }
@@ -672,7 +701,4 @@ export default {
     },
   },
 };
-
-
-
 </script>

src/assets/global.css

@@ -23,6 +23,13 @@ label {
 #writeBoard .inline {
   margin-top: 0.8em;
 }
+#writeBoard #logo {
+  visibility: hidden;
+  transition: all 0.1s ease;
+}
+#writeBoard:hover #logo {
+  visibility: visible;
+}
 
 .scenario::before {
   position: absolute;
@@ -42,7 +49,7 @@ label {
 }
 
 .collapsed {
-  height: 0; /* Adjust this value to control the collapsed height, if needed */
+  height: 0;
 }
 
 .drawing-cursor {

src/assets/global.scss

@@ -22,6 +22,15 @@ label {
     .inline {
         margin-top: .8em;
     }
+
+    #logo {
+        visibility: hidden;
+        transition: all .1s ease;
+    }
+
+    &:hover #logo {
+        visibility: visible;
+    }
 }
 
 .scenario::before {

vue.config.js

@@ -6,7 +6,7 @@ module.exports = defineConfig({
       entry: 'src/main.js',
       template: 'public/index.html',
       filename: 'index.html',
-      title: 'RetroNode Designer', 
+      title: 'retroNode', 
     },
   },
 });