Tom Boullay
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { useState } from "react";
|
|
import { Text } from "@react-three/drei";
|
|
import { RepairCaseObject } from "@/components/three/gameplay/RepairCaseObject";
|
|
import { RepairModuleSlot } from "@/components/three/gameplay/RepairModuleSlot";
|
|
import {
|
|
REPAIR_GAME_MODULE_SLOTS,
|
|
REPAIR_GAME_ZONE_LABEL,
|
|
REPAIR_GAME_ZONE_ORIGIN,
|
|
REPAIR_GAME_ZONE_RADIUS,
|
|
} from "@/data/gameplay/repairGameConfig";
|
|
|
|
export function RepairGameZone(): React.JSX.Element {
|
|
const [caseOpen, setCaseOpen] = useState(false);
|
|
|
|
return (
|
|
<group>
|
|
<mesh
|
|
position={[
|
|
REPAIR_GAME_ZONE_ORIGIN[0],
|
|
0.025,
|
|
REPAIR_GAME_ZONE_ORIGIN[2],
|
|
]}
|
|
rotation={[-Math.PI / 2, 0, 0]}
|
|
>
|
|
<ringGeometry
|
|
args={[REPAIR_GAME_ZONE_RADIUS - 0.08, REPAIR_GAME_ZONE_RADIUS, 96]}
|
|
/>
|
|
<meshBasicMaterial color="#38bdf8" transparent opacity={0.72} />
|
|
</mesh>
|
|
|
|
<mesh
|
|
position={[
|
|
REPAIR_GAME_ZONE_ORIGIN[0],
|
|
0.02,
|
|
REPAIR_GAME_ZONE_ORIGIN[2],
|
|
]}
|
|
rotation={[-Math.PI / 2, 0, 0]}
|
|
>
|
|
<circleGeometry args={[REPAIR_GAME_ZONE_RADIUS, 96]} />
|
|
<meshBasicMaterial color="#0ea5e9" transparent opacity={0.12} />
|
|
</mesh>
|
|
|
|
<Text
|
|
position={[
|
|
REPAIR_GAME_ZONE_ORIGIN[0],
|
|
3.1,
|
|
REPAIR_GAME_ZONE_ORIGIN[2] - 1.8,
|
|
]}
|
|
rotation={[0, 0, 0]}
|
|
fontSize={0.55}
|
|
maxWidth={5.5}
|
|
textAlign="center"
|
|
anchorX="center"
|
|
anchorY="middle"
|
|
color="#f8fafc"
|
|
outlineWidth={0.025}
|
|
outlineColor="#0f172a"
|
|
>
|
|
{REPAIR_GAME_ZONE_LABEL}
|
|
</Text>
|
|
|
|
<RepairCaseObject
|
|
position={REPAIR_GAME_ZONE_ORIGIN}
|
|
open={caseOpen}
|
|
onToggle={() => setCaseOpen((value) => !value)}
|
|
/>
|
|
|
|
{REPAIR_GAME_MODULE_SLOTS.map((slot) => (
|
|
<RepairModuleSlot
|
|
key={slot.label}
|
|
label={slot.label}
|
|
position={[
|
|
REPAIR_GAME_ZONE_ORIGIN[0] + slot.offset[0],
|
|
REPAIR_GAME_ZONE_ORIGIN[1] + slot.offset[1],
|
|
REPAIR_GAME_ZONE_ORIGIN[2] + slot.offset[2],
|
|
]}
|
|
/>
|
|
))}
|
|
</group>
|
|
);
|
|
}
|