webtalekit-alpha 0.2.10 → 0.2.13

package/.claude/settings.local.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(python:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git checkout:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/.clinerules

@@ -0,0 +1,65 @@
+# CLINE RULES
+
+## 役割
+
+あなたは、 TypeScript のエキスパートであるエンジニアです。
+日本語で応答しつつ、タスクの進め方を元に効率的にコーディングを進めてください。
+調査結果は、.clinerules ファイルに追記してください。
+
+## タスクの進め方
+
+1. ブランチを切る
+2. タスクを実装する
+　1. webTaleKitをビルドする
+  2. サンプルゲームをビルドして動作確認を行う
+3. PlayWrightでテストを書く
+4. テストを通す
+5. プルリクエストを作成する
+
+## プロジェクト概要
+
+WebTaleKitはブラウザで動作するビジュアルノベルゲームエンジンです。
+ゲームはsceneファイルと呼ばれるXMLとJavaScriptの組み合わせで記述されます。
+ここで記述されるXMLはwebTaleScriptと呼ばれる独自のスクリプト言語で、ゲームの進行制御を記述します。
+
+sceneファイルは以下の要素を持ちます。
+- scenario: シナリオを記述します。テキスト、選択肢、遷移先などを記述します。
+- script: シーンの設定を記述します。背景画像、BGM、テンプレートファイルなどを指定します。（webTaleScriptから呼び出すJavaScriptもここで記述します。）
+
+主要なディレクトリ構成は以下の通りです。
+- src
+ - core: ゲームエンジンのコア部分です。
+ - resource: ゲームで使用するリソースを管理するモジュールです。
+ - utils: ゲームで使用するユーティリティ関数(ロガーや待機、値共有用のStore)を管理するモジュールです。
+- example: サンプルゲームが配置されています。動作確認もここで行います。
+
+## メッセージウィンドウの改善点
+
+### 現在の実装状況
+- メッセージウィンドウは `example/src/screen/title.html` で定義されています
+- メッセージウィンドウ（#messageWindow）は画面下部に配置され、幅100%、高さは画面の1/4（calc(720px / 4)）
+- メッセージテキスト（#messageView）はpタグとして実装され、パディングのみ設定されています
+- テキスト表示処理は `src/core/drawer.ts` の `drawText` メソッドで行われ、1文字ずつテキストを追加しています
+
+### 問題点
+1. **テキスト表示領域の制限がない**:
+   - `#messageView` に幅と高さの制限が設定されていないため、テキストが長くなるとメッセージウィンドウの表示領域を超えてしまう
+   
+2. **テキスト折り返しの設定不足**:
+   - テキストの折り返しに関する設定（word-wrap, word-breakなど）が不足しています
+   
+3. **自動スクロール処理の欠如**:
+   - `overflow-y: auto` が設定されているため、テキストが長くなるとスクロールバーは表示されますが、自動的にスクロールする処理は実装されていません
+
+### 修正案
+1. **CSSの改善**:
+   - `#messageView` に幅と高さの制限を追加
+   - テキスト折り返しの設定を追加（overflow-wrap, word-break）
+   
+2. **drawTextメソッドの改善**:
+   - テキスト追加時にメッセージウィンドウの表示領域を超えないかチェック
+   - 必要に応じて自動スクロール処理を追加
+
+### 修正対象ファイル
+- `example/src/screen/title.html`: CSSスタイルの修正
+- `src/core/drawer.ts`: drawTextメソッドの改善

package/.history/README_20240812174230.md

@@ -0,0 +1,193 @@
+# webTaleKit
+
+![wabTaleKitロゴ](s-plan1-5Light-s-1.jpg)
+
+## 目次
+
+- 概要
+- デモ
+- 環境構築手順
+- 動作確認手順
+- Quick Start（デモゲームを弄ってみよう）
+- できること
+- できないこと
+- フィードバックフォームのご案内
+
+## 概要
+
+TypeScript(JavaScript) ベースのビジュアルノベルゲームエンジンです。  
+UIをHTML・CSS・JavaScriptで柔軟に作成でき、シナリオをマークアップ言語とJavaScriptで制御できます。  
+自動スケーリング機能で、様々なウインドウで遊ぶことができます。  
+VS Codeの拡張機能を用いたGUIエディタやREST API呼び出しによる生成AI連携の追加を提供予定です。  
+
+## デモ
+
+Firefoxでも、Chromeでも、Edgeでも、好きなブラウザを使いたまえ・・・！
+<https://test-game-chi.vercel.app/>
+![alt text](image.png)
+
+## 環境構築手順
+
+1. Node.js(20以降)が必要です。(nvm等お好みの方法がある場合は、そちらでも構いません)
+   - Windowsの場合は、Node.js公式サイト (<https://nodejs.org/>) からインストールしてください。
+   - Macの場合は、`brew install node` を実行してインストールしてください。
+   - Linuxの場合は、以下のコマンドを実行して、インストールしてください。
+
+    ```bash
+        curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
+        sudo apt-get install -y nodejs
+    ```
+
+2. 以下のコマンドを実行してください
+
+    ``` bash
+    npm create tale-game your-game-title
+    ```
+
+プロジェクトに移動して、`npm run play`を実行して、デモゲームが起動すれば、構築は完了です。
+
+## 動作確認手順
+
+以下のコマンドを実行してください。
+
+```bash
+git clone https://github.com/EndoHizumi/testGame.git
+npm install
+npm run play
+```
+
+## Quick Start（デモゲームを弄ってみよう
+
+### 画像を差し替える
+
+- キャラを変える場合
+  - src/resource/chara/guide.png に上書きしてください。
+- 背景画像を変える
+  - src/resource/background/title_bg.png　に上書きしてください。
+- BGMを変える
+  - src/resource/bgm/title_theme.mp3　に上書きしてください。
+
+- 選択肢の画像を変える
+  - src\resource\system\systemPicture\02_button\button.png　に上書きしてください。
+- 選択肢(マウスオーバー時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button2.png　に上書きしてください。
+- 選択肢(クリック時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button3.png　に上書きしてください。
+
+- キャラを増やす
+  - src\resource\character 以下に表示したい画像を置きます。
+  - 登場させたい行数で、`<show src="表示したい画像のパス"></show>` を記述する
+- セリフを増やす
+  - セリフを表示させたい行数で、`<say name="キャラの名前">セリフをここに入れる</say>` を記述する
+- 地の文を増やす
+  - 地の文を表示させたい行数で、`<text>セリフをここに入れる</text>` を記述する
+
+- 選択肢を増やす
+  - 43行目のchoiceタグの中(44行-50行)で、以下のように記述すると、選択されたときに、地の文を表示する
+
+   ``` html
+    <item label='選択肢の文言'>
+        <text>セリフをここに入れる</text>
+    </item>
+   ```
+
+   実装例
+
+   ```　html
+          <choice prompt="ゲームを始めますか？">
+            <item label="はい">
+                <jump index="5" />
+            </item>
+            <item label="いいえ">
+                <jump index="16" />
+            </item>
+            <item label='ちょっと待ってくれ'>
+              <text>承知しました。</text>
+               <jump index="1" />
+            </item>
+        </choice>
+   ```
+
+## 現在の状況
+
+webTaleKitは、現在アルファ版です。  
+
+開発進捗は、[@endo_hizumi](https://x.com/endo_hizumi) で行っております。
+実装予定の項目については、こちらの[Trello](https://trello.com/b/qYNGh7MY)からも確認できます。
+
+デモをプレイした感想・WebTaleKitを使って気になったことなど、意見・感想はこちらで受け付けています！
+[https://forms.gle/uejQwvwAb99wcJht7](https://forms.gle/uejQwvwAb99wcJht7)
+
+検索Hashtag: #webTalekit
+
+## アルファ版で、できること
+
+- 地の文の表示
+- キャラクターのセリフの表示・ボイスの再生
+- キャラクターの画像の表示・位置変更・アニメーション
+- その他の画像の画像の表示・位置変更・アニメーション
+- キャラクターの複数表示・位置変更・アニメーション
+- CGの表示・変更
+- 背景画像の表示・変更
+- 画像のフィルター操作
+  - モノクロ化
+  - セピア化
+  - 透明度の変更
+  - サイズの変更
+- REST API呼び出し（レスポンスの表示）
+- 定義した変数の表示
+- 表示する文章・画像の条件分岐
+- 選択肢の表示
+- 選択肢の画像の変更
+  - 通常時
+  - マウスオーバー
+  - 選択時
+- セリフのジャンプ
+- Ctrlキーでの強制スキップ
+- Enterキーで全文表示
+- シナリオ（シーン）の切り替え
+- BGMの再生・停止
+- SEの再生・停止
+- HTMLで作った画面の表示
+- 解像度の設定変更
+- JavaScript連携
+  - メソッドの呼び出し
+  - 式の実行
+  - 変数の定義・値の変更
+
+## アルファ版(0.2.x-0.1.x)で出来ないこと
+
+- Desktopアプリケーションへのビルド
+- Android(iOS)向けのビルド
+- 画面各種のボタン
+- sayタグの以下の機能
+  - キャラが表示されていないときは、表示する
+- セーブ＆ロード機能
+- showタグ / hideタグの以下の機能
+  - 子要素でフィルター指定
+  - 子要素でアニメーション指定
+  - スラッシュで区切ってリソース種類を指定
+- JavaScript側での背景画像の変更
+- soundタグの以下の機能
+  - pause
+  - setVolume
+  - getVolume
+  - bgmエイリアス
+  - voiceエイリアス
+  - seエイリアス
+- quakeタグ（画面を揺らす）
+- maskタグ（画面の暗転）
+- JavaScriptでのリソースの動的定義
+- セーブファイルの一覧の取得
+- ゲーム設定ファイルの反映
+- 画面用HTMLのcss・jsのインライン化・minify化
+
+## アイコン素材
+
+- <https://www.silhouette-illust.com/>
+
+## カラーコード
+
+青: #3178C6 (TypeScript BLue)
+緑: #02a889 (WebTaleKit Green)
+白: #f8f8f8 (White Smoke)

package/.history/README_20240812175424.md

@@ -0,0 +1,185 @@
+# webTaleKit
+
+![wabTaleKitロゴ](s-plan1-5Light-s-1.jpg)
+
+## 目次
+
+- 概要
+- デモ
+- 環境構築手順
+- 動作確認手順
+- Quick Start（デモゲームを弄ってみよう）
+- できること
+- できないこと
+- フィードバックフォームのご案内
+
+## 概要
+
+TypeScript(JavaScript) ベースのビジュアルノベルゲームエンジンです。  
+UIをHTML・CSS・JavaScriptで柔軟に作成でき、シナリオをマークアップ言語とJavaScriptで制御できます。  
+自動スケーリング機能で、様々なウインドウで遊ぶことができます。  
+VS Codeの拡張機能を用いたGUIエディタやREST API呼び出しによる生成AI連携の追加を提供予定です。  
+
+## デモ
+
+Firefoxでも、Chromeでも、Edgeでも、好きなブラウザを使いたまえ・・・！
+<https://test-game-chi.vercel.app/>
+![alt text](image.png)
+
+## 環境構築手順
+
+1. Node.js(20以降)が必要です。(nvm等お好みの方法がある場合は、そちらでも構いません)
+   - Windowsの場合は、Node.js公式サイト (<https://nodejs.org/>) からインストールしてください。
+   - Macの場合は、`brew install node` を実行してインストールしてください。
+   - Linuxの場合は、以下のコマンドを実行して、インストールしてください。
+
+    ```bash
+        curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
+        sudo apt-get install -y nodejs
+    ```
+
+2. 以下のコマンドを実行してください
+
+    ``` bash
+    npm create tale-game your-game-title
+    ```
+
+プロジェクトに移動して、`npm run play`を実行して、デモゲームが起動すれば、構築は完了です。
+
+## Quick Start（デモゲームを弄ってみよう
+
+### 画像を差し替える
+
+- キャラを変える場合
+  - src/resource/chara/guide.png に上書きしてください。
+- 背景画像を変える
+  - src/resource/background/title_bg.png　に上書きしてください。
+- BGMを変える
+  - src/resource/bgm/title_theme.mp3　に上書きしてください。
+
+- 選択肢の画像を変える
+  - src\resource\system\systemPicture\02_button\button.png　に上書きしてください。
+- 選択肢(マウスオーバー時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button2.png　に上書きしてください。
+- 選択肢(クリック時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button3.png　に上書きしてください。
+
+### 要素を増やす
+
+- キャラを増やす
+  - src\resource\character 以下に表示したい画像を置きます。
+  - 登場させたい行数で、`<show src="表示したい画像のパス"></show>` を記述する
+- セリフを増やす
+  - セリフを表示させたい行数で、`<say name="キャラの名前">セリフをここに入れる</say>` を記述する
+- 地の文を増やす
+  - 地の文を表示させたい行数で、`<text>セリフをここに入れる</text>` を記述する
+
+- 選択肢を増やす
+  - src\scene\title.sceneの43行目のchoiceタグの中(44行-50行)で、以下のように記述すると、選択されたときに、地の文を表示する
+
+   ``` html
+    <item label='選択肢の文言'>
+        <text>セリフをここに入れる</text>
+    </item>
+   ```
+
+   実装例
+
+   ```　html
+          <choice prompt="ゲームを始めますか？">
+            <item label="はい">
+                <jump index="5" />
+            </item>
+            <item label="いいえ">
+                <jump index="16" />
+            </item>
+            <item label='ちょっと待ってくれ'>
+              <text>承知しました。</text>
+               <jump index="1" />
+            </item>
+        </choice>
+   ```
+
+## 現在の状況
+
+webTaleKitは、現在アルファ版です。  
+
+開発進捗は、[@endo_hizumi](https://x.com/endo_hizumi) で行っております。
+実装予定の項目については、こちらの[Trello](https://trello.com/b/qYNGh7MY)からも確認できます。
+
+デモをプレイした感想・WebTaleKitを使って気になったことなど、意見・感想はこちらで受け付けています！
+[https://forms.gle/uejQwvwAb99wcJht7](https://forms.gle/uejQwvwAb99wcJht7)
+
+検索Hashtag: #webTalekit
+
+## アルファ版で、できること
+
+- 地の文の表示
+- キャラクターのセリフの表示・ボイスの再生
+- キャラクターの画像の表示・位置変更・アニメーション
+- その他の画像の画像の表示・位置変更・アニメーション
+- キャラクターの複数表示・位置変更・アニメーション
+- CGの表示・変更
+- 背景画像の表示・変更
+- 画像のフィルター操作
+  - モノクロ化
+  - セピア化
+  - 透明度の変更
+  - サイズの変更
+- REST API呼び出し（レスポンスの表示）
+- 定義した変数の表示
+- 表示する文章・画像の条件分岐
+- 選択肢の表示
+- 選択肢の画像の変更
+  - 通常時
+  - マウスオーバー
+  - 選択時
+- セリフのジャンプ
+- Ctrlキーでの強制スキップ
+- Enterキーで全文表示
+- シナリオ（シーン）の切り替え
+- BGMの再生・停止
+- SEの再生・停止
+- HTMLで作った画面の表示
+- 解像度の設定変更
+- JavaScript連携
+  - メソッドの呼び出し
+  - 式の実行
+  - 変数の定義・値の変更
+
+## アルファ版(0.2.x-0.1.x)で出来ないこと
+
+- Desktopアプリケーションへのビルド
+- Android(iOS)向けのビルド
+- 画面各種のボタン
+- sayタグの以下の機能
+  - キャラが表示されていないときは、表示する
+- セーブ＆ロード機能
+- showタグ / hideタグの以下の機能
+  - 子要素でフィルター指定
+  - 子要素でアニメーション指定
+  - スラッシュで区切ってリソース種類を指定
+- JavaScript側での背景画像の変更
+- soundタグの以下の機能
+  - pause
+  - setVolume
+  - getVolume
+  - bgmエイリアス
+  - voiceエイリアス
+  - seエイリアス
+- quakeタグ（画面を揺らす）
+- maskタグ（画面の暗転）
+- JavaScriptでのリソースの動的定義
+- セーブファイルの一覧の取得
+- ゲーム設定ファイルの反映
+- 画面用HTMLのcss・jsのインライン化・minify化
+
+## アイコン素材
+
+- <https://www.silhouette-illust.com/>
+
+## カラーコード
+
+青: #3178C6 (TypeScript BLue)
+緑: #02a889 (WebTaleKit Green)
+白: #f8f8f8 (White Smoke)

package/.history/README_20240812191012.md

@@ -0,0 +1,185 @@
+# webTaleKit
+
+![wabTaleKitロゴ](s-plan1-5Light-s-1.jpg)
+
+## 目次
+
+- 概要
+- デモ
+- 環境構築手順
+- 動作確認手順
+- Quick Start（デモゲームを弄ってみよう）
+- できること
+- できないこと
+- フィードバックフォームのご案内
+
+## 概要
+
+TypeScript(JavaScript) ベースのビジュアルノベルゲームエンジンです。  
+UIをHTML・CSS・JavaScriptで柔軟に作成でき、シナリオをマークアップ言語とJavaScriptで制御できます。  
+自動スケーリング機能で、様々なウインドウで遊ぶことができます。  
+VS Codeの拡張機能を用いたGUIエディタやREST API呼び出しによる生成AI連携の追加を提供予定です。  
+
+## デモ
+
+Firefoxでも、Chromeでも、Edgeでも、好きなブラウザを使いたまえ・・・！
+<https://test-game-chi.vercel.app/>
+![alt text](image.png)
+
+## 環境構築手順
+
+1. Node.js(20以降)が必要です。(nvm等お好みの方法がある場合は、そちらでも構いません)
+   - Windowsの場合は、Node.js公式サイト (<https://nodejs.org/>) からインストールしてください。
+   - Macの場合は、`brew install node` を実行してインストールしてください。
+   - Linuxの場合は、以下のコマンドを実行して、インストールしてください。
+
+    ```bash
+        curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
+        sudo apt-get install -y nodejs
+    ```
+
+2. 以下のコマンドを実行してください
+
+    ``` bash
+    npm create tale-game your-game-title
+    ```
+
+プロジェクトに移動して、`npm run play`を実行して、デモゲームが起動すれば、構築は完了です。
+
+## Quick Start（デモゲームを弄ってみよう
+
+### 画像を差し替える
+
+- キャラを変える場合
+  - src/resource/chara/guide.png に上書きしてください。
+- 背景画像を変える
+  - src/resource/background/title_bg.png　に上書きしてください。
+- BGMを変える
+  - src/resource/bgm/title_theme.mp3　に上書きしてください。
+
+- 選択肢の画像を変える
+  - src\resource\system\systemPicture\02_button\button.png　に上書きしてください。
+- 選択肢(マウスオーバー時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button2.png　に上書きしてください。
+- 選択肢(クリック時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button3.png　に上書きしてください。
+
+### 要素を増やす
+
+- キャラを増やす
+  - src\resource\character 以下に表示したい画像を置きます。
+  - 登場させたい行数で、`<show src="表示したい画像のパス"></show>` を記述する
+- セリフを増やす
+  - セリフを表示させたい行数で、`<say name="キャラの名前">セリフをここに入れる</say>` を記述する
+- 地の文を増やす
+  - 地の文を表示させたい行数で、`<text>セリフをここに入れる</text>` を記述する
+
+- 選択肢を増やす
+  - src\scene\title.sceneの43行目のchoiceタグの中(44行-50行)で、以下のように記述すると、選択されたときに、地の文を表示する
+
+   ``` html
+    <item label='選択肢の文言'>
+        <text>セリフをここに入れる</text>
+    </item>
+   ```
+
+   実装例
+
+   ```　html
+          <choice prompt="ゲームを始めますか？">
+            <item label="はい">
+                <jump index="5" />
+            </item>
+            <item label="いいえ">
+                <jump index="16" />
+            </item>
+            <item label='ちょっと待ってくれ'>
+              <text>承知しました。</text>
+               <jump index="1" />
+            </item>
+        </choice>
+   ```
+
+## 現在の状況
+
+webTaleKitは、現在アルファ版です。  
+
+開発進捗は、[@endo_hizumi](https://x.com/endo_hizumi) で行っております。
+※上記アカウントは、日常的なツイートも含まれているので、WebTaleKitの情報だけ見たい場合は、検索Hashtag: #webTaleKit で検索をお願いします。
+
+実装予定の項目については、こちらの[Trello](https://trello.com/b/qYNGh7MY)からも確認できます。
+
+デモをプレイした感想・WebTaleKitを使って気になったことなど、意見・感想はこちらで受け付けています！
+[https://forms.gle/uejQwvwAb99wcJht7](https://forms.gle/uejQwvwAb99wcJht7)
+
+## アルファ版で、できること
+
+- 地の文の表示
+- キャラクターのセリフの表示・ボイスの再生
+- キャラクターの画像の表示・位置変更・アニメーション
+- その他の画像の画像の表示・位置変更・アニメーション
+- キャラクターの複数表示・位置変更・アニメーション
+- CGの表示・変更
+- 背景画像の表示・変更
+- 画像のフィルター操作
+  - モノクロ化
+  - セピア化
+  - 透明度の変更
+  - サイズの変更
+- REST API呼び出し（レスポンスの表示）
+- 定義した変数の表示
+- 表示する文章・画像の条件分岐
+- 選択肢の表示
+- 選択肢の画像の変更
+  - 通常時
+  - マウスオーバー
+  - 選択時
+- セリフのジャンプ
+- Ctrlキーでの強制スキップ
+- Enterキーで全文表示
+- シナリオ（シーン）の切り替え
+- BGMの再生・停止
+- SEの再生・停止
+- HTMLで作った画面の表示
+- 解像度の設定変更
+- JavaScript連携
+  - メソッドの呼び出し
+  - 式の実行
+  - 変数の定義・値の変更
+
+## アルファ版(0.2.x-0.1.x)で出来ないこと
+
+- Desktopアプリケーションへのビルド
+- Android(iOS)向けのビルド
+- 画面各種のボタン
+- sayタグの以下の機能
+  - キャラが表示されていないときは、表示する
+- セーブ＆ロード機能
+- showタグ / hideタグの以下の機能
+  - 子要素でフィルター指定
+  - 子要素でアニメーション指定
+  - スラッシュで区切ってリソース種類を指定
+- JavaScript側での背景画像の変更
+- soundタグの以下の機能
+  - pause
+  - setVolume
+  - getVolume
+  - bgmエイリアス
+  - voiceエイリアス
+  - seエイリアス
+- quakeタグ（画面を揺らす）
+- maskタグ（画面の暗転）
+- JavaScriptでのリソースの動的定義
+- セーブファイルの一覧の取得
+- ゲーム設定ファイルの反映
+- 画面用HTMLのcss・jsのインライン化・minify化
+
+## アイコン素材
+
+- <https://www.silhouette-illust.com/>
+
+## カラーコード
+
+青: #3178C6 (TypeScript BLue)
+緑: #02a889 (WebTaleKit Green)
+白: #f8f8f8 (White Smoke)