# HARD WORK MONSTER — 仕様書・カスタマイズガイド --- ## 1. 全体構成 ``` hard-work-monster-ext/ ├── manifest.json … Chrome拡張の設定ファイル ├── background.js … 常駐プロセス（タイマー・ポイント計算・データ保存） ├── content.js … 全ページに注入（ユーザー操作の検知） ├── popup.html … アイコンクリック時のUI（レイアウト・CSS） ├── popup.js … ポップアップの表示ロジック ├── slime-renderer.js … モンスターのドット絵描画 ├── icon48.png … 拡張アイコン（小） └── icon128.png … 拡張アイコン（大） ``` ### 各ファイルの役割 | ファイル | 何をしているか | いつ動くか | |---|---|---| | `manifest.json` | 拡張の名前・権限・ファイル構成を定義 | インストール時に読まれる | | `background.js` | 1秒ごとの作業時間カウント、ステージ計算、ポイント付与、AFK判定、データ保存 | ブラウザ起動中ずっと | | `content.js` | キー入力・クリック・スクロール等を検知してbackgroundに送信 | 各ページを開くたびに注入 | | `popup.html` | ポップアップUIのHTML/CSS | アイコンクリック時 | | `popup.js` | backgroundからデータを取得してUIを更新 | ポップアップが開いている間 | | `slime-renderer.js` | Canvas上にモンスターを描画 | popup.jsから呼ばれる | --- ## 2. データの流れ ``` [ユーザーがブラウザ操作] ↓ content.js（各ページ） ・キー入力、クリック等を検知 ・2秒ごとにバッチ送信 ↓ chrome.runtime.sendMessage() ↓ background.js ・操作回数を加算 ・バケット閾値に達したらPT付与 ・1秒ごとに作業時間を加算 ・ステージ進化判定 ・AFK判定 ↓ chrome.storage.local（ローカル保存） ↓ popup.js（1秒ごとにデータ取得） ↓ popup.html + slime-renderer.js（UI表示） ``` --- ## 3. カスタマイズ箇所一覧 ### 3-1. ポイント獲得条件を変えたい **ファイル: `background.js`** #### バケット閾値（何回操作でPT付与するか） ```javascript // background.js 上部にある定数 const BUCKET_TH = { key: 50, click: 20, scroll: 30, move: 200 }; ``` | 変数名 | 現在値 | 意味 | 例：緩くする | |---|---|---|---| | `key` | 50 | キー入力50回で+1PT | → `30` に変更 | | `click` | 20 | クリック20回で+1PT | → `10` に変更 | | `scroll` | 30 | スクロール30回で+1PT | → `15` に変更 | | `move` | 200 | マウス移動200回で+1PT | → `100` に変更 | #### Enterキーの倍率 ```javascript // processActivity関数内 if (data.enters) { s.enters += data.enters; s.bKey += data.enters * 2; } // ^^^ // ここが倍率（現在2倍） ``` #### タブ切替・コピペのポイント ```javascript // processActivity関数内 if (data.tabs) { s.tabs += data.tabs; s.pt += 2 * data.tabs; ... } // ^^^ // タブ切替1回あたりのPT（現在2） if (data.copies) { s.copies += data.copies; s.pt += 2 * data.copies; ... } // ^^^ // コピペ1回あたりのPT（現在2） ``` #### 時間ボーナス ```javascript // background.js の setInterval内 // 30分ごとの累計作業ボーナス if (s.workSec % 1800 === 0) { s.pt += 5; s.exp += 5; } // ^^^^ ^^^ // 1800秒=30分 付与PT（現在5） // 30分連続集中ボーナス（離席でリセット） const f30 = Math.floor(s.focusStr / 1800); if (f30 > s.bonus30) { s.bonus30 = f30; s.pt += 8; s.exp += 8; } // ^^^ // 付与PT（現在8） // 60分連続集中ボーナス（離席でリセット） const f60 = Math.floor(s.focusStr / 3600); if (f60 > s.bonus60) { s.bonus60 = f60; s.pt += 20; s.exp += 20; } // ^^^^ // 付与PT（現在20） ``` #### 早起きボーナス ```javascript // processActivity関数内 if (!s.earlyBird && new Date().getHours() < 9) { // ^^^ // 9時前（0〜8時台）に開始で発動 s.earlyBird = true; s.pt += 15; s.exp += 15; // ^^^^ // 付与PT（現在15） } ``` #### デイリークリアボーナス ```javascript if (!s.dailyDone && s.workSec >= DAILY_GOAL) { s.dailyDone = true; s.pt += 30; s.exp += 30; // ^^^^ // 付与PT（現在30） } ``` --- ### 3-2. 作業時間・AFK判定を変えたい **ファイル: `background.js`** ```javascript // ファイル冒頭の定数 const AFK_THRESHOLD = 3600; // 離席判定までの秒数（現在: 3600秒 = 1時間） const DAILY_GOAL = 14 * 3600; // デイリークリアに必要な作業時間（現在: 14時間） ``` | 変更したいこと | 変更箇所 | 例 | |---|---|---| | 30分で離席判定にする | `AFK_THRESHOLD = 1800` | — | | デイリー目標を8時間にする | `DAILY_GOAL = 8 * 3600` | — | | デイリー目標を10時間にする | `DAILY_GOAL = 10 * 3600` | — | > **注意**: `DAILY_GOAL`を変えた場合、ステージの進化速度も調整が必要です（3-3参照） --- ### 3-3. ステージ進化の速度を変えたい **ファイル: `background.js`** ```javascript const TOTAL_STAGES = 28; const STAGE_RATES = [1500, 1680, 1920, 2100]; // Phase 1 (Stage 1-7): 各1500秒 = 25分 // Phase 2 (Stage 8-14): 各1680秒 = 28分 // Phase 3 (Stage 15-21):各1920秒 = 32分 // Phase 4 (Stage 22-28):各2100秒 = 35分 // 合計: 7*(1500+1680+1920+2100) = 50400秒 = 14時間 ``` **計算式:** ``` 合計時間 = 7 × (STAGE_RATES[0] + STAGE_RATES[1] + STAGE_RATES[2] + STAGE_RATES[3]) ``` #### 例：デイリー目標を8時間に変更する場合 ``` 8時間 = 28800秒 28800 ÷ 28段階 ≒ 1028秒/段階 4フェーズで傾斜をつける: Phase 1: 850秒(≒14分) × 7 = 5950 Phase 2: 960秒(≒16分) × 7 = 6720 Phase 3: 1100秒(≒18分) × 7 = 7700 Phase 4: 1230秒(≒20.5分) × 7 = 8610 合計: 29,980秒 ≒ 8.3時間 ``` ```javascript // 8時間版 const DAILY_GOAL = 8 * 3600; const STAGE_RATES = [850, 960, 1100, 1230]; ``` > **重要**: `STAGE_RATES`の合計×7が`DAILY_GOAL`とおおよそ一致するようにしてください。 同じ値は `slime-renderer.js` では使われていません（描画のみ）。 `popup.js`にも同じ定数があるので、**両方変更**が必要です： ```javascript // popup.js 冒頭 const TOTAL_STAGES = 28; const DAILY_GOAL = 14 * 3600; const STAGE_RATES = [1500, 1680, 1920, 2100]; ``` --- ### 3-4. モンスターの名前を変えたい **ファイル: `slime-renderer.js`** ```javascript const STAGE_NAMES = [ 'タマゴ', // Stage 1 'ゆれるタマゴ', // Stage 2 'ひび割れ', // Stage 3 '大きなひび', // Stage 4 '殻が開く', // Stage 5 '誕生', // Stage 6 'ベビーモンスター', // Stage 7 'ちいさなモンスター', // Stage 8 '目が開いた', // Stage 9 'にっこり', // Stage 10 '丸モンスター', // Stage 11 'ぷくぷく', // Stage 12 '中モンスター', // Stage 13 'もちもち', // Stage 14 '手が生えた', // Stage 15 '手をふる', // Stage 16 'ジャンプ!', // Stage 17 '大きめモンスター', // Stage 18 '足が生えた', // Stage 19 'とことこ', // Stage 20 '立派なモンスター', // Stage 21 'ツノが生えた', // Stage 22 'たてがみ', // Stage 23 'ワークモンスター', // Stage 24 '光るワークモンスター',// Stage 25 '王冠ワークモンスター',// Stage 26 'ハードワークモンスター',// Stage 27 '伝説のハードワークモンスター' // Stage 28（最終形態） ]; ``` 配列の順番がステージ番号に対応しています。名前を変えるだけなら該当行を書き換えればOKです。 28個の要素数は変えないでください。 --- ### 3-5. モンスターの見た目を変えたい **ファイル: `slime-renderer.js`** `drawMonster(canvas, stage, isWorking, pt)` 関数がすべての描画を行います。 #### 色を変えたい場合 ```javascript // slime-renderer.js 内 drawMonster関数 const bc='#44dd88', bd='#22aa66', bl='#66ffaa', bk='#115533'; // bc = ボディカラー（メイン） // bd = ボディカラー（暗い部分・影） // bl = ボディカラー（明るい部分・ハイライト） // bk = アウトライン ``` #### 特定ステージの描画を変えたい場合 描画はステージ番号で分岐しています： ```javascript if (stage <= 4) { // タマゴ（Stage 1〜5）の描画 } if (stage === 5) { // 孵化（Stage 6）の描画 } // stage >= 6 以降がスライム本体の描画 // 以下のif文で追加パーツを制御: if (stage >= 8) { /* 目 */ } if (stage >= 9) { /* 口 */ } if (stage >= 14) { /* 手 */ } if (stage >= 18) { /* 足 */ } if (stage >= 21) { /* ツノ */ } if (stage >= 22) { /* たてがみ/トゲ */ } if (stage >= 25) { /* 王冠 */ } if (stage >= 24) { /* 光のオーラ */ } if (stage >= 26) { /* キラキラエフェクト */ } ``` #### ピクセル描画の基本 ```javascript const s = 4; // 1ドットが4pxで描画される（192px ÷ 48グリッド） px(x, y, color) // (x,y)に1ドット描画 rect(x, y, w, h, color) // 矩形描画 // 座標系: 左上(0,0)〜右下(47,47) // cx=24, cy=30 がモンスターの中心 ``` --- ### 3-6. レベルアップの速度を変えたい **ファイル: `background.js`** ```javascript // checkLevelUp関数内 function checkLevelUp(s) { while (s.exp >= s.expN) { s.exp -= s.expN; s.lv++; s.expN = Math.floor(s.lv * 15 + 50); // ^^^^ ^^^^ // 係数と基礎値 } } ``` | Lv | 必要EXP（現在） | 変更例：緩くする | |---|---|---| | 1→2 | 65 | `s.lv * 10 + 30` → 40 | | 5→6 | 125 | → 80 | | 10→11 | 200 | → 130 | 同じ式が `popup.js` にはありません（background側で計算済み）。 --- ### 3-7. ポップアップのデザインを変えたい **ファイル: `popup.html`** #### ポップアップの幅 ```css /* popup.html の