Implement new assets, use Vite instead of webpack

bonbud-macryg commented 6 months ago

Replaces the old pieces with the new sets and changes the background colour to create the intended negative space effect. Visual updates to the Game Panel and Control Panel will come in later PRs when those pieces get reworked.

A redesigned cburnett piece set is included in the files, but not shown here. As discussed the cburnett pieces will be the new visual for showing the material difference in the top-left.

bonbud-macryg commented 6 months ago

I was writing this PR when I realised I hadn't tested building it in webpack, then I found that webpack doesn't recognise the way I'm importing SVGs for the pieces here and that's why they were all base64 encoded before.

Sometimes you can solve this by importing the SVG like it's a module and placing it in the HTML, but since we're applying these images with CSS that would have been really annoying to do. I only introduced Vite in PR #166 for testing, but it can also build the frontend for us, so I decided to remove webpack from the project and run everything through Vite.

This has a few DevEx benefits:

Docker and non-Docker builds now use one script with one config file.
No need to install specific packages for non-Docker builds.
Several dependencies have been removed.
CSS files for boards and pieces are now legible.
SVG assets can be introduced and amended without manually base64 encoding them.

This PR also fixes the dockerfile so it doesn't look for a compiled /js/index.js which is no longer being created in the /src folder. I have no idea how Docker works and couldn't view the files in the Docker image to see what was going on there, so what I've done in the dockerfile might not be ideal.

bonbud-macryg commented 6 months ago

npm build works correctly. I had two errors with a Docker build on my machine, one of which was fixed by my most recent commit and one of which was this:

> urbit-chess@0.9.6 build
> vite build

✘ [ERROR] Cannot start service: Host version "0.18.20" does not match binary version "0.20.2"

1 error
failed to load config from /app/frontend/vite.config.mjs
error during build:
Error: The service was stopped: write EPIPE
    at /app/frontend/node_modules/esbuild/lib/main.js:1083:25
    at responseCallbacks.<computed> (/app/frontend/node_modules/esbuild/lib/main.js:703:9)
    at afterClose (/app/frontend/node_modules/esbuild/lib/main.js:693:28)
    at /app/frontend/node_modules/esbuild/lib/main.js:2143:11
    at onwriteError (node:internal/streams/writable:597:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:84:21)
The command '/bin/sh -c npm run-script build' returned a non-zero code: 1

I think restoring package.json with npm i then running the Docker build fixed it, which your most recent commit will have fixed.

thecommons-urbit / chess

Implement new assets, use Vite instead of webpack #167