diff --git a/index.html b/index.html new file mode 100644 index 0000000..bbce3ee --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + slay with friends + + + +
+
+
+ +
+ +
+
+
+
+ +
+
+
+
+
+
+
+ + +
+ +
+ +
+
+ + + + + + diff --git a/src/serve.js b/src/serve.js new file mode 100644 index 0000000..8e61260 --- /dev/null +++ b/src/serve.js @@ -0,0 +1,13 @@ +const server = Bun.serve({ + port: 3000, + async fetch(req) { + const url = new URL(req.url); + let path = url.pathname === "/" ? "/index.html" : url.pathname; + const file = Bun.file(`.${path}`); + if (await file.exists()) { + return new Response(file); + } + return new Response("not found", { status: 404 }); + }, +}); +console.debug(`dev server: http://localhost:${server.port}`); diff --git a/style.css b/style.css new file mode 100644 index 0000000..9d56aa8 --- /dev/null +++ b/style.css @@ -0,0 +1,61 @@ +* { margin: 0; padding: 0; box-sizing: border-box; } + +#game { + display: flex; + flex-direction: column; + height: 100dvh; + max-width: 500px; + margin: 0 auto; +} + +#enemy-zone { + flex: 4; + display: flex; + align-items: center; + justify-content: center; +} + +#info-bar { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 8px; + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; +} + +#hand { + flex: 3; + display: flex; + align-items: center; + justify-content: center; + padding: 8px; + overflow-x: auto; +} + +#hand .card { + width: 80px; + cursor: pointer; + transition: transform 0.15s; +} + +#hand .card.selected { + transform: translateY(-20px); +} + +#hand .card.no-energy { + opacity: 0.5; +} + +#overlay { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.7); + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 2rem; +} + +#overlay[hidden] { display: none; }