From b88bd7fe1ece9bbb75a1191dfaad3d18e312d9c1 Mon Sep 17 00:00:00 2001
From: dylan <>
Date: Sun, 31 Mar 2024 20:37:18 -0700
Subject: [PATCH] Fix version switching and silent cart

---
 src/client/GamePage.tsx                  |  1 +
 src/client/pico8-client/Pico8Console.tsx | 33 ++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/client/GamePage.tsx b/src/client/GamePage.tsx
index 6988e71..9dbba73 100644
--- a/src/client/GamePage.tsx
+++ b/src/client/GamePage.tsx
@@ -13,6 +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}`;
diff --git a/src/client/pico8-client/Pico8Console.tsx b/src/client/pico8-client/Pico8Console.tsx
index 59ffe13..a5603df 100644
--- a/src/client/pico8-client/Pico8Console.tsx
+++ b/src/client/pico8-client/Pico8Console.tsx
@@ -8,6 +8,7 @@ type Pico8ConsoleImperatives = {
 
 export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedRef: ForwardedRef<Pico8ConsoleImperatives>) => {
 	const {carts} = props;
+	const [playing, setPlaying] = useState(false);
 	const ref = useRef<HTMLDivElement>(null);
 	const [handle, setHandle] = useState<PicoPlayerHandle | null>(null);
 	const attachConsole = useCallback(async () => {
@@ -25,8 +26,36 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
 		}
 	}), [handle]);
 	useEffect(() => {
-		attachConsole();
-	}, [attachConsole]);
+		if (playing) {
+			attachConsole();
+			return () => {
+				if (ref.current) {
+					ref.current.innerHTML = "";
+				}
+			}
+		}
+	}, [playing, attachConsole]);
+	if (!playing) {
+		return (
+			<div
+				ref={ref}
+				className={css`
+					width: 100%;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					aspect-ratio: 1;
+					background-color: black;
+					color: white;
+					cursor: pointer;
+				`}
+				onClick={() => {setPlaying(true)}}
+			>
+				Play!
+			</div>
+		)
+	}
 	return (
 		<div ref={ref} className={css`
 			width: 100%;