xevion/Pac-Man
1
0
Fork 0
mirror of https://github.com/Xevion/Pac-Man.git synced 2025-12-09 10:07:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: improved frontend web interface, use tailwind cli

Browse Source
This commit is contained in:
Xevion
2025-08-08 00:20:38 -05:00
parent 2ae73c3c58
commit 9d5ca54234
5 changed files with 98 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -3,3 +3,4 @@ dist/
emsdk/ emsdk/
.idea .idea
rust-sdl2-emscripten/ rust-sdl2-emscripten/
assets/site/build.css

80
assets/site/index.html
View File

@@ -2,12 +2,25 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pac-Man Arcade</title> <title>Pac-Man in Rust</title>
<link rel="stylesheet" href="build.css" /> <link rel="stylesheet" href="build.css" />
<style> <style>
/* Minimal fallback to prevent white flash and canvas pop-in before CSS loads */
html,
body {
background: #000;
color: #facc15;
margin: 0;
text-align: center;
}
#canvas {
display: block;
margin: 1.5rem auto;
background: #000;
}
</style> </style>
</head> </head>
<body class="bg-black text-yellow-400 text-center"> <body class="bg-black text-yellow-400 text-center min-h-screen">
<a <a
href="https://github.com/Xevion/Pac-Man" href="https://github.com/Xevion/Pac-Man"
class="absolute top-0 right-0" class="absolute top-0 right-0"
@@ -17,7 +30,7 @@
width="80" width="80"
height="80" height="80"
viewBox="0 0 250 250" viewBox="0 0 250 250"
class="fill-yellow-400 text-black" class="fill-yellow-400 text-white"
aria-hidden="true" aria-hidden="true"
> >
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
@@ -31,33 +44,54 @@
></path> ></path>
</svg> </svg>
</a> </a>
<h1 class="text-4xl mt-10 scaled-text">Pac-Man Arcade</h1>
<p class="text-lg mt-5 scaled-text"> <div class="min-h-screen flex flex-col">
Welcome to the Pac-Man Arcade! Use the controls below to play. <header class="pt-10">
</p> <h1 class="text-4xl arcade-title scaled-text">Pac-Man in Rust</h1>
</header>
<main class="flex-1 flex items-center justify-center px-4">
<div class="w-full max-w-5xl">
<canvas <canvas
id="canvas" id="canvas"
class="block mx-auto mt-5" class="block mx-auto bg-black w-full max-w-[90vw] h-auto mt-5 rounded-xl shadow-[inset_0_0_0_2px_rgba(255,255,255,0.12),0_10px_30px_rgba(0,0,0,0.8)]"
width="800"
height="600"
></canvas> ></canvas>
<div class="mt-10">
<span <div
class="inline-block mx-2 px-4 py-2 bg-yellow-400 text-black rounded scaled-text" class="mt-8 flex flex-wrap gap-3 justify-center items-center text-sm"
>&larr; &uarr; &rarr; &darr; Move</span
>
<span
class="inline-block mx-2 px-4 py-2 bg-yellow-400 text-black rounded scaled-text"
>Space Change Sprite</span
>
<span
class="inline-block mx-2 px-4 py-2 bg-yellow-400 text-black rounded scaled-text"
>Shift + &uarr;&darr; Change Volume</span
> >
<span class="code">&larr; &uarr; &rarr; &darr;</span>
<span class="opacity-70">Move</span>
<span class="mx-2 opacity-30">|</span>
<span class="code">Space</span>
<span class="opacity-70">Toggle Debug</span>
<span class="mx-2 opacity-30">|</span>
<span class="code">P</span>
<span class="opacity-70">Pause / Unpause</span>
<span class="mx-2 opacity-30">|</span>
<span class="code">M</span>
<span class="opacity-70">Mute / Unmute</span>
</div>
</div>
</main>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
const canvas = document.getElementById("canvas");
var Module = { var Module = {
canvas: document.getElementById("canvas"), canvas: canvas,
preRun: [
() => {
[...canvas.classList]
.filter((className) => className.includes("shadow-"))
.forEach((className) => canvas.classList.remove(className));
},
],
}; };
</script> </script>
<script type="text/javascript" src="pacman.js"></script> <script type="text/javascript" src="pacman.js"></script>

28
assets/site/styles.css Normal file
View File

@@ -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);
}

21
assets/site/styles.scss
View File

@@ -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;
}

8
web.build.ts
View File

@@ -43,7 +43,7 @@ async function build(release: boolean, env: Record<string, string>) {
}`.env(env); }`.env(env);
log("Generating CSS"); 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 buildType = release ? "release" : "debug";
const siteFolder = resolve("assets/site"); const siteFolder = resolve("assets/site");
@@ -52,11 +52,13 @@ async function build(release: boolean, env: Record<string, string>) {
// The files to copy into 'dist' // The files to copy into 'dist'
const files = [ const files = [
...["index.html", "favicon.ico", "build.css"].map((file) => ({ ...["index.html", "favicon.ico", "build.css", "TerminalVector.ttf"].map(
(file) => ({
src: join(siteFolder, file), src: join(siteFolder, file),
dest: join(dist, file), dest: join(dist, file),
optional: false, optional: false,
})), })
),
...["pacman.wasm", "pacman.js", "deps/pacman.data"].map((file) => ({ ...["pacman.wasm", "pacman.js", "deps/pacman.data"].map((file) => ({
src: join(outputFolder, file), src: join(outputFolder, file),
dest: join(dist, file.split("/").pop() || file), dest: join(dist, file.split("/").pop() || file),