169 lines
15 KiB
HTML
169 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||
<title>曲線フィールド</title>
|
||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||
<link rel="alternate icon" href="favicon.ico">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body class="loading" data-ready="false" data-loading-text="読み込み中">
|
||
<div id="app">
|
||
<div id="topbar">
|
||
<div class="brand">曲線フィールド <small></small></div>
|
||
<div class="stat sr-data">クリア <b id="solvedCount">0</b></div>
|
||
<div class="stat score" aria-label="所持数"><span aria-hidden="true">◆</span> <b id="scoreCount">0</b></div>
|
||
<div class="stat sr-data">盤面 <b id="worldCount">1</b></div>
|
||
<div class="stat fps-stat" aria-label="描画フレームレート"><b id="fpsCounter" data-fps="idle">FPS 待機</b></div>
|
||
<div class="stat compact-selected"><b id="selectedInfo" aria-live="polite">レベル1</b></div>
|
||
<div class="spacer"></div>
|
||
<div class="toolbar" aria-label="ゲーム操作">
|
||
<button class="pill inventory-button" id="inventoryBtn" aria-label="アイテムを開く" aria-haspopup="dialog" aria-expanded="false"><span aria-hidden="true">▣</span><span>アイテム <b id="inventoryCount">0</b></span></button>
|
||
<button class="pill time-attack" id="timeAttackBtn" aria-label="タイムアタックを開く" aria-haspopup="dialog" aria-expanded="false"><span aria-hidden="true">◷</span><span id="timeAttackButtonLabel">タイムアタック</span></button>
|
||
<button class="pill settings" id="settingsBtn" type="button" aria-label="設定を開く" aria-haspopup="dialog" aria-expanded="false">⚙</button>
|
||
<button class="pill help" id="helpBtn" aria-label="遊び方を開く" aria-haspopup="dialog" aria-expanded="false">?</button>
|
||
<button class="pill player-name" id="playerNameBtn" type="button" title="プレイヤー名を変更">旅人</button>
|
||
<button class="pill cloud-status" id="cloudBtn" type="button" title="同期">端末のみ</button>
|
||
</div>
|
||
<button id="saveStatus" type="button" aria-live="polite" aria-label="保存状態" title="保存状態を確認">保存済み</button>
|
||
</div>
|
||
<div id="viewport" tabindex="-1" aria-label="曲線フィールド"><canvas id="noiseCanvas" width="80" height="64" aria-hidden="true"></canvas><canvas id="reactionCanvas" aria-hidden="true"></canvas><canvas id="overviewCanvas" aria-hidden="true" hidden></canvas><div id="world"></div><canvas id="presenceCanvas" aria-hidden="true"></canvas><div id="boardHudLayer" aria-live="polite"></div></div>
|
||
<aside id="minimap" aria-label="マップ">
|
||
<div id="clearFeed" class="clear-feed" aria-live="polite" aria-label="共有クリア速報"></div>
|
||
<div class="minimap-head"><b>マップ</b></div>
|
||
<div class="minimap-controls" aria-label="視点移動">
|
||
<button id="minimapOriginBtn" type="button">原点</button>
|
||
<button id="minimapRandomBtn" type="button">ランダム</button>
|
||
</div>
|
||
<canvas id="minimapCanvas" width="210" height="132" role="application" tabindex="0" aria-label="マップ。クリックまたはドラッグで視点を移動。店舗マーカーをクリックするとショップを開きます。"></canvas>
|
||
<div class="minimap-legend" aria-hidden="true"><span class="solved">クリア</span><span class="unsolved">未クリア</span><span class="long-line">長距離線</span><span class="shop">ショップ</span></div>
|
||
</aside>
|
||
<div id="reactionRadial" role="menu" aria-label="リアクションを選択" hidden></div>
|
||
<div id="toast" role="status" aria-live="polite"></div>
|
||
<div id="specialTooltip" role="tooltip" hidden></div>
|
||
<section id="statusPanel" hidden aria-live="assertive">
|
||
<p id="statusMessage"></p>
|
||
<div class="status-actions">
|
||
<button class="pill" id="retryBtn" type="button">再試行</button>
|
||
<button class="pill" id="exportBtn" type="button">書き出し</button>
|
||
<button class="pill" id="importBtn" type="button">読み込み</button>
|
||
<input id="importFile" type="file" accept="application/x-bend-field-save,.bfsave,application/json,.json" hidden>
|
||
<button class="pill danger" id="freshBtn" type="button">最初から</button>
|
||
<button class="pill" id="dismissStatusBtn" type="button">閉じる</button>
|
||
</div>
|
||
</section>
|
||
<div id="modal" aria-hidden="true" inert>
|
||
<div class="panel" role="dialog" aria-modal="true" aria-labelledby="helpTitle" aria-describedby="helpDescription" tabindex="-1">
|
||
<h2 id="helpTitle">曲線フィールド</h2>
|
||
<div id="helpDescription">
|
||
<div class="tutorial-grid">
|
||
<article class="tutorial-card">
|
||
<div class="tutorial-demo" data-tutorial="draw" aria-hidden="true"></div>
|
||
<h3>ゲートをつなぐ</h3><p>同じ色のゲートを線でつなぐ。<strong>長くつながって太くなった線ほど高得点です。</strong></p>
|
||
</article>
|
||
<article class="tutorial-card">
|
||
<div class="tutorial-demo" data-tutorial="bend" aria-hidden="true"></div>
|
||
<h3>数字に合わせる</h3><p>数字のマスで、数字と同じ回数だけ線を曲げる。</p>
|
||
</article>
|
||
<article class="tutorial-card">
|
||
<div class="tutorial-demo" data-tutorial="fill" aria-hidden="true"></div>
|
||
<h3>盤面を埋める</h3><p>線を重ねず、すべてのマスを埋める。</p>
|
||
</article>
|
||
<article class="tutorial-card">
|
||
<div class="tutorial-demo" data-tutorial="shop" aria-hidden="true"></div>
|
||
<h3>アイテムを使う</h3><p>購入したカーソルや機能を切り替える。</p>
|
||
</article>
|
||
</div>
|
||
<div class="control-chips"><span>左ドラッグ：線を引く</span><span>右ドラッグ：画面移動</span><span>ホイール：拡大・縮小</span></div>
|
||
</div>
|
||
<div class="modal-actions entry-mode-actions" aria-label="モードを選択">
|
||
<button class="pill primary-mode" id="normalPlayBtn" type="button"><b>通常プレイ</b></button>
|
||
<button class="pill time-mode" id="helpTimeAttackBtn" type="button"><b>タイムアタック</b></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<aside id="timeAttackSuggestion" role="status" aria-live="polite" hidden>
|
||
<div><b>10枚クリア！</b><span>タイムアタックにも挑戦できます。</span></div>
|
||
<button class="pill time-mode" id="acceptTimeAttackSuggestion" type="button">開く</button>
|
||
<button class="pill quiet" id="dismissTimeAttackSuggestion" type="button" aria-label="提案を閉じる">×</button>
|
||
</aside>
|
||
<div id="storeModal" aria-hidden="true" inert>
|
||
<div class="panel store-panel" role="dialog" aria-modal="true" aria-labelledby="storeTitle" tabindex="-1">
|
||
<div class="store-heading"><div><small>ショップ</small><h2 id="storeTitle">アイテムショップ</h2></div><div class="store-wallet" aria-label="所持数"><span aria-hidden="true">◆</span><b id="storeWallet">0</b></div></div>
|
||
<p id="storeMeta"></p>
|
||
<div id="storeInventory" class="store-inventory"></div>
|
||
<div class="modal-actions"><button class="pill close" id="closeStore">閉じる</button></div>
|
||
</div>
|
||
</div>
|
||
<div id="inventoryModal" aria-hidden="true" inert>
|
||
<div class="panel inventory-panel" role="dialog" aria-modal="true" aria-labelledby="inventoryTitle" tabindex="-1">
|
||
<div class="inventory-heading"><div><small>アイテム</small><h2 id="inventoryTitle">所持アイテム</h2></div><strong id="inventoryTotal">0</strong></div>
|
||
<label class="debug-items-toggle"><input id="debugAllItemsToggle" type="checkbox"><span><b>DEBUG</b><small id="debugAllItemsState">OFF · 通常所持数を使用</small></span></label>
|
||
<p id="inventoryTarget">カーソルはデザインをクリックして切り替えます。</p>
|
||
<div id="inventoryList" class="inventory-list"></div>
|
||
<div class="modal-actions"><button class="pill close" id="closeInventory" type="button">閉じる</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="settingsModal" aria-hidden="true" inert>
|
||
<div class="panel settings-panel" role="dialog" aria-modal="true" aria-labelledby="settingsTitle" tabindex="-1">
|
||
<div class="settings-heading"><div><small>SETTINGS</small><h2 id="settingsTitle">設定</h2></div></div>
|
||
<label class="settings-field"><span>プレイヤー名</span><input id="settingsPlayerName" type="text" maxlength="24" autocomplete="nickname" spellcheck="false"></label>
|
||
<label class="settings-toggle"><input id="lightweightRenderingToggle" type="checkbox"><span><b>軽量描画</b><small>背景ノイズ、光、粒子など一部の視覚効果を抑えます。</small></span></label>
|
||
<label class="settings-toggle"><input id="soundEnabledToggle" type="checkbox"><span><b>効果音</b><small>操作音とクリア音を再生します。</small></span></label>
|
||
<div class="modal-actions settings-actions"><button class="pill quiet" id="resetSettings" type="button">初期化</button><button class="pill close" id="closeSettings" type="button">閉じる</button></div>
|
||
</div>
|
||
</div>
|
||
<div id="timeAttackModal" aria-hidden="true" inert>
|
||
<div class="panel time-attack-panel" role="dialog" aria-modal="true" aria-labelledby="timeAttackTitle" tabindex="-1">
|
||
<div class="time-attack-heading"><div><small>TIME ATTACK</small><h2 id="timeAttackTitle">タイムアタック</h2></div><strong id="timeAttackHeadingScore">タイム加算</strong></div>
|
||
<section id="timeAttackSetup">
|
||
<p class="time-attack-intro">制限時間内に盤面を解き、獲得ジェムを伸ばします。集めた量に応じて報酬倍率が上がります。</p>
|
||
<p class="time-attack-kicker">コースを選択</p>
|
||
<div class="time-attack-durations">
|
||
<button type="button" data-time-minutes="3"><span class="duration-value"><b>3</b><small>分</small></span><strong>QUICK</strong><em class="duration-status">短時間で集中</em></button>
|
||
<button type="button" data-time-minutes="5"><span class="duration-value"><b>5</b><small>分</small></span><strong>STANDARD</strong><em class="duration-status">標準コース</em></button>
|
||
<button type="button" data-time-minutes="10"><span class="duration-value"><b>10</b><small>分</small></span><strong>LONG</strong><em class="duration-status">じっくり挑戦</em></button>
|
||
</div>
|
||
<div class="time-attack-rules">
|
||
<div><b>獲得ジェムで倍率UP</b><span>時間内の合計獲得量に応じて、自動的に最も高い倍率が適用されます。</span></div>
|
||
<div class="time-attack-ladder" aria-label="報酬倍率">
|
||
<span><small>獲得</small><b>0+</b><strong>×1.25</strong></span><span><small>獲得</small><b>100+</b><strong>×1.50</strong></span><span><small>獲得</small><b>250+</b><strong>×2.00</strong></span><span><small>獲得</small><b>500+</b><strong>×2.50</strong></span><span><small>獲得</small><b>1000+</b><strong>×3.00</strong></span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="timeAttackLive" hidden>
|
||
<p class="time-attack-kicker">挑戦中</p>
|
||
<div class="time-attack-clock" id="timeAttackClock">03:00</div>
|
||
<div class="time-attack-stats"><span>獲得ジェム <b id="timeAttackCollected">0</b></span><span>現在倍率 <b id="timeAttackMultiplier">×1.25</b></span><span>現在合計 <b id="timeAttackProjected">0</b></span></div>
|
||
</section>
|
||
<section id="timeAttackResult" hidden>
|
||
<p class="time-attack-kicker">RESULT</p>
|
||
<div class="time-attack-result-grid"><span>制限時間 <b id="timeAttackResultLimit">3分</b></span><span>クリア数 <b id="timeAttackResultSolves">0</b></span><span>獲得ジェム <b id="timeAttackResultCollected">0</b></span><span>実効倍率 <b id="timeAttackResultMultiplier">×1.25</b></span><span>タイム加算 <b id="timeAttackResultBonus">+0</b></span><span>合計 <b id="timeAttackResultTotal">0</b></span></div>
|
||
<pre id="timeAttackShareText" aria-label="タイムアタックの結果"></pre>
|
||
</section>
|
||
<div class="modal-actions time-attack-actions"><button class="pill" id="copyTimeAttack" type="button" hidden>📋 結果をコピー</button><button class="pill close" id="closeTimeAttack" type="button">閉じる</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="customEmojiCursor" aria-hidden="true"></div>
|
||
<div id="pickupHandleOverlay" aria-hidden="true"></div>
|
||
<script src="build-meta.js"></script>
|
||
<script src="shared-contracts.js"></script>
|
||
<script src="runtime-config.js"></script>
|
||
<script src="store-catalog.generated.js"></script>
|
||
<script src="puzzle-patterns.js"></script>
|
||
<script src="puzzle-core.js"></script>
|
||
<script src="app-logic.js"></script>
|
||
<script src="archive-codec.js"></script>
|
||
<script src="client/input/frame-scheduler.js"></script>
|
||
<script src="client/input/drag.js"></script>
|
||
<script src="client/input/interaction-state.js"></script>
|
||
<script src="client/input/gesture-coordinator.js"></script>
|
||
<script src="client/ui/cursor.js"></script>
|
||
<script src="field-persistence.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|