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

codo_textarea wip

Browse Source
This commit is contained in:
dylan 2024-03-31 21:25:54 -07:00
parent b88bd7fe1e
commit ef62037515
6 changed files with 73 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/client/GamePage.tsx
View File

@ -13,7 +13,7 @@ export const GamePage = () => {
const {author, slug, version} = useParams();
const navigate = useNavigate();
const [info, setInfo] = useState<Info | null>(null);
useEffect(() => {
const fetchInfo = async () => {
let url = `/api/release?author=${author}&slug=${slug}`;
@ -75,6 +75,21 @@ export const GamePage = () => {
}
</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>
</div>
)

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

@ -9,16 +9,45 @@ 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();
})
if (ref.current) {
ref.current.appendChild(picoConsole.canvas);
ref.current.appendChild(codoTextarea);
}
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");
event.preventDefault();
}
}
};
document.addEventListener('keydown',
listeners.current.keydown,
{passive: false}
);
}, [carts]);
useImperativeHandle(forwardedRef, () => ({
getPicoConsoleHandle() {
@ -26,12 +55,17 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
}
}), [handle]);
useEffect(() => {
if (playing) {
if (playing && playingRef.current) {
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]);
@ -50,7 +84,7 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
color: white;
cursor: pointer;
`}
onClick={() => {setPlaying(true)}}
onClick={() => {playingRef.current = true; setPlaying(true)}}
>
Play!
</div>

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

@ -18435,6 +18435,7 @@ use chrome, FireFox or Internet Explorer 11`);
var require_veryRawRenderCart = __commonJS((exports, module) => {
var __dirname = "/home/dylan/repos/picobook/src/client/pico8-client";
window.P8 = function(Module, cartNames, cartDatas) {
const codo_textarea_el = Module.codo_textarea || document.getElementById("codo_textarea");
let p8_touch_detected;
let p8_dropped_cart;
let p8_dropped_cart_name;
@ -19406,7 +19407,7 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
if (val == -1) {
}
}
var el2 = document.getElementById("codo_textarea");
var el2 = codo_textarea_el;
codo_key_buffer.push(val);
});
}, function() {
@ -19515,7 +19516,7 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
}, function() {
if (document.hidden)
return 0;
el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
if (el && el == document.activeElement)
return 1;
el = document.activeElement;
@ -19529,13 +19530,13 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
}
return 0;
}, function() {
el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
if (el && el.style.display != "none") {
el.focus();
el.select();
}
}, function() {
el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
if (el && el.style.display != "none") {
el.select();
}
@ -19550,7 +19551,7 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
}, function() {
Module["canvas"].exitPointerLock();
}, function() {
el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
if (el) {
}
}, function() {
@ -19558,21 +19559,21 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
}, function($0, $1) {
_codo_str_out = Module.UTF8ToString($0, $1);
}, function() {
el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
if (el) {
el.value = _codo_str_out;
return 0;
} else
return 1;
}, function() {
el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
if (el && el.style.display == "none" && (typeof p8_touch_detected === "undefined" || !p8_touch_detected)) {
el.style.display = "";
el.focus();
el.select();
}
}, function() {
el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
if (el && el.style.display != "none" && el.value != "") {
_codo_text_value = el.value;
return 1;

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

@ -3,7 +3,7 @@ import "./build/veryRawRenderCart.js";
export type PicoBool = 0 | 1;
export type RenderCart = (Module: {canvas: HTMLCanvasElement}, 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;

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

@ -80,12 +80,18 @@ const getRom = async (cart: PicoCart) => {
export const makePicoConsole = async (props: {
canvas?: HTMLCanvasElement;
codoTextarea?: HTMLTextAreaElement;
audioContext?: AudioContext;
carts: PicoCart[];
}): Promise<PicoPlayerHandle> => {
const {carts, canvas = document.createElement("canvas"), audioContext = new AudioContext()} = props;
const {carts, canvas = document.createElement("canvas"), codoTextarea = document.createElement("textarea"), audioContext = new AudioContext()} = props;
canvas.style.imageRendering = "pixelated";
const Module = {canvas};
codoTextarea.style.display="none";
codoTextarea.style.position="fixed";
codoTextarea.style.left="-9999px";
codoTextarea.style.height="0px";
codoTextarea.style.overflow="hidden";
const Module = {canvas, codo_textarea: codoTextarea};
const cartsDatas = await Promise.all(carts.map(cart => getRom(cart)));
const handle = rawRenderCart(Module, carts.map(cart => cart.name), cartsDatas, audioContext);
handle.pico8_state = {};

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

File diff suppressed because one or more lines are too long