Fix version switching and silent cart

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}`;

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(() => {
+		if (playing) {
 			attachConsole();
-	}, [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%;