Add custom cursor support (#49)

src/locales/en.json

@@ -296,6 +296,21 @@
     },
     "downloadsWillAppearHere": {
       "string": "Downloads will appear here"
+    },
+    "cursor": {
+      "string": "Cursor"
+    },
+    "normalCursor": {
+      "string": "Normal cursor"
+    },
+    "noCursor": {
+      "string": "Hide cursor"
+    },
+    "customCursor": {
+      "string": "Custom cursor"
+    },
+    "cursorHelp": {
+      "string": "32x32 pixel images work best."
     }
   },
   "fileInput": {

src/packager/PackagerOptions.svelte

@@ -44,6 +44,9 @@
   const icon = fileStore.writableFileStore(`PackagerOptions.icon.${projectData.uniqueId}`);
   $: $options.app.icon = $icon;
 
+  const customCursorIcon = fileStore.writableFileStore(`PackagerOptions.customCursorIcon.${projectData.uniqueId}`);
+  $: $options.cursor.custom = $customCursorIcon;
+
   const handleLargeAssetFetchProgress = ({detail}) => {
     if (detail.asset.startsWith('nwjs-')) {
       $progress.text = $_('progress.loadingNwjs');
@@ -269,6 +272,28 @@
     {$_('options.accentColor')}
   </label>
 
+  <h3>{$_('options.cursor')}</h3>
+  <div>
+    <label>
+      <input type="radio" bind:group={$options.cursor.type} value="auto">
+      {$_('options.normalCursor')}
+    </label>
+    <label>
+      <input type="radio" bind:group={$options.cursor.type} value="none">
+      {$_('options.noCursor')}
+    </label>
+    <label>
+      <input type="radio" bind:group={$options.cursor.type} value="custom">
+      {$_('options.customCursor')}
+    </label>
+  </div>
+  {#if $options.cursor.type === 'custom'}
+    <div in:slide|self>
+      <ImageInput bind:file={$customCursorIcon} />
+      <p>{$_('options.cursorHelp')}</p>
+    </div>
+  {/if}
+
   <h3>{$_('options.addons')}</h3>
   <label>
     <input type="checkbox" bind:checked={$options.chunks.gamepad}>

src/packager/packager.js

@@ -411,6 +411,18 @@ cd "$(dirname "$0")"
     return `<link rel="icon" href="${data}">`;
   }
 
+  async generateCursor () {
+    if (this.options.cursor.type !== 'custom') {
+      return this.options.cursor.type;
+    }
+    if (!this.options.cursor.custom) {
+      // Set to custom but no data, so ignore
+      return 'auto';
+    }
+    const data = await readAsURL(this.options.cursor.custom);
+    return `url(${data}), auto`;
+  }
+
   async package () {
     await this.loadResources();
     const html = `<!DOCTYPE html>
@@ -525,6 +537,9 @@ cd "$(dirname "$0")"
       padding: 4px;
       cursor: pointer;
     }
+    .sc-canvas {
+      cursor: ${await this.generateCursor()};
+    }
   </style>
   <meta name="theme-color" content="${this.options.appearance.background}">
   ${await this.generateFavicon()}
@@ -861,6 +876,10 @@ Packager.DEFAULT_OPTIONS = () => ({
     cloudHost: 'wss://clouddata.turbowarp.org',
     custom: {}
   },
+  cursor: {
+    type: 'auto',
+    custom: null
+  },
   extensions: []
 });