update 1.1

add new package manager

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .mcattributes
 package-lock.json
+dist/

blocks/IDE/index.json

@@ -7,9 +7,16 @@
     "keyword": "test",
     "license": "GPL-3.0-or-later",
     "peripherals": false,
-    "library": false,
-    "turtle": false,
-    "pocket": false,
+    "library": true,
     "require_network": false,
-    "dependencies": {}
+    "dependencies": {},
+    "design_for_computer": {
+        "basic": true,
+        "adv": true, 
+        "command": true,
+        "pocket": true,
+        "advpocket": true,
+        "turtle": true,
+        "advturtle": true
+    }
 }

blocks/Template/index.json

@@ -8,8 +8,15 @@
     "license": "GPL-3.0-or-later",
     "peripherals": false,
     "library": false,
-    "turtle": false,
-    "pocket": false,
     "require_network": false,
-    "dependencies": {}
+    "dependencies": {},
+    "design_for_computer": {
+        "basic": false,
+        "adv": false, 
+        "command": false,
+        "pocket": false,
+        "advpocket": false,
+        "turtle": false,
+        "advturtle": false
+    }
 }

package.json

@@ -1,11 +1,11 @@
 {
   "name": "ccide",
-  "version": "1.0.2",
+  "version": "1.1",
   "description": "ComputerCraft mod virtual lua IDE",
   "main": "index.js",
   "scripts": {
     "dev": "electron .",
-    "nodedev": "node ."
+    "build": "electron-packager . ccIDE --platform=win32 --arch=x64 --icon=assets/ccIDEIcon.ico --out=dist --overwrite"
   },
   "author": "DPSoftware Foundation",
   "license": "GPL-3.0-or-later",

src/blocksmanager.js

@@ -4,8 +4,25 @@ const { DOMParser, XMLSerializer } = require('xmldom');
 
 const peripheralsfolder = path.join(__dirname, "../blocks"); 
 
+const fallbackImagePath = path.join(__dirname, '..', 'assets', 'noimagefallback.png'); // Path to fallback image
+
 let registedblock = {}
 
+const defineicon = {
+    computer: {
+        basic: path.join(__dirname, '..', 'assets', 'basic_computer.png'),
+        adv: path.join(__dirname, '..', 'assets', 'adv_computer.png'),
+        command: path.join(__dirname, '..', 'assets', 'command_computer.png'),
+        pocket: path.join(__dirname, '..', 'assets', 'pocket_computer.png'),
+        advpocket: path.join(__dirname, '..', 'assets', 'adv_pocket_computer.png'),
+        turtle: path.join(__dirname, '..', 'assets', 'turtle.png'),
+        advturtle: path.join(__dirname, '..', 'assets', 'adv_turtle.png')
+    },
+    peripheral: path.join(__dirname, '..', 'assets', 'peripheral.png'),
+    library: path.join(__dirname, '..', 'assets', 'library.png'),
+    networkreq: path.join(__dirname, '..', 'assets', 'network-require.png')
+}
+
 function mergeXml(xml1, xml2) {
     const parser = new DOMParser();
     const serializer = new XMLSerializer();
@@ -82,7 +99,31 @@ function extractFolderName(path) {
     return folderName;
 }
 
+function fileExists(filePath) {
+    try {
+        return fs.existsSync(filePath);
+    } catch (err) {
+        return false;
+    }
+}
+
+function addimageiconinfo(div, src, tiptool) {
+    const img = document.createElement('img');
+    img.src = src
+    img.classList.add("libimageicon");
+    img.setAttribute('data-bs-toggle', "tooltip");
+    img.setAttribute('data-bs-placement', "bottom");
+    img.setAttribute('data-bs-title', tiptool);
+    div.appendChild(img);
+    console.log(`added image ${img}`);
+}
+
 function scanindex() {
+    let foundedpackages = 0;
+    document.getElementById('statusMessage').textContent = "Scanning Packages...";
+    // clear all item in libcontainer
+    document.getElementById('libcontainer').innerHTML = "";
+
     const files = fs.readdirSync(peripheralsfolder);
 
     // Iterate through files and directories
@@ -101,18 +142,96 @@ function scanindex() {
                     const jsonData = JSON.parse(content);
 
                     blockfoldername = extractFolderName(filePath);
-                    registedblock[blockfoldername] = {
-                        infomation: jsonData,
-                        image: null
-                    };
-                    console.log(`registered ${blockfoldername} blocks`)
+                    registedblock[blockfoldername] = jsonData;
+                    foundedpackages++;
+
+                    // create item in list
+                    const imagePath = path.join(filePath, "icon.png");
+
+                    const libraryItem = document.createElement('div');
+                    libraryItem.classList.add('library-item', 'overflow-auto', 'library-container');
+                    libraryItem.setAttribute('data-libraryfolder', blockfoldername);
+
+                    // add image
+                    const img = document.createElement('img');
+                    img.classList.add('libimage');
+                    if (fileExists(imagePath)) {
+                        img.src = imagePath;
+                    } else {
+                        img.src = fallbackImagePath;
+                    }
+                    libraryItem.appendChild(img);
+
+                    // Create the library details container
+                    const libraryDetails = document.createElement('div');
+                    libraryDetails.classList.add('library-details');
+                    
+                    // Create the title element
+                    const title = document.createElement('h3');
+                    title.textContent = jsonData.name + ` [v${jsonData.version} by ${jsonData.author}]`;
+                    libraryDetails.appendChild(title);
+
+                    // Create the description element
+                    const description = document.createElement('p');
+                    description.innerHTML = jsonData.description;
+                    libraryDetails.appendChild(description);
+
+                    console.log(jsonData)
+                    if (jsonData.design_for_computer.basic) {
+                        addimageiconinfo(libraryDetails, defineicon.computer.basic, "Basic Computer Supported");
+                    }
+                    if (jsonData.design_for_computer.adv) {
+                        addimageiconinfo(libraryDetails, defineicon.computer.adv, "Advanced Computer Supported");
+                    }
+                    if (jsonData.design_for_computer.command) {
+                        addimageiconinfo(libraryDetails, defineicon.computer.command, "Command Computer Supported");
+                    }
+                    if (jsonData.design_for_computer.pocket) {
+                        addimageiconinfo(libraryDetails, defineicon.computer.pocket, "Pocket Computer Supported");
+                    }
+                    if (jsonData.design_for_computer.advpocket) {
+                        addimageiconinfo(libraryDetails, defineicon.computer.advpocket, "Advanced Pocket Computer Supported");
+                    }
+                    if (jsonData.design_for_computer.turtle) {
+                        addimageiconinfo(libraryDetails, defineicon.computer.turtle, "Turtle Supported");
+                    }
+                    if (jsonData.design_for_computer.advturtle) {
+                        addimageiconinfo(libraryDetails, defineicon.computer.advturtle, "Advanced Turtle Supported");
+                    }
+
+                    // check computer type support
+                    if (jsonData.peripherals) {
+                        addimageiconinfo(libraryDetails, defineicon.peripheral, "Peripheral");
+                    }
+                    if (jsonData.library) {
+                        addimageiconinfo(libraryDetails, defineicon.library, "Library");
+                    }
+                    if (jsonData.require_network) {
+                        addimageiconinfo(libraryDetails, defineicon.networkreq, "Require Network");
+                    }
+
+                    libraryItem.appendChild(libraryDetails);
+                    document.getElementById('libcontainer').appendChild(libraryItem);
+                    console.log(`registered ${blockfoldername} blocks and added to packages managers`)
                 }
 
             })
         }
     });
+
+    document.querySelectorAll('.library-item').forEach(item => {
+        item.addEventListener('click', () => {
+            item.classList.toggle('selected');
+        });
+    });
+
+    document.getElementById('statusMessage').textContent = `Founded ${foundedpackages} Packages`;
+    setTimeout(() => {
+        document.getElementById('statusMessage').textContent = `Ready`;
+    }, 1000);
 }
 
+
 module.exports = {
     loadperipheral,
     scanindex

src/index.html

@@ -7,6 +7,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
     <script>
         const bootstrap = require('bootstrap')
+        const {shell} = require('electron');
     </script>
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="styles.css" />
@@ -17,12 +18,9 @@
         <button class="navbar-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Computer Types" style="background-color: #0087bd;">
             <svg viewBox="0 0 24 24"><path d="M6 4h12v1h3v2h-3v2h3v2h-3v2h3v2h-3v2h3v2h-3v1H6v-1H3v-2h3v-2H3v-2h3v-2H3V9h3V7H3V5h3V4m5 11v3h1v-3h-1m2 0v3h1v-3h-1m2 0v3h1v-3h-1z" /></svg>
         </button>
-        <button class="navbar-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Library and Packages" style="background-color: #0087bd;" onclick="openlibraryselect()">
+        <button class="navbar-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Packages Managers" style="background-color: #0087bd;" onclick="openlibraryselect()">
             <svg viewBox="0 0 24 24"><path d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9M12 4.15l-1.89 1.07L16 8.61l1.96-1.11L12 4.15M6.04 7.5 12 10.85l1.96-1.1-5.88-3.4L6.04 7.5M5 15.91l6 3.38v-6.71L5 9.21v6.7m14 0v-6.7l-6 3.37v6.71l6-3.38z" /></svg>
         </button>
-        <button class="navbar-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Peripherals" style="background-color: #0087bd;">
-            <svg viewBox="0 0 24 24"><path d="M15 7v4h1v2h-3V5h2l-3-4-3 4h2v8H8v-2.07c.7-.37 1.2-1.08 1.2-1.93A2.2 2.2 0 0 0 7 6.8c-1.22 0-2.2.98-2.2 2.2 0 .85.5 1.56 1.2 1.93V13a2 2 0 0 0 2 2h3v3.05c-.71.36-1.2 1.1-1.2 1.95a2.2 2.2 0 0 0 2.2 2.2 2.2 2.2 0 0 0 2.2-2.2c0-.85-.49-1.59-1.2-1.95V15h3a2 2 0 0 0 2-2v-2h1V7h-4z" /></svg>
-        </button>
         <button class="navbar-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Preview code" style="background-color: #0087bd; margin-left: auto; position: absolute; right: 115px;" onclick="clientexit()">
             <svg viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z" /></svg>
         </button>
@@ -99,21 +97,44 @@
         </div>
     </div>
 
-    <div class="popup" id="library-popup">
-        <div class="popup-content" style="max-width: 600px;">
-            <button type="button" class="btn-close float-end" aria-label="Close" id="libraryCloseBtn"></button>
-            <div class="library-container" id="libcontainer">
-                <div class="library-item overflow-auto">
-                    <img src="image.jpg" class="libimage" onerror="this.onerror=null;this.src='../assets/noimagefallback.png'; this.alt='No Image Available';">
-                    <p>Lib 1</p>
-                    <i>Test</i>
+    <div class="popup" id="library-popup" style="overflow-y:hidden;">
+        <div class="popup-content p-3" style="max-width: 1280px; position: relative; margin-top: 150px;">
+            <button type="button" class="btn-close" aria-label="Close" id="libraryCloseBtn" style="position: absolute; top: 10px; right: 10px;"></button>
+            <h3>Packages Managers</h3>
+            <div class="library-content">
+                <div id="libcontainer">
+                    <div class="library-item overflow-auto library-container" data-libraryfolder="name">
+                        <img src="image.jpg" class="libimage" onerror="this.onerror=null;this.src='../assets/noimagefallback.png'; this.alt='No Image Available';">
+                        <div class="library-details">
+                            <h3>Title [v1.0 by Author]</h3>
+                            <p>Library description goes here.</p>
+                            <img src="../assets/basic_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Basic Computer">
+                            <img src="../assets/adv_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Advanced Computer">
+                            <img src="../assets/command_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Command Computer">
+                            <img src="../assets/pocket_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Pocket Computer">
+                            <img src="../assets/adv_pocket_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Advanced Pocket Computer">
+                            <img src="../assets/turtle.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Basic Turtle">
+                            <img src="../assets/adv_turtle.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Advanced Turtle">
+                            <img src="../assets/peripheral.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Peripheral">
+                            <img src="../assets/library.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Library">
+                            <img src="../assets/network-require.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Network Require">
+                        </div>
+                    </div>
+                    
                 </div>
             </div>
-            <button type="button" class="btn btn-success btn-sm float-end">Import</button>
+            <div class="button-container">
+                <button type="button" class="btn btn-success btn-sm" id="packageman-import-btn">Import Packages</button>
+                <button type="button" class="btn btn-warning btn-sm" onclick='scanindex()'>Refetch Packages</button>
+                <button type="button" class="btn btn-primary btn-sm" onclick='shell.openExternal("https://damp11113.xyz/dpsoftware/ccide/library")'>Download Packages</button>
+            </div>
         </div>
     </div>
     
     
+    
+    
+    
     <script src="frontend.js"></script>
     <script src="virtualcode.js"></script>
     <script src="codegen.js"></script>

src/styles.css

@@ -93,9 +93,19 @@ body {
     border: 1px solid #888;
     width: 80%; /* Adjust width as needed */
     max-width: 600px; /* Max width for larger screens */
+    max-height: 80%; /* Ensure content does not overflow the screen */
+    display: flex;
+    flex-direction: column;
     animation: fadeIn 0.3s ease; /* Fade-in animation */
+    position: relative; /* Ensure the close button can be positioned relative to this */
 }
 
+/* Position the close button to the top right corner */
+.btn-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
 
 /* Fade-in animation */
 @keyframes fadeIn {
@@ -170,21 +180,49 @@ body {
     color: white; /* Optionally, adjust text color for visibility */
 }
 
+.libimageicon {
+    width: 20px;
+    height: 20px;
+}
 .libimage {
     width: 100px;
     height: 100px;
-    
 }
-
+.library-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+.libimage {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    margin-right: 15px;
+}
+.library-details {
+    flex: 1;
+    line-height: 10px;
+}
 .library-item {
-    margin: 0 auto;
+    cursor: pointer;
     padding: 10px;
+    border-bottom: 1px solid #e9ecef;
+}
+.library-item.selected {
+    background-color: #e9ecef;
+}
+.library-content {
+    flex: 1;
+    overflow-y: auto;
+    margin-bottom: 10px;
+    max-height: 720px; /* Ensure a max height for scrolling */
 }
-
 .library-item:hover {
     background-color: #cacaca;
 }
 
-.library-container {
-    border: 1px solid #000000;
+.button-container {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
 }

src/virtualcode.js

@@ -45,8 +45,8 @@ var workspace = Blockly.inject('blocklyDiv', {
 try {
     scanindex();
 
-    originaltoolbar = loadperipheral(workspace, originaltoolbar, "Template");
     originaltoolbar = loadperipheral(workspace, originaltoolbar, "IDE");
+    usedlibinproject.push("IDE");
 } catch (e) {
     ipc.send("erroronstart", `Error on loading block: ${e}`)
 }
@@ -55,23 +55,47 @@ workspace.getToolbox().getFlyout().autoClose = false;
 
 // Save workspace
 ipc.on('save-workspace-request', (event) => {
+    document.getElementById('statusMessage').textContent = `Saving...`;
     const state = Blockly.serialization.workspaces.save(workspace);
     const data = {
         "usedlibrary": usedlibinproject,
         "content": state
     }
+    
     ipc.send('save-workspace', data);
 });
 
 // Load workspace
 ipc.on('load-workspace', (event, json) => {
-    if (json) {
-        data = JSON.parse(json)
-        usedlibinproject = data.usedlibrary
-        workspace.clear()
-        Blockly.serialization.workspaces.load(data.content, workspace);
-        isprojectsaved = true
-    } 
+    try {
+        if (json) {
+            data = JSON.parse(json)
+            const libinproject = data.usedlibrary
+            workspace.clear()
+            for (let i = 0; i < libinproject.length; i++) {
+                const packagefolder = libinproject[i]
+                if (!usedlibinproject.includes(packagefolder)) {
+                    try {
+                        originaltoolbar = loadperipheral(workspace, originaltoolbar, packagefolder);
+                        usedlibinproject.push(packagefolder);
+                    } catch (e) {
+                        document.getElementById('statusMessage').textContent = `Can't Import ${usedlibinproject[i]}: ${e}`;
+                        setTimeout(() => {
+                            document.getElementById('statusMessage').textContent = `Ready`;
+                        }, 1000);
+                    }
+                }
+            }
+            Blockly.serialization.workspaces.load(data.content, workspace);
+            isprojectsaved = true
+            document.getElementById('statusMessage').textContent = `Project Loaded`;
+        } 
+    } catch (e) {
+        document.getElementById('statusMessage').textContent = `Can't Load Project: ${e}`;
+    }
+    setTimeout(() => {
+        document.getElementById('statusMessage').textContent = `Ready`;
+    }, 1000);
 })
 
 workspace.addChangeListener(function(event) {
@@ -89,11 +113,41 @@ workspace.addChangeListener(function(event) {
     }
 });
 
+document.getElementById("packageman-import-btn").addEventListener('click', () => {
+    var librarypopup = document.getElementById('library-popup');
+    librarypopup.style.animation = 'fadeOut 0.3s ease'; // Apply fade-out animation
+    setTimeout(function() {
+        librarypopup.style.display = 'none'; // Hide popup after animation completes
+        librarypopup.style.animation = ''; // Reset animation property
+    }, 300); // Adjust to match animation duration in milliseconds
+
+    const selectedItems = document.querySelectorAll('.library-item.selected');
+    selectedItems.forEach(item => {
+        const packagefolder = item.getAttribute('data-libraryfolder');
+        if (!usedlibinproject.includes(packagefolder)) {
+            try {
+                originaltoolbar = loadperipheral(workspace, originaltoolbar, packagefolder);
+                usedlibinproject.push(packagefolder);
+            } catch (e) {
+                document.getElementById('statusMessage').textContent = `Can't Import ${packagefolder}: ${e}`;
+            }
+        }
+        setTimeout(() => {
+            document.getElementById('statusMessage').textContent = `Ready`;
+        }, 1000);
+    });
+    
+});
+
 ipc.on('workspace-saved', (event, success) => {
     isprojectsaved = success
     if (!isprojectopened) {
         isprojectopened = true;
     }
+    document.getElementById('statusMessage').textContent = `Project Saved`;
+    setTimeout(() => {
+        document.getElementById('statusMessage').textContent = `Ready`;
+    }, 1000);
 });
 
 ipc.on('request-undo-redo', (event, redo) => {
@@ -106,5 +160,5 @@ ipc.on("open-about", () => {
 })
 
 // Ensure Blockly container is shown after the workspace is injected
-document.getElementById('statusMessage').textContent = "ready";
+document.getElementById('statusMessage').textContent = `Ready`;
 ipc.send("ready")

turtle example 1.ccp

@@ -0,0 +1 @@
+{"usedlibrary":["IDE"],"content":{"blocks":{"languageVersion":0,"blocks":[{"type":"sys_start","id":"o[Cw/cGpoIP_gX=[qr#;","x":330,"y":210,"inputs":{"DO":{"block":{"type":"ide_addcode","id":"4rulxmAG~hzUkD5l(5yF","inputs":{"CODE":{"block":{"type":"text","id":"(o[.P`~(.T7p_[l_^Hl#","fields":{"TEXT":"turtle.refuel()"}}}},"next":{"block":{"type":"ide_addcode","id":"/5%!yEWtyS/E=wR/m*Xm","inputs":{"CODE":{"block":{"type":"text","id":"%wbX8A-7RhI2ZgV=lFhV","fields":{"TEXT":"turtle.digDown()"}}}},"next":{"block":{"type":"ide_addcode","id":"*(^6fQ{j/V.kg,ho=|:N","inputs":{"CODE":{"block":{"type":"text","id":"7hY96DknnQ/t#Xq?Q`dz","fields":{"TEXT":"turtle.down()"}}}},"next":{"block":{"type":"controls_repeat_ext","id":"$%Y?,,|7H1k$t+Jn)I}r","inputs":{"TIMES":{"shadow":{"type":"math_number","id":"s.U14p%aW!FTHv{Re%tn","fields":{"NUM":10}}},"DO":{"block":{"type":"ide_addcode","id":"]{qn$;Fr@4:nCTC%VK@d","inputs":{"CODE":{"block":{"type":"text","id":"*h}KRP|Z|Z8~bz+}Lb|S","fields":{"TEXT":"turtle.forward()"}}}},"next":{"block":{"type":"ide_addcode","id":"4*u|eIRv$3l8gVAe-#G6","inputs":{"CODE":{"block":{"type":"text","id":"vJr{;31CY5XLpno1G1l`","fields":{"TEXT":"turtle.dig()"}}}}}}}}},"next":{"block":{"type":"ide_addcode","id":"MYaWPpTW,*Sbr$qHdP;X","inputs":{"CODE":{"block":{"type":"text","id":"4yq!yCVpT7zAkbgx|e}?","fields":{"TEXT":"turtle.up()"}}}},"next":{"block":{"type":"ide_addcode","id":"}oNps@eRjo{j6Mt*y[M(","inputs":{"CODE":{"block":{"type":"text","id":"Pp6jDe[JkcY^`5J3FtzJ","fields":{"TEXT":"turtle.forward()"}}}},"next":{"block":{"type":"ide_addcode","id":"GBsH+H_G).Or7Jg#Z/HM","inputs":{"CODE":{"block":{"type":"text","id":"I39UB3G^1g|#PXmIK~/8","fields":{"TEXT":"turtle.forward()"}}}}}}}}}}}}}}}}}}}}]},"variables":[{"name":"fuellevel","id":"v3Vu$~B8ol()F*#n?^)B"}]}}