Add Preview Card Size Option

Author: sethjwilliamson

config-cards.html

@@ -4,31 +4,42 @@ <h2>Cards</h2>
     <div>
         <table class="table" style="margin-bottom: 0;">
             <tbody>
-            <tr>
-                <th scope="row"><h5 class="no-margin">Misc.</h4></th>
-                <td></td>
-            </tr>
-            <tr>
-                <th scope="row" style="padding-left: 40px;">Opacity</th>
-                <td>
-                <input type="text" class="form-control" id="card-opacity">
-                </td>
-            </tr>
-            <tr>
-                <th scope="row" style="padding-left: 40px;">Margin</th>
-                <td>
-                <input type="text" class="form-control" id="margin">
-                </td>
-            </tr>
-            <tr>
-                <th scope="row" style="padding-left: 60px;">
-                    <input type="checkbox" class="form-check-input" id="swap-increment">
-                    <label class="form-check-label" for="swap-increment">Swap Increment and Decrement</label>
-                </th>
-                <td>
+                <tr>
+                    <th scope="row"><h5 class="no-margin">Preview Card Size</h4></th>
+                    <td></td>
+                </tr>
+                <tr>
+                    <th scope="row" style="padding-left: 40px;">Width</th>
+                    <td>
+                    <input type="text" class="form-control" id="preview-width">
+                    </td>
+                </tr>
+                <tr>
+                    <th scope="row"><h5 class="no-margin">Card Stack</h4></th>
+                    <td></td>
+                </tr>
+                <tr>
+                    <th scope="row" style="padding-left: 40px;">Opacity</th>
+                    <td>
+                    <input type="text" class="form-control" id="card-opacity">
+                    </td>
+                </tr>
+                <tr>
+                    <th scope="row" style="padding-left: 40px;">Margin</th>
+                    <td>
+                    <input type="text" class="form-control" id="margin">
+                    </td>
+                </tr>
+                <tr>
+                    <th scope="row" style="padding-left: 60px;">
+                        <input type="checkbox" class="form-check-input" id="swap-increment">
+                        <label class="form-check-label" for="swap-increment">Swap Increment and Decrement</label>
+                    </th>
+                    <td>
 
-                </td>
-            </tr>
+                    </td>
+                </tr>
+            </tbody>
 
         </table>
         <div class="d-flex">
@@ -40,12 +51,15 @@ <h2>Cards</h2>
 <script>
     $("#card-opacity").val(config.get("card-opacity"));
     $("#margin").val(config.get("margin"));
+    $("#preview-width").val(config.get("preview-width"));
     $('#swap-increment').prop('checked', config.get("swap-increment"));
 
     $('#save').click(function() {
         config.set("card-opacity", parseFloat($("#card-opacity").val()));
-        config.set("margin", parseFloat($("#margin").val()));
+        config.set("margin", parseInt($("#margin").val()));
+        config.set("preview-width", parseInt($("#preview-width").val()));
         config.set("swap-increment", $('#swap-increment').is(':checked'));
         require("electron").ipcRenderer.send('saveUpdate');
+        // Reload details window
     })
 </script>

main.js

@@ -29,9 +29,10 @@ const config = new Store({
     "record-ai-games": false,
     "hotkey": "Control+Shift+D",
     "dark-mode": true,
-    "exit-on-close": false,
+    "exit-on-close": true,
     "margin": 3,
-    "swap-increment": false
+    "swap-increment": false,
+    "preview-width": 340
   }
 });
 const data = new Store({
@@ -171,7 +172,7 @@ function createWindow () {
       nodeIntegration:true
     }
   })
-  mainWindow.webContents.openDevTools()
+  //mainWindow.webContents.openDevTools()
   mainWindow.loadFile("main.html");
 
   mainWindow.on('close', function (event) {
@@ -238,8 +239,8 @@ function createWindow () {
   });
 
   fullCardWindow = new BrowserWindow({
-    width:340,
-    height:512,
+    width:config.get("preview-width"),
+    height:parseInt(config.get("preview-width") * 512 / 340),
     maximizable:false,
     transparent:true,
     skipTaskbar:true,
@@ -388,6 +389,7 @@ function createWindow () {
     let windowPosition;
     let windowSize;
     let windowY;
+    let fullSize = fullCardWindow.getSize();
 
     switch (window) {
       case "tracker":
@@ -409,18 +411,18 @@ function createWindow () {
         break;
     }
 
-    if (windowPosition[1] - 256 + y < 0) {
+    if (windowPosition[1] - (fullSize[1] / 2) + y < 0) {
       windowY = 0;
     } 
-    else if (windowPosition[1] + 256 + y > screen.getPrimaryDisplay().workAreaSize.height) {
-      windowY = screen.getPrimaryDisplay().workAreaSize.height - 512;
+    else if (windowPosition[1] + (fullSize[1] / 2) + y > screen.getPrimaryDisplay().workAreaSize.height) {
+      windowY = parseInt(screen.getPrimaryDisplay().workAreaSize.height - fullSize[1]);
     } 
     else {
-      windowY = windowPosition[1] - 256 + y;
+      windowY = parseInt(windowPosition[1] - (fullSize[1] / 2) + y);
     }
 
     if (windowPosition[0] > screen.getPrimaryDisplay().workAreaSize.width / 2 || window === "main") { // config
-      fullCardWindow.setPosition(windowPosition[0] - 340, windowY); 
+      fullCardWindow.setPosition(windowPosition[0] - fullSize[0], windowY); 
     }
     else {
       fullCardWindow.setPosition(windowPosition[0] + windowSize[0], windowY); 
@@ -477,6 +479,9 @@ function createWindow () {
     if (config.get("opponent-deck-disabled")) {
       oppDeckWindow.hide();
     }
+
+    fullCardWindow.setSize(config.get("preview-width"), parseInt(config.get("preview-width") * 512 / 340));
+
   });
 
   registerHotkeys();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lor-tracker",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "A deck tracker for Legends of Runeterra",
   "main": "main.js",
   "scripts": {

previewCard.html

@@ -2,7 +2,7 @@
   <link rel="stylesheet" href="myStyle.css">
 </head>
 <body>
-  <img class="full-card" id="card">
+  <img class="full" id="card">
 </body>
 <script>
     const {ipcRenderer} = require('electron');