Skip to content

paruma/grid-editor

Repository files navigation

Grid Editor

Grid Editor は、競技プログラミングの問題でよく使われるグリッド形式のテストケースを、直感的に作成・編集できるWebアプリケーションです。

🌐 公開先

以下のURLからアプリケーションにアクセスできます。

https://paruma.github.io/grid-editor/

🎬 デモ

デモGIF

✨ 特徴

  • 直感的なグリッド編集: マウスのドラッグ&ドロップや、文字入力でグリッドを簡単に編集できます。
  • 競プロ形式への対応:
    • 作成したグリッドを、競技プログラミングで標準的な入力形式(H W\nグリッド文字列)で表示・コピーできます。
    • 既存の競プロ形式のテストケースを貼り付けて、グリッドに読み込むことも可能です。
  • 共有機能:
    • 作成したグリッドの状態を、URLで簡単にX (旧Twitter) に共有できます。
  • スマートフォン対応:
    • タップ&スライド操作で、スマートフォンやタブレットでも快適にグリッドを編集できます。

🚀 使い方

  1. グリッドのサイズを指定:
    • 「高さ(h)」と「幅(w)」の入力フィールドに数値を入力し、「サイズ設定」ボタンをクリックします。
  2. グリッドを編集:
    • 描画: 左クリックまたはドラッグで、選択中の文字を描画します。
    • 消去: 右クリックまたはドラッグで、セルを . に戻します。
    • 文字変更: 「選択中の文字」フィールドを編集するか、キーボードの1文字キーを押して描画文字を変更します。
  3. テストケースをコピー:
    • 「コピー」ボタンをクリックするか、 Ctrl+C を押すと、競プロ形式のテストケースがクリップボードにコピーされます。
  4. テストケースを読み込み:
    • 「競プロ入力形式から読み込み」エリアにテストケースを貼り付け、「読み込み」ボタンをクリックします。

💻 開発

実行方法

# 依存関係をインストール
npm install

# 開発サーバーを起動
npm start

📄 ライセンス

このプロジェクトは MIT License の下で公開されています。

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published