diff --git a/src/lib/components/Player.svelte b/src/lib/components/Player.svelte
index 386bd12..4d48a64 100644
--- a/src/lib/components/Player.svelte
+++ b/src/lib/components/Player.svelte
@@ -2,19 +2,35 @@
import type { RigidBody as RapierRigidBody } from "@dimforge/rapier3d-compat";
import { T, useTask, useThrelte } from "@threlte/core";
import { RigidBody, CollisionGroups, Collider } from "@threlte/rapier";
- import { PerspectiveCamera, Vector3, Raycaster } from "three";
+ import {
+ PerspectiveCamera,
+ Vector3,
+ Vector2,
+ Raycaster,
+ CircleGeometry,
+ MeshBasicMaterial,
+ Mesh,
+ } from "three";
import PointerLockControls from "./PointerLockControls.svelte";
import { paintMode } from "$lib/store/player";
- import { setPlayerPosition } from "$lib/store/player";
+ import {
+ setPlayerPosition,
+ playerPosition,
+ addSprayData,
+ selectedSpray,
+ } from "$lib/store/player";
import { tweened } from "svelte/motion";
import { cubicOut } from "svelte/easing";
import { onMount } from "svelte";
import { handlePainting } from "./player/paintLogic";
import { createEventHandlers } from "./player/eventHandler";
+ import { get } from "svelte/store";
+ import { width, height } from "$lib/store/wall";
export let position: [x: number, y: number, z: number] = [0, 0, 0];
+ let maxSprayDistance = 20;
let radius = 0.3;
- let height = 1.7;
+ let h = 1.7;
export let speed = 6;
let jumpForce = 10;
@@ -22,6 +38,8 @@
let lock: () => void;
let cam: PerspectiveCamera;
+ let dot: Mesh;
+
const t = new Vector3();
const { scene } = useThrelte();
const raycaster = new Raycaster();
@@ -33,6 +51,11 @@
let intervalId: any;
onMount(() => {
+ const dotGeometry = new CircleGeometry(0.01, 32);
+ const dotMaterial = new MeshBasicMaterial({ color: 0xffffff });
+ dot = new Mesh(dotGeometry, dotMaterial);
+ dot.position.set(0, 0, -0.5);
+ cam.add(dot);
intervalId = setInterval(handlePainting, 16);
return () => clearInterval(intervalId);
});
@@ -50,7 +73,13 @@
handleMovement(forward, backward, left, right, jump);
handleGrounding();
handleOutOfBounds();
- setPlayerPosition(position);
+ const currentPlayerPosition = get(playerPosition);
+ setPlayerPosition(
+ new Vector3(...position),
+ cam.rotation.clone(),
+ currentPlayerPosition.state,
+ );
+ handleCursor();
});
function handleMovement(
@@ -78,7 +107,7 @@
raycaster.set(new Vector3(pos.x, pos.y, pos.z), new Vector3(0, -1, 0));
const intersects = raycaster.intersectObject(scene, true);
touchingGround =
- intersects.length > 0 && intersects[0].distance < height / 2 + 0.5;
+ intersects.length > 0 && intersects[0].distance < h / 2 + 0.5;
}
function handleOutOfBounds() {
@@ -88,20 +117,78 @@
cam.rotation.set(0, 0, 0);
}
}
+ let lastSprayTime = 0;
+
+ function handleCursor() {
+ const now = Date.now();
+ if (now - lastSprayTime < 3000) {
+ if (dot.material instanceof MeshBasicMaterial) {
+ dot.material.color.set(0xffffff);
+ }
+ return;
+ }
+ raycaster.setFromCamera(new Vector2(0, 0), cam);
+ const wallIntersects = raycaster.intersectObjects(scene.children, true);
+ const intersectsWithSplashWall = wallIntersects.find(
+ (intersect) => intersect.object.name === "SplashWall",
+ );
+ if (intersectsWithSplashWall && dot.material instanceof MeshBasicMaterial) {
+ const distance = intersectsWithSplashWall.distance;
+ if (distance <= maxSprayDistance) {
+ dot.material.color.set(0xff0000);
+ } else {
+ dot.material.color.set(0xffffff);
+ }
+ }
+ }
- // Paint mode handler
- $: {
- if ($paintMode && cam) {
- let coord = cam.position;
- const distanceFromWall = Math.abs(coord.z + 50);
- zoomLevel.set(distanceFromWall / 10);
- } else if (!$paintMode && cam) {
- zoomLevel.set(1);
+ function handleSpray() {
+ const now = Date.now();
+ if (now - lastSprayTime < 3000) {
+ return;
+ }
+ lastSprayTime = now;
+
+ raycaster.setFromCamera(new Vector2(0, 0), cam);
+ const wallIntersects = raycaster.intersectObjects(scene.children, true);
+ const intersectsWithSplashWall = wallIntersects.find(
+ (intersect) => intersect.object.name === "SplashWall",
+ );
+
+ if (intersectsWithSplashWall && dot.material instanceof MeshBasicMaterial) {
+ const distance = intersectsWithSplashWall.distance;
+
+ if (distance <= maxSprayDistance) {
+ const uv = intersectsWithSplashWall.uv;
+ if (uv) {
+ const sprayData = {
+ id: $selectedSpray,
+ offset: { x: uv.x * width, y: uv.y * height },
+ timestamp: Math.floor(Date.now() / 1000),
+ };
+ addSprayData(sprayData);
+ }
+ }
}
}
+
+ // // Paint mode handler
+ // $: {
+ // if ($paintMode && cam) {
+ // let coord = cam.position;
+ // const distanceFromWall = Math.abs(coord.z + 50);
+ // zoomLevel.set(distanceFromWall / 10);
+ // } else if (!$paintMode && cam) {
+ // zoomLevel.set(1);
+ // }
+ // }
-
-
+
diff --git a/src/lib/components/PlayersRendering.svelte b/src/lib/components/PlayersRendering.svelte
new file mode 100644
index 0000000..b327e87
--- /dev/null
+++ b/src/lib/components/PlayersRendering.svelte
@@ -0,0 +1,85 @@
+
+
+{#if playerArray}
+ {#each playerArray as player (player.id)}
+
+
+
+
+ {/each}
+{/if}
diff --git a/src/lib/components/PointerLockControls.svelte b/src/lib/components/PointerLockControls.svelte
index 38ff1c1..3ae1653 100644
--- a/src/lib/components/PointerLockControls.svelte
+++ b/src/lib/components/PointerLockControls.svelte
@@ -2,7 +2,7 @@
import { createEventDispatcher, onDestroy } from "svelte";
import { Euler, Camera, Quaternion } from "three";
import { useThrelte, useParent } from "@threlte/core";
- import { paintMode, canPaint } from "$lib/store/player";
+ import { paintMode, sprayWheel } from "$lib/store/player";
import { selectedKeyboard } from "$lib/store/settings";
import { keyMapping } from "$lib/store/settings";
import type { KeyMapping } from "$lib/store/settings";
@@ -60,6 +60,7 @@
onPointerlockError,
);
domElement.ownerDocument.addEventListener("keydown", onKeyDown);
+ domElement.ownerDocument.addEventListener("keyup", onKeyUp);
domElement.ownerDocument.addEventListener("mousedown", onMouseDown);
onDestroy(() => {
@@ -73,6 +74,7 @@
onPointerlockError,
);
domElement.ownerDocument.removeEventListener("keydown", onKeyDown);
+ domElement.ownerDocument.removeEventListener("keyup", onKeyUp);
domElement.ownerDocument.removeEventListener("mousedown", onMouseDown);
});
@@ -123,35 +125,20 @@
if (event.key === paintKey) {
if (isLocked) {
unlock();
- paintMode.set(true);
- pointCameraToXAxis();
- } else {
- lock();
+ sprayWheel.set(true);
}
}
}
- function pointCameraToXAxis() {
- if (!$camera) return;
-
- const initialQuaternion = $camera.quaternion.clone();
- const targetEuler = new Euler(0, 0, 0, "YXZ");
- const targetQuaternion = new Quaternion().setFromEuler(targetEuler);
-
- new Tween(initialQuaternion)
- .to(targetQuaternion, 500)
- .easing(Easing.Quadratic.InOut)
- .onUpdate(() => {
- $camera.quaternion.copy(initialQuaternion);
- onChange();
- })
- .start();
- }
+ function onKeyUp(event: KeyboardEvent) {
+ const mapping = keyMapping[get(selectedKeyboard)];
+ const paintKey = mapping.paint;
- function animate(time: number) {
- requestAnimationFrame(animate);
- TWEEN.update(time);
+ if (event.key === paintKey) {
+ if (!isLocked) {
+ lock();
+ sprayWheel.set(false);
+ }
+ }
}
-
- animate(0);
diff --git a/src/lib/components/Scene.svelte b/src/lib/components/Scene.svelte
index 04af7f8..f3e79cd 100644
--- a/src/lib/components/Scene.svelte
+++ b/src/lib/components/Scene.svelte
@@ -5,6 +5,7 @@
import { spring } from "svelte/motion";
import { Mesh, Vector3 } from "three";
import Player from "./Player.svelte";
+ import PlayersRendering from "./PlayersRendering.svelte";
import SplashWall from "./map/SplashWall.svelte";
import ObstacleObjects from "./map/ObstacleObjects.svelte";
import GenericPlaform from "./map/GenericPlatform.svelte";
@@ -45,8 +46,6 @@
}
-
+
();
+
+export function startSpraySubscription() {
+ return sprayStore.subscribe((sprays: SprayData[]) => {
+ sprays.forEach((spray) => {
+ const sprayKey = generateSprayKey(spray);
+ if (!paintedSprays.has(sprayKey)) {
+ const { id, offset } = spray;
+ const x = Math.floor(offset.x);
+ const y = Math.floor(offset.y);
+ const imageUrl = `/sprays/spray${id + 1}.png`;
+ sprayCanvas(imageUrl, x, y);
+ paintedSprays.add(sprayKey);
+ }
+ });
+ });
+}
diff --git a/src/lib/store/fakeP2P.ts b/src/lib/store/fakeP2P.ts
new file mode 100644
index 0000000..ec28858
--- /dev/null
+++ b/src/lib/store/fakeP2P.ts
@@ -0,0 +1,47 @@
+import { addOrUpdatePlayer, removePlayer } from "./playersManager";
+import type { PlayerID } from "./playersData";
+
+export function initializePlayerData() {
+ for (let i = 0; i < 10; i++) {
+ const id = `player-${i}` as PlayerID;
+ const x = Math.random() * 10 - 5;
+ const y = Math.random() * 10 - 5;
+ const z = Math.random() * 10 - 5;
+ const rotationX = Math.random() * Math.PI * 2;
+ const rotationY = Math.random() * Math.PI * 2;
+ const rotationZ = Math.random() * Math.PI * 2;
+ const state = ["idle", "running", "walking", "jumping"][
+ Math.floor(Math.random() * 3)
+ ] as "idle" | "running" | "walking" | "jumping";
+ // addOrUpdatePlayer(id, x, y, z, rotationX, rotationY, rotationZ, state);
+ }
+}
+
+export function startP2PUpdates(
+ callback: (
+ id: PlayerID,
+ x: number,
+ y: number,
+ z: number,
+ rotationX: number,
+ rotationY: number,
+ rotationZ: number,
+ state: "idle" | "running" | "walking" | "jumping",
+ ) => void,
+ interval: number = 1000,
+) {
+ // Simulate P2P updates
+ setInterval(() => {
+ const id = `player-${Math.floor(Math.random() * 10)}` as PlayerID;
+ const x = Math.random() * 10 - 5;
+ const y = Math.random() * 10 - 5;
+ const z = Math.random() * 10 - 5;
+ const rotationX = Math.random() * Math.PI * 2;
+ const rotationY = Math.random() * Math.PI * 2;
+ const rotationZ = Math.random() * Math.PI * 2;
+ const state = ["idle", "running", "walking", "jumping"][
+ Math.floor(Math.random() * 3)
+ ] as "idle" | "running" | "walking" | "jumping";
+ callback(id, x, y, z, rotationX, rotationY, rotationZ, state);
+ }, interval);
+}
diff --git a/src/lib/store/player.ts b/src/lib/store/player.ts
index 2fccb54..c1e984b 100644
--- a/src/lib/store/player.ts
+++ b/src/lib/store/player.ts
@@ -1,31 +1,70 @@
import { writable } from "svelte/store";
+import type { Player } from "$lib/store/playersData";
+import { Vector3, Euler } from "three";
-export const paintMode = writable(false);
+// Player-related stores and functions
+// -----------------------------------
-export const debugMode = writable(false);
-export const setDebugMode = (value: boolean) => {
- debugMode.set(value);
+/**
+ * Represents the player's current position, rotation, and state.
+ */
+export const playerPosition = writable({
+ id: "",
+ position: new Vector3(0, 10000, 20005),
+ rotation: new Euler(0, 0, 0, "XYZ"),
+ state: "idle",
+});
+
+/**
+ * Updates the player's position, rotation, and state.
+ *
+ * @param position - The new position as a Vector3 object.
+ * @param rotation - The new rotation as an Euler object.
+ * @param state - The new state as a string ("idle", "running", "walking", "jumping").
+ */
+export const setPlayerPosition = (
+ position?: Vector3,
+ rotation?: Euler,
+ state?: "idle" | "running" | "walking" | "jumping",
+) => {
+ playerPosition.update((player) => ({
+ ...player,
+ position: position ?? player.position,
+ rotation: rotation ?? player.rotation,
+ state: state ?? player.state,
+ }));
};
+// Player state data
+// --------------------
export interface Coords {
x: number;
y: number;
}
-
-export type Position = number[];
-export const playerPosition = writable([0, 10000, 20005]);
-export const setPlayerPosition = (position: Position) => {
- playerPosition.set(position);
-};
-
export const mousePosition = writable({ x: 0, y: 0 });
export const isMouseDown = writable(false);
export const isIntersect = writable(false);
+/**
+ * Player Settings are variable modes
+ */
+export const paintMode = writable(false);
+export const debugMode = writable(false);
+export const canPaint = writable(false);
+// Sets
+export function setCanPaint(value: boolean) {
+ canPaint.set(value);
+}
+export const setDebugMode = (value: boolean) => {
+ debugMode.set(value);
+};
+
+/**
+ * Selected colors and availible colors
+ */
export type Color = { r: number; g: number; b: number; a: number };
export const selectedColor = writable({ r: 255, g: 0, b: 0, a: 255 });
-
-export const palette = writable([
+export const palette = writable([
{ r: 255, g: 0, b: 0, a: 255 }, // Red
{ r: 0, g: 255, b: 0, a: 255 }, // Green
{ r: 0, g: 0, b: 255, a: 255 }, // Blue
@@ -37,8 +76,20 @@ export const palette = writable([
{ r: 255, g: 165, b: 0, a: 255 }, // Orange
{ r: 75, g: 0, b: 130, a: 255 }, // Indigo
]);
+export const sprayWheel = writable(false);
+export const selectedSpray = writable(0);
-export const canPaint = writable(false);
-export function setCanPaint(value: boolean) {
- canPaint.set(value);
-}
+export type SprayData = {
+ id: number;
+ offset: { x: number; y: number };
+ timestamp: number;
+};
+const initialSprayData: SprayData[] = [];
+export const sprayStore = writable(initialSprayData);
+export const addSprayData = (spray: SprayData) => {
+ sprayStore.update((sprays) => {
+ const updatedSprays = [...sprays, spray];
+ updatedSprays.sort((a, b) => a.timestamp - b.timestamp);
+ return updatedSprays;
+ });
+};
diff --git a/src/lib/store/playersData.ts b/src/lib/store/playersData.ts
new file mode 100644
index 0000000..501c99f
--- /dev/null
+++ b/src/lib/store/playersData.ts
@@ -0,0 +1,75 @@
+import { Vector3, Euler } from "three";
+
+export type PlayerID = string;
+
+export interface Player {
+ id: PlayerID;
+ position: Vector3;
+ rotation: Euler;
+ state: "idle" | "running" | "walking" | "jumping";
+}
+
+export class PlayerData implements Player {
+ id: PlayerID;
+ position: Vector3;
+ rotation: Euler;
+ state: "idle" | "running" | "walking" | "jumping";
+
+ constructor(
+ player?: Player,
+ id?: PlayerID,
+ x?: number,
+ y?: number,
+ z?: number,
+ rotationX?: number,
+ rotationY?: number,
+ rotationZ?: number,
+ state?: "idle" | "running" | "walking" | "jumping",
+ ) {
+ if (player) {
+ this.id = player.id;
+ this.position = player.position;
+ this.rotation = player.rotation;
+ this.state = player.state;
+ return;
+ }
+ if (!id) throw new Error("neither player nor id were provided");
+ this.id = id;
+
+ this.position = new Vector3(
+ x ?? randomCoordinate(),
+ y ?? randomCoordinate(),
+ z ?? randomCoordinate(),
+ );
+ this.rotation = new Euler(
+ rotationX ?? randomRotation(),
+ rotationY ?? randomRotation(),
+ rotationZ ?? randomRotation(),
+ );
+
+ this.state = state ?? "idle";
+ }
+
+ updatePosition(x: number, y: number, z: number) {
+ // this.position.set(x, y, z);
+ this.position.x = x;
+ this.position.y = y;
+ this.position.z = z;
+ }
+
+ updateRotation(rotationX: number, rotationY: number, rotationZ: number) {
+ // this.rotation.set(rotationX, rotationY, rotationZ);
+ this.rotation.x = rotationX;
+ this.rotation.y = rotationY;
+ this.rotation.z = rotationZ;
+ }
+
+ updateState(state: "idle" | "running" | "walking" | "jumping") {
+ this.state = state;
+ }
+}
+
+const randomCoordinate = () => Math.random() * 10 - 5;
+const randomRotation = () => Math.random() * Math.PI * 2;
+
+export const players: Map = new Map();
diff --git a/src/lib/store/playersManager.ts b/src/lib/store/playersManager.ts
new file mode 100644
index 0000000..23e57c9
--- /dev/null
+++ b/src/lib/store/playersManager.ts
@@ -0,0 +1,17 @@
+import { players, PlayerData } from "./playersData";
+import type { Player, PlayerID } from "./playersData";
+
+export function addOrUpdatePlayer(input: Player): void {
+ const player = players.get(input.id);
+ if (player) {
+ player.updatePosition(input.position.x, input.position.y, input.position.z);
+ player.updateRotation(input.rotation.x, input.rotation.y, input.rotation.z);
+ player.updateState(input.state);
+ } else {
+ players.set(input.id, new PlayerData(input));
+ }
+}
+
+export function removePlayer(id: PlayerID): void {
+ players.delete(id);
+}
diff --git a/src/lib/topology/Update.svelte b/src/lib/topology/Update.svelte
new file mode 100644
index 0000000..2a9e845
--- /dev/null
+++ b/src/lib/topology/Update.svelte
@@ -0,0 +1,69 @@
+
diff --git a/src/lib/topology/handlers.ts b/src/lib/topology/handlers.ts
new file mode 100644
index 0000000..03c121b
--- /dev/null
+++ b/src/lib/topology/handlers.ts
@@ -0,0 +1,62 @@
+import { toString as uint8ArrayToString } from "uint8arrays/to-string";
+import { type ICanvas } from "./objects/canvas";
+import { OBJECT_ID, PRESENCE_GROUP } from ".";
+import { type Player } from "$lib/store/playersData";
+import { addOrUpdatePlayer } from "$lib/store/playersManager";
+import { addSprayData, type SprayData } from "$lib/store/player";
+
+export function handlePresenceMessages(e: any) {
+ if (e.detail.msg.topic !== PRESENCE_GROUP) return;
+ const input = uint8ArrayToString(e.detail.msg.data);
+ const player: Player = JSON.parse(input);
+ addOrUpdatePlayer(player);
+}
+
+// TODO: this should be superseded by wasm and main ts-topology library
+export const handleCanvasMessages = (canvas: ICanvas, e: any) => {
+ if (e.detail.msg.topic !== OBJECT_ID) return;
+ const input = uint8ArrayToString(e.detail.msg.data);
+ const message = JSON.parse(input);
+ switch (message["type"]) {
+ case "object_update": {
+ const fn = uint8ArrayToString(new Uint8Array(message["data"]));
+ handleObjectUpdate(canvas, fn);
+ break;
+ }
+ default: {
+ break;
+ }
+ }
+};
+
+function handleObjectUpdate(canvas: ICanvas, fn: string) {
+ const fnName = fn.split("(")[0];
+ switch (fnName) {
+ case "addSpray": {
+ const args = fn.replace("addSpray(", "").replace(")", "").split(",");
+ let timestamp = parseInt(args[0], 10);
+ let offset_x = parseInt(args[1].replace("[", ""), 10);
+ let offset_y = parseInt(args[2].replace("]", ""), 10);
+ const offset: [number, number] = [offset_x, offset_y];
+ let sprayType = parseInt(args[3], 10);
+ try {
+ canvas.addSpray(timestamp, offset, sprayType);
+ const sprayData: SprayData = {
+ id: sprayType,
+ offset: {
+ x: offset_x,
+ y: offset_y,
+ },
+ timestamp,
+ };
+ addSprayData(sprayData);
+ } catch (e) {
+ console.error(e);
+ }
+ break;
+ }
+ default: {
+ break;
+ }
+ }
+}
diff --git a/src/lib/topology/index.ts b/src/lib/topology/index.ts
new file mode 100644
index 0000000..2429ed2
--- /dev/null
+++ b/src/lib/topology/index.ts
@@ -0,0 +1,85 @@
+import { TopologyNode } from "@topology-foundation/node";
+import { fromString as uint8ArrayFromString } from "uint8arrays/from-string";
+import { Canvas, type ICanvas } from "./objects/canvas";
+import { handleCanvasMessages, handlePresenceMessages } from "./handlers";
+import { type Player } from "../store/playersData";
+import { addSprayData, type SprayData } from "$lib/store/player";
+
+// exception just for the EthCC demo, the format is not this at all
+export const OBJECT_ID = "topology::counter_splash";
+export const PRESENCE_GROUP = "counter-splash::presence";
+export const WIDTH = 4000;
+export const HEIGHT = 3000;
+
+let node: TopologyNode;
+let canvas: Canvas;
+export let nodeId: string;
+
+export async function topologyInit() {
+ node = new TopologyNode();
+ await node.start();
+ nodeId = node.getPeerId();
+
+ // TODO await for peer connection
+ canvas = new Canvas(node.getPeerId(), WIDTH, HEIGHT);
+ canvas.id = OBJECT_ID;
+ node.createObject(canvas);
+ node.addCustomGroupMessageHandler((e) => handleCanvasMessages(canvas, e));
+
+ node.addCustomGroup(PRESENCE_GROUP);
+ node.addCustomGroupMessageHandler((e) => handlePresenceMessages(e));
+
+ while (true) {
+ try {
+ await new Promise((resolve) => setTimeout(resolve, 15000));
+ node.syncObject(OBJECT_ID);
+ let object: ICanvas | null = getObject(OBJECT_ID);
+ if (!object) continue;
+ canvas = object;
+ // TODO fix this, might be adding on top of existing sprays
+ for (let spray of canvas.getSprays().set()) {
+ const tokens = spray.split(",");
+ const sprayData: SprayData = {
+ id: parseInt(tokens[3].replace("]", ""), 10),
+ offset: {
+ x: parseInt(tokens[1].replace("[", ""), 10),
+ y: parseInt(tokens[2].replace("]", ""), 10),
+ },
+ timestamp: parseInt(tokens[0].replace("[", ""), 10),
+ };
+ addSprayData(sprayData);
+ }
+ } catch (e) {
+ console.error(e);
+ break;
+ }
+ }
+}
+
+export function getObject(id: string): ICanvas | null {
+ let object: any = node.getObject(id);
+ if (!object) return null;
+ return Object.assign(new Canvas(node.getPeerId(), 0, 0), object);
+}
+
+export function addSpray(
+ timestamp: number,
+ offset: [number, number],
+ sprayType: number,
+) {
+ if (
+ canvas
+ .getSprays()
+ .lookup(`[${timestamp},[${offset[0]},${offset[1]}],${sprayType}]`)
+ )
+ return;
+ canvas.addSpray(timestamp, offset, sprayType);
+ node.updateObject(canvas, `addSpray(${timestamp},[${offset}],${sprayType})`);
+}
+
+export function sendPresence(player: Player) {
+ node.sendGroupMessage(
+ PRESENCE_GROUP,
+ uint8ArrayFromString(JSON.stringify(player)),
+ );
+}
diff --git a/src/lib/topology/objects/canvas.ts b/src/lib/topology/objects/canvas.ts
new file mode 100644
index 0000000..2511858
--- /dev/null
+++ b/src/lib/topology/objects/canvas.ts
@@ -0,0 +1,67 @@
+import { GSet } from "@topology-foundation/crdt";
+import { TopologyObject } from "@topology-foundation/object";
+
+export interface ICanvas extends TopologyObject {
+ width: number;
+ height: number;
+ sprays: GSet;
+ addSpray(
+ timestamp: number,
+ offset: [number, number],
+ sprayType: number,
+ ): void;
+ getSprays(): GSet;
+ merge(peerCanvas: Canvas): void;
+}
+
+export class Canvas extends TopologyObject implements ICanvas {
+ width: number;
+ height: number;
+ sprays: GSet;
+
+ constructor(
+ peerId: string,
+ width: number,
+ height: number,
+ sprays?: Set,
+ ) {
+ super(peerId);
+ this.width = width;
+ this.height = height;
+ this.sprays = new GSet(sprays ? sprays : new Set());
+ }
+
+ addSpray(
+ timestamp: number,
+ offset: [number, number],
+ sprayType: number,
+ ): void {
+ if (
+ offset[0] < 0 ||
+ offset[0] >= this.width ||
+ offset[1] < 0 ||
+ offset[1] >= this.height
+ )
+ return;
+ this.sprays.add(`[${timestamp},[${offset[0]},${offset[1]}],${sprayType}]`);
+ }
+
+ getSprays(): GSet {
+ return this.sprays;
+ }
+
+ merge(peerCanvas: Canvas): void {
+ // TODO ugly, fix this
+ // protobufs should solve this
+ peerCanvas = Object.assign(new Canvas("", 0, 0), peerCanvas);
+ peerCanvas.sprays = Object.assign(
+ new GSet(new Set()),
+ peerCanvas.sprays,
+ );
+ peerCanvas.sprays._set = Object.assign(
+ new Set(),
+ peerCanvas.sprays._set,
+ );
+ this.sprays.merge(peerCanvas.getSprays());
+ }
+}
diff --git a/static/sprays/spray1.png b/static/sprays/spray1.png
new file mode 100644
index 0000000..d9d109a
Binary files /dev/null and b/static/sprays/spray1.png differ
diff --git a/static/sprays/spray2.png b/static/sprays/spray2.png
new file mode 100644
index 0000000..c6b61e6
Binary files /dev/null and b/static/sprays/spray2.png differ
diff --git a/static/sprays/spray3.png b/static/sprays/spray3.png
new file mode 100644
index 0000000..5741c31
Binary files /dev/null and b/static/sprays/spray3.png differ
diff --git a/static/sprays/spray4.png b/static/sprays/spray4.png
new file mode 100644
index 0000000..00f555d
Binary files /dev/null and b/static/sprays/spray4.png differ
diff --git a/static/sprays/spray5.png b/static/sprays/spray5.png
new file mode 100644
index 0000000..d9aae4c
Binary files /dev/null and b/static/sprays/spray5.png differ
diff --git a/static/sprays/spray6.png b/static/sprays/spray6.png
new file mode 100644
index 0000000..f98a32f
Binary files /dev/null and b/static/sprays/spray6.png differ
diff --git a/static/sprays/spray7.png b/static/sprays/spray7.png
new file mode 100644
index 0000000..4b81001
Binary files /dev/null and b/static/sprays/spray7.png differ
diff --git a/tsconfig.json b/tsconfig.json
index 593dc19..44434dc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,8 +8,7 @@
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
- "strict": true,
- "moduleResolution": "bundler"
+ "strict": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
diff --git a/vite.config.ts b/vite.config.ts
index 43ca690..158282e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,9 @@
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
export default defineConfig({
- plugins: [sveltekit()],
+ plugins: [sveltekit(), nodePolyfills()],
ssr: {
noExternal: ["three"],
},
Player Position:
-
diff --git a/src/lib/components/ui/sprayWheel.svelte b/src/lib/components/ui/sprayWheel.svelte
new file mode 100644
index 0000000..3aa2a0a
--- /dev/null
+++ b/src/lib/components/ui/sprayWheel.svelte
@@ -0,0 +1,48 @@
+
+
+X: {Math.floor($playerPosition[0])}
-Y: {Math.floor($playerPosition[1])}
-Z: {Math.floor($playerPosition[2])}
+X: {Math.floor($playerPosition.position.x)}
+Y: {Math.floor($playerPosition.position.y)}
+Z: {Math.floor($playerPosition.position.z)}
+
diff --git a/src/lib/handler.ts b/src/lib/handler.ts
index d165aae..c485abd 100644
--- a/src/lib/handler.ts
+++ b/src/lib/handler.ts
@@ -1,28 +1,4 @@
-import { updatePixels } from "./store/wall";
-
-export function generateRandomPixels(
- width: number,
- height: number,
- count: number,
-) {
- const updates = [];
- for (let i = 0; i < count; i++) {
- const x = Math.floor(Math.random() * width);
- const y = Math.floor(Math.random() * height);
- const r = Math.floor(Math.random() * 256);
- const g = Math.floor(Math.random() * 256);
- const b = Math.floor(Math.random() * 256);
- const a = 255;
- // updates.push({ x, y, r, g, b, a });
- }
-
- for (let i = 500; i < 1000; i++) {
- for (let j = 500; j < 1000; j++) {
- updates.push(i, j, 255, 255, 255, 255);
- }
- }
- updatePixels(updates);
-}
+import { updatePixels, width, height } from "./store/wall";
export function initPixelToImage(imageUrl: string) {
// Create an image element
@@ -37,6 +13,11 @@ export function initPixelToImage(imageUrl: string) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
+ if (!ctx) {
+ console.error("Failed to get 2D context");
+ return;
+ }
+
// Set the canvas dimensions to match the image
canvas.width = image.width;
canvas.height = image.height;
@@ -69,3 +50,59 @@ export function initPixelToImage(imageUrl: string) {
updatePixels(updates);
};
}
+
+export function sprayCanvas(
+ imageUrl: string,
+ offsetX: number,
+ offsetY: number,
+) {
+ const IMAGE_SIZE = 256;
+ const image = new Image();
+
+ image.src = imageUrl;
+
+ image.onload = () => {
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d");
+
+ if (!ctx) {
+ console.error("Failed to get 2D context");
+ return;
+ }
+
+ canvas.width = IMAGE_SIZE;
+ canvas.height = IMAGE_SIZE;
+
+ ctx.drawImage(image, 0, 0, IMAGE_SIZE, IMAGE_SIZE);
+
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ const data = imageData.data;
+
+ const updates = [];
+ for (let i = 0; i < data.length; i += 4) {
+ const r = data[i];
+ const g = data[i + 1];
+ const b = data[i + 2];
+ const a = data[i + 3];
+
+ if (a === 0) continue; // Skip transparent pixels
+
+ const x = offsetX - IMAGE_SIZE / 2 + ((i / 4) % canvas.width);
+ const y =
+ offsetY -
+ IMAGE_SIZE / 2 +
+ canvas.height -
+ Math.floor(i / 4 / canvas.width);
+
+ // Ensure coordinates are within bounds
+ if (x >= 0 && x < width && y >= 0 && y < height) {
+ updates.push({ x, y, r, g, b, a });
+ }
+ }
+
+ updatePixels(updates);
+ };
+ image.onerror = () => {
+ console.error(`Failed to load image: ${imageUrl}`);
+ };
+}
diff --git a/src/lib/paint.ts b/src/lib/paint.ts
new file mode 100644
index 0000000..e58a195
--- /dev/null
+++ b/src/lib/paint.ts
@@ -0,0 +1,26 @@
+import { sprayCanvas } from "./handler";
+import { sprayStore } from "$lib/store/player";
+import type { SprayData } from "$lib/store/player";
+
+// ugly but i don't care
+function generateSprayKey(spray: SprayData): string {
+ return `${spray.id}-${spray.offset.x}-${spray.offset.y}-${spray.timestamp}`;
+}
+
+const paintedSprays = new Set
+ })
+
+ {#if $sprayWheel}
+
+
+ {/if}
+
+ {#each Array(imageCount) as _, index}
+
+
+
+
+ {/each}
+