Merge pull request #55 from su-its/style/frontend/pre-game

Feat/frontend/pre game
su-its · Apr 4, 2024 · 71ef04b · 71ef04b
2 parents 4b33ff1 + 08d7677
commit 71ef04b
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 2 deletions.
diff --git a/typing-app/src/assets/images/keyboard.png b/typing-app/src/assets/images/keyboard.png
diff --git a/typing-app/src/components/templates/GamePre.module.css b/typing-app/src/components/templates/GamePre.module.css
@@ -0,0 +1,16 @@
+.box {
+  width: 70%;
+  height: calc(100% - 300px);
+  margin: 50px auto 0 auto;
+  position: absolute;
+  left: 15%;
+  top: 100px;
+  background-color: #263238;
+  border: 4px, #fff;
+}
+
+.centerText {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/typing-app/src/components/templates/GamePre.tsx b/typing-app/src/components/templates/GamePre.tsx
@@ -1,6 +1,8 @@
-import { Box, Text } from "@chakra-ui/react";
+import { Box, Grid, GridItem, Text, Image, Center, Flex } from "@chakra-ui/react";
 import React, { useEffect } from "react";
 import { GamePreProps } from "../pages/Game";
+import styles from "./GamePre.module.css";
+import keyboardImage from "@/assets/images/keyboard.png";
 
 const GamePre: React.FC<GamePreProps> = ({ nextPage }) => {
   useEffect(() => {
@@ -22,7 +24,57 @@ const GamePre: React.FC<GamePreProps> = ({ nextPage }) => {
 
   return (
     <Box>
-      <Text>GamePre screen</Text>
+      <div className={styles.box}>
+        <Grid
+          templateAreas={`"header header"
+                          "main nav"
+                          "footer footer"`}
+          gridTemplateRows={"80px 1fr 50px"}
+          gridTemplateColumns={"1fr 1fr"}
+          h="100%"
+          gap={0}
+          bg="#263238"
+          border="4px solid white"
+          alignItems="center"
+          overflow="auto"
+        >
+          <GridItem pl="2" mt="60px" area={"header"} className={styles.centerText}>
+            <Text color="white" fontSize="4xl" as="b">
+              ゲーム説明
+            </Text>
+          </GridItem>
+          <GridItem pl="10" color="white" area={"main"} fontSize="2xl">
+            <Box height="100%">
+              <Text as="b">【基本ルール】</Text>
+              <Text>制限時間は1分間!</Text>
+              <Text mb="4">英文を速く・正確に入力して高スコアを目指そう!</Text>
+              <Text as="b">【ランキング掲載条件】</Text>
+              <Text>WPM(Words per Minutes): 120字以上</Text>
+              <Text mb="4">正打率: 95%以上</Text>
+              <Text as="b">【入力しても反応しなくなった場合】</Text>
+              <Text>テキストが表示されているボックスをクリックすると元に戻れます。</Text>
+            </Box>
+          </GridItem>
+          <GridItem
+            pr="0"
+            color="white"
+            area={"nav"}
+            height="100%"
+            display="flex"
+            flexDirection="column"
+            placeItems="center"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Image src={keyboardImage.src} alt="Logo" maxH={300} />
+          </GridItem>
+          <GridItem pl="2" area={"footer"} className={styles.centerText}>
+            <Text color="white" fontSize="3xl">
+              [Space]キーを押して開始
+            </Text>
+          </GridItem>
+        </Grid>
+      </div>
     </Box>
   );
 };