50 |
51 |
--------------------------------------------------------------------------------
/index.tsx:
--------------------------------------------------------------------------------
1 | import { Render } from "./src/render";
2 | import * as React from "react";
3 | import ReactDOM = require("react-dom");
4 |
5 | import { startUI } from "./src/ui";
6 | import "regenerator-runtime/runtime";
7 |
8 | import { startInput } from "./src/input";
9 | import { updateCamera } from "./src/camera";
10 | import { updateAgent } from "./src/movement";
11 | import { sendUpdate } from "./src/client";
12 | import { getState } from "./src/state";
13 |
14 | startInput();
15 | startUI();
16 | let i = 0;
17 |
18 | const rootElement = document.getElementById("window");
19 | ReactDOM.render(
20 |
477 |
502 |
503 |
524 |
530 |
531 |
532 | )}
533 | {
92 | e.stopPropagation();
93 | }}
94 | onKeyDown={(e) => {
95 | e.stopPropagation();
96 | }}
97 | >
98 |
110 | 111 | setCode(e.target.value)} 115 | spellCheck={false} 116 | > 117 | 118 | setEmail(e.target.value)} 124 | > 125 | 126 | setOpt(!opt)} 129 | checked={opt} 130 | > 131 | submit()} 135 | > 136 | 137 | {success && ( 138 |
141 | );
142 | }
143 |
--------------------------------------------------------------------------------
/src/audio.ts:
--------------------------------------------------------------------------------
1 | import * as Vector from "@graph-ts/vector2";
2 |
3 | import { getState } from "./state";
4 | import seedrandom from "seedrandom";
5 | import ambient_sounds from "../scraper/ambient_sounds.json";
6 |
7 | // const rng = seedrandom("hello.");
8 | const rng = seedrandom("2");
9 |
10 | function randomSound() {
11 | return ambient_sounds[Math.floor(rng() * ambient_sounds.length)];
12 | }
13 | function n_rng(s = 1) {
14 | return (rng() - 0.5) * s;
15 | }
16 |
17 | let radius = 10000;
18 | function randomSoundEntity() {
19 | let sound = randomSound();
20 | return {
21 | pos: { x: n_rng(radius), y: n_rng(radius) },
22 | url: sound["url_audio"][0],
23 | name: sound["name_audio"][0],
24 | };
25 | }
26 | let sounds = [];
27 |
28 | for (var i = 0; i < 130; i++) {
29 | sounds.push(randomSoundEntity());
30 | }
31 |
32 | // console.log(sounds);
33 |
34 | const AudioContext = window.AudioContext || window.webkitAudioContext;
35 |
36 | const audioContext = new AudioContext();
37 |
38 | class Source {
39 | pos: Matter.Vector;
40 | url: string;
41 | name: string;
42 | playing: boolean;
43 | activated: boolean;
44 | loaded: boolean;
45 | audioElement: HTMLAudioElement;
46 | track: MediaElementAudioSourceNode;
47 | lowpass: BiquadFilterNode;
48 | gain: GainNode;
49 |
50 | constructor(pos: Matter.Vector, url: string, name: string) {
51 | this.pos = pos;
52 | this.url = url;
53 | this.name = name;
54 | console.log(name);
55 | console.log(url);
56 | // get the audio element
57 | this.audioElement = new Audio();
58 |
59 | this.audioElement.addEventListener(
60 | "ended",
61 | () => {
62 | this.audioElement.play();
63 | },
64 | false
65 | );
66 |
67 | // pass it into the audio context
68 | this.track = audioContext.createMediaElementSource(this.audioElement);
69 |
70 | this.lowpass = audioContext.createBiquadFilter();
71 |
72 | this.lowpass.type = "lowpass";
73 | this.lowpass.Q.value = 0.5;
74 |
75 | this.gain = audioContext.createGain();
76 |
77 | this.activated = false;
78 | this.playing = false;
79 | this.loaded = false;
80 | }
81 | load() {
82 | if (!this.loaded) {
83 | console.log("loading");
84 | this.audioElement.crossOrigin = "anonymous";
85 | this.audioElement.src = this.url;
86 | this.loaded = true;
87 | }
88 | }
89 | start() {
90 | if (this.loaded && !this.activated) {
91 | let playPromise = this.audioElement.play();
92 |
93 | this.track
94 | .connect(this.lowpass)
95 | .connect(this.gain)
96 | .connect(audioContext.destination);
97 |
98 | playPromise.then(() => {
99 | this.activated = true;
100 | this.playing = true;
101 | });
102 | }
103 | }
104 | play() {
105 | if (this.loaded && !this.playing && this.activated) {
106 | let playPromise = this.audioElement.play();
107 |
108 | this.track
109 | .connect(this.lowpass)
110 | .connect(this.gain)
111 | .connect(audioContext.destination);
112 |
113 | playPromise.then(() => {
114 | this.playing = true;
115 | });
116 | }
117 | }
118 | pause() {
119 | if (this.playing) {
120 | this.audioElement.pause();
121 |
122 | this.track.disconnect(this.lowpass);
123 | this.lowpass.disconnect(this.gain);
124 | this.gain.disconnect(audioContext.destination);
125 |
126 | this.playing = false;
127 | }
128 | }
129 | attenuate(ear_pos: Matter.Vector) {
130 | let delta = Vector.subtract(ear_pos, this.pos);
131 | let distance = Math.pow(Vector.length(delta), 1.5) / 3500;
132 | let safe_distance = Math.max(distance, 1);
133 | distance = Math.max(distance, 0.01);
134 | let gain = 0.7 / safe_distance;
135 | let cutoff = 2000 / Math.pow(distance, 1.5);
136 |
137 | this.gain.gain.value = Math.min(gain, 0.6);
138 | this.lowpass.frequency.value = Math.min(cutoff, 22000);
139 |
140 | if (gain > 0.05) {
141 | this.load();
142 | }
143 | if (gain < 0.1) {
144 | this.pause();
145 | } else {
146 | this.play();
147 | }
148 | }
149 | }
150 |
151 | let sources = [];
152 | // sounds.map(({ pos, url, name }) => new Source(pos, url, name));
153 |
154 | let state = getState();
155 |
156 | state.audios = sources;
157 |
158 | function start_audio() {
159 | if (audioContext.state === "suspended") {
160 | audioContext.resume();
161 | }
162 | sources.forEach((s) => s.start());
163 | }
164 |
165 | function attenuate() {
166 | let { me } = getState();
167 | let { pos } = me;
168 | sources.forEach((s) => {
169 | if (Math.random() > 0.8) {
170 | s.attenuate(pos);
171 | }
172 | });
173 | }
174 | export { start_audio, attenuate, Source };
175 |
--------------------------------------------------------------------------------
/src/camera.tsx:
--------------------------------------------------------------------------------
1 | import * as Vector from "@graph-ts/vector2";
2 |
3 | import { getState } from "./state";
4 | import { topSpeed } from "./movement";
5 |
6 | // the 0 is weird.
7 | let zoom = window.innerWidth <= 600 ? 0.6 : 0.0;
8 |
9 | window.addEventListener("resize", () => {
10 | zoom = window.innerWidth <= 600 ? 0.6 : 0.0;
11 | });
12 |
13 | function updateCamera(elapsedTicks: number) {
14 | let state = getState();
15 | const { me, camera, frame, center } = state;
16 | let { pos } = me;
17 |
18 | // unfortunately this line makes no sense to me:
19 | pos = Vector.subtract(pos, Vector.multiplyScalar(center, zoom));
20 |
21 | let distanceFromPos = Vector.length(Vector.subtract(pos, camera));
22 | let camera_speed = topSpeed;
23 | if (distanceFromPos < Vector.length(frame) / 20) {
24 | camera_speed = 0;
25 | }
26 | camera_speed *= distanceFromPos / (Vector.length(frame) / 6);
27 | let directionTowardsPos = Vector.normal(Vector.subtract(pos, camera));
28 | camera_speed *= elapsedTicks;
29 | camera_speed = Math.min(camera_speed, distanceFromPos);
30 | state.camera = Vector.add(
31 | camera,
32 | Vector.multiplyScalar(directionTowardsPos, camera_speed)
33 | );
34 | // state.camera = { x: 0, y: 0 };
35 | }
36 |
37 | export { updateCamera };
38 |
--------------------------------------------------------------------------------
/src/client.ts:
--------------------------------------------------------------------------------
1 | import * as Y from "yjs";
2 | import { WebsocketProvider } from "y-websocket";
3 |
4 | import { getState } from "./state";
5 | import { AgentLayout, EntityLayout } from "./types";
6 |
7 | import { nrandom, distance } from "./utils";
8 | // import { v4 as uuidv4 } from "uuid";
9 |
10 | export function setEditCode(editCode: string) {
11 | localStorage.setItem("code:" + window.location.pathname, editCode);
12 | }
13 | export function getEditCode() {
14 | return localStorage.getItem("code:" + window.location.pathname);
15 | }
16 |
17 | const ydoc = new Y.Doc();
18 | const yMapEnts = ydoc.getMap("entities");
19 | // observers are called after each transaction
20 | yMapEnts.observe((event) => {
21 | let data = Object.values(ydoc.toJSON().entities);
22 | let state = getState();
23 |
24 | state.entities = data as EntityLayout[];
25 | state.entities = state.entities.sort((a, b) => a.iid - b.iid);
26 | });
27 |
28 | const roomname = `walky-space-${window.location.pathname}`;
29 |
30 | const urlParams = new URLSearchParams(window.location.search);
31 | const editCode = urlParams.get("code");
32 |
33 | const yProvider = new WebsocketProvider(
34 | `wss://${window.location.hostname}`,
35 | roomname,
36 | ydoc,
37 | { params: { authToken: getEditCode() || editCode || "" } }
38 | );
39 |
40 | const awareness = yProvider.awareness;
41 | const myYId = awareness.clientID;
42 |
43 | // You can observe when a user updates their awareness information
44 | awareness.on("change", (_changes: any) => {
45 | // todo be more selective
46 | const newStates = awareness.getStates();
47 | let agents = Array.from(newStates.values())
48 | .map((e) => e.agent)
49 | .filter((e) => e);
50 |
51 | processAgents(agents);
52 | });
53 |
54 | function processAgents(agents: AgentLayout[]) {
55 | let state = getState();
56 |
57 | let agentsMap: { [uuid: string]: AgentLayout } = {};
58 | state.agents.forEach((a) => {
59 | agentsMap[a.uuid] = a;
60 | });
61 |
62 | state.agents = agents.map((a) => {
63 | let pos = agentsMap[a.uuid]?.pos || a.pos;
64 | if (distance(a.target, a.pos) < 1) {
65 | pos = a.pos;
66 | }
67 | return {
68 | ...a,
69 | pos,
70 | };
71 | });
72 | }
73 | let lastJSON = "";
74 | function sendUpdate() {
75 | let newJSON = JSON.stringify(getState().me);
76 | if (lastJSON !== newJSON) {
77 | awareness.setLocalStateField("agent", getState().me);
78 | lastJSON = newJSON;
79 | }
80 | }
81 |
82 | function sendEntityUpdate(i_uuid: string) {
83 | const { entities } = getState();
84 |
85 | let ent = entities.find(({ uuid }) => uuid === i_uuid);
86 | if (!ent) {
87 | console.log("bad entity update: " + i_uuid);
88 | return;
89 | }
90 |
91 | yMapEnts.set(i_uuid, ent);
92 | }
93 |
94 | function sendEntityDelete(uuid: string) {
95 | console.log("deleting: " + uuid);
96 | yMapEnts.delete(uuid);
97 | }
98 |
99 | export { sendUpdate, sendEntityDelete, sendEntityUpdate };
100 |
--------------------------------------------------------------------------------
/src/entity.css:
--------------------------------------------------------------------------------
1 | .draggable {
2 | pointer-events: initial;
3 | transition: filter 300ms ease-in-out;
4 | }
5 | .draggable.selected {
6 | }
7 |
8 | .draggable.selected.move {
9 | /* border: 1px blue dashed; */
10 | /* filter: drop-shadow(0px 10px 15px rgba(15, 15, 15, 0.281))
11 | drop-shadow(0px 0px 1px white); */
12 |
13 | /* filter: drop-shadow(8px 16px 0px rgba(15, 15, 15, 0.281)); */
14 | transition: filter 100ms;
15 | }
16 |
17 | .handle-container {
18 | border: 1px solid rgba(0, 0, 0, 0.15);
19 | position: absolute;
20 | z-index: 10000;
21 | display: block;
22 | user-select: none;
23 | margin: 0;
24 | pointer-events: none;
25 | }
26 |
27 | .draggable:hover + .handle-container {
28 | }
29 | .handle-container:hover {
30 | }
31 | .handle-container.move {
32 | filter: drop-shadow(2px 4px 0px rgba(15, 15, 15, 0.281));
33 | transition: filter 100ms;
34 | }
35 | .handle-container button {
36 | pointer-events: all;
37 |
38 | max-width: 50%;
39 | max-height: 50%;
40 | width: 18px;
41 | height: 18px;
42 | background-color: transparent;
43 | border: none;
44 | padding: 0;
45 | margin: 0;
46 | }
47 | .handle-container svg {
48 | stroke: black;
49 | fill: rgba(255, 255, 255, 0.5);
50 | width: 100%;
51 | height: 100%;
52 | }
53 | .duplicate {
54 | position: absolute;
55 |
56 | left: 0;
57 | top: 0;
58 | transform: translate(-50%, -50%);
59 |
60 | width: 25px !important;
61 | height: 25px !important;
62 | display: none;
63 | }
64 | .duplicate:hover,
65 | .duplicate.active {
66 | filter: drop-shadow(2px 2px 0px rgba(0, 128, 0, 0.596));
67 | /* background-color: rgba(32, 52, 236, 0.705); */
68 | }
69 |
70 | .x {
71 | right: 0;
72 | top: 0;
73 | transform: translate(50%, -50%);
74 | position: absolute;
75 | filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.5))
76 | drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.5))
77 | drop-shadow(-1px 1px 1px rgba(255, 255, 255, 0.5))
78 | drop-shadow(1px -1px 1px rgba(255, 255, 255, 0.5));
79 | }
80 |
81 | .x:hover,
82 | .x.active {
83 | filter: drop-shadow(2px 2px 2px red)
84 | drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.5))
85 | drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.5))
86 | drop-shadow(-1px 1px 1px rgba(255, 255, 255, 0.5))
87 | drop-shadow(1px -1px 1px rgba(255, 255, 255, 0.5));
88 | }
89 |
90 | .draggable {
91 | margin: 0;
92 | touch-action: manipulation;
93 | }
94 |
95 | @media screen and (max-width: 600px) {
96 | .handle-container .tool {
97 | zoom: 2;
98 | }
99 | }
100 |
101 | .resize-handle {
102 | position: absolute;
103 | width: 18px;
104 | height: 18px;
105 | border: 1px solid black;
106 | box-sizing: border-box;
107 | z-index: 1000000;
108 | background-color: white;
109 | transform: translate(-50%, -50%);
110 | display: block;
111 | user-select: none;
112 | margin: 0;
113 | pointer-events: all;
114 | right: -18px;
115 | bottom: -18px;
116 | border-radius: 100%;
117 | cursor: grabbing;
118 | }
119 |
120 | textarea {
121 | font-size: 2rem;
122 | padding: 0.5rem;
123 | border: none;
124 | white-space: pre;
125 | overflow: hidden;
126 | background: transparent;
127 | }
128 | textarea:focus {
129 | /* outline: 0; */
130 | /* border: .1px solid rgb(00, 0, 255,.4) */
131 | }
132 | textarea::-webkit-resizer {
133 | display: none;
134 | }
135 | .locked {
136 | pointer-events: none;
137 | }
138 |
139 | textarea,
140 | h1 {
141 | text-shadow: -1px -1px 0 rgb(245, 245, 245), 1px -1px 0 rgb(245, 245, 245),
142 | -1px 1px 0 rgb(245, 245, 245), 1px 1px 0 rgb(245, 245, 245);
143 | }
144 |
--------------------------------------------------------------------------------
/src/hooks.ts:
--------------------------------------------------------------------------------
1 | import { useState, useRef, useEffect } from "react";
2 |
3 | export function usePrevious(value) {
4 | const ref = useRef();
5 | useEffect(() => {
6 | ref.current = value;
7 | }, [value]);
8 | return ref.current;
9 | }
10 |
11 | // returns true when input has been truthy for n milliseconds
12 | export function useDelayedGate(inputValue: boolean, delayMs = 300) {
13 | const isInputTruthy = !!inputValue;
14 | const wasInputTruthy = usePrevious(isInputTruthy);
15 |
16 | const [output, setOutput] = useState(isInputTruthy);
17 |
18 | const disabledTimeout = useRef(null);
19 | // Clear timeout on unmount.
20 | useEffect(
21 | () => () => {
22 | setOutput(false);
23 | clearTimeout(disabledTimeout.current);
24 | },
25 | []
26 | );
27 | useEffect(() => {
28 | // rising edge (slow)
29 | if (isInputTruthy) {
30 | disabledTimeout.current = setTimeout(() => {
31 | setOutput(true);
32 | }, delayMs);
33 | } else {
34 | // falling edge (immediate)
35 | setOutput(false);
36 | }
37 | return () => {
38 | clearTimeout(disabledTimeout.current);
39 | };
40 | // maybe this logic could be cleaner if we returned a useEffect callback here?
41 | }, [delayMs, isInputTruthy, wasInputTruthy]);
42 | return output;
43 | }
44 |
--------------------------------------------------------------------------------
/src/imageUpload.ts:
--------------------------------------------------------------------------------
1 | import "./tools.css";
2 |
3 | import * as Vector from "@graph-ts/vector2";
4 | import { getState } from "./state";
5 |
6 | import "regenerator-runtime/runtime";
7 |
8 | import { readAndCompressImage } from "browser-image-resizer";
9 | import { sendEntityUpdate } from "./client";
10 | import { EntityLayout } from "./types";
11 |
12 | document.onpaste = function (event) {
13 | const items = event?.clipboardData?.items ?? [];
14 | for (let index in items) {
15 | const item = items[index];
16 | if (item.kind === "file") {
17 | const blob = item.getAsFile();
18 | if (!blob) return;
19 | const reader = new FileReader();
20 | reader.onload = function () {
21 | uploadImage(blob);
22 | }; // data url!
23 | reader.readAsDataURL(blob);
24 | }
25 | }
26 | };
27 |
28 | document.body.addEventListener("drop", async (e) => {
29 | e.stopPropagation();
30 | e.preventDefault();
31 | if (!e.dataTransfer) {
32 | return;
33 | }
34 | let html = e.dataTransfer.getData("text/html");
35 | let regexp = /src="(.*?)"/g;
36 |
37 | let matches = html.matchAll(regexp);
38 | for (const match of matches) {
39 | console.log(match);
40 | if (match[1].startsWith("data:image")) {
41 | uploadImageDataUrl(match[1]);
42 | } else {
43 | uploadImageUrl(match[1]);
44 | }
45 | }
46 |
47 | let files = Array.from(e.dataTransfer.files);
48 |
49 | console.log(files);
50 | files.forEach(uploadImage);
51 | });
52 | document.body.addEventListener("dragenter", (event) => {
53 | event.stopPropagation();
54 | event.preventDefault();
55 | });
56 | document.body.addEventListener("dragover", (event) => {
57 | event.stopPropagation();
58 | event.preventDefault();
59 | event.dataTransfer.dropEffect = "copy";
60 | });
61 | // ondragover="event.stopPropagation(); event.preventDefault(); handleDragOver(event);"
62 | // ondrop="event.stopPropagation(); event.preventDefault(); handleDrop(event);">
63 |
64 | const getHeightAndWidthFromDataUrl = (dataURL: string) =>
65 | new Promise((resolve) => {
66 | const img = new Image();
67 | img.onload = () => {
68 | resolve({
69 | height: img.height,
70 | width: img.width,
71 | });
72 | };
73 | img.src = dataURL;
74 | });
75 | function createEnt(data: {
76 | size: { x: number; y: number };
77 | type: any;
78 | value: any;
79 | position: any;
80 | }) {
81 | let { entities } = getState();
82 |
83 | console.log(data);
84 | let maxDimension = Math.max(data.size.x, data.size.y);
85 | let scale = 300 / maxDimension;
86 | let newEnt: EntityLayout = {
87 | type: data.type,
88 | value: data.value,
89 | size: data.size,
90 | uuid: Math.random().toString().slice(2, 7),
91 | pos: data.position,
92 | scale,
93 | rotation: 0.0,
94 | iid: entities.map((e) => e.iid).reduce((a, b) => Math.max(a, b), 1) + 1,
95 | };
96 | let state = getState();
97 |
98 | state.entities.push(newEnt);
99 | state.entities = state.entities.sort((a, b) => a.iid - b.iid);
100 | sendEntityUpdate(newEnt.uuid);
101 | }
102 | function uploadImageUrl(url: string, i = 0) {
103 | const formData = new FormData();
104 |
105 | let { me } = getState();
106 | formData.append(
107 | "position",
108 | JSON.stringify(
109 | Vector.add(
110 | me.pos,
111 | Vector.multiplyScalar(
112 | {
113 | x: 30,
114 | y: 30,
115 | },
116 | i
117 | )
118 | )
119 | )
120 | );
121 |
122 | formData.append("owner", me.uuid);
123 | formData.append("name", url);
124 | formData.append("url", url);
125 |
126 | fetch("/upload", {
127 | method: "POST",
128 | body: formData,
129 | })
130 | .then((bod) => {
131 | return bod.json();
132 | })
133 | .then(createEnt)
134 | .catch((error) => {
135 | console.error(error);
136 | });
137 | }
138 |
139 | function dataURLtoBlob(dataurl: string) {
140 | var arr = dataurl.split(","),
141 | mime = arr[0].match(/:(.*?);/)[1],
142 | bstr = atob(arr[1]),
143 | n = bstr.length,
144 | u8arr = new Uint8Array(n);
145 | while (n--) {
146 | u8arr[n] = bstr.charCodeAt(n);
147 | }
148 | return new Blob([u8arr], { type: mime });
149 | }
150 |
151 | async function uploadImageDataUrl(fileAsDataURL: string, i = 0) {
152 | const dimensions = (await getHeightAndWidthFromDataUrl(fileAsDataURL)) as any;
153 | const formData = new FormData();
154 | formData.append("image-upload", dataURLtoBlob(fileAsDataURL));
155 |
156 | let { me } = getState();
157 | formData.append(
158 | "position",
159 | JSON.stringify(
160 | Vector.add(
161 | me.pos,
162 | Vector.multiplyScalar(
163 | {
164 | x: 30,
165 | y: 30,
166 | },
167 | i
168 | )
169 | )
170 | )
171 | );
172 | formData.append(
173 | "size",
174 | JSON.stringify({
175 | x: dimensions.width,
176 | y: dimensions.height,
177 | })
178 | );
179 | formData.append("owner", me.uuid);
180 | formData.append("name", "dataurl.jpg");
181 |
182 | fetch("/upload", {
183 | method: "POST",
184 | body: formData,
185 | })
186 | .then((bod) => {
187 | return bod.json();
188 | })
189 | .then(createEnt)
190 | .catch((error) => {
191 | console.error(error);
192 | });
193 | }
194 |
195 | async function uploadPreparedImage(file: File, i = 0) {
196 | const fileAsDataURL = window.URL.createObjectURL(file);
197 | const dimensions = (await getHeightAndWidthFromDataUrl(fileAsDataURL)) as any;
198 | const formData = new FormData();
199 | formData.append("image-upload", file);
200 |
201 | let { me } = getState();
202 | formData.append(
203 | "position",
204 | JSON.stringify(
205 | Vector.add(
206 | me.pos,
207 | Vector.multiplyScalar(
208 | {
209 | x: 30,
210 | y: 30,
211 | },
212 | i
213 | )
214 | )
215 | )
216 | );
217 | formData.append(
218 | "size",
219 | JSON.stringify({
220 | x: dimensions.width,
221 | y: dimensions.height,
222 | })
223 | );
224 | formData.append("owner", me.uuid);
225 | formData.append("name", file.name);
226 |
227 | fetch("/upload", {
228 | method: "POST",
229 | body: formData,
230 | })
231 | .then((bod) => {
232 | return bod.json();
233 | })
234 | .then(createEnt)
235 | .catch((error) => {
236 | console.error(error);
237 | });
238 | }
239 |
240 | const config = {
241 | quality: 0.8,
242 | maxWidth: 1000,
243 | maxHeight: 1000,
244 | autoRotate: true,
245 | debug: false,
246 | mimeType: "image/png",
247 | };
248 |
249 | async function uploadImage(file: File, i = 0) {
250 | if (file.type === "image/gif") {
251 | uploadPreparedImage(file, i);
252 | return;
253 | }
254 | readAndCompressImage(file, { ...config, mimeType: file.type })
255 | .then(async (resizedImage: File) => {
256 | uploadPreparedImage(resizedImage, i);
257 | })
258 | .catch((e: any) => console.error(e));
259 | }
260 | export { uploadImage };
261 |
--------------------------------------------------------------------------------
/src/input.ts:
--------------------------------------------------------------------------------
1 | import { getState } from "./state";
2 | import * as Vector from "@graph-ts/vector2";
3 | // import { start_audio } from "./audio";
4 |
5 | window.zoom = window.innerWidth <= 600 ? 0.6 : 1.0;
6 | window.addEventListener("resize", () => {
7 | window.zoom = window.innerWidth <= 600 ? 0.6 : 1.0;
8 | });
9 |
10 | function convertTarget(t: Matter.Vector) {
11 | const { camera, center } = getState();
12 | // let zCamera = Vector.divideScalar(camera, zoom);
13 | let zCenter = center;
14 | let zPos = Vector.divideScalar(t, window.zoom);
15 | return Vector.subtract(Vector.add(zPos, camera), zCenter);
16 | }
17 | function deconvertTarget(t: Matter.Vector) {
18 | const { camera, center } = getState();
19 | // let zCamera = Vector.divideScalar(camera, zoom);
20 | let zCenter = center;
21 | // let zPos = Vector.multiplyScalar(t, zoom);
22 | return Vector.multiplyScalar(
23 | Vector.add(Vector.subtract(t, camera), zCenter),
24 | window.zoom
25 | );
26 | }
27 | let mouseDown = false;
28 | function startInput() {
29 | window.addEventListener("stop", () => {
30 | state.me.target = state.me.pos;
31 | });
32 | window.addEventListener("click", (event) => {
33 | // event.preventDefault();
34 | // start_audio();
35 |
36 | if (window.dragging) return;
37 |
38 | let state = getState();
39 | let eventPos = { x: event.pageX, y: event.pageY };
40 | state.me.target = convertTarget(eventPos);
41 | });
42 | window.addEventListener("mousedown", (event) => {
43 | mouseDown = true;
44 | });
45 | window.addEventListener("mouseup", (event) => {
46 | mouseDown = false;
47 | });
48 | window.addEventListener("mouseleave", (event) => {
49 | mouseDown = false;
50 | });
51 | window.addEventListener("mousemove", (event) => {
52 | // event.preventDefault();
53 | if (!mouseDown || window.dragging) return;
54 | let state = getState();
55 | let eventPos = { x: event.pageX, y: event.pageY };
56 | state.me.target = convertTarget(eventPos);
57 | });
58 |
59 | window.addEventListener("touchmove", (event) => {
60 | if (window.dragging) return;
61 |
62 | event.preventDefault();
63 |
64 | let state = getState();
65 |
66 | const touches = event.targetTouches;
67 | for (let i = 0; i < touches.length; i++) {
68 | state.me.target = convertTarget({
69 | x: touches[i].pageX,
70 | y: touches[i].pageY,
71 | });
72 | }
73 | });
74 |
75 | window.addEventListener("touchstart", (event) => {
76 | // event.preventDefault();
77 | let state = getState();
78 |
79 | const touches = event.targetTouches;
80 |
81 | for (let i = 0; i < touches.length; i++) {
82 | state.me.target = convertTarget({
83 | x: touches[i].pageX,
84 | y: touches[i].pageY,
85 | });
86 | }
87 | });
88 |
89 | let left = false;
90 | let up = false;
91 | let right = false;
92 | let down = false;
93 | let keypoll: number;
94 | window.addEventListener("wheel", (event) => {
95 | let velocity = { x: event.deltaX, y: event.deltaY };
96 | let state = getState();
97 | let keyTarget = Vector.add(
98 | state.me.pos,
99 | Vector.multiplyScalar(velocity,.5 )
100 | );
101 | state.me.target = keyTarget;
102 | });
103 | window.addEventListener("keydown", (event) => {
104 | let { key, keyCode, target } = event;
105 | if (event?.target?.tagName === "TEXTAREA") {
106 | return;
107 | }
108 | let { me } = getState();
109 | if (key == "Control") {
110 | console.log("focusing");
111 | document.getElementById("fake-input").focus();
112 | }
113 | if (event.getModifierState("Control") || event.getModifierState("Meta")) {
114 | return;
115 | }
116 | if (!me.word) {
117 | me.word = "";
118 | }
119 | if (key.length == 1) {
120 | if (me.word.length >= 3) {
121 | me.word = me.word.slice(1);
122 | }
123 | me.word += key;
124 | }
125 | if (key == "Backspace" || key == "Delete") {
126 | event.preventDefault();
127 | me.word = me.word.slice(0, me.word.length - 1);
128 | }
129 | if (keyCode === 37) {
130 | left = true;
131 | }
132 | if (keyCode === 38) {
133 | up = true;
134 | }
135 | if (keyCode === 39) {
136 | right = true;
137 | }
138 | if (keyCode === 40) {
139 | down = true;
140 | }
141 | keypoll = window.setInterval(pollKeys, 16);
142 | });
143 | window.addEventListener("keyup", (event) => {
144 | let { keyCode } = event;
145 | if (keyCode === 37) {
146 | left = false;
147 | }
148 | if (keyCode === 38) {
149 | up = false;
150 | }
151 | if (keyCode === 39) {
152 | right = false;
153 | }
154 | if (keyCode === 40) {
155 | down = false;
156 | }
157 |
158 | if (!(left || right || up || down)) {
159 | let state = getState();
160 | state.me.target = state.me.pos;
161 | }
162 | });
163 | function pollKeys() {
164 | if (!(left || right || up || down)) {
165 | window.clearInterval(keypoll);
166 | return;
167 | }
168 | let velocity = { x: 0, y: 0 };
169 | if (left) {
170 | velocity.x -= 1.0;
171 | }
172 | if (right) {
173 | velocity.x += 1.0;
174 | }
175 | if (up) {
176 | velocity.y -= 1.0;
177 | }
178 | if (down) {
179 | velocity.y += 1.0;
180 | }
181 |
182 | let state = getState();
183 | let keyTarget = Vector.add(
184 | state.me.pos,
185 | Vector.multiplyScalar(velocity, 25)
186 | );
187 | state.me.target = keyTarget;
188 | }
189 | }
190 |
191 | export { startInput, convertTarget, deconvertTarget };
192 |
--------------------------------------------------------------------------------
/src/movement.ts:
--------------------------------------------------------------------------------
1 | import * as Vector from "@graph-ts/vector2";
2 | import { AgentLayout } from "./types";
3 |
4 | let topSpeed = 3;
5 | let epsilon = 1;
6 | function updateAgent(agent: AgentLayout, elapsed: number) {
7 | agent.timeIdle += elapsed;
8 | const { target, pos } = agent;
9 | let velocity = { x: 0, y: 0 };
10 | let heading = Vector.normal(Vector.subtract(target, pos));
11 | let distance = Vector.length(Vector.subtract(pos, target));
12 | let speed = Math.min(topSpeed, distance);
13 | if (distance < epsilon) {
14 | speed = 0;
15 | }
16 | let dT = Math.min(speed * elapsed, distance);
17 | velocity = Vector.multiplyScalar(heading, dT);
18 |
19 | agent.pos = Vector.add(pos, velocity);
20 | // this might not be consistent
21 | if (velocity.x < -0.1) {
22 | agent.facing = true;
23 | }
24 | if (velocity.x > 0.1) {
25 | agent.facing = false;
26 | }
27 |
28 | agent.animation = "stand";
29 | if (Math.abs(velocity.x) > 0.02 || Math.abs(velocity.y) > 0.02) {
30 | agent.animation = "move";
31 | agent.timeIdle = 0;
32 | }
33 | if (agent.timeIdle > 3000) {
34 | agent.animation = "sit";
35 | }
36 | return agent;
37 | }
38 |
39 | export { updateAgent, topSpeed };
40 |
--------------------------------------------------------------------------------
/src/render.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import walk from "./../assets/ear_walk.gif";
3 | // import walk from "./../assets/walk1.gif";
4 | // import stand from "./../assets/stand1.gif";
5 | import stand from "./../assets/ear_stand.gif";
6 | import sit from "./../assets/ear_sit.gif";
7 | import spiral from "./../assets/arch.png";
8 | import shadow from "./../assets/arch-shadow.png";
9 | // import flower from "./../assets/flower.png";
10 | // import bubble from "./../assets/bubble.png";
11 | import * as Vector from "@graph-ts/vector2";
12 | import Entity from "./Entity";
13 | import { getState } from "./state";
14 | import { AgentLayout } from "./types";
15 | import { convertTarget } from "./input";
16 | import { useAnimationFrame } from "./useAnimationFrame";
17 |
18 | // let zoom = window.innerWidth <= 600 ? 1.0 : 1.0;
19 | // window.addEventListener("resize", () => {
20 | // zoom = window.innerWidth <= 600 ? 1.0 : 1.0;
21 | // });
22 |
23 | // let animations = {
24 | // stand: flower,
25 | // move: flower,
26 | // sit: flower
27 | // };
28 | let animations = {
29 | stand: stand,
30 | move: walk,
31 | sit: sit,
32 | };
33 | function renderAgent(agent: AgentLayout, i: number) {
34 | let { camera, center, me } = getState();
35 | if (agent.uuid == me.uuid) {
36 | agent = me;
37 | }
38 | let { pos, animation, facing, color, word } = agent;
39 |
40 | let newsrc = animations[animation] || walk;
41 | let relPos = Vector.add(Vector.subtract(pos, camera), center);
42 |
43 | return (
44 | Claim this space?
99 |100 | {window.location.hostname + window.location.pathname} is 101 | currently open to all edits. You may claim this space to prevent 102 | anyone from editing without the code. 103 |
104 |It's important to save this code, so we can send it to your email.
105 | 106 |107 | If you set the code to be empty, everyone will be able to edit. 108 |
109 |110 | 111 | setCode(e.target.value)} 115 | spellCheck={false} 116 | > 117 | 118 | setEmail(e.target.value)} 124 | > 125 | 126 | setOpt(!opt)} 129 | checked={opt} 130 | > 131 | submit()} 135 | > 136 | 137 | {success && ( 138 |
Space Claimed! Write down this code: {code} .Refresh to edit!
139 | )} 140 |67 | {word} 68 |
69 |
127 | {/*
156 |
128 |
*/}
136 |
137 | {entities.map(
138 | ({ value, type, pos, size, rotation, scale, uuid }, i) => {
139 | // let relPos = Vector.add(Vector.subtract(pos, camera), center);
140 | return (
141 | Welcome!
129 |Walky.space is under construction.
130 | 131 |You're invited to share, organize, and prune.
132 | 133 |Tap + hold to select. Be kind, please ☺
134 |- Max
135 |
115 | {locked ? (
116 |
246 | ,
248 | document.getElementById("ui")
249 | );
250 | }
251 |
252 | export { startUI };
253 |
--------------------------------------------------------------------------------
/src/useAnimationFrame.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export function useAnimationFrame(callback: {
4 | (deltaTime: number): void;
5 | (arg0: number): void;
6 | }) {
7 | // Use useRef for mutable variables that we want to persist
8 | // without triggering a re-render on their change
9 | const requestRef = React.useRef();
10 | const previousTimeRef = React.useRef();
11 |
12 | const animate = (time: number | undefined) => {
13 | if (previousTimeRef.current != undefined) {
14 | const deltaTime = time - previousTimeRef.current;
15 | callback(deltaTime);
16 | }
17 | previousTimeRef.current = time;
18 | requestRef.current = requestAnimationFrame(animate);
19 | };
20 |
21 | React.useEffect(() => {
22 | requestRef.current = requestAnimationFrame(animate);
23 | return () => cancelAnimationFrame(requestRef.current);
24 | }, []); // Make sure the effect runs only once
25 | }
26 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | import * as Vector from "@graph-ts/vector2";
2 |
3 | function nrandom(s = 1) {
4 | return (Math.random() - 0.5) * s;
5 | }
6 | function randomVec(r = 1) {
7 | let ang = Math.random() * 2 * Math.PI,
8 | hyp = (Math.sqrt(Math.random()) * r) / 2,
9 | adj = Math.cos(ang) * hyp,
10 | opp = Math.sin(ang) * hyp;
11 | return { x: adj, y: opp };
12 | }
13 | function distance(a: Matter.Vector, b: Matter.Vector) {
14 | return Vector.length(Vector.subtract(a, b));
15 | }
16 | function clamp(num: number, min: number, max: number) {
17 | return Math.min(Math.max(num, min), max);
18 | }
19 |
20 | export { nrandom, randomVec, distance, clamp };
21 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "commonjs",
5 | "strict": true,
6 | "jsx": "react",
7 | "rootDir": "./src",
8 | "incremental": true,
9 | "experimentalDecorators": true,
10 | "lib": ["dom", "es2015"]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
{
120 | e.stopPropagation();
121 | setLocked(false);
122 | }}
123 | />
124 | ) : (
125 |
241 | function startUI() {
242 | console.log("starting");
243 |
244 | ReactDOM.render(
245 | {
129 | e.stopPropagation();
130 | setLocked(true);
131 | }}
132 | />
133 | )}
134 | {!locked && !editCode && (
135 | 
{
209 | e.stopPropagation();
210 | let state = getState();
211 | state.me.target = state.me.pos;
212 | fakeInput.focus();
213 | }}
214 | />
215 |
216 |
217 | );
218 | }
219 |
220 | // {infoOpen && (
221 | // This space is locked, you need an edit link!
136 | )} 137 | imageUpload(e)} 144 | /> 145 | { 146 |
153 | {" "}
154 | 
160 | 
161 | {claimed == false && (
162 | 
{
166 | setOpen(!open);
167 | e.stopPropagation();
168 | }}
169 | >
170 | )}
171 | {claimed == true && accessStatus === "editor" && (
172 |
202 | }
203 |
204 | { 175 | let editLink = 176 | window.location.host + 177 | window.location.pathname + 178 | "?code=" + 179 | getEditCode(); 180 | 181 | navigator.clipboard 182 | .writeText(editLink) 183 | .then( 184 | function () { 185 | setCopiedState(true); 186 | }, 187 | function () { 188 | setCopiedState(false); 189 | } 190 | ) 191 | .finally(() => { 192 | window.setTimeout(() => { 193 | setCopiedState(false); 194 | }, 3000); 195 | }); 196 | }} 197 | > 198 | {copiedState ? "Edit Link Copied! ✓" : "Copy Edit Link"} 199 |
200 | )} 201 |
222 | // ![ok]()
{
226 | // e.stopPropagation();
227 |
228 | // this.setState({ infoOpen: false });
229 | // }}
230 | // src={X}
231 | // >
232 | //
237 | //
239 | // )}
240 | // 233 | // Please post images of the{" "} 234 | // sky. 235 | //
236 | //237 | //
(updated 9/12)
238 | //