Merge pull request #103 from karrotmvp/feat/game-2048

Feat/game 2048
karrotmvp · Nov 22, 2021 · 54ec6b3 · 54ec6b3
2 parents 9b637f4 + 08b8a97
commit 54ec6b3
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 34 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import '@karrotframe/navigator/index.css';
-import { Navigator, Screen, useNavigator } from '@karrotframe/navigator';
+import { Navigator, Screen } from '@karrotframe/navigator';
 import { Home } from 'pages/Home';
 import { Game2048Home } from 'pages/Game2048/Home';
 import { Game2048Game } from 'pages/Game2048/Game';
@@ -31,8 +31,7 @@ import { useMinigameApi } from 'services/api/minigameApi';
 const App: React.FC = () => {
   const minigameApi = useMinigameApi();
 
-  const { setRegionInfo, setTownInfo, setUserInfo, setIsInstalled } =
-    useUserData();
+  const { setRegionInfo, setTownInfo, setIsInstalled } = useUserData();
   const { accessToken } = useAccessToken();
   const { signAccessToken, removeCookie } = useSignAccessToken();
   const [analytics, setAnalytics] = useState(emptyAnalytics);
@@ -97,21 +96,6 @@ const App: React.FC = () => {
     [minigameApi.regionApi, setTownInfo]
   );
 
-  // const updateUserInfo = useCallback(async () => {
-  //   console.log('update user info attempt');
-  //   const {
-  //     data: { data },
-  //   } = await minigameApi.userApi.getUserInfoUsingGET();
-  //   console.log(data);
-  //   if (data) {
-  //     setUserInfo(data.id, data.nickname);
-  //     // FA: track user with set user id
-  //     analytics.setUserId(data.id);
-
-  //     console.log('setuserinfo', data.id, data.nickname);
-  //   }
-  // }, [analytics, minigameApi.userApi, setUserInfo]);
-
   const fetchData = useCallback(
     async (code: string, regionId: string) => {
       console.log('fetch data', code, regionId);
@@ -140,6 +124,7 @@ const App: React.FC = () => {
     }
 
     fetchData(code as string, regionId as string);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     // accessToken,
     analytics,

diff --git a/src/hooks/useAccessToken.ts b/src/hooks/useAccessToken.ts
@@ -30,8 +30,7 @@ export const useSignAccessToken = () => {
         if (data) {
           setCookie('accessToken', data.accessToken);
           console.log('useSignAccessToken, setCookie:', cookies.accessToken);
-
-          return data.accessToken;
+          return true;
         }
       } catch (error) {
         console.log(error);

diff --git a/src/hooks/useMini.ts b/src/hooks/useMini.ts
@@ -42,19 +42,25 @@ export const useMini = () => {
   };
 
   // Third-party agreement handler
-  const handleThirdPartyAgreement = async (runOnSuccess: () => void) => {
+  const handleThirdPartyAgreement = async (runOnSuccess?: () => void) => {
     mini.startPreset({
       preset: presetUrl!,
       params: {
         appId: appId!,
       },
-      onSuccess: function (result) {
+      onSuccess: async function (result) {
         if (result && result.code) {
-          signAccessToken(result.code, regionId);
+          const response = await signAccessToken(result.code, regionId);
           analytics.logEvent('click_karrot_mini_preset_agree_button', {
             game_type: 'karrot-clicker',
           });
-          runOnSuccess();
+          console.log(response);
+          if (response === true) {
+            await updateUserInfo();
+            if (runOnSuccess) {
+              runOnSuccess();
+            }
+          }
         }
       },
       onClose: function () {

diff --git a/src/pages/Game2048/Game/Game.tsx b/src/pages/Game2048/Game/Game.tsx
@@ -16,11 +16,13 @@ import {
 } from './Score';
 import refreshGameUrl from 'assets/svg/game2048/refresh_game.svg';
 import { useAnalytics } from 'services/analytics';
+import { useUserData } from 'hooks';
 
 export const Game: React.FC = () => {
   const analytics = useAnalytics();
   const { isTop } = useCurrentScreen();
   const minigameApi = useMinigameApi();
+  const { userId, setUserInfo } = useUserData();
   const { score: myBestScore, highestScore, gameType } = useMyGame2048Data();
   const {
     score: currentScore,
@@ -102,6 +104,38 @@ export const Game: React.FC = () => {
       getTownieBestScoreEver();
     }
   }, [getTownieBestScoreEver, isTop]);
+
+  const updateUserInfo = useCallback(async () => {
+    console.log('update user info attempt, userId:', userId);
+    if (userId) {
+      return;
+    } else {
+      try {
+        const {
+          data: { data },
+        } = await minigameApi.userApi.getUserInfoUsingGET();
+        console.log(data);
+        if (data) {
+          setUserInfo(data.id, data.nickname);
+          // FA: track user with set user id
+          analytics.setUserId(data.id);
+
+          console.log('setuserinfo', data.id, data.nickname);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }, [analytics, minigameApi.userApi, setUserInfo, userId]);
+
+  useEffect(() => {
+    if (isTop) {
+      if (userId === '') {
+        updateUserInfo();
+      }
+    }
+  }, [isTop, updateUserInfo, userId]);
+
   return (
     <>
       <Page className="game-page">

diff --git a/src/pages/Game2048/Game/Modal/GameOver.tsx b/src/pages/Game2048/Game/Modal/GameOver.tsx
@@ -45,7 +45,7 @@ export const GameOver: React.FC<Props> = (props) => {
     } catch (error) {
       console.error(error);
     }
-  }, [gameType, minigameApi.gameUserApi]);
+  }, [gameType, minigameApi.gameUserApi, updateMyScore]);
 
   const handleViewLeaderboard = async () => {
     console.log('try to view leaderboard');

diff --git a/src/pages/Game2048/Game/hooks/useGame.tsx b/src/pages/Game2048/Game/hooks/useGame.tsx
@@ -34,7 +34,6 @@ export const useGame = () => {
   const [state, dispatch] = useReducer(game2048Reducer, initialState);
   const { score, tiles, byIds, hasChanged, inMotion } = state;
   const [isGameOver, setIsGameOver] = useState<boolean>(false);
-  const [nextBoard, setNextBoard] = useState<number[]>();
 
   const createTile = useCallback(
     ({ coordinate, value }: Partial<TileProps>) => {
@@ -222,10 +221,8 @@ export const useGame = () => {
       setTimeout(() => {
         dispatch(moveEndAction());
       }, animationDuration);
-
-      setNextBoard(() => retrieveTileMap());
     },
-    [dispatch, retrieveTileMap, throttledMergeTile, tiles, updateTile]
+    [dispatch, throttledMergeTile, tiles, updateTile]
   );
 
   const moveLeftFactory = (board: number[]) => {

diff --git a/src/pages/Game2048/Home/Home.tsx b/src/pages/Game2048/Home/Home.tsx
@@ -70,13 +70,17 @@ export const Home = () => {
       is_new_user: false,
     });
   };
+  const onNewUserSuccessHandler = () => {
+    addPlayerCount();
+    goToGamePage();
+  };
   const handleNewUser = () => {
     // if user is new, open third-party agreement preset
     analytics.logEvent('click_game_start_button', {
       game_type: 'game-2048',
       is_new_user: true,
     });
-    handleThirdPartyAgreement(goToGamePage);
+    handleThirdPartyAgreement(onNewUserSuccessHandler);
   };
   const handleGameStart = () => {
     // bypass in web environment
@@ -91,7 +95,6 @@ export const Home = () => {
       addPlayerCount();
     } else {
       handleNewUser();
-      addPlayerCount();
     }
   };
   // =================================================================
@@ -253,6 +256,7 @@ export const Home = () => {
             height: `calc(100vh - ${navHeight}px - 90px)`,
             width: `100%`,
           }}
+          onScroll={onScroll}
         >
           <div
             style={{

diff --git a/src/pages/Game2048/Leaderboard/LeaderboardTabs/Leaderboard/UserLeaderboard.tsx b/src/pages/Game2048/Leaderboard/LeaderboardTabs/Leaderboard/UserLeaderboard.tsx
@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 import { TopUserRow } from '../Row/TopRow';
 import { DefaultUserRow } from '../Row/DefaultRow';

diff --git a/src/pages/KarrotClicker/Game/Game.tsx b/src/pages/KarrotClicker/Game/Game.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Modal from 'react-modal';
 import { commafy } from 'utils/numberFunctions';
 import { useAnalytics } from 'services/analytics';
@@ -13,13 +13,16 @@ import { useCurrentScreen } from '@karrotframe/navigator';
 import { useMyKarrotClickerData } from '../hooks';
 import { GameOver, GamePause } from './Modal';
 import { useGame } from './hooks';
+import { useUserData } from 'hooks';
+import { useMinigameApi } from 'services/api/minigameApi';
 
 Modal.setAppElement(document.createElement('div'));
 
 export const Game = () => {
   const { isTop } = useCurrentScreen();
   const analytics = useAnalytics();
-
+  const { userId, setUserInfo } = useUserData();
+  const minigameApi = useMinigameApi();
   const { score } = useMyKarrotClickerData();
   const {
     clickCount,
@@ -61,6 +64,37 @@ export const Game = () => {
     }
   }, [analytics, isTop]);
 
+  const updateUserInfo = useCallback(async () => {
+    console.log('update user info attempt, userId:', userId);
+    if (userId) {
+      return;
+    } else {
+      try {
+        const {
+          data: { data },
+        } = await minigameApi.userApi.getUserInfoUsingGET();
+        console.log(data);
+        if (data) {
+          setUserInfo(data.id, data.nickname);
+          // FA: track user with set user id
+          analytics.setUserId(data.id);
+
+          console.log('setuserinfo', data.id, data.nickname);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }, [analytics, minigameApi.userApi, setUserInfo, userId]);
+
+  useEffect(() => {
+    if (isTop) {
+      if (userId === '') {
+        updateUserInfo();
+      }
+    }
+  }, [isTop, updateUserInfo, userId]);
+
   return (
     <>
       <PageContainer>