Merge branch 'develop' of https://github.com/su-its/typing into feat/…

…ranking

.github/workflows/build-app.yml

@@ -8,6 +8,8 @@ on:
     paths:
       - .github/workflows/build-app.yml
       - "typing-app/**"
+      - "!typing-app/docs/**"
+      - "!typing-app/README.md"
   workflow_dispatch:
 
 concurrency:
@@ -37,11 +39,28 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: "yarn"
-          cache-dependency-path: typing-app/yarn.lock
+
+      - name: Get yarn cache folder
+        id: get-yarn-cache-folder
+        shell: bash
+        # will fail if yarn version is 1
+        run: echo "folder=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ${{ steps.get-yarn-cache-folder.outputs.folder }}
+            ./typing-app/.next
+          key: yarn-cache-${{ runner.os }}-${{ hashFiles('typing-app/yarn.lock') }}
+          restore-keys: |
+            yarn-cache-${{ runner.os }}-${{ hashFiles('typing-app/yarn.lock') }}
+            yarn-cache-${{ runner.os }}-
 
       - name: Install Dependencies
         run: yarn
 
+      - name: Check Code Style (Prettier)
+        run: yarn run format:ci
+
       - name: Build Next.js Project
         run: yarn build

.github/workflows/generate-oapi-types.yml

@@ -36,11 +36,11 @@ jobs:
           SCHEMA_VERSION=${{ steps.get_schema_version.outputs.result }}
           SCHEMA_MAJOR_VERSION=${SCHEMA_VERSION%%.*}
           npx openapi-typescript ../typing-server/openapi.yaml --output ./src/libs/api/v${SCHEMA_MAJOR_VERSION}.d.ts
-# TODO: エラーになるので tsc は一旦やめる
-# Error: src/components/atoms/Banner.tsx(3,25): error TS2307: Cannot find module '@/assets/images/banner.png' or its corresponding type declarations.
-#     - name: Validate
-#       working-directory: typing-app
-#       run: yarn exec tsc --noEmit
+      # TODO: エラーになるので tsc は一旦やめる
+      # Error: src/components/atoms/Banner.tsx(3,25): error TS2307: Cannot find module '@/assets/images/banner.png' or its corresponding type declarations.
+      #     - name: Validate
+      #       working-directory: typing-app
+      #       run: yarn exec tsc --noEmit
       - name: Commit
         uses: stefanzweifel/git-auto-commit-action@v5
         with:

CODEOWNERS

@@ -0,0 +1 @@
+* @KinjiKawaguchi @h-takeyeah

typing-app/.prettierignore

@@ -6,3 +6,5 @@ bun.lockb
 .eslintrc.json
 eslint.config.js
 package-lock.json
+yarn.lock
+src/libs/api/v1.d.ts

typing-app/docs/api-usage.md

@@ -6,8 +6,22 @@
 
 例えば、
 
-```ts
-// WIP
+```tsx
+import { client } from "@/libs/api";
+
+async function SomePageToGetRanking() {
+  const { data, error } = await client.GET("/scores/ranking");
+
+  if (error) {
+    return <div>Error</div>;
+  }
+
+  return (
+    <div>
+      ranking data: {JSON.stringify(data)}
+    </div>
+  );
+}
 ```
 
 のようにします。

typing-app/docs/game-page-ProgressBar.md

@@ -0,0 +1,40 @@
+# ProgressBar コンポーネント説明
+
+Team1 用．適宜加筆していってください．
+
+## 場所
+
+typing/typing-app/src/components/atoms/ProgressBar.tsx
+
+## 使い方
+
+```[jsx]
+<ProgressBar maxWidth={250} value={100} />
+```
+
+### props
+
+- maxWidth: number：100%時の横幅[px]．
+- value: number：進捗．0-maxValue をとる．
+- maxValue: number：100%の進捗．
+- height: number：高さ[px]
+
+### 例
+
+progress を変更することで ProgressBar が伸び縮みする．
+
+```[jsx]
+const [progress, setProgress] = useState(0);
+const handleProgressChange = () => setProgress(progress+1);
+
+return (
+  <ProgressBar maxWidth={250} height={20} maxValue={100} value={progress} />
+);
+```
+
+### Style
+
+css ファイルは不使用．
+div タグ内で CSS-in-JS のみ使用．
+背景色・高さはここで指定．
+変更する場合は，他で使用されている場所に影響がでるので注意．

typing-app/docs/game-page-wpm-logarithm.md

@@ -0,0 +1,104 @@
+# WPM 表示の対数表示
+
+## 動機
+
+瞬間 WPM を表示すると現状のゲージを飛び出すことがかなり多い．
+
+## 対数表示
+
+### 現状（線形表示）
+
+- ゲージ幅：330px
+- 現状の値域：謎（ラベルの数値がおかしい）
+  - 実際には 0〜500 で仮実装
+
+### 変更後
+
+- ゲージ幅：330px（同じ）
+- 値域：0〜1000
+  - それを超えたら天井処理
+- 式
+
+  ```
+  value = (1000 / 3) * Math.log10((999 / 1000) * wpm + 1);
+  ```
+
+  - value: ProgressBar に渡す パラメータ
+  - ProgressBar に渡す maxValue は 1000 とする．
+
+### 効果
+
+頻出しそうな 0〜240WPM でゲージの 約 8 割を専有できる．
+![](./img/game-page/wpmLogFunc.webp)
+
+## UI 更新
+
+以下の値に合わせてゲージのラベルを更新する必要がある．
+| WPM | ゲージ上での値 |
+| ---- | ---- |
+| 0 | 0 |
+| 50 | 569 |
+| 100 | 668 |
+| 150 | 726.2 |
+| 200 | 767.6 |
+| 250 | 799.7 |
+| 300 | 826 |
+| 350 | 848.3 |
+| 400 | 867.6 |
+| 450 | 884.6 |
+| 500 | 899.8 |
+| 550 | 913.6 |
+| 600 | 926.1 |
+| 650 | 937.7 |
+| 700 | 948.4 |
+| 750 | 958.4 |
+| 800 | 967.7 |
+| 850 | 976.5 |
+| 900 | 984.8 |
+| 950 | 992.6 |
+| 1000 | 1000 |
+
+Excel 用計算式
+
+```
+=(1000 / 3) _LOG10((999 / 1000) _ A1 + 1)
+```
+
+## その他
+
+### 対数化に使った関数の導出
+
+#### 記号定義
+
+$\log$の底は 10 とする（常用対数）．
+$w \in [0, 1000]$：WPM の値
+$v\in [0, 1000]$：ProgressBar 上での値
+$v=f(w)$として
+
+- $v$が$\log w$に比例する
+- $[0, 1000] \rightarrow [0, 1000]$
+
+の 2 つを満たす$f$を作る．
+
+$\log 0 : undefined$ なので$f(1000)$を先に考える．
+仮に
+$g(x) := a\log (x)$ ($a$: 任意定数, ただし$a\neq 0$)
+とすると，
+$g(1000) = 1000$から
+$g(1000)=a\log 1000 = 3a$
+$\therefore a = \frac{1000}{3}$
+つぎに$f(0)$について考える．
+ここで， $x:=h(w)$とし，$f(x)=g(h(w))$とすれば，
+$h(0) = 1, h(1000)=1000$を満たすとき
+$f(0) = 0, f(1000)=1000$を満たす．
+$w\in[0,1000]$を線形変換して$x\in[1,1000]$にすることを考えると
+$x=h(w)=\frac{999}{1000}x+1$
+$\therefore f(w) = \frac{1000}{3}\log (\frac{999}{1000}x+1)$
+
+### 採用しなかった対処
+
+現状のゲージを飛び出すときは，飛び出さないように（max 関数使うなりして）天井処理．
+
+#### 採用しなかった理由
+
+現状のゲージを飛び出す頻度が高すぎる and 切り捨てられる値域が広い．

typing-app/docs/game-page.md

@@ -0,0 +1,120 @@
+# GamePage 向け説明などなど
+
+Team1 用．適宜加筆していってください．
+
+## 用語
+
+- Page：[url]/game で表示されるページ．
+- SubPage：Page 内の画面遷移で使う．それぞれ 1 つの画面．
+- GamePre：ゲーム開始前の画面のこと．
+- GameTyping：実際にタイピングする画面のこと．
+- GameResult：ゲーム終了後の結果表示画面のこと．
+
+## 前提
+
+Game は以下のように画面遷移する．
+GamePre → GameTyping → GameResult
+
+## ディレクトリ
+
+### Page
+
+src/app/compontents/pages/
+
+- Game.tsx
+
+### SubPage
+
+src/app/compontents/templates/
+
+- GamePre.tsx
+- GameTyping.tsx
+- GameResult.tsx
+
+## 実装
+
+### 画面遷移
+
+![画面遷移図](./img/game-page/screen-transition.png)
+
+暫定的に `GamePre` → `GameTyping` → `GameResult` をループ．`GameResult` の後は変更のはず．
+Game.tsx 内で`subPageList`配列に 3 つの `SubPage` コンポーネントを格納しておき，インデックスを変更することで画面を遷移させる．
+`SubPage` 内では`nextPage`関数を受け取り，それを実行することで次のページのインデックスに変更されるようにしておく．
+`GameResult` の `nextPage` は要変更．
+
+### 各役割について
+
+それぞれの分担について，編集する可能性のあるファイルとやることを簡単に書いた．どちらも軽く考えただけ．編集する可能性のあるファイルは足りないかもしれないし余分かもしれないし，やることは他に良い or 理解しやすいやり方があるならそのようにすれば OK．以下のリストはあくまでも目安．
+
+#### 1 ゲーム開始ボタン
+
+##### 編集する可能性のあるファイル
+
+- GamePre.tsx
+
+##### やること
+
+- ボタンのスタイリングなど
+
+#### 2 開始ボタンを押したら、文章をランダムに選択
+
+##### 編集する可能性のあるファイル
+
+- GamePre.tsx
+- GameTyping.tsx
+
+##### やること
+
+- まだはっきりしてない？のでとりあえず 0 ～ n の乱数を生成してダミーの fetch リクエストを送る．
+- GamePre.tsx ではすでに開始ボタンをクリックした時のイベントを設定しているが，props として受け取っている`nextPage`関数を呼び出す関数を作り，その中で文章選択のプログラムを書く．
+
+#### 3 カウントダウンの開始
+
+##### 編集する可能性のあるファイル
+
+- GamePre.tsx
+- GameTyping.tsx
+- ProgressBar.tsx
+
+##### やること
+
+- `useEffect`を使いそう．タイマーアプリの実装とかが参考になるはず．
+- カウントダウン開始は[2]に実装してもらうので，最初はボタンを押したら開始とかで開発．
+- ProgressBar に残り時間と最大時間を渡す．
+
+#### 4 入力のマッチング
+
+##### 編集する可能性のあるファイル
+
+- GameTyping.tsx
+
+##### やること
+
+- キー入力はライブラリを使えば楽…？
+- 入力したキーの正誤のカウント．
+
+#### 5 カウントダウンが 0 になったタイミングで、データを送信
+
+##### 編集する可能性のあるファイル
+
+- GameTyping.tsx
+
+##### やること
+
+- POST リクエストでスコアデータを送信．データ形式等はまた後で．
+
+#### 6 入力テキストの管理
+
+##### 編集する可能性のあるファイル
+
+##### やること
+
+#### 7 リザルトの表示
+
+##### 編集する可能性のあるファイル
+
+- GameResult.tsx
+
+##### やること
+
+- 結果を良い感じに表示．