Update!

17 files changed, 343 insertions, 26 deletions

diff --git a/views/common/blur.css b/views/common/blur.css
new file mode 100644
index 0000000..f904c12
--- /dev/null
+++ b/views/common/blur.css
@@ -0,0 +1,3 @@
+#intro, #laps-inner-car0, #laps-inner-car1, #paused, #credits, #gpuinfo, #warning {
+    backdrop-filter: blur(10px);
+}
\ No newline at end of file
diff --git a/views/common/compatibilityMode.css b/views/common/compatibilityMode.css
new file mode 100644
index 0000000..a436549
--- /dev/null
+++ b/views/common/compatibilityMode.css
@@ -0,0 +1,10 @@
+*:not(#gpuinfo-outer):not(#gpuinfo-inner) {
+    backdrop-filter: none !important;
+    transition: none !important;
+    opacity: 1 !important;
+    animation: none !important;
+}
+
+.rain {
+    display: none !important;
+}
\ No newline at end of file
diff --git a/views/common/fonts.css b/views/common/fonts.css
index 190dd75..5aa99e0 100644
--- a/views/common/fonts.css
+++ b/views/common/fonts.css
@@ -14,7 +14,7 @@
     font-family: "Comfortaa", -apple-system, sans-serif;
 }
 
-#gpuinfo, #gpuinfo * {
+#gpuinfo-inner, #gpuinfo-inner * {
     font-family: monospace !important;
 }
 
diff --git a/views/credits.html b/views/credits.html
index edd4a2d..ece63a3 100644
--- a/views/credits.html
+++ b/views/credits.html
@@ -6,9 +6,11 @@
     <script src="../scenario/client.js"></script>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="common/fonts.css">
+    <link rel="stylesheet" href="common/blur.css">
     <link rel="stylesheet" href="menu.css">
     <title>Kartik</title>
     <script src="../crash/client.js"></script>
+    <script src="./script/global_compatlayer.js"></script>
     <script src="../sfx/sfx.js"></script>
     <script>
         require('@electron/remote').getCurrentWindow().dstate = lang.discord.credits[0];
diff --git a/views/game.html b/views/game.html
index 023e547..f40b777 100644
--- a/views/game.html
+++ b/views/game.html
@@ -6,9 +6,11 @@
     <script src="../scenario/client.js"></script>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="common/fonts.css">
+    <link rel="stylesheet" href="common/blur.css">
     <link rel="stylesheet" href="game.css">
     <title>Kartik</title>
     <script src="../crash/client.js"></script>
+    <script src="./script/global_compatlayer.js"></script>
     <script src="../sfx/sfx.js"></script>
     <script>
         require('@electron/remote').getCurrentWindow().dstate = lang.discord.game[0];
diff --git a/views/intro.html b/views/intro.html
index f298cb7..6d4b721 100644
--- a/views/intro.html
+++ b/views/intro.html
@@ -7,8 +7,10 @@
     <meta charset="UTF-8">
     <title>Kartik</title>
     <link rel="stylesheet" href="common/fonts.css">
+    <link rel="stylesheet" href="common/blur.css">
     <link rel="stylesheet" href="intro.css">
     <script src="../crash/client.js"></script>
+    <script src="./script/global_compatlayer.js"></script>
     <script>
         require('@electron/remote').getCurrentWindow().dstate = lang.discord.intro[0];
         require('@electron/remote').getCurrentWindow().ddetails = lang.discord.intro[1];
diff --git a/views/loader.html b/views/loader.html
index 9e100bb..df008d4 100644
--- a/views/loader.html
+++ b/views/loader.html
@@ -7,6 +7,7 @@
     <meta charset="UTF-8">
     <title>Kartik</title>
     <link rel="stylesheet" href="common/fonts.css">
+    <link rel="stylesheet" href="common/blur.css">
     <script>
         if (!require('@electron/remote').getCurrentWindow().debug) {
             document.write('<link rel="stylesheet" href="common/mouse.css">');
@@ -28,7 +29,7 @@
     <script>
         document.write(`<div style="position: fixed;bottom: 20px;right: 20px;font-size: 12px;padding: 10px 20px;background: lightblue;border-radius: 5px;transition: all 200ms;display:none;" id="updates">${lang.updates.wait}</div>`);
     </script>
-    <div id="warning" style="opacity:0;transition:opacity 200ms;position: fixed;background: darkred;color: white;padding: 20px 10px;max-width: 40vw;text-align: center;border-radius: 10px;left: 20vw;top: 30vh;"><h2><script>document.write(lang.updates.warn[0]);</script></h2><p><script>document.write(lang.updates.warn[1]);</script></p></div>
+    <div id="warning" style="opacity:0;transition:opacity 200ms;position: fixed;background: rgba(139,0,0,0.5);color: white;padding: 20px 10px;max-width: 40vw;text-align: center;border-radius: 10px;left: 20vw;top: 30vh;"><h2><script>document.write(lang.updates.warn[0]);</script></h2><p><script>document.write(lang.updates.warn[1]);</script></p></div>
 
     <script src="./script/loader_global.js"></script>
     <script>info("LoadWindow", "Launching start-up procedure");</script>
diff --git a/views/menu.html b/views/menu.html
index 661d397..d00107c 100644
--- a/views/menu.html
+++ b/views/menu.html
@@ -6,9 +6,11 @@
     <script src="../scenario/client.js"></script>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="common/fonts.css">
+    <link rel="stylesheet" href="common/blur.css">
     <link rel="stylesheet" href="menu.css">
     <title>Kartik</title>
     <script src="../crash/client.js"></script>
+    <script src="./script/global_compatlayer.js"></script>
     <script src="../sfx/sfx.js"></script>
     <link rel="stylesheet" href="rain/rainstyle.css">
     <script>
@@ -55,16 +57,26 @@
             </div>
         </div>
 
-        <div style="font-family:monospace;position: fixed;right: 16px;top: 16px;color: white;font-size: 10px;text-align:left;z-index:999999999;" id="gpuinfo">
-            <b><u>GPU Supported Features:</u></b><br>
-            <div id="gpuinfo-outer">Hold Shift to view</div>
-            <div id="gpuinfo-inner" style="opacity:0;">
-                <script src="./script/menu_gpuinfo.js"></script>
+        <div style="position: fixed;right: 16px;top: 16px;color: white;background: rgba(0, 0, 0, .5);font-size: 10px;text-align:left;z-index:999999999;padding: 10px;border-radius: 10px;width: 189px;" id="gpuinfo">
+            <span style="text-align:center;display:block;font-weight: bold;margin-bottom: 5px;">GPU Support Status</span>
+            <div style="margin-bottom: 10px;height: 16px;width: 100%;background: rgba(47, 47, 47, .5);border-radius: 999px;">
+                <div style="height: 16px;background: rgba(128, 0, 0, .5);border-radius: 999px;width: 0;" id="gpuinfo_progressbar"></div>
             </div>
+            <span id="gpusupportperc" style="display: block;text-align: center;">0%</span>
+            <div id="gpuinfo-model" style="opacity: .25;padding-top: 5px;text-align: center;">Generic GPU</div>
+            <div id="gpuinfo-vram" style="opacity: .25;padding-top: 5px;text-align: center;">0 MiB VRAM</div>
+            <span id="gpuinfo-details" style="border-top:1px solid rgba(255, 255, 255, .25);">
+                <div id="gpuinfo-outer" style="opacity: .25;padding-top: 5px;text-align: center;">↓ Hold Shift for details</div>
+                <div id="gpuinfo-inner" style="font-family:monospace;opacity:0;height:0;">
+                    <script src="./script/menu_gpuinfo.js"></script>
+                </div>
+            </span>
             <script>
 
                 if (require('@electron/remote').getCurrentWindow().update === "stable") {
-                    document.getElementById('gpuinfo').style.display = "none";
+                    document.getElementById('gpuinfo-outer').style.display = "none";
+                    document.getElementById('gpuinfo-inner').style.display = "none";
+                    document.getElementById('gpuinfo-details').style.display = "none";
                 }
 
             </script>
diff --git a/views/online.html b/views/online.html
index ab8e61d..ac90e7e 100644
--- a/views/online.html
+++ b/views/online.html
@@ -7,7 +7,9 @@
     <meta charset="UTF-8">
     <title>Kartik</title>
     <link rel="stylesheet" href="common/fonts.css">
+    <link rel="stylesheet" href="common/blur.css">
     <script src="../crash/client.js"></script>
+    <script src="./script/global_compatlayer.js"></script>
     <script src="../sfx/sfx.js"></script>
     <script>
         if (!require('@electron/remote').getCurrentWindow().debug) {
diff --git a/views/script/core_chart.js b/views/script/core_chart.js
index d34ce21..059c818 100644
--- a/views/script/core_chart.js
+++ b/views/script/core_chart.js
@@ -62,24 +62,9 @@ setInterval(() => {
         }
 
         if (require('./package.json').channel === "git") {
-            if (currentMemory < 100) {
-                document.getElementById('experimental-ramusage').innerText = "0" + currentMemoryMib;
-            } else {
-                document.getElementById('experimental-ramusage').innerText = currentMemoryMib;
-            }
-            buff = Buffer.from(activity, 'utf-8').toString("hex");
-            document.title="Kartik Trunk " +require('./package.json').version + "-" + require('./package.json').serial.toLowerCase() + "-debugkeys - <Debugging On>";
+            document.title="Kartik Trunk " +require('./package.json').version;
         } else {
-            if (require('./package.json').channel !== "stable") {
-                if (currentMemory < 100) {
-                    document.getElementById('experimental-ramusage').innerText = "0" + currentMemoryMib;
-                } else {
-                    document.getElementById('experimental-ramusage').innerText = currentMemoryMib;
-                }
-                document.title="Kartik"+require('@electron/remote').getCurrentWindow().channel+require('./package.json').version + eaid;
-            } else {
-                document.title="Kartik"+require('@electron/remote').getCurrentWindow().channel+require('./package.json').version + eaid;
-            }
+            document.title="Kartik"+require('@electron/remote').getCurrentWindow().channel+require('./package.json').version + eaid;
         }
     } catch (e) {}
 }, 1000)
\ No newline at end of file
diff --git a/views/script/core_compatlayer.js b/views/script/core_compatlayer.js
new file mode 100644
index 0000000..206aa28
--- /dev/null
+++ b/views/script/core_compatlayer.js
@@ -0,0 +1,89 @@
+window.addEventListener("load", () => {
+    if (require('os').platform !== "darwin") {
+        gpuinfo = require('@electron/remote').app.getGPUFeatureStatus();
+        gpuscore = 0;
+        maxscore = 10;
+        if (gpuinfo['2d_canvas'].startsWith("enabled")) {
+            if (gpuinfo['2d_canvas'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['gpu_compositing'].startsWith("enabled")) {
+            if (gpuinfo['gpu_compositing'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['video_decode'].startsWith("enabled")) {
+            if (gpuinfo['video_decode'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['multiple_raster_threads'].startsWith("enabled")) {
+            if (gpuinfo['multiple_raster_threads'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['oop_rasterization'].startsWith("enabled")) {
+            if (gpuinfo['oop_rasterization'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['rasterization'].startsWith("enabled")) {
+            if (gpuinfo['rasterization'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['opengl'].startsWith("enabled")) {
+            if (gpuinfo['opengl'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['skia_renderer'].startsWith("enabled")) {
+            if (gpuinfo['skia_renderer'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['vulkan'].startsWith("enabled")) {
+            if (gpuinfo['vulkan'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['webgl'].startsWith("enabled")) {
+            if (gpuinfo['webgl'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+
+        gpuperct = (gpuscore / maxscore) * 100;
+
+        if (gpuperct < 50) {
+            console.warn("Bad GPU support, disabling GPU-accelerated content");
+            var head = document.getElementsByTagName('HEAD')[0];
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            link.href = './views/common/compatibilityMode.css';
+            head.appendChild(link);
+        }
+    }
+})
\ No newline at end of file
diff --git a/views/script/core_music.js b/views/script/core_music.js
index a35d329..464fc85 100644
--- a/views/script/core_music.js
+++ b/views/script/core_music.js
@@ -9,6 +9,7 @@ musicIpc.on('setmusic', (event, args) => {
     musicElement.src = args;
     musicElement.play();
     musicElement.volume = 1;
+    musicElement.loop = true;
     /*if (!musicElement.paused) {
         csi1 = setInterval(() => {
             if (musicElement.volume <= 0.05) {
diff --git a/views/script/global_compatlayer.js b/views/script/global_compatlayer.js
new file mode 100644
index 0000000..8545a29
--- /dev/null
+++ b/views/script/global_compatlayer.js
@@ -0,0 +1,89 @@
+window.addEventListener("load", () => {
+    if (require('os').platform !== "darwin") {
+        gpuinfo = require('@electron/remote').app.getGPUFeatureStatus();
+        gpuscore = 0;
+        maxscore = 10;
+        if (gpuinfo['2d_canvas'].startsWith("enabled")) {
+            if (gpuinfo['2d_canvas'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['gpu_compositing'].startsWith("enabled")) {
+            if (gpuinfo['gpu_compositing'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['video_decode'].startsWith("enabled")) {
+            if (gpuinfo['video_decode'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['multiple_raster_threads'].startsWith("enabled")) {
+            if (gpuinfo['multiple_raster_threads'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['oop_rasterization'].startsWith("enabled")) {
+            if (gpuinfo['oop_rasterization'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['rasterization'].startsWith("enabled")) {
+            if (gpuinfo['rasterization'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['opengl'].startsWith("enabled")) {
+            if (gpuinfo['opengl'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['skia_renderer'].startsWith("enabled")) {
+            if (gpuinfo['skia_renderer'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['vulkan'].startsWith("enabled")) {
+            if (gpuinfo['vulkan'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+        if (gpuinfo['webgl'].startsWith("enabled")) {
+            if (gpuinfo['webgl'] === "enabled") {
+                gpuscore++;
+            } else {
+                gpuscore += 0.5;
+            }
+        }
+
+        gpuperct = (gpuscore / maxscore) * 100;
+
+        if (gpuperct < 50) {
+            console.warn("Bad GPU support, disabling GPU-accelerated content");
+            var head = document.getElementsByTagName('HEAD')[0];
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            link.href = './common/compatibilityMode.css';
+            head.appendChild(link);
+        }
+    }
+})
\ No newline at end of file
diff --git a/views/script/menu_gpuinfo.js b/views/script/menu_gpuinfo.js
index 4177cfc..accf318 100644
--- a/views/script/menu_gpuinfo.js
+++ b/views/script/menu_gpuinfo.js
@@ -1,3 +1,95 @@
+if (require('os').platform === "darwin") {
+    document.getElementById("gpuinfo").style.display = "none";
+}
+
+if (require('os').platform !== "darwin") {
+    gpuinfo = require('@electron/remote').app.getGPUFeatureStatus();
+    gpuscore = 0;
+    maxscore = 10;
+    if (gpuinfo['2d_canvas'].startsWith("enabled")) {
+        if (gpuinfo['2d_canvas'] === "enabled") {
+            gpuscore++;
+        } else {
+            gpuscore += 0.5;
+        }
+    }
+    if (gpuinfo['gpu_compositing'].startsWith("enabled")) {
+        if (gpuinfo['gpu_compositing'] === "enabled") {
+            gpuscore++;
+        } else {
+            gpuscore += 0.5;
+        }
+    }
+    if (gpuinfo['video_decode'].startsWith("enabled")) {
+        if (gpuinfo['video_decode'] === "enabled") {
+            gpuscore++;
+        } else {
+            gpuscore += 0.5;
+        }
+    }
+    if (gpuinfo['multiple_raster_threads'].startsWith("enabled")) {
+        if (gpuinfo['multiple_raster_threads'] === "enabled") {
+            gpuscore++;
+        } else {
+            gpuscore += 0.5;
+        }
+    }
+    if (gpuinfo['oop_rasterization'].startsWith("enabled")) {
+        if (gpuinfo['oop_rasterization'] === "enabled") {
+            gpuscore++;
+        } else {
+            gpuscore += 0.5;
+        }
+    }
+    if (gpuinfo['rasterization'].startsWith("enabled")) {
+        if (gpuinfo['rasterization'] === "enabled") {
+            gpuscore++;
+        } else {
+            gpuscore += 0.5;
+        }
+    }
+    if (gpuinfo['opengl'].startsWith("enabled")) {
+        if (gpuinfo['opengl'] === "enabled") {
+            gpuscore++;
+        } else {
+            gpuscore += 0.5;
+        }
+    }
+    if (gpuinfo['skia_renderer'].startsWith("enabled")) {
+        if (gpuinfo['skia_renderer'] === "enabled") {
+            gpuscore++;
+        } else {
+            gpuscore += 0.5;
+        }
+    }
+    if (gpuinfo['vulkan'].startsWith("enabled")) {
+        if (gpuinfo['vulkan'] === "enabled") {
+            gpuscore++;
+        } else {
+            gpuscore += 0.5;
+        }
+    }
+    if (gpuinfo['webgl'].startsWith("enabled")) {
+        if (gpuinfo['webgl'] === "enabled") {
+            gpuscore++;
+        } else {
+            gpuscore += 0.5;
+        }
+    }
+
+    gpuperct = (gpuscore/maxscore)*100;
+    document.getElementById("gpusupportperc").innerText = gpuperct + "%";
+
+    document.getElementById("gpuinfo_progressbar").style.width = gpuperct + "%";
+    if (gpuperct < 50) {
+        document.getElementById("gpuinfo_progressbar").style.background = "rgba(128, 0, 0, .5)";
+    } else if (gpuperct < 75) {
+        document.getElementById("gpuinfo_progressbar").style.background = "rgba(128, 128, 0, .5)";
+    } else {
+        document.getElementById("gpuinfo_progressbar").style.background = "rgba(0, 128, 0, .5)";
+    }
+}
+
 if (require('os').platform !== "darwin") {
     gpuinfo = require('@electron/remote').app.getGPUFeatureStatus();
     document.write("kartik<br>");
@@ -39,6 +131,11 @@ if (require('os').platform !== "darwin") {
     } else {
         document.write(" &nbsp;├ <span style='color:lightcoral;'>kartik.renderer.OpenGL</span><br>");
     }
+    if (gpuinfo['webgl'].startsWith("enabled")) {
+        document.write(" &nbsp;├ <span style='color:lightgreen;'>kartik.renderer.WebGL</span><br>");
+    } else {
+        document.write(" &nbsp;├ <span style='color:lightcoral;'>kartik.renderer.WebGL</span><br>");
+    }
     if (gpuinfo['skia_renderer'].startsWith("enabled")) {
         document.write(" &nbsp;├ <span style='color:lightgreen;'>kartik.renderer.Skia</span><br>");
     } else {
@@ -56,14 +153,30 @@ if (require('os').platform !== "darwin") {
 document.onkeydown = (e) => {
     if (e.shiftKey) {
         document.getElementById('gpuinfo-inner').style.opacity = "1";
+        document.getElementById('gpuinfo-inner').style.height = "max-content";
         document.getElementById('gpuinfo-outer').style.display = "none";
     } else {
         document.getElementById('gpuinfo-inner').style.opacity = "0";
+        document.getElementById('gpuinfo-inner').style.height = "0";
         document.getElementById('gpuinfo-outer').style.display = "";
     }
 }
 
 document.onkeyup = (e) => {
     document.getElementById('gpuinfo-inner').style.opacity = "0";
+    document.getElementById('gpuinfo-inner').style.height = "0";
     document.getElementById('gpuinfo-outer').style.display = "";
-}
\ No newline at end of file
+}
+
+require('systeminformation').graphics().then((data) => {
+    document.getElementById("gpuinfo-model").innerText = data.controllers[0].model;
+    vram = data.controllers[0].vram;
+
+    if (vram > 1024) {
+        vrams = (vram/1024).toFixed(1) + " GiB";
+    } else {
+        vrams = (vram).toFixed(1) + " MiB";
+    }
+
+    document.getElementById("gpuinfo-vram").innerText = vrams + " VRAM";
+})
\ No newline at end of file
diff --git a/views/settings.html b/views/settings.html
index 4409ed9..1759d25 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -6,9 +6,11 @@
     <script src="../scenario/client.js"></script>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="common/fonts.css">
+    <link rel="stylesheet" href="common/blur.css">
     <link rel="stylesheet" href="menu.css">
     <title>Kartik</title>
     <script src="../crash/client.js"></script>
+    <script src="./script/global_compatlayer.js"></script>
     <script src="../sfx/sfx.js"></script>
     <script>
         if (!require('@electron/remote').getCurrentWindow().debug) {
diff --git a/views/stats.html b/views/stats.html
index 4d6d01c..dcb4275 100644
--- a/views/stats.html
+++ b/views/stats.html
@@ -7,7 +7,9 @@
     <meta charset="UTF-8">
     <title>Kartik</title>
     <link rel="stylesheet" href="common/fonts.css">
+    <link rel="stylesheet" href="common/blur.css">
     <script src="../crash/client.js"></script>
+    <script src="./script/global_compatlayer.js"></script>
     <script src="../sfx/sfx.js"></script>
     <script>
         if (!require('@electron/remote').getCurrentWindow().debug) {
diff --git a/views/win.html b/views/win.html
index 1739098..a3cdfb5 100644
--- a/views/win.html
+++ b/views/win.html
@@ -7,7 +7,9 @@
     <meta charset="UTF-8">
     <title>Kartik</title>
     <link rel="stylesheet" href="common/fonts.css">
+    <link rel="stylesheet" href="common/blur.css">
     <script src="../crash/client.js"></script>
+    <script src="./script/global_compatlayer.js"></script>
     <script src="../sfx/sfx.js"></script>
     <script>
         if (!require('@electron/remote').getCurrentWindow().debug) {