Added 404 handler, changed page db update.

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "immersive",
       "version": "0.0.8-17",
+      "license": "MIT",
       "dependencies": {
         "@auth0/auth0-react": "^2.2.4",
         "@babylonjs/core": "^7.21.5",
@@ -17,6 +18,8 @@
         "@babylonjs/materials": "^7.21.5",
         "@babylonjs/serializers": "^7.21.5",
         "@emotion/react": "^11.13.0",
+        "@giphy/js-fetch-api": "^5.6.0",
+        "@giphy/react-components": "^9.6.0",
         "@mantine/core": "7.12.0",
         "@mantine/form": "7.12.0",
         "@mantine/hooks": "7.12.0",
@@ -328,6 +331,21 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
       "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "peer": true,
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+      "peer": true
+    },
     "node_modules/@emotion/memoize": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
@@ -853,6 +871,64 @@
         "node": ">=6"
       }
     },
+    "node_modules/@giphy/colors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@giphy/colors/-/colors-1.0.1.tgz",
+      "integrity": "sha512-CMUY2UR8Ujl/wTRVjwu9spss6Cf2qkQNATKfoWCTWQp7CXdSfPWUDepp0c0/F0n7lYphLFvD9qzOC4NSdBt7nw=="
+    },
+    "node_modules/@giphy/js-analytics": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@giphy/js-analytics/-/js-analytics-5.0.0.tgz",
+      "integrity": "sha512-jBZG6OqyMWB6meLi8Sz3iLplXYnhkbj+DJhS4ChmRX8Y6UA7i5dbbsUN/So1s7tTjhZOvu0rxA6rWJE73S1FvQ==",
+      "dependencies": {
+        "@giphy/js-types": "*",
+        "@giphy/js-util": "*",
+        "append-query": "^2.1.0",
+        "throttle-debounce": "^3.0.1"
+      }
+    },
+    "node_modules/@giphy/js-fetch-api": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@giphy/js-fetch-api/-/js-fetch-api-5.6.0.tgz",
+      "integrity": "sha512-hKZ7XZWGSzR29ISW1f6LWeVZ7GgWwhVuZprPMj3nrhHT6RkmkKghIP/yXKpWyhfTyAVgjeNGq0T/fAmGNKRvGQ==",
+      "dependencies": {
+        "@giphy/js-types": "*",
+        "@giphy/js-util": "*"
+      }
+    },
+    "node_modules/@giphy/js-types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@giphy/js-types/-/js-types-5.1.0.tgz",
+      "integrity": "sha512-BZYCDtYNRR7cUWkbDLB4wmm3qmWMsVCQdUiBNOfmZ3yAazCgygKJoDI/5Rq4CK5MBaOc5LVdF8viC2WtoBdaPA=="
+    },
+    "node_modules/@giphy/js-util": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@giphy/js-util/-/js-util-5.1.0.tgz",
+      "integrity": "sha512-CvmeJi9H6tj0jscL7xpRXBhNuTgkQkXo7PQZK+UbWMR3NmJ07JibYxrw02bLmBZHxw+4F0cGeZL3zf8u5d+o5A==",
+      "dependencies": {
+        "@giphy/js-types": "*",
+        "uuid": "^9.0.0"
+      }
+    },
+    "node_modules/@giphy/react-components": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/@giphy/react-components/-/react-components-9.6.0.tgz",
+      "integrity": "sha512-rVJI05F98PdHLVg6dfQBtR7JxiWbyK3/TvZzp7w+uy9rDuKG066YIJom1YwtaCnTNkPVLG8KByL7hK6HomTwRQ==",
+      "dependencies": {
+        "@giphy/colors": "*",
+        "@giphy/js-analytics": "*",
+        "@giphy/js-fetch-api": "*",
+        "@giphy/js-types": "*",
+        "@giphy/js-util": "*",
+        "intersection-observer": "^0.12.2",
+        "react-use": "17.4.0",
+        "throttle-debounce": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": "16.10.2 - 18",
+        "styled-components": ">= 5"
+      }
+    },
     "node_modules/@jest/schemas": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
@@ -1323,6 +1399,11 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "node_modules/@types/ms": {
       "version": "0.7.34",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
@@ -1388,6 +1469,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
+      "peer": true
+    },
     "node_modules/@vitest/expect": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
@@ -1457,6 +1544,11 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -1518,6 +1610,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/append-query": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/append-query/-/append-query-2.1.1.tgz",
+      "integrity": "sha512-adm0E8o1o7ay+HbkWvGIpNNeciLB/rxJ0heThHuzSSVq5zcdQ5/ZubFnUoY0imFmk6gZVghSpwoubLVtwi9EHQ==",
+      "dependencies": {
+        "extend": "^3.0.2"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -1669,6 +1769,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/canvas-hypertxt": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/canvas-hypertxt/-/canvas-hypertxt-1.0.3.tgz",
@@ -1784,6 +1893,14 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -1818,6 +1935,54 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "peer": true,
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1963,6 +2128,14 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/es5-ext": {
       "version": "0.10.64",
       "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
@@ -2128,6 +2301,11 @@
         "type": "^2.7.2"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2149,6 +2327,16 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "node_modules/fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -2395,6 +2583,11 @@
         "node": ">=16.17.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw=="
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -2448,6 +2641,19 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz",
+      "integrity": "sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==",
+      "dependencies": {
+        "css-in-js-utils": "^3.1.0"
+      }
+    },
+    "node_modules/intersection-observer": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz",
+      "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -2552,6 +2758,11 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "node_modules/js-crypto-aes": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/js-crypto-aes/-/js-crypto-aes-1.0.6.tgz",
@@ -2834,6 +3045,11 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
     "node_modules/meaningful-string": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/meaningful-string/-/meaningful-string-1.4.0.tgz",
@@ -2915,11 +3131,34 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/nano-css": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.6.2.tgz",
+      "integrity": "sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "css-tree": "^1.1.2",
+        "csstype": "^3.1.2",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^7.0.1",
+        "rtl-css-js": "^1.16.1",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.3.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/nano-css/node_modules/stylis": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz",
+      "integrity": "sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now=="
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3171,6 +3410,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "peer": true
+    },
     "node_modules/pouchdb": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/pouchdb/-/pouchdb-8.0.1.tgz",
@@ -3625,6 +3870,40 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "peerDependencies": {
+        "react": "*",
+        "tslib": "*"
+      }
+    },
+    "node_modules/react-use": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz",
+      "integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==",
+      "dependencies": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.3.1",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "1.1.14",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
@@ -3651,6 +3930,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -3746,6 +4030,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -3797,6 +4089,31 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+      "engines": {
+        "node": ">=6.9"
+      }
+    },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "peer": true
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3857,7 +4174,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3878,12 +4194,52 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
       "dev": true
     },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "node_modules/stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "dependencies": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stacktrace-gps/node_modules/source-map": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+      "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "dependencies": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "node_modules/std-env": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
@@ -3925,6 +4281,80 @@
       "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
       "dev": true
     },
+    "node_modules/styled-components": {
+      "version": "6.1.12",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.12.tgz",
+      "integrity": "sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==",
+      "peer": true,
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+      "peer": true
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+      "peer": true
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "peer": true
+    },
     "node_modules/stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
@@ -3957,6 +4387,14 @@
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
     },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/through2": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
@@ -4031,6 +4469,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
@@ -4050,6 +4493,11 @@
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
+    "node_modules/ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+    },
     "node_modules/tslib": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",

package.json

@@ -30,6 +30,8 @@
     "@mantine/core": "7.12.0",
     "@mantine/form": "7.12.0",
     "@mantine/hooks": "7.12.0",
+    "@giphy/react-components": "^9.6.0",
+    "@giphy/js-fetch-api": "^5.6.0",
     "@maptiler/client": "1.8.1",
     "@picovoice/cobra-web": "^2.0.3",
     "@picovoice/eagle-web": "^1.0.0",

src/diagram/diagramObject.ts

@@ -341,6 +341,5 @@ export class DiagramObject {
         this._fromPosition = this._fromMesh.absolutePosition.length();
         curve.setParent(this._baseTransform);
         curve.setEnabled(true);
-        console.log('done');
     }
 }

src/diagram/functions/buildEntityActionManager.ts

@@ -39,7 +39,6 @@ export function buildEntityActionManager(controllerObservable: Observable<Contro
                         highlightLayer.addMesh(newMesh, (mesh.sourceMesh.material as StandardMaterial).diffuseColor.multiplyByFloats(1.5, 1.5, 1.5));
                         highlightLayer.setEffectIntensity(newMesh, 1.2);
                         mesh.metadata.highlight = newMesh;
-                        console.log(newMesh);
                     }
                 } catch (e) {
                     logger.error(e);

src/diagram/types/diagramEntity.ts

@@ -50,7 +50,7 @@ export type DiagramEntity = {
     position?: { x: number, y: number, z: number };
     rotation?: { x: number, y: number, z: number };
     template?: string;
-    type?: DiagramEntityType;
+    type: 'Entity'
     text?: string;
     scale?: { x: number, y: number, z: number };
     parent?: string;

src/integration/database/pouchData.ts

@@ -12,21 +12,9 @@ export class PouchData {
     private _diagramManager: DiagramManager;
     private _logger: Logger = log.getLogger('PouchData');
 
-    constructor() {
+    constructor(dbname: string) {
-
-    }
-
-    public async setDb(dbname: string) {
-        if (this._db) {
-            await this._db.close();
-        }
         this._db = new PouchDB(dbname);
-        const all = await this._db.allDocs({include_docs: true});
-        for (const dbEntity of all.rows) {
-            this.onDBEntityUpdateObservable.notifyObservers(dbEntity.doc, DiagramEventObserverMask.FROM_DB);
-        }
     }
-
     public setDiagramManager(diagramManager: DiagramManager) {
         this._diagramManager = diagramManager;
         diagramManager.onDiagramEventObservable.add((evt) => {
@@ -55,7 +43,7 @@ export class PouchData {
 
         this.onDBEntityUpdateObservable.add((evt) => {
             this._logger.debug(evt);
-            if (evt.id != 'metadata' && evt.type != 'user') {
+            if (evt.id != 'metadata') {
                 diagramManager.onDiagramEventObservable.notifyObservers({
                     type: DiagramEventType.ADD,
                     entity: evt

src/react/instructions/firstVisitVr.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import {Modal} from "@mantine/core";
+import {useDisclosure} from "@mantine/hooks";
+
+const firstVisit = !(window.localStorage.getItem('firstVisit') === 'false');
+export default function FirstVisitVr() {
+    const [opened, {close}] =
+        useDisclosure(firstVisit,
+            {
+                onClose: () => {
+                    window.localStorage.setItem('firstVisit', 'false')
+                }
+            });
+    return (
+        <Modal opened={opened} onClose={close}>
+            Welcome
+        </Modal>
+    )
+}

src/react/pageHeader.tsx

@@ -3,10 +3,6 @@ import React from "react";
 import {Link} from "react-router-dom";
 
 export default function PageHeader() {
-    const onClick = (e) => {
-        e.preventDefault();
-        console.log(e);
-    }
     return (
         <AppShell.Header p={10}>
             <Group justify="space-between">
@@ -22,7 +18,7 @@ export default function PageHeader() {
                                 underline="hover">Documentation</Anchor>
                         <Anchor component={Link} key="pricing" to="/pricing" p={5} c="myColor" bg="none"
                                 underline="hover">Pricing</Anchor>
-                        <Anchor component={Link} key="vrexperience" to="/db/local" p={5} c="myColor" bg="none"
+                        <Anchor component={Link} key="vrexperience" to="/db/public/local" p={5} c="myColor" bg="none"
                                 underline="hover">VR Experience</Anchor>
                     </Group>
                     <Burger hiddenFrom="sm"/>

src/react/pages/configModal.tsx

@@ -0,0 +1,37 @@
+import {Group, Modal, NumberInput, SegmentedControl, Slider, Switch} from "@mantine/core";
+import {useState} from "react";
+
+const locationSnaps = [
+    {value: ".01", label: '1cm'},
+    {value: ".05", label: '5cm'},
+    {value: ".1", label: '10cm'},
+    {value: ".5", label: '50cm'},
+    {value: "1", label: '1m'},
+]
+
+export default function ConfigModal({configOpened, closeConfig}) {
+    const [locationSnap, setLocationSnap] = useState(.1);
+    const [locationSnapEnabled, setLocationSnapEnabled] = useState(true);
+    return (
+        <Modal onClose={closeConfig} opened={configOpened}>
+            <h1>Configuration</h1>
+            <Group>
+                <label>Location Snap</label>
+                <Switch checked={locationSnapEnabled} onChange={(e) => {
+                    setLocationSnapEnabled(e.currentTarget.checked)
+                }}/>
+                <SegmentedControl key='stepper' data={locationSnaps} color='blue' value={locationSnap.toFixed(2)}
+                                  onChange={(e) => {
+                                      setLocationSnap(parseFloat(e));
+                                  }}/>
+                <NumberInput hideControls allowNegative={false} key='value'
+                             w={64} step={.01} value={locationSnap.toFixed(2)} decimalScale={2} min={.01} max={1}
+
+                />
+            </Group>
+
+            <Slider defaultValue={.1} label='Object Rotation Snap' max={1} min={.01}/>
+        </Modal>
+    )
+
+}

src/react/pages/createDiagramModal.tsx

@@ -2,8 +2,10 @@ import {Anchor, Button, Checkbox, Group, Modal, Pill, Stack, Textarea, TextInput
 import {usePouch} from "use-pouchdb";
 import {useState} from "react";
 import {v4} from "uuid";
+import log from "loglevel";
 
 export default function CreateDiagramModal({createOpened, closeCreate}) {
+    const logger = log.getLogger('createDiagramModal');
     const db = usePouch();
     const [diagram, setDiagram] = useState({
         name: '',
@@ -17,7 +19,7 @@ export default function CreateDiagramModal({createOpened, closeCreate}) {
         try {
             doc = await db.get('directory')
         } catch (err) {
-            console.error(err);
+            logger.warn('cannot find directory', err);
         }
         const id = 'diagram-' + v4();
         const newDiagram = {...diagram, _id: id, type: 'diagram'};
@@ -29,7 +31,7 @@ export default function CreateDiagramModal({createOpened, closeCreate}) {
             } else {
                 doc.diagrams = [newDiagram];
             }
-            console.log(doc);
+            logger.debug('new directory', doc);
             await db.put(doc);
         }
         closeCreate();

src/react/pages/editDataModal.tsx

@@ -1,17 +1,11 @@
+import {Provider} from "use-pouchdb";
+
 export default function EditDataModal({currentDb}) {
     if (currentDb) {
-
         return (
-            <div>
+            <Provider pouchdb={currentDb}>
-                <h1>Edit Data</h1>
+
-                <form>
+            </Provider>
-                    <label htmlFor="name">Name</label>
-                    <input type="text" id="name" name="name"/>
-                    <label htmlFor="value">Value</label>
-                    <input type="text" id="value" name="value"/>
-                    <button type="submit">Save</button>
-                </form>
-            </div>
         )
     } else {
         return <h1>Nothing Selected</h1>

src/react/pages/manageDiagramsModal.tsx

@@ -1,22 +1,26 @@
 import {Button, Card, Container, Group, Modal, Paper, SimpleGrid, Stack} from "@mantine/core";
 import React from "react";
 import {useDoc, usePouch} from "use-pouchdb";
-import {IconPencilBolt, IconTrash} from "@tabler/icons-react";
+import {IconTrash} from "@tabler/icons-react";
+import {Link} from "react-router-dom";
+import log from "loglevel";
 
-export default function ManageDiagramsModal({setDbName, openCreate, manageOpened, closeManage}) {
+export default function ManageDiagramsModal({openCreate, manageOpened, closeManage}) {
+    const logger = log.getLogger('manageDiagramsModal');
     const {doc: diagram, error} = useDoc('directory', {}, {_id: 'directory', diagrams: []});
-    const [selected, setSelected] = React.useState(null);
     const db = usePouch();
     if (error) {
-        console.error('Error getting diagram document');
+
         if (error.status === 404) {
-            console.log('Creating new diagram document');
+            logger.info('Creating new diagram document');
             db.put({_id: 'directory', diagrams: []});
+        } else {
+            logger.error('Error getting diagram document', error);
         }
         return <></>;
     }
     const diagrams = diagram.diagrams || [];
-    console.log(diagrams);
+
     const cards = diagrams.map((diagram) => {
         return (
             <Card key={diagram._id}>
@@ -30,11 +34,9 @@ export default function ManageDiagramsModal({setDbName, openCreate, manageOpened
                 </Card.Section>
                 <Card.Section>
                     <Group justify="space-evenly">
-                        <Button
+                        <Button component={Link} key="examples" to={"/db/public/" + diagram._id} p={5} c="myColor"
-                            onClick={() => {
+                                bg="none">Select</Button>
-                                setDbName(diagram._id)
+
-                            }}
-                            leftSection={<IconPencilBolt size={16}/>} size="xs">Select</Button>
                         <Button bg="red" size="xs"><IconTrash size={16}/></Button>
                     </Group>
                 </Card.Section>

src/react/pages/notFound.tsx

@@ -0,0 +1,52 @@
+import PageTemplate from "../pageTemplate";
+import {GiphyFetch} from "@giphy/js-fetch-api";
+import {useEffect, useState} from "react";
+import {Gif} from "@giphy/react-components";
+import {Anchor, Center} from "@mantine/core";
+import {Link} from "react-router-dom";
+
+const gf = new GiphyFetch('J5elM5Q9k2xlqbSgt9nxdaVMOpRDgspL');
+
+// React Component
+
+
+export default function NotFound() {
+    const [gif, setGif] = useState(null);
+    const renderImage = () => {
+        return gif ? <Gif gif={gif} width={200}/> : null
+    };
+    useEffect(() => {
+        gf.gif('l2JJKs3I69qfaQleE').then((gif) => {
+            console.log(gif);
+            setGif(gif.data);
+        });
+    }, [])
+    if (!gif) {
+        return (
+            <PageTemplate>
+                <div>
+                    <h1>404 Not Found</h1>
+
+                    <p>Sorry, the page you are looking for does not exist.</p>
+                </div>
+            </PageTemplate>
+        )
+    }
+    return (
+        <PageTemplate>
+
+            <h1>This is not the page you're looking for</h1>
+            <Center>
+                <Anchor component={Link} to="/">
+
+
+                    <Gif noLink={true} backgroundColor='#000000' gif={gif} width={800}/>
+
+                </Anchor>
+            </Center>
+
+            <Center></Center>
+
+        </PageTemplate>
+    );
+}

src/react/pages/vrExperience.tsx

@@ -6,45 +6,68 @@ import {IconStar} from "@tabler/icons-react";
 import VrMenuItem from "../components/vrMenuItem";
 import CreateDiagramModal from "./createDiagramModal";
 import ManageDiagramsModal from "./manageDiagramsModal";
-import {useNavigate} from "react-router-dom";
+import {useNavigate, useParams} from "react-router-dom";
 import {useDisclosure} from "@mantine/hooks";
+import ConfigModal from "./configModal";
+import FirstVisitVr from "../instructions/firstVisitVr";
+import log from "loglevel";
 
 let vrApp: VrApp = null;
 
+const defaultCreate = window.localStorage.getItem('createOpened') === 'true';
+const defaultConfig = window.localStorage.getItem('configOpened') === 'true';
+const defaultManage = window.localStorage.getItem('manageOpened') === 'true';
 export default function VrExperience() {
-    const [createOpened, {open: openCreate, close: closeCreate}] = useDisclosure(false);
+    const logger = log.getLogger('vrExperience');
-    const [manageOpened, {open: openManage, close: closeManage}] = useDisclosure(false);
+    const params = useParams();
-    const [currentDb, setCurrentDb] = useState(null);
+    const saveState = (key, value) => {
-    const [dbName, setDbName] = useState('vr');
+        logger.debug('saving', key, value)
-    useEffect(() => {
+        window.localStorage.setItem(key, value ? 'true' : 'false');
-        if (vrApp && dbName) {
+    }
-            console.log('here');
+    const [createOpened, {open: openCreate, close: closeCreate}] =
-            console.log(dbName);
+        useDisclosure(defaultCreate,
-            try {
+            {
-                vrApp.setDb(dbName).then((db) => {
+                onOpen: () => {
-                    setCurrentDb(db);
+                    saveState('createOpened', true)
-                    console.log(db);
+                }, onClose: () => {
-                });
+                    saveState('createOpened', false)
-            } catch (err) {
+                }
-                console.log(err);
+            });
+    const [manageOpened, {open: openManage, close: closeManage}] = useDisclosure(
+        defaultManage,
+        {
+            onOpen: () => {
+                saveState('manageOpened', true)
+            }, onClose: () => {
+                saveState('manageOpened', false)
             }
-            closeManage();
+        })
+    const [configOpened, {open: openConfig, close: closeConfig}] =
+        useDisclosure(
+            defaultConfig,
+            {
+                onOpen: () => {
+                    saveState('configOpened', true)
+                }, onClose: () => {
+                    saveState('configOpened', false)
+                }
+            })
+
+    const [rerender, setRerender] = useState(0);
+    const [dbName, setDbName] = useState(params.db);
+    useEffect(() => {
+        const canvas = document.getElementById('vrCanvas');
+        if (!canvas) {
+            logger.error('no canvas');
+            return;
         }
+        if (vrApp) {
+            logger.debug('destroying vrApp');
+            vrApp.dispose();
+        }
+        vrApp = new VrApp(canvas as HTMLCanvasElement, dbName);
+        closeManage();
     }, [dbName]);
-    useEffect(() => {
-        const data = window.localStorage.getItem('createOpened');
-        if (data === 'true') {
-            openCreate();
-        }
-        navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
-            setImmersiveDisabled(!supported);
-        });
-        vrApp = new VrApp(document.getElementById('vrCanvas') as HTMLCanvasElement);
-    }, []);
-    useEffect(() => {
-        console.log('Create Opened: ', createOpened);
-        window.localStorage.setItem('createOpened', createOpened ? 'true' : 'false');
-    }, [createOpened])
 
     const [immersiveDisabled, setImmersiveDisabled] = useState(true);
     const navigate = useNavigate();
@@ -60,7 +83,7 @@ export default function VrExperience() {
     }
 
     const enterImmersive = (e) => {
-        console.log('entering immersive mode');
+        logger.info('entering immersive mode');
         e.preventDefault();
         const event = new CustomEvent('enterXr', {bubbles: true});
         window.dispatchEvent(event);
@@ -77,7 +100,7 @@ export default function VrExperience() {
             return <ManageDiagramsModal openCreate={openCreate}
                                         manageOpened={manageOpened}
                                         closeManage={closeManage}
-                                        setDbName={setDbName}/>
+            />
         } else {
             return <></>
         }
@@ -86,6 +109,8 @@ export default function VrExperience() {
     return (
         <React.StrictMode>
         <VrTemplate>
+            <FirstVisitVr/>
+            <ConfigModal closeConfig={closeConfig} configOpened={configOpened}/>
             {createModal()}
             {manageModal()}
             <Affix position={{top: 30, left: 60}}>
@@ -141,10 +166,15 @@ export default function VrExperience() {
                             label="Share"
                             onClick={null}
                             availableIcon={availableInPro()}/>
+                        <VrMenuItem
+                            tip="Configure settings for your VR experience"
+                            label="Config"
+                            onClick={openConfig}
+                            availableIcon={availableInFree()}/>
                     </Menu.Dropdown>
                 </Menu>
             </Affix>
-            <canvas id="vrCanvas" style={{width: '100%', height: '100vh'}}/>
+            <canvas id="vrCanvas" style={{zIndex: 1000, width: '100%', height: '100vh'}}/>
         </VrTemplate>
         </React.StrictMode>
     )

src/react/settings.ts

@@ -0,0 +1,20 @@
+export type AccountSettings = {
+    privateEnabled: boolean,
+    cloudEnabled: boolean,
+    maxDbCount: number,
+    maxDocCount: number,
+}
+export type GlobalSettings = {
+    user: AccountSettings,
+    free?: AccountSettings,
+    pro?: AccountSettings,
+    custom?: AccountSettings
+}
+export const settings: GlobalSettings = {
+    user: {
+        privateEnabled: false,
+        cloudEnabled: false,
+        maxDbCount: 6,
+        maxDocCount: 30,
+    }
+}

src/react/vrTemplate.tsx

@@ -6,13 +6,16 @@ import {Provider} from "use-pouchdb";
 import PouchDB from 'pouchdb';
 import {DEFAULT_DB_NAME} from "../util/constants";
 
+
 const db = new PouchDB(DEFAULT_DB_NAME);
 export default function VrTemplate(props: { children: React.ReactNode }) {
     return (
         <Provider pouchdb={db}>
             <MantineProvider defaultColorScheme="dark" theme={theme}>
                 <Container fluid={true}>
+
                     {props.children}
+
                 </Container>
             </MantineProvider>
         </Provider>

src/react/webRouter.tsx

@@ -5,6 +5,7 @@ import Documentation from "./marketing/documentation";
 import Examples from "./marketing/examples";
 import Pricing from "./marketing/pricing";
 import VrExperience from "./pages/vrExperience";
+import NotFound from "./pages/notFound";
 
 export const webRouter = createBrowserRouter([
     {
@@ -23,8 +24,14 @@ export const webRouter = createBrowserRouter([
         path: "/Pricing",
         element: (<Pricing/>)
     }, {
-        path: "/db/:db",
+        path: "/db/public/:db",
         element: (<VrExperience/>)
+    }, {
+        path: "/db/private/:db",
+        element: (<VrExperience/>)
+    }, {
+        path: "*",
+        element: (<NotFound/>)
     }
 
 ])

src/vrApp.ts

@@ -19,19 +19,18 @@ export default class VrApp {
     private logger: Logger = log.getLogger('App');
     private _canvas: HTMLCanvasElement;
     private _db: PouchData;
+    private _dbName: string;
+    private _engine: Engine | WebGPUEngine;
 
-
+    constructor(canvas: HTMLCanvasElement, dbname: string) {
-    constructor(canvas: HTMLCanvasElement) {
         this._canvas = canvas;
+        this._dbName = dbname;
+        console.log('VrApp constructor');
         this.initializeEngine().then(() => {
             this.logger.info('Engine initialized');
         });
     }
 
-    public async setDb(dbname: string) {
-        this._db.setDb(dbname);
-        return this._db;
-    }
     public async initialize(scene: Scene) {
         setMainCamera(scene);
         const spinner = new Spinner();
@@ -40,7 +39,7 @@ export default class VrApp {
         const diagramManager = new DiagramManager(diagramReadyObservable);
         diagramReadyObservable.add((ready) => {
             if (ready) {
-                const db = new PouchData();
+                const db = new PouchData(this._dbName);
                 db.setDiagramManager(diagramManager);
                 this._db = db;
             } else {
@@ -64,24 +63,29 @@ export default class VrApp {
         this.logger.info('Render loop started');
     }
 
+    public dispose() {
+        this._engine.dispose();
+        DefaultScene.Scene.dispose();
+        DefaultScene.Scene = null;
+    }
     private async initializeEngine() {
         if (!this._canvas) {
             console.error('Canvas not found');
             return;
         }
-        let engine: WebGPUEngine | Engine = null;
+        this._engine = null;
         if (webGpu) {
-            engine = new WebGPUEngine(this._canvas);
+            this._engine = new WebGPUEngine(this._canvas);
-            await (engine as WebGPUEngine).initAsync();
+            await (this._engine as WebGPUEngine).initAsync();
         } else {
-            engine = new Engine(this._canvas, true);
+            this._engine = new Engine(this._canvas, true);
         }
-        engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
+        this._engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
-        const scene = new Scene(engine);
+        const scene = new Scene(this._engine);
         DefaultScene.Scene = scene;
         scene.ambientColor = new Color3(.1, .1, .1);
         await this.initialize(scene);
-        engine.runRenderLoop(() => {
+        this._engine.runRenderLoop(() => {
             scene.render();
         });
     }