gaesup-world 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gaesup-world",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "homepage": "https://jigglypop.github.io/gaesup-world/",
   "scripts": {

package/src/gaesup/animation/actions.ts

@@ -5,7 +5,7 @@ import { animationTagType, groundRayType } from "../controller/type";
 import {
   GaesupWorldContext,
   GaesupWorldDispatchContext,
-} from "../stores/context/gaesupworld";
+} from "../world/context";
 
 export type playActionsType = {
   outerGroupRef: RefObject<THREE.Group>;

package/src/gaesup/camera/control/normal.ts

@@ -11,6 +11,6 @@ export default function normal(prop: cameraPropType) {
     .clone()
     .add(V3(perspectiveCamera.XZDistance, perspectiveCamera.YDistance, 0));
 
-  state.camera.position.lerp(cameraPosition, 0.2);
+  state.camera.position.lerp(cameraPosition, 1);
   state.camera.lookAt(activeState.position.clone());
 }

package/src/gaesup/camera/control/orbit.ts

@@ -17,7 +17,7 @@ export default function orbit(prop: cameraPropType) {
       .add(V3(0, perspectiveCamera.YDistance, 0))
   );
 
-  state.camera.position.lerp(cameraPosition, 0.2);
+  state.camera.position.lerp(cameraPosition, 0.5);
   state.camera.quaternion.copy(
     activeState.quat
       .clone()

package/src/gaesup/camera/index.tsx

@@ -7,10 +7,10 @@ import {
 import { useFrame, useThree } from "@react-three/fiber";
 import { useContext } from "react";
 import * as THREE from "three";
+import { GaesupControllerContext } from "../controller/context";
 import { propType, refsType } from "../controller/type";
 import { cameraPropType } from "../physics/type";
-import { GaesupControllerContext } from "../stores/context/controller";
-import { GaesupWorldContext } from "../stores/context/gaesupworld";
+import { GaesupWorldContext } from "../world/context";
 import cameraCollisionDetector from "./cameraCollisionDetecter";
 import mapControl from "./control/map";
 import normal from "./control/normal";
@@ -34,7 +34,7 @@ export default function Camera({
   const { rigidBodyRef, outerGroupRef } = refs;
   const { cameraRay } = prop;
   const { checkCollision } = cameraCollisionDetector(prop);
-  const { scene, camera } = useThree();
+  const { scene } = useThree();
   const { activeState } = worldContext;
 
   const intersectObjectMap: { [uuid: string]: THREE.Object3D } = {};

package/src/gaesup/component/gltf/AirplaneGltf.tsx

@@ -1,5 +1,5 @@
 import { Ref, forwardRef, useContext } from "react";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { GaesupWorldContext } from "../../world/context";
 
 export const AirplaneInnerGroupRef = forwardRef((_, ref: Ref<THREE.Group>) => {
   const { airplaneGltf: gltf } = useContext(GaesupWorldContext);

package/src/gaesup/component/gltf/CharacterGltf.tsx

@@ -4,7 +4,7 @@ import playActions from "../../animation/actions";
 import { groundRayType, propType, refsType } from "../../controller/type";
 import initCallback from "../../initial/callback";
 import { callbackType } from "../../initial/callback/type";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { GaesupWorldContext } from "../../world/context";
 
 export type characterGltfType = {
   prop: propType;

package/src/gaesup/component/gltf/VehicleGltf.tsx

@@ -1,5 +1,5 @@
 import { Ref, forwardRef, useContext } from "react";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { GaesupWorldContext } from "../../world/context";
 
 export const VehicleInnerGroupRef = forwardRef((_, ref: Ref<THREE.Group>) => {
   const { vehicleGltf: gltf } = useContext(GaesupWorldContext);

package/src/gaesup/component/gltf/WheelJoint.tsx

@@ -1,7 +1,7 @@
 import { RapierRigidBody } from "@react-three/rapier";
 import { createRef, useContext, useRef } from "react";
 import { propType } from "../../controller/type";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { GaesupWorldContext } from "../../world/context";
 import { WheelRegidBodyRef } from "../ref/vehicle";
 
 export function Wheels({ prop }: { prop: propType }) {

package/src/gaesup/component/ref/airplane.tsx

@@ -9,9 +9,9 @@ import {
 import { ReactNode, Ref, forwardRef, useContext } from "react";
 import * as THREE from "three";
 import { controllerType, groundRayType, propType } from "../../controller/type";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
 import { getRayHit } from "../../utils/ray";
 import { useForwardRef } from "../../utils/ref";
+import { GaesupWorldContext } from "../../world/context";
 
 export const AirplaneRigidBody = forwardRef(
   (

package/src/gaesup/component/ref/character.tsx

@@ -15,9 +15,9 @@ import {
   propType,
   slopeRayType,
 } from "../../controller/type";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
 import { getRayHit } from "../../utils/ray";
 import { useForwardRef } from "../../utils/ref";
+import { GaesupWorldContext } from "../../world/context";
 
 export const CharacterRigidBody = forwardRef(
   (

package/src/gaesup/component/ref/vehicle.tsx

@@ -10,8 +10,8 @@ import {
 import { ReactNode, Ref, RefObject, forwardRef, useContext } from "react";
 import * as THREE from "three";
 import { controllerType, propType } from "../../controller/type";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
 import { S3 } from "../../utils/constant";
+import { GaesupWorldContext } from "../../world/context";
 
 export const VehicleRigidBody = forwardRef(
   (

package/src/gaesup/component/setInit.ts

@@ -1,13 +1,13 @@
 import { RapierRigidBody } from "@react-three/rapier";
 import { RefObject, useContext, useEffect } from "react";
-import { GaesupWorldContext } from "../stores/context/gaesupworld";
 import { V3 } from "../utils/vector";
+import { GaesupWorldContext } from "../world/context";
 
 export default function setInit(rigidBodyRef: RefObject<RapierRigidBody>) {
   const { activeState } = useContext(GaesupWorldContext);
   useEffect(() => {
     rigidBodyRef.current?.setTranslation(
-      activeState.position.add(V3(0, 2, 0)),
+      activeState.position.add(V3(0, 1, 0)),
       false
     );
   }, []);

package/src/gaesup/{stores/context/controller → controller/context}/index.ts

@@ -1,6 +1,7 @@
 import { createContext } from "react";
-import { V3 } from "../../../utils/vector";
-import { dispatchType } from "../gaesupworld/type";
+
+import { dispatchType } from "../../tools/type";
+import { V3 } from "../../utils/vector";
 import {
   gaesupControllerType,
   orthographicCameraType,

package/src/gaesup/{stores/context/controller → controller/context}/type.ts

@@ -1,6 +1,26 @@
-import { OrthographicCameraProps } from "@react-three/fiber";
+import { GroupProps, OrthographicCameraProps } from "@react-three/fiber";
 import { Dispatch } from "react";
-import { airplaneType, characterType, vehicleType } from "../../airplane/type";
+
+export interface airplaneType extends GroupProps {
+  angleChange?: THREE.Vector3;
+  maxAngle?: THREE.Vector3;
+  maxSpeed?: number;
+  accelRatio?: number;
+}
+
+export interface vehicleType extends GroupProps {
+  angleChange?: THREE.Vector3;
+  maxAngle?: THREE.Vector3;
+  maxSpeed?: number;
+  accelRatio?: number;
+}
+
+export interface characterType extends GroupProps {
+  angleChange?: THREE.Vector3;
+  maxAngle?: THREE.Vector3;
+  maxSpeed?: number;
+  accelRatio?: number;
+}
 
 export type perspectiveCameraType = {
   cameraType?: "perspective";

package/src/gaesup/controller/index.tsx

@@ -8,13 +8,14 @@ import { Airplane } from "../component/Airplane";
 import { Character } from "../component/Character";
 import { Vehicle } from "../component/Vehicle";
 import initControllerProps from "../initial/controller";
+
+import { GaesupWorldContext } from "../world/context";
 import {
   GaesupControllerContext,
   GaesupControllerDispatchContext,
   gaesupControllerDefault,
-} from "../stores/context/controller";
-import { gaesupControllerReducer } from "../stores/context/controller/reducer";
-import { GaesupWorldContext } from "../stores/context/gaesupworld";
+} from "./context";
+import { gaesupControllerReducer } from "./context/reducer";
 import { controllerType, propType, refsType } from "./type";
 
 export default function GaesupController(props: controllerType) {

package/src/gaesup/controller/type.ts

@@ -11,17 +11,15 @@ import * as THREE from "three";
 import { cameraRayType } from "../camera/type";
 import { callbackType } from "../initial/callback/type";
 
+import { keyControlType } from "../world/context/type";
 import {
   airplaneType,
   characterType,
-  vehicleType,
-} from "../stores/airplane/type";
-import {
   gaesupCameraOptionType,
   gaesupCameraPropType,
   perspectiveCameraPropType,
-} from "../stores/context/controller/type";
-import { keyControlType } from "../stores/control/type";
+  vehicleType,
+} from "./context/type";
 
 export type constantType = {
   jumpSpeed: number;

package/src/gaesup/gaesupProps/index.tsx

@@ -4,7 +4,7 @@ import * as THREE from "three";
 import {
   GaesupWorldContext,
   GaesupWorldDispatchContext,
-} from "../stores/context/gaesupworld";
+} from "../world/context";
 
 export default function GaeSupProps({
   text,

package/src/gaesup/initial/callback/index.ts

@@ -7,7 +7,7 @@ import { animationTagType } from "../../controller/type";
 import {
   GaesupWorldContext,
   GaesupWorldDispatchContext,
-} from "../../stores/context/gaesupworld";
+} from "../../world/context";
 import { callbackPropType, initCallbackType } from "./type";
 
 export default function initCallback({

package/src/gaesup/initial/callback/type.ts

@@ -7,10 +7,12 @@ import {
   propType,
   slopeRayType,
 } from "../../controller/type";
-import { activeStateType } from "../../stores/active/type";
-import { animationPropType } from "../../stores/animation/type";
-import { keyControlType } from "../../stores/control/type";
-import { statesType } from "../../stores/states/type";
+import {
+  activeStateType,
+  animationPropType,
+  keyControlType,
+  statesType,
+} from "../../world/context/type";
 
 export type initCallbackType = {
   prop: propType;

package/src/gaesup/initial/controller/index.ts

@@ -9,11 +9,12 @@ import {
   refsType,
   slopeRayType,
 } from "../../controller/type";
+
 import {
   GaesupWorldContext,
   GaesupWorldDispatchContext,
-} from "../../stores/context/gaesupworld";
-import { keyControlType } from "../../stores/control/type";
+} from "../../world/context";
+import { keyControlType } from "../../world/context/type";
 import initDebug from "./initDebug";
 
 export default function initControllerProps({

package/src/gaesup/initial/gaesupWorld/collider/index.ts

@@ -1,5 +1,5 @@
 import { Dispatch } from "react";
-import { gaesupWorldPropType } from "../../../stores/context/gaesupworld/type";
+import { gaesupWorldPropType } from "../../../world/context/type";
 import { innerColliderPropType } from "../type";
 import { airplane } from "./airplane";
 import { character } from "./character";

package/src/gaesup/initial/gaesupWorld/index.ts

@@ -1,58 +1,58 @@
-import { useMemo, useReducer } from "react";
-import { activeStateDefault } from "../../stores/active";
-import { animationDefault } from "../../stores/animation";
-import {
-  airplaneColliderDefault,
-  characterColliderDefault,
-  vehicleColliderDefault,
-} from "../../stores/collider";
-import { modeDefault } from "../../stores/context/gaesupworld";
-import { gaesupReducer } from "../../stores/context/gaesupworld/reducer";
-import { controlDefault } from "../../stores/control";
-import { gameboyDefault } from "../../stores/gameboy";
-import { joyStickDefault } from "../../stores/joystick";
-import { minimapDefault } from "../../stores/minimap";
-import { statesDefault } from "../../stores/states";
-import { urlDefault } from "../../stores/url";
-import { V3 } from "../../utils/vector";
+import { useEffect, useMemo, useReducer } from "react";
+
+import { gaesupWorldDefault } from "../../world/context";
+import { gaesupWorldReducer } from "../../world/context/reducer";
 import initColider from "./collider";
 import { initGaesupWorldPropsType } from "./type";
 
 export default function initGaesupWorld(props: initGaesupWorldPropsType) {
-  const [value, dispatch] = useReducer(gaesupReducer, {
-    activeState: {
-      ...activeStateDefault,
-      ...{ position: props.startPosition || V3(0, 2, 5) },
-    },
+  const [value, dispatch] = useReducer(gaesupWorldReducer, {
+    activeState: gaesupWorldDefault.activeState,
     characterCollider: Object.assign(
-      characterColliderDefault,
+      gaesupWorldDefault.characterCollider,
       props.characterCollider || {}
     ),
     vehicleCollider: Object.assign(
-      vehicleColliderDefault,
+      gaesupWorldDefault.vehicleCollider,
       props.vehicleCollider || {}
     ),
     airplaneCollider: Object.assign(
-      airplaneColliderDefault,
+      gaesupWorldDefault.airplaneCollider,
       props.airplaneCollider || {}
     ),
-    mode: Object.assign(modeDefault, props.mode || {}),
-    url: Object.assign(urlDefault, props.url || {}),
+    mode: Object.assign(gaesupWorldDefault.mode, props.mode || {}),
+    url: Object.assign(gaesupWorldDefault.url, props.url || {}),
     characterGltf: null,
     vehicleGltf: null,
     wheelGltf: null,
     airplaneGltf: null,
-    states: statesDefault,
+    states: gaesupWorldDefault.states,
     debug: false,
-    minimap: Object.assign(minimapDefault, props.minimap || {}),
-    joystick: joyStickDefault,
-    gameboy: gameboyDefault,
-    control: controlDefault,
+    minimap: gaesupWorldDefault.minimap,
+    joystick: gaesupWorldDefault.joystick,
+    control: gaesupWorldDefault.control,
     points: [],
     refs: null,
-    animations: animationDefault,
+    animations: gaesupWorldDefault.animations,
   });
 
+  useEffect(() => {
+    const keyboard = props.keyBoardMap.reduce((maps, keyboardMapItem) => {
+      maps[keyboardMapItem.name] = false;
+      return maps;
+    }, {});
+    const assignedControl = Object.assign(value.control, keyboard);
+
+    dispatch({
+      type: "update",
+      payload: {
+        control: {
+          ...assignedControl,
+        },
+      },
+    });
+  }, []);
+
   const gaesupProps = useMemo(
     () => ({ value, dispatch }),
     [

package/src/gaesup/initial/gaesupWorld/type.ts

@@ -1,19 +1,16 @@
 import { Dispatch, ReactNode } from "react";
+import { joyStickInnerType } from "../../tools/joystick/type";
+import { minimapInnerType } from "../../tools/minimap/type";
+import { keyboardMapType } from "../../tools/type";
 import {
   airplaneColliderType,
   characterColliderType,
-  vehicleColliderType,
-} from "../../stores/collider";
-
-import {
-  gaesupControllerPropType,
   gaesupWorldPartialPropType,
   gaesupWorldPropType,
-} from "../../stores/context/gaesupworld/type";
-import { gameboyType } from "../../stores/gameboy/type";
-import { joyStickType } from "../../stores/joystick/type";
-import { minimapType } from "../../stores/minimap/type";
-import { urlType } from "../../stores/url/type";
+  modeType,
+  urlType,
+  vehicleColliderType,
+} from "../../world/context/type";
 import { getGltfResultType } from "./collider/gltf";
 
 export type initGaesupWorldPropsType = {
@@ -24,11 +21,11 @@ export type initGaesupWorldPropsType = {
   characterCollider?: characterColliderType;
   vehicleCollider?: vehicleColliderType;
   airplaneCollider?: airplaneColliderType;
-  mode?: gaesupControllerPropType;
+  mode?: modeType;
   debug?: boolean;
-  minimap?: Omit<minimapType, "props">;
-  joystick?: joyStickType;
-  gameboy?: gameboyType;
+  minimap?: Omit<minimapInnerType, "props">;
+  joystick?: joyStickInnerType;
+  keyBoardMap?: keyboardMapType;
 };
 
 export type innerColliderPropType = {

package/src/gaesup/physics/airplane/direction.ts

@@ -12,8 +12,6 @@ export default function direction(prop: calcPropType) {
   const { forward, backward, leftward, rightward, shift, space } = control;
   const { angleChange, maxAngle, accelRatio } = airplane;
 
-  console.log(Number(joystick.joyStickOrigin.isUp));
-
   let boost = 0;
   if (mode.controller === "joystick") {
     boost = space

package/src/gaesup/physics/airplane/turn.ts

@@ -3,7 +3,6 @@ import { calcPropType } from "../type";
 export default function turn(prop: calcPropType) {
   const {
     rigidBodyRef,
-    innerGroupRef,
     worldContext: { activeState },
   } = prop;
 

package/src/gaesup/physics/character/direction.ts

@@ -1,9 +1,8 @@
 import { RootState } from "@react-three/fiber";
-import { activeStateType } from "../../stores/active/type";
 
-import { gaesupControllerPropType } from "../../stores/context/gaesupworld/type";
-import { joyStickType } from "../../stores/joystick/type";
+import { joyStickInnerType } from "../../tools/joystick/type";
 import { V3 } from "../../utils/vector";
+import { activeStateType, modeType } from "../../world/context/type";
 import { calcPropType } from "../type";
 
 export function joystickDirection() {}
@@ -17,8 +16,8 @@ export function orbitDirection({
 }: {
   state: RootState;
   activeState: activeStateType;
-  mode: gaesupControllerPropType;
-  joystick: joyStickType;
+  mode: modeType;
+  joystick: joyStickInnerType;
   control: {
     [key: string]: boolean;
   };
@@ -26,8 +25,9 @@ export function orbitDirection({
   const { forward, backward, leftward, rightward } = control;
   let start = 0;
   if (mode.controller === "joystick") {
-    activeState.euler.y =
-      -state.camera.rotation.y - joystick.joyStickOrigin.angle - Math.PI / 2;
+    if (!joystick.joyStickOrigin.isCenter)
+      activeState.euler.y =
+        -state.camera.rotation.y - joystick.joyStickOrigin.angle - Math.PI / 2;
     start = joystick.joyStickOrigin.isOn ? 1 : 0;
   } else {
     activeState.euler.y +=
@@ -50,8 +50,8 @@ export function normalDirection({
 }: {
   state: RootState;
   activeState: activeStateType;
-  mode: gaesupControllerPropType;
-  joystick: joyStickType;
+  mode: modeType;
+  joystick: joyStickInnerType;
   control: {
     [key: string]: boolean;
   };
@@ -59,8 +59,9 @@ export function normalDirection({
   const { forward, backward, leftward, rightward } = control;
   let start = 0;
   if (mode.controller === "joystick") {
-    activeState.euler.y =
-      -state.camera.rotation.y - joystick.joyStickOrigin.angle - Math.PI / 2;
+    if (!joystick.joyStickOrigin.isCenter)
+      activeState.euler.y =
+        -state.camera.rotation.y - joystick.joyStickOrigin.angle - Math.PI / 2;
     start = joystick.joyStickOrigin.isOn ? 1 : 0;
   } else {
     if (forward) {

package/src/gaesup/physics/index.ts

@@ -1,14 +1,14 @@
-import { useFrame } from "@react-three/fiber";
-
 import { useContext } from "react";
 import { propType } from "../controller/type";
 
 import { useRapier } from "@react-three/rapier";
-import { GaesupControllerContext } from "../stores/context/controller";
+import { GaesupControllerContext } from "../controller/context";
+
+import { useFrame } from "@react-three/fiber";
 import {
   GaesupWorldContext,
   GaesupWorldDispatchContext,
-} from "../stores/context/gaesupworld";
+} from "../world/context";
 import airplaneCalculation from "./airplane";
 import characterCalculation from "./character";
 import check from "./check";
@@ -21,6 +21,7 @@ export default function calculation(prop: propType) {
   const controllerContext = useContext(GaesupControllerContext);
   const dispatch = useContext(GaesupWorldDispatchContext);
   const { mode } = worldContext;
+
   useFrame((state, delta) => {
     const { rigidBodyRef, outerGroupRef, innerGroupRef } = prop;
     if (

package/src/gaesup/physics/type.ts

@@ -2,11 +2,8 @@ import { RootState } from "@react-three/fiber";
 import { propType } from "../controller/type";
 
 import { World } from "@dimforge/rapier3d-compat";
-import { gaesupControllerType } from "../stores/context/controller/type";
-import {
-  gaesupDisptachType,
-  gaesupWorldPropType,
-} from "../stores/context/gaesupworld/type";
+import { gaesupControllerType } from "../controller/context/type";
+import { dispatchType, gaesupWorldPropType } from "../world/context/type";
 
 export type SetAtom<Args extends unknown[], Result> = (...args: Args) => Result;
 
@@ -16,7 +13,7 @@ export type calcPropType = propType & {
   worldContext?: gaesupWorldPropType;
   controllerContext?: gaesupControllerType;
   delta?: number;
-  dispatch?: gaesupDisptachType;
+  dispatch?: dispatchType<gaesupWorldPropType>;
   world: World;
 };
 

package/src/gaesup/tools/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import { dispatchType, gaesupToolsPropType } from "./type";
+
+export const GaesupToolsContext = createContext<gaesupToolsPropType>(null);
+export const GaesupToolsDispatchContext =
+  createContext<dispatchType<gaesupToolsPropType>>(null);

package/src/gaesup/tools/gameboy/GameBoyButton.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
-import { usePushKey } from "../../stores/control";
+import { GaesupToolsContext } from "../context";
+import { usePushKey } from "../pushKey";
 import * as style from "./style.css";
 
 export type gameBoyButtonType = {
@@ -10,7 +10,9 @@ export type gameBoyButtonType = {
 };
 
 export default function GameBoyButton({ tag, value, icon }: gameBoyButtonType) {
-  const { gameboy } = useContext(GaesupWorldContext);
+  const {
+    gameboy: { gameboyButtonStyle },
+  } = useContext(GaesupToolsContext);
 
   const { pushKey } = usePushKey();
 
@@ -36,7 +38,7 @@ export default function GameBoyButton({ tag, value, icon }: gameBoyButtonType) {
       }}
       onPointerDown={() => onMouseDown()}
       onPointerUp={() => onMouseLeave()}
-      style={gameboy.gameboyButtonStyle}
+      style={gameboyButtonStyle}
     >
       {icon}
     </button>

package/src/gaesup/{stores/gameboy/index.ts → tools/gameboy/default.ts}

@@ -1,3 +1,3 @@
 export const gameboyDefault = {
-  on: false,
+  on: true,
 };

package/src/gaesup/tools/gameboy/index.tsx

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { GaesupToolsContext } from "../context";
 import GameBoyButton, { gameBoyButtonType } from "./GameBoyButton";
 import * as style from "./style.css";
 
@@ -15,10 +15,12 @@ export const GameBoyDirections = [
 ];
 
 export default function GameBoy() {
-  const { gameboy } = useContext(GaesupWorldContext);
+  const {
+    gameboy: { gameboyStyle, gameboyInnerStyle },
+  } = useContext(GaesupToolsContext);
   return (
-    <div className={style.gameBoy} style={gameboy.gameboyStyle}>
-      <div className={style.gameBoyInner} style={gameboy.gameboyInnerStyle}>
+    <div className={style.gameBoy} style={gameboyStyle}>
+      <div className={style.gameBoyInner} style={gameboyInnerStyle}>
         {GameBoyDirections.map((item: gameBoyButtonType, key: number) => {
           return (
             <GameBoyButton

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

@@ -14,7 +14,7 @@ export const gameBoy = style([
     south: true,
   }),
   flex({
-    column: "6",
+    column: "7",
   }),
   {
     width: "100%",
@@ -26,7 +26,7 @@ export const gameBoyInner = style([
     row: "center",
   }),
   {
-    margin: "1rem",
+    margin: "5rem",
     padding: "1rem",
     borderRadius: "50%",
     gridTemplateColumns: "1fr 1fr 1fr",