Merge branch 'dev' into seo

salt26 · May 19, 2023 · 62be2ef · 62be2ef
2 parents 63a676b + 6472fe0
commit 62be2ef
Show file tree

Hide file tree

Showing 22 changed files with 85 additions and 73 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -29,15 +29,18 @@ import TutorialModal from "./components/common/TutorialModal";
 import SvgIcon from "./components/common/SvgIcon";
 import MusicOnSrc from "./assets/images/music_on.png";
 import MusicOffSrc from "./assets/images/music_off.png";
+import Github from "./components/Github";
 const Background = styled.div`
   width: 100%;
   height: 100vh;
   background: linear-gradient(180deg, #524fa1 0%, #3b36cf 100%);
 `;
 
 function App() {
+  const savedMode = Number(localStorage.getItem("language_mode"));
+
   //언어 모드
-  const [mode, setMode] = useState(0);
+  const [mode, setMode] = useState(savedMode === null ? 0 : savedMode);
   const { pathname } = useLocation();
 
   const params = pathname.split("/");
@@ -82,9 +85,10 @@ function App() {
     top: "3%",
     left: "8%",
   };
+
   return (
-    <WebsocketProvider>
-      <LanguageContext.Provider value={mode}>
+    <LanguageContext.Provider value={mode}>
+      <WebsocketProvider>
         <BrowserView>
           <Background>
             {inGame ? (
@@ -121,6 +125,7 @@ function App() {
             ) : (
               <></>
             )}
+
             {pathname == "/" && (
               <TutorialBtn
                 setTutorialModalVisible={setTutorialModalVisible}
@@ -201,6 +206,7 @@ function App() {
             ) : (
               <></>
             )}
+
             {pathname === "/" && (
               <TutorialBtn
                 setTutorialModalVisible={setTutorialModalVisible}
@@ -212,7 +218,6 @@ function App() {
               setModalVisible={setTutorialModalVisible}
             />
             {pathname === "/" && <Toggle mode={mode} setMode={setMode} />}
-
             <Routes>
               <Route path="/" element={<MobileLandingScreen />} />
 
@@ -240,25 +245,9 @@ function App() {
             </Routes>
           </Background>
         </MobileView>
-      </LanguageContext.Provider>
-    </WebsocketProvider>
+      </WebsocketProvider>{" "}
+    </LanguageContext.Provider>
   );
 }
-const LeftTop = styled.div`
-  position: absolute;
-  left: 3%;
-  top: 3%;
-  z-index: 10;
-`;
-
-const Bottom = styled.div`
-  position: absolute;
-  width: 100%;
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  bottom: 1%;
-  z-index: 1;
-`;
 export default App;
diff --git a/client/src/assets/images/github-mark.svg b/client/src/assets/images/github-mark.svg
diff --git a/client/src/components/Github.js b/client/src/components/Github.js
@@ -0,0 +1,25 @@
+import React from "react";
+import SvgIcon from "./common/SvgIcon";
+import GithubSrc from "../assets/images/github-mark.svg";
+import styled from "styled-components";
+function Github() {
+  return (
+    <IconContainer>
+      <SvgIcon
+        src={GithubSrc}
+        size="40px"
+        onClick={() => window.open("https://github.com/salt26/rpsbrawl")}
+      />
+    </IconContainer>
+  );
+}
+
+const IconContainer = styled.a`
+  border-radius: 50px;
+  width: 30px;
+  height: 40px;
+  background-color: white;
+  position: absolute;
+`;
+
+export default Github;
diff --git a/client/src/components/Toggle.js b/client/src/components/Toggle.js
@@ -4,10 +4,12 @@ import { MediumOutline } from "../styles/font";
 
 function Toggle({ mode, setMode }) {
   const clickedToggle = () => {
-    if (mode == 0) {
+    if (mode === 0) {
       setMode(1);
+      localStorage.setItem("language_mode", 1);
     } else {
       setMode(0);
+      localStorage.setItem("language_mode", 0);
     }
   };
 
@@ -16,7 +18,7 @@ function Toggle({ mode, setMode }) {
       <ToggleBtn onClick={clickedToggle} mode={mode}>
         <Circle mode={mode} />
 
-        {mode == 0 ? (
+        {mode === 0 ? (
           <MediumOutline color="white" size="25px">
             ㅤ ENG
           </MediumOutline>

diff --git a/client/src/components/common/Button.js b/client/src/components/common/Button.js
@@ -20,6 +20,7 @@ const Btn = styled.button`
       : "linear-gradient(180deg, #3ab6bc 0%, #3a66bc 100%, #2f508e 100%)"};
   &:hover {
     background-color: var(--light-mint);
+    transform: scale(1.1);
   }
 `;
 export default function Button({ text, onClick, width, height, bg }) {

diff --git a/client/src/components/common/TutorialBtn.js b/client/src/components/common/TutorialBtn.js
@@ -20,7 +20,7 @@ export default function TutorialBtn({
 
 const IconContainer = styled.div`
   position: absolute;
-  right: calc(3% + 40px);
+  right: calc(4% + 50px);
   top: 3%;
   cursor: pointer;
 `;
diff --git a/client/src/components/gameroom/CreateRoomModal.js b/client/src/components/gameroom/CreateRoomModal.js
@@ -61,10 +61,8 @@ function CreateRoomModal({ modalVisible, setModalVisible }) {
       password: privateMode ? password : "", // 비밀번호가 없는 경우 ""(빈 문자열) 전송할 것, 20글자 이내여야 함
     };
     ws.send(JSON.stringify(request));
-    console.log(request);
-    setModalVisible(false);
 
-    console.log(request);
+    setModalVisible(false);
   };
   useEffect(() => {
     ws.onmessage = function (event) {
@@ -93,7 +91,7 @@ function CreateRoomModal({ modalVisible, setModalVisible }) {
                 backgroundColor: "red",
                 height: "35vh",
                 display: "flex",
-        
+
                 flexDirection: "column",
                 justifyContent: "flex-start",
 

diff --git a/client/src/components/gameroom/FirstPlace.js b/client/src/components/gameroom/FirstPlace.js
@@ -20,18 +20,7 @@ export default function FirstPlace({ place }) {
     "navy",
     "purple",
   ];
-  const getNameSize = (name) => {
-    console.log(name);
-    if (name.length <= 5) {
-      return "35px";
-    } else if (name.length <= 10) {
-      return "20px";
-    } else if (name.length <= 20) {
-      return "15px";
-    } else {
-      return "8px";
-    }
-  };
+
   const isMobile = useMediaQuery({ query: "(max-width:768px)" });
   const mode = useContext(LanguageContext);
   return (

diff --git a/client/src/components/gameroom/SettingModal.js b/client/src/components/gameroom/SettingModal.js
@@ -67,7 +67,6 @@ function SettingModal({ modalVisible, setModalVisible, roomInfo }) {
     };
 
     ws.send(JSON.stringify(request));
-    console.log(request);
 
     setModalVisible(false);
   };

diff --git a/client/src/components/gameroom/TimeBar.js b/client/src/components/gameroom/TimeBar.js
@@ -37,10 +37,8 @@ export default function TimeBar({ roomInfo }) {
   useInterval(
     () => {
       setSec(sec - 1);
-      //console.log(sec);
       if (sec === 1) {
         setIsRunning(false);
-        //navigate(`/room/${room_id}/result`); // 결과창으로 이동
       }
     },
     isRunning ? 1000 : null

diff --git a/client/src/components/gameroom/UserList.js b/client/src/components/gameroom/UserList.js
@@ -6,7 +6,6 @@ import MyNameTag from "../common/MyNameTag";
 
 export default function UserList({ users }) {
   const my_name = getUserName();
-  console.log(users);
 
   const team_color = [
     "red",

diff --git a/client/src/components/roomlist/RoomList.js b/client/src/components/roomlist/RoomList.js
@@ -63,7 +63,6 @@ function RoomList({ rooms, setCreateRoomModalVisible }) {
   };
 
   const _quickStart = () => {
-    // console.log("quick start success");
     var enter_id = 0;
     var room_num = 0;
 

diff --git a/client/src/pages/InGamePage.js b/client/src/pages/InGamePage.js
@@ -135,7 +135,6 @@ export default function InGamePage() {
   useEffect(() => {
     ws.onmessage = function (event) {
       const res = JSON.parse(event.data);
-      console.log(res);
 
       if (ready) {
         if (res?.response === "error") {

diff --git a/client/src/pages/LandingPage.js b/client/src/pages/LandingPage.js
@@ -18,7 +18,7 @@ import { useRef, createContext, useEffect } from "react";
 import { LanguageContext } from "../utils/LanguageProvider";
 import { getUserName, setUserName } from "../utils/User";
 import { Language } from "../db/Language";
-
+import Github from "../components/Github";
 import { WebsocketContext } from "../utils/WebSocketProvider";
 import { useMediaQuery } from "react-responsive";
 
@@ -63,7 +63,6 @@ function LoginBox() {
 
     if (!isLoading) {
       setIsLoading(true);
-      console.log("요청!");
 
       var body = {
         grant_type: "",
@@ -86,7 +85,7 @@ function LoginBox() {
             },
           }
         );
-        console.log(response);
+
         localStorage.setItem("access_token", response.data.access_token);
 
         await createWebSocketConnection(name, setIsLoading); // Socket Connection 생성
@@ -176,6 +175,9 @@ export default function LandingPage() {
 
         <LoginBox />
       </Row>
+      <GithubBox>
+        <Github />
+      </GithubBox>
     </Container>
   );
 }
@@ -184,7 +186,14 @@ export default function LandingPage() {
 https://apes0113.postype.com/post/2620
 linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)
 */
-
+const GithubBox = styled.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  padding-right: 3%;
+  flex-direction: row;
+  justify-content: flex-end;
+`;
 const Anim = styled.div`
   animation: anim1 5s infinite ease-in-out;
   animation-delay: ${({ delay }) => delay}s;
@@ -230,7 +239,7 @@ const Container = styled.div`
 
   width: 100%;
   height: 100%;
-  padding-bottom: 50px;
+  padding-bottom: 3%;
 
   align-items: center;
 

diff --git a/client/src/pages/MobileIngameScreen.js b/client/src/pages/MobileIngameScreen.js
@@ -133,19 +133,16 @@ export default function MobileInGameScreen() {
   useEffect(() => {
     ws.onmessage = function (event) {
       const res = JSON.parse(event.data);
-      console.log(res);
 
       if (ready) {
         if (res?.response === "error") {
           if (
-            res.message === "Cannot play the same hand in a row (limited mode)."
+            res.message === "Cannot play the same hand in a row. (limited mode)"
           ) {
             setMsg(Language[mode].limited_text);
             setShowTime(true);
             return;
           }
-          alert(res.message);
-          return;
         }
         if (res?.request === "disconnected") {
           //기존 인원과 새인원 비교

diff --git a/client/src/pages/MobileLandingScreen.js b/client/src/pages/MobileLandingScreen.js
@@ -3,13 +3,12 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import Logo from "../components/common/Logo";
-
 import RockSrc from "../assets/images/rock.png";
 import ScissorSrc from "../assets/images/scissor.png";
 import PaperSrc from "../assets/images/paper.png";
 import SvgIcon from "../components/common/SvgIcon";
 import SizedBox from "../components/common/SizedBox";
-
+import Github from "../components/Github";
 import Button from "../components/common/Button";
 import { useContext } from "react";
 import { Medium, MediumOutline } from "../styles/font";
@@ -150,7 +149,7 @@ function LoginBox() {
             },
           }
         );
-        console.log(response);
+
         localStorage.setItem("access_token", response.data.access_token);
 
         await createWebSocketConnection(name, setIsLoading); // Socket Connection 생성
@@ -232,6 +231,9 @@ export default function MobileLandingScreen() {
 
         {currentTab === 0 ? <RuleBox /> : <LoginBox />}
       </div>
+      <GithubBox>
+        <Github />
+      </GithubBox>
     </Container>
   );
 }
@@ -240,6 +242,13 @@ export default function MobileLandingScreen() {
 https://apes0113.postype.com/post/2620
 linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)
 */
+const GithubBox = styled.div`
+  position: absolute;
+  right: 4%;
+  top: 3%;
+  width: 40px;
+  height: 40px;
+`;
 
 const Anim = styled.div`
   animation: anim1 5s infinite ease-in-out;

diff --git a/client/src/pages/MobileRoomListScreen.js b/client/src/pages/MobileRoomListScreen.js
@@ -24,7 +24,6 @@ function MobileRoomListScreen() {
         request: "signout",
       };
       ws.send(JSON.stringify(request));
-      console.log(request);
     }
   };
 

diff --git a/client/src/pages/MobileWatingRoomScreen.js b/client/src/pages/MobileWatingRoomScreen.js
@@ -125,14 +125,12 @@ export default function MobileWatingRoomScreen() {
   const [skilledBot, setSkilledBot] = useState(state.room.bot_skilled);
   const [dumbBot, setDumbBot] = useState(state.room.bot_dumb);
 
-  console.log(_findHost(users));
   var navigate = useNavigate();
 
   const [createSocketConnection, ready, ws] = useContext(WebsocketContext); //전역 소켓 불러오기
   useEffect(() => {
     ws.onmessage = function (event) {
       const res = JSON.parse(event.data);
-      console.log(res);
 
       if (ready) {
         if (res?.response === "error") {

diff --git a/client/src/pages/RoomListPage.js b/client/src/pages/RoomListPage.js
@@ -21,7 +21,6 @@ function RoomListPage() {
         request: "signout",
       };
       ws.send(JSON.stringify(request));
-      console.log(request);
     }
   };
   useEffect(
-Original file line number
+Diff line change
@@ Expand Up @@
         };
         ws.send(JSON.stringify(request));
-        console.log(request);
         setModalVisible(false);
       };
@@ Expand Down @@