WIP: Adding support for py5-web

packages/web/index.html

@@ -15,6 +15,8 @@
     class="min-h-screen font-sans antialiased overscroll-none overflow-hidden text-slate-50"
   >
     <div id="root"></div>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.27.0/full/pyodide.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

packages/web/src/components/py5-canvas.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { DisplaySettings } from "@/lib/display-settings";
+
+interface Py5CanvasProps {
+  fullscreen?: boolean;
+  displaySettings: DisplaySettings;
+  ref: React.RefObject<HTMLCanvasElement>;
+}
+
+const Py5Canvas = ({ fullscreen, displaySettings, ref }: Py5CanvasProps) => (
+  <canvas
+    ref={ref}
+    className={cn(
+      "absolute top-0 left-0",
+      fullscreen && "h-full w-full block overflow-hidden",
+    )}
+    style={{
+      imageRendering: "pixelated",
+      display: displaySettings.showCanvas ? "" : "none",
+    }}
+    width={window.innerWidth / displaySettings.canvasPixelSize}
+    height={window.innerHeight / displaySettings.canvasPixelSize}
+  />
+);
+
+export default React.memo(Py5Canvas);