diff --git a/AI_MAP.md b/AI_MAP.md index a51e7cc..36b8cf4 100644 --- a/AI_MAP.md +++ b/AI_MAP.md @@ -6,7 +6,7 @@ Purpose: static Japanese browser simulation/game. Optimize context by reading th - Entrypoint: `index.html` defines the app shell, canvas, dialogs, right panels, and exact script order. - Runtime style: plain browser JS, global IIFEs, exports on `window`, no bundler/module loader. -- Version/cache: `app_manifest.json`, `js/version.js`, and generated `service-worker.js` share `39.15.92`. +- Version/cache: `app_manifest.json`, `js/version.js`, and generated `service-worker.js` share `39.15.101`. - Main loop: `js/main.js` initializes assets/audio/world/UI/save, then drives update/render. - Update order: `js/system_order.js` calls phase facades from `js/simulation_systems.js`. - Command path: UI/input emits command objects; `js/command_dispatcher.js` routes tool, pointer, selection, save, reset, and UI intents. diff --git a/BUILD_NOTE.txt b/BUILD_NOTE.txt index 9122311..72ad9b0 100644 --- a/BUILD_NOTE.txt +++ b/BUILD_NOTE.txt @@ -1,7 +1,6 @@ -tarinai_king_fix_v9 -- Added fire item: spreads to tarinai, ants, and grass; burning causes continuous damage and panic movement. -- Added flame_firecracker: scatters fire when the fuse ends without blast damage/explosion. -- Burning tarinai behavior text and fire-sighting panic text are forced through observation data. -- Fire can be extinguished by water droplets or random extinguish checks; rain and <=10C increase extinguish chance. -- Fixed duplicator stored-water preview color by rendering droplet sprites instead of fallback orange food shape. -- Version bumped to 39.15.98. +tarinai_king_fix_v10 +- Fire tool button hidden; flames spawn only from flame firecracker. +- Burning tarinai and ants draw lightweight flame-shaped overlays. +- Flame firecracker is redder and shows a countdown timer; normal firecracker is darker. +- Standalone flame and fire particles use a simpler flame silhouette. +- Version: 39.15.101 diff --git a/FILES.json b/FILES.json index 8e8fab2..fd9ff73 100644 --- a/FILES.json +++ b/FILES.json @@ -1,6 +1,6 @@ { "purpose": "Token-efficient machine-readable routing for tarinai_. Use scripts/ai_inventory.py for exact current file expansion.", - "version": "39.15.92", + "version": "39.15.101", "entrypoints": { "app": "index.html", "runtime": "js/main.js", @@ -71,7 +71,9 @@ "js/main.js", "js/math.js", "js/perf_profiler.js", - "js/debug_tools.js" + "js/debug_tools.js", + "js/update_step_pipeline_runner.js", + "js/burn_motion_util.js" ], "meaning": "Bootstrap, shared constants/helpers, registries, config, profiling/debug." }, diff --git a/README.md b/README.md index a473d5e..5376277 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ AI-first entrypoint for a static browser simulation/game. Keep this file small; ## Runtime Shape -- No bundler; `index.html` loads ordered global-IIFE scripts with `?v=39.15.92`. +- No bundler; `index.html` loads ordered global-IIFE scripts with `?v=39.15.101`. - Mutable runtime lives on `window`; primary entities are `World`, `Tarinai`, items, structures, ants, family graph, weather, and save snapshots. - Update loop: `main.js` creates the world/UI loop; `World.update` delegates to `TarinaiSystemOrder.update`; `system_order.js` runs named phases. - UI loop: pointer/tool/UI intents go through `command_dispatcher.js`; canvas drawing is in render modules; side panels are `ui_*.js`. diff --git a/app_manifest.json b/app_manifest.json index 131aa90..120434a 100644 --- a/app_manifest.json +++ b/app_manifest.json @@ -1,5 +1,5 @@ { - "version": "39.15.98", + "version": "39.15.101", "css": [ "css/base.css", "css/layout.css", @@ -14,6 +14,7 @@ "js/disease_registry.js", "js/sound_pack.js", "js/deterministic_helpers.js", + "js/item_tool_metadata.js", "js/item_tool_definitions.js", "js/item_visual_definitions.js", "js/item_food_definitions.js", @@ -23,6 +24,7 @@ "js/ground_types.js", "js/input_mode_manager.js", "js/math.js", + "js/geometry_helpers.js", "js/collision_footprint_system.js", "js/physics_helpers.js", "js/placement_preview_system.js", @@ -44,6 +46,8 @@ "js/item_type_initializers.js", "js/item_lifecycle_support.js", "js/item_update_policy.js", + "js/fire_runtime_system.js", + "js/robot_cleaner_system.js", "js/item_dynamic_tool_system.js", "js/item_dynamic_ball_system.js", "js/item_dynamic_duplicator_system.js", @@ -56,10 +60,13 @@ "js/item_lifecycle_step_decay.js", "js/item_lifecycle_step_dynamic.js", "js/item_lifecycle_step_growth.js", + "js/update_step_pipeline_runner.js", "js/item_lifecycle_pipeline.js", "js/item_runtime.js", "js/structure_lifecycle.js", + "js/item_render_helpers.js", "js/item_render_runtime.js", + "js/burn_motion_util.js", "js/ants.js", "js/health.js", "js/tarinai.js", @@ -79,6 +86,7 @@ "js/tarinai_building_behavior.js", "js/tarinai_action_definitions.js", "js/tarinai_needs_items.js", + "js/tarinai_food_prototype_mixin.js", "js/tarinai_need_planner_system.js", "js/tarinai_item_interaction_context.js", "js/tarinai_food_interaction_system.js", @@ -99,12 +107,16 @@ "js/world.js", "js/world_view.js", "js/family_graph.js", + "js/world_reset_presets.js", "js/world_family_social.js", "js/impact_core_system.js", "js/impact_response_system.js", "js/collision_response_system.js", "js/world_combat_effects.js", "js/world_environment.js", + "js/world_temperature_system.js", + "js/world_pathfinding_system.js", + "js/world_grass_placement_system.js", "js/world_spatial_budget.js", "js/world_ants_system.js", "js/weather_system.js", diff --git a/css/base.css b/css/base.css index 176ffbc..58f4e9a 100644 --- a/css/base.css +++ b/css/base.css @@ -36,23 +36,6 @@ button { color: inherit; } -.loading-screen { - position: fixed; - inset: 0; - z-index: 9999; - display: grid; - place-items: center; - padding: 24px; - background: - radial-gradient(circle at 50% 30%, rgba(164, 225, 104, 0.22), transparent 32%), - linear-gradient(180deg, rgba(239, 248, 255, 0.98), rgba(247, 245, 236, 0.98)); - transition: opacity 180ms ease, visibility 180ms ease; -} -.loading-screen.hidden { - opacity: 0; - visibility: hidden; - pointer-events: none; -} .loading-panel { width: min(420px, 92vw); padding: 24px 22px; @@ -62,18 +45,6 @@ button { box-shadow: 0 18px 48px rgba(64, 48, 32, 0.16); text-align: center; } -.loading-title { - font-weight: 700; - font-size: 18px; - letter-spacing: 0.04em; - margin-bottom: 8px; -} -.loading-text { - color: var(--muted); - font-size: 13px; - line-height: 1.55; - min-height: 1.55em; -} #app { width: min(1480px, 100vw); @@ -120,7 +91,6 @@ h1 { white-space: nowrap; } - .top-actions { display: flex; gap: 6px; @@ -260,7 +230,6 @@ h1 { min-width: 132px; } - .ecology-dialog-panel { width: min(760px, 100%); max-height: calc(100vh - 36px); @@ -453,16 +422,15 @@ h1 { .tool[data-tool="oshibyo"] { --tool-icon: url("../assets/ui/tool_oshibyo.webp"); } /* Generated parameter item tool icons. */ -.tool[data-tool="laxative"] { --tool-icon: url("../assets/ui/tool_laxative.webp?v=39.15.92"); } -.tool[data-tool="protein"] { --tool-icon: url("../assets/ui/tool_protein.webp?v=39.15.92"); } -.tool[data-tool="niteropu"] { --tool-icon: url("../assets/ui/tool_niteropu.webp?v=39.15.92"); } -.tool[data-tool="ammo"] { --tool-icon: url("../assets/ui/tool_ammo.webp?v=39.15.92"); } -.tool[data-tool="mystery_drug"] { --tool-icon: url("../assets/ui/tool_mystery_drug.webp?v=39.15.92"); } -.tool[data-tool="mercury"] { --tool-icon: url("../assets/ui/tool_mercury.webp?v=39.15.92"); } -.tool[data-tool="giant_drug"] { --tool-icon: url("../assets/ui/tool_giant_drug.webp?v=39.15.92"); } -.tool[data-tool="dwarf_drug"] { --tool-icon: url("../assets/ui/tool_dwarf_drug.webp?v=39.15.92"); } -.tool[data-tool="zunda_juice"] { --tool-icon: url("../assets/ui/tool_zunda_juice.webp?v=39.15.92"); } - +.tool[data-tool="laxative"] { --tool-icon: url("../assets/ui/tool_laxative.webp"); } +.tool[data-tool="protein"] { --tool-icon: url("../assets/ui/tool_protein.webp"); } +.tool[data-tool="niteropu"] { --tool-icon: url("../assets/ui/tool_niteropu.webp"); } +.tool[data-tool="ammo"] { --tool-icon: url("../assets/ui/tool_ammo.webp"); } +.tool[data-tool="mystery_drug"] { --tool-icon: url("../assets/ui/tool_mystery_drug.webp"); } +.tool[data-tool="mercury"] { --tool-icon: url("../assets/ui/tool_mercury.webp"); } +.tool[data-tool="giant_drug"] { --tool-icon: url("../assets/ui/tool_giant_drug.webp"); } +.tool[data-tool="dwarf_drug"] { --tool-icon: url("../assets/ui/tool_dwarf_drug.webp"); } +.tool[data-tool="zunda_juice"] { --tool-icon: url("../assets/ui/tool_zunda_juice.webp"); } .signboard-editor { position: fixed; diff --git a/css/components.css b/css/components.css index df2d727..9d4c636 100644 --- a/css/components.css +++ b/css/components.css @@ -762,12 +762,10 @@ background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(231, 243, 255, 0.98)); border-bottom-color: rgba(82,128,190,0.30); } -.tool-category[data-tool-category="operate"] .tool-category-body { - background: rgba(238, 247, 255, 0.98); -} .tool-category[data-tool-category="operate"] .tool-category-body { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; + background: rgba(238, 247, 255, 0.98); } .tool-category[data-tool-category="operate"] .tool { grid-template-columns: 1fr; diff --git a/css/layout.css b/css/layout.css index ed5e7b7..07707eb 100644 --- a/css/layout.css +++ b/css/layout.css @@ -2,26 +2,15 @@ .tool[data-tool="sleep_drug"] { --tool-icon: url("../assets/ui/tool_sleep_drug.webp"); } .tool[data-tool="nest_box"] { --tool-icon: url("../assets/ui/tool_nest_box.webp"); } .tool[data-tool="ant_nest"] { --tool-icon: url("../assets/ui/tool_ant_nest.webp"); } -.tool[data-tool="ball"] { --tool-icon: url("../assets/ui/tool_ball.webp"); } +.tool[data-tool="ball"] { --tool-icon: url("../assets/ui/tool_ball.webp"); --tool-icon-zoom: 1.36; } .tool[data-tool="delete"] { --tool-icon: url("../assets/ui/tool_delete.webp"); } .tool[data-tool="area_delete"] { --tool-icon: url("../assets/ui/tool_delete.webp"); } .tool[data-tool="new"] { --tool-icon: url("../assets/ui/tool_new.webp"); } .tool[data-tool="shoot"] { --tool-icon: url("../assets/ui/tool_shoot.png"); --tool-icon-zoom: 1.48; } -.tool[data-tool="poke"] { --tool-emoji: "\1F448"; } -.tool[data-tool="pinch"] { --tool-emoji: "\1F90F"; } -.tool[data-tool="water_hose"] { --tool-emoji: "\1F6BF"; } -.tool[data-tool="clear_tool"] { --tool-emoji: "\2715"; } -.tool[data-tool="copy"] { --tool-emoji: "\29c9 "; } -.tool[data-tool="area_delete"] { --tool-emoji: "\d7 "; } -.tool[data-tool="rope"] { --tool-emoji: "\2570 "; } -.tool[data-tool="rod"] { --tool-emoji: "\2501 "; } -.tool[data-tool="reciprocator"] { --tool-emoji: "\21c4 "; } -.tool[data-tool="undo"] { --tool-emoji: "\21b6 "; } -.tool[data-tool="redo"] { --tool-emoji: "\21b7 "; } .tool.tool-emoji-icon { --tool-icon: none; } .tool.tool-emoji-icon::before { - content: var(--tool-emoji); + content: var(--tool-emoji, ""); background: none; display: grid; place-items: center; @@ -55,7 +44,6 @@ transform: translate(-50%, -50%) scale(var(--tool-icon-zoom, 1)) !important; } -.tool[data-tool="ball"] { --tool-icon-zoom: 1.36; } .tool[data-tool="observe"], .tool[data-tool="new"] { --tool-icon-zoom: 1.20; } .tool[data-tool="giant_drug"] { --tool-icon-zoom: 1.58; } @@ -78,16 +66,16 @@ .tool-body { margin-top: 10px; } .tool-palette { display: flex; flex-direction: column; gap: 8px; } .tool-category { - border: 1px solid rgba(84,68,48,0.10); + border: 1px solid var(--tool-cat-line, rgba(84,68,48,0.10)); border-radius: 14px; - background: rgba(255,255,255,0.34); + background: linear-gradient(180deg, var(--tool-cat-a, rgba(255,255,255,0.36)), rgba(255,255,255,0.28)); overflow: hidden; } .tool-category-toggle { width: 100%; border: 0; - border-bottom: 1px solid rgba(84,68,48,0.08); - background: rgba(255,252,244,0.66); + border-bottom: 1px solid var(--tool-cat-line, rgba(84,68,48,0.08)); + background: linear-gradient(180deg, var(--tool-cat-a, rgba(255,252,244,0.66)), var(--tool-cat-b, rgba(255,252,244,0.54))); padding: 7px 10px; text-align: left; cursor: pointer; @@ -114,8 +102,8 @@ .selected-category-toggle { width: 100%; border: 0; - border-bottom: 1px solid rgba(84,68,48,0.08); - background: rgba(255,252,244,0.66); + border-bottom: 1px solid var(--tool-cat-line, rgba(84,68,48,0.08)); + background: linear-gradient(180deg, var(--tool-cat-a, rgba(255,252,244,0.66)), var(--tool-cat-b, rgba(255,252,244,0.54))); padding: 8px 10px; text-align: left; cursor: pointer; @@ -340,8 +328,6 @@ meter { .tool-category[data-tool-category="habitat"] { --tool-cat-a: rgba(255,245,218,0.84); --tool-cat-b: rgba(250,229,186,0.76); --tool-cat-line: rgba(174,125,54,0.28); } .tool-category[data-tool-category="physics"] { --tool-cat-a: rgba(226,247,246,0.84); --tool-cat-b: rgba(199,232,231,0.76); --tool-cat-line: rgba(70,145,148,0.28); } .tool-category[data-tool-category="hazard"] { --tool-cat-a: rgba(255,230,224,0.84); --tool-cat-b: rgba(250,207,197,0.78); --tool-cat-line: rgba(189,88,66,0.30); } -.tool-category { border-color: var(--tool-cat-line, rgba(84,68,48,0.10)); background: linear-gradient(180deg, var(--tool-cat-a, rgba(255,255,255,0.36)), rgba(255,255,255,0.28)); } -.tool-category-toggle { background: linear-gradient(180deg, var(--tool-cat-a, rgba(255,252,244,0.66)), var(--tool-cat-b, rgba(255,252,244,0.54))); border-bottom-color: var(--tool-cat-line, rgba(84,68,48,0.08)); } @media (min-width: 921px) { .mobile-mode-controls { display: none !important; } } diff --git a/css/mobile.css b/css/mobile.css index 63a3603..9fa63f2 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -1,4 +1,4 @@ -/* v15.12.1: top-right sound settings panel */ +/* Sound menu */ .sound-menu { position: relative; display: inline-block; } .sound-menu-btn.active { background: linear-gradient(180deg, #f3ffe9, #e7f8db); border-color: rgba(103,178,44,.46); } .sound-panel { @@ -22,19 +22,8 @@ .sound-panel input:disabled + span { opacity: .55; } .sound-master { font-weight: 700; } .sound-panel-divider { height: 1px; background: rgba(84,68,48,.12); margin: 2px 0; } -@media (max-width: 980px) { .sound-panel { right: auto; left: 0; } } - -/* Collapsed card sizing is shared by the base panel rules; no event-only shrink override. */ - -/* v15.12.4: event log scroll chains to the right menu at top/bottom */ -.log { - overscroll-behavior-y: auto !important; -} - -/* v15.12.4: sound settings live only in the top-right sound menu */ - -/* v15.17.0: mobile layout isolation and canvas touch gestures */ +/* Shared layout and gesture guards */ #app { overflow-x: clip; } .layout { position: relative; z-index: 2; } .panel { position: relative; z-index: 3; } @@ -55,81 +44,21 @@ max-width: 100%; box-sizing: border-box; } -@media (max-width: 980px) { - .layout { - position: relative; - z-index: 4; - } - .panel { - position: relative; - z-index: 5; - isolation: isolate; - } - .lineage-main-card { - z-index: 1; - width: 100%; - max-width: 100%; - margin-top: 14px; - clear: both; - } - .lineage-main-content { - height: auto; - min-height: 340px; - max-height: 72vh; - overflow: auto; - overscroll-behavior: contain; - -webkit-overflow-scrolling: touch; - touch-action: pan-x pan-y pinch-zoom; - } - .lineage-family-tree { - overflow: auto; - overscroll-behavior: contain; - -webkit-overflow-scrolling: touch; - touch-action: pan-x pan-y pinch-zoom; - } - .lineage-family-tree .lineage-tree-panel { - max-width: none; - } +.log { + overscroll-behavior-y: auto !important; } - -/* Mobile input mode */ -.mobile-mode-controls { +body.touch-mobile-ui .tool-tip-popover { + max-width: min(520px, calc(100vw - 24px)); +} +body.touch-mobile-ui .tool-category:not([data-tool-category="operate"]).collapsed .tool-category-body { display: none; - position: absolute; - left: 10px; - bottom: 10px; - z-index: 24; - gap: 5px; - padding: 6px; - border-radius: 14px; - background: rgba(255, 251, 245, 0.90); - box-shadow: 0 8px 22px rgba(80,60,35,.18); - border: 1px solid rgba(120, 95, 60, .16); - backdrop-filter: blur(8px); } -.mobile-mode-controls button { - border: 0; - border-radius: 10px; - padding: 7px 8px; - font-size: 12px; - font-weight: 800; - color: #65533f; - background: rgba(255,255,255,.78); - box-shadow: inset 0 -1px 0 rgba(0,0,0,.05); -} -.mobile-mode-controls button.active { - color: #3d321f; - background: linear-gradient(180deg, #ffe9a8, #ffd376); - box-shadow: 0 3px 10px rgba(150, 105, 30, .20); -} -body.touch-mobile-ui .mobile-mode-controls:not([hidden]) { display: flex; } -body:not(.touch-mobile-ui) .mobile-mode-controls { display: none !important; } +/* Mobile input controls */ +.mobile-mode-controls, .mobile-rotate-controls { display: none; position: absolute; - right: 10px; - bottom: 58px; z-index: 24; gap: 6px; padding: 6px; @@ -139,6 +68,17 @@ body:not(.touch-mobile-ui) .mobile-mode-controls { display: none !important; } border: 1px solid rgba(120, 95, 60, .16); backdrop-filter: blur(8px); } +.mobile-mode-controls { + left: 10px; + bottom: 10px; + gap: 5px; + background: rgba(255, 251, 245, 0.90); +} +.mobile-rotate-controls { + right: 10px; + bottom: 58px; +} +.mobile-mode-controls button, .mobile-rotate-controls button { border: 0; border-radius: 10px; @@ -149,83 +89,22 @@ body:not(.touch-mobile-ui) .mobile-mode-controls { display: none !important; } background: rgba(255,255,255,.82); box-shadow: inset 0 -1px 0 rgba(0,0,0,.05); } -.mobile-rotate-controls button:active { transform: translateY(1px); } -body.touch-mobile-ui .mobile-rotate-controls:not([hidden]) { display: flex; } -body:not(.touch-mobile-ui) .mobile-rotate-controls { display: none !important; } -@media (max-width: 980px) { - body.touch-mobile-ui .mobile-rotate-controls:not([hidden]) { - position: fixed; - left: 50%; - right: auto; - bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); - transform: translateX(-50%); - z-index: 12002; - max-width: calc(100vw - 22px); - } +.mobile-mode-controls button { padding: 7px 8px; background: rgba(255,255,255,.78); } +.mobile-mode-controls button.active { + color: #3d321f; + background: linear-gradient(180deg, #ffe9a8, #ffd376); + box-shadow: 0 3px 10px rgba(150, 105, 30, .20); } - +.mobile-rotate-controls button:active { transform: translateY(1px); } +body.touch-mobile-ui .mobile-mode-controls:not([hidden]), +body.touch-mobile-ui .mobile-rotate-controls:not([hidden]) { display: flex; } +body:not(.touch-mobile-ui) .mobile-mode-controls, +body:not(.touch-mobile-ui) .mobile-rotate-controls { display: none !important; } body.touch-mobile-ui.mobile-mode-camera #gameCanvas { cursor: grab; } body.touch-mobile-ui.mobile-mode-tool #gameCanvas { cursor: crosshair; } -/* Keep panel themes on narrow layouts. */ -.card.tool-card { --ui-theme-rgb: 0, 114, 178; background: linear-gradient(180deg, rgba(242, 248, 252, 0.94), rgba(232, 243, 250, 0.91)); border-color: rgba(0, 114, 178, 0.24); } -.card.selected-card { --ui-theme-rgb: 204, 121, 167; background: linear-gradient(180deg, rgba(253, 245, 250, 0.94), rgba(249, 235, 244, 0.91)); border-color: rgba(204, 121, 167, 0.24); } -.card.colony-card { --ui-theme-rgb: 0, 158, 115; background: linear-gradient(180deg, rgba(240, 250, 247, 0.94), rgba(229, 245, 239, 0.91)); border-color: rgba(0, 158, 115, 0.24); } -.card.log-card { --ui-theme-rgb: 230, 159, 0; background: linear-gradient(180deg, rgba(255, 249, 236, 0.94), rgba(253, 242, 215, 0.91)); border-color: rgba(230, 159, 0, 0.24); } - - -/* v39.15.35: mobile controls and scroll affordances */ -@media (max-width: 980px) { - body.touch-mobile-ui .mobile-mode-controls:not([hidden]) { - display: flex !important; - } - .panel-quick-tabs { - grid-template-columns: repeat(5, minmax(0, 1fr)); - position: sticky; - top: 0; - } - .panel-quick-tabs button { - padding-left: 3px; - padding-right: 3px; - font-size: 10.5px; - } -} -body.touch-mobile-ui .tool-tip-popover { - max-width: min(520px, calc(100vw - 24px)); -} - -/* v39.15.36: mobile navigation redesign without family input mode */ -@media (max-width: 980px) { - body.touch-mobile-ui .mobile-mode-controls:not([hidden]) { - position: fixed; - left: 50%; - right: auto; - bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); - transform: translateX(-50%); - z-index: 12001; - max-width: calc(100vw - 22px); - } - .panel-quick-tabs { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - .lineage-main-card { - margin: 10px 0 0; - contain: content; - } - .lineage-main-card .lineage-head { - gap: 8px; - } - .lineage-main-card .lineage-actions { - flex-wrap: wrap; - } - body.touch-mobile-ui .tool-category:not([data-tool-category="operate"]).collapsed .tool-category-body { - display: none; - } - body.touch-mobile-ui .log { - max-height: 240px; - } -} +/* Back to canvas affordance */ .back-to-game-btn { position: fixed; right: calc(env(safe-area-inset-right, 0px) + 12px); @@ -242,180 +121,7 @@ body.touch-mobile-ui .tool-tip-popover { backdrop-filter: blur(8px); } .back-to-game-btn[hidden] { display: none !important; } -@media (min-width: 981px) { - .back-to-game-btn { display: none !important; } -} -/* v39.15.38: keep desktop layout close to v39.15.36; only hide the PC quick-scroll buttons that duplicate the canvas/tool card. */ -@media (min-width: 981px) { - .panel-quick-tabs { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - .panel-quick-tabs [data-panel-tab="game"] { - display: none !important; - } -} - -/* v39.15.38: mobile navigation/footer room and family-graph reachability. */ -@media (max-width: 980px) { - html, - body { - max-width: 100%; - overflow-x: hidden; - } - #app { - width: 100%; - max-width: 100%; - box-sizing: border-box; - padding-left: max(10px, env(safe-area-inset-left, 0px)); - padding-right: max(10px, env(safe-area-inset-right, 0px)); - padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); - overflow-x: clip; - } - .topbar, - .top-left, - .brand, - .layout, - .stage-wrap, - .panel, - .card, - .lineage-main-card { - min-width: 0; - max-width: 100%; - box-sizing: border-box; - } - .top-actions { - width: 100%; - max-width: 100%; - display: flex; - flex-wrap: nowrap; - justify-content: flex-start; - gap: 5px; - overflow-x: auto; - overflow-y: hidden; - padding: 1px 0 5px; - -webkit-overflow-scrolling: touch; - scrollbar-width: thin; - } - .top-actions > .btn, - .top-actions > .sound-menu, - .top-actions .sound-menu-btn { - flex: 0 0 auto; - white-space: nowrap; - } - .top-actions .btn { - padding: 7px 9px; - font-size: 11px; - } - .room-link { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - } - body.touch-mobile-ui .mobile-mode-controls:not([hidden]) { - position: absolute; - left: 50%; - right: auto; - bottom: 10px; - transform: translateX(-50%); - z-index: 24; - max-width: calc(100% - 18px); - } - body.touch-mobile-ui .panel-quick-tabs { - position: fixed; - left: max(8px, env(safe-area-inset-left, 0px)); - right: max(8px, env(safe-area-inset-right, 0px)); - bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); - top: auto; - z-index: 12002; - width: auto; - max-width: none; - grid-template-columns: repeat(6, minmax(0, 1fr)); - gap: 4px; - margin: 0; - padding: 6px; - border: 1px solid rgba(102, 169, 215, 0.34); - border-radius: 16px; - background: rgba(244, 250, 247, 0.95); - box-shadow: 0 12px 28px rgba(42, 54, 64, 0.18); - } - body.touch-mobile-ui .panel-quick-tabs button { - min-height: 34px; - padding: 5px 2px; - font-size: 10px; - } - body.touch-mobile-ui .selected-card, - body.touch-mobile-ui .tool-card, - body.touch-mobile-ui .colony-card, - body.touch-mobile-ui .log-card, - body.touch-mobile-ui .lineage-main-card { - scroll-margin-top: 10px; - scroll-margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); - } - body.touch-mobile-ui .lineage-main-card { - margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); - } - .back-to-game-btn { - bottom: calc(env(safe-area-inset-bottom, 0px) + 62px); - right: max(10px, env(safe-area-inset-right, 0px)); - } -} - - -/* Desktop rollback guard. Keep the normal PC layout; only remove duplicated quick-scroll buttons. */ -@media (min-width: 981px) { - .topbar { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: nowrap; - gap: 12px; - } - .top-left { - flex: 1 1 auto; - min-width: 0; - max-width: 100%; - } - .brand, - .brand h1, - h1 { - flex: 0 0 auto; - min-width: max-content; - max-width: none !important; - overflow: visible !important; - text-overflow: clip !important; - } - .top-actions { - flex: 0 0 auto; - margin-left: auto; - justify-content: flex-end; - align-items: center; - flex-wrap: nowrap; - gap: 6px; - white-space: nowrap; - } - .top-actions .btn, - .top-actions .sound-menu-btn, - .room-link { - min-height: 38px; - padding: 8px 10px; - font-size: 12px; - line-height: 1.12; - } - .room-link { - max-width: 180px; - overflow: hidden; - text-overflow: ellipsis; - } - .panel-quick-tabs { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - .panel-quick-tabs [data-panel-tab="game"] { - display: none !important; - } -} - -/* PC / smartphone UI isolation. All override UI placement is scoped by width. */ @media (min-width: 981px) { html, body { @@ -427,18 +133,8 @@ body.touch-mobile-ui .tool-tip-popover { padding: 18px; overflow: visible; } - .topbar { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: nowrap; - gap: 12px; - } - .top-left { - flex: 1 1 auto; - min-width: 0; - max-width: 100%; - } + .topbar { gap: 12px; } + .top-left { max-width: 100%; } .brand, .brand h1, h1 { @@ -448,15 +144,7 @@ body.touch-mobile-ui .tool-tip-popover { overflow: visible !important; text-overflow: clip !important; } - .top-actions { - flex: 0 0 auto; - margin-left: auto; - justify-content: flex-end; - align-items: center; - flex-wrap: nowrap; - gap: 6px; - white-space: nowrap; - } + .top-actions { margin-left: auto; } .top-actions .btn, .top-actions .sound-menu-btn, .room-link { @@ -488,18 +176,12 @@ body.touch-mobile-ui .tool-tip-popover { top: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); } - .panel-quick-tabs [data-panel-tab="game"] { - display: none !important; - } + .panel-quick-tabs [data-panel-tab="game"] { display: none !important; } .lineage-main-card { display: block; visibility: visible; - position: relative; - z-index: 1; width: auto; margin: 16px 0 0; - overflow: hidden; - contain: layout paint; } .lineage-main-content { height: min(78vh, 980px); @@ -508,6 +190,7 @@ body.touch-mobile-ui .tool-tip-popover { overflow: auto; overscroll-behavior: auto; } + .back-to-game-btn { display: none !important; } } @media (max-width: 980px) { @@ -540,16 +223,11 @@ body.touch-mobile-ui .tool-tip-popover { box-sizing: border-box; } .topbar { - display: flex; flex-direction: column; align-items: stretch; gap: 8px; } - .top-left { - display: flex; - align-items: center; - gap: 8px; - } + .top-left { gap: 8px; } .brand h1, h1 { max-width: 100%; @@ -559,8 +237,6 @@ body.touch-mobile-ui .tool-tip-popover { font-size: clamp(20px, 7vw, 30px); } .top-actions { - display: flex; - flex-wrap: nowrap; justify-content: flex-start; gap: 5px; width: 100%; @@ -581,13 +257,12 @@ body.touch-mobile-ui .tool-tip-popover { padding: 7px 9px; font-size: 11px; } + .sound-panel { right: auto; left: 0; } .layout { display: flex; flex-direction: column; align-items: stretch; gap: 10px; - position: relative; - z-index: 2; overflow: visible; } .stage-wrap { @@ -642,6 +317,15 @@ body.touch-mobile-ui .tool-tip-popover { z-index: 24; max-width: calc(100% - 18px); } + body.touch-mobile-ui .mobile-rotate-controls:not([hidden]) { + position: fixed; + left: 50%; + right: auto; + bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); + transform: translateX(-50%); + z-index: 12002; + max-width: calc(100vw - 22px); + } body.touch-mobile-ui.mobile-mode-auto #gameCanvas { touch-action: pan-y pinch-zoom !important; } @@ -653,13 +337,10 @@ body.touch-mobile-ui .tool-tip-popover { max-height: none !important; height: auto !important; overflow: visible !important; - overscroll-behavior-y: auto !important; } .lineage-main-card { display: block !important; visibility: visible !important; - position: relative; - z-index: 1; width: 100%; margin: 10px 0 calc(env(safe-area-inset-bottom, 0px) + 132px); overflow: visible !important; @@ -678,7 +359,6 @@ body.touch-mobile-ui .tool-tip-popover { touch-action: pan-y pinch-zoom; } .lineage-family-tree { - max-width: 100%; overflow-x: auto !important; overflow-y: visible !important; overscroll-behavior-x: contain; @@ -686,9 +366,7 @@ body.touch-mobile-ui .tool-tip-popover { -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; } - .lineage-family-tree .lineage-tree-panel { - max-width: none; - } + .lineage-family-tree .lineage-tree-panel { max-width: none; } .selected-card, .tool-card, .colony-card, @@ -698,4 +376,8 @@ body.touch-mobile-ui .tool-tip-popover { scroll-margin-top: 0 !important; scroll-margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); } + .back-to-game-btn { + bottom: calc(env(safe-area-inset-bottom, 0px) + 62px); + right: max(10px, env(safe-area-inset-right, 0px)); + } } diff --git a/css/panel.css b/css/panel.css index e14e3fd..c9818a8 100644 --- a/css/panel.css +++ b/css/panel.css @@ -99,6 +99,7 @@ body::before { box-shadow: 0 3px 8px rgba(64,48,32,0.045); overflow: hidden; isolation: isolate; + overflow: hidden !important; } .family-node.child { border-color: rgba(103, 178, 44, 0.38); @@ -182,40 +183,6 @@ body::before { text-overflow: ellipsis; white-space: nowrap; } -.family-personality-tags { - display: grid !important; - grid-template-columns: repeat(2, minmax(0, 1fr)); - grid-auto-rows: minmax(13px, auto); - align-items: stretch; - gap: 2px 4px; - margin-top: 2px; - max-width: 84px; - width: 84px; - max-height: 34px; - overflow: hidden !important; - text-overflow: clip !important; - white-space: normal !important; -} -.family-personality-tags em { - display: flex; - align-items: center; - justify-content: center; - min-width: 0; - max-width: 100%; - padding: 1px 3px; - border-radius: 999px; - background: rgba(103,178,44,0.11); - border: 1px solid rgba(103,178,44,0.20); - color: rgba(64,72,48,0.86); - font-size: 8.2px; - font-style: normal; - line-height: 1.18; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - - .tool[data-tip] { position: relative; } @@ -353,23 +320,6 @@ body::before { border-radius: 9px; background: rgba(255,255,255,0.70); } -.lineage-family-tree .tree-node .family-copy { - max-width: calc(100% - 46px); - width: auto; -} -.lineage-family-tree .tree-node .family-copy strong, -.lineage-family-tree .tree-node .family-copy > span:not(.family-genetic-stats):not(.family-fight-stat):not(.family-personality-tags) { - max-width: 100%; -} -.lineage-family-tree .tree-node .family-personality-tags { - max-width: 84px; - width: 84px; -} -.lineage-family-tree .tree-node .family-personality-tags em { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} @media (max-width: 720px) { .lineage-main-content { height: 70vh; @@ -421,21 +371,22 @@ body::before { } -/* v9: keep 2x2 personality tags inside fixed family-tree nodes. */ -.lineage-family-tree .tree-node .family-personality-tags, +/* Family tree personality tags: consolidated final cascade. */ .family-personality-tags { box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 13px !important; gap: 2px 3px !important; - width: 86px !important; - max-width: 86px !important; + width: 100% !important; + max-width: 100% !important; height: 28px !important; max-height: 28px !important; + margin-left: 0 !important; + margin-right: 0 !important; + justify-self: stretch !important; overflow: hidden !important; } -.lineage-family-tree .tree-node .family-personality-tags em, .family-personality-tags em { box-sizing: border-box !important; display: block !important; @@ -449,54 +400,23 @@ body::before { white-space: nowrap !important; line-height: 11px !important; font-size: 7.2px !important; + font-style: normal; letter-spacing: -0.08em !important; text-align: center !important; -} - -/* v39.15.85: push family-tree personality tags to the node's right edge. */ -.lineage-family-tree .tree-node .family-personality-tags, -.family-personality-tags { - margin-left: auto !important; - margin-right: 0 !important; - justify-self: end !important; + border-radius: 999px; + background: rgba(103,178,44,0.11); + border: 1px solid rgba(103,178,44,0.20); + color: rgba(64,72,48,0.86); } .lineage-family-tree .tree-node .family-copy { width: 100% !important; max-width: 100% !important; -} -.lineage-family-tree .tree-node .family-copy strong, -.lineage-family-tree .tree-node .family-copy > span:not(.family-personality-tags) { - max-width: calc(100% - 46px) !important; -} -.lineage-family-tree .tree-node .family-copy > .family-personality-tags { - max-width: 86px !important; - width: 86px !important; -} - -/* v39.15.87: let family personality tags use the full node width. */ -.lineage-family-tree .tree-node .family-copy > .family-personality-tags, -.lineage-family-tree .tree-node .family-personality-tags, -.family-personality-tags { - width: 100% !important; - max-width: 100% !important; - margin-left: 0 !important; - margin-right: 0 !important; - justify-self: stretch !important; - grid-template-columns: repeat(2, minmax(0, 1fr)) !important; -} -.lineage-family-tree .tree-node .family-copy strong, -.lineage-family-tree .tree-node .family-copy > span:not(.family-personality-tags) { - max-width: 100% !important; -} - - -/* v39.15.92: keep personality tags inside the family-tree node bottom edge. */ -.lineage-family-tree .tree-node { - overflow: hidden !important; -} -.lineage-family-tree .tree-node .family-copy { position: static !important; } +.lineage-family-tree .tree-node .family-copy strong, +.lineage-family-tree .tree-node .family-copy > span:not(.family-personality-tags) { + max-width: 100% !important; +} .lineage-family-tree .tree-node .family-copy > .family-personality-tags { position: absolute !important; left: 7px !important; diff --git a/index.html b/index.html index 3665853..f829e79 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,11 @@ - - - - - + + + + +
サイズとプリセットを組み合わせて観察環境を生成します。