diff --git a/.gitignore b/.gitignore index ae7c423..ef1e014 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ dist/ emsdk/ .idea rust-sdl2-emscripten/ +assets/site/build.css diff --git a/assets/site/index.html b/assets/site/index.html index 4842454..19edd69 100644 --- a/assets/site/index.html +++ b/assets/site/index.html @@ -2,12 +2,25 @@ - Pac-Man Arcade + Pac-Man in Rust - + -

Pac-Man Arcade

-

- Welcome to the Pac-Man Arcade! Use the controls below to play. -

- -
- ← ↑ → ↓ Move - Space Change Sprite - Shift + ↑↓ Change Volume + +
+
+

Pac-Man in Rust

+
+ +
+
+ + +
+ ← ↑ → ↓ + Move + + | + + Space + Toggle Debug + + | + + P + Pause / Unpause + + | + + M + Mute / Unmute +
+
+
diff --git a/assets/site/styles.css b/assets/site/styles.css new file mode 100644 index 0000000..8423c27 --- /dev/null +++ b/assets/site/styles.css @@ -0,0 +1,28 @@ +@import "tailwindcss"; + +@font-face { + font-family: "TerminalVector"; + src: url("TerminalVector.ttf"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +/* Key badge styling */ +.code { + @apply px-3 py-1 rounded-md font-mono text-[0.9em] lowercase inline-block align-middle; + background: rgba(250, 204, 21, 0.08); /* yellow-400 at low opacity */ + border: 1px solid rgba(250, 204, 21, 0.25); + color: #fde68a; /* lighter yellow for readability */ + font-family: "TerminalVector", ui-monospace, Consolas, "Courier New", + monospace; +} + +/* Title styling */ +.arcade-title { + font-family: "TerminalVector", ui-monospace, Consolas, "Courier New", + monospace; + letter-spacing: 0.08em; + text-shadow: 0 0 18px rgba(250, 204, 21, 0.15), + 0 0 2px rgba(255, 255, 255, 0.25); +} diff --git a/assets/site/styles.scss b/assets/site/styles.scss deleted file mode 100644 index c5290d3..0000000 --- a/assets/site/styles.scss +++ /dev/null @@ -1,21 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@font-face { - font-family: "Liberation Mono"; - src: - url("LiberationMono.woff2") format("woff2"), - url("LiberationMono.woff") format("woff"); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -canvas { - @apply w-full h-[65vh] min-h-[200px] block mx-auto bg-black; -} - -.code { - @apply px-1 rounded font-mono bg-zinc-900 border border-zinc-700 lowercase; -} diff --git a/web.build.ts b/web.build.ts index 2c9b0df..0cebe76 100644 --- a/web.build.ts +++ b/web.build.ts @@ -43,7 +43,7 @@ async function build(release: boolean, env: Record) { }`.env(env); log("Generating CSS"); - await $`pnpx postcss-cli ./assets/site/styles.scss -o ./assets/site/build.css`; + await $`npx @tailwindcss/cli -i ./assets/site/styles.css -o ./assets/site/build.css`; const buildType = release ? "release" : "debug"; const siteFolder = resolve("assets/site"); @@ -52,11 +52,13 @@ async function build(release: boolean, env: Record) { // The files to copy into 'dist' const files = [ - ...["index.html", "favicon.ico", "build.css"].map((file) => ({ - src: join(siteFolder, file), - dest: join(dist, file), - optional: false, - })), + ...["index.html", "favicon.ico", "build.css", "TerminalVector.ttf"].map( + (file) => ({ + src: join(siteFolder, file), + dest: join(dist, file), + optional: false, + }) + ), ...["pacman.wasm", "pacman.js", "deps/pacman.data"].map((file) => ({ src: join(outputFolder, file), dest: join(dist, file.split("/").pop() || file),