mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
gameplay
This commit is contained in:
parent
e9491e4616
commit
da368e9728
163
package-lock.json
generated
163
package-lock.json
generated
@ -18,11 +18,9 @@
|
||||
"react-string-replace": "^1.1.1",
|
||||
"react-toastify": "^9.1.3",
|
||||
"tributejs": "^5.1.3",
|
||||
"tw-elements": "^1.0.0-beta2"
|
||||
"tw-elements": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^25.0.4",
|
||||
"@rollup/plugin-dynamic-import-vars": "^2.0.5",
|
||||
"@types/leaflet": "^1.7.11",
|
||||
"@types/react": "^18.0.14",
|
||||
"@types/react-dom": "^18.0.5",
|
||||
@ -255,117 +253,6 @@
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs": {
|
||||
"version": "25.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.4.tgz",
|
||||
"integrity": "sha512-L92Vz9WUZXDnlQQl3EwbypJR4+DM2EbsO+/KOcEkP4Mc6Ct453EeDB2uH9lgRwj4w5yflgNpq9pHOiY8aoUXBQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^5.0.1",
|
||||
"commondir": "^1.0.1",
|
||||
"estree-walker": "^2.0.2",
|
||||
"glob": "^8.0.3",
|
||||
"is-reference": "1.2.1",
|
||||
"magic-string": "^0.27.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rollup": "^2.68.0||^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"rollup": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs/node_modules/brace-expansion": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
|
||||
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"balanced-match": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs/node_modules/glob": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
|
||||
"integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fs.realpath": "^1.0.0",
|
||||
"inflight": "^1.0.4",
|
||||
"inherits": "2",
|
||||
"minimatch": "^5.0.1",
|
||||
"once": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs/node_modules/minimatch": {
|
||||
"version": "5.1.6",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
|
||||
"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"brace-expansion": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-dynamic-import-vars": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-dynamic-import-vars/-/plugin-dynamic-import-vars-2.0.5.tgz",
|
||||
"integrity": "sha512-YNKbZ5Y08DwWHbcqcn5BOxf/X9lVV2fYiL0247k76rL/XNx6xQX0Tti6cCoA2jXhBQdBcDjsFTFoT3nl4QJmWg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^5.0.1",
|
||||
"astring": "^1.8.5",
|
||||
"estree-walker": "^2.0.2",
|
||||
"fast-glob": "^3.2.12",
|
||||
"magic-string": "^0.27.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rollup": "^1.20.0||^2.0.0||^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"rollup": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/pluginutils": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.4.tgz",
|
||||
"integrity": "sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "^1.0.0",
|
||||
"estree-walker": "^2.0.2",
|
||||
"picomatch": "^2.3.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rollup": "^1.20.0||^2.0.0||^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"rollup": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@trysound/sax": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
|
||||
@ -375,12 +262,6 @@
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
|
||||
"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/geojson": {
|
||||
"version": "7946.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
|
||||
@ -787,15 +668,6 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/astring": {
|
||||
"version": "1.8.6",
|
||||
"resolved": "https://registry.npmjs.org/astring/-/astring-1.8.6.tgz",
|
||||
"integrity": "sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"astring": "bin/astring"
|
||||
}
|
||||
},
|
||||
"node_modules/autoprefixer": {
|
||||
"version": "10.4.14",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
|
||||
@ -939,9 +811,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001478",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001478.tgz",
|
||||
"integrity": "sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw==",
|
||||
"version": "1.0.30001547",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
|
||||
"integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@ -2525,15 +2397,6 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-reference": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
|
||||
"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/is-regex": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
|
||||
@ -2785,18 +2648,6 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.27.0",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
|
||||
"integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.4.13"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/make-dir": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
||||
@ -4683,9 +4534,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tw-elements": {
|
||||
"version": "1.0.0-beta2",
|
||||
"resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-beta2.tgz",
|
||||
"integrity": "sha512-0DAm5i7OSk1NCW9i/JotHZOWG0NIuCBr5S0t1h66rDgH1M2fxCQvvQw3AxK0fVaCJG0jk82UhAsI7PCEMoq6Xw==",
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0.tgz",
|
||||
"integrity": "sha512-pD2bA1bTGzvigU79dz4pGvO207CCOpzhwlxzb7hswx40SMMkJISOkoDxU2ot3OQ7LTZM5GwuLDkZ+dquK0wdYQ==",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.6.0",
|
||||
"chart.js": "^3.7.1",
|
||||
|
||||
@ -2,24 +2,27 @@ import * as React from 'react'
|
||||
import NavBar from './NavBar'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import { ToastContainer } from 'react-toastify'
|
||||
import { QuestsProvider } from '../Gaming/hooks/useQuests'
|
||||
|
||||
export function AppShell({ appName, children }) {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<ToastContainer position="top-right"
|
||||
autoClose={2000}
|
||||
hideProgressBar
|
||||
newestOnTop={false}
|
||||
closeOnClick
|
||||
rtl={false}
|
||||
pauseOnFocusLoss
|
||||
draggable
|
||||
pauseOnHover
|
||||
theme="light" />
|
||||
<NavBar appName={appName}></NavBar>
|
||||
<div id="app-content" className="tw-flex tw-!pl-[77px]">
|
||||
{children}
|
||||
</div>
|
||||
<QuestsProvider initialOpen={false}>
|
||||
<ToastContainer position="top-right"
|
||||
autoClose={2000}
|
||||
hideProgressBar
|
||||
newestOnTop={false}
|
||||
closeOnClick
|
||||
rtl={false}
|
||||
pauseOnFocusLoss
|
||||
draggable
|
||||
pauseOnHover
|
||||
theme="light" />
|
||||
<NavBar appName={appName}></NavBar>
|
||||
<div id="app-content" className="tw-flex tw-!pl-[77px]">
|
||||
{children}
|
||||
</div>
|
||||
</QuestsProvider>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { useState } from "react"
|
||||
import * as React from "react"
|
||||
import { useSetQuestOpen } from "./hooks/useQuests"
|
||||
|
||||
type ChapterProps = {
|
||||
clickAction?: () => void
|
||||
@ -10,15 +11,17 @@ export function Welcome1({ clickAction }: ChapterProps) {
|
||||
return (
|
||||
<>
|
||||
<h3 className="tw-font-bold tw-text-lg">Welcome, glad you are here!</h3>
|
||||
<p className="tw-py-4">
|
||||
Let's play a game together where we explore ourselves and our dreams and come together to make them come true.
|
||||
<br /><br />
|
||||
<b>Would you like to join us?</b></p>
|
||||
<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 tw-btn-neutral" onClick={() => clickAction!()}>Yes</label>
|
||||
|
||||
<label className="tw-btn tw-btn-neutral" onClick={() => close()}>No</label>
|
||||
|
||||
<label className="tw-btn" onClick={() => clickAction!()}>Next</label>
|
||||
|
||||
</div>
|
||||
</>
|
||||
@ -28,12 +31,21 @@ export function Welcome1({ clickAction }: ChapterProps) {
|
||||
export function Welcome2({ clickAction }: ChapterProps) {
|
||||
return (
|
||||
<>
|
||||
<h3 className="tw-font-bold tw-text-lg"> Imagine ...</h3>
|
||||
<p className="tw-py-4">
|
||||
you wake up sometime in the early twenties of the 21st century on planet Earth from a hypnosis that has somehow kept you and all other people under some kind of external control all your life.
|
||||
<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 tw-btn-neutral" onClick={() => clickAction!()}>next</label>
|
||||
<label className="tw-btn" onClick={() => clickAction!()}>next</label>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
@ -42,11 +54,19 @@ export function Welcome2({ clickAction }: ChapterProps) {
|
||||
export function Welcome3({ clickAction }: ChapterProps) {
|
||||
return (
|
||||
<>
|
||||
<h3 className="tw-font-bold tw-text-lg">Many people ... </h3>
|
||||
<p className="tw-py-4">
|
||||
are still trapped in old and dysfunctional structures. But magically, a new consciousness is suddenly rising. More and more people are awakening from hypnosis. </p>
|
||||
<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 true community.
|
||||
</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 have been taken for granted.
|
||||
</p>
|
||||
<div className="tw-modal-action">
|
||||
<label className="tw-btn tw-btn-neutral" onClick={() => clickAction!()}>next</label>
|
||||
<label className="tw-btn" onClick={() => clickAction!()}>next</label>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
@ -78,6 +98,7 @@ const close = () => {
|
||||
export function Modal() {
|
||||
|
||||
const [chapter, setChapter] = useState<number>(1);
|
||||
const setQuestsOpen = useSetQuestOpen();
|
||||
|
||||
|
||||
|
||||
@ -91,6 +112,10 @@ export function Modal() {
|
||||
return <Welcome3 clickAction={() => {
|
||||
setChapter(1);
|
||||
close();
|
||||
setTimeout(() => {
|
||||
setQuestsOpen(true);
|
||||
}, 1000);
|
||||
|
||||
}} />
|
||||
default: return <></>
|
||||
};
|
||||
|
||||
@ -1,32 +1,42 @@
|
||||
import * as React from 'react'
|
||||
import { useQuestsOpen, useSetQuestOpen } from './hooks/useQuests';
|
||||
import { useEffect } from 'react';
|
||||
import { useAuth } from '../Auth';
|
||||
|
||||
export function Quests() {
|
||||
|
||||
const [open, setOpen] = React.useState(true);
|
||||
|
||||
const questsOpen = useQuestsOpen();
|
||||
const setQuestsOpen = useSetQuestOpen();
|
||||
const { isAuthenticated, user } = useAuth();
|
||||
|
||||
if (open) return (
|
||||
<>
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
console.log(questsOpen);
|
||||
|
||||
}, [questsOpen])
|
||||
|
||||
|
||||
return (
|
||||
<>{questsOpen?
|
||||
<div className="tw-card tw-w-48 tw-bg-base-100 tw-shadow-xl tw-absolute tw-bottom-4 tw-left-4 tw-z-[2000]">
|
||||
<div className="tw-card-body tw-p-4 tw-pt-0">
|
||||
<div className="tw-card-actions tw-justify-end">
|
||||
<label className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2" onClick={()=>setOpen(false)}>✕</label>
|
||||
<label className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2" onClick={()=>setQuestsOpen(false)}>✕</label>
|
||||
</div>
|
||||
<h2 className="tw-card-title tw-m-auto ">Level 1</h2>
|
||||
<ul className='tw-flex-row'>
|
||||
<li><label className="tw-label tw-justify-normal tw-pt-1 tw-pb-0"><input type="checkbox" readOnly={true} className="tw-checkbox tw-checkbox-xs tw-checkbox-success" checked={isAuthenticated? isAuthenticated : false} /><span className='tw-text-sm tw-label-text tw-mx-2'>Sign Up</span></label></li>
|
||||
<li><label className="tw-label tw-justify-normal tw-pt-1 tw-pb-0"><input type="checkbox" readOnly={true} className="tw-checkbox tw-checkbox-xs tw-checkbox-success" checked={user?.avatar? true : false} /><span className='tw-text-sm tw-label-text tw-mx-2'>Upload Avatar</span></label></li>
|
||||
<li><label className="tw-label tw-justify-normal tw-pt-1 tw-pb-0"><input type="checkbox" readOnly={true} className="tw-checkbox tw-checkbox-xs tw-checkbox-success" checked={isAuthenticated? isAuthenticated : false}/><span className='tw-text-sm tw-label-text tw-mx-2'>Sign Up</span></label></li>
|
||||
<li><label className="tw-label tw-justify-normal tw-pt-1 tw-pb-0"><input type="checkbox" readOnly={true} className="tw-checkbox tw-checkbox-xs tw-checkbox-success" checked={user?.description? true : false} /><span className='tw-text-sm tw-label-text tw-mx-2'>Fill Profile</span></label></li>
|
||||
<li><label className="tw-label tw-justify-normal tw-pt-1 tw-pb-0"><input type="checkbox" readOnly={true} className="tw-checkbox tw-checkbox-xs tw-checkbox-success" /><span className='tw-text-sm tw-label-text tw-mx-2'>Join Group</span></label></li>
|
||||
<li><label className="tw-label tw-justify-normal tw-pt-1 tw-pb-0"><input type="checkbox" readOnly={true} className="tw-checkbox tw-checkbox-xs tw-checkbox-success" checked={user?.avatar? true : false} /><span className='tw-text-sm tw-label-text tw-mx-2'>Upload Avatar</span></label></li>
|
||||
</ul>
|
||||
</div>
|
||||
{ /** <button className='tw-btn tw-btn-xs tw-btn-neutral tw-w-fit tw-self-center tw-mt-1'>Next ></button> */
|
||||
} </div>
|
||||
</div>
|
||||
: ""
|
||||
}
|
||||
</>
|
||||
)
|
||||
|
||||
else return (
|
||||
<></>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
50
src/Components/Gaming/hooks/useQuests.tsx
Normal file
50
src/Components/Gaming/hooks/useQuests.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
|
||||
import { createContext, useContext } from "react";
|
||||
import * as React from "react";
|
||||
|
||||
|
||||
|
||||
type UseQuestManagerResult = ReturnType<typeof useQuestsManager>;
|
||||
|
||||
const QuestContext = createContext<UseQuestManagerResult>({
|
||||
open: false,
|
||||
setQuestsOpen: () => { }
|
||||
});
|
||||
|
||||
function useQuestsManager(initialOpen: boolean): {
|
||||
open: boolean;
|
||||
setQuestsOpen: (open: boolean) => void;
|
||||
} {
|
||||
const [open, setOpen] = useState<boolean>(initialOpen);
|
||||
|
||||
|
||||
|
||||
const setQuestsOpen = useCallback((questOpen: boolean) => {
|
||||
setOpen(questOpen);
|
||||
console.log(open);
|
||||
|
||||
}, []);
|
||||
|
||||
return { open, setQuestsOpen };
|
||||
}
|
||||
|
||||
export const QuestsProvider: React.FunctionComponent<{
|
||||
initialOpen: boolean, children?: React.ReactNode
|
||||
}> = ({ initialOpen, children }) => (
|
||||
<QuestContext.Provider value={useQuestsManager(initialOpen)}>
|
||||
{children}
|
||||
</QuestContext.Provider>
|
||||
);
|
||||
|
||||
export const useQuestsOpen = (): boolean => {
|
||||
const { open } = useContext(QuestContext);
|
||||
return open;
|
||||
};
|
||||
|
||||
|
||||
export const useSetQuestOpen = (): UseQuestManagerResult["setQuestsOpen"] => {
|
||||
const { setQuestsOpen } = useContext(QuestContext);
|
||||
return setQuestsOpen;
|
||||
}
|
||||
7
src/Components/Map/Subcomponents/Control.tsx
Normal file
7
src/Components/Map/Subcomponents/Control.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import * as React from 'react'
|
||||
|
||||
export const Control = ({children}) => {
|
||||
return (
|
||||
<div className='tw-absolute tw-bottom-4 tw-left-4 tw-z-[999] tw-flex-col'>{children}</div>
|
||||
)
|
||||
}
|
||||
@ -21,11 +21,11 @@ export function LayerControl() {
|
||||
const addVisibleLayer = useAddVisibleLayer();
|
||||
|
||||
return (
|
||||
<div className="tw-card tw-bg-base-100 tw-shadow-xl tw-absolute tw-bottom-4 tw-left-4 tw-z-1000 " onClick={e=> e.stopPropagation()}>
|
||||
<div className="tw-card tw-bg-base-100 tw-shadow-xl " onClick={e => e.stopPropagation()}>
|
||||
{
|
||||
open ?
|
||||
<div className="tw-card-body tw-p-2 tw-w-32 tw-transition-all tw-duration-300" onClick={e=> e.stopPropagation()}>
|
||||
<label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-bg-white tw-text-gray-600" onClick={()=>setOpen(false)}><p className='tw-text-center '>✕</p></label>
|
||||
<div className="tw-card-body tw-p-2 tw-w-32 tw-transition-all tw-duration-300" onClick={e => e.stopPropagation()}>
|
||||
<label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-bg-white tw-text-gray-600" onClick={() => setOpen(false)}><p className='tw-text-center '>✕</p></label>
|
||||
|
||||
<ul className='tw-flex-row'>
|
||||
{
|
||||
@ -38,9 +38,10 @@ export function LayerControl() {
|
||||
</ul>
|
||||
</div>
|
||||
:
|
||||
<div className="tw-card-body tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer" onClick={() => setOpen(true)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-6 h-6">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
<div className="tw-card-body hover:tw-bg-slate-300 tw-rounded-2xl tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer" onClick={() => setOpen(true)}>
|
||||
<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="svg_1" fill="#000" d="m2.75565,11.90727l-1.03852,0.28372c-0.77718,0.38859 -0.77718,1.0138 0,1.4023l7.0156,3.5078c0.77718,0.38859 2.0275,0.38859 2.8047,0l7.0156,-3.5078c0.77718,-0.38859 0.77718,-1.0138 0,-1.4023l-0.63311,-0.48643l-4.67718,2.23624c-1.5452,0.77262 -3.31877,1.58343 -4.86407,0.81081l-5.62302,-2.84434z" />
|
||||
<path id="svg_2" strokeWidth="2" stroke="#000" fill="none" d="m11.247,4.30851l6.2349,3.0877c0.69083,0.34211 0.69083,0.89295 0,1.2351l-6.2349,3.0877c-0.69083,0.34211 -1.8031,0.34212 -2.494,0l-6.2349,-3.0877c-0.69083,-0.34211 -0.69083,-0.89295 0,-1.2351l6.2349,-3.0877c0.69083,-0.34211 1.8031,-0.34211 2.494,0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
23
src/Components/Map/Subcomponents/QuestControl.tsx
Normal file
23
src/Components/Map/Subcomponents/QuestControl.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import * as React from 'react'
|
||||
import { useQuestsOpen, useSetQuestOpen } from '../../Gaming/hooks/useQuests';
|
||||
|
||||
|
||||
export function QuestControl() {
|
||||
|
||||
const questsOpen = useQuestsOpen();
|
||||
const setQuestsOpen = useSetQuestOpen();
|
||||
|
||||
return (
|
||||
<>
|
||||
{questsOpen ? "" :
|
||||
<div className="tw-card tw-bg-base-100 tw-shadow-xl tw-my-2 tw-w-10" onClick={e => e.stopPropagation()}>
|
||||
|
||||
<div className="tw-card-body hover:tw-bg-slate-300 tw-rounded-2xl tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer" onClick={() => setQuestsOpen(true)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M192 0c17.7 0 32 14.3 32 32V144H160V32c0-17.7 14.3-32 32-32zM64 64c0-17.7 14.3-32 32-32s32 14.3 32 32v80H64V64zm192 0c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V64zm96 64c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V128zm-96 88l0-.6c9.4 5.4 20.3 8.6 32 8.6c13.2 0 25.4-4 35.6-10.8c8.7 24.9 32.5 42.8 60.4 42.8c11.7 0 22.6-3.1 32-8.6V256c0 52.3-25.1 98.8-64 128v96c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V401.6c-17.3-7.9-33.2-18.8-46.9-32.5L69.5 357.5C45.5 333.5 32 300.9 32 267V240c0-35.3 28.7-64 64-64h88c22.1 0 40 17.9 40 40s-17.9 40-40 40H128c-8.8 0-16 7.2-16 16s7.2 16 16 16h56c39.8 0 72-32.2 72-72z"/></svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -16,6 +16,9 @@ import { FilterControl } from "./Subcomponents/FilterControl";
|
||||
import { PermissionsProvider } from "./hooks/usePermissions";
|
||||
import { LeafletRefsProvider } from "./hooks/useLeafletRefs";
|
||||
import { LayerControl } from "./Subcomponents/LayerControl";
|
||||
import { QuestControl } from "./Subcomponents/QuestControl";
|
||||
import { Quests } from "../Gaming";
|
||||
import { Control } from "./Subcomponents/Control";
|
||||
|
||||
|
||||
export interface MapEventListenerProps {
|
||||
@ -75,35 +78,37 @@ function UtopiaMap({
|
||||
<FilterProvider initialTags={[]}>
|
||||
<ItemsProvider initialItems={[]}>
|
||||
<LeafletRefsProvider initialLeafletRefs={{}}>
|
||||
<div className={(selectNewItemPosition != null ? "crosshair-cursor-enabled" : undefined)}>
|
||||
<MapContainer ref={mapDivRef} style={{ height: height, width: width }} center={center} zoom={zoom} zoomControl={false}>
|
||||
<FilterControl></FilterControl>
|
||||
<LayerControl></LayerControl>
|
||||
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://tile.osmand.net/hd/{z}/{x}/{y}.png" />
|
||||
<MarkerClusterGroup ref={clusterRef} showCoverageOnHover chunkedLoading maxClusterRadius={50} removeOutsideVisibleBounds={false}>
|
||||
{
|
||||
React.Children.toArray(children).map((child) =>
|
||||
React.isValidElement<{ setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps>>, itemFormPopup: ItemFormPopupProps | null, clusterRef: React.MutableRefObject<undefined> }>(child) ?
|
||||
React.cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup, clusterRef: clusterRef }) : child
|
||||
)
|
||||
}
|
||||
</MarkerClusterGroup>
|
||||
<MapEventListener setSelectNewItemPosition={setSelectNewItemPosition} selectNewItemPosition={selectNewItemPosition} setItemFormPopup={setItemFormPopup} />
|
||||
</MapContainer>
|
||||
<AddButton setSelectNewItemPosition={setSelectNewItemPosition}></AddButton>
|
||||
{selectNewItemPosition != null &&
|
||||
<div className="tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md">
|
||||
<div className="tw-alert tw-bg-base-100 tw-text-base-content">
|
||||
<div>
|
||||
<span>Select {selectNewItemPosition.name} position!</span>
|
||||
<div className={(selectNewItemPosition != null ? "crosshair-cursor-enabled" : undefined)}>
|
||||
<MapContainer ref={mapDivRef} style={{ height: height, width: width }} center={center} zoom={zoom} zoomControl={false}>
|
||||
<FilterControl></FilterControl>
|
||||
<Control>
|
||||
<QuestControl></QuestControl>
|
||||
<LayerControl></LayerControl>
|
||||
</Control>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://tile.osmand.net/hd/{z}/{x}/{y}.png" />
|
||||
<MarkerClusterGroup ref={clusterRef} showCoverageOnHover chunkedLoading maxClusterRadius={50} removeOutsideVisibleBounds={false}>
|
||||
{
|
||||
React.Children.toArray(children).map((child) =>
|
||||
React.isValidElement<{ setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps>>, itemFormPopup: ItemFormPopupProps | null, clusterRef: React.MutableRefObject<undefined> }>(child) ?
|
||||
React.cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup, clusterRef: clusterRef }) : child
|
||||
)
|
||||
}
|
||||
</MarkerClusterGroup>
|
||||
<MapEventListener setSelectNewItemPosition={setSelectNewItemPosition} selectNewItemPosition={selectNewItemPosition} setItemFormPopup={setItemFormPopup} />
|
||||
</MapContainer>
|
||||
<AddButton setSelectNewItemPosition={setSelectNewItemPosition}></AddButton>
|
||||
{selectNewItemPosition != null &&
|
||||
<div className="tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md">
|
||||
<div className="tw-alert tw-bg-base-100 tw-text-base-content">
|
||||
<div>
|
||||
<span>Select {selectNewItemPosition.name} position!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</LeafletRefsProvider>
|
||||
</ItemsProvider>
|
||||
</FilterProvider>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user