added settings

src/assets/css/main.css

@@ -30,6 +30,7 @@ body {
 main {
   display: grid;
   margin-left: 60px;
+  min-height: 100vh;
   overflow-y: scroll;
 }
 main aside {

src/assets/css/main.less

@@ -28,6 +28,7 @@ body {
 main {
     display: grid;
     margin-left: 60px;
+    min-height: 100vh;
     overflow-y: scroll;
 
     & aside {

src/assets/css/settings.css

+.section-settings {
+  padding: 50px;
+  flex-direction: column;
+  align-items: center;
+}
+.section-settings .settings-title {
+  font-size: 14px;
+  letter-spacing: 0.25em;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.section-settings .settings-box {
+  width: 600px;
+  padding: 25px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  margin-bottom: 25px;
+}
+.section-settings .settings-box .settings-item {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  grid-gap: 15px;
+  margin-top: 15px;
+}
+.section-settings .settings-box .settings-item .settings-label {
+  align-self: center;
+  opacity: 0.6;
+}
+.section-settings .settings-box .settings-item .settings-input {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 5px;
+}
+.section-settings .settings-box .settings-item .settings-input.settings-input-twobuttons {
+  grid-template-columns: 1fr auto auto;
+}
+.section-settings .settings-box .settings-item .settings-input select,
+.section-settings .settings-box .settings-item .settings-input input[type="text"] {
+  width: 100%;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  text-transform: uppercase;
+  font-weight: 700;
+  border-radius: 4px;
+  padding: 7px 14px;
+  border: 0px;
+  transition: 0.2s ease-in-out all;
+}
+.section-settings .settings-box .settings-item .settings-input select:not(:disabled):hover,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]:not(:disabled):hover {
+  background: rgba(255, 255, 255, 0.4);
+  color: #fff;
+  cursor: pointer;
+}
+.section-settings .settings-box .settings-item .settings-input select:focus,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]:focus {
+  outline: 0;
+}
+.section-settings .settings-box .settings-item .settings-input select::placeholder,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.section-settings .settings-box .settings-item .settings-input select option,
+.section-settings .settings-box .settings-item .settings-input input[type="text"] option {
+  background: #222;
+  text-transform: initial;
+}
+.section-settings .settings-box .settings-item .settings-input select:disabled,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]:disabled {
+  opacity: 0.4;
+}
+.section-settings .settings-box .settings-item .settings-input input[type="text"] {
+  text-transform: initial;
+  font-weight: normal;
+}
+.section-settings.active {
+  display: flex;
+}

src/assets/css/settings.less

+.section-settings {
+    padding: 50px;
+    flex-direction: column;
+    align-items: center;
+
+    & .settings-title {
+        font-size: 14px;
+        letter-spacing: 0.25em;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+    & .settings-box {
+        width: 600px;
+        padding: 25px;
+        background: rgba(255,255,255,0.1);
+        border-radius: 6px;
+        margin-bottom: 25px;
+
+        & .settings-item {
+            display: grid;
+            grid-template-columns: 200px 1fr;
+            grid-gap: 15px;
+            margin-top: 15px;
+
+            & .settings-label {
+                align-self: center;
+                opacity: 0.6;
+            }
+            & .settings-input {
+                display: grid;
+                grid-template-columns: 1fr;
+                grid-gap: 5px;
+
+                &.settings-input-twobuttons {
+                    grid-template-columns: 1fr auto auto;
+                }
+
+                & select, input[type="text"] {
+                    width: 100%;
+                    font-family: 'Open Sans', sans-serif;
+                    font-size: 12px;
+                    color: #fff;
+                    background: rgba(255,255,255,0.2);
+                    text-transform: uppercase;
+                    font-weight: 700;
+                    border-radius: 4px;
+                    padding: 7px 14px;
+                    border: 0px;
+                    transition: 0.2s ease-in-out all;
+                
+                    &:not(:disabled):hover {
+                        background: rgba(255,255,255,0.4);
+                        color: #fff;
+                        cursor: pointer;
+                    }
+                    &:focus {
+                        outline: 0;
+                    }
+                    &::placeholder {
+                        color: rgba(255,255,255,0.6);
+                    }
+                    & option {
+                        background: #222;
+                        text-transform: initial;
+                    }
+                    &:disabled {
+                        opacity: 0.4;
+                    }
+                }
+                & input[type="text"] {
+                    text-transform: initial;
+                    font-weight: normal;
+                }
+            }
+        }
+    }
+
+    &.active {
+        display: flex;
+    }
+}
\ No newline at end of file

src/assets/js/download.js

@@ -39,7 +39,7 @@ ipcRenderer.on("download-complete", (event, downloadPath) => {
 // Install local backup folder
 async function installBackup(backupLocation) {
     // Copy temp folder to game dir
-    await ncp(backupLocation, userGameDirectory, function(error) {
+    await ncp(backupLocation, userSettings.get('gameDirectory'), function(error) {
         if(error) {
             console.error(error);
             console.error("Couldn't copy backup!");

src/assets/js/module.srxd.js

@@ -97,10 +97,10 @@ class SRXD {
         return dir.filter( elm => elm.match(new RegExp(`.*\.srtb$`, 'ig')));
     }
     getSongCover(fileName) {
-        let dir = fs.readdirSync( path.join(userGameDirectory, "AlbumArt") );
+        let dir = fs.readdirSync( path.join(userSettings.get('gameDirectory'), "AlbumArt") );
         let fileExtension = dir.filter( elm => elm.match(new RegExp(`(${fileName}).*\.$`, 'ig')));
     
-        let finalPath = path.join(userGameDirectory, "AlbumArt", fileExtension[0]);
+        let finalPath = path.join(userSettings.get('gameDirectory'), "AlbumArt", fileExtension[0]);
     
         let base64Data = "data:image/jpg;base64," + fs.readFileSync(finalPath, { encoding: 'base64' });
     

src/assets/js/module.usersettings.js

+const electron = require('electron');
+const path = require('path');
+const fs = require('fs');
+
+class UserSettings {
+  constructor(opts) {
+    const userDataPath = (electron.app || electron.remote.app).getPath('userData');
+    this.path = path.join(userDataPath, 'UserSettings.json');
+    this.data = parseDataFile(this.path, opts.defaults);
+  }
+  
+  get(key) {
+    return this.data[key];
+  }
+  
+  set(key, val) {
+    this.data[key] = val;
+    this.write();
+  }
+
+  clear(key) {
+    this.data[key] = null;
+    this.write();
+  }
+
+  write() {
+    fs.writeFileSync(this.path, JSON.stringify(this.data));
+  }
+}
+
+function parseDataFile(filePath, defaults) {
+  try {
+    return JSON.parse(fs.readFileSync(filePath));
+  } catch(error) {
+    return defaults;
+  }
+}
+
+module.exports = UserSettings;
\ No newline at end of file

src/assets/js/section.settings.js

+const DOMSettingsInputVersion = document.querySelector(".settings-input-version");
+const DOMSettingsInputLanguage = document.querySelector(".settings-input-language");
+const DOMSettingsInputGameDirectory = document.querySelector(".settings-input-gamedirectory");
+
+function InitSettings() {
+    DOMSettingsInputVersion.innerText = app.getVersion() + "-" + (isDev ? "dev" : "prod");
+
+    DOMSettingsInputLanguage.querySelectorAll("option").forEach(function(optionItem) {
+        if(optionItem.value == userSettings.get('language')) {
+            optionItem.selected = true;
+        }
+    });
+
+    DOMSettingsInputGameDirectory.value = userSettings.get('gameDirectory');
+}
+
+function CheckForUpdate() {
+
+}
+
+function SettingsChangeLanguage() {
+    let selectedLanguage = DOMSettingsInputLanguage.value;
+    userSettings.set('language', selectedLanguage);
+
+    // App restart
+    window.location = window.location;
+}
+
+function SettingsSelectGameDirectory() {
+    dialog.showOpenDialog({ title: "Open Game Directory", properties: ['openDirectory'] }).then(result => {
+        if(!result.canceled) {
+            let directoryPath = result.filePaths[0];
+
+            userSettings.set('gameDirectory', directoryPath);
+            DOMSettingsInputGameDirectory.value = userSettings.get('gameDirectory');
+        }
+    });
+}
+
+function SettingsResetGameDirectory() {
+    userSettings.set('gameDirectory', detectGameDirectory());
+    DOMSettingsInputGameDirectory.value = userSettings.get('gameDirectory');
+}
\ No newline at end of file

src/assets/js/userData.js

-console.log("Initializing System.");
-
-let systemOS = process.platform;
-let tempDirLocation = app.getPath('temp');
-
-let userShowExplicit = false;
-let userGameDirectory = "";
-
-// TODO: Mac/Linux Support
-// TODO: Custom Dir
-if(process.platform == "win32") {
-    userGameDirectory = path.join(app.getPath("userData"), "../..", "LocalLow", "Super Spin Digital", "Spin Rhythm XD", "Custom");
-} else {
-    console.error("Unsupported system");
-}
\ No newline at end of file