184 lines
11 KiB
HTML
184 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="ja">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
<title>たりない観察</title>
|
|
<link rel="stylesheet" href="css/styles.css?v=15.5.0" />
|
|
</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>
|
|
</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="selectedCard" class="card selected-card hidden">
|
|
<div class="selected-head">
|
|
<h2>選択中</h2>
|
|
<button id="selectedCloseBtn" class="selected-close" type="button" aria-label="観察をやめる">×</button>
|
|
</div>
|
|
<div id="selectedInfo" class="selected-info empty">未選択</div>
|
|
</section>
|
|
|
|
<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>👈</span>つつく</button>
|
|
<button class="tool" data-tool="pinch"><span>🤏</span>つまむ</button>
|
|
<button class="tool" data-tool="new"><span>N</span>追加</button>
|
|
<button class="tool" data-tool="water_hose"><span>🚿</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>H</span>へこ餅</button>
|
|
<button class="tool" data-tool="fight_mochi"><span>K</span>けんか餅</button>
|
|
<button class="tool" data-tool="water_bowl"><span>U</span>水の皿</button>
|
|
<button class="tool" data-tool="sleep_drug"><span>M</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="nest_box"><span>X</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="environment">環境</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 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 id="ecologyGrid" class="ecology-grid"></div>
|
|
<div class="field-dialog-actions">
|
|
<button id="ecologyCloseBtn" class="btn" type="button">閉じる</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/data.js?v=15.5.0"></script>
|
|
<script src="js/math.js?v=15.5.0"></script>
|
|
<script src="js/assets.js?v=15.5.0"></script>
|
|
<script src="js/audio.js?v=15.5.0"></script>
|
|
<script src="js/render.js?v=15.5.0"></script>
|
|
<script src="js/sim_core.js?v=15.5.0"></script>
|
|
<script src="js/items.js?v=15.5.0"></script>
|
|
<script src="js/health.js?v=15.5.0"></script>
|
|
<script src="js/tarinai.js?v=15.5.0"></script>
|
|
<script src="js/world.js?v=15.5.0"></script>
|
|
<script src="js/text_catalog.js?v=15.5.0"></script>
|
|
<script src="js/ui.js?v=15.5.0"></script>
|
|
<script src="js/ui_charts.js?v=15.5.0"></script>
|
|
<script src="js/ui_family.js?v=15.5.0"></script>
|
|
<script src="js/main.js?v=15.5.0"></script>
|
|
</body>
|
|
</html>
|