diff --git a/app_manifest.json b/app_manifest.json index 630684a..3a4de5f 100644 --- a/app_manifest.json +++ b/app_manifest.json @@ -1,5 +1,5 @@ { - "version": "16.07.20", + "version": "16.07.32", "css": [ "css/base.css", "css/layout.css", @@ -24,6 +24,7 @@ "js/perf_profiler.js", "js/render.js", "js/sim_core.js", + "js/tarinai_seed_factory.js", "js/structures.js", "js/items.js", "js/item_type_initializers.js", diff --git a/css/base.css b/css/base.css index 585dc1c..39f4e77 100644 --- a/css/base.css +++ b/css/base.css @@ -351,34 +351,36 @@ h1 { } .tool { - --tool-main-icon-size: 30px; + --tool-main-icon-size: 38px; + --tool-icon-zoom: 1.12; --tool-watermark-size: 0px; border-radius: 12px; display: grid; - grid-template-rows: 27px minmax(1.05em, auto); - align-items: start; - justify-items: center; - gap: 0; - padding: 3px 5px 4px; - min-height: 36px; + grid-template-columns: 42px minmax(0,1fr); + align-items: center; + justify-items: stretch; + gap: 4px; + padding: 4px 7px 4px 3px; + min-height: 48px; font-size: 12px; line-height: 1.08; letter-spacing: -0.015em; - text-align: center; + text-align: left; position: relative; overflow: hidden; background-repeat: no-repeat; - background-position: center 4px, center; + background-position: left 3px center, center; background-size: var(--tool-main-icon-size) var(--tool-main-icon-size), cover; } .tool::before { content: ""; position: absolute; - left: 50%; - top: 3px; + left: 4px; + top: 50%; width: var(--tool-main-icon-size); height: var(--tool-main-icon-size); - transform: translateX(-50%); + transform: translateY(-50%) scale(var(--tool-icon-zoom, 1)); + transform-origin: center; background: var(--tool-icon) center / contain no-repeat; opacity: 0.98; z-index: 1; @@ -397,8 +399,9 @@ h1 { position: relative; z-index: 2; display: block; - grid-row: 2; - align-self: start; + grid-column: 2; + align-self: center; + justify-self: start; max-width: 100%; min-width: 0; overflow-wrap: anywhere; @@ -408,22 +411,26 @@ h1 { text-shadow: 0 1px 0 rgba(255,255,255,0.62); } -.tool.tool-has-canvas-icon { --tool-icon: none; grid-template-rows: 34px minmax(1.05em, auto); min-height: 44px; padding-top: 1px; } +.tool.tool-has-canvas-icon { --tool-icon: none; grid-template-columns: 42px minmax(0,1fr); min-height: 48px; padding-top: 4px; } .tool.tool-has-canvas-icon::before, .tool.tool-has-canvas-icon::after { background: none !important; } .tool-sprite-preview { position: absolute; - left: 50%; - top: -5px; - width: 48px; - height: 48px; - transform: translateX(-50%); + left: 2px; + top: 50%; + width: 42px; + height: 42px; + transform: translateY(-50%); pointer-events: none; z-index: 1; filter: drop-shadow(0 2px 3px rgba(52,40,26,0.12)); } .tool-sprite-watermark { display: none !important; } +.tool[data-tool="giant_drug"] .tool-sprite-preview { width: 56px; height: 56px; left: -5px; } +.tool[data-tool="dwarf_drug"] .tool-sprite-preview, +.tool[data-tool="oshibyo"] .tool-sprite-preview { width: 28px; height: 28px; left: 9px; } +.tool[data-tool="poke"], .tool[data-tool="water_hose"] { --tool-icon-zoom: 0.92; } .tool[data-tool="observe"] { --tool-icon: url("../assets/ui/tool_observe.webp"); } .tool[data-tool="zunchi"] { --tool-icon: url("../assets/ui/tool_zunchi.webp"); } .tool[data-tool="sweet"] { --tool-icon: url("../assets/ui/tool_sweet.webp"); } diff --git a/css/layout.css b/css/layout.css index 18a35c9..dc36aa9 100644 --- a/css/layout.css +++ b/css/layout.css @@ -16,11 +16,21 @@ display: grid; place-items: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; - font-size: 29px; + font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(52,40,26,0.12)); } .tool.tool-emoji-icon::after { content: none; display: none; } + +.tool[data-tool="poke"].tool-emoji-icon::before, +.tool[data-tool="water_hose"].tool-emoji-icon::before { font-size: 25px; } +.tool[data-tool="delete"] { --tool-icon-zoom: 1.42; } +.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; } +.tool[data-tool="dwarf_drug"], +.tool[data-tool="oshibyo"] { --tool-icon-zoom: 0.62; } .tool.selected { background: linear-gradient(180deg, #ffffff, #efffde); border-color: rgba(103, 178, 44, 0.52); diff --git a/index.html b/index.html index f789e69..9edda5e 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,11 @@ - - - - - + + + + +
同じ道具ボタンをもう一度押すと、対応道具の大きさが小・中・大で切り替わります。