Add information about nonprod app icon to README

Author: Coteh

.env.example

@@ -7,5 +7,5 @@ VITE_WEBSITE_URL=https://coteh.github.io/2048-clone/
 # Sentry
 SENTRY_AUTH_TOKEN=
 
-# Deployment environment, can be DEV, leave blank for production
-DEPLOY_ENV=
+# Deployment environment, (e.g. DEV) leave blank for production
+DEPLOY_ENV=LOCAL

.gitignore

@@ -24,5 +24,14 @@ ssl/
 # Misc
 .DS_Store
 
-# Icons
-/dist/icons
+# Ignore everything in the dist directory
+dist/**
+
+# Allow access to the icons directory
+!dist/icons/
+
+# Ignore everything in the icons directory
+dist/icons/*
+
+# Allow specific icon files
+!dist/icons/icon*_LOCAL.png

README.md

@@ -77,6 +77,27 @@ npm run devs
 
 The game should render when navigating to https://localhost:5173.
 
+### Optional Components
+
+#### Nonprod App Icon
+
+With [ImageMagick](https://imagemagick.org/) installed, both the build script and the dev server are capable of generating a version of the app icon with a label (e.g., "LOCAL", "DEV") at the bottom. This helps distinguish the local version of the app from the production build when saving it to the home screen.
+
+![prod app icon](public/icon128.png)
+![local app icon](dist/icons/icon128_LOCAL.png)
+
+For systems without ImageMagick, the pregenerated version of the icon in the repo is used.
+
+To generate icons with different labels, set the `DEPLOY_ENV` environment variable to the desired label before running the build script or the dev server.
+
+Example:
+```sh
+# Deployment environment, (e.g. DEV) leave blank for production
+DEPLOY_ENV=DEV
+```
+
+In this example, the build script will use `DEPLOY_ENV` to create icons with the "DEV" label.
+
 ## Testing
 
 Run the following to launch unit tests:

dist/icons/icon128_LOCAL.png

@@ -21,14 +21,16 @@ interface PluginOptions {
     position: "top" | "bottom" | { x: number; y: number };
 }
 
+const MAGICK_COMMAND = "magick";
+
 // TODO: Support other filetypes besides PNG
 export default function appIconLabel(options: PluginOptions) {
     const { source, output, environment, icons, position } = options;
     const buildDir = path.resolve(process.cwd(), "build");
 
     const buildIcons = (env: string) => {
         try {
-            childProcess.execSync("magick -version", { stdio: "ignore" });
+            childProcess.execSync(`${MAGICK_COMMAND} -version`, { stdio: "ignore" });
         } catch (e) {
             console.warn("ImageMagick is not installed. Skipping icon labeling.");
             return;
@@ -51,7 +53,7 @@ export default function appIconLabel(options: PluginOptions) {
                         : "+0-10"
                     : `+${position.x}+${position.y}`;
 
-            const cmd = `magick ${srcPath} -strip -gravity south -fill "${font.color}" -undercolor "#000000AA" -pointsize ${font.size} -font ${font.family} -annotate ${positionOption} "${env}" ${destPath}`;
+            const cmd = `${MAGICK_COMMAND} ${srcPath} -strip -gravity south -fill "${font.color}" -undercolor "#000000AA" -pointsize ${font.size} -font ${font.family} -annotate ${positionOption} "${env}" ${destPath}`;
             try {
                 childProcess.execSync(cmd);
                 console.log(`Processed ${name} -> ${path.basename(destPath)}`);