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
Show Stats 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 ( return (
<div className={css` <div className={css`
min-height: 100vh; min-height: 100vh;
background-color: hsl(230, 10%, 10%);
color: white;
`}> `}>
<div className={css` <div className={css`
margin: auto; margin: auto;
width: max-content; 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> <div>
<h2>By {info.release.author}</h2> <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` <div className={css`
width: 512px; width: 512px;
max-width: 100%; max-width: 100%;
margin: auto;
`}> `}>
<Pico8Console carts={info.release.carts} /> <div className={css`
</div> border: 2px solid transparent;
<div className={css` &:focus-within {
display: flex; border: 2px solid limegreen;
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>
))
} }
</select> `}>
</div> <Pico8Console carts={info.release.carts} />
<div> </div>
Content below<br/> <div className={css`
Content below<br/> display: flex;
Content below<br/> justify-content: end;
Content below<br/> `}>
Content below<br/> Version: <select defaultValue={info.release.version} onChange={(ev) => navigate(`/u/${author}/${slug}/v${ev.target.value}`)}>
Content below<br/> {
Content below<br/> [...info.versions].reverse().map(v => (
Content below<br/> <option key={v} value={v}>{v}</option>
Content below<br/> ))
Content below<br/> }
Content below<br/> </select>
Content below<br/> </div>
Content below<br/>
</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>
</div> </div>
) )

47
src/client/pico8-client/Pico8Console.tsx
View File

@ -9,45 +9,26 @@ type Pico8ConsoleImperatives = {
export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedRef: ForwardedRef<Pico8ConsoleImperatives>) => { export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedRef: ForwardedRef<Pico8ConsoleImperatives>) => {
const {carts} = props; const {carts} = props;
const [playing, setPlaying] = useState(false); const [playing, setPlaying] = useState(false);
const playingRef = useRef(false);
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const listeners = useRef<Partial<{
keydown: null | ((ev: KeyboardEvent) => void)
}>>({});
const [handle, setHandle] = useState<PicoPlayerHandle | null>(null); const [handle, setHandle] = useState<PicoPlayerHandle | null>(null);
const attachConsole = useCallback(async () => { const attachConsole = useCallback(async () => {
const picoConsole = await makePicoConsole({ const picoConsole = await makePicoConsole({
carts, carts,
}); });
const codoTextarea: HTMLTextAreaElement = (picoConsole.rawModule as any).codo_textarea; picoConsole.canvas.tabIndex=0;
picoConsole.canvas.addEventListener('click', () => {
codoTextarea.focus();
codoTextarea.select();
})
if (ref.current) { if (ref.current) {
ref.current.appendChild(picoConsole.canvas); ref.current.appendChild(picoConsole.canvas);
ref.current.appendChild(codoTextarea); picoConsole.canvas.focus();
} }
setHandle(picoConsole); setHandle(picoConsole);
listeners.current.keydown = function (event) { picoConsole.canvas.addEventListener('keydown',(event) => {
console.log("keydown", event.key); if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
if (!playingRef.current) { event.preventDefault();
return;
} }
console.log(picoConsole.state); }, {passive: false});
if (picoConsole.state.hasFocus) { picoConsole.canvas.addEventListener('click', () => {
console.log("hasFocus"); picoConsole.canvas.focus();
// block only cursors, M R P, tab })
if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "M", "R", "P", "m", "r", "p", "Tab"].includes(event.key)) {
console.log("preventDefault");
event.preventDefault();
}
}
};
document.addEventListener('keydown',
listeners.current.keydown,
{passive: false}
);
}, [carts]); }, [carts]);
useImperativeHandle(forwardedRef, () => ({ useImperativeHandle(forwardedRef, () => ({
getPicoConsoleHandle() { getPicoConsoleHandle() {
@ -55,17 +36,12 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
} }
}), [handle]); }), [handle]);
useEffect(() => { useEffect(() => {
if (playing && playingRef.current) { if (playing) {
attachConsole(); attachConsole();
return () => { return () => {
playingRef.current = false;
if (ref.current) { if (ref.current) {
ref.current.innerHTML = ""; ref.current.innerHTML = "";
} }
if (listeners.current.keydown) {
document.removeEventListener("keydown", listeners.current.keydown);
listeners.current.keydown = null;
}
} }
} }
}, [playing, attachConsole]); }, [playing, attachConsole]);
@ -84,7 +60,8 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
color: white; color: white;
cursor: pointer; cursor: pointer;
`} `}
onClick={() => {playingRef.current = true; setPlaying(true)}} tabIndex={0}
onClick={() => {setPlaying(true)}}
> >
Play! Play!
</div> </div>

2
src/client/pico8-client/build/veryRawRenderCart.js
View File

@ -19391,7 +19391,7 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
}, function() { }, function() {
if (typeof codo_key_buffer === "undefined") if (typeof codo_key_buffer === "undefined")
codo_key_buffer = []; codo_key_buffer = [];
document.addEventListener("keydown", function(e) { Module["canvas"].addEventListener("keydown", function(e) {
var val = -1; var val = -1;
if (e.key.length == 1) { if (e.key.length == 1) {
val = e.key.charCodeAt(0); val = e.key.charCodeAt(0);

2
src/client/pico8-client/rawRenderCart.ts
View File

@ -3,7 +3,7 @@ import "./build/veryRawRenderCart.js";
export type PicoBool = 0 | 1; export type PicoBool = 0 | 1;
export type RenderCart = (Module: {canvas: HTMLCanvasElement, codo_textarea: HTMLTextAreaElement}, cartNames: string[], cartDatas: number[][], audioContext: AudioContext) => { export type RenderCart = (Module: {canvas: HTMLCanvasElement, codo_textarea?: HTMLTextAreaElement}, cartNames: string[], cartDatas: number[][], audioContext: AudioContext) => {
p8_touch_detected?: PicoBool; p8_touch_detected?: PicoBool;
p8_dropped_cart?: string; p8_dropped_cart?: string;
p8_dropped_cart_name?: string; p8_dropped_cart_name?: string;

2
src/client/pico8-client/renderCart.ts
View File

@ -91,7 +91,7 @@ export const makePicoConsole = async (props: {
codoTextarea.style.left="-9999px"; codoTextarea.style.left="-9999px";
codoTextarea.style.height="0px"; codoTextarea.style.height="0px";
codoTextarea.style.overflow="hidden"; codoTextarea.style.overflow="hidden";
const Module = {canvas, codo_textarea: codoTextarea}; const Module = {canvas, keyboardListeningElement: canvas};
const cartsDatas = await Promise.all(carts.map(cart => getRom(cart))); const cartsDatas = await Promise.all(carts.map(cart => getRom(cart)));
const handle = rawRenderCart(Module, carts.map(cart => cart.name), cartsDatas, audioContext); const handle = rawRenderCart(Module, carts.map(cart => cart.name), cartsDatas, audioContext);
handle.pico8_state = {}; handle.pico8_state = {};

2
src/client/pico8-client/veryRawRenderCart.js
View File

File diff suppressed because one or more lines are too long

17
src/server/public/reference.html
View File

@ -1120,7 +1120,22 @@ canvas{
<!-- Add content below the cart here --> <!-- Add content below the cart here -->
<div>
Content here<br/>
Content here<br/>
Content here<br/>
Content here<br/>
Content here<br/>
Content here<br/>
Content here<br/>
Content here<br/>
Content here<br/>
Content here<br/>
Content here<br/>
Content here<br/>
Content here<br/>
<input type="text"/>
</div>
</div> <!-- body_0 --> </div> <!-- body_0 -->