webtalekit-alpha 0.2.10 → 0.2.13

package/.history/webpack.config_20240430001309.js

@@ -0,0 +1,37 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+  mode: 'development',
+  entry: './src/index.js', // エントリーポイントのファイル
+  output: {
+    filename: 'bundle.js', // 出力ファイル名
+    path: path.resolve(__dirname, 'dist'), // 出力ディレクトリ
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/template.html', // (オプション) 使用するHTMLテンプレートファイル
+      filename: 'index.html', // 出力されるHTMLファイル名
+    }),
+  ],
+  devServer: {
+    static: './dist',
+    port: 8080,
+    headers: {
+      'Feature-Policy': "autoplay 'self'"
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js']
+  },
+  devtool: 'inline-source-map'
+};

package/.history/webpack.config_20240430002112.js

@@ -0,0 +1,37 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+  mode: 'development',
+  entry: './src/index.js', // エントリーポイントのファイル
+  output: {
+    filename: 'bundle.js', // 出力ファイル名
+    path: path.resolve(__dirname, 'dist'), // 出力ディレクトリ
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/template.html', // (オプション) 使用するHTMLテンプレートファイル
+      filename: 'index.html', // 出力されるHTMLファイル名
+    }),
+  ],
+  devServer: {
+    static: './dist',
+    port: 8080,
+    headers: {
+      'Feature-Policy': "autoplay 'self'"
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js']
+  },
+  devtool: 'source-map'
+};

package/CLAUDE.md

@@ -0,0 +1,96 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+webTaleKit is a TypeScript-based visual novel game engine that allows creating interactive stories using HTML, CSS, and JavaScript. The engine supports flexible UI creation, scenario control with markup language and JavaScript, and automatic scaling for various window sizes.
+
+## Development Commands
+
+### Build and Development
+- `npm run build` - Compile TypeScript to JavaScript and prepare distribution files
+- `npm run dev` - Build the project and run development server in example folder
+- `npm run lint` - Run ESLint for code quality checking
+- `npm run test` - Run Jest tests
+
+### CLI Tool
+- `wtc` - WebTaleScript parser CLI (available via `parser/cli.js`)
+- Usage: `wtc <scene-file> [output-directory]` to convert .scene files to .js/.ts files
+
+## Architecture
+
+### Core Components
+
+#### Core Engine (`src/core/`)
+- **Core** (`src/core/index.js`): Main game engine class that orchestrates all game systems
+- **ScenarioManager** (`src/core/scenarioManager.ts`): Manages game scenarios, progress, and history
+- **Drawer** (`src/core/drawer.ts`): Handles canvas rendering and visual effects
+- **ResourceManager** (`src/core/resourceManager.ts`): Manages game resources and assets
+
+#### Resource Management (`src/resource/`)
+- **ImageObject** (`src/resource/ImageObject.ts`): Handles image loading, filtering, and manipulation
+- **SoundObject** (`src/resource/soundObject.ts`): Manages audio playback and sound effects
+
+#### Utilities (`src/utils/`)
+- **Logger** (`src/utils/logger.ts`): Logging system for debugging
+- **Store** (`src/utils/store.ts`): Data persistence utilities
+- **WaitUtil** (`src/utils/waitUtil.ts`): Async waiting utilities
+
+### Command System
+
+The engine uses a command-based architecture where scenarios are executed through command handlers:
+
+- `text` - Display text content
+- `choice` - Present interactive choices
+- `show/hide` - Display/remove images and characters
+- `sound` - Play audio (BGM/SE)
+- `say` - Character dialogue with optional voice
+- `jump` - Navigate to different scenario points
+- `if` - Conditional logic
+- `call` - Execute JavaScript code
+- `moveto` - Animate character movement
+- `route` - Scene transitions
+
+### Configuration
+
+- `engineConfig.json` - Main engine configuration (title, resolution, etc.)
+- `example/src/resource/config.js` - Resource definitions for games
+- Template HTML files define UI layouts
+
+### Scene File Format
+
+Scene files use a custom markup language (`.scene` extension) that gets parsed into JavaScript by the CLI tool. The parser converts markup into scenario objects that the engine can execute.
+
+### Resource Structure
+
+Game resources are organized in the `example/src/resource/` folder:
+- `background/` - Background images
+- `chara/` - Character sprites
+- `bgm/` - Background music
+- `se/` - Sound effects
+- `system/` - UI elements and system graphics
+
+## Testing
+
+- Uses Jest with TypeScript support
+- Test files use `.test.ts` extension
+- E2E tests available in `tests/e2e/` using Playwright
+- Coverage reports generated in `coverage/` directory
+
+## Build Process
+
+The build process:
+1. Compiles TypeScript files to JavaScript
+2. Copies necessary files (package.json, README.md, engineConfig.json, parser/)
+3. Outputs to `dist/` directory
+4. Preserves `src/core/index.js` as the main entry point
+
+## Development Notes
+
+- The engine supports both JavaScript and TypeScript scene files
+- Resources are loaded dynamically with existence checking
+- The engine includes error handling for missing resources
+- Supports REST API calls for AI integration
+- Includes variable expansion using mustache syntax (`{{variable}}`)
+- All commands support conditional execution with `if` attributes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Endo_Hizumi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -9,6 +9,8 @@
 - 環境構築手順
 - 動作確認手順
 - Quick Start（デモゲームを弄ってみよう）
+- 現在の状況
+- ロードマップ
 - できること
 - できないこと
 - フィードバックフォームのご案内
@@ -28,7 +30,19 @@ Firefoxでも、Chromeでも、Edgeでも、好きなブラウザを使いたま
 
 ## 環境構築手順
 
-1. Node.js(20以降)が必要です。(nvm等お好みの方法がある場合は、そちらでも構いません)
+1. Git が必要です。
+   - **インストール確認:** `git --version` でバージョンが表示されれば OK
+   - Windowsの場合は、Git公式サイト (<https://git-scm.com/>) からインストールしてください。
+   - Macの場合は、`brew install git` を実行してインストールしてください。
+   - Linuxの場合は、以下のコマンドを実行してインストールしてください。
+
+    ```bash
+    sudo apt-get update
+    sudo apt-get install git
+    ```
+
+2. Node.js(20以降)が必要です。(nvm等お好みの方法がある場合は、そちらでも構いません)
+   - **インストール確認:** `node --version` でv20以上のバージョンが表示されれば OK
    - Windowsの場合は、Node.js公式サイト (<https://nodejs.org/>) からインストールしてください。
    - Macの場合は、`brew install node` を実行してインストールしてください。
    - Linuxの場合は、以下のコマンドを実行して、インストールしてください。
@@ -38,13 +52,15 @@ Firefoxでも、Chromeでも、Edgeでも、好きなブラウザを使いたま
         sudo apt-get install -y nodejs
     ```
 
-2. 以下のコマンドを実行してください
+3. 以下のコマンドを実行してください
 
     ``` bash
     npm create tale-game your-game-title
+    cd your-game-title
+    npm run play
     ```
 
-プロジェクトに移動して、`npm run play`を実行して、デモゲームが起動すれば、構築は完了です。
+デモゲームが起動すれば、構築は完了です。
 
 ## 動作確認手順
 
@@ -56,42 +72,65 @@ 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>
-   ```
+## Quick Start（デモゲームを弄ってみよう）
+
+このセクションでは、プログラミングの知識がなくても簡単にゲームをカスタマイズできる方法を説明します。
+
+### 画像を差し替える（簡単なカスタマイズ）
+
+**手順:** 既存の画像ファイルを新しい画像で置き換える（ファイル名は同じにしてください）
+
+#### キャラクターや背景を変える
+
+- **キャラを変える場合**
+  - `./src/resource/chara/guide.png` を新しいキャラ画像で上書きしてください（ファイル名は `guide.png` のまま）
+- **背景画像を変える**
+  - `./src/resource/background/title_bg.png` を新しい背景画像で上書きしてください（ファイル名は `title_bg.png` のまま）
+- **BGMを変える**
+  - `./src/resource/bgm/title_theme.mp3` を新しい音楽ファイルで上書きしてください（ファイル名は `title_theme.mp3` のまま）
+
+#### ボタンの見た目を変える
+
+- **選択肢の画像を変える**
+  - `./src/resource/system/systemPicture/02_button/button.png`（通常時）- ファイル名は `button.png` のまま上書き
+  - `./src/resource/system/systemPicture/02_button/button2.png`（マウスを乗せた時）- ファイル名は `button2.png` のまま上書き
+  - `./src/resource/system/systemPicture/02_button/button3.png`（クリック時）- ファイル名は `button3.png` のまま上書き
+
+**パス表記について:**
+
+- `./` は「現在のプロジェクトフォルダから」という意味です
+- パス区切り文字は `/` (スラッシュ) を使用しています
+- **Windowsをお使いの方:** `\` (バックスラッシュ) でも動作しますが、上記の `/` 形式を推奨します
+
+### シナリオファイルを編集する（テキストの変更）
+
+シナリオファイル（`.scene`ファイル）をテキストエディタで開いて、以下の方法で内容を変更できます：
+
+#### 基本的な要素の追加
+
+- **キャラを増やす**
+  1. `./src/resource/character` フォルダに新しいキャラ画像を保存
+  2. シナリオファイルで `<show src="キャラ画像のファイル名"></show>` を記述
+- **セリフを増やす**
+  - `<say name="キャラの名前">ここにセリフを入力</say>` を記述
+- **地の文（ナレーション）を増やす**
+  - `<text>ここに地の文を入力</text>` を記述
 
-   実装例
+**初心者の方へ:** まずは既存のテキストを変更することから始めることをお勧めします。
+
+#### 選択肢を追加・変更する
+
+選択肢はプレイヤーがゲームの進行を選ぶ重要な要素です。シナリオファイル内の `<choice>` タグを編集することで変更できます。
+
+**基本的な選択肢の書き方:**
+
+``` html
+<item label='選択肢の文言'>
+    <text>選択後に表示される文章</text>
+</item>
+```
+
+**実用的な例:**
 
    ```　html
           <choice prompt="ゲームを始めますか？">
@@ -120,54 +159,113 @@ webTaleKitは、現在アルファ版です。
 
 検索Hashtag: #webTalekit
 
-## アルファ版で、できること
+## ロードマップ（実装予定）
+
+| バージョン | コードネーム | codeName | 内容
+| :--- | :--- | :--- | :---
+| 0.1.0 | 初音| HATUNE | 初期リリース
+| 0.2.0 | 礎 | ISHIZUE | 基本機能アップデート<br>0.2.12～<br>ダイアログ表示タグの追加<br>engineConfig反映バグの修正<br>未定義タグがある場合、undefineを呼び出すバグの修正<br>文字列以外を囲むとこける問題の修正<br>リンク切れでこける問題の修正<br>メッセージウインドウオーバーフローの修正<br>if属性の実装<br>for属性の実装<br>既読管理の追加
+| 0.3.0 | 舞踊 | BUYO | - トランジション・アニメーション関連のアップデート<br>- テキストスピードの調整タグの追加<br>- テキスト表示フォントサイズの変更<br>- Webフォントのサポート（フォント変更設定の追加）<br>- 動画再生のサポート<br>- 子要素でフィルター・アニメーション設定
+| 0.4.0 | 狭間 | HAZAMA | - Vue.jsやReact、SvelteなどのUIフレームワークとの連携追加のアップデート<br>
+| 0.5.0 | 操手 | AYATURI |  - ゲームパッドのサポート追加<br> - キーコンフィグの追加<br> - VOICEBOX APIの対応<br>- npm run recの追加
+| 0.6.0 | 絡繰 | KARAKURI | - wtsLinterの追加<br>- VSCodeとの連携追加<br>- wst2htmlの追加<br>- プラグイン機能の追加<br>- クロスプラットホームへのビルド追加
+| 0.7.0 | 綴り | TUDURI |  GUIエディタの追加<br>
+| 0.8.0 | 迅雷 | JINRAI |  パフォーマンスアップデート<br>
+| 0.9.0 | 出島 | DEJIMA |  KAGタグコンバータの追加<br>
+| 1.0.0 | 暁月 | AKATUKI |  メジャーアップデート
+
+## アルファ版(0.1.x-0.2.x)で、できること
+
+### テキスト表示
 
 - 地の文の表示
 - キャラクターのセリフの表示・ボイスの再生
+- 定義した変数の表示
+
+### キャラクター・画像操作
+
 - キャラクターの画像の表示・位置変更・アニメーション
 - その他の画像の画像の表示・位置変更・アニメーション
 - キャラクターの複数表示・位置変更・アニメーション
 - CGの表示・変更
 - 背景画像の表示・変更
+
+### 画像処理
+
 - 画像のフィルター操作
   - モノクロ化
   - セピア化
   - 透明度の変更
   - サイズの変更
-- REST API呼び出し（レスポンスの表示）
-- 定義した変数の表示
-- 表示する文章・画像の条件分岐
+
+### ユーザーインタラクション
+
 - 選択肢の表示
 - 選択肢の画像の変更
   - 通常時
   - マウスオーバー
   - 選択時
-- セリフのジャンプ
 - Ctrlキーでの強制スキップ
 - Enterキーで全文表示
+
+### シナリオ制御
+
+- 表示する文章・画像の条件分岐
+- セリフのジャンプ
 - シナリオ（シーン）の切り替え
+
+### 音声
+
 - BGMの再生・停止
 - SEの再生・停止
+
+### システム設定・UI
+
 - HTMLで作った画面の表示
 - 解像度の設定変更
+
+### プログラミング連携
+
 - JavaScript連携
   - メソッドの呼び出し
   - 式の実行
   - 変数の定義・値の変更
+- JavaScript側での背景画像の変更
+- TypeScript連携
+- REST API呼び出し（レスポンスの表示）
 
-## アルファ版(0.2.x-0.1.x)で出来ないこと
+## アルファ版（0.1.x-0.2.x）の制限事項
+
+### ビルド・プラットフォーム
 
 - Desktopアプリケーションへのビルド
 - Android(iOS)向けのビルド
+
+### ユーザーインターフェース (UI)
+
 - 画面各種のボタン
+- セーブファイルの一覧の取得
+
+### キャラクター操作
+
 - sayタグの以下の機能
   - キャラが表示されていないときは、表示する
+
+### セーブ＆ロード
+
 - セーブ＆ロード機能
+
+### 視覚効果
+
 - showタグ / hideタグの以下の機能
   - 子要素でフィルター指定
   - 子要素でアニメーション指定
   - スラッシュで区切ってリソース種類を指定
-- JavaScript側での背景画像の変更
+- quakeタグ（画面を揺らす）
+- maskタグ（画面の暗転）
+
+### 音声
+
 - soundタグの以下の機能
   - pause
   - setVolume
@@ -175,10 +273,13 @@ webTaleKitは、現在アルファ版です。
   - bgmエイリアス
   - voiceエイリアス
   - seエイリアス
-- quakeタグ（画面を揺らす）
-- maskタグ（画面の暗転）
+
+### リソース管理
+
 - JavaScriptでのリソースの動的定義
-- セーブファイルの一覧の取得
+
+### 設定・最適化
+
 - ゲーム設定ファイルの反映
 - 画面用HTMLのcss・jsのインライン化・minify化