diff --git a/README.md b/README.md index c9a0aa1..c124f6c 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,13 @@ - การบันทึกแก้เฉพาะจำนวนไอเทมใน `freesr-data.json` ไม่เขียนทับตัวละคร, LC, Relic หรือ Battle Config - รองรับเฉพาะ GaC-hkrpg-go ผ่าน `/api/inventory/materials`; บันทึกลงไฟล์ทันทีและต้องเข้าเกมใหม่เพื่อโหลด session พร้อมจำนวนที่แก้แล้ว +### 👾 6.1 Monster Setting +- แยก Memory of Chaos, Pure Fiction, Apocalyptic Shadow และ Anomaly Arbitration เพื่อดูชื่อด่าน/มอนสเตอร์ รูป, level และ wave จาก metadata Nanoka ที่ตรงกับ `client_version` ของเซิร์ฟเวอร์และ resource `challenge_data.json` / `resources/StageConfig.json` (อ่านอย่างเดียว); เมื่อ Client เปลี่ยนเวอร์ชัน API จะดึง metadata ของเวอร์ชันนั้นให้อัตโนมัติ โดยไม่ใช้ข้อมูลจากเวอร์ชันอื่น +- เปลี่ยนการเลือกกลุ่ม/ด่านเป็นการ์ด และ Custom Enemy ค้นมอนด้วยชื่อหรือ ID พร้อมรูป/ชื่อจาก Nanoka; พิมพ์ ID เองได้ และแสดงรูปตัวอย่างขนาดใหญ่ขึ้น +- Anomaly Arbitration เป็นโหมด Endgame ที่อ่าน stage จาก resource เช่นเดียวกับโหมดอื่น ไม่ใช่ Custom Enemy; Aha's Help มีแท็บแยกจาก AA +- แก้ Custom Enemy ได้เฉพาะ Golden / Crimson Calyx และต้องเชื่อมต่อ GaC-Srtool; การกดใช้ stage จาก Client จะล้าง custom waves เพื่อให้กลับไปใช้ resource +- Weekly Boss, Stagnant Shadow, Cavern of Corrosion, Endgame และ Simulated Universe ไม่รับ custom waves จากหน้านี้ + ### 💾 7. จัดการไฟล์เซฟ GaC (Persistent & FreeSR Data) - **ตั้งค่าตัวเอก (ผู้บุกเบิก):** สลับเพศ (Caelus / Stelle) และเปลี่ยนธาตุ (กายภาพ, ไฟ, จินตภาพ, ความจำ) - **สลับพาธ March 7th:** เลือกระหว่างพาธการอนุรักษ์ (น้ำแข็ง) และพาธล่าสังหาร (จินตภาพ) diff --git a/css/styles.css b/css/styles.css index ccdbb64..4e0acca 100644 --- a/css/styles.css +++ b/css/styles.css @@ -233,6 +233,11 @@ body { margin: 0 auto; } +/* Give the stage browser the full available width when it is active. */ +.main-container:has(#tab-monster-settings.active) { + max-width: none; +} + .tab-content { display: none; animation: fadeIn 0.25s ease-out; @@ -845,6 +850,202 @@ body { border-color: rgba(99, 120, 160, 0.45); } +/* Aha's Help level picker */ +.aha-help-card { + position: relative; + display: flex; + flex-direction: column; + gap: 1.1rem; + margin: 0.25rem 0 1rem; + padding: clamp(1rem, 2.2vw, 1.5rem); + border: 1px solid rgba(245, 180, 75, 0.28); + border-radius: 18px; + background: + radial-gradient(ellipse at 100% 0, rgba(245, 158, 11, 0.09), transparent 42%), + linear-gradient(145deg, rgba(25, 29, 42, 0.96), rgba(15, 19, 30, 0.96)); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); +} + +.aha-help-heading { + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.aha-help-emblem { + display: grid; + place-items: center; + flex: 0 0 48px; + width: 48px; + height: 48px; + border: 1px solid rgba(251, 191, 36, 0.4); + border-radius: 15px; + background: linear-gradient(145deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.06)); + color: #fcd34d; + font-size: 1.65rem; + text-shadow: 0 0 16px rgba(251, 191, 36, 0.55); +} + +.aha-help-heading-copy { + min-width: 0; +} + +.aha-help-eyebrow { + margin: 0 0 0.3rem; + color: #fbbf24; + font-size: 0.68rem; + font-weight: 800; + letter-spacing: 0.12em; +} + +.aha-help-heading h3 { + margin: 0; + color: var(--text-highlight); + font-size: clamp(1.1rem, 2vw, 1.35rem); + line-height: 1.25; +} + +.aha-help-heading p { + max-width: 760px; + margin: 0.4rem 0 0; + color: var(--text-muted); + font-size: 0.9rem; + line-height: 1.55; +} + +.aha-help-options { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); + gap: 0.75rem; +} + +.aha-help-option { + position: relative; + display: flex; + min-width: 0; + min-height: 112px; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 0.45rem; + padding: 1rem 2.4rem 1rem 1rem; + border: 1px solid rgba(110, 123, 148, 0.28); + border-radius: 13px; + background: rgba(9, 13, 22, 0.62); + color: var(--text-main); + text-align: left; + cursor: pointer; + transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease; +} + +.aha-help-option:hover { + transform: translateY(-2px); + border-color: rgba(251, 191, 36, 0.55); + background: rgba(32, 34, 42, 0.92); +} + +.aha-help-option:focus-visible { + outline: 3px solid rgba(56, 189, 248, 0.8); + outline-offset: 2px; +} + +.aha-help-option.is-selected { + border-color: rgba(251, 191, 36, 0.88); + background: linear-gradient(145deg, rgba(120, 82, 22, 0.34), rgba(37, 31, 27, 0.82)); + box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18), 0 8px 24px rgba(0, 0, 0, 0.17); +} + +.aha-help-option[data-kind="off"].is-selected { + border-color: rgba(148, 163, 184, 0.7); + background: linear-gradient(145deg, rgba(71, 85, 105, 0.3), rgba(24, 29, 40, 0.88)); + box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.15); +} + +.aha-help-option-title { + color: var(--text-highlight); + font-size: 1.05rem; + font-weight: 800; + line-height: 1.25; +} + +.aha-help-option-detail { + color: var(--text-muted); + font-size: 0.82rem; + line-height: 1.45; +} + +.aha-help-option-check { + position: absolute; + top: 0.8rem; + right: 0.85rem; + display: grid; + width: 25px; + height: 25px; + place-items: center; + border: 1px solid rgba(148, 163, 184, 0.28); + border-radius: 50%; + color: transparent; + font-size: 0.8rem; + font-weight: 900; +} + +.aha-help-option.is-selected .aha-help-option-check { + border-color: #fbbf24; + background: #fbbf24; + color: #171717; +} + +.aha-help-actions { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding-top: 0.15rem; +} + +.aha-help-save-state { + display: inline-flex; + min-width: 0; + align-items: center; + gap: 0.6rem; + color: var(--text-muted); + font-size: 0.86rem; + line-height: 1.45; +} + +.aha-help-state-dot { + flex: 0 0 9px; + width: 9px; + height: 9px; + border-radius: 50%; + background: #94a3b8; + box-shadow: 0 0 9px currentColor; +} + +.aha-help-save-state[data-state="saved"] .aha-help-state-dot { background: #34d399; } +.aha-help-save-state[data-state="unsaved"] .aha-help-state-dot { background: #fbbf24; } +.aha-help-save-state[data-state="error"] .aha-help-state-dot { background: #fb7185; } +.aha-help-save-state[data-state="unavailable"] .aha-help-state-dot { background: #94a3b8; } + +.aha-help-save-button { + display: inline-flex; + min-height: 46px; + align-items: center; + justify-content: center; + gap: 0.55rem; + padding: 0.7rem 1.15rem; + white-space: nowrap; +} + +.aha-help-native-select { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; +} + .switch { position: relative; display: inline-block; @@ -903,6 +1104,11 @@ input:checked + .slider:before { letter-spacing: 0.05em; } +#btn-save-aha-help:disabled { + opacity: 0.45; + cursor: not-allowed; +} + .form-input, .form-select { width: 100%; padding: 0.65rem 0.85rem; @@ -3390,4 +3596,154 @@ input:checked + .slider:before { .build-guide-stat-grid { grid-template-columns: minmax(0, 1fr); } + + .aha-help-actions { + align-items: stretch; + flex-direction: column; + } + + .aha-help-save-button { + width: 100%; + } +} + +@media (max-width: 390px) { + .aha-help-options { + grid-template-columns: minmax(0, 1fr); + } + + .aha-help-heading { + gap: 0.7rem; + } + + .aha-help-emblem { + flex-basis: 40px; + width: 40px; + height: 40px; + } +} + +/* Anomaly Arbitration monster wave editor */ +.monster-settings-intro { margin-bottom: 1rem; } +.monster-settings-rule { display: flex; gap: .65rem; align-items: flex-start; margin-top: .8rem; padding: .8rem 1rem; border: 1px solid rgba(251, 191, 36, .28); border-radius: 10px; background: rgba(245, 158, 11, .08); color: var(--text-main); line-height: 1.55; } +.monster-settings-tabs { display: flex; gap: .5rem; margin: 1rem 0; padding: .45rem; overflow-x: auto; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-secondary); } +.monster-settings-tab { flex: 1 0 auto; min-height: 44px; padding: .65rem .9rem; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-muted); font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; } +.monster-settings-tab:hover { color: var(--text-main); background: rgba(148, 163, 184, .08); } +.monster-settings-tab.active { color: var(--text-highlight); border-color: rgba(56, 189, 248, .36); background: rgba(14, 165, 233, .13); } +.monster-settings-tab-aha.active { color: #fcd34d; border-color: rgba(251, 191, 36, .45); background: rgba(245, 158, 11, .12); } +.monster-settings-status { margin: .75rem 0; padding: .8rem 1rem; border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-muted); background: var(--bg-card); line-height: 1.5; } +.monster-settings-status[data-state="saved"] { color: #6ee7b7; } +.monster-settings-status[data-state="error"] { color: #fda4af; } +.monster-settings-status[data-state="loading"] { color: #7dd3fc; } +.monster-settings-view { display: grid; gap: 1rem; } +.monster-settings-picker-section { display: grid; gap: .65rem; } +.monster-settings-picker-title { margin: 0; color: var(--text-muted); font-size: .88rem; font-weight: 800; letter-spacing: .02em; } +.monster-settings-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: .75rem; } +.monster-settings-group-card { display: flex; min-width: 0; min-height: 78px; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .85rem; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); color: var(--text-main); text-align: left; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; } +.monster-settings-group-card:hover, .monster-settings-stage-card:hover { transform: translateY(-1px); border-color: rgba(56, 189, 248, .45); background: rgba(25, 35, 51, .95); } +.monster-settings-group-card.active { border-color: rgba(56, 189, 248, .72); background: linear-gradient(125deg, rgba(14, 165, 233, .16), rgba(15, 23, 42, .9)); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .1); } +.monster-settings-group-copy, .monster-settings-stage-copy { display: grid; gap: .3rem; min-width: 0; } +.monster-settings-group-name { color: var(--text-main); font-size: .91rem; line-height: 1.3; overflow-wrap: anywhere; } +.monster-settings-group-meta, .monster-settings-stage-meta { color: var(--text-muted); font-size: .75rem; line-height: 1.3; } +.monster-settings-monster.group-feature { flex: 0 0 56px; width: 56px; padding: 0; border: 0; background: transparent; } +.monster-settings-monster.group-feature .monster-settings-monster-portrait { width: 56px; height: 56px; flex-basis: 56px; } +.monster-settings-monster.group-feature .monster-settings-monster-copy { display: none; } +.monster-settings-stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: .75rem; } +.monster-settings-stage-card { display: flex; min-width: 0; min-height: 144px; align-items: center; gap: .9rem; padding: .85rem; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card); color: var(--text-main); text-align: left; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; } +.monster-settings-stage-card.active { border-color: rgba(56, 189, 248, .76); background: linear-gradient(125deg, rgba(14, 165, 233, .16), rgba(15, 23, 42, .94)); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .12); } +.monster-settings-stage-card.is-boss { border-color: rgba(251, 191, 36, .3); } +.monster-settings-stage-card.is-boss.active { border-color: rgba(251, 191, 36, .78); background: linear-gradient(125deg, rgba(245, 158, 11, .16), rgba(15, 23, 42, .94)); } +.monster-settings-stage-card:focus-visible, .monster-settings-group-card:focus-visible { outline: 2px solid rgba(56, 189, 248, .75); outline-offset: 2px; } +.monster-settings-monster.stage-feature { flex: 0 0 92px; width: 92px; flex-direction: column; align-items: center; padding: 0; border: 0; background: transparent; } +.monster-settings-monster.stage-feature .monster-settings-monster-portrait { width: 88px; height: 88px; flex-basis: 88px; border-radius: 12px; } +.monster-settings-monster.stage-feature .monster-settings-monster-copy { display: none; } +.monster-settings-stage-copy { flex: 1; } +.monster-settings-stage-copy strong { color: var(--text-main); font-size: .92rem; line-height: 1.28; overflow-wrap: anywhere; } +.monster-settings-stage-card.is-boss .monster-settings-stage-meta:first-of-type { color: #fcd34d; } +.monster-settings-view[hidden] { display: none; } +.monster-aa-room-control { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1rem 1.1rem; border: 1px solid rgba(56, 189, 248, .28); border-radius: 14px; background: linear-gradient(120deg, rgba(14, 165, 233, .1), rgba(15, 23, 42, .72)); } +.monster-aa-room-header { display: grid; gap: .6rem; min-width: 0; } +.monster-aa-room-copy h3 { margin: 0; color: var(--text-highlight); font-size: 1rem; } +.monster-aa-room-copy p { margin: .35rem 0 0; color: var(--text-muted); line-height: 1.5; } +.monster-aa-room-status { color: var(--text-muted); font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; } +.monster-aa-room-status.is-pending { color: #86efac; } +.monster-aa-room-status.is-error { color: #fda4af; } +.monster-aa-room-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .6rem; } +.monster-aa-room-actions .btn { min-height: 42px; white-space: nowrap; } +.monster-aa-room-actions .btn:disabled { opacity: .55; cursor: not-allowed; } +.monster-settings-stage-heading { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; } +.monster-settings-stage-heading h3 { margin: 0; color: var(--text-highlight); font-size: 1.1rem; } +.monster-settings-badge { padding: .25rem .55rem; border: 1px solid rgba(192, 132, 252, .3); border-radius: 999px; color: #d8b4fe; background: rgba(168, 85, 247, .1); font-size: .75rem; font-weight: 700; } +.monster-settings-battle { display: grid; gap: .7rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); } +.monster-settings-battle h4 { margin: 0; color: var(--text-main); } +.monster-settings-encounter-heading { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } +.monster-settings-id-badge { color: var(--text-muted); font-size: .76rem; } +.monster-settings-meta { display: flex; gap: .55rem; flex-wrap: wrap; color: var(--text-muted); font-size: .8rem; } +.monster-settings-wave { display: flex; align-items: flex-start; gap: .8rem; padding: .7rem; border: 1px solid rgba(148, 163, 184, .13); border-radius: 9px; background: rgba(148, 163, 184, .035); } +.monster-settings-wave strong { flex: 0 0 85px; color: var(--text-muted); font-size: .82rem; } +.monster-settings-monsters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .65rem; flex: 1; min-width: 0; } +.monster-settings-monster { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .5rem .65rem; border: 1px solid rgba(56, 189, 248, .16); border-radius: 10px; background: rgba(14, 165, 233, .055); } +.monster-settings-monster-portrait { position: relative; display: grid; flex: 0 0 72px; width: 72px; height: 72px; place-items: center; overflow: hidden; border-radius: 10px; background: rgba(15, 23, 42, .8); font-size: 1.55rem; } +.monster-settings-monster-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } +.monster-settings-monster-copy { display: grid; gap: .18rem; min-width: 0; } +.monster-settings-monster-copy strong { overflow-wrap: anywhere; color: var(--text-main); font-size: .86rem; line-height: 1.25; } +.monster-settings-monster-copy code { width: fit-content; color: var(--text-muted); font-size: .72rem; } +.monster-settings-monster.compact { padding: .25rem; } +.monster-settings-empty { padding: 1.4rem; border: 1px dashed rgba(148, 163, 184, .3); border-radius: 12px; color: var(--text-muted); background: var(--bg-card); text-align: center; line-height: 1.6; } +.monster-settings-aha-help[hidden] { display: none; } +.monster-settings-aha-help { margin-top: 1rem; } +.monster-custom-card { display: grid; gap: .85rem; } +.monster-custom-card h3 { margin: 0; color: var(--text-highlight); } +.monster-custom-card > .card-subtitle { margin: 0; } +.monster-settings-source { color: var(--text-muted); font-size: .82rem; } +.monster-custom-wave-list { display: grid; gap: .8rem; } +.monster-custom-wave { display: grid; gap: .75rem; padding: .9rem; border: 1px solid rgba(110, 123, 148, .23); border-radius: 12px; background: rgba(9, 13, 22, .5); } +.monster-custom-wave-heading, .monster-custom-row, .monster-custom-toolbar, .monster-custom-actions, .monster-custom-save-actions { display: flex; align-items: center; gap: .65rem; } +.monster-custom-wave-heading, .monster-custom-toolbar { justify-content: space-between; } +.monster-custom-wave-heading strong { color: var(--text-highlight); } +.monster-custom-rows { display: grid; gap: .55rem; } +.monster-custom-row { align-items: flex-end; padding: .7rem; border: 1px solid rgba(110, 123, 148, .16); border-radius: 10px; background: rgba(255, 255, 255, .018); } +.monster-custom-field { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; gap: .35rem; color: var(--text-muted); font-size: .76rem; font-weight: 700; } +.monster-custom-field input { width: 100%; min-height: 42px; padding: .55rem .65rem; border: 1px solid rgba(110, 123, 148, .32); border-radius: 8px; background: rgba(7, 10, 17, .76); color: var(--text-main); } +.monster-custom-field input:focus { outline: 2px solid rgba(56, 189, 248, .55); outline-offset: 1px; } +.monster-custom-monster-preview { min-height: 62px; } +.monster-custom-monster-field { min-width: 250px; } +.monster-custom-picker { position: relative; width: 100%; } +.monster-custom-picker-results { position: absolute; z-index: 30; top: calc(100% + .35rem); left: 0; right: 0; display: grid; max-height: 340px; overflow-y: auto; padding: .35rem; border: 1px solid rgba(92, 115, 148, .55); border-radius: 12px; background: #111827; box-shadow: 0 18px 42px rgba(0, 0, 0, .5); } +.monster-custom-picker-results[hidden] { display: none; } +.monster-custom-picker-option { display: flex; width: 100%; min-width: 0; padding: .25rem; border: 0; border-radius: 8px; background: transparent; color: var(--text-main); text-align: left; cursor: pointer; } +.monster-custom-picker-option:hover, .monster-custom-picker-option:focus-visible { outline: none; background: rgba(56, 189, 248, .14); } +.monster-custom-picker-option .monster-settings-monster { width: 100%; padding: .25rem .35rem; border: 0; background: transparent; } +.monster-custom-picker-option .monster-settings-monster-portrait { flex-basis: 52px; width: 52px; height: 52px; } +.monster-custom-picker-option .monster-settings-monster-copy strong { font-size: .84rem; } +.monster-custom-picker-option .monster-settings-monster-copy code { font-size: .7rem; } +.monster-custom-monster-preview .monster-settings-monster { width: fit-content; max-width: 100%; padding: .2rem .35rem; } +.monster-custom-monster-preview .monster-settings-monster-portrait { flex-basis: 80px; width: 80px; height: 80px; } +.monster-custom-monster-preview .monster-settings-monster-copy strong { font-size: .76rem; } +.monster-custom-monster-preview .monster-settings-monster-copy code { font-size: .66rem; } +.monster-custom-remove { min-width: 42px; min-height: 42px; } +.monster-custom-add-enemy { justify-self: start; } +.monster-custom-save-actions { justify-content: flex-end; } +.monster-custom-save-actions .monster-settings-status { margin: 0; } +.monster-custom-card button:disabled, .monster-custom-card input:disabled { cursor: not-allowed; opacity: .55; } + +@media (max-width: 700px) { + .monster-settings-wave { flex-direction: column; } + .monster-settings-monsters { width: 100%; } + .monster-settings-stage-grid { grid-template-columns: 1fr; } + .monster-aa-room-control { align-items: stretch; flex-direction: column; } + .monster-aa-room-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } + .monster-aa-room-actions .btn { width: 100%; } + .monster-custom-toolbar, .monster-custom-save-actions { align-items: stretch; flex-direction: column; } + .monster-custom-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); } + .monster-custom-save-actions .btn { width: 100%; } + .monster-custom-row { align-items: stretch; flex-wrap: wrap; } + .monster-custom-field { flex-basis: calc(50% - .65rem); } + .monster-custom-monster-field { flex-basis: 100%; } + .monster-custom-remove { margin-left: auto; } +} + +@media (max-width: 390px) { + .monster-settings-wave { flex-direction: column; } + .monster-custom-field { flex-basis: 100%; } } diff --git a/index.html b/index.html index 52f54c0..3c0b410 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@
ตรวจสอบข้อมูลด่านและคลื่นมอนจาก resource ของ Client ตามเวอร์ชัน ปรับ custom monster ได้เฉพาะ Golden / Crimson Calyx เท่านั้น
+Choose the support level for the next battle that includes Voracity Corruption. This setting is separate from Aha Global.
+