gaesup-world 0.0.4 → 0.0.6

package/dist/examples/select/App.d.ts

@@ -0,0 +1,2 @@
+import "./global.css";
+export default function App(): import("react/jsx-runtime").JSX.Element;

package/dist/examples/select/App.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./global.css";
+import Selected from "./src";
+export default function App() {
+    return _jsx(Selected, {});
+}

package/dist/examples/select/global.css.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/examples/select/global.css.js

@@ -0,0 +1,71 @@
+import { globalStyle } from "@vanilla-extract/css";
+import { vars } from "../../src/styles/theme.css";
+globalStyle(":root", {
+    background: vars.themes.background,
+    color: vars.themes.text.normal,
+});
+globalStyle("html", {
+    boxSizing: "border-box",
+    fontSize: "62.5%",
+    maxWidth: "100%",
+    overflowX: "hidden",
+    padding: 0,
+});
+globalStyle("body", {
+    overflow: "hidden",
+    position: "fixed",
+    margin: 0,
+    padding: 0,
+});
+globalStyle("*, *::before, *::after", {
+    boxSizing: "border-box",
+});
+globalStyle("a", {
+    cursor: "pointer",
+    textDecoration: "none",
+    color: "inherit",
+});
+globalStyle("input, input:focus", {
+    border: "none",
+    borderRight: "0px",
+    borderTop: "0px",
+    borderLeft: "0px",
+    borderBottom: "0px",
+    outline: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    appearance: "none",
+});
+globalStyle("button, button:focus", {
+    border: "none",
+    outline: "none",
+});
+globalStyle("input::-ms-clear", {
+    display: "none",
+});
+globalStyle('input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button', {
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    appearance: "none",
+});
+globalStyle('input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear', {
+    display: "none",
+});
+// 스크롤
+globalStyle("::-webkit-scrollbar", {
+    width: "1.8rem",
+});
+globalStyle("::-webkit-scrollbar-thumb", {
+    background: vars.gradient.purple,
+    borderRadius: "1rem",
+    border: "0.4rem solid transparent",
+    backgroundClip: "padding-box",
+});
+globalStyle("::-webkit-scrollbar-track", {
+    WebkitBackdropFilter: "blur(10px)",
+    backdropFilter: "blur(10px)",
+});
+globalStyle("input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active", {
+    transition: "background-color 10000s",
+    WebkitTextFillColor: "black !important",
+});

package/dist/examples/select/main.d.ts

@@ -0,0 +1 @@
+import "./style.css";

package/dist/examples/select/main.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./style.css";
+ReactDOM.createRoot(document.getElementById("root")).render(_jsx(React.StrictMode, { children: _jsx(App, {}) }));

package/dist/examples/select/platform/ControlledInput.d.ts

@@ -0,0 +1 @@
+export declare const ControlledInput: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/examples/select/platform/ControlledInput.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import * as style from "./style.css";
+export var ControlledInput = function (props) {
+    var value = props.value, onChange = props.onChange, rest = __rest(props, ["value", "onChange"]);
+    var _a = useState(null), cursor = _a[0], setCursor = _a[1];
+    var ref = useRef(null);
+    useEffect(function () {
+        var input = ref.current;
+        if (input)
+            input.setSelectionRange(cursor, cursor);
+    }, [ref, cursor, value]);
+    var handleChange = function (e) {
+        setCursor(e.target.selectionStart);
+        onChange && onChange(e);
+    };
+    return (_jsx("input", __assign({ ref: ref, value: value, onChange: handleChange }, rest, { className: style.input })));
+};

package/dist/examples/select/platform/DynamicPlatforms.d.ts

@@ -0,0 +1,8 @@
+import * as THREE from "three";
+export type dynamicType = {
+    time: number | null;
+    X: THREE.Vector3;
+    Y: THREE.Vector3;
+    Qt: THREE.Quaternion;
+};
+export default function DynamicPlatforms(): import("react/jsx-runtime").JSX.Element;

package/dist/examples/select/platform/DynamicPlatforms.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "@react-three/drei";
+import { useFrame } from "@react-three/fiber";
+import { CuboidCollider, CylinderCollider, RigidBody, } from "@react-three/rapier";
+import { useMemo, useRef } from "react";
+import GaeSupProps from "../../../src/gaesup/gaesupProps";
+import { Qt, V3 } from "../../../src/gaesup/utils/vector";
+export default function DynamicPlatforms() {
+    var sideMovePlatformRef = useRef(null);
+    var verticalMovePlatformRef = useRef(null);
+    var rotatePlatformRef = useRef(null);
+    var rotationDrumRef = useRef(null);
+    // Initializ animation settings
+    var dynamic = useMemo(function () {
+        return {
+            time: null,
+            X: V3(1, 0, 0),
+            Y: V3(0, 1, 0),
+            Qt: Qt(),
+        };
+    }, []);
+    useFrame(function (state) {
+        var _a, _b, _c, _d, _e;
+        dynamic.time = state.clock.elapsedTime;
+        var time = dynamic.time, Qt = dynamic.Qt, X = dynamic.X, Y = dynamic.Y;
+        if (dynamic.time) {
+            // Move platform
+            (_a = sideMovePlatformRef.current) === null || _a === void 0 ? void 0 : _a.setNextKinematicTranslation({
+                x: 5 * Math.sin(time / 2) - 12,
+                y: -0.5,
+                z: -10,
+            });
+            // Elevate platform
+            (_b = verticalMovePlatformRef.current) === null || _b === void 0 ? void 0 : _b.setNextKinematicTranslation({
+                x: -25,
+                y: 2 * Math.sin(time / 2) + 2,
+                z: 0,
+            });
+            (_c = verticalMovePlatformRef.current) === null || _c === void 0 ? void 0 : _c.setNextKinematicRotation(Qt.setFromAxisAngle(Y, time * 0.5));
+            // Rotate platform
+            (_d = rotatePlatformRef.current) === null || _d === void 0 ? void 0 : _d.setNextKinematicRotation(Qt.setFromAxisAngle(Y, time * 0.5));
+            // Rotate drum
+            (_e = rotationDrumRef.current) === null || _e === void 0 ? void 0 : _e.setNextKinematicRotation(Qt.setFromAxisAngle(X, time * 0.5));
+        }
+    });
+    return (_jsxs(GaeSupProps, { text: "dynamic", jumpPoint: true, position: [-10, 0, -10], children: [_jsxs(RigidBody, { type: "kinematicPosition", ref: sideMovePlatformRef, colliders: false, children: [_jsx(Text, { scale: 0.5, color: "black", maxWidth: 10, textAlign: "center", position: [0, 2.5, 0], children: "Kinematic Moving Platform" }), _jsx(CuboidCollider, { args: [2.5, 0.1, 2.5] }), _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [5, 0.2, 5] }), _jsx("meshStandardMaterial", { color: "moccasin" })] })] }), _jsxs(RigidBody, { type: "kinematicPosition", position: [-25, 0, 0], ref: verticalMovePlatformRef, colliders: false, children: [_jsx(Text, { scale: 0.5, color: "black", maxWidth: 10, textAlign: "center", position: [0, 2.5, 0], rotation: [0, Math.PI / 2, 0], children: "Kinematic Elevating Platform" }), _jsx(CuboidCollider, { args: [2.5, 0.1, 2.5] }), _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [5, 0.2, 5] }), _jsx("meshStandardMaterial", { color: "moccasin" })] })] }), _jsxs(RigidBody, { type: "kinematicPosition", position: [-25, -0.5, -10], ref: rotatePlatformRef, colliders: false, children: [_jsx(Text, { scale: 0.5, color: "black", maxWidth: 10, textAlign: "center", position: [0, 2.5, 0], children: "Kinematic Rotating Platform" }), _jsx(CuboidCollider, { args: [2.5, 0.1, 2.5] }), _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [5, 0.2, 5] }), _jsx("meshStandardMaterial", { color: "moccasin" })] })] }), _jsx(Text, { scale: 0.5, color: "black", maxWidth: 10, textAlign: "center", position: [-15, 2.5, -15], children: "Kinematic Rotating Drum" }), _jsx(RigidBody, { colliders: false, type: "kinematicPosition", position: [-15, -1, -15], ref: rotationDrumRef, children: _jsxs("group", { rotation: [0, 0, Math.PI / 2], children: [_jsx(CylinderCollider, { args: [5, 1] }), _jsxs("mesh", { receiveShadow: true, children: [_jsx("cylinderGeometry", { args: [1, 1, 10] }), _jsx("meshStandardMaterial", { color: "moccasin" })] })] }) })] }));
+}

package/dist/examples/select/platform/FloatMove.d.ts

@@ -0,0 +1,14 @@
+import { Ray, RayColliderToi } from "@dimforge/rapier3d-compat";
+import * as THREE from "three";
+export type rayType = {
+    origin: THREE.Vector3;
+    dir: THREE.Vector3;
+    offset: THREE.Vector3;
+    springDir: THREE.Vector3;
+    velocity: THREE.Vector3;
+    hit: RayColliderToi | null;
+    parent: THREE.Object3D | null;
+    rayCast: Ray | null;
+    length: number;
+};
+export default function FloatMove(): import("react/jsx-runtime").JSX.Element;

package/dist/examples/select/platform/FloatMove.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { CuboidCollider, RigidBody, useRapier, vec3, } from "@react-three/rapier";
+import { useEffect, useMemo, useRef } from "react";
+import GaeSupProps from "../../../src/gaesup/gaesupProps";
+export default function FloatMove() {
+    // Preset
+    var cuboidColliderRef = useRef(null);
+    var rigidBodyRef = useRef(null);
+    var _a = useRapier(), rapier = _a.rapier, world = _a.world;
+    var ray = useMemo(function () {
+        return {
+            origin: vec3(),
+            dir: vec3({ x: 0, y: -1, z: 0 }),
+            offset: vec3(),
+            springDir: vec3(),
+            velocity: vec3(),
+            hit: null,
+            parent: null,
+            rayCast: null,
+            length: 0.8,
+        };
+    }, []);
+    ray.rayCast = new rapier.Ray(ray.origin, ray.dir);
+    var movingDir = 1;
+    useEffect(function () {
+        if (rigidBodyRef.current) {
+            rigidBodyRef.current.setEnabledRotations(false, true, false, false);
+            rigidBodyRef.current.setEnabledTranslations(true, true, false, false);
+        }
+    }, []);
+    useFrame(function () {
+        // Ray cast for moving platform
+        if (rigidBodyRef.current && ray.rayCast && cuboidColliderRef.current) {
+            ray.origin.set(rigidBodyRef.current.translation().x, rigidBodyRef.current.translation().y, rigidBodyRef.current.translation().z);
+            ray.hit = world.castRay(ray.rayCast, ray.length, false, undefined, undefined, cuboidColliderRef.current, rigidBodyRef.current);
+            // Apply moving velocity to the platform
+            if (rigidBodyRef.current.translation().x > 10) {
+                movingDir = -1;
+            }
+            else if (rigidBodyRef.current.translation().x < -5) {
+                movingDir = 1;
+            }
+            if (movingDir > 0) {
+                rigidBodyRef.current.setLinvel(ray.velocity.set(2, rigidBodyRef.current.linvel().y, 0), false);
+            }
+            else {
+                rigidBodyRef.current.setLinvel(ray.velocity.set(-2, rigidBodyRef.current.linvel().y, 0), false);
+            }
+        }
+        // Ray for moving platform
+        if (ray.hit && rigidBodyRef.current) {
+            if (ray.hit.collider.parent()) {
+                var floatingForceMove = 2.5 * (0.8 - ray.hit.toi) - rigidBodyRef.current.linvel().y * 0.15;
+                rigidBodyRef.current.applyImpulse(vec3().set(0, floatingForceMove, 0), true);
+            }
+        }
+    });
+    return (_jsx(GaeSupProps, { text: "moving", jumpPoint: true, position: [0, 5, -17], children: _jsxs(RigidBody, { mass: 1, colliders: false, ref: rigidBodyRef, children: [_jsx(CuboidCollider, { args: [1.25, 0.1, 1.25], ref: cuboidColliderRef }), _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [2.5, 0.2, 2.5] }), _jsx("meshStandardMaterial", { color: "#d8fff6", transparent: true, opacity: 0.8 })] })] }) }));
+}

package/dist/examples/select/platform/Floor.d.ts

@@ -0,0 +1 @@
+export default function Floor(): import("react/jsx-runtime").JSX.Element;

package/dist/examples/select/platform/Floor.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Grid, MeshReflectorMaterial } from "@react-three/drei";
+import { RigidBody } from "@react-three/rapier";
+export default function Floor() {
+    return (_jsxs(_Fragment, { children: [_jsx(Grid, { renderOrder: -1, position: [0, -0.8, 0], infiniteGrid: true, cellSize: 1, cellThickness: 1, sectionSize: 5, sectionThickness: 1.5, sectionColor: "#212121", fadeDistance: 300 }), _jsxs(RigidBody, { type: "fixed", children: [_jsxs("mesh", { receiveShadow: true, position: [0, -3.5, 0], children: [_jsx("boxGeometry", { args: [300, 5, 300] }), _jsx("meshStandardMaterial", { color: "lightblue" })] }), _jsxs("mesh", { receiveShadow: true, position: [0, -0.9, 0], rotation: [-Math.PI / 2, 0, 0], children: [_jsx("planeGeometry", { args: [300, 300] }), _jsx(MeshReflectorMaterial, { mirror: 0, blur: [300, 100], resolution: 2048, mixBlur: 1, mixStrength: 80, roughness: 1, depthScale: 1.2, minDepthThreshold: 0.4, maxDepthThreshold: 1.4, color: "#212121", metalness: 0.5 })] })] })] }));
+}

package/dist/examples/select/platform/RigidObjects.d.ts

@@ -0,0 +1 @@
+export default function RigidObjects(): import("react/jsx-runtime").JSX.Element;

package/dist/examples/select/platform/RigidObjects.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BallCollider, CuboidCollider, CylinderCollider, RigidBody, } from "@react-three/rapier";
+import GaeSupProps from "../../../src/gaesup/gaesupProps";
+export default function RigidObjects() {
+    return (_jsxs(GaeSupProps, { text: "RigidObjects", jumpPoint: true, position: [15, 1, 2], children: [_jsx(RigidBody, { position: [15, 1, 2], children: _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [0.5, 0.5, 0.5] }), _jsx("meshStandardMaterial", { color: "lightsteelblue" })] }) }), _jsx(RigidBody, { position: [15.1, 0, 2], children: _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [0.5, 0.5, 0.5] }), _jsx("meshStandardMaterial", { color: "lightsteelblue" })] }) }), _jsxs(RigidBody, { position: [15, 0, 0], colliders: false, children: [_jsx(CuboidCollider, { args: [0.5, 0.5, 0.5] }), _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { color: "lightsteelblue" })] })] }), _jsxs(RigidBody, { position: [15, 0, -2], colliders: false, children: [_jsx(CuboidCollider, { args: [1.5 / 2, 1.5 / 2, 1.5 / 2] }), _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [1.5, 1.5, 1.5] }), _jsx("meshStandardMaterial", { color: "lightsteelblue" })] })] }), _jsxs(RigidBody, { position: [15, 0, -5], colliders: false, children: [_jsx(CuboidCollider, { args: [1, 1, 1] }), _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [2, 2, 2] }), _jsx("meshStandardMaterial", { color: "lightsteelblue" })] })] }), _jsxs(RigidBody, { colliders: false, position: [15, 5, -10], children: [_jsx(CylinderCollider, { args: [0.03, 2.5], position: [0, 0.25, 0] }), _jsx(BallCollider, { args: [0.25] }), _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("cylinderGeometry", { args: [2.5, 0.2, 0.5] }), _jsx("meshStandardMaterial", { color: "lightsteelblue" })] })] })] }));
+}

package/dist/examples/select/platform/RoughPlane.d.ts

@@ -0,0 +1 @@
+export default function RoughPlane(): import("react/jsx-runtime").JSX.Element;

package/dist/examples/select/platform/RoughPlane.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGLTF } from "@react-three/drei";
+import { RigidBody } from "@react-three/rapier";
+import { useEffect } from "react";
+import * as THREE from "three";
+import GaeSupProps from "../../../src/gaesup/gaesupProps";
+import { S3 } from "../../../src/gaesup/utils/constant";
+export default function RoughPlane() {
+    var roughPlane = useGLTF(S3 + "/roughPlane.glb");
+    useEffect(function () {
+        roughPlane.scene.traverse(function (child) {
+            if (child instanceof THREE.Mesh &&
+                child.material instanceof THREE.MeshStandardMaterial) {
+                child.receiveShadow = true;
+            }
+        });
+    }, []);
+    return (_jsx(GaeSupProps, { text: "RoughPlane", jumpPoint: true, position: [10, -1, 10], children: _jsx(RigidBody, { type: "fixed", colliders: "trimesh", children: _jsx("primitive", { object: roughPlane.scene }) }) }));
+}

package/dist/examples/select/platform/Slopes.d.ts

@@ -0,0 +1 @@
+export default function Slopes(): import("react/jsx-runtime").JSX.Element;

package/dist/examples/select/platform/Slopes.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Html, useGLTF } from "@react-three/drei";
+import { RigidBody } from "@react-three/rapier";
+import { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import GaeSupProps from "../../../src/gaesup/gaesupProps";
+import { S3 } from "../../../src/gaesup/utils/constant";
+import { ControlledInput } from "./ControlledInput";
+export default function Slopes() {
+    // Load models
+    var slopes = useGLTF(S3 + "/slopes.glb");
+    var _a = useState(25), angle = _a[0], setAngle = _a[1];
+    var rigidBodyRef = useRef(null);
+    useEffect(function () {
+        // Receive Shadows
+        slopes.scene.traverse(function (child) {
+            if (child instanceof THREE.Mesh &&
+                child.material instanceof THREE.MeshStandardMaterial) {
+                child.receiveShadow = true;
+            }
+        });
+    }, []);
+    return (_jsxs(GaeSupProps, { text: "Slopes", jumpPoint: true, position: [-15, -0.8, 15], children: [_jsx(RigidBody, { type: "fixed", colliders: "hull", ref: rigidBodyRef, rotation: [-(angle * Math.PI) / 180, 0, 0], children: _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [10, 1, 10] }), _jsx("meshBasicMaterial", { transparent: true, opacity: 0.9 })] }) }), _jsx(Html, { zIndexRange: [1, 0], children: _jsx(ControlledInput, { type: angle, onChange: function (e) {
+                        return setAngle(e.target.value);
+                    }, value: angle }) })] }));
+}

package/dist/examples/select/platform/style.css.d.ts

@@ -0,0 +1 @@
+export declare const input: string;

package/dist/examples/select/platform/style.css.js

@@ -0,0 +1,11 @@
+import { style } from "@vanilla-extract/css";
+export var input = style([
+    {
+        width: "20rem",
+        borderRadius: "1rem",
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        padding: "1rem 2rem",
+        color: "white",
+        boxShadow: "0 0 1rem rgba(0, 0, 0, 0.5)",
+    },
+]);

package/dist/examples/select/src/index.d.ts

@@ -0,0 +1,5 @@
+export declare const keyboardMap: {
+    name: string;
+    keys: string[];
+}[];
+export default function Selected(): import("react/jsx-runtime").JSX.Element;

package/dist/examples/select/src/index.js

@@ -0,0 +1,139 @@
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Environment, KeyboardControls } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import { Physics } from "@react-three/rapier";
+import { useState } from "react";
+import { isMobile } from "react-device-detect";
+import GaesupController from "../../../src/gaesup/controller";
+import GaeSupTools from "../../../src/gaesup/tools";
+import { S3 } from "../../../src/gaesup/utils/constant";
+import GaesupWorld from "../../../src/gaesup/world";
+import FloatMove from "../platform/FloatMove";
+import Floor from "../platform/Floor";
+import RigidObjects from "../platform/RigidObjects";
+import RoughPlane from "../platform/RoughPlane";
+import * as style from "./style.css";
+import { button } from "./style.css";
+export var keyboardMap = [
+    { name: "forward", keys: ["ArrowUp", "KeyW"] },
+    { name: "backward", keys: ["ArrowDown", "KeyS"] },
+    { name: "leftward", keys: ["ArrowLeft", "KeyA"] },
+    { name: "rightward", keys: ["ArrowRight", "KeyD"] },
+    { name: "space", keys: ["Space"] },
+    { name: "shift", keys: ["Shift"] },
+    { name: "keyZ", keys: ["KeyZ"] },
+];
+export default function Selected() {
+    var CHARACTER_URL = "./gaesupyee.glb";
+    var AIRPLANE_URL = "./airplane.glb";
+    var VEHICLE_URL = S3 + "/kart2.glb";
+    var _a = useState({
+        type: "character",
+        controller: isMobile ? "joystick" : "joystick",
+    }), mode = _a[0], changeMode = _a[1];
+    var _b = useState({
+        cameraType: "perspective",
+        controlType: "orbit",
+    }), camera = _b[0], changeCamera = _b[1];
+    return (_jsxs(GaesupWorld, { debug: true, mode: __assign({}, mode), url: {
+            characterUrl: CHARACTER_URL,
+            vehicleUrl: VEHICLE_URL,
+            airplaneUrl: AIRPLANE_URL,
+        }, children: [_jsx(GaeSupTools, {}), _jsxs("div", { className: style.mainButtonContainer, children: [_jsx("button", { className: button({
+                            selected: mode.type === "character",
+                        }), onClick: function () {
+                            return changeMode(function (mode) { return ({
+                                type: "character",
+                                controller: mode.controller,
+                            }); });
+                        }, children: "CHARACTER" }), _jsx("button", { className: button({
+                            selected: mode.type === "vehicle",
+                        }), onClick: function () {
+                            return changeMode(function (mode) { return ({
+                                type: "vehicle",
+                                controller: mode.controller,
+                            }); });
+                        }, children: "VEHICLE" }), _jsx("button", { className: button({
+                            selected: mode.type === "airplane",
+                        }), onClick: function () {
+                            return changeMode(function (mode) { return ({
+                                type: "airplane",
+                                controller: mode.controller,
+                            }); });
+                        }, children: "AIRPLANE" }), _jsx("button", { className: button({
+                            selected: camera.controlType === "normal",
+                        }), onClick: function () {
+                            return changeCamera(function () { return ({
+                                cameraType: "perspective",
+                                controlType: "normal",
+                            }); });
+                        }, children: "NORMAL" }), _jsx("button", { className: button({
+                            selected: camera.controlType === "orbit" &&
+                                camera.cameraType === "perspective",
+                        }), onClick: function () {
+                            return changeCamera(function () { return ({
+                                cameraType: "perspective",
+                                controlType: "orbit",
+                            }); });
+                        }, children: "ORBIT" }), _jsx("button", { className: button({
+                            selected: camera.cameraType === "orthographic",
+                        }), onClick: function () {
+                            changeCamera(function () { return ({
+                                cameraType: "orthographic",
+                                controlType: "orbit",
+                            }); });
+                        }, children: "MAP" }), !isMobile && (_jsx("button", { className: button({
+                            selected: mode.controller === "keyboard",
+                        }), onClick: function () {
+                            changeMode(function (mode) { return ({
+                                type: mode.type,
+                                controller: "keyboard",
+                            }); });
+                        }, children: "\uD0A4\uBCF4\uB4DC" })), _jsx("button", { className: button({
+                            selected: mode.controller === "joystick",
+                        }), onClick: function () {
+                            changeMode(function (mode) { return ({
+                                type: mode.type,
+                                controller: "joystick",
+                            }); });
+                        }, children: "\uC870\uC774\uC2A4\uD2F1" }), _jsx("button", { className: button({
+                            selected: mode.controller === "gameboy",
+                        }), onClick: function () {
+                            changeMode(function (mode) { return ({
+                                type: mode.type,
+                                controller: "gameboy",
+                            }); });
+                        }, children: "\uAC8C\uC784\uBCF4\uC774" })] }), _jsxs(Canvas, { shadows: true, dpr: [1, 2], style: { width: "100dvw", height: "100dvh" }, children: [_jsx(Environment, { background: true, preset: "sunset", blur: 0.8 }), _jsx("directionalLight", { castShadow: true, "shadow-normalBias": 0.06, position: [20, 30, 10], intensity: 0.5, "shadow-mapSize": [1024, 1024], "shadow-camera-near": 1, "shadow-camera-far": 50, "shadow-camera-top": 50, "shadow-camera-right": 50, "shadow-camera-bottom": -50, "shadow-camera-left": -50 }), _jsx("ambientLight", { intensity: 0.5 }), _jsxs(Physics, { debug: true, children: [_jsx(KeyboardControls, { map: keyboardMap, children: _jsx(GaesupController, { isRider: mode.type === "vehicle" ? true : false, cameraMode: __assign({}, camera), orthographicCamera: {
+                                        zoom: 80,
+                                    }, groupProps: {
+                                        rotation: [0, Math.PI, 0],
+                                    }, onAnimate: function (_a) {
+                                        var control = _a.control, states = _a.states, playAnimation = _a.playAnimation;
+                                        var keyZ = control.keyZ;
+                                        if (keyZ) {
+                                            states.isAnimationOuter = true;
+                                            playAnimation("greet");
+                                        }
+                                        else {
+                                            states.isAnimationOuter = false;
+                                        }
+                                    } }) }), _jsx(RoughPlane, {}), _jsx(RigidObjects, {}), _jsx(FloatMove, {}), _jsx(Floor, {})] })] }), _jsx(GaeSupTools, { keyboardToolTip: {
+                    keyBoardMap: keyboardMap,
+                    keyBoardLabel: {
+                        keyZ: "GREET",
+                        space: "JUMP",
+                    },
+                } })] }));
+}

package/dist/examples/select/src/keyboardMap/character.d.ts

@@ -0,0 +1,8 @@
+export declare const characterKeyboardMap: {
+    name: string;
+    keys: string[];
+}[];
+export declare const vehicleKeyboardMap: {
+    name: string;
+    keys: string[];
+}[];

package/dist/examples/select/src/keyboardMap/character.js

@@ -0,0 +1,18 @@
+export var characterKeyboardMap = [
+    { name: "forward", keys: ["ArrowUp", "KeyW"] },
+    { name: "backward", keys: ["ArrowDown", "KeyS"] },
+    { name: "leftward", keys: ["ArrowLeft", "KeyA"] },
+    { name: "rightward", keys: ["ArrowRight", "KeyD"] },
+    { name: "jump", keys: ["Space"] },
+    { name: "run", keys: ["Shift"] },
+    { name: "greet", keys: ["KeyZ"] },
+];
+export var vehicleKeyboardMap = [
+    { name: "forward", keys: ["ArrowUp", "KeyW"] },
+    { name: "backward", keys: ["ArrowDown", "KeyS"] },
+    { name: "leftward", keys: ["ArrowLeft", "KeyA"] },
+    { name: "rightward", keys: ["ArrowRight", "KeyD"] },
+    { name: "space", keys: ["Space"] },
+    { name: "shift", keys: ["Shift"] },
+    { name: "keyZ", keys: ["KeyZ"] },
+];

package/dist/examples/select/src/keyboardMap/vehicle.d.ts

@@ -0,0 +1,4 @@
+export declare const vehicleKeyboardMap: {
+    name: string;
+    keys: string[];
+}[];

package/dist/examples/select/src/keyboardMap/vehicle.js

@@ -0,0 +1,8 @@
+export var vehicleKeyboardMap = [
+    { name: "forward", keys: ["ArrowUp", "KeyW"] },
+    { name: "backward", keys: ["ArrowDown", "KeyS"] },
+    { name: "leftward", keys: ["ArrowLeft", "KeyA"] },
+    { name: "rightward", keys: ["ArrowRight", "KeyD"] },
+    { name: "brake", keys: ["Space"] },
+    { name: "accel", keys: ["Shift"] },
+];

package/dist/examples/select/src/style.css.d.ts

@@ -0,0 +1,35 @@
+export declare const blackHanSans: string;
+export declare const main: string;
+export declare const mainButtonContainer: string;
+export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            boxShadow: "0 0 1rem rgba(5,222,250,1)";
+            color: "black";
+            ":hover": {
+                boxShadow: "0 0 2rem rgba(5,222,250,1)";
+            };
+        };
+    };
+    character: {
+        true: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            boxShadow: "0 0 1rem rgba(5,222,250,1)";
+            color: "black";
+            ":hover": {
+                boxShadow: "0 0 2rem rgba(5,222,250,1)";
+            };
+        };
+    };
+    control: {
+        true: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            boxShadow: "0 0 1rem rgba(245,177,97,1)";
+            color: "black";
+            ":hover": {
+                boxShadow: "0 0 2rem rrgba(245,177,97,1)";
+            };
+        };
+    };
+}>;