forked from ZcashFoundation/zebra
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Urls, 404, upgrade react! introduce react-three-fiber (ZcashFoundatio…
- Loading branch information
Showing
29 changed files
with
4,001 additions
and
2,708 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| ## MUI themes all the way | ||
|
|
||
| ## Further | ||
|
|
||
| https://www.welcomedeveloper.com/react-mui-theme | ||
|
|
||
| https://mui.com/material-ui/customization/palette/ | ||
|
|
||
| https://m2.material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=3f41cb&secondary.color=cdaefb |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| // https://www.youtube.com/watch?v=9ZEjSxDRIik | ||
| import { Canvas } from '@react-three/fiber' | ||
| import { KeyboardControls, KeyboardControlsEntry, OrbitControls, Sphere, Stars, Text3D, Torus } from "@react-three/drei"; | ||
| import { Physics, usePlane, useBox, useSphere } from "@react-three/cannon"; | ||
| import { useMemo } from 'react'; | ||
|
|
||
|
|
||
| function Toruso() { | ||
| const [ref, api] = useSphere(() => ({ mass: 1, position: [0, 80, -3] })); | ||
|
|
||
| return ( | ||
| <mesh | ||
| ref={ref} | ||
| position={[0, 80, -3]} | ||
| > | ||
| <Torus key={undefined} position={undefined} material={undefined} userData={undefined} rotation={undefined} attach={undefined} onUpdate={undefined} up={undefined} scale={undefined} matrix={undefined} quaternion={undefined} layers={undefined} dispose={undefined} clear={undefined} geometry={undefined} raycast={undefined} onClick={undefined} onContextMenu={undefined} onDoubleClick={undefined} onPointerUp={undefined} onPointerDown={undefined} onPointerOver={undefined} onPointerOut={undefined} onPointerEnter={undefined} onPointerLeave={undefined} onPointerMove={undefined} onPointerMissed={undefined} onPointerCancel={undefined} onWheel={undefined} type={undefined} visible={undefined} id={undefined} uuid={undefined} name={undefined} parent={undefined} modelViewMatrix={undefined} normalMatrix={undefined} matrixWorld={undefined} matrixAutoUpdate={undefined} matrixWorldNeedsUpdate={undefined} castShadow={undefined} receiveShadow={undefined} frustumCulled={undefined} renderOrder={undefined} animations={undefined} customDepthMaterial={undefined} customDistanceMaterial={undefined} isObject3D={undefined} onBeforeRender={undefined} onAfterRender={undefined} applyMatrix4={undefined} applyQuaternion={undefined} setRotationFromAxisAngle={undefined} setRotationFromEuler={undefined} setRotationFromMatrix={undefined} setRotationFromQuaternion={undefined} rotateOnAxis={undefined} rotateOnWorldAxis={undefined} rotateX={undefined} rotateY={undefined} rotateZ={undefined} translateOnAxis={undefined} translateX={undefined} translateY={undefined} translateZ={undefined} localToWorld={undefined} worldToLocal={undefined} lookAt={undefined} add={undefined} remove={undefined} removeFromParent={undefined} getObjectById={undefined} getObjectByName={undefined} getObjectByProperty={undefined} getWorldPosition={undefined} getWorldQuaternion={undefined} getWorldScale={undefined} getWorldDirection={undefined} traverse={undefined} traverseVisible={undefined} traverseAncestors={undefined} updateMatrix={undefined} updateMatrixWorld={undefined} updateWorldMatrix={undefined} toJSON={undefined} clone={undefined} copy={undefined} addEventListener={undefined} hasEventListener={undefined} removeEventListener={undefined} dispatchEvent={undefined} morphTargetInfluences={undefined} morphTargetDictionary={undefined} isMesh={undefined} updateMorphTargets={undefined}> | ||
| {/* <meshBasicMaterial color="rebeccapurple" /> */} | ||
| <meshLambertMaterial attach="material" color="rebeccapurple" /> | ||
|
|
||
| </Torus> | ||
| </mesh> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
| function Sphero() { | ||
| const [ref, api] = useSphere(() => ({ mass: 1, position: [0, 50, -7] })); | ||
|
|
||
| return ( | ||
| <mesh | ||
| ref={ref} | ||
| position={[0, 50, -7]} | ||
| > | ||
| <Sphere key={undefined} position={undefined} material={undefined} userData={undefined} rotation={undefined} attach={undefined} onUpdate={undefined} up={undefined} scale={undefined} matrix={undefined} quaternion={undefined} layers={undefined} dispose={undefined} onClick={undefined} onContextMenu={undefined} onDoubleClick={undefined} onPointerUp={undefined} onPointerDown={undefined} onPointerOver={undefined} onPointerOut={undefined} onPointerEnter={undefined} onPointerLeave={undefined} onPointerMove={undefined} onPointerMissed={undefined} onPointerCancel={undefined} onWheel={undefined} visible={undefined} type={undefined} id={undefined} uuid={undefined} name={undefined} parent={undefined} modelViewMatrix={undefined} normalMatrix={undefined} matrixWorld={undefined} matrixAutoUpdate={undefined} matrixWorldNeedsUpdate={undefined} castShadow={undefined} receiveShadow={undefined} frustumCulled={undefined} renderOrder={undefined} animations={undefined} customDepthMaterial={undefined} customDistanceMaterial={undefined} isObject3D={undefined} onBeforeRender={undefined} onAfterRender={undefined} applyMatrix4={undefined} applyQuaternion={undefined} setRotationFromAxisAngle={undefined} setRotationFromEuler={undefined} setRotationFromMatrix={undefined} setRotationFromQuaternion={undefined} rotateOnAxis={undefined} rotateOnWorldAxis={undefined} rotateX={undefined} rotateY={undefined} rotateZ={undefined} translateOnAxis={undefined} translateX={undefined} translateY={undefined} translateZ={undefined} localToWorld={undefined} worldToLocal={undefined} lookAt={undefined} add={undefined} remove={undefined} removeFromParent={undefined} clear={undefined} getObjectById={undefined} getObjectByName={undefined} getObjectByProperty={undefined} getWorldPosition={undefined} getWorldQuaternion={undefined} getWorldScale={undefined} getWorldDirection={undefined} raycast={undefined} traverse={undefined} traverseVisible={undefined} traverseAncestors={undefined} updateMatrix={undefined} updateMatrixWorld={undefined} updateWorldMatrix={undefined} toJSON={undefined} clone={undefined} copy={undefined} addEventListener={undefined} hasEventListener={undefined} removeEventListener={undefined} dispatchEvent={undefined} geometry={undefined} morphTargetInfluences={undefined} morphTargetDictionary={undefined} isMesh={undefined} updateMorphTargets={undefined}> | ||
| {/* <meshBasicMaterial color="salmon" /> */} | ||
| <meshLambertMaterial attach="material" color="salmon" /> | ||
|
|
||
| </Sphere> | ||
| </mesh> | ||
| ) | ||
| } | ||
|
|
||
| function Box() { | ||
| const [ref, api] = useBox(() => ({ mass: 1, position: [0, 20, -5] })); | ||
| return ( | ||
| <mesh | ||
| onClick={() => { | ||
| api.velocity.set(Math.random(), 2, Math.random()); | ||
| }} | ||
| ref={ref} | ||
| position={[0, 20, -2]} | ||
| // rotation={[1, Math.PI / 3, 2]} | ||
| // quaternion={THREE.Quarternion} | ||
| > | ||
| <boxBufferGeometry attach="geometry" /> | ||
| <meshLambertMaterial attach="material" color="hotpink" /> | ||
| </mesh> | ||
| ); | ||
| } | ||
|
|
||
| function Text404() { | ||
| const [ref, api] = useSphere(() => ({ mass: 1000, position: [-1, 10, -30] })); | ||
|
|
||
| return ( | ||
| // <mesh | ||
| // // ref={ref} | ||
| // > | ||
|
|
||
|
|
||
| <Text3D | ||
| key={undefined} material={undefined} userData={undefined} attach={undefined} args={undefined} onUpdate={undefined} clear={undefined} geometry={undefined} raycast={undefined} type={undefined} visible={undefined} id={undefined} uuid={undefined} name={undefined} parent={undefined} modelViewMatrix={undefined} normalMatrix={undefined} matrixWorld={undefined} matrixAutoUpdate={undefined} matrixWorldNeedsUpdate={undefined} castShadow={undefined} receiveShadow={undefined} frustumCulled={undefined} renderOrder={undefined} animations={undefined} customDepthMaterial={undefined} customDistanceMaterial={undefined} isObject3D={undefined} onBeforeRender={undefined} onAfterRender={undefined} applyMatrix4={undefined} applyQuaternion={undefined} setRotationFromAxisAngle={undefined} setRotationFromEuler={undefined} setRotationFromMatrix={undefined} setRotationFromQuaternion={undefined} rotateOnAxis={undefined} rotateOnWorldAxis={undefined} rotateX={undefined} rotateY={undefined} rotateZ={undefined} translateOnAxis={undefined} translateX={undefined} translateY={undefined} translateZ={undefined} localToWorld={undefined} worldToLocal={undefined} lookAt={undefined} add={undefined} remove={undefined} removeFromParent={undefined} getObjectById={undefined} getObjectByName={undefined} getObjectByProperty={undefined} getWorldPosition={undefined} getWorldQuaternion={undefined} getWorldScale={undefined} getWorldDirection={undefined} traverse={undefined} traverseVisible={undefined} traverseAncestors={undefined} updateMatrix={undefined} updateMatrixWorld={undefined} updateWorldMatrix={undefined} toJSON={undefined} clone={undefined} copy={undefined} addEventListener={undefined} hasEventListener={undefined} removeEventListener={undefined} dispatchEvent={undefined} morphTargetInfluences={undefined} morphTargetDictionary={undefined} isMesh={undefined} updateMorphTargets={undefined} | ||
| position={[-1, 10, -10]} | ||
| // https://www.fontsquirrel.com/fonts/list/popular | ||
| // http://gero3.github.io/facetype.js/ | ||
| // https://panzoid.com/community/5802 | ||
| font={"/Roboto_Regular.json"} | ||
| ref={ref} | ||
| > | ||
| {"404"} | ||
| <meshNormalMaterial /> | ||
| </Text3D> | ||
| // </mesh> | ||
| ) | ||
| } | ||
|
|
||
| function Plane() { | ||
| const [ref] = usePlane(() => ({ | ||
| rotation: [-Math.PI / 2 + 0.08, 0, 0], | ||
| position: [0, -2, 0] | ||
| })); | ||
| return ( | ||
| <mesh | ||
| ref={ref} | ||
| rotation={[-Math.PI / 2 + 0.08, 0, 0]} | ||
| position={[0, -2, 0]} | ||
| > | ||
| <planeBufferGeometry attach="geometry" args={[100, 100]} /> | ||
| <meshLambertMaterial attach="material" color="lightblue" /> | ||
| </mesh> | ||
| ); | ||
| } | ||
|
|
||
| enum Controls { | ||
| forward = 'forward', | ||
| back = 'back', | ||
| left = 'left', | ||
| right = 'right', | ||
| jump = 'jump', | ||
| } | ||
|
|
||
|
|
||
| export default function Global404() { | ||
| const map = useMemo<KeyboardControlsEntry<Controls>[]>(() => [ | ||
| { name: Controls.forward, keys: ['ArrowUp', 'w', 'W'] }, | ||
| { name: Controls.back, keys: ['ArrowDown', 's', 'S'] }, | ||
| { name: Controls.left, keys: ['ArrowLeft', 'a', 'A'] }, | ||
| { name: Controls.right, keys: ['ArrowRight', 'd', 'D'] }, | ||
| { name: Controls.jump, keys: ['Space'] }, | ||
| ], []) | ||
|
|
||
| return ( | ||
| // <KeyboardControls map={map}> | ||
| <Canvas style={{ | ||
| height: "100vh", | ||
| backgroundColor: "black", | ||
| }}> | ||
|
|
||
|
|
||
| <OrbitControls /> | ||
|
|
||
| <Stars /> | ||
| <ambientLight intensity={0.5} /> | ||
| <spotLight position={[10, 15, 10]} angle={0.3} /> | ||
| <Physics> | ||
| <Text404 /> | ||
| <Toruso /> | ||
| <Box /> | ||
| <Sphero /> | ||
| <Plane /> | ||
| </Physics> | ||
| </Canvas> | ||
| // </KeyboardControls> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import axios from "axios" | ||
| import { lazy, useEffect, useState } from "react" | ||
| import { useParams } from "react-router" | ||
| import CreatorDetail from "./CreatorDetail" | ||
| import PageDetail from "./PageDetail" | ||
| // https://reactjs.org/docs/code-splitting.html | ||
| // import Global404 from "./Global404" | ||
| const Global404 = lazy(() => import('./Global404')) | ||
|
|
||
| export default function RootSplitter() { | ||
| const [_404, set404] = useState(false) | ||
| const params = useParams() | ||
|
|
||
| const [type, setType] = useState("" as "" | "zpage" | "creator") | ||
|
|
||
| useEffect(() => { | ||
| axios.get(`/api/get-type/${params.id}`).then((res) => { | ||
| console.log(res) | ||
| setType(res.data) | ||
| // TODO: maybe not global? yeah, probably not | ||
| set404(false) | ||
| }).catch(() => { | ||
| set404(true) | ||
| }) | ||
| }, [params.id]) | ||
|
|
||
| if (_404) { | ||
| return <Global404 /> | ||
| // return null | ||
| } | ||
| if (!type) { | ||
| return null | ||
| } | ||
|
|
||
| if (type == "zpage") { | ||
| return <PageDetail /> | ||
| } | ||
|
|
||
| if (type == "creator") { | ||
| return <CreatorDetail /> | ||
| } | ||
|
|
||
| return null | ||
| } |
Oops, something went wrong.