shmup/slaywithfriends
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add HTML shell, CSS layout, and dev server

Browse source
This commit is contained in:
Jared Miller 2026-02-23 17:39:46 -05:00
parent fcf8de7f75
commit 933b6fc452
Signed by: shmup
GPG key ID: 22B5C6D66A38B06C
3 changed files with 115 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
index.html Normal file
View file

@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slay with friends</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game">
<section id="enemy-zone">
<div id="enemy-info">
<span id="enemy-name"></span>
<div id="enemy-hp-bar"><span id="enemy-hp"></span></div>
<span id="enemy-block"></span>
<div id="enemy-status"></div>
<div id="enemy-intent"></div>
</div>
</section>
<section id="info-bar">
<div id="energy"></div>
<div id="player-hp-bar"><span id="player-hp"></span></div>
<div id="player-block"></div>
<div id="player-strength"></div>
<div id="player-status"></div>
<div id="pile-counts">
<button id="draw-pile-btn">draw: <span id="draw-count">0</span></button>
<button id="discard-pile-btn">discard: <span id="discard-count">0</span></button>
</div>
<button id="end-turn-btn">end turn</button>
</section>
<section id="hand"></section>
</div>
<div id="overlay" hidden></div>
<script type="module" src="src/main.js"></script>
</body>
</html>

13
src/serve.js Normal file
View file

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

61
style.css Normal file
View file

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