experimental dev changes

mblithium · Nov 20, 2023 · 107458c · 107458c
1 parent da4a731
commit 107458c
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 13 deletions.
diff --git a/lib/components/desktop/desktop.js b/lib/components/desktop/desktop.js
diff --git a/lib/components/taskbar/taskbar.js b/lib/components/taskbar/taskbar.js
@@ -7,14 +7,14 @@
     componentHTML.innerHTML = `
       <div class="div-menusuper">
         <div class="div-menusuper__actionbar">
-          <div class"menusuper__actionbar-item menusuper__actionbar-user">
+          <div class="menusuper__actionbar-item menusuper__actionbar-user">
             <p>User: ${SW_userData.username}</p>
           </div>
-          <div class"menusuper__actionbar-item menusuper__actionbar-user item">
-            <p>User: ${SW_userData.username}</p>
+          <div class="menusuper__actionbar-item menusuper__actionbar-user item">
+            <p></p>
           </div>
-          <div class"menusuper__actionbar-item menusuper__actionbar-user item">
-            <p>User: ${SW_userData.username}</p>
+          <div class="menusuper__actionbar-item menusuper__actionbar-user item">
+            <p>Configurações</p>
           </div>
         </div>
         <div class="div-menusuper__applications">
@@ -26,10 +26,10 @@
           <button class="btn-menusuper">MENU</button>
         </div>
         <div class="taskbar-items">
-        aqui fica a taskbar
+          <p>aqui fica a taskbar</p>
         </div>
         <div class="taskbar-items">
-        aqui fica a bandeja do sistema
+          <p>aqui fica a bandeja do sistema</p>
         </div>
       </div>
     `;
@@ -70,7 +70,18 @@ function taskbarUpdateAppMenu() {
   console.log(applist)
   const apps = [
     { name: "Paint", app: "paint", icon: "" }, 
-    { name: "Terminal", app: "terminal", icon: "" }
+    { name: "Terminal 1", app: "terminal", icon: "" },
+    { name: "Terminal 2", app: "terminal", icon: "" },
+    { name: "Terminal 3", app: "terminal", icon: "" },
+    { name: "Terminal 4", app: "terminal", icon: "" },
+    { name: "Terminal 5", app: "terminal", icon: "" },
+    { name: "Terminal 6", app: "terminal", icon: "" },
+    { name: "Terminal 7", app: "terminal", icon: "" },
+    { name: "Terminal 8", app: "terminal", icon: "" },
+    { name: "Terminal 9", app: "terminal", icon: "" },
+    { name: "Terminal 10", app: "terminal", icon: "" },
+    { name: "Terminal 11", app: "terminal", icon: "" },
+    { name: "Terminal 12", app: "terminal", icon: "" }
   ];
 
   apps.forEach((app) => {
@@ -82,7 +93,11 @@ function taskbarUpdateAppMenu() {
       </div>
       <div class="menusuper__applicationsName">${app.name}</div>
     `
-
+    item.onclick = () => {
+      createWindow(app, "blablabla")
+    };
     applist.appendChild(item);
+
+    console.log(app);
   })
 }
diff --git a/lib/components/window/window.js b/lib/components/window/window.js
@@ -0,0 +1,28 @@
+function createWindow (appinfo, path) {
+      const swdewindow = document.createElement("div");
+      swdewindow.className = "swde-window";
+      swdewindow.innerHTML = `
+        <div class="swde-window-titlebar">
+            <div class="swde-window-icon">
+                Ícone
+            </div>
+            <div class="swde-window-title">
+                <p>O título do aplicativo aqui</p>
+            </div>
+            <div class="swde-window-actions">
+                <div class="swde-window-actions__buttons">
+                    <button class="swde-window-action__minimize">_</button>
+                    <button class="swde-window-action__maximize">[ ]</button>
+                    <button class="swde-window-action__close">X</button>
+                </div>
+            </div>
+        </div>
+        <div class="swde-window-content">
+            <p>Conteúdo do aplicativo aqui</p>
+        </div>
+      `;
+
+      document.body.querySelector("#system").appendChild(swdewindow);
+
+}
+
diff --git a/lib/debugmode.js b/lib/debugmode.js
@@ -0,0 +1,30 @@
+(() => {
+    /* Variables */
+    const apps = [
+        { name: "Paint", app: "paint", icon: "" }, 
+        { name: "Terminal 1", app: "terminal", icon: "" },
+        { name: "Terminal 2", app: "terminal", icon: "" },
+        { name: "Terminal 3", app: "terminal", icon: "" },
+        { name: "Terminal 4", app: "terminal", icon: "" },
+        { name: "Terminal 5", app: "terminal", icon: "" },
+        { name: "Terminal 6", app: "terminal", icon: "" },
+        { name: "Terminal 7", app: "terminal", icon: "" },
+        { name: "Terminal 8", app: "terminal", icon: "" },
+        { name: "Terminal 9", app: "terminal", icon: "" },
+        { name: "Terminal 10", app: "terminal", icon: "" },
+        { name: "Terminal 11", app: "terminal", icon: "" },
+        { name: "Terminal 12", app: "terminal", icon: "" }
+    ];
+
+    const config = {
+        "reloadPage": false,
+    }
+
+    createWindow(apps[1], "blablabla");
+
+    if (config.reloadPage) { 
+        setTimeout(() => {
+            window.location.reload();
+        }, 5 * 1000);
+    }
+})();
diff --git a/lib/systemboot.js b/lib/systemboot.js
@@ -4,12 +4,18 @@
   const components = [
     `${libPath}/systemconfig.js`,
     `${libPath}/systemhandlescripts.js`,
-    `${libPath}/renderUI.js`
+    `${libPath}/systemstate.js`,
+    `${libPath}/renderUI.js`,
+    `${libPath}/components/window/window.js`,
+    `${libPath}/debugmode.js`,
   ]
 
   components.forEach((elem) => {
     const loadScript = document.createElement("script");
+    loadScript.type = "text/javascript";
     loadScript.src = elem;
+    loadScript.async = false;
+    loadScript.defer = true;
     document.head.appendChild(loadScript);
   })
 })();
diff --git a/lib/systemstate.js b/lib/systemstate.js
@@ -0,0 +1,4 @@
+const swde_systemstate = {
+    "activeApps": [],
+    "activeWindows": []
+}
diff --git a/theme.css b/theme.css
@@ -14,18 +14,22 @@ body {
     position: absolute;
     display: block;
     width: 100vw;
-    height: 5vh;
+    height: 50px;
     bottom: 0;
 }
 .taskbar-flex {
     display: flex;
     background-color: #2A2E32;
     width: 100%;
     height: 100%;
+    justify-content: center;
+    align-items: center;
 
 }
 .taskbar-items {
+    position: relative;
     width: 100%;
+    overflow: hidden;
 }
 
 .btn-menusuper {
@@ -43,12 +47,21 @@ body {
     width: 500px;
     height: 50vh;
     background-color: #2A2E32;
-    bottom: 5vh;
+    bottom: 50px;
+    overflow-block: hidden;
+    z-index: 99999999;
+}
+
+.div-menusuper__applications {
+    overflow-y: scroll;
+    width: 100%;
+    height: 90%;
+    display: block;
 }
 
 .menusuper__applicationsItem {
     display: flex;
-    padding: 5px;
+    padding: 15px;
     background-color: #2f3133;
     border-bottom: 1px solid white;
 }
@@ -58,12 +71,46 @@ body {
     width: 100%;
     height: 50px;
     padding: 10px;
+    align-items: center;
 }
 
 .menusuper__actionbar-item {
     width: 100%;
 }
+menusuper__actionbar-item menusuper__actionbar-user
 
 .hidden {
     display: none;
+}
+
+/* Window Default Styles */
+.swde-window {
+    position: absolute;
+    display: block;
+    width: 800px;
+    height: 600px;
+    min-width: 300px;
+    min-height: 200px;
+    background-color: #5c6064;
+}
+
+.swde-window-titlebar {
+    display: flex;
+    background-color: #2A2E32;
+    width: 100%;
+    padding: 5px;
+}
+.swde-window-titlebar > * {
+    width: 100%;
+}
+
+.swde-window-actions button {
+    width: 30px;
+    padding: 5px;
+    border-radius: 15px;
+    border: 1px solid transparent;
+}
+
+.swde-window-actions__buttons {
+    text-align: right;
 }