improve ui

This commit is contained in:
dylan committed 2024-04-01 00:22:52 -07:00
1 parent ef62037515
commit 3c3519f2e8
7 files changed
+52 -55

No files matched your search

+21 -16
View File
@@ -50,16 +50,32 @@ 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;
`}>
<div>
<h1>{info.release.manifest.title ?? slug!.split("-").map(word => word[0].toUpperCase()+word.slice(1)).join(" ")}</h1>
<h2>By {info.release.author}</h2>
<h2>by {info.release.author}</h2>
</div>
<div className={css`
width: 512px;
max-width: 100%;
margin: auto;
`}>
<div className={css`
border: 2px solid transparent;
&:focus-within {
border: 2px solid limegreen;
}
`}>
<Pico8Console carts={info.release.carts} />
</div>
@@ -69,27 +85,16 @@ export const GamePage = () => {
`}>
Version: <select defaultValue={info.release.version} onChange={(ev) => navigate(`/u/${author}/${slug}/v${ev.target.value}`)}>
{
info.versions.map(v => (
[...info.versions].reverse().map(v => (
<option key={v} value={v}>{v}</option>
))
}
</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/>
</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>
)
+11 -34
View File
@@ -9,45 +9,26 @@ type Pico8ConsoleImperatives = {
export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedRef: ForwardedRef<Pico8ConsoleImperatives>) => {
const {carts} = props;
const [playing, setPlaying] = useState(false);
const playingRef = useRef(false);
const ref = useRef<HTMLDivElement>(null);
const listeners = useRef<Partial<{
keydown: null | ((ev: KeyboardEvent) => void)
}>>({});
const [handle, setHandle] = useState<PicoPlayerHandle | null>(null);
const attachConsole = useCallback(async () => {
const picoConsole = await makePicoConsole({
carts,
});
const codoTextarea: HTMLTextAreaElement = (picoConsole.rawModule as any).codo_textarea;
picoConsole.canvas.addEventListener('click', () => {
codoTextarea.focus();
codoTextarea.select();
})
picoConsole.canvas.tabIndex=0;
if (ref.current) {
ref.current.appendChild(picoConsole.canvas);
ref.current.appendChild(codoTextarea);
picoConsole.canvas.focus();
}
setHandle(picoConsole);
listeners.current.keydown = function (event) {
console.log("keydown", event.key);
if (!playingRef.current) {
return;
}
console.log(picoConsole.state);
if (picoConsole.state.hasFocus) {
console.log("hasFocus");
// 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");
picoConsole.canvas.addEventListener('keydown',(event) => {
if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
event.preventDefault();
}
}
};
document.addEventListener('keydown',
listeners.current.keydown,
{passive: false}
);
}, {passive: false});
picoConsole.canvas.addEventListener('click', () => {
picoConsole.canvas.focus();
})
}, [carts]);
useImperativeHandle(forwardedRef, () => ({
getPicoConsoleHandle() {
@@ -55,17 +36,12 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
}
}), [handle]);
useEffect(() => {
if (playing && playingRef.current) {
if (playing) {
attachConsole();
return () => {
playingRef.current = false;
if (ref.current) {
ref.current.innerHTML = "";
}
if (listeners.current.keydown) {
document.removeEventListener("keydown", listeners.current.keydown);
listeners.current.keydown = null;
}
}
}
}, [playing, attachConsole]);
@@ -84,7 +60,8 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
color: white;
cursor: pointer;
`}
onClick={() => {playingRef.current = true; setPlaying(true)}}
tabIndex={0}
onClick={() => {setPlaying(true)}}
>
Play!
</div>
@@ -19391,7 +19391,7 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
}, function() {
if (typeof codo_key_buffer === "undefined")
codo_key_buffer = [];
document.addEventListener("keydown", function(e) {
Module["canvas"].addEventListener("keydown", function(e) {
var val = -1;
if (e.key.length == 1) {
val = e.key.charCodeAt(0);
+1 -1
View File
@@ -3,7 +3,7 @@ import "./build/veryRawRenderCart.js";
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_dropped_cart?: string;
p8_dropped_cart_name?: string;
+1 -1
View File
@@ -91,7 +91,7 @@ export const makePicoConsole = async (props: {
codoTextarea.style.left="-9999px";
codoTextarea.style.height="0px";
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 handle = rawRenderCart(Module, carts.map(cart => cart.name), cartsDatas, audioContext);
handle.pico8_state = {};
+1 -1
View File
@@ -36,7 +36,7 @@ window.P8 = function (Module, cartNames, cartDatas) {
var _cdpos=0; var iii=0; var ciii=0;
var Module=typeof Module!=="undefined"?Module:{};if(!Module.expectedDataFileDownloads){Module.expectedDataFileDownloads=0;Module.finishedDataFileDownloads=0}Module.expectedDataFileDownloads++;(function(){var loadPackage=function(metadata){function runWithFS(){var fileData0=[];fileData0.push.apply(fileData0,[67,80,79,68,68,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,99,70,73,76,0,0,0,0,123,144,0,0,112,111,100,47,112,105,99,111,56,95,98,111,111,116,46,112,56,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,97,1,0,0,242,16,112,105,99,111,45,56,32,99,97,114,116,114,105,100,103,101,32,47,47,32,104,116,116,112,58,47,47,119,119,119,46,31,0,255,13,46,99,111,109,10,118,101,114,115,105,111,110,32,56,10,95,95,108,117,97,95,95,10,10,45,45,62,56,6,0,25,159,95,95,103,102,120,95,95,10,48,1,0,108,15,129,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,45,1,137,64,31,102,137,64,112,15,139,1,109,15,1,1,239,95,95,95,109,97,112,10,2,240,15,1,1,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,44,50,95,95,115,187,98,48,49,48,99,17,0,161,51,48,53,53,53,50,98,53,54,53,10,0,64,51,53,53,52,5,0,128,49,53,51,53,55,48,53,48,3,0,15,5,0,106,0,169,0,16,56,12,0,115,50,52,48,51,53,50,52,26,0,15,91,2,130,30,49,154,0,15,169,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,238,113,95,95,109,117,115,105,99,114,74,50,32,52,49,2,0,15,12,0,255,255,224,80,49,52,49,10,10,99,70,73,76,0,0,0,0,18,190,12,0,112,111,100,47,103,102,120,49,46,112,111,100,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,122,74,0,0,243,22,67,80,79,68,68,0,0,0,1,0,0,0,103,102,120,49,46,112,111,100,0,47,112,97,98,97,47,112,105,99,111,56,47,112,111,100,47,25,0,63,12,1,0,1,0,10,177,67,66,77,80,20,0,1,0,128,0,0,4,0,47,32,0,1,0,255,255,255,255,255,255,255,255,207,79,77,0,255,255,4,0,73,47,0,0,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,91,63,163,255,255,4,0,73,47,232,241,4,0,75,47,170,204,4,0,75,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,155,79,39,236,255,255,4,0,73,47,232,241,4,0,255,12,47,168,119,4,0,75,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,59,15,1,0,77,79,54,228,0,255,4,0,73,15,160,1,77,63,156,118,131,4,0,74,15,160,1,77,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,155,15,1,0,77,79,255,173,41,255,4,0,73,15,99,1,77,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,92,15,1,0,255,255,255,255,255,255,255,36,97,67,80,65,76,0,3,11,0,255,39,29,43,83,126,37,83,0,135,81,171,82,54,95,87,79,194,195,199,255,241,232,255,0,77,255,163,0,255,236,39,0,228,54,41,173,255,131,118,156,255,119,168,255,204,170,0,0,0,2,4,6,2,4,8,3,0,101,111,3,5,10,3,5,10,126,0,100,31,9,54,0,37,27,9,192,0,5,3,0,254,33,41,24,20,17,29,53,66,33,54,18,83,89,116,47,41,73,51,59,162,136,121,243,239,125,190,18,80,255,108,36,168,231,46,0,181,67,6,90,181,117,70,101,255,110,89,255,157,129,122,1,15,3,0,255,44,255,2,67,66,77,80,164,1,0,0,40,0,0,0,10,0,0,0,8,68,3,24,15,44,0,20,63,9,7,15,39,0,17,95,10,7,7,7,14,41,0,17,51,11,7,13,10,0,66,7,7,7,7,5,0,20,0,5,0,22,7,25,0,37,0,12,39,0,0,3,0,5,4,0,4,16,0,0,10,0,1,3,0,23,0,79,0,14,40,0,3,99,0,9,40,0,5,7,0,10,80,0,1,18,0,12,40,0,6,165,0,9,159,0,31,7,180,4,54,57,79,72,67,180,4,91,231,39,0,231,86,180,4,15,1,0,29,240,3,28,0,73,109,24,69,0,122,44,160,72,50,52,54,53,173,177,183,100,14,240,8,0,77,255,132,0,255,255,39,0,226,50,41,173,255,174,75,176,255,136,188,255,214,197,48,0,32,48,102,144,0,177,131,72,171,82,54,63,65,65,180,182,188,48,0,49,42,255,163,79,0,96,231,86,41,162,255,132,48,0,245,7,175,255,217,177,0,0,0,32,51,123,140,28,60,0,131,49,171,100,54,80,80,80,120,0,35,255,155,9,0,97,63,155,255,132,112,169,192,0,0,75,0,255,0,28,24,87,135,37,77,0,147,60,0,0,0,69,69,69,180,0,2,98,146,133,174,255,105,154,48,0,48,55,67,91,19,0,143,135,81,0,0,0,86,70,59,48,0,2,53,131,118,156,12,0,53,37,55,77,Line truncated
var Module=typeof Module!=="undefined"?Module:{};if(!Module.expectedDataFileDownloads){Module.expectedDataFileDownloads=0;Module.finishedDataFileDownloads=0}Module.expectedDataFileDownloads++;(function(){var loadPackage=function(metadata){function runWithFS(){var fileData0=[];fileData0.push.apply(fileData0,[67,80,79,68,68,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,99,70,73,76,0,0,0,0,123,144,0,0,112,111,100,47,112,105,99,111,56,95,98,111,111,116,46,112,56,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,97,1,0,0,242,16,112,105,99,111,45,56,32,99,97,114,116,114,105,100,103,101,32,47,47,32,104,116,116,112,58,47,47,119,119,119,46,31,0,255,13,46,99,111,109,10,118,101,114,115,105,111,110,32,56,10,95,95,108,117,97,95,95,10,10,45,45,62,56,6,0,25,159,95,95,103,102,120,95,95,10,48,1,0,108,15,129,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,45,1,137,64,31,102,137,64,112,15,139,1,109,15,1,1,239,95,95,95,109,97,112,10,2,240,15,1,1,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,44,50,95,95,115,187,98,48,49,48,99,17,0,161,51,48,53,53,53,50,98,53,54,53,10,0,64,51,53,53,52,5,0,128,49,53,51,53,55,48,53,48,3,0,15,5,0,106,0,169,0,16,56,12,0,115,50,52,48,51,53,50,52,26,0,15,91,2,130,30,49,154,0,15,169,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,238,113,95,95,109,117,115,105,99,114,74,50,32,52,49,2,0,15,12,0,255,255,224,80,49,52,49,10,10,99,70,73,76,0,0,0,0,18,190,12,0,112,111,100,47,103,102,120,49,46,112,111,100,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,122,74,0,0,243,22,67,80,79,68,68,0,0,0,1,0,0,0,103,102,120,49,46,112,111,100,0,47,112,97,98,97,47,112,105,99,111,56,47,112,111,100,47,25,0,63,12,1,0,1,0,10,177,67,66,77,80,20,0,1,0,128,0,0,4,0,47,32,0,1,0,255,255,255,255,255,255,255,255,207,79,77,0,255,255,4,0,73,47,0,0,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,91,63,163,255,255,4,0,73,47,232,241,4,0,75,47,170,204,4,0,75,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,155,79,39,236,255,255,4,0,73,47,232,241,4,0,255,12,47,168,119,4,0,75,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,59,15,1,0,77,79,54,228,0,255,4,0,73,15,160,1,77,63,156,118,131,4,0,74,15,160,1,77,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,155,15,1,0,77,79,255,173,41,255,4,0,73,15,99,1,77,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,92,15,1,0,255,255,255,255,255,255,255,36,97,67,80,65,76,0,3,11,0,255,39,29,43,83,126,37,83,0,135,81,171,82,54,95,87,79,194,195,199,255,241,232,255,0,77,255,163,0,255,236,39,0,228,54,41,173,255,131,118,156,255,119,168,255,204,170,0,0,0,2,4,6,2,4,8,3,0,101,111,3,5,10,3,5,10,126,0,100,31,9,54,0,37,27,9,192,0,5,3,0,254,33,41,24,20,17,29,53,66,33,54,18,83,89,116,47,41,73,51,59,162,136,121,243,239,125,190,18,80,255,108,36,168,231,46,0,181,67,6,90,181,117,70,101,255,110,89,255,157,129,122,1,15,3,0,255,44,255,2,67,66,77,80,164,1,0,0,40,0,0,0,10,0,0,0,8,68,3,24,15,44,0,20,63,9,7,15,39,0,17,95,10,7,7,7,14,41,0,17,51,11,7,13,10,0,66,7,7,7,7,5,0,20,0,5,0,22,7,25,0,37,0,12,39,0,0,3,0,5,4,0,4,16,0,0,10,0,1,3,0,23,0,79,0,14,40,0,3,99,0,9,40,0,5,7,0,10,80,0,1,18,0,12,40,0,6,165,0,9,159,0,31,7,180,4,54,57,79,72,67,180,4,91,231,39,0,231,86,180,4,15,1,0,29,240,3,28,0,73,109,24,69,0,122,44,160,72,50,52,54,53,173,177,183,100,14,240,8,0,77,255,132,0,255,255,39,0,226,50,41,173,255,174,75,176,255,136,188,255,214,197,48,0,32,48,102,144,0,177,131,72,171,82,54,63,65,65,180,182,188,48,0,49,42,255,163,79,0,96,231,86,41,162,255,132,48,0,245,7,175,255,217,177,0,0,0,32,51,123,140,28,60,0,131,49,171,100,54,80,80,80,120,0,35,255,155,9,0,97,63,155,255,132,112,169,192,0,0,75,0,255,0,28,24,87,135,37,77,0,147,60,0,0,0,69,69,69,180,0,2,98,146,133,174,255,105,154,48,0,48,55,67,91,19,0,143,135,81,0,0,0,86,70,59,48,0,2,53,131,118,156,12,0,53,37,55,77,Line truncated
var asm=(/** @suppress {uselessCode} */ function(global,env,buffer) {
"use asm";var a=new global.Int8Array(buffer),b=new global.Int16Array(buffer),c=new global.Int32Array(buffer),d=new global.Uint8Array(buffer),e=new global.Uint16Array(buffer),f=new global.Float32Array(buffer),g=new global.Float64Array(buffer),h=env.ae|0,i=env.af|0,j=0,k=0,l=0,m=0,n=0,o=0,p=0,q=0.0,r=global.NaN,s=global.Infinity,t=global.Math.floor,u=global.Math.abs,v=global.Math.sqrt,w=global.Math.cos,x=global.Math.sin,y=global.Math.atan,z=global.Math.atan2,A=global.Math.ceil,B=global.Math.imul,C=global.Math.min,D=global.Math.clz32,E=env.a,F=env.b,G=env.c,H=env.d,I=env.e,J=env.f,K=env.g,L=env.h,M=env.i,N=env.j,O=env.k,P=env.l,Q=env.m,R=env.n,S=env.o,T=env.p,U=env.q,V=env.r,W=env.s,X=env.t,Y=env.u,Z=env.v,_=env.w,$=env.x,aa=env.y,ba=env.z,ca=env.A,da=env.B,ea=env.C,fa=env.D,ga=env.E,ha=env.F,ia=env.G,ja=env.H,ka=env.I,la=env.J,ma=env.K,na=env.L,oa=env.M,pa=env.N,qa=env.O,ra=env.P,sa=env.Q,ta=env.R,ua=env.S,va=env.T,wa=env.U,xa=env.V,ya=env.W,za=env.X,Aa=env.Y,Ba=env.Z,Ca=env._,Da=env.$,Ea=env.aa,Fa=env.ab,Ga=env.ac,Ha=env.ad,Ia=3145136,Ja=8388016,Ka=0.0;
// EMSCRIPTEN_START_FUNCS
+16 -1
View File
@@ -1120,7 +1120,22 @@ canvas{
<!-- 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 -->