cleanup

Sheraff · Oct 4, 2024 · ec4727a · ec4727a
1 parent 5034258
commit ec4727a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/src/pages/wave-function-collapse/index.tsx b/src/pages/wave-function-collapse/index.tsx
@@ -3,7 +3,7 @@ import { Head } from "~/components/Head"
 import type { RouteMeta } from "~/router"
 import type { Incoming, Outgoing } from "./worker"
 import Worker from "./worker?worker"
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 import * as utils from './utils'
 import * as config from './carcassonne/definition'
 
@@ -45,6 +45,7 @@ function drawTile(ctx: CanvasRenderingContext2D, w: number, h: number, index: nu
 }
 
 export default function () {
+	const [available] = useState(window.crossOriginIsolated)
 	const ref = useRef<HTMLCanvasElement | null>(null)
 
 	// useEffect(() => {
@@ -97,8 +98,9 @@ export default function () {
 				for (let x = 0; x < width; x++) {
 					const indices = map.reduce((acc, _, t) => (get(x, y, t) && acc.push(t), acc), [] as number[])
 					if (indices.length === 0) continue
-					const index = indices[i % indices.length]
+					// const index = indices[i % indices.length]
 					// const index = indices[0]
+					const index = indices[Math.floor(Math.random() * indices.length)]
 					// grid[y][x] = indices.length
 					const tile = map[index]
 
@@ -140,7 +142,7 @@ export default function () {
 		}
 
 		worker.addEventListener('message', onMessage)
-		const force = seed(10)
+		const force = seed(20)
 		console.log(force)
 		post("start", { height, width, tiles, force })
 		return () => {
@@ -151,11 +153,14 @@ export default function () {
 	}, [])
 
 	return (
-		<div className={styles.main} >
-			<Head />
-			<canvas width="1000" height="1000" ref={ref}>
+		<div className={styles.main}>
+			<div className={styles.head}>
+				<Head />
+			</div>
+			{available && <canvas width="1000" height="1000" ref={ref}>
 				Your browser does not support the HTML5 canvas tag.
-			</canvas>
+			</canvas>}
+			{!available && <p>SharedArrayBuffer is not available, the service worker must have not auto-installed, try reloading the page.</p>}
 		</div>
 	)
 }
diff --git a/src/pages/wave-function-collapse/styles.module.css b/src/pages/wave-function-collapse/styles.module.css
@@ -8,8 +8,17 @@
 	padding: 1em;
 
 	canvas {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
 		border: 1px solid white;
 		aspect-ratio: 1;
-		width: 100%;
+		width: 100lvmin;
 	}
+}
+
+.head {
+	position: relative;
+	z-index: 1;
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -10,12 +10,6 @@ export default defineConfig(async () => {
 		plugins: [react(), fileRouter(), viteTsconfigPaths()],
 		clearScreen: false,
 		base: '/vite-labs/',
-		server: {
-			headers: {
-				'Cross-Origin-Opener-Policy': 'same-origin',
-				'Cross-Origin-Embedder-Policy': 'require-corp',
-			}
-		},
 		build: {
 			target: 'esnext',
 		}