electron service restructure + card template not working on new games fix

Author: hristoiankov

.gitignore

@@ -3,3 +3,5 @@ node_modules/
 cider-app/electron/dist/main.js
 cider-app/electron/dist/main.js.map
 cider-app/release/
+cider-app/electron-app/dist/main.js
+cider-app/electron-app/dist/main.js.map

cider-app/electron/main.ts cider-app/electron-app/main.tscider-app/electron/main.ts renamed to cider-app/electron-app/main.ts

@@ -105,7 +105,12 @@ try {
     const result = await dialog.showOpenDialog(win, {
       properties: ['openDirectory']
     })
-    console.log('directory selected', result.filePaths)
+    console.log('directory selected', result.filePaths);
+  });
+
+  // exit the application
+  ipcMain.on('exit-application', async (event, arg) => {
+    app.quit();
   });
 
 } catch (e) {

cider-app/electron/package.json cider-app/electron-app/package.jsoncider-app/electron/package.json renamed to cider-app/electron-app/package.json

@@ -5,15 +5,15 @@
     "name": "Hristo Iankov"
   },
   "version": "0.3.0",
-  "main": "electron/dist/main.js",
+  "main": "electron-app/dist/main.js",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "electron": "ng build --base-href ./ && tsc --p electron && electron .",
-    "electron:build": "ng build --base-href ./ && tsc --p electron && electron-builder build --publish=never"
+    "electron": "ng build --base-href ./ && tsc --p electron-app && electron .",
+    "electron:build": "ng build --base-href ./ && tsc --p electron-app && electron-builder build --publish=never"
   },
   "browser": {
     "fs": false,

cider-app/electron/tsconfig.json cider-app/electron-app/tsconfig.jsoncider-app/electron/tsconfig.json renamed to cider-app/electron-app/tsconfig.json

@@ -26,7 +26,7 @@
                     </span>
                 </div>
                 <div class="preview-space" >
-                    <app-card-preview [card]="selectedCard" [template]="selectedTemplate" 
+                    <app-card-preview [card]="selectedCard" [template]="selectedTemplate" *ngIf="selectedCard"
                         [style]="{transform: 'translate(-50%, -50%) scale(' + zoom + ') translate(calc(399px/2/' + zoom + '), calc((100vh - 388px)/2/' + zoom + '))'}"
                         ></app-card-preview>
                 </div>
@@ -38,7 +38,7 @@
                     <ng-template pTemplate="icons">
                         <button pButton pRipple icon="pi pi-info-circle" class="p-panel-header-icon p-link" (click)="openCssInfo()"></button>
                     </ng-template>
-                    <ngx-monaco-editor style="height: 100%;" 
+                    <ngx-monaco-editor style="height: 100%;" *ngIf="selectedTemplate"
                         [options]="cssEditorOptions" [(ngModel)]="selectedTemplate.css"></ngx-monaco-editor>
                 </p-panel>
             </div>
@@ -47,7 +47,7 @@
                     <ng-template pTemplate="icons">
                         <button pButton pRipple icon="pi pi-info-circle" class="p-panel-header-icon p-link" (click)="openHtmlInfo()"></button>
                     </ng-template>
-                    <ngx-monaco-editor style="height: 100%;" 
+                    <ngx-monaco-editor style="height: 100%;" *ngIf="selectedTemplate"
                         [options]="htmlEditorOptions" [(ngModel)]="selectedTemplate.html"></ngx-monaco-editor>
                 </p-panel>
             </div>

cider-app/package.json

@@ -1,31 +1,49 @@
 import { Injectable } from '@angular/core';
+import { IpcRenderer } from 'electron';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ElectronService {
 
+  projectHomeUrl: string | undefined;
+
   constructor() {
   }
 
   /**
-   * async () => {
-   * const result = await ipcRenderer.invoke('my-invokable-ipc', arg1, arg2)
-   *   // ...
-   * }
+   * Determine if application is running in electron
+   * 
+   * @returns true/false
    */
+  public isElectron() : boolean {
+    return typeof window !== 'undefined' 
+      && typeof window.process === 'object' 
+      && (<any>window.process).type === 'renderer';
+  }
+
+  private getIpcRenderer(): IpcRenderer {
+    return window.require('electron').ipcRenderer;
+  }
 
   public selectDirectory() {
-    if (typeof window.require === 'function') {
-      const ipcRenderer = window.require('electron').ipcRenderer;
-      ipcRenderer.send("select-directory");
+    if (!this.isElectron()) {
+      return;
     }
+    this.getIpcRenderer().send("select-directory");
   }
 
   public titlebarDoubleClick() {
-    if (typeof window.require === 'function') {
-      const ipcRenderer = window.require('electron').ipcRenderer;
-      ipcRenderer.send("titlebar-double-clicked");
+    if (!this.isElectron()) {
+      return;
+    }
+    this.getIpcRenderer().send("titlebar-double-clicked");
+  }
+
+  public exitApplication() {
+    if (!this.isElectron()) {
+      return;
     }
+    this.getIpcRenderer().send("exit-application");
   }
 }

cider-app/src/app/card-templates/card-templates.component.html

@@ -47,13 +47,17 @@
         -webkit-app-region: none;
     }
 
+    .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
+        border-radius: 10px;
+    }
+
     .p-menuitem.selected-game {
         background-color: var(--surface-a);
         border-radius: 10px;
     }
 
     .p-menuitem.p-menuitem-active > .p-menuitem-link {
-        background: #2b323d;
+        background: var(--surface-d);
     }
 }
 

cider-app/src/app/data-services/electron/electron.service.ts

@@ -43,10 +43,12 @@ export class SiteContentAndMenuComponent implements OnInit {
               {
                 label: 'Open Project',
                 icon: 'pi pi-pw pi-file',
+                visible: this.electronService.isElectron(),
                 command: () => this.selectDirectory()
               }, {
                 label: 'Save',
-                icon: 'pi pi-pw pi-save'
+                icon: 'pi pi-pw pi-save',
+                visible: this.electronService.isElectron()
               }, {
                   separator:true
               }, {
@@ -74,6 +76,11 @@ export class SiteContentAndMenuComponent implements OnInit {
                 icon: 'pi pi-pw pi-file-pdf',
                 disabled: !selectedGame,
                 routerLink: [`/games/${selectedGame?.id}/export-cards`]
+              }, {
+                label: 'Exit Cider',
+                icon: 'pi pi-pw pi-file',
+                visible: this.electronService.isElectron(),
+                command: () => this.exitCider()
               }
             ]
           }, {
@@ -179,4 +186,8 @@ export class SiteContentAndMenuComponent implements OnInit {
     this.electronService.titlebarDoubleClick();
   }
 
+  public exitCider() {
+    this.electronService.exitApplication();
+  }
+
 }