testing adding your own games

SushyDev · Dec 20, 2020 · 3cf3baf · 3cf3baf
1 parent c2490a8
commit 3cf3baf
Show file tree

Hide file tree

Showing 19 changed files with 590 additions and 477 deletions.
diff --git a/app/css/backup_&_sync.css b/app/css/backup_&_sync.css
@@ -3,7 +3,3 @@
   bottom: 16px;
   right: 16px;
 }
-
-.mdc-dialog .mdc-dialog__surface .mdc-text-field {
-  --mdc-theme-primary: var(--mdc-theme-secondary);
-}
diff --git a/app/css/card-grid.css b/app/css/card-grid.css
@@ -63,7 +63,7 @@
 }
 .mdc-card .mdc-card__primary-action .game-card__primary .mdc-typography--subtitle2 {
   margin-top: 0;
-  margin-bottom: 0;
+  margin-bottom: 4px;
 }
 .mdc-card .mdc-card__action-buttons {
   margin-top: -48px;

diff --git a/app/css/installed.css b/app/css/installed.css
@@ -14,7 +14,30 @@
 .mdc-dialog .mdc-dialog__content .buttonrow .row-icon i {
   margin: 0px;
 }
+.mdc-dialog.add-game-dialog .mdc-dialog__content {
+  padding-bottom: 0px;
+}
+.mdc-dialog.add-game-dialog .mdc-dialog__surface {
+  width: 400px;
+}
+.mdc-dialog.add-game-dialog .mdc-button {
+  margin-top: 12px;
+}
+.mdc-dialog.add-game-dialog .game-directory-text {
+  width: 100%;
+}
+.mdc-dialog.add-game-dialog .game-directory-text p {
+  overflow-x: auto;
+  white-space: nowrap;
+  margin-bottom: 0;
+}
 
 .mdc-card .mdc-card__primary-action .game-card__primary {
   margin-bottom: 0px;
 }
+
+.mdc-fab {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+}
diff --git a/app/html/installed.html b/app/html/installed.html
@@ -3,6 +3,11 @@
     <link rel="stylesheet" href="../css/installed.css" />
     <script src="../js/components/card-grid/card-builder.js"></script>
     <script src="../js/components/card-grid/card-grid.js"></script>
+    <script src="../js/components/game-management/add-custom.js"></script>
+    <script src="../js/components/game-management/executables.js"></script>
+    <script src="../js/components/game-management/play.js"></script>
+    <script src="../js/components/game-management/remove.js"></script>
+    <script src="../js/components/game-management/shortcuts.js"></script>
     <script src="../js/installed.js"></script>
 </head>
 
@@ -16,6 +21,12 @@
 <!--Div with cards-->
 <div class="cards" id="cards"></div>
 
+<!--Add games FAB-->
+<button class="mdc-fab" aria-label="Favorite" onclick="addInstalledGame()" data-mdc-auto-init="MDCRipple">
+    <div class="mdc-fab__ripple"></div>
+    <span class="mdc-fab__icon material-icons">add</span>
+</button>
+
 <!--Game page-->
 <div class="selected-game" id="selected-game">
     <!--top row-->

diff --git a/app/js/components/card-grid/card-builder.js b/app/js/components/card-grid/card-builder.js
@@ -29,7 +29,7 @@ function selectCard(gameInfo, fetchName, type) {
         if (sessionStorage.getItem('page') != 'Installed') return;
         //Card for installed
         return `
-        <div class="mdc-card__primary-action" tabindex="0" data-mdc-auto-init="MDCRipple" style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), url('${gameInfo.background_image}')" id="${fetchName}-cover" onclick="openInstalled('${fetchName}', '${gameInfo.name}', '${gameFolder}', '${gameInfo.fileName}')">
+        <div class="mdc-card__primary-action" tabindex="0" data-mdc-auto-init="MDCRipple" style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), url('${gameInfo.background_image}')" id="${fetchName}-cover" onclick="openInstalled('${fetchName}', '${gameInfo.name}', '${gameInfo.gameDir}')">
         <div class="game-card__primary">
         <h2 class="game-card__title mdc-typography mdc-typography--headline6">${gameInfo.name}</h2>
         <h3 class="demo-card__subtitle mdc-typography mdc-typography--subtitle2">${fetchName}</h3>
@@ -55,11 +55,11 @@ function selectCard(gameInfo, fetchName, type) {
 }
 
 //Add data to the card
-async function buildCard(fetchName, type, fileName = undefined, gameFolder = undefined) {
+async function buildCard(fetchName, type, gameDir = undefined, gameFolder = undefined) {
     //If no cover is found use not found logo
     var gameInfo = await fetch(fetchName);
     //Create the card
-    gameInfo = {...gameInfo, fileName: fileName, gameFolder: gameFolder};
+    gameInfo = {...gameInfo, gameDir: gameDir, gameFolder: gameFolder};
 
     var cardContent = selectCard(gameInfo, fetchName, type);
     if (!!cardContent) {

diff --git a/app/js/components/downloader/add-game.js b/app/js/components/downloader/add-game.js
@@ -1,5 +1,8 @@
-function addGameToLibrary(targetPath, targetFolder, fileName, gameTitle) {
+function addGameToLibrary(targetPath, targetFolder, gameTitle) {
     var file = path.join(appDataPath, '/Json/library.json');
+
+    var folderName = targetFolder.split('/').pop();
+
     fs.readFile(file, 'utf-8', (err, data) => {
         var array;
         try {
@@ -11,8 +14,8 @@ function addGameToLibrary(targetPath, targetFolder, fileName, gameTitle) {
         var updatedArray = array;
         updatedArray['list'].push({
             name: gameTitle,
-            folder: targetFolder,
-            fileName: fileName,
+            directory: targetFolder,
+            folder: folderName,
         });
 
         fs.writeFile(file, JSON.stringify(updatedArray), function (err) {

diff --git a/app/js/components/downloader/download-manager.js b/app/js/components/downloader/download-manager.js
@@ -9,47 +9,47 @@ function startDownload(url, dir, gameTitle) {
             if (started.includes(gameTitle)) return;
             started.push(gameTitle);
 
-            var fileName = item.getFilename();
-            var fullPath = path.join(localStorage.getItem('downloadDir'), fileName);
-            var name = fileName.slice(0, -4);
-            var fileurl = item.getURL();
-            var fileType = fileName.substr(-3);
+            var downloadDir = localStorage.getItem('downloadDir');
+            var zipFile = item.getFilename();
+            var fullPath = path.join(downloadDir, zipFile);
+            var folderName = zipFile.slice(0, -4);
+            var fileType = zipFile.substr(-3);
 
             var snackbarData = {
                 ['main']: [
                     {
-                        name: `${name}-download`,
+                        name: `${gameTitle}-download`,
                     },
                 ],
                 ['progress']: [
                     {
                         enabled: true,
-                        id: `${name}-completed-progress`,
+                        id: `${gameTitle}-completed-progress`,
                     },
                 ],
                 ['label']: [
                     {
-                        id: `${name}-snackbar-title`,
-                        innerHTML: `Downloading ${fileName} 0%`,
+                        id: `${gameTitle}-snackbar-title`,
+                        innerHTML: `Downloading ${zipFile} 0%`,
                     },
                 ],
                 ['actions']: [
                     {
                         type: 'button',
                         innerHTML: 'Pause',
-                        labelid: `${name}-pause-button__label`,
+                        labelid: `${gameTitle}-pause-button__label`,
                         class: 'pause-button',
                         id: 'pause-button',
-                        onclick: `pauseDownload('${name}')`,
+                        onclick: `pauseDownload('${gameTitle}')`,
                     },
                 ],
                 ['close']: [
                     {
                         enabled: true,
-                        onclick: `cancelDownload('${name}', true, 'Are you sure you want to cancel the download for ${fileName}', '${fullPath.replace(/\\/g, '/')}')`,
+                        onclick: `cancelDownload('${gameTitle}', true, 'Are you sure you want to cancel the download for ${zipFile}', '${fullPath.replace(/\\/g, '/')}')`,
                         title: 'Cancel',
                         icon: 'close',
-                        id: `${name}-close`,
+                        id: `${gameTitle}-close`,
                     },
                 ],
             };
@@ -60,22 +60,18 @@ function startDownload(url, dir, gameTitle) {
             //Create snackbar
             createSnack(snackbarData);
 
-            ipcRenderer.on(`${name}-pause`, () => {
+            ipcRenderer.on(`${gameTitle}-pause`, () => {
                 item.pause();
             });
 
-            ipcRenderer.on(`${name}-resume`, () => {
+            ipcRenderer.on(`${gameTitle}-resume`, () => {
                 item.resume();
             });
-            ipcRenderer.on(`${name}-cancel`, () => {
+
+            ipcRenderer.on(`${gameTitle}-cancel`, () => {
                 item.cancel();
+                //remove item from currently downloading list
                 downloading.shift();
-                //remove zip file
-                fs.unink(fullPath, (err) => {
-                    if (err) {
-                        console.error(err);
-                    }
-                });
                 //Stop
                 return;
             });
@@ -90,8 +86,8 @@ function startDownload(url, dir, gameTitle) {
                     var downloadPercent = (received_bytes * 100) / total_bytes;
                     var scalePercent = downloadPercent / 100;
 
-                    document.getElementById(`${name}-completed-progress`).style.transform = `scaleX(${scalePercent})`;
-                    document.getElementById(`${name}-snackbar-title`).innerHTML = `Downloading ${fileName} ${downloadPercent.toFixed(2)}%`;
+                    document.getElementById(`${gameTitle}-completed-progress`).style.transform = `scaleX(${scalePercent})`;
+                    document.getElementById(`${gameTitle}-snackbar-title`).innerHTML = `Downloading ${zipFile} ${downloadPercent.toFixed(2)}%`;
                 } catch (e) {
                     /* Can error on download finish so it catches here */
                 }
@@ -105,19 +101,19 @@ function startDownload(url, dir, gameTitle) {
                     downloading.shift();
 
                     //Remove download snackbar
-                    closeSnackbar(`${name}-download`, false);
+                    closeSnackbar(`${gameTitle}-download`, false);
 
                     //Add downloaded game to library or install update
                     if (gameTitle == 'vapor-store-update') {
-                        installUpdate(fileName);
+                        installUpdate(zipFile);
                     } else {
-                        addGameToLibrary(fullPath, localStorage.getItem('downloadDir'), fileName, gameTitle);
+                        addGameToLibrary(fullPath, path.join(downloadDir, folderName), gameTitle);
                     }
 
                     var snackbarData = {
                         ['main']: [
                             {
-                                name: `${name}-extractyn`,
+                                name: `${gameTitle}-extractyn`,
                             },
                         ],
                         ['progress']: [
@@ -127,26 +123,26 @@ function startDownload(url, dir, gameTitle) {
                         ],
                         ['label']: [
                             {
-                                id: `${name}-snackbar-title`,
-                                innerHTML: `Do you want to extract ${fileName}`,
+                                id: `${gameTitle}-snackbar-title`,
+                                innerHTML: `Do you want to extract ${zipFile}`,
                             },
                         ],
                         ['actions']: [
                             {
                                 type: 'button',
                                 innerHTML: 'Yes',
-                                labelid: `${name}-extract-button__label`,
+                                labelid: `${gameTitle}-extract-button__label`,
                                 class: 'yes-extract-button',
                                 id: 'yes-extract-button',
-                                onclick: `extractDownload('${fullPath.replace(/\\/g, '/')}', '${localStorage.getItem('downloadDir').replace(/\\/g, '/')}', '${fileName}', '${gameTitle}')`,
+                                onclick: `extractDownload('${fullPath.replace(/\\/g, '/')}', '${path.join(downloadDir, folderName).replace(/\\/g, '/')}', '${gameTitle}')`,
                             },
                             {
                                 type: 'button',
                                 innerHTML: 'No',
-                                labelid: `${name}-close-button__label`,
+                                labelid: `${gameTitle}-close-button__label`,
                                 class: 'no-extract-button',
                                 id: 'no-extract-button',
-                                onclick: `closeSnackbar('${name}-extractyn', true, "Are you sure you don't want to extract ${fileName}")`,
+                                onclick: `closeSnackbar('${gameTitle}-extractyn', true, "Are you sure you don't want to extract ${zipFile}")`,
                             },
                         ],
                         ['close']: [
@@ -157,10 +153,12 @@ function startDownload(url, dir, gameTitle) {
                     };
 
                     //Extract downloaded zip file
-                    //If auto extract is on skip this step and extract automatically
-                    if (localStorage.getItem('autoExtract') == 'true') {
-                        extractDownload(`${fullPath.replace(/\\/g, '/')}', '${localStorage.getItem('downloadDir').replace(/\\/g, '/')}', '${fileName}', '${gameTitle}`);
-                    } else if (fileType == 'zip') createSnack(snackbarData);
+                    if (fileType == 'zip') {
+                        if (localStorage.getItem('autoExtract') == 'true') {
+                            //If auto extract is on skip this step and extract automatically
+                            extractDownload(fullPath, path.join(downloadDir, folderName), gameTitle);
+                        } else createSnack(snackbarData);
+                    }
                 } else {
                     //Download didnt complete
                     console.log(`Download failed: ${state}`);