dylan/picobook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve ui

Browse Source
This commit is contained in:
dylan
2024-04-01 00:22:52 -07:00
parent ef62037515
commit 3c3519f2e8
7 changed files with 66 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/client/GamePage.tsx
View File

@@ -50,46 +50,51 @@ export const GamePage = () => {
return (
<div className={css`
min-height: 100vh;
background-color: hsl(230, 10%, 10%);
color: white;
`}>
<div className={css`
margin: auto;
width: max-content;
max-inline-size: 66ch;
padding: 1.5em;
display: flex;
flex-direction: column;
gap: 1em;
`}>
<h1>{info.release.manifest.title ?? slug!.split("-").map(word => word[0].toUpperCase()+word.slice(1)).join(" ")}</h1>
<h2>By {info.release.author}</h2>
<div>
<h1>{info.release.manifest.title ?? slug!.split("-").map(word => word[0].toUpperCase()+word.slice(1)).join(" ")}</h1>
<h2>by {info.release.author}</h2>
</div>
<div className={css`
width: 512px;
max-width: 100%;
margin: auto;
`}>
<Pico8Console carts={info.release.carts} />
</div>
<div className={css`
display: flex;
justify-content: end;
`}>
Version: <select defaultValue={info.release.version} onChange={(ev) => navigate(`/u/${author}/${slug}/v${ev.target.value}`)}>
{
info.versions.map(v => (
<option key={v} value={v}>{v}</option>
))
<div className={css`
border: 2px solid transparent;
&:focus-within {
border: 2px solid limegreen;
}
</select>
</div>
<div>
Content below<br/>
Content below<br/>
Content below<br/>
Content below<br/>
Content below<br/>
Content below<br/>
Content below<br/>
Content below<br/>
Content below<br/>
Content below<br/>
Content below<br/>
Content below<br/>
Content below<br/>
`}>
<Pico8Console carts={info.release.carts} />
</div>
<div className={css`
display: flex;
justify-content: end;
`}>
Version: <select defaultValue={info.release.version} onChange={(ev) => navigate(`/u/${author}/${slug}/v${ev.target.value}`)}>
{
[...info.versions].reverse().map(v => (
<option key={v} value={v}>{v}</option>
))
}
</select>
</div>
</div>
{/* <div>
<p>This is a paragraph about this game. It is a cool game. And a cool website to play it on. It automagically connects from GitHub.</p>
</div> */}
</div>
</div>
)