Skip to content

Commit 66f60bc

Browse files
a-typea-type
committed
fix app build
1 parent a37644c commit 66f60bc

File tree

12 files changed

+527
-533
lines changed

12 files changed

+527
-533
lines changed

‎app/package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@
1010
},
1111
"dependencies": {
1212
"@a-type/auth-fetch": "catalog:",
13-
"@alef/sys": "workspace:*",
1413
"@alef/common": "workspace:*",
1514
"@alef/services": "workspace:*",
15+
"@alef/sys": "workspace:*",
1616
"@pmndrs/uikit": "^0.8.5",
17+
"@preact/signals-react": "^3.0.1",
1718
"@react-spring/three": "^9.7.5",
1819
"@react-three/drei": "catalog:",
1920
"@react-three/fiber": "catalog:",
@@ -29,12 +30,14 @@
2930
"react-dom": "catalog:",
3031
"react-hot-toast": "2.5.1",
3132
"suncalc": "^1.9.0",
32-
"three": "^0.172.0"
33+
"three": "catalog:"
3334
},
3435
"devDependencies": {
3536
"@eslint/js": "^9.15.0",
3637
"@types/react": "catalog:",
3738
"@types/react-dom": "catalog:",
39+
"@types/suncalc": "^1.9.2",
40+
"@types/three": "catalog:",
3841
"@vitejs/plugin-react-swc": "^3.5.0",
3942
"eslint": "^9.15.0",
4043
"eslint-plugin-react-hooks": "^5.0.0",
@@ -43,7 +46,6 @@
4346
"typescript": "catalog:",
4447
"typescript-eslint": "^8.15.0",
4548
"vite": "^6.0.1",
46-
"wrangler": "catalog:",
47-
"@types/three": "^0.172.0"
49+
"wrangler": "catalog:"
4850
}
4951
}

‎app/src/components/xr/ControlCenter.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Container, FontFamilyProvider, Root } from '@react-three/uikit';
1+
import { Container, Root } from '@react-three/uikit';
22
import { Toggle } from '@react-three/uikit-default';
33
import { Menu, X } from '@react-three/uikit-lucide';
44
import { useState } from 'react';
@@ -16,30 +16,30 @@ export function ControlCenter({ onToggle, children }: { onToggle?: () => void; c
1616
normal: 'https://cdn.volu.dev/fonts/fixed-jetbrainsmono.json',
1717
}}
1818
> */}
19-
<Container
20-
backgroundColor={colors.background}
21-
borderColor={colors.border}
22-
borderWidth={1}
23-
borderRadius={10}
24-
padding={5}
25-
flexGrow={0}
26-
flexShrink={0}
27-
marginX="auto"
28-
flexDirection="row"
29-
gap={5}
19+
<Container
20+
backgroundColor={colors.background}
21+
borderColor={colors.border}
22+
borderWidth={1}
23+
borderRadius={10}
24+
padding={5}
25+
flexGrow={0}
26+
flexShrink={0}
27+
marginX="auto"
28+
flexDirection="row"
29+
gap={5}
30+
>
31+
<Toggle
32+
onClick={() => {
33+
setIsOpen(!isOpen);
34+
onToggle?.();
35+
}}
3036
>
31-
<Toggle
32-
onClick={() => {
33-
setIsOpen(!isOpen);
34-
onToggle?.();
35-
}}
36-
>
37-
{isOpen ? <X color={colors.primary} /> : <Menu color={colors.primary} />}
38-
</Toggle>
39-
<Container display={isOpen ? 'flex' : 'none'} flexDirection="row" alignItems={'center'} gap={10}>
40-
{children}
41-
</Container>
37+
{isOpen ? <X color={colors.primary} /> : <Menu color={colors.primary} />}
38+
</Toggle>
39+
<Container display={isOpen ? 'flex' : 'none'} flexDirection="row" alignItems={'center'} gap={10}>
40+
{children}
4241
</Container>
42+
</Container>
4343
{/* </FontFamilyProvider> */}
4444
</Root>
4545
</BodyAnchor>

‎app/src/components/xr/EnterXRButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { xrStore } from '@/stores/xrStore.js';
12
import { useSessionModeSupported } from '@react-three/xr';
2-
import { xrStore } from '../stores/xrStore.js';
33
import { useSyncExternalStore } from 'react';
44

55
export function EnterXRButton() {
@@ -22,7 +22,7 @@ export function EnterXRButton() {
2222
if (!mode) return;
2323

2424
const session = xrStore.getState().session;
25-
if (!!session) {
25+
if (session) {
2626
session.end();
2727
} else {
2828
xrStore.enterXR(mode);

‎app/src/components/xr/Environment.tsx‎

Lines changed: 50 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,63 @@
1-
import { useXRPlanes, XRSpace, XRPlaneModel } from "@react-three/xr";
2-
import { createContext, useContext, useState } from "react";
3-
import { DoubleSide, FrontSide, Mesh } from "three";
1+
import { useXRPlanes, XRPlaneModel, XRSpace } from '@react-three/xr';
2+
import { createContext, useContext, useState } from 'react';
3+
import { DoubleSide, Mesh } from 'three';
44

55
type PlaneMeshes = {
6-
[label: string]: Mesh[]
6+
[label: string]: Mesh[];
77
};
88

99
interface EnvironmentContextType {
10-
planeMeshes: PlaneMeshes;
11-
sunlightIntensity: number;
12-
setSunlightIntensity: (intensity: number) => void;
10+
planeMeshes: PlaneMeshes;
11+
sunlightIntensity: number;
12+
setSunlightIntensity: (intensity: number) => void;
1313
}
1414

1515
export const EnvironmentContext = createContext<EnvironmentContextType>({
16-
planeMeshes: {},
17-
sunlightIntensity: 1,
18-
setSunlightIntensity: (intensity: number) => {},
16+
planeMeshes: {},
17+
sunlightIntensity: 1,
18+
setSunlightIntensity: () => {},
1919
});
2020

2121
export const useEnvironmentContext = () => {
22-
return useContext(EnvironmentContext);
23-
}
22+
return useContext(EnvironmentContext);
23+
};
2424

2525
export const Environment = ({ children }: { children: React.ReactNode }) => {
26-
const planes = useXRPlanes();
27-
const planeMeshes: PlaneMeshes = {};
28-
const [sunlightIntensity, setSunlightIntensity] = useState<number>(1);
29-
30-
return (
31-
<EnvironmentContext.Provider value={{ planeMeshes, sunlightIntensity, setSunlightIntensity }}>
32-
<group>
33-
{planes.map((plane, index) => {
34-
const label = plane.semanticLabel ?? 'other';
35-
if (!planeMeshes[label]) {
36-
planeMeshes[label] = [];
37-
}
38-
39-
return (
40-
<XRSpace key={label + index} space={plane.planeSpace}>
41-
<XRPlaneModel
42-
renderOrder={ -1 }
43-
plane={plane}
44-
receiveShadow={true}
45-
>
46-
<shadowMaterial
47-
side={DoubleSide}
48-
shadowSide={DoubleSide}
49-
transparent={true}
50-
opacity={0.6 * sunlightIntensity}
51-
/>
52-
</XRPlaneModel>
53-
<XRPlaneModel
54-
ref={(mesh: Mesh | null) => {
55-
if (mesh) {
56-
planeMeshes[label].push(mesh);
57-
}
58-
}}
59-
renderOrder={ -1 }
60-
plane={plane}
61-
position={[0, 0.01, 0]}
62-
>
63-
<meshBasicMaterial
64-
colorWrite={false}
65-
side={DoubleSide}
66-
/>
67-
</XRPlaneModel>
68-
</XRSpace>
69-
);
70-
})}
71-
{children}
72-
</group>
73-
</EnvironmentContext.Provider>
74-
);
75-
};
26+
const planes = useXRPlanes();
27+
const planeMeshes: PlaneMeshes = {};
28+
const [sunlightIntensity, setSunlightIntensity] = useState<number>(1);
29+
30+
return (
31+
<EnvironmentContext.Provider value={{ planeMeshes, sunlightIntensity, setSunlightIntensity }}>
32+
<group>
33+
{planes.map((plane, index) => {
34+
const label = plane.semanticLabel ?? 'other';
35+
if (!planeMeshes[label]) {
36+
planeMeshes[label] = [];
37+
}
38+
39+
return (
40+
<XRSpace key={label + index} space={plane.planeSpace}>
41+
<XRPlaneModel renderOrder={-1} plane={plane} receiveShadow={true}>
42+
<shadowMaterial side={DoubleSide} shadowSide={DoubleSide} transparent={true} opacity={0.6 * sunlightIntensity} />
43+
</XRPlaneModel>
44+
<XRPlaneModel
45+
ref={(mesh: Mesh | null) => {
46+
if (mesh) {
47+
planeMeshes[label].push(mesh);
48+
}
49+
}}
50+
renderOrder={-1}
51+
plane={plane}
52+
position={[0, 0.01, 0]}
53+
>
54+
<meshBasicMaterial colorWrite={false} side={DoubleSide} />
55+
</XRPlaneModel>
56+
</XRSpace>
57+
);
58+
})}
59+
{children}
60+
</group>
61+
</EnvironmentContext.Provider>
62+
);
63+
};

‎app/src/components/xr/Panel.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { GroupProps } from '@react-three/fiber';
1+
import { ThreeElements } from '@react-three/fiber';
22
import { Container, Root } from '@react-three/uikit';
33
import { colors } from '@react-three/uikit-default';
44
import { X } from '@react-three/uikit-lucide';
55
import { useState } from 'react';
66
import { Billboard } from './Billboard.js';
77
import { DragController, Draggable } from './controls/Draggable.tsx';
88

9+
type GroupProps = ThreeElements['group'];
10+
911
export function Panel({ open = true, onToggle, children, ...props }: { open?: boolean; onToggle: (isOpen: boolean) => void; children: React.ReactNode } & GroupProps) {
1012
const [isDragging, setIsDragging] = useState(true);
1113

0 commit comments

Comments
 (0)