update

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrocrown",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "An enhanced Qrodex game launcher",
   "homepage": "http://qrodex.2kool4u.net",
   "type": "commonjs",

script/gridnav.js

@@ -0,0 +1,79 @@
+/*
+  Gridnav - a way to navigate lists with a keyboard in a
+  2D fashion instea of item-by-item
+  Copyright (c) 2016 Christian Heilmann
+  Licensed under the MIT license:
+  http://www.opensource.org/licenses/mit-license.php
+  Version:  1.0.0
+*/
+
+var Gridnav = function (listelement) {
+    var that = this;
+    this.list = (typeof listelement) === 'string' ? 
+                document.querySelector(listelement) :
+                listelement;
+    if (!this.list) {
+      throw Error('List item could not be found');
+    }
+    this.setcodes = function (amount) {
+      that.codes = {
+        39:1, 68:1,
+        65:-1, 37:-1,
+        87:-that.amount, 38:-that.amount,
+        83: that.amount, 40:that.amount
+      };
+    }
+    if (!this.list.getAttribute('data-element')) {
+      this.element = this.list.firstElementChild.firstElementChild.tagName;
+    } else {
+      this.element = this.list.getAttribute('data-element').toUpperCase();
+    }
+    if (!this.list.getAttribute('data-amount')) {
+      this.amount = 6502;
+      this.setcodes(this.amount);
+    } else {
+      this.amount = +this.list.getAttribute('data-amount');
+      this.setcodes(this.amount);
+    }
+    this.setcodes(this.amount);
+    this.all = this.list.querySelectorAll(this.element);
+    this.keynav = function(ev) {
+      var t = ev.target;
+      var c;
+      var posx, posy;
+      if (t.tagName === that.element) {
+        for (var i = 0; i < that.all.length; i++) {
+          if (that.all[i] === t) {
+            c = i;
+            posx = that.all[c].offsetLeft;
+            posy = that.all[c].offsetTop;
+            break;
+          }
+        }
+        if (that.codes[ev.keyCode]) {
+          var kc = that.codes[ev.keyCode];
+          if (kc > -6502 && kc < 6502) {
+            if (that.all[c + kc]) {
+              that.all[c + kc].focus();
+            }
+          } else {
+            var add = kc < 0 ? -1 : 1;
+            while (that.all[i]) {
+              if (that.all[i].offsetLeft === posx && 
+                  that.all[i].offsetTop !== posy) {
+                that.all[i].focus();
+                break;
+              }
+              i += add;
+            }
+          }
+        }
+      }
+    }
+    this.list.addEventListener('keyup', this.keynav);
+  };
+  Gridnav.lists = [];
+
+  [].forEach.call(document.querySelectorAll('.gridnav'), function (item, key) {
+    Gridnav.lists[key] = new Gridnav(item);
+  });

script/main.js

@@ -77,6 +77,9 @@ document.onclick = () => {
     tabSwitch.currentTime = 0;
     tabSwitch.play()
 }
+function tvmode() {
+    window.location.replace('tv.html')
+}
 const changeF = (font) => {
     var h1 = document.querySelectorAll('h1');
     for (var x = 0; x < h1.length; x++) {

script/tv.js

@@ -0,0 +1,100 @@
+const remote = require('@electron/remote');
+const app = remote.app;
+const { spawn, execFile } = require('child_process');
+
+document.onkeydown = function (e) {
+    if (e.key == 'Escape') {
+        window.location.replace('index.html')
+    }
+};
+
+function notifDisplay(a,b) {
+    window.alert(b + "\n\n" + a)
+}
+
+fetch(app.getPath('userData') + '/games.json')
+    .then(response => response.json())
+    .then(data => {
+        let gameList = document.getElementById("links");
+        gameList.innerHTML = "";
+        if (data.games.length != 0) {
+            data.games.forEach(game => {
+                if (game.icon == "" || game.icon == undefined) {
+                    game.icon = "../assets/logo_1024.png";
+                }
+
+                let li = document.createElement("li");
+                let gameButton = document.createElement("button");
+                gameButton.style.backgroundImage = `url(${game.icon})`;
+                gameButton.className = "play";
+                gameButton.innerHTML = `<p>${game.name}</p>`;
+                gameButton.onclick = function () {
+                    if (gameButton.className == "play") {
+                        if (game.enableWine != true) {
+                            proc = execFile(game.exec, game.args);
+                            gameButton.className = "stop";
+                            gameButton.innerHTML = "<p>Stop</p>";
+                            proc.on('error', async (err) => {
+                                await setTimeout(500)
+                                console.log(err)
+                                if (err.message.includes('ENOENT')) notifDisplay('Double check where you are pointing the game executable to', 'Cannot find executable')
+                                else if (err.message.includes('EACCES')) notifDisplay(`In order to launch ${game.name}, please rerun QroCrown as admin or by running <pre>sudo</pre> when launching QroCrown`, 'Administrator/sudo required!')
+                                else notifDisplay(err, 'Failed to launch!')
+                                gameButton.className = "play";
+                                gameButton.innerHTML = `<p>${game.name}</p>`;
+                                console.log(err.message)
+                            });
+                            proc.on('exit', () => {
+                                gameButton.className = "play";
+                                gameButton.innerHTML = `<p>${game.name}</p>`;
+                            })
+                        } else {
+                            if (platform == 'win32') notifDisplay('Wine is only available for Mac or Linux', 'Your OS is unsupported');
+                            else {
+                                var cmdExist = require('command-exists');
+                                if (cmdExist('wine')) {
+                                    proc = spawn('wine', [game.exec]);
+                                    gameButton.className = "stop";
+                                    gameButton.innerHTML = "<p>Stop</p>";
+                                    proc.on('error', async (err) => {
+                                        await setTimeout(500)
+                                        console.log(err.message)
+                                        if (err.message.includes('ENOENT')) notifDisplay('Double check where you are pointing the game executable to', 'Cannot find executable')
+                                        else if (err.message.includes('EACCES')) notifDisplay(`In order to launch ${game.name}, please rerun QroCrown as admin or by running <pre>sudo</pre> when launching QroCrown`, 'Administrator/sudo required!')
+                                        else notifDisplay(err, 'Failed to launch!')
+                                        notifDisplay(err, 'Failed to launch!')
+                                        gameButton.className = "play";
+                                        gameButton.innerHTML = `<p>${game.name}</p>`;
+                                    });
+                                    proc.on('exit', () => {
+                                        gameButton.className = "play";
+                                        gameButton.innerHTML = `<p>${game.name}</p>`;
+                                    })
+                                } else {
+                                    notifDisplay('Wine cannot be searched. Close QroCrown, install wine, then try again.', 'Unsupported!')
+                                }
+                            }
+                        }
+                    } else {
+                        const { spawn } = require('child_process');
+                        console.log("KILLING PROCESS")
+                        try {
+                            proc.kill();
+                        }
+                        catch (e) {
+                            console.log(e);
+                            notifDisplay('Failed to kill process. Try again.', 'Cannot end process')
+                        }
+                    }
+                }
+                li.appendChild(gameButton)
+                gameList.appendChild(li);
+                var smallerlist = new Gridnav('#links');
+            });
+        }
+    })
+    .catch((e) => {
+        window.alert(e)
+        throw new Error("QroCrown_JSON_DAEMON: Hey! You can't do that! You are deleting the core of QroCrown! Reinstall QroCrown to fix this problem, or restart QroCrown.");
+        notifDisplay("You are deleting the core data of QroCrown! Reinstall or restart the entire app to fully fix this problem.", "That's illegal!")
+    })

views/css/tv.css

@@ -0,0 +1,186 @@
+ul {
+    margin: 0;
+    padding: 0;
+    clear: both;
+    background: #1d1d1d50;
+    overflow: hidden;
+    backdrop-filter: blur(10px);
+    border-radius: 25px 25px 0px 0px;
+    min-height: 100vh;
+}
+
+* {
+    font-family: torus;
+    margin: 0;
+    padding: 0;
+    transition: all 1s ease;
+    outline: none;
+    background-position: center center;
+    user-select: none;
+    overflow: hidden;
+}
+
+html {
+  background: linear-gradient(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 1)), url('https://source.unsplash.com/1600x900/?landscape');
+  background-color: black;
+  background-size: cover;
+  min-height: 100vh;
+}
+
+li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    float: left;
+    display: block;
+}
+
+li {
+    width: calc(100% / 8);
+}
+
+li:nth-child(8n+1):nth-last-child(1) {
+    width: 100%;
+}
+
+li:nth-child(8n+1):nth-last-child(1) ~ li {
+    width: 100%;
+}
+
+li:nth-child(8n+1):nth-last-child(2) {
+    width: 50%;
+}
+
+li:nth-child(8n+1):nth-last-child(2) ~ li {
+    width: 50%;
+}
+
+li:nth-child(8n+1):nth-last-child(3) {
+    width: calc(100% / 8);
+}
+
+li:nth-child(8n+1):nth-last-child(3) ~ li {
+    width: calc(100% / 8);
+}
+
+#links li {
+    width: calc(100% / 5);
+    aspect-ratio: 10/13;
+}
+
+#links li:nth-child(5n+1):nth-last-child(1) {
+    width: 100%;
+}
+
+#links li:nth-child(5n+1):nth-last-child(1) ~ li {
+    width: 100%;
+}
+
+#links li:nth-child(5n+1):nth-last-child(2) {
+    width: 50%;
+}
+
+#links li:nth-child(5n+1):nth-last-child(2) ~ li {
+    width: 50%;
+}
+
+#links li:nth-child(5n+1):nth-last-child(3) {
+    width: calc(100% / 5);
+}
+
+#links li:nth-child(5n+1):nth-last-child(3) ~ li {
+    width: calc(100% / 5);
+}
+
+button, a, .borked a {
+    text-align: center;
+    text-decoration: none;
+    font-size: 30px;
+    display: inline-block;
+    border: none;
+    margin: 5px;
+    padding: 20px 0;
+    width: calc(100% - 10px);
+    height: calc(100% - 10px);
+    transform: scale(0.8);
+    transition: 300ms;
+    border-radius: 25px;
+    background-size: cover;
+    box-shadow: 0 8px 16px 0 #5d5d5d, 0 6px 20px 0 #1d1d1d;
+    animation: skeleton-loading 1s linear infinite alternate;
+}
+
+button:focus, button:hover, a:focus, a:hover, .borked a:focus, .borked a:hover {
+    transform: scale(1);
+    background-size: cover;
+    background-position: center center;
+}
+
+.gameopening {
+  transform: scale(0.6) !important;
+}
+
+#clockandgreetings {
+    padding: 20px;
+    color: white;
+    margin-top: calc(100vh - 231px);
+}
+
+h1 {
+  font-size: 100px;
+  margin: 0;
+  text-shadow: 2px 2px 10px #000000;
+}
+
+h3 {
+  margin: 0;
+  text-shadow: 2px 2px 10px #000000;
+}
+
+button p {
+  text-shadow: 2px 2px 10px #000000;
+  color: white;
+  font-weight: bold;
+  opacity: 0;
+}
+
+button:focus p {
+  opacity: 1;
+}
+
+button:active p {
+  opacity: 0;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}
+
+#controlshelp {
+  padding: 10px;
+  width: 100vw;
+  background: #1d1d1d;
+  position: fixed;
+  box-sizing: border-box;
+  box-shadow: 0 8px 16px 0 #5d5d5d, 0 6px 20px 0 #1d1d1d;
+  z-index: 100;
+  bottom: 0;
+  color: white;
+  transition: none;
+}
+
+#controlshelp b {
+  background: lightgray;
+  padding: 3px;
+  margin-right: 5px;
+  margin-left: 10px;
+  color: black;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-radius: 15px;
+}

views/index.html

@@ -39,6 +39,8 @@
                         style="transform: rotate(45deg);"></button>
                 <button class="navbutton" id="downloads"><img id="down"
                         src="../assets/new_icons/ic_fluent_arrow_download_24_regular.svg"></button>
+                <button class="navbutton" onclick="tvmode()"><img
+                            src="../assets/ic_fluent_tv_24_regular.png"></button>
                 <button class="navbutton" id="minimize"><img id="min"
                         src="../assets/new_icons/ic_fluent_subtract_24_regular.svg"></button>
                 <button class="navbutton" id="maximize"><img src="../assets/new_icons/ic_fluent_maximize_24_regular.svg"