Bingo Machine

本番環境

• GitHub Pagesで構築

local 開発

• git clone
• npm ci
• npm run dev

機能図

flowchart LR
RESET-->|確認ポップアップ/履歴消去|START-->|ドラムロール/数字ルーレット|STOP-->|シンバル/ランダム数字取得/履歴追加|START

機能詳細

• start を押す
  • ドラムロールが鳴る
  • 左上部の数字が一定間隔でランダム表示される
  • start/stop ボタンはstopとなる
  • ドラムロールが鳴り終わると自動的に数字が選択され、stop表示になる
• stop を押す
  • ドラムロールを停止する
  • シンバルが鳴動する
  • 左上部の数字のランダム表示を停止する
  • 止まった=選択された数字を Hit Numbers に追加する
  • start/stop ボタンはstartとなる
• reset を押す
  • confirm を出す
  • Hit Numbers に表示されている数字を全消去する
  • 左上部の数字は 00 となる
  • confirm 中、画面の変動はない
    • 数字選択中に reset を押下した場合、ドラムロールは鳴り続けるが、数字のランダム表示は停止する
• reload 時
  • start/stop ボタンはstartとなる
  • 左上部の数字は 00 となる
  • Hit Numbers は reset されず、表示されたままとなる

技術

Styling

• css ファイルは存在しない
• Bootstrap5 に完全依存
  • レスポンシブ対応
  • Bootstrap5 で賄えない部分のみ、style 要素で指定
• font はGoogle Fontsを使用

TypeScript

処理

• localStorage による履歴機能を実装
• domManipulation.ts では、DOM に依存するメソッドを class に紐づけて管理
• numberList.ts では、DOM に依存しないメソッドを class に紐づけて管理
  • 固定想定の値はこちらで管理
• index.ts で可変値を設定

lint

• esLint と prettier が git commit 時に発火する
  • husky と lint-staged で設定
• esLint と prettier の設定は package.json に集約
  • 設定ファイルを作成せず、一覧性を追求
  • esLint は独自設定せず、recommend のルールに準拠
• tsconfig は、@tsconfig/strictest のルールをさらに厳格にして適用

GitHub

GitHub Actions

• GitHub Pages への deploy
• 外形監視
• 依存モジュールの脆弱性検査
• 放置Issue/PRの自動
• CodeQL で脆弱性を含むコードの検出（TypeScriptのみ）

モジュールアップデート

• dependabot.yml
  • module update の Pull Request が週一で最大 10 件作成されるように設定

各種テンプレート

• Issue
• Pull Requests
• Security Policy

リリースノート

• GitHub の機能を利用

コードオーナー

• すべて @ROhta