CTF Visualizer

CTFのスコアや状況をリアルタイムに可視化するためのシステムです。

プロジェクト構成

pnpmを使用したモノレポ構成になっています。

• apps/server: バックエンドサーバー (tRPC, Prisma, WebSocket)
• apps/live: 配信・会場投影用ライブビュー (Next.js)
• packages/shared: 各パッケージで共有される型定義とZodスキーマ

セットアップ

0. CTFdの準備

このシステムはCTFdからデータを取得して可視化するため、まずCTFdのセットアップが必要です。 開始前にCTFdのインフラ上にチームが作成しチームのIDを確認することと、APIトークンまたはセッションクッキーを取得しておいてください。

1. 依存関係のインストールとデータベースの準備

pnpm install
pnpm db:push

2. 環境変数の設定

apps/server/.env.example を apps/server/.env に、apps/live/.env.example を apps/live/.env にコピーし、CTFdのURLやAPIトークンを設定してください。

3. チーム画像の配置

apps/live/public/icons ディレクトリに、チームIDをファイル名とする画像ファイルを配置してください。例: 1.png, 2.png ...

開発コマンド

ルートディレクトリで以下のコマンドを実行できます。

• 全ての開発サーバーを起動: pnpm dev
• サーバーのみ起動: pnpm dev:server
• Live (3001番) のみ起動: pnpm dev:live
• 全てのパッケージをビルド: pnpm build
• ビルドされたLiveビューを本番モードで起動: pnpm start:live

本番中はpnpm dev:serverでサーバーは常にデータをCTFdからポーリングしている状態にし、pnpm start:liveでライブビューを起動してください。

使い方

• ブラウザで http://localhost:3000 にアクセスすると、スコアボードが表示されます。スコアの推移や解いた問題、チームの詳細などをリアルタイムで確認できます。
• 新しい正解が提出されると、通知が表示され、スコアボードが自動的に更新されます。
• Auto Modeを有効にすると、一定間隔で表示する内容が切り替わります。切り替え間隔は apps/live/.env の NEXT_PUBLIC_AUTO_INTERVAL で設定できます。

デモ画像

スコア スコアの推移 解いた問題 チーム一覧 履歴 通知 チーム詳細