update 1.1

add new package manager
DPSoftware-Foundation · Jul 15, 2024 · 62d6a70 · 62d6a70
1 parent bf83242
commit 62d6a70
Show file tree

Hide file tree

Showing 20 changed files with 290 additions and 42 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 .mcattributes
 package-lock.json
+dist/
diff --git a/assets/adv_computer.png b/assets/adv_computer.png
diff --git a/assets/adv_pocket_computer.png b/assets/adv_pocket_computer.png
diff --git a/assets/adv_turtle.png b/assets/adv_turtle.png
diff --git a/assets/basic_computer.png b/assets/basic_computer.png
diff --git a/assets/command_computer.png b/assets/command_computer.png
diff --git a/assets/library.png b/assets/library.png
diff --git a/assets/network-require.png b/assets/network-require.png
diff --git a/assets/organization-logo.png b/assets/organization-logo.png
diff --git a/assets/peripheral.png b/assets/peripheral.png
diff --git a/assets/pocket_computer.png b/assets/pocket_computer.png
diff --git a/assets/turtle.png b/assets/turtle.png
diff --git a/blocks/IDE/index.json b/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
+    }
 }
diff --git a/blocks/Template/index.json b/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
+    }
 }
diff --git a/package.json b/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",

diff --git a/src/blocksmanager.js b/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

diff --git a/src/index.html b/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 @@ <h2>ccIDE</h2>
         </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>

diff --git a/src/styles.css b/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;
 }