From 78fe1e4d0b26cb87db8b3b73f13984e4aa623883 Mon Sep 17 00:00:00 2001
From: Thomas Weber <muffin@muffin.ink>
Date: Sat, 11 Dec 2021 22:14:48 -0600
Subject: [PATCH 1/6] Android support

---
 src/locales/en.json           |   5 +-
 src/p4/P4.svelte              |   2 +-
 src/p4/PackagerOptions.svelte | 133 +++++++++++++++++++++++++++++++++-
 src/p4/template.ejs           |   2 +-
 src/packager/packager.js      |  17 +++++
 5 files changed, 153 insertions(+), 6 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index fbd9117f..162338bc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,7 +1,7 @@
 {
   "p4": {
     "description1": {
-      "string": "Converts Scratch projects into HTML files, zip archives, or executable programs for Windows, macOS, and Linux."
+      "string": "Converts Scratch projects into HTML files, zip archives, or executable programs for Windows, macOS, Linux, and Android."
     },
     "description2": {
       "string": "If you just want an easy way to embed a project into your website, you may be interested in {embedding}."
@@ -367,6 +367,9 @@
       "string": "{type} Linux application (64-bit only)",
       "context": "type will become something like 'NW.js' or 'Electron'. Do not translate 'Linux'."
     },
+    "application-android": {
+      "string": "Android app (Highly experimental)"
+    },
     "otherEnvironments": {
       "string": "Other environments (Click to open)",
       "context": "Text that can be clicked to expand list of environments to include some unrecommended ones."
diff --git a/src/p4/P4.svelte b/src/p4/P4.svelte
index c57483a0..dba55ed2 100644
--- a/src/p4/P4.svelte
+++ b/src/p4/P4.svelte
@@ -83,7 +83,7 @@
   :global([theme="dark"] .is-not-safari select:hover) {
     border-color: #bbb;
   }
-  :global(p), :global(h1), :global(h2), :global(h3) {
+  :global(p), :global(pre), :global(h1), :global(h2), :global(h3) {
     margin: 12px 0;
   }
   :global(summary) {
diff --git a/src/p4/PackagerOptions.svelte b/src/p4/PackagerOptions.svelte
index 526df358..1fc558ab 100644
--- a/src/p4/PackagerOptions.svelte
+++ b/src/p4/PackagerOptions.svelte
@@ -203,8 +203,9 @@
     font-weight: bold;
     background: yellow;
     color: black;
-    padding: 10px;
-    border-radius: 10px;
+    padding: 12px;
+    border-radius: 12px;
+    margin: 12px 0;
   }
   .small {
     font-size: small;
@@ -648,6 +649,13 @@
       </label>
     </div>
 
+    <div class="group">
+      <label class="option">
+        <input type="radio" name="environment" bind:group={$options.target} value="android">
+        {$_('options.application-android')}
+      </label>
+    </div>
+
     <details open={otherEnvironmentsInitiallyOpen}>
       <summary>{$_('options.otherEnvironments')}</summary>
       <p>{$_('options.otherEnvironmentsHelp')}</p>
@@ -699,7 +707,8 @@
         {#if $options.target.startsWith('zip')}
           <h2>Zip</h2>
           <p>The zip environment is intended to be used for publishing to a website. Other uses such as sending your project to a friend over a chat app or email should use "Plain HTML" instead as zip will not work.</p>
-        {:else}
+        {/if}
+        {#if !$options.target.startsWith('zip')}
           <h2>{$_('options.applicationSettings')}</h2>
           <label class="option">
             {$_('options.packageName')}
@@ -765,6 +774,124 @@
               <p>For further help and steps, see <a href="https://docs.nwjs.io/en/latest/For%20Users/Package%20and%20Distribute/#linux">NW.js Documentation</a>.</p>
             {/if}
           {/if}
+        {:else if $options.target === 'android'}
+          <h2>Android</h2>
+
+          <div class="warning">
+            Unlike the other environments, Android support is not fully automated. You must manually create an app. This section will try to guide you through the process.
+          </div>
+
+          <p>This section assumes you have complete access to a Windows, macOS, or Linux computer.</p>
+
+          <h3>Install Android Studio</h3>
+          <p><a href="https://developer.android.com/studio/">Install Android Studio.</a></p>
+          <p>This quite large and may take a while.</p>
+
+          <h3>Create a new project</h3>
+          <p>Create a new project in Android studio.</p>
+          <ul>
+            <li>Use the "Empty Activity" template</li>
+            <li>Set Name to your app's name, for example "<code>{$options.app.windowTitle}</code>"</li>
+            <li>Set Package name to "<code>org.turbowarp.packager.userland.{$options.app.packageName}</code>"</li>
+            <li>Choose a save location that you won't forget</li>
+            <li>Set Language to Kotlin</li>
+            <li>Set Minimum SDK to "API 21: Android 5.0 (Lollipop)"</li>
+          </ul>
+
+          <h3>Create assets folder</h3>
+          <p>In the sidebar on the left, right click on "app", then select "New" > "Folder" > "Assets folder". Use the default settings.</p>
+
+          <h3>Prepare project</h3>
+          <p>
+            <Button on:click={pack} text={'Package the project as a zip'} />
+          </p>
+          <p>Extract the zip and drag its files into "assets" folder you created. (You can directly drag and drop files over the assets folder in Android Studio)</p>
+
+          <h3>Making the app</h3>
+          <p>In the sidebar on the left, navigate to app > src > main > MainActivity. This will open a short Kotlin file.</p>
+          <p>Replace everything after line 2 with the following:</p>
+          <pre>
+            {[
+              'import android.annotation.SuppressLint',
+              'import androidx.appcompat.app.AppCompatActivity',
+              'import android.os.Bundle',
+              'import android.webkit.WebView',
+              '',
+              'class MainActivity : AppCompatActivity() {',
+              '    private lateinit var web: WebView',
+              '',
+              '    @SuppressLint("SetJavaScriptEnabled")',
+              '    override fun onCreate(savedInstanceState: Bundle?) {',
+              '        super.onCreate(savedInstanceState)',
+              '        web = WebView(this)',
+              '        web.settings.javaScriptEnabled = true',
+              '        web.loadUrl("file:///android_asset/index.html")',
+              '        setContentView(web)',
+              '        actionBar?.hide()',
+              '        supportActionBar?.hide()',
+              '    }',
+              '',
+              '    override fun onDestroy() {',
+              '        super.onDestroy()',
+              '        web.destroy()',
+              '    }',
+              '}'
+            ].join('\n')}
+          </pre>
+          <p>At this point, you now have a fully functional Android app. However, there are still a few more things you should change.</p>
+
+          <h3>Fixing screen orientation issues</h3>
+          <p>In the sidebar on the left, open app > main > AndroidManifest.xml</p>
+          <p>Find the section that looks like this:</p>
+          <pre>
+            {[
+              '        <activity',
+              '            android:name=".MainActivity"',
+              '            android:exported="true">',
+            ].join('\n')}
+          </pre>
+          <p>And replace it with this:</p>
+          <pre>
+            {[
+              '        <activity',
+              '            android:configChanges="orientation|screenSize"',
+              '            android:screenOrientation="sensor"',
+              '            android:name=".MainActivity"',
+              '            android:exported="true">',
+            ].join('\n')}
+          </pre>
+
+          <h3>Updating colors</h3>
+          <p>If you ran the app now, it would have a purple color scheme, which may not be what you want. This can be changed.</p>
+          <p>In the sidebar on the left, open app > main > res > values > color.xml.</p>
+          <p>You will see these lines:</p>
+          <pre>
+            {[
+              '    <color name="purple_200">#FFBB86FC</color>',
+              '    <color name="purple_500">#FF6200EE</color>',
+              '    <color name="purple_700">#FF3700B3</color>',
+            ].join('\n')}
+          </pre>
+          <p>Replace those lines with:</p>
+          <pre>
+            {[
+              `    <color name="purple_200">#FF${$options.appearance.background.substr(1)}</color>`,
+              `    <color name="purple_500">#FF${$options.appearance.background.substr(1)}</color>`,
+              `    <color name="purple_700">#FF${$options.appearance.background.substr(1)}</color>`,
+            ].join('\n')}
+          </pre>
+          <p>Do not change the other lines.</p>
+          <p>The above snippet will make the status bar match your app's background color. For advanced users, note that these color codes are a bit unusual in that the "alpha" or "transparency" byte goes first instead of last.</p>
+          <p>Ignore the bits about <code>purple_yyy</code> -- just them as is. While it would be a good idea to these colors, you will be making more work for yourself because you'll have to update some other files to reflect the new names.</p>
+
+          <h3>Updating the project</h3>
+          <p>It's likely that at some point you will want to update the project without redoing this entire guide. Updating is much simpler:</p>
+          <ol>
+            <li>Open Android Studio and open the project</li>
+            <li>Delete everything inside the assets folder</li>
+            <li>Re-run the packager</li>
+            <li>Extract the zip and put all of its files into the assets folder</li>
+          </ol>
         {/if}
       </div>
     </Section>
diff --git a/src/p4/template.ejs b/src/p4/template.ejs
index 4083a6e8..c030f962 100644
--- a/src/p4/template.ejs
+++ b/src/p4/template.ejs
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <% const {LONG_NAME, WEBSITE} = require('../packager/brand.js'); %>
     <title><%= LONG_NAME %></title>
-    <meta name="description" content="Converts Scratch projects into HTML files, zip archives, or executable programs for Windows, macOS, and Linux.">
+    <meta name="description" content="Converts Scratch projects into HTML files, zip archives, or executable programs for Windows, macOS, Linux, and Android.">
     <% if (process.env.STANDALONE) { %>
       <%
         const fs = require('fs');
diff --git a/src/packager/packager.js b/src/packager/packager.js
index e1aa7ab4..5808590e 100644
--- a/src/packager/packager.js
+++ b/src/packager/packager.js
@@ -1105,6 +1105,23 @@ cd "$(dirname "$0")"
         vm.extensionManager.loadExtensionURL(extension);
       }
 
+      ${this.options.target === 'android' ? `
+      // By default, storage will try to use fetch() in a Worker
+      // That doesn't work in an Android WebView, but XHR does, so...
+      scaffolding.storage.addHelper({
+        load: (assetType, assetId, dataFormat) => new Promise((resolve, reject) => {
+          const xhr = new XMLHttpRequest();
+          xhr.responseType = "arraybuffer";
+          xhr.onerror = () => reject(new Error("Request failed"));
+          xhr.onload = () => resolve(new scaffolding.storage.Asset(assetType, assetId, dataFormat, new Uint8Array(xhr.response)));
+          xhr.open("GET", './assets/' + assetId + '.' + dataFormat);
+          xhr.send();
+        }),
+        // Above default tool, below "builtin" tool
+        priority: 50
+      });
+      ` : ''}
+
       ${this.options.target.startsWith('nwjs-') ? `
       if (typeof nw !== 'undefined') {
         const win = nw.Window.get();

From 71bf159030d3bec4eced5d5a695320e5dcf99fb2 Mon Sep 17 00:00:00 2001
From: Thomas Weber <muffin@muffin.ink>
Date: Wed, 15 Dec 2021 16:49:05 -0600
Subject: [PATCH 2/6] Fix typo

---
 src/p4/PackagerOptions.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/p4/PackagerOptions.svelte b/src/p4/PackagerOptions.svelte
index 1fc558ab..a4a43aa6 100644
--- a/src/p4/PackagerOptions.svelte
+++ b/src/p4/PackagerOptions.svelte
@@ -785,7 +785,7 @@
 
           <h3>Install Android Studio</h3>
           <p><a href="https://developer.android.com/studio/">Install Android Studio.</a></p>
-          <p>This quite large and may take a while.</p>
+          <p>This is quite large and may take a while.</p>
 
           <h3>Create a new project</h3>
           <p>Create a new project in Android studio.</p>

From 1d972564152ad576594605515cae70d63a370906 Mon Sep 17 00:00:00 2001
From: Thomas Weber <muffin@muffin.ink>
Date: Tue, 4 Jan 2022 22:15:02 -0600
Subject: [PATCH 3/6] Fix merge error

---
 src/p4/PackagerOptions.svelte | 237 +++++++++++++++++-----------------
 1 file changed, 118 insertions(+), 119 deletions(-)

diff --git a/src/p4/PackagerOptions.svelte b/src/p4/PackagerOptions.svelte
index a4a43aa6..5f10f335 100644
--- a/src/p4/PackagerOptions.svelte
+++ b/src/p4/PackagerOptions.svelte
@@ -707,8 +707,7 @@
         {#if $options.target.startsWith('zip')}
           <h2>Zip</h2>
           <p>The zip environment is intended to be used for publishing to a website. Other uses such as sending your project to a friend over a chat app or email should use "Plain HTML" instead as zip will not work.</p>
-        {/if}
-        {#if !$options.target.startsWith('zip')}
+        {:else}
           <h2>{$_('options.applicationSettings')}</h2>
           <label class="option">
             {$_('options.packageName')}
@@ -773,125 +772,125 @@
               <p class="warning">NW.js support is deprecated and may be removed in the future. Use Electron instead if possible.</p>
               <p>For further help and steps, see <a href="https://docs.nwjs.io/en/latest/For%20Users/Package%20and%20Distribute/#linux">NW.js Documentation</a>.</p>
             {/if}
-          {/if}
-        {:else if $options.target === 'android'}
-          <h2>Android</h2>
+          {:else if $options.target === 'android'}
+            <h2>Android</h2>
 
-          <div class="warning">
-            Unlike the other environments, Android support is not fully automated. You must manually create an app. This section will try to guide you through the process.
-          </div>
+            <div class="warning">
+              Unlike the other environments, Android support is not fully automated. You must manually create an app. This section will try to guide you through the process.
+            </div>
+
+            <p>This section assumes you have complete access to a Windows, macOS, or Linux computer.</p>
+
+            <h3>Install Android Studio</h3>
+            <p><a href="https://developer.android.com/studio/">Install Android Studio.</a></p>
+            <p>This is quite large and may take a while.</p>
 
-          <p>This section assumes you have complete access to a Windows, macOS, or Linux computer.</p>
-
-          <h3>Install Android Studio</h3>
-          <p><a href="https://developer.android.com/studio/">Install Android Studio.</a></p>
-          <p>This is quite large and may take a while.</p>
-
-          <h3>Create a new project</h3>
-          <p>Create a new project in Android studio.</p>
-          <ul>
-            <li>Use the "Empty Activity" template</li>
-            <li>Set Name to your app's name, for example "<code>{$options.app.windowTitle}</code>"</li>
-            <li>Set Package name to "<code>org.turbowarp.packager.userland.{$options.app.packageName}</code>"</li>
-            <li>Choose a save location that you won't forget</li>
-            <li>Set Language to Kotlin</li>
-            <li>Set Minimum SDK to "API 21: Android 5.0 (Lollipop)"</li>
-          </ul>
-
-          <h3>Create assets folder</h3>
-          <p>In the sidebar on the left, right click on "app", then select "New" > "Folder" > "Assets folder". Use the default settings.</p>
-
-          <h3>Prepare project</h3>
-          <p>
-            <Button on:click={pack} text={'Package the project as a zip'} />
-          </p>
-          <p>Extract the zip and drag its files into "assets" folder you created. (You can directly drag and drop files over the assets folder in Android Studio)</p>
-
-          <h3>Making the app</h3>
-          <p>In the sidebar on the left, navigate to app > src > main > MainActivity. This will open a short Kotlin file.</p>
-          <p>Replace everything after line 2 with the following:</p>
-          <pre>
-            {[
-              'import android.annotation.SuppressLint',
-              'import androidx.appcompat.app.AppCompatActivity',
-              'import android.os.Bundle',
-              'import android.webkit.WebView',
-              '',
-              'class MainActivity : AppCompatActivity() {',
-              '    private lateinit var web: WebView',
-              '',
-              '    @SuppressLint("SetJavaScriptEnabled")',
-              '    override fun onCreate(savedInstanceState: Bundle?) {',
-              '        super.onCreate(savedInstanceState)',
-              '        web = WebView(this)',
-              '        web.settings.javaScriptEnabled = true',
-              '        web.loadUrl("file:///android_asset/index.html")',
-              '        setContentView(web)',
-              '        actionBar?.hide()',
-              '        supportActionBar?.hide()',
-              '    }',
-              '',
-              '    override fun onDestroy() {',
-              '        super.onDestroy()',
-              '        web.destroy()',
-              '    }',
-              '}'
-            ].join('\n')}
-          </pre>
-          <p>At this point, you now have a fully functional Android app. However, there are still a few more things you should change.</p>
-
-          <h3>Fixing screen orientation issues</h3>
-          <p>In the sidebar on the left, open app > main > AndroidManifest.xml</p>
-          <p>Find the section that looks like this:</p>
-          <pre>
-            {[
-              '        <activity',
-              '            android:name=".MainActivity"',
-              '            android:exported="true">',
-            ].join('\n')}
-          </pre>
-          <p>And replace it with this:</p>
-          <pre>
-            {[
-              '        <activity',
-              '            android:configChanges="orientation|screenSize"',
-              '            android:screenOrientation="sensor"',
-              '            android:name=".MainActivity"',
-              '            android:exported="true">',
-            ].join('\n')}
-          </pre>
-
-          <h3>Updating colors</h3>
-          <p>If you ran the app now, it would have a purple color scheme, which may not be what you want. This can be changed.</p>
-          <p>In the sidebar on the left, open app > main > res > values > color.xml.</p>
-          <p>You will see these lines:</p>
-          <pre>
-            {[
-              '    <color name="purple_200">#FFBB86FC</color>',
-              '    <color name="purple_500">#FF6200EE</color>',
-              '    <color name="purple_700">#FF3700B3</color>',
-            ].join('\n')}
-          </pre>
-          <p>Replace those lines with:</p>
-          <pre>
-            {[
-              `    <color name="purple_200">#FF${$options.appearance.background.substr(1)}</color>`,
-              `    <color name="purple_500">#FF${$options.appearance.background.substr(1)}</color>`,
-              `    <color name="purple_700">#FF${$options.appearance.background.substr(1)}</color>`,
-            ].join('\n')}
-          </pre>
-          <p>Do not change the other lines.</p>
-          <p>The above snippet will make the status bar match your app's background color. For advanced users, note that these color codes are a bit unusual in that the "alpha" or "transparency" byte goes first instead of last.</p>
-          <p>Ignore the bits about <code>purple_yyy</code> -- just them as is. While it would be a good idea to these colors, you will be making more work for yourself because you'll have to update some other files to reflect the new names.</p>
-
-          <h3>Updating the project</h3>
-          <p>It's likely that at some point you will want to update the project without redoing this entire guide. Updating is much simpler:</p>
-          <ol>
-            <li>Open Android Studio and open the project</li>
-            <li>Delete everything inside the assets folder</li>
-            <li>Re-run the packager</li>
-            <li>Extract the zip and put all of its files into the assets folder</li>
-          </ol>
+            <h3>Create a new project</h3>
+            <p>Create a new project in Android studio.</p>
+            <ul>
+              <li>Use the "Empty Activity" template</li>
+              <li>Set Name to your app's name, for example "<code>{$options.app.windowTitle}</code>"</li>
+              <li>Set Package name to "<code>org.turbowarp.packager.userland.{$options.app.packageName}</code>"</li>
+              <li>Choose a save location that you won't forget</li>
+              <li>Set Language to Kotlin</li>
+              <li>Set Minimum SDK to "API 21: Android 5.0 (Lollipop)"</li>
+            </ul>
+
+            <h3>Create assets folder</h3>
+            <p>In the sidebar on the left, right click on "app", then select "New" > "Folder" > "Assets folder". Use the default settings.</p>
+
+            <h3>Prepare project</h3>
+            <p>
+              <Button on:click={pack} text={'Package the project as a zip'} />
+            </p>
+            <p>Extract the zip and drag its files into "assets" folder you created. (You can directly drag and drop files over the assets folder in Android Studio)</p>
+
+            <h3>Making the app</h3>
+            <p>In the sidebar on the left, navigate to app > src > main > MainActivity. This will open a short Kotlin file.</p>
+            <p>Replace everything after line 2 with the following:</p>
+            <pre>
+              {[
+                'import android.annotation.SuppressLint',
+                'import androidx.appcompat.app.AppCompatActivity',
+                'import android.os.Bundle',
+                'import android.webkit.WebView',
+                '',
+                'class MainActivity : AppCompatActivity() {',
+                '    private lateinit var web: WebView',
+                '',
+                '    @SuppressLint("SetJavaScriptEnabled")',
+                '    override fun onCreate(savedInstanceState: Bundle?) {',
+                '        super.onCreate(savedInstanceState)',
+                '        web = WebView(this)',
+                '        web.settings.javaScriptEnabled = true',
+                '        web.loadUrl("file:///android_asset/index.html")',
+                '        setContentView(web)',
+                '        actionBar?.hide()',
+                '        supportActionBar?.hide()',
+                '    }',
+                '',
+                '    override fun onDestroy() {',
+                '        super.onDestroy()',
+                '        web.destroy()',
+                '    }',
+                '}'
+              ].join('\n')}
+            </pre>
+            <p>At this point, you now have a fully functional Android app. However, there are still a few more things you should change.</p>
+
+            <h3>Fixing screen orientation issues</h3>
+            <p>In the sidebar on the left, open app > main > AndroidManifest.xml</p>
+            <p>Find the section that looks like this:</p>
+            <pre>
+              {[
+                '        <activity',
+                '            android:name=".MainActivity"',
+                '            android:exported="true">',
+              ].join('\n')}
+            </pre>
+            <p>And replace it with this:</p>
+            <pre>
+              {[
+                '        <activity',
+                '            android:configChanges="orientation|screenSize"',
+                '            android:screenOrientation="sensor"',
+                '            android:name=".MainActivity"',
+                '            android:exported="true">',
+              ].join('\n')}
+            </pre>
+
+            <h3>Updating colors</h3>
+            <p>If you ran the app now, it would have a purple color scheme, which may not be what you want. This can be changed.</p>
+            <p>In the sidebar on the left, open app > main > res > values > color.xml.</p>
+            <p>You will see these lines:</p>
+            <pre>
+              {[
+                '    <color name="purple_200">#FFBB86FC</color>',
+                '    <color name="purple_500">#FF6200EE</color>',
+                '    <color name="purple_700">#FF3700B3</color>',
+              ].join('\n')}
+            </pre>
+            <p>Replace those lines with:</p>
+            <pre>
+              {[
+                `    <color name="purple_200">#FF${$options.appearance.background.substr(1)}</color>`,
+                `    <color name="purple_500">#FF${$options.appearance.background.substr(1)}</color>`,
+                `    <color name="purple_700">#FF${$options.appearance.background.substr(1)}</color>`,
+              ].join('\n')}
+            </pre>
+            <p>Do not change the other lines.</p>
+            <p>The above snippet will make the status bar match your app's background color. For advanced users, note that these color codes are a bit unusual in that the "alpha" or "transparency" byte goes first instead of last.</p>
+            <p>Ignore the bits about <code>purple_yyy</code> -- just them as is. While it would be a good idea to these colors, you will be making more work for yourself because you'll have to update some other files to reflect the new names.</p>
+
+            <h3>Updating the project</h3>
+            <p>It's likely that at some point you will want to update the project without redoing this entire guide. Updating is much simpler:</p>
+            <ol>
+              <li>Open Android Studio and open the project</li>
+              <li>Delete everything inside the assets folder</li>
+              <li>Re-run the packager</li>
+              <li>Extract the zip and put all of its files into the assets folder</li>
+            </ol>
+          {/if}
         {/if}
       </div>
     </Section>

From 3f805bdb1ea046b6f123e5b3956220f9afa27e00 Mon Sep 17 00:00:00 2001
From: Thomas Weber <muffin@muffin.ink>
Date: Tue, 4 Jan 2022 22:28:17 -0600
Subject: [PATCH 4/6] Continue improving phrasing

---
 src/p4/PackagerOptions.svelte | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/p4/PackagerOptions.svelte b/src/p4/PackagerOptions.svelte
index 5f10f335..107159cd 100644
--- a/src/p4/PackagerOptions.svelte
+++ b/src/p4/PackagerOptions.svelte
@@ -779,20 +779,21 @@
               Unlike the other environments, Android support is not fully automated. You must manually create an app. This section will try to guide you through the process.
             </div>
 
-            <p>This section assumes you have complete access to a Windows, macOS, or Linux computer.</p>
+            <p>This section assumes you have full access (including adminstrator/root) to a Windows, macOS, or Linux computer.</p>
+            <p>Parts of this section may be generated by various options selected above.</p>
 
             <h3>Install Android Studio</h3>
             <p><a href="https://developer.android.com/studio/">Install Android Studio.</a></p>
             <p>This is quite large and may take a while.</p>
 
             <h3>Create a new project</h3>
-            <p>Create a new project in Android studio.</p>
+            <p>Create a new project in Android Studio.</p>
             <ul>
               <li>Use the "Empty Activity" template</li>
               <li>Set Name to your app's name, for example "<code>{$options.app.windowTitle}</code>"</li>
               <li>Set Package name to "<code>org.turbowarp.packager.userland.{$options.app.packageName}</code>"</li>
               <li>Choose a save location that you won't forget</li>
-              <li>Set Language to Kotlin</li>
+              <li>Set Language to "Kotlin"</li>
               <li>Set Minimum SDK to "API 21: Android 5.0 (Lollipop)"</li>
             </ul>
 
@@ -836,7 +837,8 @@
                 '}'
               ].join('\n')}
             </pre>
-            <p>At this point, you now have a fully functional Android app. However, there are still a few more things you should change.</p>
+            <p>Make sure to leave the first line that says <code>package ...</code></p>
+            <p>At this point, you have a functional Android app. However, there are still a few more things you should change.</p>
 
             <h3>Fixing screen orientation issues</h3>
             <p>In the sidebar on the left, open app > main > AndroidManifest.xml</p>
@@ -860,7 +862,7 @@
             </pre>
 
             <h3>Updating colors</h3>
-            <p>If you ran the app now, it would have a purple color scheme, which may not be what you want. This can be changed.</p>
+            <p>Currently the app has a purple color scheme, which may not be what you want. This can be changed.</p>
             <p>In the sidebar on the left, open app > main > res > values > color.xml.</p>
             <p>You will see these lines:</p>
             <pre>
@@ -870,7 +872,7 @@
                 '    <color name="purple_700">#FF3700B3</color>',
               ].join('\n')}
             </pre>
-            <p>Replace those lines with:</p>
+            <p>Replace those lines with: (the following snippet is generated according to your configured background color)</p>
             <pre>
               {[
                 `    <color name="purple_200">#FF${$options.appearance.background.substr(1)}</color>`,
@@ -879,11 +881,11 @@
               ].join('\n')}
             </pre>
             <p>Do not change the other lines.</p>
-            <p>The above snippet will make the status bar match your app's background color. For advanced users, note that these color codes are a bit unusual in that the "alpha" or "transparency" byte goes first instead of last.</p>
-            <p>Ignore the bits about <code>purple_yyy</code> -- just them as is. While it would be a good idea to these colors, you will be making more work for yourself because you'll have to update some other files to reflect the new names.</p>
+            <p>For advanced users, note that these color codes are a bit unusual in that the "alpha" or "transparency" byte (typically <code>255</code> or <code>FF</code>) goes first instead of last.</p>
+            <p>Ignore the bits about <code>purple_yyy</code>; just them as is. It would typically be a good idea to rename these colors, but you will be making more work for yourself because you'll have to update some other files to reflect the new names.</p>
 
             <h3>Updating the project</h3>
-            <p>It's likely that at some point you will want to update the project without redoing this entire guide. Updating is much simpler:</p>
+            <p>It's likely that at some point you will want to update the project without redoing this entire guide. Updating a project is much simpler:</p>
             <ol>
               <li>Open Android Studio and open the project</li>
               <li>Delete everything inside the assets folder</li>

From 0a6f425fd5a1dff1c25ff5f378e18634d472629b Mon Sep 17 00:00:00 2001
From: Thomas Weber <muffin@muffin.ink>
Date: Sat, 12 Feb 2022 22:15:45 -0600
Subject: [PATCH 5/6] Fix typo

---
 src/p4/PackagerOptions.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/p4/PackagerOptions.svelte b/src/p4/PackagerOptions.svelte
index 55e00ed2..ffa91b4a 100644
--- a/src/p4/PackagerOptions.svelte
+++ b/src/p4/PackagerOptions.svelte
@@ -910,7 +910,7 @@
             </pre>
             <p>Do not change the other lines.</p>
             <p>For advanced users, note that these color codes are a bit unusual in that the "alpha" or "transparency" byte (typically <code>255</code> or <code>FF</code>) goes first instead of last.</p>
-            <p>Ignore the bits about <code>purple_yyy</code>; just them as is. It would typically be a good idea to rename these colors, but you will be making more work for yourself because you'll have to update some other files to reflect the new names.</p>
+            <p>Ignore the bits about <code>purple_yyy</code>; just leave them as is. It would typically be a good idea to rename these colors, but you will be making more work for yourself because you'll have to update some other files to reflect the new names.</p>
 
             <h3>Updating the project</h3>
             <p>It's likely that at some point you will want to update the project without redoing this entire guide. Updating a project is much simpler:</p>

From 415f52d9e561ca0b0b439a80224be917a525170f Mon Sep 17 00:00:00 2001
From: Thomas Weber <muffin@muffin.ink>
Date: Sat, 16 Apr 2022 12:45:29 -0500
Subject: [PATCH 6/6] Remove seemingly unnecessary XHR hack

---
 src/packager/packager.js | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/packager/packager.js b/src/packager/packager.js
index 70d993cc..30df246b 100644
--- a/src/packager/packager.js
+++ b/src/packager/packager.js
@@ -1129,23 +1129,6 @@ cd "$(dirname "$0")"
         vm.extensionManager.loadExtensionURL(extension);
       }
 
-      ${this.options.target === 'android' ? `
-      // By default, storage will try to use fetch() in a Worker
-      // That doesn't work in an Android WebView, but XHR does, so...
-      scaffolding.storage.addHelper({
-        load: (assetType, assetId, dataFormat) => new Promise((resolve, reject) => {
-          const xhr = new XMLHttpRequest();
-          xhr.responseType = "arraybuffer";
-          xhr.onerror = () => reject(new Error("Request failed"));
-          xhr.onload = () => resolve(new scaffolding.storage.Asset(assetType, assetId, dataFormat, new Uint8Array(xhr.response)));
-          xhr.open("GET", './assets/' + assetId + '.' + dataFormat);
-          xhr.send();
-        }),
-        // Above default tool, below "builtin" tool
-        priority: 50
-      });
-      ` : ''}
-
       ${this.options.target.startsWith('nwjs-') ? `
       if (typeof nw !== 'undefined') {
         const win = nw.Window.get();