/bingo

Bootstrap5とTypeScriptで作るビンゴマシン

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

Bingo Machine

本番環境

local 開発

  • git clone
  • npm ci
  • npm run dev

機能図

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

機能詳細

  • 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