Merge pull request #1 from PerryM123/develop

ver0.2を開発
PerryM123 · Dec 28, 2022 · 8558319 · 8558319
2 parents 725cb98 + b217b93
commit 8558319
Show file tree

Hide file tree

Showing 17 changed files with 481 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Tekken Frame Data
+# Tekken Frame Data ver 0.2
 
 ## なぜ作ってるか
 
@@ -8,7 +8,7 @@
 
 Next.js と express.js と mysql の練習のために作成してます。
 
-![alt text](./sampleData/sample.png)
+![alt text](./sampleData/ver0.2.gif)
 
 ## Getting Started
 
@@ -22,5 +22,5 @@ $ yarn dev
 ## Techonogies being used
 
 - フロント技術: NextJs
-- サーバーサイド磁術: express.JS (TODO: Add repo here)
+- サーバーサイド技術: express.JS (TODO: Add repo here)
 - データベース: mysql
diff --git a/components/ClickableHeader.tsx b/components/ClickableHeader.tsx
@@ -0,0 +1,72 @@
+// libraries
+import { useState, useEffect, MouseEventHandler } from "react";
+import { NextPage } from "next";
+import { useDispatch } from "react-redux";
+// interface
+import { HeaderType } from "../interfaces/frameData";
+// reducer
+import { updateFrameDataList } from "../reducer/frameDataSlice";
+// style
+import styles from "../styles/frameDataTableHeader.module.css";
+interface Props {
+  type:
+    | HeaderType.START_UP
+    | HeaderType.BLOCK
+    | HeaderType.HIT
+    | HeaderType.COUNTER;
+  title: string;
+}
+
+const Logo = {
+  ASCENDING: "▲",
+  DESCENDING: "▼",
+};
+
+const ClickableHeader: NextPage<Props> = (props) => {
+  const { type, title } = props;
+  const [isActive, setActive] = useState(false);
+  const [isAscending, setAscending] = useState(false);
+  const [isDescending, setDescending] = useState(false);
+  const [iconText, setIconText] = useState(Logo.DESCENDING);
+  const dispatch = useDispatch();
+
+  const clickTableIcon = () => {
+    dispatch(updateFrameDataList({ type, isAscending, isDescending }));
+    if (!isActive) {
+      setActive(!isActive);
+      setAscending(true);
+    } else if (!isAscending) {
+      setAscending(true);
+      setDescending(false);
+      setIconText(Logo.DESCENDING);
+    } else if (isAscending && !isDescending) {
+      setAscending(false);
+      setDescending(true);
+      setIconText(Logo.ASCENDING);
+    }
+  };
+
+  const reset = () => {
+    setActive(false);
+    setAscending(false);
+    setDescending(false);
+  };
+
+  const tableIconClassName = [styles.tableIcon];
+  if (isActive) {
+    tableIconClassName.push(styles.jsActive);
+  }
+
+  return (
+    <th onClick={clickTableIcon} className={styles.changeOrder}>
+      {title}{" "}
+      <span
+        className={`${styles.tableIcon} ${isActive && styles["js-active"]}`}
+      >
+        {iconText}
+      </span>
+    </th>
+  );
+};
+
+export default ClickableHeader;
diff --git a/components/FrameDataRow.tsx b/components/FrameDataRow.tsx
@@ -4,33 +4,49 @@ import { NextPage } from "next";
 // interface
 // style
 import styles from "../styles/frameDataRow.module.css";
-import FrameDataTableHeader from "./FrameDataTableHeader";
-import { IFrameData } from "../interfaces/frameData";
+import { IFrameData, symbolType } from "../interfaces/frameData";
 
 interface Props {
   frameData: IFrameData;
 }
 
+const OnHitStatus = {
+  KNOCKDOWN: 9999,
+};
+
 const FrameDataRow: NextPage<Props> = (props) => {
   const { frameData } = props;
+  const getSymbol = (frames: number) => {
+    if (frames >= 1) {
+      return symbolType.Plus;
+    } else {
+      return symbolType.Blank;
+    }
+  };
+  const getOnHitStatus = (frames: number) => {
+    if (frames === OnHitStatus.KNOCKDOWN) {
+      return symbolType.Knockdown;
+    } else {
+      return (
+        <>
+          {getSymbol(frames)}
+          {frames}
+        </>
+      );
+    }
+  };
   return (
     <tr>
       <td>{frameData.input}</td>
       <td>{frameData.startUp}</td>
       <td>{frameData.hitType}</td>
       <td>{frameData.damage}</td>
       <td>
-        {frameData.blockSymbol}
+        {getSymbol(frameData.block)}
         {frameData.block}
       </td>
-      <td>
-        {frameData.hitSymbol}
-        {frameData.hit}
-      </td>
-      <td>
-        {frameData.counterSymbol}
-        {frameData.counter}
-      </td>
+      <td>{getOnHitStatus(frameData.hit)}</td>
+      <td>{getOnHitStatus(frameData.counter)}</td>
     </tr>
   );
 };

diff --git a/components/FrameDataTable.tsx b/components/FrameDataTable.tsx
@@ -6,29 +6,21 @@ import { NextPage } from "next";
 import styles from "../styles/frameDataTable.module.css";
 import FrameDataTableHeader from "./FrameDataTableHeader";
 import FrameDataRow from "./FrameDataRow";
-import { IFrameData } from "../interfaces/frameData";
+import { HeaderType, IFrameData } from "../interfaces/frameData";
 
 interface Props {
   title: string;
   frameData: IFrameData[];
 }
 
-const handleChangeOrder = (frameData: IFrameData[]) => {
-  console.log("handleChangeOrder: frameData: ", frameData);
-};
-
-// TODO: Add redux store soon
-
 const FrameDataTable: NextPage<Props> = (props) => {
   const { frameData, title } = props;
   return (
     <div className={styles.frameDataArea}>
       <h2>{title}</h2>
       <table className={styles.frameDataTable}>
         <tbody>
-          <FrameDataTableHeader
-            handleChangeOrder={() => handleChangeOrder(frameData)}
-          />
+          <FrameDataTableHeader />
           {frameData.map((item, index) => {
             return <FrameDataRow frameData={item} key={index} />;
           })}

diff --git a/components/FrameDataTableHeader.tsx b/components/FrameDataTableHeader.tsx
@@ -4,30 +4,22 @@ import { NextPage } from "next";
 // interface
 // style
 import styles from "../styles/frameDataTableHeader.module.css";
+import { HeaderType } from "../interfaces/frameData";
+import ClickableHeader from "./ClickableHeader";
 
-interface Props {
-  handleChangeOrder: MouseEventHandler | undefined;
-}
+interface Props {}
 
 const FrameDataTableHeader: NextPage<Props> = (props) => {
-  const { handleChangeOrder } = props;
+  const [wasClicked, setClicked] = useState(false);
   return (
     <tr>
       <th>Input</th>
-      <th onClick={handleChangeOrder} className={styles.changeOrder}>
-        Start up ▼
-      </th>
+      <ClickableHeader type={HeaderType.START_UP} title="Start up" />
       <th>Hit Type</th>
       <th>Damage</th>
-      <th onClick={handleChangeOrder} className={styles.changeOrder}>
-        Block ▼
-      </th>
-      <th onClick={handleChangeOrder} className={styles.changeOrder}>
-        Hit ▼
-      </th>
-      <th onClick={handleChangeOrder} className={styles.changeOrder}>
-        CH ▼
-      </th>
+      <ClickableHeader type={HeaderType.BLOCK} title="Block" />
+      <ClickableHeader type={HeaderType.HIT} title="Hit" />
+      <ClickableHeader type={HeaderType.COUNTER} title="CH" />
     </tr>
   );
 };

diff --git a/interfaces/frameData.ts b/interfaces/frameData.ts
@@ -8,40 +8,37 @@ export const symbolType = {
   Plus: "+",
   Minus: "-",
   Blank: "",
+  Knockdown: "KD",
 };
 
 export interface IFrameData {
   input: string;
   startUp: number;
-  // TODO
-  // hitType: "H" | "M" | "L";
   hitType: string;
-  damage: number;
+  damage: string;
   block: number;
-  // TODO
-  // blockSymbol: "+" | "-" | "";
-  blockSymbol: string;
   hit: number;
-  // TODO
-  // hitSymbol: "+" | "-" | "";
-  hitSymbol: string;
   counter: number;
-  // TODO
-  // counterSymbol: "+" | "-" | "";
-  counterSymbol: string;
 }
 
-export interface ICharacterFrameDataResponse {
+export interface ICharacterFrameData {
   name: string;
   description: string;
   moves: IFrameData[];
 }
 
-export interface ICharacterListResponse {
+export interface ICharacterList {
   characters: ICharacterItem[];
 }
 
 export interface ICharacterItem {
   name: string;
   isEntryComplete: boolean;
 }
+
+export enum HeaderType {
+  START_UP = 0,
+  BLOCK = 1,
+  HIT = 2,
+  COUNTER = 3,
+}
diff --git a/package.json b/package.json
@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.1",
     "@types/node": "18.11.12",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
@@ -17,6 +18,12 @@
     "next": "13.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-redux": "^8.0.5",
     "typescript": "4.9.4"
+  },
+  "devDependencies": {
+    "@types/redux-logger": "^3.0.9",
+    "next-redux-wrapper": "^8.0.0",
+    "redux-logger": "^3.0.6"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,6 +1,12 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { Provider } from "react-redux";
+import { createStore } from "./../store/basicStore";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <Provider store={createStore}>
+      <Component {...pageProps} />
+    </Provider>
+  );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,42 +1,43 @@
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import FrameDataTable from "../components/FrameDataTable";
-import {
-  ICharacterFrameDataResponse,
-  ICharacterListResponse,
-} from "../interfaces/frameData";
+import { ICharacterList } from "../interfaces/frameData";
+import { loadFrameDataInfo } from "../reducer/frameDataSlice";
+import { RootState } from "../store/basicStore";
 import styles from "../styles/index.module.css";
-import characterFrameDataSampleData from "./../sampleData/api/characterFrameData/heihachi/sampleResponse.json";
 import characterListSampleResponse from "./../sampleData/api/allCharacters/sampleResponse.json";
 
 export default function Home() {
   const handleFrameDataSelector = () => {
     console.log("handleFrameDataSelector");
   };
-  // TODO: change to JSON data soon
-  const frameDataSample: ICharacterFrameDataResponse =
-    characterFrameDataSampleData;
-  const characterListSample: ICharacterListResponse =
-    characterListSampleResponse;
+  const characterListSample: ICharacterList = characterListSampleResponse;
+  const dispatch = useDispatch();
+  const frameDataInfo = useSelector((state: RootState) => state.frameDataInfo);
+  const { name, description, moves } = frameDataInfo;
+
+  useEffect(() => {
+    dispatch(loadFrameDataInfo());
+  }, []);
 
   return (
     <div>
       <nav>
         <h3>character list</h3>
         <ul>
-          {characterListSample.characters.map((item) => {
+          {characterListSample.characters.map((item, index) => {
             return (
-              <li>
-                {!item.isEntryComplete ? (
-                  <a className={styles.entryNotComplete} href="#">
-                    {item.name}
-                  </a>
-                ) : (
-                  <a className={styles.selectable} href="#">
-                    {item.name}
-                  </a>
-                )}
-                {!item.isEntryComplete ? (
-                  <span className={styles.wip}> (WIP)</span>
-                ) : null}
+              <li className={styles.characterListItem} key={index}>
+                <a
+                  className={`${
+                    !item.isEntryComplete
+                      ? styles.entryNotComplete
+                      : styles.selectable
+                  } ${styles.characterLink}`}
+                  href="#"
+                >
+                  {item.name}
+                </a>
               </li>
             );
           })}
@@ -53,7 +54,7 @@ export default function Home() {
           </div>
         </li>
       </ul>
-      <FrameDataTable title="Standing" frameData={frameDataSample.moves} />
+      <FrameDataTable title="Standing" frameData={moves} />
       {/* TODO: 以下の攻撃内容も追加必須 */}
       {/* <FrameDataTable title="Advancing" frameData={frameDataSample.moves} /> */}
       {/* <FrameDataTable title="Dashing" frameData={frameDataSample.moves} /> */}

diff --git a/public/favicon.ico b/public/favicon.ico