Arrow of infinity, light mode, and other tweaks

source/arroost/components/dom.js

@@ -153,7 +153,7 @@ export class Dom extends Component {
 
 		this.use(() => {
 			const outOfView = this.outOfView.get()
-			container.style.display = outOfView ? "block" : "block"
+			container.style.display = outOfView ? "hidden" : "block"
 		}, [this.outOfView, this.forceInView])
 
 		const element = this.getElement()

source/arroost/components/infinite.js

@@ -1,4 +1,4 @@
-import { BLACK, RED, scale } from "../../../libraries/habitat-import.js"
+import { BLACK, RED, rotate, scale } from "../../../libraries/habitat-import.js"
 import { shared } from "../../main.js"
 import { Dragging } from "../machines/input.js"
 import { Component } from "./component.js"
@@ -8,12 +8,20 @@ import { Transform } from "./transform.js"
 import { Movement } from "./movement.js"
 import { Style } from "./style.js"
 import { c, getCell, getTemplate, iterateCells, iterateWires, t } from "../../nogan/nogan.js"
-import { CHILD_SCALE, PARENT_SCALE, ZOOMING_IN_THRESHOLD, ZOOM_IN_THRESHOLD } from "../unit.js"
+import {
+	CHILD_SCALE,
+	FULL,
+	PARENT_SCALE,
+	ZOOMING_IN_THRESHOLD,
+	ZOOM_IN_THRESHOLD,
+} from "../unit.js"
 import { ArrowOfCreation } from "../entities/arrows/creation.js"
-import { CELL_CONSTRUCTORS, WIRE_CONSTRUCTOR } from "./tunnel.js"
+import { CELL_CONSTRUCTORS, Tunnel, WIRE_CONSTRUCTOR } from "./tunnel.js"
 import { Entity } from "../entities/entity.js"
 import { EASE, lerp } from "../../../libraries/lerp.js"
 import { Ellipse } from "../entities/shapes/ellipse.js"
+import { ArrowOfConnection } from "../entities/arrows/connection.js"
+import { ArrowOfDestruction } from "../entities/arrows/destruction.js"
 
 export function ilerp(x, a, b) {
 	return (x - a) / (b - a)
@@ -68,7 +76,7 @@ export class Infinite extends Component {
 					// const parentBlur = lerp([0, 20], t, EASE.easeInOutExpo)
 
 					this.dom?.style.opacity.set(childOpacity)
-					this.parent?.style.opacity.set(parentOpacity)
+					// this.parent?.style.opacity.set(parentOpacity)
 
 					// this.dom?.style.blur.set(childBlur)
 					// this.parent?.style.blur.set(parentBlur)
@@ -89,7 +97,9 @@ export class Infinite extends Component {
 		this.use(() => {
 			switch (this.state.get()) {
 				case "zooming-in": {
-					this.appendContentsForLevel(shared.level)
+					if (!this.dom?.input.entity?.tunnel) throw new Error("Missing tunnel")
+					const tunnel = this.dom.input.entity.tunnel
+					this.appendContentsForLevel(tunnel.id)
 					break
 				}
 				case "none": {
@@ -112,14 +122,21 @@ export class Infinite extends Component {
 	}
 
 	/**
-	 * @param {number} level
+	 * @param {number} newLevel
 	 */
-	appendContentsForLevel(level) {
+	appendContentsForLevel(newLevel) {
 		const cellEntities = []
 		const wireEntities = []
 
+		const oldLevelCell = getCell(shared.nogan, shared.level)
+		const newLevelCell = getCell(shared.nogan, newLevel)
+
+		if (!oldLevelCell || !newLevelCell) {
+			throw new Error("Missing level cell - this shouldn't happen")
+		}
+
 		for (const cell of iterateCells(shared.nogan)) {
-			if (cell.parent !== level) continue
+			if (cell.parent !== newLevel) continue
 			const entity = CELL_CONSTRUCTORS[cell.type]({
 				id: cell.id,
 				position: cell.position,
@@ -139,7 +156,7 @@ export class Infinite extends Component {
 
 		for (const wire of iterateWires(shared.nogan)) {
 			const cells = wire.cells.map((id) => getCell(shared.nogan, id))
-			if (!cells.every((cell) => cell?.parent === level)) continue
+			if (!cells.every((cell) => cell?.parent === newLevel)) continue
 
 			const entity = WIRE_CONSTRUCTOR({
 				id: wire.id,
@@ -156,7 +173,40 @@ export class Infinite extends Component {
 			}
 		}
 
+		if (cellEntities.length === 0) {
+			const distance = FULL * 2
+			const angle = Math.random() * Math.PI * 2
+
+			/** @type {[number, number][]} */
+			const positions = [rotate([distance, 0], angle), rotate([-distance, 0], angle)]
+
+			const entity1 = new ArrowOfCreation({
+				position: positions[0],
+				preview: true,
+				level: newLevel,
+			})
+			cellEntities.push(entity1)
+			this.previews.add(entity1)
+
+			const entity2 = new ArrowOfConnection({
+				position: positions[1],
+				preview: true,
+				level: newLevel,
+			})
+			cellEntities.push(entity2)
+			this.previews.add(entity2)
+
+			// const entity3 = new ArrowOfDestruction({
+			// 	position: positions[2],
+			// 	preview: true,
+			// 	level: newLevel,
+			// })
+			// cellEntities.push(entity3)
+			// this.previews.add(entity3)
+		}
+
 		const background = new Ellipse()
+		this.background = background
 		background.dom.style.fill.set(BLACK.toString())
 
 		const parent = this.parent

source/arroost/components/style.js

@@ -1,9 +1,10 @@
-import { glue, GREY, use } from "../../../libraries/habitat-import.js"
+import { BLACK, glue, GREY, use } from "../../../libraries/habitat-import.js"
 import { shared } from "../../main.js"
+import { theme } from "../../theme.js"
 import { Component } from "./component.js"
 import { Dom } from "./dom.js"
 
-export const Style = class extends Component {
+export class Style extends Component {
 	static highestZIndex = 0
 	static lowestZIndex = 0
 
@@ -57,9 +58,15 @@ export const Style = class extends Component {
 	/** @type {Signal<null | number>} */
 	opacity = this.use(null)
 
-	static SHADOW = "0px 4px 8px rgba(0, 0, 0, 0.25), 0px 0px 4px rgba(0, 0, 0, 0.15)"
-	static SHADOW_FILTER =
-		"drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))"
+	static SHADOW_COLOUR = theme.get() === "dark" ? "0, 0, 0" : "0, 0, 20"
+	static SHADOW_OPACITY = theme.get() === "dark" ? 0.25 : 0.03
+
+	static SHADOW = `0px 4px 8px rgba(${Style.SHADOW_COLOUR}, ${
+		Style.SHADOW_OPACITY
+	}), 0px 0px 4px rgba(${Style.SHADOW_COLOUR}, ${Style.SHADOW_OPACITY * 0.6})`
+	static SHADOW_FILTER = `drop-shadow(0px 4px 8px rgba(${Style.SHADOW_COLOUR}, ${
+		Style.SHADOW_OPACITY
+	})) drop-shadow(0px 0px 4px rgba(${Style.SHADOW_COLOUR}, ${Style.SHADOW_OPACITY * 0.6}))`
 
 	/**
 	 * @param {SVGElement} element
@@ -153,3 +160,5 @@ export const Style = class extends Component {
 		this.zIndex.set(zIndex)
 	}
 }
+
+window["Style"] = Style

source/arroost/components/tunnel.js

@@ -56,6 +56,26 @@ export class Tunnel extends Component {
 	 */
 	static inViewInfiniteTunnels = new Set()
 
+	static purgeOtherLevelInfiniteTunnels() {
+		for (const [key, tunnel] of Tunnel.tunnels) {
+			const cell = getCell(shared.nogan, tunnel.id)
+			if (!cell) throw new Error(`Tunnel: Can't find cell ${tunnel.id}`)
+			if (cell.parent !== shared.level) {
+				tunnel.entity.dispose()
+				Tunnel.tunnels.delete(key)
+			}
+		}
+
+		for (const tunnel of Tunnel.inViewInfiniteTunnels) {
+			const cell = getCell(shared.nogan, tunnel.id)
+			if (!cell) throw new Error(`Tunnel: Can't find cell ${tunnel.id}`)
+			if (cell.parent !== shared.level) {
+				tunnel.entity.dispose()
+				Tunnel.inViewInfiniteTunnels.delete(tunnel)
+			}
+		}
+	}
+
 	/**
 	 * @param {Operation[]} operations
 	 */
@@ -209,6 +229,11 @@ export class Tunnel extends Component {
 		}
 
 		if (this.type === "cell") {
+			const cell = getCell(shared.nogan, this.id)
+			if (!cell) throw new Error(`Tunnel: Can't find cell ${this.id}`)
+			if (cell.type === "timing" || cell.type === "colour") {
+				return
+			}
 			this.useCell({
 				dom: this.entity.dom,
 				carry: this.entity.carry,
@@ -229,10 +254,11 @@ export class Tunnel extends Component {
 	/**
 	 * @param {CellId | WireId} id
 	 * @param {Map<CellId | WireId, Tunnel>} store
+	 * @param {boolean} quiet
 	 */
-	static delete(id, store = Tunnel.tunnels) {
+	static delete(id, store = Tunnel.tunnels, quiet = false) {
 		const tunnel = Tunnel.get(id, store)
-		if (!tunnel) throw new Error(`Tunnel: Can't find tunnel ${id} to delete`)
+		if (!tunnel && !quiet) throw new Error(`Tunnel: Can't find tunnel ${id} to delete`)
 		store.delete(id)
 
 		if (store === Tunnel.tunnels) {
@@ -253,7 +279,7 @@ export class Tunnel extends Component {
 	dispose() {
 		super.dispose()
 		const store = this.isPreview ? Tunnel.tunnelPreviews : Tunnel.tunnels
-		Tunnel.delete(this.id, store)
+		Tunnel.delete(this.id, store, true)
 	}
 
 	/**
@@ -272,16 +298,11 @@ export class Tunnel extends Component {
 			const cell = getCell(shared.nogan, this.id)
 			if (!cell) throw new Error(`Tunnel: Can't find cell ${this.id}`)
 			if (equals(cell.position, position)) return
+			if (!equals(velocity, [0, 0])) return
 			Tunnel.apply(() => {
 				return moveCell(shared.nogan, {
 					id: this.id,
 					position,
-					propogate: equals(velocity, [0, 0]),
-					filter: (id) => {
-						const cell = getCell(shared.nogan, id)
-						if (!cell) throw new Error(`Tunnel: Can't find cell ${id}`)
-						return cell.type === "slot"
-					},
 				})
 			})
 		})
@@ -457,8 +478,9 @@ export const CELL_CONSTRUCTORS = {
 
 // Must be called only after all relevant cells have been created
 export const WIRE_CONSTRUCTOR = ({ id, colour, timing, source, target, preview }) => {
-	const targetTunnel = Tunnel.get(target, Tunnel.tunnelPreviews)
-	const sourceTunnel = Tunnel.get(source, Tunnel.tunnelPreviews)
+	const store = preview ? Tunnel.tunnelPreviews : Tunnel.tunnels
+	const targetTunnel = Tunnel.get(target, store)
+	const sourceTunnel = Tunnel.get(source, store)
 
 	const targetEntity = targetTunnel?.entity
 	const sourceEntity = sourceTunnel?.entity
@@ -477,3 +499,5 @@ export const WIRE_CONSTRUCTOR = ({ id, colour, timing, source, target, preview }
 		preview,
 	})
 }
+
+window["Tunnel"] = Tunnel

source/arroost/cursor.js

@@ -1,5 +1,6 @@
 import { use } from "../../libraries/habitat-import.js"
 import { shared } from "../main.js"
+import { theme } from "../theme.js"
 
 export function useCursor() {
 	use(() => {
@@ -12,7 +13,10 @@ export function useCursor() {
 			}
 
 			case "berd": {
-				const path = "/assets/berd-cursor.svg"
+				const path =
+					theme.get() === "dark"
+						? "/assets/berd-cursor.svg"
+						: "/assets/berd-cursor-inverse.svg"
 				document.body.style.cursor = `url(${path}) 0 20, auto`
 				return
 			}

source/arroost/entities/arrows/colour.js

@@ -8,7 +8,7 @@ import {
 	WHITE,
 	equals,
 } from "../../../../libraries/habitat-import.js"
-import { GREY_SILVER, shared } from "../../../main.js"
+import { shared } from "../../../main.js"
 import {
 	createCell,
 	createWire,

source/arroost/entities/arrows/connection.js

@@ -23,7 +23,8 @@ export class ArrowOfConnection extends Entity {
 	pulling = this.use(false)
 
 	constructor({
-		id = createCell(shared.nogan, { parent: shared.level, type: "connection" }).id,
+		level = shared.level,
+		id = createCell(shared.nogan, { parent: level, type: "connection" }).id,
 		position = t([0, 0]),
 		preview = false,
 	}) {

source/arroost/entities/arrows/creation.js

@@ -25,7 +25,8 @@ export class ArrowOfCreation extends Entity {
 	pulling = this.use(false)
 
 	constructor({
-		id = createCell(shared.nogan, { parent: shared.level, type: "creation" }).id,
+		level = shared.level,
+		id = createCell(shared.nogan, { parent: level, type: "creation" }).id,
 		position = t([0, 0]),
 		preview = false,
 	}) {

source/arroost/entities/arrows/destruction.js

@@ -34,7 +34,8 @@ export class ArrowOfDestruction extends Entity {
 	pulling = this.use(false)
 
 	constructor({
-		id = createCell(shared.nogan, { parent: shared.level, type: "destruction" }).id,
+		level = shared.level,
+		id = createCell(shared.nogan, { parent: level, type: "destruction" }).id,
 		position = t([0, 0]),
 		preview = false,
 	}) {

source/arroost/entities/arrows/dummy.js

@@ -8,7 +8,7 @@ import {
 	WHITE,
 	equals,
 } from "../../../../libraries/habitat-import.js"
-import { GREY_SILVER, shared } from "../../../main.js"
+import { shared } from "../../../main.js"
 import {
 	createCell,
 	fireCell,

source/arroost/entities/arrows/noise.js

@@ -5,7 +5,7 @@ import { Input } from "../../components/input.js"
 import { setCellStyles } from "./shared.js"
 import { ArrowOfRecording } from "./recording.js"
 import { RectangleHtml } from "../shapes/rectangle-html.js"
-import { GREY_SILVER, shared } from "../../../main.js"
+import { shared } from "../../../main.js"
 import { GREY } from "../../../../libraries/habitat-import.js"
 import { FIFTH, FULL, HALF, TENTH, THIRD } from "../../unit.js"
 

source/arroost/entities/arrows/reality.js

@@ -8,7 +8,7 @@ import {
 	WHITE,
 	equals,
 } from "../../../../libraries/habitat-import.js"
-import { GREY_SILVER, shared } from "../../../main.js"
+import { shared } from "../../../main.js"
 import {
 	createCell,
 	fireCell,

source/arroost/entities/arrows/recording.js

@@ -10,7 +10,7 @@ import {
 	equals,
 	subtract,
 } from "../../../../libraries/habitat-import.js"
-import { GREY_SILVER, MIDDLE_C, shared } from "../../../main.js"
+import { MIDDLE_C, shared } from "../../../main.js"
 import {
 	SharedResource,
 	createCell,

source/arroost/entities/arrows/shared.js

@@ -1,5 +1,5 @@
 import { WHITE, BLACK, GREY, SILVER } from "../../../../libraries/habitat-import.js"
-import { GREY_SILVER } from "../../../main.js"
+import { GREY_SILVER, theme } from "../../../theme.js"
 import { Dom } from "../../components/dom.js"
 import { Infinite } from "../../components/infinite.js"
 import { Input } from "../../components/input.js"
@@ -41,7 +41,7 @@ export const setCellStyles = ({
 	})
 
 	back.style.shadow.set(true)
-	back.style.stroke.set("rgba(0, 0, 0, 0.25)")
+	back.style.stroke.set(theme.get() === "dark" ? "rgba(0, 0, 0, 0.25)" : "rgba(0, 0, 20, 0.02)")
 	back.style.strokeWidth.set(2)
 
 	// back.style.pointerEvents.set(infinite?.isPreview ? "none" : "all")