antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

various changes and update to utopia-ui@3.0.0-alpha.39

Browse Source
This commit is contained in:
Anton 2023-12-29 09:48:15 +01:00
parent dcfe3dfd0d
commit 9bc18f830c
11 changed files with 348 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -9,6 +9,7 @@
<title>Utopia Game</title> <title>Utopia Game</title>
<meta property="og:title" content="Utopia Game" /> <meta property="og:title" content="Utopia Game" />
<meta property="og:description" content="Utopia is a cooperative real life manifestation game" /> <meta property="og:description" content="Utopia is a cooperative real life manifestation game" />
<meta property="og:image" content="/3markers-globe.svg" />
</head> </head>
<body> <body>

132
package-lock.json generated
View File

@ -8,13 +8,13 @@
"name": "utopia-game", "name": "utopia-game",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@directus/sdk": "^11.0.3", "@directus/sdk": "^12.0.1",
"@heroicons/react": "^2.0.17", "@heroicons/react": "^2.0.17",
"@types/geojson": "^7946.0.10", "@types/geojson": "^7946.0.10",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.11.2", "react-router-dom": "^6.11.2",
"utopia-ui": "^3.0.0-alpha.27" "utopia-ui": "^3.0.0-alpha.39"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
@ -121,12 +121,12 @@
} }
}, },
"node_modules/@babel/generator": { "node_modules/@babel/generator": {
"version": "7.21.5", "version": "7.23.0",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.5.tgz", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
"integrity": "sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==", "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/types": "^7.21.5", "@babel/types": "^7.23.0",
"@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/gen-mapping": "^0.3.2",
"@jridgewell/trace-mapping": "^0.3.17", "@jridgewell/trace-mapping": "^0.3.17",
"jsesc": "^2.5.1" "jsesc": "^2.5.1"
@ -259,22 +259,22 @@
} }
}, },
"node_modules/@babel/helper-environment-visitor": { "node_modules/@babel/helper-environment-visitor": {
"version": "7.22.5", "version": "7.22.20",
"resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
"integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==", "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@babel/helper-function-name": { "node_modules/@babel/helper-function-name": {
"version": "7.22.5", "version": "7.23.0",
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
"integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==", "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/template": "^7.22.5", "@babel/template": "^7.22.15",
"@babel/types": "^7.22.5" "@babel/types": "^7.23.0"
}, },
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
@ -436,9 +436,9 @@
} }
}, },
"node_modules/@babel/helper-validator-identifier": { "node_modules/@babel/helper-validator-identifier": {
"version": "7.22.5", "version": "7.22.20",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
"integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==", "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
@ -496,9 +496,9 @@
} }
}, },
"node_modules/@babel/parser": { "node_modules/@babel/parser": {
"version": "7.22.14", "version": "7.23.0",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.14.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
"integrity": "sha512-1KucTHgOvaw/LzCVrEOAyXkr9rQlp0A1HiHRYnSUE9dmb8PvPW7o5sscg+5169r54n3vGlbx6GevTE/Iw/P3AQ==", "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
"dev": true, "dev": true,
"bin": { "bin": {
"parser": "bin/babel-parser.js" "parser": "bin/babel-parser.js"
@ -1724,33 +1724,33 @@
} }
}, },
"node_modules/@babel/template": { "node_modules/@babel/template": {
"version": "7.22.5", "version": "7.22.15",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
"integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==", "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/code-frame": "^7.22.5", "@babel/code-frame": "^7.22.13",
"@babel/parser": "^7.22.5", "@babel/parser": "^7.22.15",
"@babel/types": "^7.22.5" "@babel/types": "^7.22.15"
}, },
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@babel/traverse": { "node_modules/@babel/traverse": {
"version": "7.21.5", "version": "7.23.2",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.5.tgz", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
"integrity": "sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==", "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/code-frame": "^7.21.4", "@babel/code-frame": "^7.22.13",
"@babel/generator": "^7.21.5", "@babel/generator": "^7.23.0",
"@babel/helper-environment-visitor": "^7.21.5", "@babel/helper-environment-visitor": "^7.22.20",
"@babel/helper-function-name": "^7.21.0", "@babel/helper-function-name": "^7.23.0",
"@babel/helper-hoist-variables": "^7.18.6", "@babel/helper-hoist-variables": "^7.22.5",
"@babel/helper-split-export-declaration": "^7.18.6", "@babel/helper-split-export-declaration": "^7.22.6",
"@babel/parser": "^7.21.5", "@babel/parser": "^7.23.0",
"@babel/types": "^7.21.5", "@babel/types": "^7.23.0",
"debug": "^4.1.0", "debug": "^4.1.0",
"globals": "^11.1.0" "globals": "^11.1.0"
}, },
@ -1759,13 +1759,13 @@
} }
}, },
"node_modules/@babel/types": { "node_modules/@babel/types": {
"version": "7.22.11", "version": "7.23.0",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
"integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==", "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/helper-string-parser": "^7.22.5", "@babel/helper-string-parser": "^7.22.5",
"@babel/helper-validator-identifier": "^7.22.5", "@babel/helper-validator-identifier": "^7.22.20",
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
}, },
"engines": { "engines": {
@ -1773,9 +1773,9 @@
} }
}, },
"node_modules/@directus/sdk": { "node_modules/@directus/sdk": {
"version": "11.0.3", "version": "12.0.1",
"resolved": "https://registry.npmjs.org/@directus/sdk/-/sdk-11.0.3.tgz", "resolved": "https://registry.npmjs.org/@directus/sdk/-/sdk-12.0.1.tgz",
"integrity": "sha512-fHvHFcDhl8AY5quRP4cgLMHTU6F4c4ynmMpXRsi8dnSd38mIvciFyYmOVOh34Wp2N+a1YNYpXPU+NsHkfIheHw==", "integrity": "sha512-AOTOfoJpnaWxQnSRwZeyNZPju7AJgoifZ3jKNqKmZHdJHdKLrx9BTL5KXIL5vBUEpRsHGxecarsk2OH9L3pnlw==",
"engines": { "engines": {
"node": ">=18.0.0" "node": ">=18.0.0"
}, },
@ -2400,9 +2400,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/offscreencanvas": { "node_modules/@types/offscreencanvas": {
"version": "2019.7.1", "version": "2019.7.3",
"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.1.tgz", "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
"integrity": "sha512-+HSrJgjBW77ALieQdMJvXhRZUIRN1597L+BKvsyeiIlHHERnqjcuOLyodK3auJ3Y3zRezNKtKAhuQWYJfEgFHQ==" "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A=="
}, },
"node_modules/@types/prop-types": { "node_modules/@types/prop-types": {
"version": "15.7.5", "version": "15.7.5",
@ -5470,6 +5470,15 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-colorful": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
"integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "18.2.0", "version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -5747,9 +5756,9 @@
} }
}, },
"node_modules/rollup": { "node_modules/rollup": {
"version": "3.26.3", "version": "3.29.4",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.3.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
"integrity": "sha512-7Tin0C8l86TkpcMtXvQu6saWH93nhG3dGQ1/+l5V2TDMceTxO7kDiK6GzbfLWNNxqJXm591PcEZUozZm51ogwQ==", "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
"dev": true, "dev": true,
"bin": { "bin": {
"rollup": "dist/bin/rollup" "rollup": "dist/bin/rollup"
@ -6336,9 +6345,9 @@
} }
}, },
"node_modules/tw-elements": { "node_modules/tw-elements": {
"version": "1.0.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0.tgz", "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.1.0.tgz",
"integrity": "sha512-pD2bA1bTGzvigU79dz4pGvO207CCOpzhwlxzb7hswx40SMMkJISOkoDxU2ot3OQ7LTZM5GwuLDkZ+dquK0wdYQ==", "integrity": "sha512-IUr9YW2l99oTVZxuVjQg6rpuCpo6VZqbaKGYmZUNVVsoSVU/ljPpkJAY2Pn/morlXwKPhP9MTPNQMlWosqHL4w==",
"dependencies": { "dependencies": {
"@popperjs/core": "^2.6.0", "@popperjs/core": "^2.6.0",
"chart.js": "^3.7.1", "chart.js": "^3.7.1",
@ -6698,14 +6707,15 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
}, },
"node_modules/utopia-ui": { "node_modules/utopia-ui": {
"version": "3.0.0-alpha.27", "version": "3.0.0-alpha.39",
"resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.27.tgz", "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.39.tgz",
"integrity": "sha512-RpCPXgGt55MTvwiqcnqU/r0KTcvnT74s86ziIxOHWrn/2BgXmgS9ikdjj2q1KAa+/9cFubWkibWhDSQoZL60zg==", "integrity": "sha512-O/uO/qGPjuFOL5VCzeeDyo09SXezAGZMtEP9XXHNSOwNxJcY0z7bjN0ECuhyjHgIKsEBo8lJ6y6VKWKEvpsu/Q==",
"dependencies": { "dependencies": {
"@heroicons/react": "^2.0.17", "@heroicons/react": "^2.0.17",
"@types/offscreencanvas": "^2019.7.1", "@types/offscreencanvas": "^2019.7.1",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react-colorful": "^5.6.1",
"react-image-crop": "^10.1.8", "react-image-crop": "^10.1.8",
"react-leaflet": "^4.2.1", "react-leaflet": "^4.2.1",
"react-leaflet-cluster": "^2.1.0", "react-leaflet-cluster": "^2.1.0",
@ -6721,14 +6731,14 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "4.4.4", "version": "4.5.1",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.4.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
"integrity": "sha512-4mvsTxjkveWrKDJI70QmelfVqTm+ihFAb6+xf4sjEU2TmUCTlVX87tmg/QooPEMQb/lM9qGHT99ebqPziEd3wg==", "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"esbuild": "^0.18.10", "esbuild": "^0.18.10",
"postcss": "^8.4.25", "postcss": "^8.4.27",
"rollup": "^3.25.2" "rollup": "^3.27.1"
}, },
"bin": { "bin": {
"vite": "bin/vite.js" "vite": "bin/vite.js"

4
package.json
View File

@ -10,13 +10,13 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@directus/sdk": "^11.0.3", "@directus/sdk": "^12.0.1",
"@heroicons/react": "^2.0.17", "@heroicons/react": "^2.0.17",
"@types/geojson": "^7946.0.10", "@types/geojson": "^7946.0.10",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.11.2", "react-router-dom": "^6.11.2",
"utopia-ui": "^3.0.0-alpha.27" "utopia-ui": "^3.0.0-alpha.39"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",

5
src/App.tsx
View File

@ -8,6 +8,7 @@ import { userApi } from './api/userApi'
import Projects from './pages/Projects' import Projects from './pages/Projects'
import { ProjectView } from './pages/ProjectView' import { ProjectView } from './pages/ProjectView'
import { assetsApi } from './api/assetsApi' import { assetsApi } from './api/assetsApi'
import { ModalContent } from './ModalContent'
@ -19,7 +20,9 @@ function App() {
<AuthProvider userApi={new userApi}> <AuthProvider userApi={new userApi}>
<AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName="Utopia Game"> <AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName="Utopia Game">
<Modal/> <Modal>
<ModalContent/>
</Modal>
<SideBar routes={routes} bottomRoutes={bottomRoutes}/> <SideBar routes={routes} bottomRoutes={bottomRoutes}/>
<Content> <Content>
<Quests /> <Quests />

125
src/ModalContent.tsx Normal file
View File

@ -0,0 +1,125 @@
import { useEffect, useState } from 'react'
type ChapterProps = {
clickAction?: () => void
}
export function Welcome1({ clickAction }: ChapterProps) {
return (
<>
<h3 className="tw-font-bold tw-text-lg">Welcome, glad you are here!</h3>
<img className="tw-float-right tw-w-32 tw-m-2" src="/earth.svg"></img>
<p className="tw-py-3">
In the 21st century, humanity is at a special point in its history.
</p>
<p className="tw-py-1">
On the one hand, the people of Planet Earth are facing a multitude of fundamental crises.
</p>
<p className="tw-py-1">
On the other hand, we have all the knowledge and technology to heal the planet and live in harmony with Mother Earth. </p>
<div className="tw-modal-action">
<label className="tw-btn" onClick={() => clickAction!()}>Next</label>
</div>
</>
)
}
export function Welcome2({ clickAction }: ChapterProps) {
return (
<>
<h3 className="tw-font-bold tw-text-lg"> Hypnosis and Disillusion </h3>
<p className="tw-py-3">
Most people are still stuck in old ways of thinking and living. </p>
<img className="tw-float-right tw-w-32 tw-mx-4 tw-my-2" src="/fear2.svg"></img>
<p className="tw-py-1">
Hypnotised, they sit in front of screens in concrete blocks, flooded and disillusioned by irrelevant information.
</p>
<p className="tw-py-1">
From an early age, they are trained to do alienated work and consume unhealthy and meaningless products.
</p>
<div className="tw-modal-action">
<label className="tw-btn" onClick={() => clickAction!()}>next</label>
</div>
</>
)
}
export function Welcome3({ clickAction }: ChapterProps) {
return (
<>
<h3 className="tw-font-bold tw-text-lg">But Consciousness is rising </h3>
<p className="tw-py-3">
More and more people are waking up to what's really happening. </p>
<p className="tw-py-1">
They are in the process of understanding the potential that is within themselves and within the whole mankind.
</p>
<img className="tw-float-left tw-w-32 tw-mx-4" src="/camp3.svg"></img>
<p className="tw-py-1">
Starting to reconnect with our Mother Earth and beginning to question things that long times have been taken for granted.
</p>
<div className="tw-modal-action">
<label className="tw-btn" onClick={() => clickAction!()}>next</label>
</div>
</>
)
}
export function Welcome4({ clickAction }: ChapterProps) {
return (
<>
<h3 className="tw-font-bold tw-text-lg"> Gemeinsam erschaffen wir Strukturen </h3>
<ul className='tw-flex-row tw-pl-4 tw-mt-4'>
<li>🥕 Essen & Trinken</li>
<li>🏡 Wohn- & Lebensraum</li>
<li>💬 Kommunikation</li>
<li>💡 Energie</li>
<li>🚐 Mobilität</li>
</ul>
<div className="tw-modal-action">
<button className="tw-btn tw-btn-neutral" onClick={() => clickAction!()}>Ich mach mit</button>
</div>
</>
)
}
const close = () => {
window.my_modal_3.close();
}
export const ModalContent = () => {
const [chapter, setChapter] = useState<number>(1);
//const setQuestsOpen = useSetQuestOpen()
const ActiveChapter = () => {
switch (chapter) {
case 1:
return <Welcome1 clickAction={() => { setChapter(2) }} />
case 2:
return <Welcome2 clickAction={() => { setChapter(3) }} />
case 3:
return <Welcome3 clickAction={() => {
close();
setTimeout(() => {
// setQuestsOpen(true);
setChapter(1);
}, 1000);
}} />
default: return <></>
};
};
return (
<ActiveChapter/>
)
}

25
src/api/directus.ts
View File

@ -1,8 +1,6 @@
import { createDirectus, rest, authentication, AuthenticationData, AuthenticationStorage } from '@directus/sdk'; import { createDirectus, rest, authentication, AuthenticationData, AuthenticationStorage } from '@directus/sdk';
import { Point } from 'geojson' import { Point } from 'geojson'
export type Place = { export type Place = {
id: string; id: string;
name: string; name: string;
@ -33,9 +31,27 @@ export type Place = {
end: Date; end: Date;
}; };
export type Update = {
id: string;
text: string;
position?: Point;
user_created: string;
date_created: string;
}
type CustomUserFields = {
position: Point;
};
export type MyCollections = { export type MyCollections = {
places: Place; places: Place[];
events: Event; events: Event[];
updates: Update[];
tags: Tag[];
projects: Project[];
directus_users: CustomUserFields[];
}; };
@ -64,7 +80,6 @@ export type Place = {
} }
export const directusClient = createDirectus<MyCollections>("https://api.utopia-lab.org/") export const directusClient = createDirectus<MyCollections>("https://api.utopia-lab.org/")
.with(authentication())
.with(rest()) .with(rest())
.with(authentication('json', { // add this if you want to use authentication, json is important, it's type of your authentication usage, here JWT .with(authentication('json', { // add this if you want to use authentication, json is important, it's type of your authentication usage, here JWT
storage: authLocalStorage(), // here set the storage previously created storage: authLocalStorage(), // here set the storage previously created

2
src/api/itemsApi.ts
View File

@ -14,7 +14,7 @@ export class itemsApi<T> implements ItemsApi<T>{
async getItems() { async getItems() {
try { try {
return await directusClient.request(readItems(this.collectionName as never, { limit: 500 })); return await directusClient.request(readItems(this.collectionName as never, { fields: ['*', { user_created: ['*'] }], limit: 500 }));
} catch (error: any) { } catch (error: any) {
console.log(error); console.log(error);
if (error.errors[0]?.message) if (error.errors[0]?.message)

53
src/api/updatesApi.ts Normal file
View File

@ -0,0 +1,53 @@
import { readItems,updateItem} from '@directus/sdk';
import { directusClient } from './directus';
import { Point } from 'geojson';
export class updatesApi<T>{
collectionName: string;
constructor(collectionName: string) {
this.collectionName = collectionName;
}
async getItems() {
try {
return await directusClient.request(readItems("updates",{
fields: ['*', { user_created: ['*'] }],
}));
} catch (error: any) {
console.log(error);
if (error.errors[0]?.message)
throw error.errors[0].message;
else throw error;
}
}
//setting geoposition
async createItem(item: T & { id?: string, position?: Point }) {
try {
return await directusClient.request(updateItem("updates",item.id!,{position: item.position}))
} catch (error: any) {
console.log(error);
if (error.errors[0]?.message)
throw error.errors[0].message;
else throw error;
}
}
//setting geoposition to null
async deleteItem(id: string) {
try {
return await directusClient.request(updateItem("updates",id,{position: undefined}))
} catch (error: any) {
console.log(error);
if (error.errors[0].message)
throw error.errors[0].message;
else throw error;
}
}
}

41
src/pages/MapContainer.tsx
View File

@ -1,5 +1,5 @@
import { UtopiaMap, Tags, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupStartEndInput, TextView, StartEndView, Permissions } from 'utopia-ui' import { UtopiaMap, Tags, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupTextInput, PopupStartEndInput, TextView, StartEndView, Permissions } from 'utopia-ui'
import { itemsApi } from '../api/itemsApi' import { itemsApi } from '../api/itemsApi';
import { permissionsApi } from '../api/permissionsApi'; import { permissionsApi } from '../api/permissionsApi';
import { Place, Event, Tag } from '../api/directus'; import { Place, Event, Tag } from '../api/directus';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -11,6 +11,7 @@ function MapContainer() {
const [eventsApi, setEventsApi] = useState<itemsApi<Event>>(); const [eventsApi, setEventsApi] = useState<itemsApi<Event>>();
const [tagsApi, setTagsApi] = useState<itemsApi<Tag>>(); const [tagsApi, setTagsApi] = useState<itemsApi<Tag>>();
const [permissionsApiInstance, setPermissionsApiInstance] = useState<permissionsApi>(); const [permissionsApiInstance, setPermissionsApiInstance] = useState<permissionsApi>();
const [updatesApiInstance, setUpdatesApiInstance] = useState<itemsApi<Place>>();
@ -21,15 +22,9 @@ function MapContainer() {
setEventsApi(new itemsApi<Event>('events')); setEventsApi(new itemsApi<Event>('events'));
setTagsApi(new itemsApi<Tag>('tags')); setTagsApi(new itemsApi<Tag>('tags'));
setPermissionsApiInstance(new permissionsApi()); setPermissionsApiInstance(new permissionsApi());
setUpdatesApiInstance(new itemsApi('updates'));
}, []); }, []);
return ( return (
<UtopiaMap zoom={5} height='calc(100dvh - 64px)' width="100%"> <UtopiaMap zoom={5} height='calc(100dvh - 64px)' width="100%">
@ -42,9 +37,9 @@ function MapContainer() {
markerShape='square' markerShape='square'
markerDefaultColor='#777' markerDefaultColor='#777'
// data={events} // data={events}
api={eventsApi} api={eventsApi}>
>
<ItemForm> <ItemForm>
<PopupTextInput dataField='name' placeholder='Name'></PopupTextInput>
<PopupStartEndInput></PopupStartEndInput> <PopupStartEndInput></PopupStartEndInput>
<PopupTextAreaInput dataField='text' placeholder={'Test'} style="tw-h-40"></PopupTextAreaInput> <PopupTextAreaInput dataField='text' placeholder={'Test'} style="tw-h-40"></PopupTextAreaInput>
</ItemForm> </ItemForm>
@ -52,7 +47,6 @@ function MapContainer() {
<StartEndView></StartEndView> <StartEndView></StartEndView>
<TextView></TextView> <TextView></TextView>
</ItemView> </ItemView>
</Layer> </Layer>
<Layer <Layer
name='places' name='places'
@ -63,8 +57,27 @@ function MapContainer() {
markerShape='circle' markerShape='circle'
markerDefaultColor='#777' markerDefaultColor='#777'
// data={places} // data={places}
api={placesApi} api={placesApi} />
/> <Layer
name='people'
menuIcon='UserIcon'
menuText='place your profile on the map'
menuColor='#C62828'
markerIcon='user'
markerShape='square'
markerDefaultColor='#777'
itemTitleField='user_created.first_name'
itemAvatarField='user_created.avatar'
itemColorField='user_created.color'
// data={places}
api={updatesApiInstance}>
<ItemView>
<TextView></TextView>
</ItemView>
<ItemForm>
<PopupTextAreaInput dataField='text' placeholder={'Test'} style="tw-h-40"></PopupTextAreaInput>
</ItemForm>
</Layer>
<Tags api={tagsApi}></Tags> <Tags api={tagsApi}></Tags>
<Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions> <Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions>
</UtopiaMap> </UtopiaMap>

42
src/pages/ProfileView.tsx Normal file
View File

@ -0,0 +1,42 @@
import { useState, useEffect } from "react";
import { itemsApi } from "../api/itemsApi";
import { Project } from '../api/directus'
import { useLocation } from "react-router-dom";
import { CardPage } from "utopia-ui";
export const ProjectView = () => {
const [projectsApi, setProjectsApi] = useState<itemsApi<Project>>();
const [project, setProject] = useState<Project>();
let location = useLocation();
const loadProject = async () => {
const project: unknown = await projectsApi?.getItem(location.pathname.split("/")[2]);
setProject(project as Project);
}
useEffect(() => {
setProjectsApi(new itemsApi<Project>('projects'));
}, [])
useEffect(() => {
loadProject();
}, [projectsApi])
return (
<CardPage title={project?.name || ""} parent={{name: 'Projects',url: "/projects"}}>
{project &&
<>
<img className='h-36' src={`https://api.utopia-lab.org/assets/${project?.picture} : ''}`}></img>
<p className='font-bold text-sm mb-2 mt-2'>{project?.subname}</p>
<p className='text-sm mb-2'>{project?.text}</p>
</>
}
</CardPage>
)
}

7
src/pages/Projects.tsx
View File

@ -1,4 +1,4 @@
import { TitleCard, useAuth } from 'utopia-ui' import { TitleCard } from 'utopia-ui'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { itemsApi } from '../api/itemsApi' import { itemsApi } from '../api/itemsApi'
@ -16,7 +16,6 @@ export default function Projects() {
const loadProjects = async () => { const loadProjects = async () => {
const projects = await projectsApi?.getItems(); const projects = await projectsApi?.getItems();
setProjects(projects as Project[]); setProjects(projects as Project[]);
} }
useEffect(() => { useEffect(() => {
@ -28,8 +27,6 @@ export default function Projects() {
loadProjects(); loadProjects();
}, [projectsApi]) }, [projectsApi])
const {token,isAuthenticated} = useAuth();
return ( return (
<main className="flex-1 overflow-y-auto pt-2 px-6 bg-base-200 min-w-80 flex justify-center" > <main className="flex-1 overflow-y-auto pt-2 px-6 bg-base-200 min-w-80 flex justify-center" >
<div className=' w-full xl:max-w-6xl'> <div className=' w-full xl:max-w-6xl'>
@ -56,7 +53,7 @@ const {token,isAuthenticated} = useAuth();
return ( return (
<Link key={k} to={'/projects/' + i.id}> <Link key={k} to={'/projects/' + i.id}>
<TitleCard className={"!h-96"} title={i.name} topMargin={"mt-2"}> <TitleCard className={"!h-96"} title={i.name} topMargin={"mt-2"}>
<img className='h-36' src={`https://api.utopia-lab.org/assets/${i.picture}${isAuthenticated ? `?access_token=${token}` : ''}`}></img> <img className='h-36' src={`https://api.utopia-lab.org/assets/${i.picture}`}></img>
<p className='font-bold text-sm mb-2 mt-2'>{i.subname}</p> <p className='font-bold text-sm mb-2 mt-2'>{i.subname}</p>
<p className='text-sm mb-2'>{i.text}</p> <p className='text-sm mb-2'>{i.text}</p>