Merge branch 'dev' into main

outsung · Feb 13, 2021 · 34f57e6 · 34f57e6
2 parents 54598c6 + 0b0ed82
commit 34f57e6
Show file tree

Hide file tree

Showing 6 changed files with 216 additions and 60 deletions.
diff --git a/src/components/UserProfile/index.tsx b/src/components/UserProfile/index.tsx
@@ -1,49 +1,61 @@
 import React from 'react';
-import history from '../../utils/browserHistory';
-
 import {
   ProfileBox,
   ImageBox,
   Image,
   BoxDivider,
   FieldBox,
   Field,
-  FieldA,
-  FieldLink,
   Btn,
 } from './style';
 
+const GENDER_KR = { male: '남자', female: '여자', Private: '비공개' };
+
 type userProfileProps = {
   _id: string;
   id: string;
   nickname: string;
+  tear: string;
+  lane: string;
+  age: number;
+  gender: 'male' | 'female' | 'Private';
+  isFavorites: boolean;
+  addFavorites: (idx: string) => void;
+  removeFavorites: (idx: string) => void;
 };
-function UserProfile({ _id, id, nickname }: userProfileProps) {
+function UserProfile({
+  _id,
+  id,
+  nickname,
+  tear,
+  lane,
+  age,
+  gender,
+  isFavorites,
+  addFavorites,
+  removeFavorites,
+}: userProfileProps) {
   return (
     <ProfileBox>
       <ImageBox>
         <Image />
       </ImageBox>
       <BoxDivider />
       <FieldBox>
-        <FieldLink onClick={() => history.push(`/users/${_id}`)}>
-          {id}
-        </FieldLink>
-        {nickname ? (
-          <FieldA
-            target="_blank"
-            href={`https://www.op.gg/summoner/userName=${nickname}`}
-          >
-            {nickname}
-          </FieldA>
-        ) : (
-          <Field>...</Field>
-        )}
-        <Field>브론즈 | 원딜</Field>
-        <Field>🎙️ : ??</Field>
-        <Field>성별 : ??</Field>
+        <Field>{id}</Field>
+        <Field>{nickname}</Field>
+        <Field>
+          {tear || 'Unranked'} | {lane || 'ALL'}
+        </Field>
+        <Field>나이 : {age}</Field>
+        <Field>성별 : {GENDER_KR[gender]}</Field>
       </FieldBox>
-      <Btn onClick={() => alert('아직 구현되지 않았습니다.')}>★</Btn>
+      <Btn
+        isChcek={isFavorites}
+        onClick={() => (isFavorites ? removeFavorites(_id) : addFavorites(_id))}
+      >
+        ★
+      </Btn>
       <Btn
         style={{ top: '3px', right: '33px' }}
         onClick={() => alert('아직 구현되지 않았습니다.')}

diff --git a/src/container/users/index.ts b/src/container/users/index.ts
@@ -53,9 +53,11 @@ export const confirmEmail = async function (key: string) {
 export type allgetRes = {
   _id: string;
   id: string;
+
+  age: number;
+  gender: 'male' | 'female' | 'Private';
+
   nickname: string;
-  createdAt: string;
-  updatedAt: string;
   lolChampion: string;
   lolLevel: string;
   lolTear: string;

diff --git a/src/pages/Studio/CameraAnimation.tsx b/src/pages/Studio/CameraAnimation.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useFrame } from 'react-three-fiber';
+import { useSpring } from '@react-spring/three';
+
+type cameraAnimationProps = {
+  optionClicked: boolean;
+  boxClicked: string | undefined;
+};
+
+function CameraAnimation({ optionClicked, boxClicked }: cameraAnimationProps) {
+  const { option, box } = useSpring({
+    option: optionClicked ? [-12] : [0],
+    box: boxClicked ? [12] : [0],
+    config: { mass: 10, tension: 1000, friction: 300, precision: 0.00001 },
+  });
+
+  useFrame((state) => {
+    const [postionX] = option.get();
+    const [postionY] = box.get();
+
+    state.camera.position.x = postionX + -5;
+    state.camera.position.y = postionY + 3;
+  });
+
+  return <></>;
+}
+
+export default CameraAnimation;
diff --git a/src/pages/Studio/PhyBoxInfo.tsx b/src/pages/Studio/PhyBoxInfo.tsx
@@ -1,27 +1,38 @@
-import React, { useState } from 'react';
-// import * as THREE from 'three';
+import React, { useState, useMemo } from 'react';
+import * as THREE from 'three';
 import { MeshProps, useFrame } from 'react-three-fiber';
 import { HTML } from '@react-three/drei';
 import { animated, useSpring } from '@react-spring/three';
 
 import { useBox, BoxProps } from '@react-three/cannon';
 
+import fontJSON from '../../components/Phy/Do Hyeon_Regular';
+
 /* BoxInfo */
 export interface phyBoxInfoProps extends BoxProps {
   clicked: string | undefined;
   setClicked: (idx: string) => void;
+  isFavorites: boolean;
   color: string;
   children: React.ReactElement;
   meshProps?: MeshProps;
 }
 export function PhyBoxInfo({
   clicked,
   setClicked,
+  isFavorites,
   color,
   children,
   meshProps,
   ...props
 }: phyBoxInfoProps) {
+  const font = useMemo(() => {
+    const loader = new THREE.FontLoader();
+    const f = loader.parse(fontJSON);
+    return f;
+  }, []);
+
+  const [star, setStar] = useState(false);
   const [hovered, setHover] = useState(false);
   const [hoveredHTML, setHoveredHTML] = useState(false);
 
@@ -32,24 +43,36 @@ export function PhyBoxInfo({
 
   const { ...clickAnimation } = useSpring({
     postionY: clicked ? 12 : 0,
-    scale: clicked ? [1.5, 1.5, 1.5] : [0.5, 0.5, 0.5],
+    scale: clicked ? 1.5 : 0.5,
     rotation: clicked ? [3.14159, 0, 0.785398 + 0.785398] : [0, 0, 0],
     config: { mass: 10, tension: 1000, friction: 300, precision: 0.00001 },
   });
 
+  const { ...favoritesAnimation } = useSpring({
+    scaleSin: isFavorites ? Math.PI : 0,
+    config: { mass: 10, tension: 1000, friction: 300, precision: 0.00001 },
+  });
+
   useFrame(() => {
     if (!ref.current) return;
-    const { postionY, scale, rotation } = clickAnimation;
+    const { postionY, rotation } = clickAnimation;
+
+    const cs = clickAnimation.scale.get();
+    const fs = favoritesAnimation.scaleSin.get();
+    let s = cs;
+    if (fs !== 0) s = -Math.sin(fs) * 0.5 + 0.5;
 
     ref.current.position.y += postionY.get();
 
-    const s = scale.get();
-    ref.current.scale.set(s[0], s[1], s[2]);
+    ref.current.scale.set(s, s, s);
 
     if (clicked !== undefined) {
       const r = rotation.get();
       ref.current.rotation.set(r[0], r[1], r[2]);
     }
+
+    if (fs >= Math.PI / 2) setStar(true);
+    else setStar(false);
   });
 
   return (
@@ -63,7 +86,17 @@ export function PhyBoxInfo({
         onPointerOver={() => setHover(true)}
         onPointerOut={() => setHover(false)}
       >
-        <boxBufferGeometry />
+        {star ? (
+          <textGeometry
+            onUpdate={(self) => {
+              self.center();
+            }}
+            args={['★', { font, size: 1, height: 0.5 }]}
+          />
+        ) : (
+          <boxBufferGeometry />
+        )}
+
         <meshStandardMaterial color={color} />
         <HTML
           style={{

diff --git a/src/pages/Studio/index.tsx b/src/pages/Studio/index.tsx
@@ -1,22 +1,28 @@
 import React, { Suspense, useEffect, useState, useRef } from 'react';
 // import * as THREE from 'three';
-import { Canvas, useFrame } from 'react-three-fiber';
+import { Canvas } from 'react-three-fiber';
 import { softShadows } from '@react-three/drei';
 import { Physics } from '@react-three/cannon';
-import { useSpring } from '@react-spring/three';
 import socketio from 'socket.io-client';
 
 import callCookie from '../../utils/cookie';
 
-import { PhyChar, PhyPlane, PhyString } from '../../components/Phy';
+import { PhyPlane, PhyString } from '../../components/Phy';
 import { PhyBoxInfo } from './PhyBoxInfo';
+import CameraAnimation from './CameraAnimation';
 
 // import Controls from '../../utils/Controls';
 import Loader from '../../components/Loader';
 
 import UserProfile from '../../components/UserProfile';
 
-import { StudioPage, WaitingBnt, UserInfoBox } from './style';
+import {
+  StudioPage,
+  WaitingBnt,
+  OptionBtn,
+  OptionLabel,
+  UserInfoBox,
+} from './style';
 
 // @api
 import { allget, allgetRes } from '../../container/users';
@@ -30,26 +36,18 @@ softShadows({});
 const serverUrl =
   'https://duo-serverrr.herokuapp.com' || 'http://localhost:5000';
 
-function CameraAnimation({ clicked }: { clicked: string | undefined }) {
-  const { postionY } = useSpring({
-    postionY: clicked ? 12 : 0,
-    config: { mass: 10, tension: 1000, friction: 300, precision: 0.00001 },
-  });
-  useFrame((state) => {
-    state.camera.position.y = postionY.get() + 3;
-  });
-
-  return <></>;
-}
-
 function Studio() {
+  const [optionClicked, setOptionClicked] = useState(false);
   const [clicked, setClicked] = useState<string>();
   const [users, setUsers] = useState<[allgetRes]>();
   const [onlineUsersIdx, setOnlineUsersIdx] = useState<string[]>();
   const clickedUserRef = useRef<allgetRes>();
 
+  const [favorites, setFavorites] = useState<string[]>([]);
+
   const init = async function () {
     setUsers(await allget());
+    setFavorites(['6016b61e3974c70017436583']);
   };
 
   useEffect(() => {
@@ -60,7 +58,6 @@ function Studio() {
     const socket = socketio.connect(
       `${serverUrl}?auth=${callCookie.get('jwt')}`,
     );
-
     socket.emit('login');
     socket.on('online', (onlineString: string[]) => {
       setOnlineUsersIdx(onlineString);
@@ -75,7 +72,17 @@ function Studio() {
 
   return (
     <StudioPage>
-      <WaitingBnt className={clicked ? 'on' : ''}>Next +4</WaitingBnt>
+      <WaitingBnt
+        className={`${optionClicked ? 'left' : ''} ${clicked ? 'down' : ''}`}
+      >
+        Next +4
+        <OptionBtn
+          className={optionClicked ? 'on' : ''}
+          onClick={() => setOptionClicked(!optionClicked)}
+        >
+          ⛶<OptionLabel>매칭 설정</OptionLabel>
+        </OptionBtn>
+      </WaitingBnt>
       <UserInfoBox className={clicked ? 'on' : ''}>
         {clickedUserRef.current ? (
           <>
@@ -97,7 +104,7 @@ function Studio() {
       >
         <fog attach="fog" args={['white', 0, 40]} />
 
-        <CameraAnimation clicked={clicked} />
+        <CameraAnimation optionClicked={optionClicked} boxClicked={clicked} />
 
         {/* 조명 */}
         <ambientLight intensity={0.4} />
@@ -139,6 +146,7 @@ function Studio() {
                     clicked === undefined || clicked === user._id ? clicked : ''
                   }
                   setClicked={setClicked}
+                  isFavorites={favorites.includes(user._id)}
                   color={onlineUsersIdx?.includes(user._id) ? 'red' : '#575757'}
                   rotation={[
                     getRandomArbitrary(0, Math.PI),
@@ -160,23 +168,25 @@ function Studio() {
                   <UserProfile
                     _id={user._id}
                     id={user.id}
+                    age={user.age}
+                    gender={user.gender}
                     nickname={user.nickname}
+                    tear={user.lolTear}
+                    lane={user.lolLane}
+                    isFavorites={favorites.includes(user._id)}
+                    addFavorites={(idx) => {
+                      setFavorites([...favorites, idx]);
+                    }}
+                    removeFavorites={(idx) => {
+                      setFavorites(favorites.filter((f) => f !== idx));
+                    }}
                   />
                 </PhyBoxInfo>
               ))
             ) : (
               <></>
             )}
 
-            <PhyChar
-              position={[0, 4, 1]}
-              char="★"
-              size={0.7}
-              height={0.35}
-              impulse={10}
-              color="#fff"
-            />
-
             <PhyString
               color="#F28B66"
               position={[0, 1.35, 0]}