Projects and Concept

package.json

@@ -15,8 +15,7 @@
     "@types/geojson": "^7946.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.11.2",
-    "utopia-ui": "^3.0.0-alpha.14"
+    "react-router-dom": "^6.11.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
@@ -24,9 +23,13 @@
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.16",
+    "daisyui": "^3.8.0",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
+    "postcss": "^8.4.30",
+    "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
     "vite": "^4.3.2",
     "vite-plugin-pwa": "^0.16.4"

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -5,6 +5,7 @@ import MapContainer from "./pages/MapContainer"
 import './App.css'
 import Concept from './pages/Concept'
 import { userApi } from './api/userApi'
+import Projects from './pages/Projects'
 
 
 
@@ -24,6 +25,7 @@ function App() {
               <Route path="/*" element={<MapContainer />} />
               <Route path="/settings" element={<Settings />} />
               <Route path="/concept" element={<Concept/>} />
+              <Route path="/projects" element={<Projects/>} />
               <Route path="/login" element={<LoginPage/>} />
               <Route path="/signup" element={<SignupPage/>} />
             </Routes>

src/api/directus.ts

@@ -10,6 +10,14 @@ export type Place = {
     position?: Point;
   };
 
+  export type Project = {
+    id: string;
+    name: string;
+    text: string;
+    position?: Point;
+    picture: string;
+  };
+
   export type Tag = {
     id: string;
     color: string;

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/pages/Concept.tsx

@@ -4,28 +4,141 @@ import { CardPage } from "utopia-ui"
 export default function Concept() {
     return (
         <CardPage title="Concept">
-            <p>Utopia Game ist ein kooperatives Real-Life-Manifestations-Adventure-Game das Menschen zusammenbringt die gemeinsam aktiv die Welt gestalten wollen. </p>
-            <br></br>
-            <h2 className="tw-text-xl">Ziel des Spiels</h2>
-            <br></br>
-            <ul>
-                <li>1. Ein globales dezentrales Netzwerk aufspannen</li>
-                <li>2. Aufbau kollektiver Strukturen und Co-Kreation</li>
-                <li>3. Freie Entfaltung unserer individuellen und kollektiven Potentiale</li>
-            </ul>
-            <br></br>
-            <h2 className="tw-text-xl">Ablauf</h2>
-            <br></br>
-            <p>Der Spieler motiviert und angeleitet ... </p>
-            <br></br>
-            <ul>
-                <li>1. sich mit sich selbst und seinen Fähigkeiten sowie tieferen Wünschen und Visionen auseinander zu setzen und sein Charakter bzw. <b>Spieler-Profil</b> zu definieren</li>
-                <li>2. sich mit anderen Menschen im echten Leben zu connecten und sein persönliches Netzwerk bzw. <b>Web of Trust</b> aufzubauen</li>
-                <li>3. die eigenen <b>Ressourcen zu teilen</b> und die des Netzwerks zu nutzen</li>
-                <li>4. sich verschiedenen <b>Projekten</b> anzuschließen und selbst welche zu starten</li>
-                <li>5. die neu entstehende Welt zu <b>kartieren und zu dokumentieren</b></li>
+<h2 className="text-xl my-4">Was ist ein Real-Life-Manifestations-Spiel ???</h2>
 
-            </ul>
+  
+
+  <p className="my-2">Ähnlich wie bei einem Rollenspiel kann man sich sein eigenes Profil erstellen, mit dem Unterschied, dass hier echte Fähigkeiten abgebildet, geteilt und trainiert werden können.</p>
+  <p>Des weiteren werden reale Ressourcen sichtbar und verfügbar gemacht, verwaltet und eingesetzt, ähnlich wie bei einem Strategie-Spiel.</p>
+
+  <p className="my-2">Die Aufgaben des Projektmanagements können als Quests bzw. Spielaufträge abgebildet werden. Kleine und große Aufgaben werden in Abenteuer und Herausforderungen verwandelt und Probleme in Rätsel.</p>
+
+  <p className="my-2">Die Geschichte und das Storytelling orientiert sich an den realen Zuständen und Herausforderungen auf unserer Erde</p>
+
+  <p className="my-2">Ziel des Spiels ist es, WinWinWin Situationen zu erzeugen. Win für Dich, Win für Uns, Win für die Welt</p>
+
+
+<i>Danke Simon Schauinsland für diese Textbausteine</i>
+
+<h2 className="text-xl my-4">Elemente des Spiels</h2>
+
+<h3 className="text-lg my-3"> App</h3>
+
+Die App bietet eine interaktive geografische Karte als Spielfeld. Außerdem ermöglicht sie das Erstellen und Ansehen von Spieler-Profilen. Der Marktplatz zeigt Angebote und Bedürfnisse
+<h3 className="text-lg my-3"> Print Material</h3>
+
+Als Ergänzung und zum Offline-Spielen gibt es Flyer, Aufkleber, Schilder und Workbooks, welche zum Spielen einladen.
+
+Spieler erhalten Ausweise und Visitenkarten mit QR-Codes, die zu Vernetzung genutzt werden (später mehr)
+<h3 className="text-lg my-3"> Temporäre Events</h3>
+
+Wir kommen zusammen bei Workshops, auf Festivals und bei lokalen Treffen um uns zu connecten, Strukturen zu bilden und neue Spieler zu gewinnen.
+
+<h3 className="text-lg my-3">  Dauerhafte Strukturen</h3>
+
+Beim Spielen erschaffen wir dauerhafte materielle Strukturen wie Orte und Infrastruktur.
+
+Und Immaterielles wie Netzwerke aus Beziehungen, Geschichten, Informationen ...
+
+<h2 className="text-xl my-4">Ziel des Spiels</h2>
+
+1. Ein dezentrales Netzwerk aufspannen
+2. Freie Entfaltung unserer kollektiven und individuellen Potentiale
+3. Aufbau kollektiver Strukturen und Co-Kreation
+<h2 className="tw-text-xl my-4"> Ablauf</h2>
+  
+Durch spielerische Elemente / Gamification wird der Spieler motiviert und angeleitet ...
+<h3 className="text-lg my-3">  Spieler Profile</h3>
+
+Der Spieler setzt sich mit sich selbst und seinen Fähigkeiten sowie tieferen Wünschen und Visionen auseinander und definiert seinen Charakter bzw. Spieler-Profil
+
+Dabei stehen folgende Fragen im Mittelpunkt:
+  
+- Wie und in was für einer Welt möchte ich leben?
+
+- Wer bin ich und was sind meine besonderen Fähigkeiten oder meine spezielle Aufgabe in diesem Leben?
+    
+- Was habe ich zu geben? Was kann und möchte ich mit anderen und der Welt teilen?
+    
+- Was brauche ich noch um ganz in meine Kraft zu kommen? Wie können mich andere dabei unterstützen?
+
+<h3 className="text-lg my-3"> Ressourcen</h3>
+
+Der Spieler erforscht und definiert seine Angebote und Bedürfnisse, teilt seine Ressourcen und nutzt die des Netzwerks
+
+Z.B. Werkzeuge, Maschinen, Elektrogeräte, Fahrzeuge, Essen und Trinken, Schlafplätze, Mitfahrten, Bücher, Zugang zum Internet, individuelle Fähigkeiten sowie Hilfe im Alltag
+
+<h3 className="text-lg my-3"> Projekte umsetzen</h3>
+
+Der Spieler schließt sich Projekten an und startet selbst welche.
+
+Das Spiel unterstützt beim Projektmanagement oder beim Crowdfunding
+
+So entstehen Strukturen, Veranstaltungen, dauerhafte Orte, Infrastruktur und alles was wir brauchen um unsere menschlichen Bedürfnisse im Einklang mit Mutter Erde zu befriedigen.
+
+<h3 className="text-lg my-3"> Wandel sichtbar machen</h3>
+
+Der Spieler wird motiviert die neu entstehende Welt zu kartieren und zu dokumentieren indem er ...
+
+- Orte, Veranstaltungen usw. in der Karte einträgt
+    
+- Projekte mit Text, Bild und Ton dokumentiert
+    
+- Geschichten des Wandels erzählt
+    
+
+<h2 className="tw-text-xl my-4">Web of Trust</h2>
+
+Während wir uns mit anderen Menschen im echten Leben connecten und unser persönliches Netzwerk aufbauen, tauschen wir gleichzeitig kryptografische Schlüssel aus und bauen ein sogenanntes Web of Trust
+
+<h3 className="text-lg my-3"> Dezentrale IDs</h3>
+
+Wenn wir unser Profil erstellen wird gleichzeitig ein Schlüsselpaar bestehend aus einem privaten und einem öffentlichen Schlüssel erzeugt.
+
+  
+
+Den öffentlichen Schlüssel teilen wir mit unseren Freunden und diese können damit Daten für uns verschlüsseln.
+
+  
+
+Den privaten Schlüssel halten wir geheim. Er wird benötigt um Daten die für uns verschlüsselt wurden auf unserem Gerät wieder zu entschlüsselt.
+
+
+<h3 className="text-lg my-3"> Schlüsseltausch</h3>
+
+Wenn wir Menschen im echten Leben begegnen tauschen wir unsere öffentlichen Schlüssel via QR-Code-Scan oder auf Papier.
+
+  
+
+<h3 className="text-lg my-3"> Private Daten teilen</h3>
+
+Innerhalb unseres Netzwerkes können wir dann unsere Profile, Angebote, Bedürfnisse, Projekte, Orte und Veranstaltungen ende-zu-ende-verschlüsselt teilen.
+
+<h2 className="tw-text-xl my-4">Prinzipien</h2>
+
+<h3 className="text-lg my-3"> Alles ist nur ein Spiel</h3>
+
+Alles passiert freiwillig, aus uns selbst heraus im Flow. Jeder ist jederzeit eingeladen mitzumachen
+
+<h3 className="text-lg my-3"> Ohne Geld</h3>
+
+Da beim Geld der Spaß bekanntlich aufhört, bezahlen wir uns beim Spielen gegenseitig kein Geld
+
+  
+
+  
+
+<h3 className="text-lg my-3"> Dezentrale Strukturen</h3>
+
+Alle Strukturen die wir erschaffen gestalten wir dezentral und frei von Hierarchien. Für alle gelten die gleichen Regeln
+
+  
+
+  
+
+<h3 className="text-lg my-3"> Real Life</h3>
+
+Veränderung passiert im echten Leben. Wir nutzen das Internet nur wo es direkt hilft echte Begegnungen zu organisieren
         </CardPage>
     )
 }

src/pages/Projects.tsx

@@ -0,0 +1,89 @@
+import UsersIcon from '@heroicons/react/24/outline/UsersIcon'
+import MapPinIcon from '@heroicons/react/24/outline/MapPinIcon'
+import CalendarIcon from '@heroicons/react/24/outline/CalendarIcon'
+import { TextInput, TitleCard, SelectBox, useAuth } from 'utopia-ui'
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { itemsApi } from '../api/itemsApi'
+import { Project } from '../api/directus'
+
+
+
+
+export default function Projects() {
+
+
+  const [search, setSearch] = useState<string>("")
+
+  const [projectsApi, setProjectsApi] = useState<itemsApi<Project>>();
+  const [projects, setProjects] = useState<Project[]>();
+
+  const loadProjects = async () => {
+    const projects = await projectsApi?.getItems();
+    setProjects(projects as Project[]);
+
+  }
+
+  useEffect(() => {
+    setProjectsApi(new itemsApi<Project>('projects'));
+    loadProjects();
+  }, [])
+
+  useEffect(() => {
+    loadProjects();
+  }, [projectsApi])
+
+const {token,isAuthenticated} = useAuth();
+
+  return (
+    <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="text-sm breadcrumbs">
+          <ul>
+            <li><Link to={'/'} >Home</Link></li>
+            <li><Link to={'/projects'} >Projects</Link></li>
+          </ul>
+        </div>
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4 mt-2 ">
+          <TextInput defaultValue='' placeholder='🔍 Search' containerStyle='lg:col-span-2' updateFormValue={(val) => { setSearch(val) }}></TextInput>
+          <SelectBox updateFormValue={() => { }} placeholder="Type" containerStyle=' hidden md:grid' defaultValue='PLACEHOLDER' options={[{ name: "local", value: "local" }, { name: "project", value: "project" }]} />
+        </div>
+
+        <div className="divider" ></div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
+          {
+            projects?.filter(item => {
+              return search === ''
+                ? item :
+                item.name.toLowerCase().includes(search.toLowerCase());
+            }).map((i, k) => {
+              return (
+                <Link key={k} to={'/projects/' + i.id}>
+                  <TitleCard className={"!h-96"} title={i.name} topMargin={"mt-2"}>
+                    <p className='font-bold text-sm mb-2'>{i.subname}</p>
+                  <img className='h-36' src={`https://api.utopia-lab.org/assets/${i.picture}${isAuthenticated ?  `?access_token=${token}` : ''}`}></img>
+                    {i.text}
+                    {/**
+ *                  <div className='flex justify-between text-gray-500 '>
+                    <div className='flex'><UsersIcon className=' h-6 w-6' />&nbsp;2</div>
+                    <div className='flex'><MapPinIcon className='h-6 w-6' />&nbsp;5</div>
+                    <div className='flex'><CalendarIcon className='h-6 w-6' />&nbsp;9</div>
+                  </div>
+ 
+ */}
+
+
+                  </TitleCard>
+                </Link>
+              )
+
+            })
+          }
+        </div>
+      </div>
+    </main>
+
+
+  )
+}

src/routes/sidebar.tsx

@@ -1,8 +1,5 @@
 
-import MapIcon from '@heroicons/react/24/outline/MapIcon'
-import UserGroupIcon from '@heroicons/react/24/outline/UserGroupIcon'
-
-
+import { BookOpenIcon, RectangleGroupIcon, UsersIcon, MapIcon } from '@heroicons/react/24/outline'
 
 //const iconClasses = `h-6 w-6`
 //const submenuIconClasses = `h-5 w-5`
@@ -14,9 +11,20 @@ export const routes = [
     icon: <MapIcon style={{width: 24 }}/>, 
     name: 'Map',
   },
+  {
+    path: '/projects', // url
+    icon: <RectangleGroupIcon style={{width: 24 }}/>, // icon component
+    name: 'Projects', // name that appear in Sidebar
+  }/**
+  {
+    path: '/people', // url
+    icon: <UsersIcon style={{width: 24 }}/>, // icon component
+    name: 'People', // name that appear in Sidebar
+  }, */,
+
   {
     path: '/concept', // url
-    icon: <UserGroupIcon style={{width: 24 }}/>, // icon component
+    icon: <BookOpenIcon style={{width: 24 }}/>, // icon component
     name: 'Concept', // name that appear in Sidebar
   },
 

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{html,js,jsx,tsx,ts}"],
+    theme: {
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+}
+