Merge pull request #119 from su-its/feat/frontend/brushup

Feat/frontend/brushup
su-its · Apr 10, 2024 · 10db33c · 10db33c
2 parents 696e509 + fcf9671
commit 10db33c
Show file tree

Hide file tree

Showing 25 changed files with 344 additions and 63 deletions.
diff --git a/typing-app/.eslintrc.json b/typing-app/.eslintrc.json
@@ -1,7 +1,6 @@
 {
   "extends": [
     "next/core-web-vitals",
-    "prettier",
-    "next/babel"
+    "prettier"
   ]
 }
diff --git a/typing-app/README.md b/typing-app/README.md
@@ -18,8 +18,6 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

diff --git a/typing-app/package.json b/typing-app/package.json
@@ -27,6 +27,7 @@
     "prettier": "^3.2.5",
     "react": "^18",
     "react-dom": "^18",
+    "sharp": "^0.33.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },

diff --git a/typing-app/public/img/gauge_time.png b/typing-app/public/img/gauge_time.png
diff --git a/typing-app/src/app/favicon.ico b/typing-app/src/app/favicon.ico
diff --git a/typing-app/src/app/globals.css b/typing-app/src/app/globals.css
@@ -1,20 +1,15 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 :root {
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 0, 0, 0;
   --background-end-rgb: 0, 0, 0;
 }
 
+* {
+  font-family: "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
+}
+
 body {
   color: rgb(var(--foreground-rgb));
   background: rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
+  overflow-y: hidden;
 }
diff --git a/typing-app/src/app/layout.tsx b/typing-app/src/app/layout.tsx
@@ -1,11 +1,9 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import Header from "../components/organism/Header";
 import Footer from "../components/organism/Footer";
 import "./globals.css";
 import { Box, ChakraProvider } from "@chakra-ui/react";
-
-const inter = Inter({ subsets: ["latin"] });
+import background from "@/assets/images/background.png";
 
 export const metadata: Metadata = {
   title: "TYPE MASTER",
@@ -18,9 +16,9 @@ export default async function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body>
         <ChakraProvider>
-          <Box minH="100vh" display="flex" flexDirection="column" bg="black">
+          <Box minH="100vh" display="flex" flexDirection="column" backgroundImage={background.src}>
             <Header />
             <Box flex="1" py={2}>
               {children}

diff --git a/typing-app/src/assets/images/background.png b/typing-app/src/assets/images/background.png
diff --git a/typing-app/src/assets/images/home/game.png b/typing-app/src/assets/images/home/game.png
diff --git a/typing-app/src/assets/images/home/logout.png b/typing-app/src/assets/images/home/logout.png
diff --git a/typing-app/src/assets/images/home/ranking.png b/typing-app/src/assets/images/home/ranking.png
diff --git a/typing-app/src/components/atoms/Banner.tsx b/typing-app/src/components/atoms/Banner.tsx
@@ -1,11 +1,13 @@
 import React from "react";
-import { Box, Image } from "@chakra-ui/react";
+import { Box, Image, Link } from "@chakra-ui/react";
 import bannerImage from "@/assets/images/banner.png";
 
 const Banner: React.FC = () => {
   return (
     <Box>
-      <Image src={bannerImage.src} alt="Logo" maxH={54} ml={2} />
+      <Link href="/">
+        <Image src={bannerImage.src} alt="Logo" maxH={54} ml={2} />
+      </Link>
     </Box>
   );
 };

diff --git a/typing-app/src/components/molecules/GameStartButton.tsx b/typing-app/src/components/molecules/GameStartButton.tsx
@@ -1,18 +1,16 @@
 "use client";
 
 import React from "react";
-import { Button, useDisclosure } from "@chakra-ui/react";
+import { Image, useDisclosure } from "@chakra-ui/react";
 import LoginModal from "./LoginModal";
+import gameButton from "@/assets/images/home/game.png";
 
 const GameStartButton = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
     <>
-      <Button colorScheme="green" size="lg" onClick={onOpen}>
-        Game Start
-      </Button>
-
+      <Image mb={2} src={gameButton.src} onClick={onOpen} cursor="pointer" />
       <LoginModal isOpen={isOpen} onClose={onClose} />
     </>
   );

diff --git a/typing-app/src/components/molecules/LogoutButton.tsx b/typing-app/src/components/molecules/LogoutButton.tsx
@@ -2,9 +2,10 @@
 
 import React from "react";
 import { useRouter } from "next/navigation";
-import { Button, useDisclosure } from "@chakra-ui/react";
+import { Image, useDisclosure } from "@chakra-ui/react";
 import LogoutModal from "./LogoutModal";
 import { logout } from "@/app/actions";
+import logoutButton from "@/assets/images/home/logout.png";
 
 const LogoutButton: React.FC = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -23,10 +24,7 @@ const LogoutButton: React.FC = () => {
 
   return (
     <>
-      <Button colorScheme="blue" size="lg" onClick={handleLogout}>
-        Logout
-      </Button>
-
+      <Image src={logoutButton.src} onClick={handleLogout} cursor="pointer" />
       <LogoutModal isOpen={isOpen} onClose={reLoad} />
     </>
   );

diff --git a/typing-app/src/components/molecules/RankingButton.tsx b/typing-app/src/components/molecules/RankingButton.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { Button } from "@chakra-ui/react";
+import { Image } from "@chakra-ui/react";
+import rankingButton from "@/assets/images/home/ranking.png";
 
 const RankingButton = () => {
   const router = useRouter();
@@ -11,11 +12,7 @@ const RankingButton = () => {
     router.push("/ranking");
   };
 
-  return (
-    <Button colorScheme="orange" size="lg" onClick={handleRouteRanking}>
-      Ranking
-    </Button>
-  );
+  return <Image mb={2} src={rankingButton.src} onClick={handleRouteRanking} cursor="pointer" />;
 };
 
 export default RankingButton;
diff --git a/typing-app/src/components/organism/Header.tsx b/typing-app/src/components/organism/Header.tsx
@@ -8,7 +8,7 @@ import Separator from "@/components/atoms/Separater";
 const Header: React.FC = () => {
   return (
     <>
-      <Flex alignItems="center" justifyContent="space-between">
+      <Flex alignItems="center" justifyContent="space-between" bg="gray.800">
         <Banner />
         <UserCard width="300px" />
       </Flex>

diff --git a/typing-app/src/components/organism/HomeMenuContainer.tsx b/typing-app/src/components/organism/HomeMenuContainer.tsx
@@ -5,8 +5,8 @@ import LogoutButton from "../molecules/LogoutButton";
 
 const HomeMenuContainer = () => {
   return (
-    <Flex justify="center" align="center" h="65vh">
-      <VStack spacing={8} align="stretch" width="50%" maxWidth="md" mx="auto">
+    <Flex justify="center" align="center" h="80vh">
+      <VStack>
         {/* TODO: ログイン状況に応じて表示を切り替え */}
         <GameStartButton />
         <RankingButton />

diff --git a/typing-app/src/components/organism/RankingTabs.tsx b/typing-app/src/components/organism/RankingTabs.tsx
@@ -54,7 +54,7 @@ const RankingTabs = () => {
   };
 
   return (
-    <Tabs onChange={handleTabChange}>
+    <Tabs onChange={handleTabChange} mt={6}>
       <Flex justifyContent={"center"}>
         <Grid templateColumns={"repeat(3, 1fr)"} gap={"300px"}>
           <Box opacity={"0"}>{/* 幅を揃えるためだけの要素，視覚的な意味はなし */}</Box>

diff --git a/typing-app/src/components/templates/GamePre.module.css b/typing-app/src/components/templates/GamePre.module.css
@@ -4,7 +4,7 @@
   margin: 50px auto 0 auto;
   position: absolute;
   left: 15%;
-  top: 100px;
+  top: 120px;
   background-color: #263238;
   border: 4px, #fff;
 }

diff --git a/typing-app/src/components/templates/GamePre.tsx b/typing-app/src/components/templates/GamePre.tsx
@@ -29,7 +29,7 @@ const GamePre: React.FC<GamePreProps> = ({ nextPage }) => {
           templateAreas={`"header header"
                           "main nav"
                           "footer footer"`}
-          gridTemplateRows={"80px 1fr 50px"}
+          gridTemplateRows={"80px 1fr 80px"}
           gridTemplateColumns={"1fr 1fr"}
           h="100%"
           gap={0}
@@ -38,9 +38,9 @@ const GamePre: React.FC<GamePreProps> = ({ nextPage }) => {
           alignItems="center"
           overflow="auto"
         >
-          <GridItem pl="2" mt="60px" area={"header"} className={styles.centerText}>
+          <GridItem pl="2" mt="20px" area={"header"} className={styles.centerText}>
             <Text color="white" fontSize="4xl" as="b">
-              ゲーム説明
+              操作説明
             </Text>
           </GridItem>
           <GridItem pl="10" color="white" area={"main"} fontSize="2xl">
@@ -49,8 +49,8 @@ const GamePre: React.FC<GamePreProps> = ({ nextPage }) => {
               <Text>制限時間は1分間!</Text>
               <Text mb="4">英文を速く・正確に入力して高スコアを目指そう!</Text>
               <Text as="b">【ランキング掲載条件】</Text>
-              <Text>WPM(Words per Minutes): 120字以上</Text>
-              <Text mb="4">正打率: 95%以上</Text>
+              <Text>WPM (Words Per Minutes) : 120字以上</Text>
+              <Text mb="4">正打率 : 95%以上</Text>
               <Text as="b">【入力しても反応しなくなった場合】</Text>
               <Text>テキストが表示されているボックスをクリックすると元に戻れます。</Text>
             </Box>
@@ -70,7 +70,7 @@ const GamePre: React.FC<GamePreProps> = ({ nextPage }) => {
           </GridItem>
           <GridItem pl="2" area={"footer"} className={styles.centerText}>
             <Text color="white" fontSize="3xl">
-              [Space]キーを押して開始
+              [Space] キーを押して開始
             </Text>
           </GridItem>
         </Grid>

diff --git a/typing-app/src/components/templates/GameResult.module.css b/typing-app/src/components/templates/GameResult.module.css
@@ -4,7 +4,7 @@
   margin: 50px auto 0 auto;
   position: absolute;
   left: 15%;
-  top: 100px;
+  top: 120px;
   background-color: #263238;
   border: solid 4px #fff;
 }

diff --git a/typing-app/src/components/templates/GameResult.tsx b/typing-app/src/components/templates/GameResult.tsx
@@ -70,28 +70,28 @@ const GameResult: React.FC<GameResultProps> = ({ nextPage, resultScore }) => {
         </GridItem>
         <GridItem colSpan={3} colStart={6} rowStart={4} className={styles.centerText}>
           <Text fontSize="2xl" as="b">
-            {resultScore.keystrokes}回
+            {resultScore.keystrokes} 回
           </Text>
         </GridItem>
         <GridItem colSpan={3} colStart={6} rowStart={5} className={styles.centerText}>
           <Text fontSize="2xl" as="b">
-            {resultScore.miss}回
+            {resultScore.miss} 回
           </Text>
         </GridItem>
         <GridItem colSpan={3} colStart={6} rowStart={6} className={styles.centerText}>
           <Text fontSize="2xl" as="b">
-            {String(resultScore.time.getMinutes() * 60 + resultScore.time.getSeconds()).padStart(2, "0")}秒
-            {String(Math.floor(resultScore.time.getMilliseconds() / 100))}
+            {String(resultScore.time.getMinutes() * 60 + resultScore.time.getSeconds()).padStart(2, "0")}.
+            {String(Math.floor(resultScore.time.getMilliseconds() / 100))} 秒
           </Text>
         </GridItem>
         <GridItem colSpan={3} colStart={6} rowStart={7} className={styles.centerText}>
           <Text fontSize="2xl" as="b">
-            {Math.floor(resultScore.wpm)}字/分
+            {Math.floor(resultScore.wpm)} 字/分
           </Text>
         </GridItem>
         <GridItem colSpan={3} colStart={6} rowStart={8} className={styles.centerText}>
           <Text fontSize="2xl" as="b">
-            {resultScore.accuracy.toFixed(1)}%
+            {resultScore.accuracy.toFixed(1)} %
           </Text>
         </GridItem>
         <GridItem colSpan={4} rowSpan={2} colStart={2} rowStart={9} className={styles.centerText}>

diff --git a/typing-app/src/components/templates/GameTyping.module.css b/typing-app/src/components/templates/GameTyping.module.css
@@ -4,7 +4,7 @@
   margin: 50px auto 0 auto;
   position: absolute;
   left: 15%;
-  top: 100px;
+  top: 120px;
   background-color: #263238;
   border: solid 4px #fff;
 }

diff --git a/typing-app/src/components/templates/GameTyping.tsx b/typing-app/src/components/templates/GameTyping.tsx
@@ -180,8 +180,7 @@ const GameTyping: React.FC<GameTypingProps> = ({ nextPage, subjectText, setResul
           <ProgressBar maxWidth={330} height={20} maxValue={subjectText.length - 1} value={typeIndex} />
         </div>
         <div className={`${styles.progress} ${styles.progress_speed}`}>
-          <ProgressBar maxWidth={330} height={10} maxValue={1000} value={currentTypeSpeed} />
-          <ProgressBar maxWidth={330} height={10} maxValue={1000} value={averageTypeSpeed} />
+          <ProgressBar maxWidth={330} height={20} maxValue={1000} value={averageTypeSpeed} />
         </div>
         <Image className={styles.gauge_time} id="gauge_time" src={gaugeTimeImg} alt={""} width={281} height={22} />
         <Image
@@ -193,8 +192,7 @@ const GameTyping: React.FC<GameTypingProps> = ({ nextPage, subjectText, setResul
           height={24}
         />
         <Image className={styles.gauge_speed} id="gauge_speed" src={gaugeSpeedImg} alt={""} width={330} height={24} />
-        {/* TODO: Lpre, Ipusumって消すんじゃなかったっけ */}
-        <div className={styles.title}>Lorem Ipsum</div>
+        <div className={styles.title}>-</div>
         <div className={styles.text}>
           <div>
             <span className={styles.span_typed_text}>{subjectText.slice(0, typeIndex)}</span>
@@ -206,7 +204,7 @@ const GameTyping: React.FC<GameTypingProps> = ({ nextPage, subjectText, setResul
           残り <span className={styles.info_time_span}>{count.toFixed(1)}</span> 秒
         </div>
         <div className={styles.info_text}>
-          {correctType} 語 / {subjectText.length} 字
+          {correctType} 字 / {subjectText.length} 字
         </div>
       </div>
     </Box>