rope/guildhall
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Combat in one frame: you, prayers and gear left; the enemy, its traits and the log right. Fight chip in enemy red

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-20 15:30:05 +01:00
parent 2f2681ba17
commit 308c3a3c01
2 changed files with 67 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

31
static/styles.css
View file

@ -235,7 +235,7 @@ select { background: var(--bg); border: 1px solid var(--line); border-radius: 8p
.fund { display: flex; flex-direction: column; gap: 6px; }
.fight .fighters { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.fight .vs { font-size: 22px; }
.fight.waiting .fighter:last-child { opacity: .45; }
.fight.waiting .foe-side .foe-head, .fight.waiting .traits { opacity: .45; }
.fighter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fighter-name { display: flex; justify-content: space-between; gap: 8px; }
.fighter-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@ -510,3 +510,32 @@ button.sheet-skill:hover { background: var(--panel-2); }
.swap-qty { position: absolute; top: 1px; left: 3px; font-size: 10px; font-weight: 700; color: var(--muted); }
.doll-slot.swap .swap-type .gi { width: 11px; height: 11px; }
.doll-slot.swap .hands { top: 1px; right: 1px; font-size: 8px; padding: 0 2px; }
/* The combat frame: you on the left, the enemy on the right */
.combat-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.you-side, .foe-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.foe-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.foe-ico { width: 56px; height: 56px; border-radius: 12px; background: var(--panel-2); display: grid; place-items: center; }
.foe-ico .gi { width: 40px; height: 40px; }
.foe-idle { padding: 18px 0; }
.traits { display: grid; gap: 6px; }
.trait { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.trait > .muted { width: 84px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 2px 9px 2px 3px; border-radius: 99px;
background: var(--panel-2); border: 1px solid var(--line); }
.pill.vuln { border-color: rgba(95, 174, 90, .6); }
.pill.resist { border-color: rgba(226, 100, 92, .55); }
.pill.yours { box-shadow: 0 0 0 2px var(--gold); }
.combat-frame .fight-log { margin: 0; }
.prayer-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prayer-bar .pp { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; margin-right: 4px; }
.pray-btn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; padding: 0; cursor: pointer;
background: var(--panel-2); border: 1px solid var(--line); color: inherit; opacity: .55; }
.pray-btn .gi { width: 22px; height: 22px; }
.pray-btn.on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
@media (max-width: 900px) {
.combat-frame { display: flex; flex-direction: column; gap: 16px; }
.you-side { display: contents; }
.you-side > .fighter { order: 1; } .foe-side { order: 2; } .prayer-bar { order: 3; } .you-side > .doll-wrap { order: 4; }
}
.bar.mini.foe > span { background: var(--bad); }