build: icons

package.json

@@ -10,6 +10,8 @@
     "lint": "vue-cli-service lint",
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
+    "electron:buildicon": "electron-icon-builder --input=./public/img/icons/android-chrome-512x512.png --output=public/img/ --flatten",
+    "electron:publish": "vue-cli-service electron:build -p always",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps",
     "prettier": "npx prettier --write ./src ./script",
@@ -27,9 +29,10 @@
     "crypto-js": "^4.0.0",
     "dayjs": "^1.8.36",
     "electron": "^10.1.4",
+    "electron-context-menu": "^2.3.0",
     "electron-debug": "^3.1.0",
     "electron-devtools-installer": "^3.1.1",
-    "electron-context-menu": "^2.3.0",
+    "electron-icon-builder": "^1.0.2",
     "electron-is-dev": "^1.2.0",
     "electron-log": "^4.2.4",
     "electron-updater": "^4.3.5",

src/background.js

@@ -8,6 +8,7 @@ import {
   BrowserWindow,
   ipcMain,
   dialog,
+  Tray,
   globalShortcut,
 } from "electron";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
@@ -25,20 +26,26 @@ let win;
 protocol.registerSchemesAsPrivileged([
   { scheme: "app", privileges: { secure: true, standard: true } },
 ]);
+const iconString = path.join(__static, "img/icons/apple-touch-icon.png")
 
+let bounceId = app.dock.bounce()
+// app.dock.setBadge('Yes Play Music')
+app.dock.setIcon(iconString)
 function createWindow() {
   require('./electron/services')
-
+  // TODO Set the tray icon, need a white icon
+  // const trayIcon = path.join(__static, "img/icons/32x32.png")
+  // const tray = new Tray(trayIcon)
 // Create the browser window.
   win = new BrowserWindow({
     width: 1440,
     height: 768,
+    icon: iconString,
     webPreferences: {
       webSecurity: false,
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
       nodeIntegration: true,
     },
-    icon: path.join(__static, "./img/icons/android-chrome-512x512.png"),
     preload: path.join(__dirname, "./electron/preload.js"),
   });
 
@@ -50,6 +57,8 @@ function createWindow() {
     createProtocol("app");
     // Load the index.html when not in development
     win.loadURL("app://./index.html");
+    app.dock.cancelBounce(bounceId)
+    
     // autoUpdater.checkForUpdatesAndNotify()
   }
 
@@ -58,6 +67,8 @@ function createWindow() {
   });
 }
 
+
+
 // Quit when all windows are closed.
 app.on("window-all-closed", () => {
   // On macOS it is common for applications and their menu bar

src/electron/command.js

@@ -1,11 +1,11 @@
 "use strict";
 
-import { app, ipcMain, Menu, MenuItem, BrowserWindow, globalShortcut } from 'electron'
+const { app, ipcMain, Menu, MenuItem, BrowserWindow, globalShortcut } = require('electron')
 
-let loginWindow, senders;
+let loginWindow, senders, win
 
 function openWindow(url) {
-  const win = new BrowserWindow({
+  win = new BrowserWindow({
     height: 500,
     width: 350,
     useContentSize: true,
@@ -68,7 +68,7 @@ const settingsMenu = {
   },
 };
 
-export function command(mainWindow, winURL) {
+function command(mainWindow, winURL) {
   // 显示播放菜单
   settingsMenu.playMenu();
   // 接收显示菜单指令
@@ -114,3 +114,8 @@ export function command(mainWindow, winURL) {
     require("electron-debug")({ showDevTools: true });
   });
 }
+
+app.on("ready", async () => {
+  openWindow();
+  command(win)
+});

src/electron/touchbar.js

@@ -0,0 +1,103 @@
+const { app, BrowserWindow, TouchBar } = require('electron')
+
+const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar
+
+let spinning = false
+
+// Reel labels
+const reel1 = new TouchBarLabel()
+const reel2 = new TouchBarLabel()
+const reel3 = new TouchBarLabel()
+
+// Spin result label
+const result = new TouchBarLabel()
+
+// Spin button
+const spin = new TouchBarButton({
+  label: '🎰 Spin',
+  backgroundColor: '#7851A9',
+  click: () => {
+    // Ignore clicks if already spinning
+    if (spinning) {
+      return
+    }
+
+    spinning = true
+    result.label = ''
+
+    let timeout = 10
+    const spinLength = 4 * 1000 // 4 seconds
+    const startTime = Date.now()
+
+    const spinReels = () => {
+      updateReels()
+
+      if ((Date.now() - startTime) >= spinLength) {
+        finishSpin()
+      } else {
+        // Slow down a bit on each spin
+        timeout *= 1.1
+        setTimeout(spinReels, timeout)
+      }
+    }
+
+    spinReels()
+  }
+})
+
+const getRandomValue = () => {
+  const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
+  return values[Math.floor(Math.random() * values.length)]
+}
+
+const updateReels = () => {
+  reel1.label = getRandomValue()
+  reel2.label = getRandomValue()
+  reel3.label = getRandomValue()
+}
+
+const finishSpin = () => {
+  const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size
+  if (uniqueValues === 1) {
+    // All 3 values are the same
+    result.label = '💰 Jackpot!'
+    result.textColor = '#FDFF00'
+  } else if (uniqueValues === 2) {
+    // 2 values are the same
+    result.label = '😍 Winner!'
+    result.textColor = '#FDFF00'
+  } else {
+    // No values are the same
+    result.label = '🙁 Spin Again'
+    result.textColor = null
+  }
+  spinning = false
+}
+
+const touchBar = new TouchBar({
+  items: [
+    spin,
+    new TouchBarSpacer({ size: 'large' }),
+    reel1,
+    new TouchBarSpacer({ size: 'small' }),
+    reel2,
+    new TouchBarSpacer({ size: 'small' }),
+    reel3,
+    new TouchBarSpacer({ size: 'large' }),
+    result
+  ]
+})
+
+let window
+
+app.whenReady().then(() => {
+  window = new BrowserWindow({
+    frame: false,
+    titleBarStyle: 'hiddenInset',
+    width: 200,
+    height: 200,
+    backgroundColor: '#000'
+  })
+  window.loadURL('about:blank')
+  window.setTouchBar(touchBar)
+})