Frontend rework

.dockerignore

@@ -0,0 +1,3 @@
+frontend/node_modules
+frontend/dist
+frontend/dev-dist

.gitignore

@@ -1 +1,4 @@
-node_modules
+node_modules
+frontend/dev-dist
+frontend/dist
+docs/pages/.vitepress/cache

Dockerfile

@@ -1,24 +1,14 @@
-ARG TARGETARCH
-ARG TARGETVARIANT
-
-FROM --platform=linux/amd64 node:22-alpine AS base-amd64
-
-# arm 64-bit
-# docker seems to default to arm64 without any TARGETVARIANT
-FROM --platform=linux/arm64/v8 node:22-alpine AS base-arm64
-FROM --platform=linux/arm64/v8 node:22-alpine AS base-arm64v8
-
-# arm 32-bit
-# on a 32bit raspberry pi os (bookworm) docker sets TARGETVARIANT to v8
-# though logs indicate that it still just pulls arm/v7 base images
-FROM --platform=linux/arm/v7 node:18-alpine AS base-armv8
-FROM --platform=linux/arm/v7 node:18-alpine AS base-armv7
-FROM --platform=linux/arm/v6 node:18-alpine AS base-armv6
-
-FROM base-${TARGETARCH}${TARGETVARIANT} AS final
+# build frontend deps
+FROM node:22-alpine AS frontend
+WORKDIR /frontend
+COPY ./frontend/package*.json ./
+RUN npm install
+COPY ./frontend . 
+RUN npm run build
 
+# Build and install backend deps
+FROM node:22-alpine AS builder
 ENV CXXFLAGS="-std=c++17"
-# Install native build tools
 RUN apk update && apk add --no-cache \
     build-base \
     python3 \
@@ -31,17 +21,16 @@ RUN apk update && apk add --no-cache \
     py3-setuptools
 
 WORKDIR /app
-
-# Copy package and install deps
 COPY package*.json ./
 RUN npm install
 
-# Copy all source
+# Copy dependencies from prior build stages and finally run the emulator
+FROM node:22-alpine AS final
+COPY --from=builder /app /app
+WORKDIR /app
+COPY --from=frontend /frontend/dist ./server
 COPY server ./server
 COPY index.js ./index.js
-
 VOLUME ["/app/server/json"]
-
 EXPOSE 80
-
 CMD ["node", "index.js"]

README.md

@@ -126,20 +126,24 @@ Allows you to connect an emulated Toy Pad to your PC or video-game console.
 - **Raspberry Pi Zero W** ($10) or **Raspberry Pi 4 B** (with `USB/Power Splitter for Raspberry Pi` from Ali or `USB-C/PWR Splitter` from pishop.us) or similar single board computer with Network support
   - **NOTE**: Will NOT work with Raspberry Pi: 2, 3, 3A, 3A+, 3B, 3B+. These models lack the ability to become a USB gadget.
 - **USB Type-A to micro-USB 2.0 Type-B cable** that supports data transmission (e. g. your phone's charging cable)
-- 2 GB+ Micro SD card
+- 8 GB+ Micro SD card (the official recommendation from [raspberrypi.com](https://www.raspberrypi.com/documentation/computers/getting-started.html#recommended-sd-cards) recommends 16 GB though)
 - Internet connection on your PC and single board computer
 
 #### Installation
 
-1. Flash a recent edition of Raspberry Pi OS Lite (either 32-bit for the Zero (W) or 64-bit for RPi 4/5)
+1. Flash a Raspberry Pi OS Lite (preferrably 64-bit) on your SD Card.
+
+   - Raspberry Pi Zero: since Docker stopped supporting the Pi Zero the latest version you should use is Bookworm. Using podman will work (tested with Trixie), though we cannot provide any support for issues with the operating system.
+
+   - This guide uses podman, but you can also use docker, you just need to make sure that you have it installed.
 
 2. Connect your device to your PC via USB cable (don't use the port on the edge of the Pi Zero!).
 
 3. Use SSH to run the following command (Don't know the IP address? Try [this IP scanner](https://www.advanced-ip-scanner.com/).) - this will prepare your Raspberry Pi to work as a USB gadget:
 
-```bash
-curl -sSL https://raw.githubusercontent.com/Berny23/LD-ToyPad-Emulator/master/pi_setup.sh | bash
-```
+   ```bash
+   curl -sSL https://raw.githubusercontent.com/Berny23/LD-ToyPad-Emulator/master/pi_setup.sh | bash
+   ```
 
 4. Reboot you device with this command:
 
@@ -149,30 +153,28 @@ curl -sSL https://raw.githubusercontent.com/Berny23/LD-ToyPad-Emulator/master/pi
 
 5. Reconnect to SSH, change the directory to LD-Toypad-Emulator and build the container using this command:
 
-```bash
-podman build \
-  -t ld-toypad-emulator:latest \
-  --platform=linux/your-platform \
-  .
-```
+   ```bash
+   podman pull ghcr.io/berny23/ld-toypad-emulator:latest
+   ```
 
-NOTE: Raspberry Pi OS 64bit uses linux/arm64/v8 as platform, Raspberry Pi OS 32bit uses linux/arm/v7 as platform, the Raspberry Pi Zero uses linux/arm/v6 as platform, and x86_64 based machines will use linux/amd64 as platform.
+   If this command fails please see [Cannot pull image](#cannot-pull-image).
 
-If you have any issues using podman, you can try and use docker instead, see [Podman build issue](#podman-doesnt-build-image).
+   If you have any issues using podman, you can try and use docker instead, see [Podman build issue](#podman-doesnt-build-image).
 
-Especially on the RPi Zero the build can take a very long time (20+ minutes). If pulling the base images succeeds and the build proceeds to higher stages (i.e. RUN npm install) you probably just need to be patient!
+   Especially on the RPi Zero the build can take a very long time (20+ minutes). If pulling the base images succeeds and the build proceeds to higher stages (i.e. RUN npm install) you probably just need to be patient!
 
 6. Once the container is successfully build run start the container:
 
-```bash
-podman create \
-  --name ld-toypad-emulator \
-  -p 8080:80 \
-  --device /dev/hidg0:/dev/hidg0 \
-  # Optional: mount a host folder for persistent images
-  # -v /path/to/images:/app/server/images:Z  \
-  ld-toypad-emulator:latest
-```
+   ```bash
+   podman create \
+   --name ld-toypad-emulator \
+   -p 8080:80 \
+   --device /dev/hidg0:/dev/hidg0 \
+   -v /path/to/images:/app/server/images:Z  \
+   ghcr.io/berny23/ld-toypad-emulator:latest
+   ```
+
+   NOTE: the images folder can be used to supply custom images for your toytags. If you don't plan to use custom images you can omit the mount (but then you will need to recreate the container if you ever decide to use custom images). Just mounting an empty folder is fine as well.
 
 #### Usage
 
@@ -182,26 +184,27 @@ podman create \
    podman start ld-toypad-emulator
    ```
 
+   NOTE: as podman is running as your currently logged in ssh user, you cannot disconnect from the ssh session. This is a design feature of podman. The solution therefore is to enable [lingering](https://wiki.archlinux.org/title/Systemd/User#Automatic_start-up_of_systemd_user_instances).
+
 2. Type **your single board computer's IP address** in a browser to use the emulator.
 
    If you want to turn it off, just stop the container (`podman stop ld-tyopad-emulator`) in the terminal window, then use the command `sudo shutdown now` to safely power off the device.
 
 ## Update
 
-To update this software, just get the latest changes by running the following commands while inside the `LD-ToyPad-Emulator` folder:
+Run the following commands:
 
 ```bash
-git pull
 podman stop ld-toypad-emulator # only if the container is currently running
 podman rm ld-toypad-emulator
-podman image rm localhost/ld-toypad-emulator:latest
+podman image rm ghcr.io/berny23/ld-toypad-emulator:latest
 ```
 
-Then rebuild and recreate the container starting from step 5 above.
+Then repeat the above steps starting from step 5.
 
 ## Adding Images
 
-If you would like your tags to have custom images over them to personalize your experience, name your image (ID).png and place them in server/images inside the Toypad Emulator folder. If you want them to cover the entirety of the tag with no blank space, make sure your image is either 100x100 or can be scaled to that size.
+If you would like your tags to have custom images over them to personalize your experience, name your image (ID).png and place them in server/images (or your mounted folder if you used the docker installation method) inside the Toypad Emulator folder. If you want them to cover the entirety of the tag with no blank space, make sure your image is either 100x100 or can be scaled to that size.
 
 Character IDs can be found [here](https://github.com/Berny23/LD-ToyPad-Emulator/blob/master/server/json/charactermap.json)
 
@@ -272,9 +275,29 @@ If you're using a virtual machine, make sure you've applied the solution specifi
 
 After that, run the command `hostname -I` in your virtual machine (or on your single board computer) and type the IP address that looks like `192.168.X.X` in your webbrowser.
 
-### Podman doesn't build image
+### Cannot pull image
+
+Retry pulling the image using this command:
+
+```
+podman pull --arch=your-architecture ghcr.io/berny23/ld-toypad-emulator:latest
+```
+
+Be sure to substitute in your architecture. Raspberry Pi OS 64bit uses the arm64 architecture as platform, Raspberry Pi OS 32bit uses linux/arm/v7 as platform, the Raspberry Pi Zero uses linux/arm/v6 as platform, and x86_64 based machines will use linux/amd64 as platform.
+
+## Development setup
+
+### Backend
+
+TODO
+
+### Frontend
 
-If you encounter any errors regarding image creation using podman, please try and install docker ([Docker Docs](https://docs.docker.com/engine/install/#installation-procedures-for-supported-platforms)) and then replace `podman` with `sudo docker`. Try starting again from step 5. Note that docker most probably does not need the `--platform` flag when building (docker should set the necessary arguments automatically).
+1. Clone the repository
+2. Change directory to `LD-Toypad-Emulator\frontend`
+3. Run `npm install`
+4. In `vite.config.mts` point the proxy server to the IP you run the server on.
+5. Run the frontend using `npm run dev`
 
 ## Acknowledgements