Added Offline State checks

- Added an offline page for when user tries to access the website section without Internet connection; - Added placeholder images for when the user is not Online to download images
DeadCodeGames · Mar 7, 2024 · 4051606 · 4051606
1 parent 42c6f24
commit 4051606
Show file tree

Hide file tree

Showing 8 changed files with 474 additions and 93 deletions.
diff --git a/418.css b/418.css
@@ -0,0 +1,38 @@
+@import url("./fonts/fonts.css");
+
+html {
+    display: none;
+}
+
+html.dark, html.light {
+    display: block;
+}
+
+html.dark {
+    background: #2A2A2A;
+    color: #F0F0F0;
+}
+
+html.light {
+    background: #D5D5D5;
+    color: #0F0F0F;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Montserrat';
+    flex-direction: column;
+    height: 100%;
+    margin: 0;
+}
+
+div#coffee {
+    font-size: 96px;
+    margin: 16px;
+}
+
+span {
+    font-size: 24px;
+}
diff --git a/418.html b/418.html
@@ -0,0 +1,12 @@
+<html>
+    <head>  
+        <title>× i'm a coffeepot. ×</title>
+        <link rel="stylesheet" href="418.css">
+    </head>
+    <body>
+        <span>i'm a coffeepot</span>
+        <div class="material-symbols-outlined" id="coffee">coffee</div>
+        <span>and you don't have internet</span>
+    </body>
+    <script>document.querySelector('html').classList.add(parent.document.querySelector("html").classList.contains('dark') ? 'dark' : 'light')</script>
+</html>
diff --git a/index.css b/index.css
@@ -258,6 +258,14 @@ div#updatestatus[status="fail"]::after, section#settings div#updatestatusSETTING
     animation: fail 1s steps(1) 0s infinite normal;
 }
 
+div#onlinestatus[status="online"]::after {
+    content: "cloud_done";
+}
+
+div#onlinestatus[status="offline"]::after {
+    content: "cloud_off";
+}
+
 @keyframes fail {
     0% {
         opacity: 1
@@ -267,7 +275,7 @@ div#updatestatus[status="fail"]::after, section#settings div#updatestatusSETTING
     }
 }
 
-div#updatestatus::after {
+div#updatestatus::after, div#onlinestatus::after {
     margin-left: 5px;
     opacity: 1;
 }
@@ -816,7 +824,7 @@ section#settings div.settingsmaincontentbox {
         border-radius: 25px;
     }
 
-    creditpfp, creditpfp>img {
+    creditpfp, creditpfp img, creditpfp object {
         height: 50px;
         border-radius: 25px;
     }

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <body>
         <div id="window">
             <div id="titleleft">
-                <div id="windowlogo">××</div><div id="windowtitle">deadforge</div><div id="updatestatus" class="material-symbols-outlined" status="appnotloaded"></div>
+                <div id="windowlogo">××</div><div id="windowtitle">deadforge</div><div id="onlinestatus" class="material-symbols-outlined"><div id="updatestatus" class="material-symbols-outlined" status="appnotloaded"></div></div>
             </div>
             <div id="controls">
                 <div id="minimize" class="material-symbols-outlined">horizontal_rule</div>
@@ -42,7 +42,7 @@
                 </div>
             </div>
             <div id="content">
-                <section id="web"><iframe id="webiFrame" title="× deadcode ×" src="https://deadcode.is-a.dev"></iframe></section>
+                <section id="web"><iframe id="webiFrame" title="× deadcode ×" src="418.html"></iframe></section>
                 <section id="settings">
                     <div id="updateHERO">
                         <div id="updatestatusSETTINGS" class="material-symbols-outlined" status="checking"></div>
@@ -83,14 +83,14 @@
                             <hr>
                             <creditsline>
                                 <creditbanner>
-                                    <creditpfp><img src="https://github.com/RichardKanshen.png"></creditpfp>
+                                    <creditpfp><object data="https://github.com/RichardKanshen.png"><img src="res/DEADFORGE.icon.png"></object></creditpfp>
                                     <creditinfo>
                                         <creditname>kanshen <logo>××</logo></creditname>
                                         <credittype>Developer</credittype>
                                     </creditinfo>
                                 </creditbanner>
                                 <creditbanner>
-                                    <creditpfp><img src="https://github.com/MusicOnStereo.png"></creditpfp>
+                                    <creditpfp><object data="https://github.com/MusicOnStereo.png"><img src="res/DEADFORGE.icon.png"></object></creditpfp>
                                     <creditinfo>
                                         <creditname>Qlexc (<b><a href="https://github.com/MusicOnStereo" target="_blank">@MusicOnStereo</a></b>)</creditname>
                                         <credittype>JavaScript God™</credittype>

diff --git a/index.js b/index.js
@@ -51,9 +51,21 @@ function updateColorPreference() {
   if (document.querySelector("html").classList.contains("light")) {
     document.querySelector("html").classList.remove("light");
     document.querySelector("html").classList.add("dark");
+    try {
+      document.querySelector("#webiFrame").contentDocument.querySelector("html").classList.remove("light");
+      document.querySelector("#webiFrame").contentDocument.querySelector("html").classList.add("dark");
+    } catch (error) {
+      console.log(error);
+    }
   } else {
     document.querySelector("html").classList.remove("dark");
     document.querySelector("html").classList.add("light");
+    try {
+      document.querySelector("#webiFrame").contentDocument.querySelector("html").classList.remove("dark");
+      document.querySelector("#webiFrame").contentDocument.querySelector("html").classList.add("light");
+    } catch (error) {
+      console.log(error);
+    }
   }
   sendColorPreference();
 }
@@ -71,6 +83,7 @@ ipcRenderer.on('preferences', (event, preferencesData) => {
   const preferences = JSON.parse(preferencesData);
   document.querySelector('html').classList.remove('light', 'dark');
   document.querySelector('html').classList.add(preferences.colorScheme);
+  try { document.querySelector('#webiFrame').contentDocument.querySelector('html').classList.add(preferences.colorScheme); } catch { };
   discordRichPresenceSwitch.checked = preferences.discordRPC;
   if (process.platform !== 'linux') { startupSwitch.checked = preferences.startup } else { startupSwitch.disabled = true };
   betaSwitch.checked = preferences.betaEnabled;
@@ -108,4 +121,14 @@ traySwitch.addEventListener('change', (event) => {
 
 ipcRenderer.on('launcherUpdateDownloadProgress', (event, progress) => {
   document.querySelector('progress#launcherUpdateProgress').setAttribute('value', progress);
+})
+
+setInterval(() => { ipcRenderer.send('checkForConnection') }, 30000);
+ipcRenderer.send('checkForConnection');
+
+ipcRenderer.on('connectionCheck', (event, status) => {
+  document.querySelector('div#onlinestatus').setAttribute('status', status ? 'online' : 'offline');
+  if (document.querySelector('div#updatestatus').getAttribute('status') == 'fail' && status == true) { checkForUpdates(); }
+  if (document.querySelector('iframe#webiFrame').getAttribute('src') != 'https://deadcode.is-a.dev' && status == true) { document.querySelector('iframe#webiFrame').setAttribute('src', 'https://deadcode.is-a.dev'); }
+  else if (document.querySelector('iframe#webiFrame').getAttribute('src') != '418.html' && status == false) { document.querySelector('iframe#webiFrame').setAttribute('src', '418.html'); }
 })
diff --git a/main.js b/main.js
@@ -5,8 +5,9 @@ const path = require('node:path');
 const axios = require('axios');
 const fs = require('fs');
 const downloadsFolder = require('downloads-folder');
+const isOnline = require('on-line');
 
-let mainWindow, updateStatus = (statusobject) => { mainWindow.webContents.send('updateStatus', statusobject); }, changeColorMode = (color) => { mainWindow.webContents.send('changeColorMode', color); }, preferences, tray, contextMenuHidden, contextMenuVisible, currentDownloads = [];
+let mainWindow, updateStatus = (statusobject) => { mainWindow.webContents.send('updateStatus', statusobject); }, changeColorMode = (color) => { mainWindow.webContents.send('changeColorMode', color); }, preferences, tray, contextMenuHidden, contextMenuVisible, currentDownloads = [], onlineState;
 function askToQuit() {
   let questionString = 'There '; questionString += Object.keys(currentDownloads).length == 1 ? 'is ' : 'are currently '; questionString += Object.keys(currentDownloads).length; questionString += Object.keys(currentDownloads).length == 1 ? ' item being downloaded:\n' : ' downloads being downloaded:\n'; questionString += currentDownloads.map(item => { const key = Object.keys(item)[0]; const value = item[key]; return `${value.string} ${value.version}`; }).join('\n'); questionString += '\n\nAre you sure you want to quit?'
   dialog.showMessageBox({
@@ -160,6 +161,8 @@ function connectRPC() {
     rpc.destroy();
   }
 
+  if (onlineState == false) return;
+
   rpc = new DiscordRPC.Client({ transport: 'ipc' });
 
   rpc.on('ready', () => {
@@ -311,4 +314,8 @@ async function checkUpdates() {
     preferences.closeToTray = trayPreference;
     if (trayPreference == false) { tray.destroy() } else { tray = tray = new Tray(process.platform == 'darwin' ? path.join(__dirname, 'res', 'DEADFORGE.icon.Template.png') : path.join(__dirname, 'res', 'DEADFORGE.icon.png')); tray.setContextMenu(contextMenuVisible) };
     writePreferences()
+  })
+
+  ipcMain.on('checkForConnection', (event) => {
+    isOnline(function (error, online) { onlineState = online; mainWindow.webContents.send('connectionCheck', online) });
   })