gaesup-world 0.0.1

package/src/gaesup/tools/minimap/style.css.ts

@@ -0,0 +1,144 @@
+import { keyframes, style } from "@vanilla-extract/css";
+import { fixed, flex_absolute } from "../../../styles/recipe/index.css";
+import { sprinkles } from "../../../styles/sprinkles/index.css";
+import { vars } from "../../../styles/theme.css";
+
+export const pulseWhite = keyframes({
+  "0%": {
+    boxShadow: "0 0 0 0 rgba(255, 255, 255, 0.7)",
+    opacity: 1,
+  },
+  "70%": {
+    boxShadow: "0 0 0 10px rgba(255, 255, 255, 0)",
+    opacity: 0.7,
+  },
+  "100%": {
+    boxShadow: "0 0 0 0 rgba(255, 255, 255, 0)",
+    opacity: 1,
+  },
+});
+
+export const avatar = style([
+  flex_absolute({
+    center: true,
+  }),
+  {
+    width: "2rem",
+    height: "2rem",
+    borderRadius: "50%",
+    background: "rgba(5,222,250,1)",
+    boxShadow: "0 0 10px rgba(5,222,250,1)",
+    border: "2px solid transparent",
+    objectFit: "cover",
+    zIndex: 100,
+    animation: `${pulseWhite} 2s infinite`,
+  },
+]);
+
+export const avatarImage = style([
+  {
+    width: "4rem",
+    height: "4rem",
+    borderRadius: "50%",
+    background: vars.gradient.purple,
+    border: "2px solid transparent",
+    objectFit: "cover",
+  },
+]);
+
+export const border = style([
+  {
+    width: "4rem",
+    height: "4rem",
+    borderRadius: "50%",
+    boxShadow: "0 0 0 0 rgba(255, 255, 255, 1)",
+    transform: "scale(1)",
+    animation: `${pulseWhite} 2s infinite`,
+    cursor: "pointer",
+    transition: "all 0.5s ease-in",
+    selectors: {
+      "&:hover": {
+        transform: "scale(1.1)",
+      },
+    },
+  },
+]);
+
+export const minimap = style([
+  fixed({
+    south_east: true,
+  }),
+  sprinkles({
+    w: {
+      mobile: "12",
+      tablet: "14",
+      laptop: "16",
+      desktop: "19",
+    },
+    h: {
+      mobile: "12",
+      tablet: "14",
+      laptop: "16",
+      desktop: "19",
+    },
+  }),
+  {
+    margin: "1rem",
+    borderRadius: "50%",
+    background: "rgba(0, 0, 0, 0.9)",
+    boxShadow: `0 0 10px rgba(0, 0, 0, 0.9)`,
+    WebkitBackdropFilter: "blur(10px)",
+    backdropFilter: "blur(10px)",
+  },
+]);
+
+export const minimapOuter = style([
+  flex_absolute({
+    center: true,
+  }),
+]);
+
+export const minimapInner = style([
+  flex_absolute({
+    center: true,
+  }),
+  sprinkles({
+    w: {
+      mobile: "11",
+      tablet: "13",
+      laptop: "15",
+      desktop: "18",
+    },
+    h: {
+      mobile: "11",
+      tablet: "13",
+      laptop: "15",
+      desktop: "18",
+    },
+  }),
+  {
+    zIndex: 2,
+    borderRadius: "50%",
+    background: "rgba(0, 0, 0, 0.9)",
+    overflow: "hidden",
+  },
+]);
+
+export const text = style([
+  {
+    fontSize: "1rem",
+    color: "white",
+    textShadow: "0 0 10px black",
+  },
+]);
+
+export const minimapObject = style([
+  flex_absolute({}),
+  {
+    borderRadius: "2px",
+    background: "rgba(99,251,215,0.4)",
+    boxShadow: "0 0 10px rgba(99,251,215,0.4)",
+    border: "2px solid rgba(99,251,215,1)",
+    opacity: 0.5,
+  },
+]);

package/src/gaesup/tools/style.css.ts

@@ -0,0 +1,34 @@
+import { style } from "@vanilla-extract/css";
+import { fixed } from "../../styles/recipe/index.css";
+
+export const footer = style([
+  fixed({
+    south: true,
+  }),
+  {
+    width: "100%",
+    height: "25rem",
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
+    gridTemplateRows: "repeat(2, 1fr)",
+  },
+]);
+
+export const footerUpper = style([
+  {
+    gridColumn: "1/4",
+    gridRow: "1/2",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+]);
+
+export const footerLower = style([
+  {
+    gridColumn: "1/4",
+    gridRow: "2/3",
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
+  },
+]);

package/src/gaesup/utils/constant.ts

@@ -0,0 +1 @@
+export const S3 = "https://jiggloghttps.s3.ap-northeast-2.amazonaws.com/gltf";

package/src/gaesup/utils/ray.ts

@@ -0,0 +1,23 @@
+import { Collider } from "@dimforge/rapier3d-compat";
+import { useRapier } from "@react-three/rapier";
+import { MutableRefObject } from "react";
+import { rayType } from "../controller/type";
+
+export const getRayHit = <T extends rayType>({
+  ray,
+  ref,
+}: {
+  ray: T;
+  ref: MutableRefObject<Collider>;
+}) => {
+  const { world } = useRapier();
+  return world.castRay(
+    ray.rayCast,
+    ray.length,
+    true,
+    undefined,
+    undefined,
+    ref.current,
+    undefined
+  );
+};

package/src/gaesup/utils/ref.ts

@@ -0,0 +1,17 @@
+import { ForwardedRef, useEffect, useRef } from "react";
+
+export const useForwardRef = <T>(
+  ref: ForwardedRef<T>,
+  initialValue: any = null
+) => {
+  const targetRef = useRef<T>(initialValue);
+  useEffect(() => {
+    if (!ref) return;
+    if (typeof ref === "function") {
+      ref(targetRef.current);
+    } else {
+      targetRef.current = ref.current;
+    }
+  }, [ref]);
+  return targetRef;
+};

package/src/gaesup/utils/vector.ts

@@ -0,0 +1,40 @@
+import * as THREE from "three";
+
+export function isValidOrZero(
+  condision: boolean,
+  vector: THREE.Vector3
+): THREE.Vector3 {
+  return condision ? vector : new THREE.Vector3(0, 0, 0);
+}
+
+export function isValidOrOne(
+  condision: boolean,
+  vector: THREE.Vector3
+): THREE.Vector3 {
+  return condision ? vector : new THREE.Vector3(1, 1, 1);
+}
+
+export function V3(x?: number, y?: number, z?: number): THREE.Vector3 {
+  return new THREE.Vector3(x, y, z);
+}
+
+export function V30(): THREE.Vector3 {
+  return new THREE.Vector3(0, 0, 0);
+}
+
+export function V31(): THREE.Vector3 {
+  return new THREE.Vector3(1, 1, 1);
+}
+
+export function Qt(
+  x?: number,
+  y?: number,
+  z?: number,
+  w?: number
+): THREE.Quaternion {
+  return new THREE.Quaternion(x, y, z, w);
+}
+
+export function Elr(x: number, y: number, z: number): THREE.Euler {
+  return new THREE.Euler(x, y, z);
+}

package/src/gaesup/world/index.tsx

@@ -0,0 +1,17 @@
+import initGaesupWorld from "../initial/gaesupWorld";
+import { initGaesupWorldPropsType } from "../initial/gaesupWorld/type";
+import {
+  GaesupWorldContext,
+  GaesupWorldDispatchContext,
+} from "../stores/context/gaesupworld";
+
+export default function GaesupWorld(props: initGaesupWorldPropsType) {
+  const { gaesupProps } = initGaesupWorld(props);
+  return (
+    <GaesupWorldContext.Provider value={gaesupProps.value}>
+      <GaesupWorldDispatchContext.Provider value={gaesupProps.dispatch}>
+        {props.children}
+      </GaesupWorldDispatchContext.Provider>
+    </GaesupWorldContext.Provider>
+  );
+}

package/src/gaesup/world/type.ts

@@ -0,0 +1,10 @@
+import { Dispatch } from "react";
+import { gaesupWorldPropType } from "../stores/context/gaesupworld/type";
+
+export type gaesupWorldInitType = {
+  value: gaesupWorldPropType;
+  dispatch: Dispatch<{
+    type: string;
+    payload?: Partial<gaesupWorldPropType>;
+  }>;
+};