Neftaly Hernandez neftaly

Multiplayer online board game sandbox

There are a few existing ones, with each their own characteristics. Which means of course I want to make my own.

Some design principles:

hello

	// root
	{
	"docs": [
	{
	"name": "Untitled",
	"type": "essay",
	"url": "automerge:3HVkHDJMBATJczaFwhKFH6cJhAm7"
	},
	{
	"name": "Ghostscript_Tiger.svg",

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<link rel="icon" type="image/webp" href="/favicon.webp" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- we have to manually download a copy of draco_encoder (or include it from three). Google does not CDN host encoder anywhere! only decoder -->
	<script src="/draco_encoder.js"></script>
	</head>
	<body>

	addEventListener("wheel", (event) => { })

	export const handleWheel = (event: PointerEvent, cameraConfig: Object) => (state) => {
	// TODO: Add support for Safari touchpad gesture events
	const {
	altKey,
	ctrlKey // `true` on trackpads when pinch-zooming (or ctrl key is pressed)
	} = event

	// Move camera (origin) when alt+wheeling

	import { Container } from "@react-three/uikit";
	import { Loader } from '@react-three/uikit-lucide'
	import { useRef } from 'react'
	import { useFrame } from '@react-three/fiber'

	const LoadingSpinner = ({ ...props }) => {
	const ref = useRef()
	useFrame(({ clock }) => {
	ref.current.setStyle({ "transformRotateZ": clock.getElapsedTime() * -100 })
	})

	import { Quaternion, Euler } from 'three'

	// Reusuable objects to save on GC
	const quaternion = new Quaternion()
	const euler = new Euler()

	// TODO: Do we need to do this or will Rapier just accept a Three quaternion?
	const rotationToQuaternion = (rotation) => {
	const { w, x, y, z } = quaternion.setFromEuler(euler.set(...rotation))
	return { w, x, y, z }

	AXIS M7011 firmware v5.90.1 (10/2015)

	https://drive.google.com/file/d/1KCPKUMBI9H7JoiBssCY9Fnxe6oRkdFwP/view?usp=drive_web

	import { useEffect, useRef } from 'react'
	import { useThree } from '@react-three/fiber'
	import { PerspectiveCamera } from '@react-three/drei'
	import useCamera from './useCamera'

	// Camera bound to origin/coords state
	const MapCamera = props => {
	const invalidate = useThree(s => s.invalidate)
	const groupRef = useRef()
	const cameraRef = useRef()

	import React, { useEffect } from 'react'
	import { useThree } from 'react-three-fiber'
	import { GestureType, gestureStream } from '@thi.ng/rstream-gestures'
	import { map } from '@thi.ng/transducers'
	import { tryCatch } from 'ramda'

	// Calculate the difference between 2 [x,y] vectors
	const calcDelta = (key, a, b) => [a[key][0] - b[key][0], a[key][1] - b[key][1]]

	// Calculate the angle and distance between 2 pointers