201 lines
12 KiB
HTML
201 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="ja">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>たりない観察</title>
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header class="topbar">
|
|
<div class="top-left">
|
|
<a class="btn room-link" href="https://host.nishi.boats/~333/">333の部屋に移動</a>
|
|
<div class="brand">
|
|
<h1>たりない観察</h1>
|
|
<p class="subtitle">操作: 左クリックで選択・配置 / つまむでドラッグ / 右ドラッグでパン / ホイールで拡大縮小</p>
|
|
</div>
|
|
</div>
|
|
<div class="top-actions">
|
|
<button id="pauseBtn" class="btn primary">一時停止</button>
|
|
<button id="speedBtn" class="btn">速度 x1</button>
|
|
<button id="ecologyBtn" class="btn">たりないの生態</button>
|
|
<button id="soundBtn" class="btn">音 OFF</button>
|
|
<button id="creditsBtn" class="btn">クレジット</button>
|
|
<button id="resetBtn" class="btn danger">リセット</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<section class="stage-wrap">
|
|
<canvas id="gameCanvas" aria-label="たりない観察キャンバス"></canvas>
|
|
<div id="toast" class="toast hidden"></div>
|
|
</section>
|
|
|
|
<aside class="panel">
|
|
<section id="toolCard" class="card tool-card">
|
|
<div class="tool-head"><h2>道具</h2></div>
|
|
<div class="tool-body">
|
|
<div id="toolPalette" class="tool-palette">
|
|
<section class="tool-category" data-tool-category="observe">
|
|
<button class="tool-category-toggle" type="button" aria-expanded="true">観察</button>
|
|
<div class="tool-grid tool-category-body">
|
|
<button class="tool selected" data-tool="observe"><span>O</span>観察</button>
|
|
<button class="tool" data-tool="delete"><span>D</span>削除</button>
|
|
<button class="tool" data-tool="poke"><span>P</span>つつく</button>
|
|
<button class="tool" data-tool="pinch"><span>T</span>つまむ</button>
|
|
<button class="tool" data-tool="new"><span>N</span>追加</button>
|
|
</div>
|
|
</section>
|
|
<section class="tool-category" data-tool-category="food">
|
|
<button class="tool-category-toggle" type="button" aria-expanded="true">食べ物・自然</button>
|
|
<div class="tool-grid tool-category-body">
|
|
<button class="tool" data-tool="zunchi"><span>Z</span>ずんち</button>
|
|
<button class="tool" data-tool="sweet"><span>S</span>ずんだ餅</button>
|
|
<button class="tool" data-tool="love_mochi"><span>M</span>媚薬餅</button>
|
|
<button class="tool" data-tool="fight_mochi"><span>K</span>喧嘩餅</button>
|
|
<button class="tool" data-tool="water"><span>W</span>水</button>
|
|
<button class="tool" data-tool="grass"><span>G</span>草</button>
|
|
</div>
|
|
</section>
|
|
<section class="tool-category" data-tool-category="object">
|
|
<button class="tool-category-toggle" type="button" aria-expanded="true">オブジェクト</button>
|
|
<div class="tool-grid tool-category-body">
|
|
<button class="tool" data-tool="stone"><span>R</span>石</button>
|
|
<button class="tool" data-tool="bed"><span>B</span>干草寝床</button>
|
|
<button class="tool" data-tool="ball"><span>L</span>ボール</button>
|
|
<button class="tool" data-tool="firecracker"><span>F</span>爆竹</button>
|
|
<button class="tool" data-tool="fence_v"><span>V</span>縦の柵</button>
|
|
<button class="tool" data-tool="fence_h"><span>H</span>横の柵</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<p class="hint">同じ道具ボタンをもう一度押すと、対応道具の大きさが小・中・大で切り替わります。</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card colony-card">
|
|
<h2>コロニー</h2>
|
|
<div class="stats colony-stats">
|
|
<div class="stat"><span>個体数</span><strong id="statPop">0</strong></div>
|
|
<div class="stat"><span>累計死亡数</span><strong id="statDead">0</strong></div>
|
|
</div>
|
|
<div id="colonyChartTabs" class="chart-tabs"><button data-chart="population" class="active">人口</button><button data-chart="life">生活</button><button data-chart="events">イベント</button><button data-chart="objects">オブジェクト</button></div>
|
|
<div id="colonyChartLegend" class="colony-chart-legend"></div>
|
|
<div id="colonyChart" class="colony-chart" aria-label="コロニーの推移グラフ" role="img"></div>
|
|
</section>
|
|
|
|
<section class="card selected-card">
|
|
<h2>選択中</h2>
|
|
<div id="selectedInfo" class="selected-info empty">未選択</div>
|
|
</section>
|
|
|
|
<section class="card log-card">
|
|
<h2>イベント</h2>
|
|
<div id="log" class="log"></div>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
|
|
<section class="card lineage-main-card">
|
|
<div class="lineage-head">
|
|
<h2>家系図</h2>
|
|
<button id="archiveResetBtn" class="btn danger" type="button">家系図をリセット</button>
|
|
</div>
|
|
<div id="archiveContent" class="archive-content lineage-main-content"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="fieldDialog" class="field-dialog hidden" role="dialog" aria-modal="true" aria-labelledby="fieldDialogTitle">
|
|
<div class="field-dialog-panel">
|
|
<h2 id="fieldDialogTitle">フィールドを選択</h2>
|
|
<div class="field-choice-grid">
|
|
<button class="field-choice" data-field-type="park" type="button"><strong>公園</strong><span>大</span></button>
|
|
<button class="field-choice" data-field-type="garden" type="button"><strong>庭</strong><span>中</span></button>
|
|
<button class="field-choice" data-field-type="cage" type="button"><strong>ケージ</strong><span>小</span></button>
|
|
</div>
|
|
<div class="field-dialog-actions">
|
|
<button id="fieldCancelBtn" class="btn" type="button">キャンセル</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="creditsDialog" class="field-dialog hidden" role="dialog" aria-modal="true" aria-labelledby="creditsDialogTitle">
|
|
<div class="field-dialog-panel credits-dialog-panel">
|
|
<h2 id="creditsDialogTitle">クレジット</h2>
|
|
<div class="credits-content">
|
|
<p><strong>製作:</strong> 333</p>
|
|
<p><strong>たりない:</strong> むらさき氏</p>
|
|
<p><strong>効果音:</strong> VOICEVOX: ずんだもん 効果音ラボ: <a href="https://soundeffect-lab.info/" target="_blank" rel="noopener">https://soundeffect-lab.info/</a></p>
|
|
</div>
|
|
<div class="field-dialog-actions credits-actions">
|
|
<button id="creditsCloseBtn" class="btn" type="button">閉じる</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="archiveResetDialog" class="field-dialog hidden" role="dialog" aria-modal="true" aria-labelledby="archiveResetDialogTitle">
|
|
<div class="field-dialog-panel archive-reset-dialog-panel">
|
|
<h2 id="archiveResetDialogTitle">家系図をリセットしますか？</h2>
|
|
<p class="hint">現在の親子関係と世代情報を消去します。個体そのものや庭の状態は消えません。</p>
|
|
<div class="field-dialog-actions archive-reset-actions">
|
|
<button id="archiveResetCancelBtn" class="btn" type="button">キャンセル</button>
|
|
<button id="archiveResetConfirmBtn" class="btn danger" type="button">リセットする</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ecologyDialog" class="field-dialog hidden" role="dialog" aria-modal="true" aria-labelledby="ecologyDialogTitle">
|
|
<div class="field-dialog-panel ecology-dialog-panel">
|
|
<h2 id="ecologyDialogTitle">たりないの生態</h2>
|
|
<div class="ecology-grid">
|
|
<section class="ecology-card">
|
|
<img src="assets/sprites/tarinai_05_drool.png" alt="">
|
|
<div><strong>食べる</strong><p>お腹がすくと食べ物や草を探します。食べられない時間が長いと弱っていきます。</p></div>
|
|
</section>
|
|
<section class="ecology-card">
|
|
<img src="assets/sprites/tarinai_07_sleep.png" alt="">
|
|
<div><strong>眠る</strong><p>疲れるとその場や寝床で眠ります。休めると元気を取り戻します。</p></div>
|
|
</section>
|
|
<section class="ecology-card">
|
|
<img src="assets/sprites/tarinai_21_normal_happy.png" alt="">
|
|
<div><strong>なつく</strong><p>気分がよい個体はカーソルや仲間に寄ってきます。やさしく構うと落ち着きやすくなります。</p></div>
|
|
</section>
|
|
<section class="ecology-card">
|
|
<img src="assets/sprites/tarinai_24_stress_dizzy.png" alt="">
|
|
<div><strong>関係が変わる</strong><p>近くで過ごすうちに仲良しや苦手が生まれます。強いストレスは行動や表情に出ます。</p></div>
|
|
</section>
|
|
<section class="ecology-card">
|
|
<img src="assets/sprites/tarinai_27_birth_ritual.png" alt="">
|
|
<div><strong>増える</strong><p>落ち着いた相手どうしから新しい個体が生まれ、家系図に親子関係が残ります。</p></div>
|
|
</section>
|
|
<section class="ecology-card">
|
|
<img src="assets/sprites/tarinai_18_fear.png" alt="">
|
|
<div><strong>環境の影響</strong><p>雨や食べ物不足、つつき、喧嘩などで暮らしぶりが変わります。庭の配置も大切です。</p></div>
|
|
</section>
|
|
</div>
|
|
<div class="field-dialog-actions">
|
|
<button id="ecologyCloseBtn" class="btn" type="button">閉じる</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/data.js"></script>
|
|
<script src="js/math.js"></script>
|
|
<script src="js/assets.js"></script>
|
|
<script src="js/audio.js"></script>
|
|
<script src="js/render.js"></script>
|
|
<script src="js/sim_core.js"></script>
|
|
<script src="js/items.js"></script>
|
|
<script src="js/tarinai.js"></script>
|
|
<script src="js/world.js"></script>
|
|
<script src="js/sim.js"></script>
|
|
<script src="js/ui.js"></script>
|
|
<script src="js/ui_charts.js"></script>
|
|
<script src="js/ui_family.js"></script>
|
|
<script src="js/ui_exports.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|