Merge pull request #17 from PerryM123/develop

ver0.4リリース

.env

@@ -1,2 +1,2 @@
-LOCAL_URL=http://localhost:3000
-GITPAGES_URL=https://raw.githubusercontent.com/PerryM123/tekken-frame-data/master/public
+LOCAL_URL=http://localhost:3000/tekken-frame-data
+GITHUB_PAGES_URL=https://raw.githubusercontent.com/PerryM123/tekken-frame-data/develop/public

README-english.md

@@ -0,0 +1,68 @@
+# Tekken Frame Data ver0.4
+※ [日本語のREADME.mdはここ！](README.md)👈
+
+## Why Am I Making This?
+
+Recently I've been getting to a fighting game called Tekken 7. There are various websites with strategy info but unfortunately, those websites were:
+- difficult to navigate
+- does not contain the functionality I wanted
+for me so I decided to make my own.
+
+## Included Features Added To The Project
+
+### 1) When the command move is pressed, video will be displayed showing the move
+![alt text](./sampleData/video-moves.gif)
+
+________
+
+
+### 2) Change the order of table details
+![alt text](./sampleData/video-change-order.gif)
+
+________
+
+### 3) Highlighting of data within the table
+![alt text](./sampleData/video-highlighting.gif)
+
+## The Goal
+
+To get a handle on developing with Next.js, Express.js, and mysql.
+
+※ Express.js and mysql development will be handled on a separate repository
+
+## Github Pages
+
+https://perrym123.github.io/tekken-frame-data/
+
+## Getting Started
+
+```
+$ git clone [email protected]:PerryM123/tekken-frame-data.git
+$ cd tekken-frame-data
+$ yarn
+$ yarn dev
+```
+
+## Techonogies being used
+
+- フロント技術: NextJS
+- サーバーサイド技術: express.JS (TODO: Add repo here)
+- データベース: mysql
+
+## Prettier configurations
+
+For those using vscode, the settings below should get Prettier setup fine.
+
+```
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
+```

README.md

@@ -1,8 +1,25 @@
-# Tekken Frame Data ver0.3.1
+# Tekken Frame Data ver0.4
+※ [English README.md is here！](README-english.md)👈
 
 ## なぜ作ってるか
 
-最近鉄拳 7 という格闘ゲームにハマっててキャラの攻撃内容がいろんなサイトに記載されてるけど若干見にくいので見やすくなるようなフレームデータ表を作成しました。
+僕は最近鉄拳 7 という格闘ゲームにハマっててキャラの攻撃内容などがいろんなサイトに記載されてるけど若干見にくいので見やすくなるように自分で実装しました。
+
+## 機能一覧
+
+### 1) 技のコマンドを押すと技の動画が再生する
+![alt text](./sampleData/video-moves.gif)
+
+________
+
+### 2) フレーム表の項目の並び順（昇順・降順）を変更できる
+![alt text](./sampleData/video-change-order.gif)
+
+________
+
+### 3) テーブルの項目をハイライトできる
+![alt text](./sampleData/video-highlighting.gif)
+
 
 ## 目的
 
@@ -12,8 +29,6 @@ Next.js と express.js と mysql の練習のために作成してます。
 
 https://perrym123.github.io/tekken-frame-data/
 
-![alt text](./sampleData/ver0.3.1.gif)
-
 ## Getting Started
 
 ```

components/FrameDataRow.tsx

@@ -1,10 +1,13 @@
 // libraries
-import { useState, useEffect } from 'react';
+import { useState, useEffect, MouseEvent } from 'react';
+import { useSelector } from 'react-redux';
 import { NextPage } from 'next';
 // interface
+import { IFrameData, symbolType } from '../interfaces/frameData';
 // style
 import styles from '../styles/frameDataRow.module.css';
-import { IFrameData, symbolType } from '../interfaces/frameData';
+import { AppState } from '../store/store';
+import { basePath } from '../utils/constants';
 
 interface Props {
   frameData: IFrameData;
@@ -16,6 +19,18 @@ const OnHitStatus = {
 
 const FrameDataRow: NextPage<Props> = (props) => {
   const { frameData } = props;
+  const [videoFileName, setVideo] = useState('');
+  const [isOpenModal, setOpenModal] = useState(false);
+  const [commandMoveText, setCommandMoveText] = useState('');
+  const frameDataInfo = useSelector((state: AppState) => state.frameData);
+
+  const handleVideo = (e: MouseEvent, commandMove: string) => {
+    const textContent = (e.target as HTMLElement).textContent;
+    if (!textContent) return;
+    setVideo(textContent);
+    setCommandMoveText(commandMove);
+    setOpenModal(true);
+  };
   const getSymbol = (frames: number) => {
     if (frames >= 1) {
       return symbolType.Plus;
@@ -35,19 +50,60 @@ const FrameDataRow: NextPage<Props> = (props) => {
       );
     }
   };
+  const handleCloseModalClick = () => {
+    setOpenModal(false);
+  };
   return (
-    <tr>
-      <td>{frameData.input}</td>
-      <td>{frameData.startUp}</td>
-      <td>{frameData.hitType}</td>
-      <td>{frameData.damage}</td>
-      <td>
-        {getSymbol(frameData.block)}
-        {frameData.block}
-      </td>
-      <td>{getOnHitStatus(frameData.hit)}</td>
-      <td>{getOnHitStatus(frameData.counter)}</td>
-    </tr>
+    <>
+      {isOpenModal && (
+        <div onClick={handleCloseModalClick} className={styles.overlay}>
+          <div
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className={styles.modalContent}
+          >
+            <div className={styles.closeButton} onClick={handleCloseModalClick}>
+              +
+            </div>
+            {videoFileName.length && (
+              <video
+                key={videoFileName}
+                poster={`${basePath}/loading.gif`}
+                loop
+                width="100%"
+                autoPlay
+              >
+                <source
+                  src={`${basePath}/video/${frameDataInfo.name}/${videoFileName}.mp4`}
+                  type="video/mp4"
+                />
+              </video>
+            )}
+            <div className={styles.modalCommandMove}>{commandMoveText}</div>
+          </div>
+        </div>
+      )}
+      <tr>
+        <td
+          className={styles.videoLink}
+          onClick={(e: MouseEvent) => {
+            handleVideo(e, frameData.input);
+          }}
+        >
+          <div>{frameData.input}</div>
+        </td>
+        <td>{frameData.startUp}</td>
+        <td>{frameData.hitType}</td>
+        <td>{frameData.damage}</td>
+        <td>
+          {getSymbol(frameData.block)}
+          {frameData.block}
+        </td>
+        <td>{getOnHitStatus(frameData.hit)}</td>
+        <td>{getOnHitStatus(frameData.counter)}</td>
+      </tr>
+    </>
   );
 };
 

components/FrameDataTable.tsx

@@ -9,15 +9,13 @@ import FrameDataRow from './FrameDataRow';
 import { HeaderType, IFrameData } from '../interfaces/frameData';
 
 interface Props {
-  title: string;
   frameData: IFrameData[];
 }
 
 const FrameDataTable: NextPage<Props> = (props) => {
-  const { frameData, title } = props;
+  const { frameData } = props;
   return (
     <div className={styles.frameDataArea}>
-      <h2>{title}</h2>
       <table className={styles.frameDataTable}>
         <tbody>
           <FrameDataTableHeader />

next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  basePath: '/tekken-frame-data'
 }
-
+// config確認のため
+console.log('nextConfig: ', nextConfig);
+console.log('process.env: ', process.env);
 module.exports = nextConfig

pages/index.tsx

@@ -15,6 +15,7 @@ import {
 import FrameDataTable from '../components/FrameDataTable';
 // styles
 import styles from '../styles/index.module.css';
+// utils
 import getHostName from '../utils/getHostName';
 
 interface Props {
@@ -26,7 +27,7 @@ export const getStaticProps = wrapper.getStaticProps(
   (store) =>
     async ({ params }) => {
       const hostName = getHostName();
-      const frameDataResponse: AxiosResponse<any> = await axios.get(
+      const frameDataResponse: AxiosResponse = await axios.get(
         `${hostName}/sampleData/api/characterFrameData/heihachi/sampleResponse.json`
       );
       const characterDataResponse: AxiosResponse = await axios.get(
@@ -57,7 +58,7 @@ export default function Home(data: Props) {
   const characterList = useSelector((state: AppState) => state.characterList);
   const { name, description, moves } = frameDataInfo;
   return (
-    <div>
+    <div className={styles.main}>
       <nav>
         <h3>character list</h3>
         <ul>
@@ -80,17 +81,7 @@ export default function Home(data: Props) {
         </ul>
       </nav>
       <h1>Heihachi's Frame Data</h1>
-      <ul>
-        <li>
-          <div onClick={handleFrameDataSelector}>Make all one list</div>
-        </li>
-        <li>
-          <div onClick={handleFrameDataSelector}>
-            Section off by move category
-          </div>
-        </li>
-      </ul>
-      <FrameDataTable title="Standing" frameData={moves} />
+      <FrameDataTable frameData={moves} />
       {/* TODO: 以下の攻撃内容も追加必須 */}
       {/* <FrameDataTable title="Advancing" frameData={frameDataSample.moves} /> */}
       {/* <FrameDataTable title="Dashing" frameData={frameDataSample.moves} /> */}

public/sampleData/api/characterFrameData/heihachi/sampleResponse.json

@@ -1,5 +1,5 @@
 {
-  "name": "Heihachi",
+  "name": "heihachi",
   "description": "Heihachi is the ________",
   "moves": [
     {

styles/frameDataRow.module.css

@@ -1,11 +1,9 @@
-.frameDataArea {
-  padding: 0 10px 25px;
-}
 .frameDataTable {
   width: 100%;
   border-spacing: 0;
   text-align: center;
 }
+
 .frameDataTable th {
   color: white;
   background: black;
@@ -33,12 +31,62 @@
   border-left: 1px solid #000;
   border-bottom: 1px solid #000;
 }
+
 .changeOrder {
   cursor: pointer;
 }
+
 .changeOrder:hover {
   opacity: 0.8;
 }
+
 .frameDataTable tr:hover {
   background-color: rgb(0 0 0 / 30%);
 }
+
+.modal {
+  position: relative;
+}
+
+.overlay {
+  z-index: 3;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  min-width: 90%;
+  padding: 45px 20px 20px;
+}
+
+.videoLink {
+  text-decoration: underline;
+  color: #1b43ef;
+  cursor: pointer;
+}
+
+.closeButton {
+  font-size: 50px;
+  rotate: 45deg;
+  position: absolute;
+  top: -10px;
+  right: 0;
+  width: 35px;
+  height: 60px;
+  cursor: pointer;
+}
+
+.modalCommandMove {
+  margin-top: 10px;
+  font-weight: bold;
+}