The Deadlock Wiki - User contributions [en]

Template:ItemBox/styles.css

2026-07-21T15:06:29Z

~2026-ChargeOrbActive711: Fix mobile name overflow: reset inherited overflow-wrap/word-break on the item name so long words (e.g. Expansion) stay whole and wrap like desktop instead of breaking mid-word onto a clipped third line (with help from vergir-bot LLM)

/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */
.itembox,
.itembox * {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.itembox {
--itembox-ink: #10130D;
--itembox-weapon: #EC981a;
--itembox-vitality: #7CBB1E;
--itembox-spirit: #CE91FF;
--itembox-imbue-fg: #E8C9FF;
--itembox-imbue-bg: #623585;
--itembox-font: 'Retail Demo', sans-serif;
position: relative;
display: inline-block;
font-size: 10px;
width: 8em;
height: 12.5em;
border-radius: 0.6em;
box-shadow: 0.2em 0.2em 1.2em #00000097;
overflow: hidden;
transition-duration: 0.1s;
transition-property: opacity, transform, filter;
}
.itembox-background {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
pointer-events: none;
}
.itembox-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-size: cover;
}

.itembox-tier-1.itembox-weapon .itembox-card {
background-image: url('/images/3/3e/Weapon_Card_T1.png');
}
.itembox-tier-2.itembox-weapon .itembox-card {
background-image: url('/images/9/96/Weapon_Card_T2.png');
}
.itembox-tier-3.itembox-weapon .itembox-card {
background-image: url('/images/5/5d/Weapon_Card_T3.png');
}
.itembox-tier-4.itembox-weapon .itembox-card {
background-image: url('/images/a/a6/Weapon_Card_T4.png');
}
.itembox-tier-5.itembox-weapon .itembox-card {
background-image: url('/images/a/a6/Weapon_Card_T4.png');
}
.itembox-tier-1.itembox-vitality .itembox-card {
background-image: url('/images/7/75/Armor_Card_T1.png');
}
.itembox-tier-2.itembox-vitality .itembox-card {
background-image: url('/images/0/05/Armor_Card_T2.png');
}
.itembox-tier-3.itembox-vitality .itembox-card {
background-image: url('/images/7/7c/Armor_Card_T3.png');
}
.itembox-tier-4.itembox-vitality .itembox-card {
background-image: url('/images/1/18/Armor_Card_T4.png');
}
.itembox-tier-5.itembox-vitality .itembox-card {
background-image: url('/images/1/18/Armor_Card_T4.png');
}
.itembox-tier-1.itembox-spirit .itembox-card {
background-image: url('/images/a/af/Tech_Card_T1.png');
}
.itembox-tier-2.itembox-spirit .itembox-card {
background-image: url('/images/a/ac/Tech_Card_T2.png');
}
.itembox-tier-3.itembox-spirit .itembox-card {
background-image: url('/images/6/67/Tech_Card_T3.png');
}
.itembox-tier-4.itembox-spirit .itembox-card {
background-image: url('/images/f/f5/Tech_Card_T4.png');
}
.itembox-tier-5.itembox-spirit .itembox-card {
background-image: url('/images/f/f5/Tech_Card_T4.png');
}

.itembox-icon-area {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 1 / 1;
}
.itembox-icon {
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
mask-size: cover;
mask-repeat: no-repeat;
mask-mode: luminance;
}
.itembox-icon > span,
.itembox-icon > span > span,
.itembox-icon picture {
display: block;
width: 100%;
height: 100%;
}
.itembox-icon img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}

.itembox-icon-v1 .itembox-icon {
mask-image: url('/images/1/10/Icon_mask01.png');
}
.itembox-icon-v2 .itembox-icon {
mask-image: url('/images/6/6f/Icon_mask02.png');
}
.itembox-icon-v3 .itembox-icon {
mask-image: url('/images/9/96/Icon_mask03.png');
}

.itembox-tier-badge {
position: absolute;
top: 0;
right: 0;
width: 2.8em;
height: 2.8em;
transform: scale(1.4);
transform-origin: top right;
visibility: hidden;
}
.itembox-show-tier .itembox-tier-badge {
visibility: visible;
}
.itembox-tier-badge-fill {
width: 100%;
height: 100%;
mask-size: 2.2em;
mask-repeat: no-repeat;
mask-position: right 0;
mask-image: url('/images/6/61/Tier_corner_cap.svg');
}
.itembox-tier-badge-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 2.2em;
background-repeat: no-repeat;
background-position: right 0;
background-image: url('/images/6/61/Tier_corner_cap.svg');
filter: drop-shadow(-0.4em 0 0.6em #000000ff);
}

.itembox-weapon .itembox-tier-badge-fill {
background-color: var(--itembox-weapon);
}
.itembox-vitality .itembox-tier-badge-fill {
background-color: var(--itembox-vitality);
}
.itembox-spirit .itembox-tier-badge-fill {
background-color: var(--itembox-spirit);
}

.itembox-tier-badge-number {
position: absolute;
right: 0;
top: 0.3em;
height: 0.8em;
mask-size: 100% 100%;
background-color: var(--itembox-ink);
}
.itembox-tier-1 .itembox-tier-badge-number {
width: 0.5em;
right: 0.4em;
mask-image: url('/images/2/24/Tier_numbers_small_01.svg');
}
.itembox-tier-2 .itembox-tier-badge-number {
width: 0.7em;
right: 0.3em;
mask-image: url('/images/7/74/Tier_numbers_small_02.svg');
}
.itembox-tier-3 .itembox-tier-badge-number {
width: 0.9em;
right: 0.2em;
mask-image: url('/images/5/54/Tier_numbers_small_03.svg');
}
.itembox-tier-4 .itembox-tier-badge-number {
width: 1.1em;
mask-image: url('/images/c/c6/Tier_numbers_small_04.svg');
}
.itembox-tier-5 .itembox-tier-badge-number {
width: 1.1em;
right: 0.1em;
mask-image: url('/images/8/81/Tier_numbers_small_05.svg');
}

.itembox-imbue-tag {
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: fit-content;
font-size: 1.2em;
font-weight: bold;
font-family: var(--itembox-font);
line-height: normal;
letter-spacing: 0.1em;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
border-radius: 0.2em;
padding: 0 0.3em;
color: var(--itembox-imbue-fg);
background-color: var(--itembox-imbue-bg);
visibility: hidden;
}
.itembox-imbue .itembox-imbue-tag {
visibility: visible;
}
.itembox-active.itembox-imbue .itembox-imbue-tag {
justify-content: start;
height: 2.2em;
}

.itembox-name-area {
width: 100%;
height: 4.5em;
padding: 0.5em 0.4em;
}
.itembox-name {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1.2;
text-align: center;
font-size: 1.5em;
font-weight: bold;
font-family: var(--itembox-font);
color: var(--itembox-ink);
overflow-wrap: normal;
word-break: normal;
}

.itembox-tier-4.itembox-weapon .itembox-name,
.itembox-tier-5.itembox-weapon .itembox-name {
color: #e4c5a1;
}
.itembox-tier-4.itembox-vitality .itembox-name,
.itembox-tier-5.itembox-vitality .itembox-name {
color: #c2e7cd;
}
.itembox-tier-4.itembox-spirit .itembox-name,
.itembox-tier-5.itembox-spirit .itembox-name {
color: #e3d4f2;
}

.itembox-wear {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.7;
mask-size: 100% 100%;
background-color: white;
}
.itembox-wear-v1 .itembox-wear {
mask-image: url('/images/8/8f/Card_PaperWear_1.png');
}
.itembox-wear-v2 .itembox-wear {
mask-image: url('/images/1/11/Card_PaperWear_2.png');
}
.itembox-wear-v3 .itembox-wear {
mask-image: url('/images/8/89/Card_PaperWear_3.png');
}
.itembox-wear-v4 .itembox-wear {
mask-image: url('/images/5/52/Card_PaperWear_4.png');
}

.itembox-tier-1.itembox-vitality .itembox-wear {
opacity: 1;
background-color: #f4e2cd;
}
.itembox-tier-1.itembox-spirit .itembox-wear {
opacity: 1;
background-color: rgb(247, 232, 213);
}
.itembox-tier-2 .itembox-wear {
background-color: rgb(230, 209, 191);
}
.itembox-tier-3 .itembox-wear {
background-color: rgb(206, 173, 155);
}
.itembox-tier-4 .itembox-wear,
.itembox-tier-5 .itembox-wear {
background-color: rgb(105, 97, 92);
}

.itembox-texture {
position: absolute;
width: 100%;
height: 100%;
background-size: 100% 100%;
mix-blend-mode: multiply;
}
.itembox-texture-v1 .itembox-texture {
background-image: url('/images/9/97/Shopitem_papertexture01.png');
}
.itembox-texture-v2 .itembox-texture {
background-image: url('/images/b/bf/Shopitem_papertexture02.png');
}
.itembox-texture-v3 .itembox-texture {
background-image: url('/images/9/95/Shopitem_papertexture03.png');
}

.itembox-bevel {
position: absolute;
width: 100%;
height: 100%;
border-left: 0.1em solid #ffcc6622;
border-top: 0.1em solid #ffcc6622;
background-size: 100% 100%;
mix-blend-mode: screen;
}

.itembox-active-tag {
position: absolute;
bottom: 3.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
width: fit-content;
height: fit-content;
font-size: 1.1em;
font-weight: bold;
font-family: var(--itembox-font);
line-height: normal;
letter-spacing: 0;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
border-radius: 0.2em;
padding: 0.1em 0.6em;
box-shadow: 0 0 3em #000000ff;
color: #ffefd7b3;
background-color: #171717;
visibility: hidden;
}
.itembox-active .itembox-active-tag {
visibility: visible;
}

.itembox .item-link-wrapper,
.itembox .item-link-wrapper > a {
position: absolute;
display: block;
inset: 0;
}

Template:ItemBox/styles.css

2026-07-21T14:50:31Z

~2026-ChargeOrbActive711: Fix mobile icon overflow: clip the icon box and constrain the MediaWiki image wrapper chain (span/picture/img) so the icon fills its slot instead of rendering at native size and spilling over the card (with help from vergir-bot LLM)

/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */
.itembox,
.itembox * {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.itembox {
--itembox-ink: #10130D;
--itembox-weapon: #EC981a;
--itembox-vitality: #7CBB1E;
--itembox-spirit: #CE91FF;
--itembox-imbue-fg: #E8C9FF;
--itembox-imbue-bg: #623585;
--itembox-font: 'Retail Demo', sans-serif;
position: relative;
display: inline-block;
font-size: 10px;
width: 8em;
height: 12.5em;
border-radius: 0.6em;
box-shadow: 0.2em 0.2em 1.2em #00000097;
overflow: hidden;
transition-duration: 0.1s;
transition-property: opacity, transform, filter;
}
.itembox-background {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
pointer-events: none;
}
.itembox-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-size: cover;
}

.itembox-tier-1.itembox-weapon .itembox-card {
background-image: url('/images/3/3e/Weapon_Card_T1.png');
}
.itembox-tier-2.itembox-weapon .itembox-card {
background-image: url('/images/9/96/Weapon_Card_T2.png');
}
.itembox-tier-3.itembox-weapon .itembox-card {
background-image: url('/images/5/5d/Weapon_Card_T3.png');
}
.itembox-tier-4.itembox-weapon .itembox-card {
background-image: url('/images/a/a6/Weapon_Card_T4.png');
}
.itembox-tier-5.itembox-weapon .itembox-card {
background-image: url('/images/a/a6/Weapon_Card_T4.png');
}
.itembox-tier-1.itembox-vitality .itembox-card {
background-image: url('/images/7/75/Armor_Card_T1.png');
}
.itembox-tier-2.itembox-vitality .itembox-card {
background-image: url('/images/0/05/Armor_Card_T2.png');
}
.itembox-tier-3.itembox-vitality .itembox-card {
background-image: url('/images/7/7c/Armor_Card_T3.png');
}
.itembox-tier-4.itembox-vitality .itembox-card {
background-image: url('/images/1/18/Armor_Card_T4.png');
}
.itembox-tier-5.itembox-vitality .itembox-card {
background-image: url('/images/1/18/Armor_Card_T4.png');
}
.itembox-tier-1.itembox-spirit .itembox-card {
background-image: url('/images/a/af/Tech_Card_T1.png');
}
.itembox-tier-2.itembox-spirit .itembox-card {
background-image: url('/images/a/ac/Tech_Card_T2.png');
}
.itembox-tier-3.itembox-spirit .itembox-card {
background-image: url('/images/6/67/Tech_Card_T3.png');
}
.itembox-tier-4.itembox-spirit .itembox-card {
background-image: url('/images/f/f5/Tech_Card_T4.png');
}
.itembox-tier-5.itembox-spirit .itembox-card {
background-image: url('/images/f/f5/Tech_Card_T4.png');
}

.itembox-icon-area {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 1 / 1;
}
.itembox-icon {
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
mask-size: cover;
mask-repeat: no-repeat;
mask-mode: luminance;
}
.itembox-icon > span,
.itembox-icon > span > span,
.itembox-icon picture {
display: block;
width: 100%;
height: 100%;
}
.itembox-icon img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}

.itembox-icon-v1 .itembox-icon {
mask-image: url('/images/1/10/Icon_mask01.png');
}
.itembox-icon-v2 .itembox-icon {
mask-image: url('/images/6/6f/Icon_mask02.png');
}
.itembox-icon-v3 .itembox-icon {
mask-image: url('/images/9/96/Icon_mask03.png');
}

.itembox-tier-badge {
position: absolute;
top: 0;
right: 0;
width: 2.8em;
height: 2.8em;
transform: scale(1.4);
transform-origin: top right;
visibility: hidden;
}
.itembox-show-tier .itembox-tier-badge {
visibility: visible;
}
.itembox-tier-badge-fill {
width: 100%;
height: 100%;
mask-size: 2.2em;
mask-repeat: no-repeat;
mask-position: right 0;
mask-image: url('/images/6/61/Tier_corner_cap.svg');
}
.itembox-tier-badge-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 2.2em;
background-repeat: no-repeat;
background-position: right 0;
background-image: url('/images/6/61/Tier_corner_cap.svg');
filter: drop-shadow(-0.4em 0 0.6em #000000ff);
}

.itembox-weapon .itembox-tier-badge-fill {
background-color: var(--itembox-weapon);
}
.itembox-vitality .itembox-tier-badge-fill {
background-color: var(--itembox-vitality);
}
.itembox-spirit .itembox-tier-badge-fill {
background-color: var(--itembox-spirit);
}

.itembox-tier-badge-number {
position: absolute;
right: 0;
top: 0.3em;
height: 0.8em;
mask-size: 100% 100%;
background-color: var(--itembox-ink);
}
.itembox-tier-1 .itembox-tier-badge-number {
width: 0.5em;
right: 0.4em;
mask-image: url('/images/2/24/Tier_numbers_small_01.svg');
}
.itembox-tier-2 .itembox-tier-badge-number {
width: 0.7em;
right: 0.3em;
mask-image: url('/images/7/74/Tier_numbers_small_02.svg');
}
.itembox-tier-3 .itembox-tier-badge-number {
width: 0.9em;
right: 0.2em;
mask-image: url('/images/5/54/Tier_numbers_small_03.svg');
}
.itembox-tier-4 .itembox-tier-badge-number {
width: 1.1em;
mask-image: url('/images/c/c6/Tier_numbers_small_04.svg');
}
.itembox-tier-5 .itembox-tier-badge-number {
width: 1.1em;
right: 0.1em;
mask-image: url('/images/8/81/Tier_numbers_small_05.svg');
}

.itembox-imbue-tag {
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: fit-content;
font-size: 1.2em;
font-weight: bold;
font-family: var(--itembox-font);
line-height: normal;
letter-spacing: 0.1em;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
border-radius: 0.2em;
padding: 0 0.3em;
color: var(--itembox-imbue-fg);
background-color: var(--itembox-imbue-bg);
visibility: hidden;
}
.itembox-imbue .itembox-imbue-tag {
visibility: visible;
}
.itembox-active.itembox-imbue .itembox-imbue-tag {
justify-content: start;
height: 2.2em;
}

.itembox-name-area {
width: 100%;
height: 4.5em;
padding: 0.5em 0.4em;
}
.itembox-name {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1.2;
text-align: center;
font-size: 1.5em;
font-weight: bold;
font-family: var(--itembox-font);
color: var(--itembox-ink);
}

.itembox-tier-4.itembox-weapon .itembox-name,
.itembox-tier-5.itembox-weapon .itembox-name {
color: #e4c5a1;
}
.itembox-tier-4.itembox-vitality .itembox-name,
.itembox-tier-5.itembox-vitality .itembox-name {
color: #c2e7cd;
}
.itembox-tier-4.itembox-spirit .itembox-name,
.itembox-tier-5.itembox-spirit .itembox-name {
color: #e3d4f2;
}

.itembox-wear {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.7;
mask-size: 100% 100%;
background-color: white;
}
.itembox-wear-v1 .itembox-wear {
mask-image: url('/images/8/8f/Card_PaperWear_1.png');
}
.itembox-wear-v2 .itembox-wear {
mask-image: url('/images/1/11/Card_PaperWear_2.png');
}
.itembox-wear-v3 .itembox-wear {
mask-image: url('/images/8/89/Card_PaperWear_3.png');
}
.itembox-wear-v4 .itembox-wear {
mask-image: url('/images/5/52/Card_PaperWear_4.png');
}

.itembox-tier-1.itembox-vitality .itembox-wear {
opacity: 1;
background-color: #f4e2cd;
}
.itembox-tier-1.itembox-spirit .itembox-wear {
opacity: 1;
background-color: rgb(247, 232, 213);
}
.itembox-tier-2 .itembox-wear {
background-color: rgb(230, 209, 191);
}
.itembox-tier-3 .itembox-wear {
background-color: rgb(206, 173, 155);
}
.itembox-tier-4 .itembox-wear,
.itembox-tier-5 .itembox-wear {
background-color: rgb(105, 97, 92);
}

.itembox-texture {
position: absolute;
width: 100%;
height: 100%;
background-size: 100% 100%;
mix-blend-mode: multiply;
}
.itembox-texture-v1 .itembox-texture {
background-image: url('/images/9/97/Shopitem_papertexture01.png');
}
.itembox-texture-v2 .itembox-texture {
background-image: url('/images/b/bf/Shopitem_papertexture02.png');
}
.itembox-texture-v3 .itembox-texture {
background-image: url('/images/9/95/Shopitem_papertexture03.png');
}

.itembox-bevel {
position: absolute;
width: 100%;
height: 100%;
border-left: 0.1em solid #ffcc6622;
border-top: 0.1em solid #ffcc6622;
background-size: 100% 100%;
mix-blend-mode: screen;
}

.itembox-active-tag {
position: absolute;
bottom: 3.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
width: fit-content;
height: fit-content;
font-size: 1.1em;
font-weight: bold;
font-family: var(--itembox-font);
line-height: normal;
letter-spacing: 0;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
border-radius: 0.2em;
padding: 0.1em 0.6em;
box-shadow: 0 0 3em #000000ff;
color: #ffefd7b3;
background-color: #171717;
visibility: hidden;
}
.itembox-active .itembox-active-tag {
visibility: visible;
}

.itembox .item-link-wrapper,
.itembox .item-link-wrapper > a {
position: absolute;
display: block;
inset: 0;
}

Template:HeroStreetBrawlItems/styles.css

2026-07-21T12:23:30Z

~2026-ChargeOrbActive711: Cards justify-content center; narrow Low wraps naturally (drop forced column direction) (with help from vergir-bot LLM)

.sb-group {
margin-top: 1em;
}
.sb-group:first-child {
margin-top: 0.25em;
}

.sb-label {
font-weight: bold;
margin-bottom: 0.25em;
font-size: 1.1em;
}

.sb-cards {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
}

.sb-icons {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
align-items: center;
}

.sb-common {
margin-top: 0.75em;
}

.sb-common-head {
font-weight: bold;
cursor: pointer;
margin-bottom: 0.25em;
}

.sb-common-head::after {
content: " \25BE";
font-size: 0.8em;
opacity: 0.6;
}

.sb-common.mw-collapsed .sb-common-head::after {
content: " \25B8";
}

.sb-common-body {
line-height: 1.9;
}

/* Tier columns. Widths are set per case by sb-w-* classes from the module. */
.sb-tier {
display: flex;
gap: 8px;
align-items: stretch;
margin-top: 0.5em;
}

.sb-col {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
border-radius: 6px;
overflow: hidden;
}

.sb-col-head {
padding: 3px 8px;
font-weight: bold;
}

.sb-col-body {
flex: 1;
min-height: 120px;
padding: 6px 8px;
line-height: 1.8;
}

.sb-col-cards {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: flex-start;
align-content: flex-start;
justify-content: center;
}

/* Column width cases */
.sb-w-high {
flex: 0 0 35%;
}
.sb-w-fill {
flex: 1 1 0;
}
.sb-low-narrow,
.sb-low-wide {
flex: 0 0 auto;
}
/* Low without High: sized to fit all its cards on one line */
.sb-low-wide .sb-col-cards {
flex-wrap: nowrap;
}

/* Per-chance colour + tints (drive every theme) */
.sb-col-high {
--chance: #4f8f36;
--tint: rgba(90, 150, 60, 0.12);
--tint-soft: rgba(90, 150, 60, 0.07);
}
.sb-col-normal {
--chance: #b28b28;
--tint: rgba(190, 150, 45, 0.12);
--tint-soft: rgba(190, 150, 45, 0.07);
}
.sb-col-low {
--chance: #9c3f37;
--tint: rgba(170, 65, 55, 0.12);
--tint-soft: rgba(170, 65, 55, 0.07);
}

/* Default theme "Fill": colored header bar + tinted body */
.sb-col {
background: var(--tint);
}
.sb-col-head {
background: var(--chance);
color: #fff;
}

/* Theme "Border": colored header bar + no body tint + colored border */
.sb-theme-border .sb-col {
background: transparent;
border: 1px solid var(--chance);
}

/* Theme "Heading": label sits OUTSIDE the box as a plain uncolored subheading; the box (border + soft tint) is the body */
.sb-theme-head .sb-col {
background: transparent;
overflow: visible;
}
.sb-theme-head .sb-col-head {
background: transparent;
color: inherit;
font-size: 1.05em;
padding: 0 0 3px 2px;
}
.sb-theme-head .sb-col-body {
background: var(--tint-soft);
border: 1px solid var(--chance);
border-radius: 6px;
}

/* Theme "Accent" (top): colored top border + soft tint + colored heading text */
.sb-theme-accent .sb-col {
background: var(--tint-soft);
border-top: 3px solid var(--chance);
border-radius: 6px;
}
.sb-theme-accent .sb-col-head {
background: transparent;
color: var(--chance);
}

/* Theme "Accent bottom": colored bottom border */
.sb-theme-accent-bottom .sb-col {
background: var(--tint-soft);
border-bottom: 3px solid var(--chance);
border-radius: 6px;
}
.sb-theme-accent-bottom .sb-col-head {
background: transparent;
color: var(--chance);
}

/* layout=grid: one wrapping grid; each card framed by a chance-colored outline */
.sb-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
margin-top: 0.5em;
}
.sb-chip {
display: inline-flex;
padding: 3px;
border: 2px solid var(--chance);
border-radius: 9px;
}
.sb-chip-high {
--chance: #4f8f36;
}
.sb-chip-normal {
--chance: #b28b28;
}
.sb-chip-low {
--chance: #9c3f37;
}

@media (max-width: 720px) {
.sb-tier {
flex-direction: column;
}
.sb-w-high,
.sb-low-narrow,
.sb-low-wide {
flex: 1 1 auto;
}
.sb-low-wide .sb-col-cards {
flex-wrap: wrap;
}
}

Module:StreetBrawlItems

2026-07-21T12:23:05Z

~2026-ChargeOrbActive711: No tier badge on Legendary (tier 5) cards; p.tiers uses === headings === (with help from vergir-bot LLM)

local p = {}

local sb = mw.loadJsonData("Data:StreetBrawlData.json")["item-buckets"]
local items = mw.loadJsonData("Data:ItemData.json")
local heroes = mw.loadJsonData("Data:HeroData.json")

-- Slot display order: Weapon -> Vitality (Armor) -> Spirit (Tech)
local SLOT_RANK = { Weapon = 1, Armor = 2, Tech = 3 }
-- Default card scale passed to ItemBox (tier columns and counter cards).
local CARD_SIZE = "0.75"

local NAME_TO_KEY, KEY_TO_NAME, RELEASED = {}, {}, {}
for key, h in pairs(heroes) do
if type(h) == "table" and h.Name then
KEY_TO_NAME[key] = h.Name
NAME_TO_KEY[mw.ustring.lower(h.Name)] = key
if not h.InDevelopment and not h.IsDisabled then RELEASED[key] = true end
end
end

local function hero_key(input)
if not input then return nil end
input = mw.text.trim(input)
if input == "" then return nil end
if heroes[input] then return input end
return NAME_TO_KEY[mw.ustring.lower(input)]
end

local function iname(code) local it = items[code]; return it and it.Name or nil end
-- A "real" item: exists, has a display name, and is not disabled/removed.
local function iok(code)
local it = items[code]
return it ~= nil and it.Name ~= nil and it.IsDisabled ~= true
end
local function itier(code)
local it = items[code]; if not it then return nil end
if it.StreetBrawl == true then return 5 end
return it.Tier
end
local function islot(code) local it = items[code]; return it and it.Slot end
local function icost(code)
local it = items[code]; local c = it and it.Cost
return type(c) == "number" and c or math.huge
end

-- Sort order: slot (Weapon -> Armor -> Tech), then cost ascending, then name.
local function item_less(a, b)
local ra = SLOT_RANK[islot(a)] or 99
local rb = SLOT_RANK[islot(b)] or 99
if ra ~= rb then return ra < rb end
local ca, cb = icost(a), icost(b)
if ca ~= cb then return ca < cb end
return (iname(a) or a) < (iname(b) or b)
end

local function render_item(frame, code, style, size)
local name = iname(code); if not name then return nil end
if style == "icon" then return frame:expandTemplate{title = "ItemIcon", args = {name}} end
local args = { name, size = size or CARD_SIZE }
-- Legendary (tier 5) cards omit the tier badge; it is redundant in the Legendary tier.
if itier(code) ~= 5 then args.showTierTag = "true" end
return frame:expandTemplate{title = "ItemBox", args = args}
end
local function render_hero(frame, key)
local name = KEY_TO_NAME[key]; if not name then return nil end
return frame:expandTemplate{title = "HeroIcon", args = {name}}
end

-- Lays rendered members out in a container with the given class (styled via CSS).
local function classdiv(parts, class)
if #parts == 0 then return "" end
return '<div class="' .. class .. '">' .. table.concat(parts) .. '</div>'
end

local function hero_sets(hkey)
local favored, unfavored, special, counter = {}, {}, {}, {}
for _, o in ipairs(sb.Outliers) do
if o.Hero == hkey then
if o.Bucket == "Good" then favored[o.Item] = true; special[o.Item] = true
elseif type(o.Weight) == "number" and o.Weight < 1 then unfavored[o.Item] = true; special[o.Item] = true end
if o.Counter ~= nil then counter[#counter + 1] = o.Item end
end
end
return favored, unfavored, special, counter
end

-- Returns sorted high (favored), normal (pool), low (unfavored) item-code lists for a tier.
local function collect(hkey, tier)
local favored, unfavored = hero_sets(hkey)
local high, normal, low = {}, {}, {}
for _, c in ipairs(sb.AvailableItems) do
if iok(c) and (tier == nil or itier(c) == tier) then
if favored[c] then high[#high + 1] = c
elseif unfavored[c] then low[#low + 1] = c
else normal[#normal + 1] = c end
end
end
table.sort(high, item_less)
table.sort(normal, item_less)
table.sort(low, item_less)
return high, normal, low
end

local function item_code(input)
input = mw.text.trim(input or "")
if input == "" then return nil end
if items[input] then return input end
for k, v in pairs(items) do
if type(v) == "table" and v.Name == input and v.IsDisabled ~= true then return k end
end
for k, v in pairs(items) do
if type(v) == "table" and v.Name == input then return k end
end
return nil
end

-- Builds one tier as conditional columns:
-- High chance (favored) 35% and Middle chance (pool) fill the rest.
-- Low chance (unfavored) is dropped when empty; a narrow one-card column on the right
-- when High is present; a fit-content column on the right when High is absent.
local function tier_columns(frame, hkey, tier, style, size, theme, hi, mid, lo)
local high, normal, low = collect(hkey, tier)
local body_class = (style == "card") and "sb-col-body sb-col-cards" or "sb-col-body"
local sep = (style == "card") and "" or "<br>"

local function col(codes, cls, head)
local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, style, size); if r then parts[#parts + 1] = r end end
return '<div class="sb-col ' .. cls .. '">'
.. '<div class="sb-col-head">' .. head .. '</div>'
.. '<div class="' .. body_class .. '">' .. table.concat(parts, sep) .. '</div>'
.. '</div>'
end

local cls = "sb-tier"
if theme ~= "" then cls = cls .. " " .. theme end

local out = {}
if #high > 0 then
out[#out + 1] = col(high, "sb-col-high sb-w-high", hi)
end
out[#out + 1] = col(normal, "sb-col-normal sb-w-fill", mid)
if #low > 0 then
local low_w = (#high > 0) and "sb-low-narrow" or "sb-low-wide"
out[#out + 1] = col(low, "sb-col-low " .. low_w, lo)
end
return '<div class="' .. cls .. '">' .. table.concat(out) .. '</div>'
end

-- {{#invoke:StreetBrawlItems|hero|HERO|GROUP|TIER|label=..|collapse=yes|style=card|icon}}
-- Legacy: superseded by p.tier, kept for reference.
function p.hero(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local group = mw.text.trim(frame.args[2] or "")
local tier = tonumber(frame.args[3])
local style = frame.args.style
if not style or style == "" then style = (group == "common") and "icon" or "card" end
local label = frame.args.label or ""

local favored, unfavored, special = hero_sets(hkey)
local pred
if group == "favored" then pred = function(c) return favored[c] end
elseif group == "unfavored" then pred = function(c) return unfavored[c] end
elseif group == "common" then pred = function(c) return not special[c] end
else return "" end

local codes = {}
for _, c in ipairs(sb.AvailableItems) do
if iok(c) and (tier == nil or itier(c) == tier) and pred(c) then codes[#codes + 1] = c end
end
table.sort(codes, item_less)

local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, style); if r then parts[#parts + 1] = r end end
if #parts == 0 then return "" end

local row_class = (style == "icon") and "sb-icons" or "sb-cards"
local out = '<div class="sb-group">'
if label ~= "" then out = out .. '<div class="sb-label">' .. label .. '</div>' end
return out .. classdiv(parts, row_class) .. '</div>'
end

-- {{#invoke:StreetBrawlItems|tier|HERO|TIER|style=icon|card|size=..|theme=..|layout=grid|high=..|middle=..|low=..}}
function p.tier(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local tier = tonumber(frame.args[2])
local style = (frame.args.style == "card") and "card" or "icon"
local size = frame.args.size
local theme = frame.args.theme or ""
local hi = frame.args.high or "High chance"
local mid = frame.args.middle or "Middle chance"
local lo = frame.args.low or "Low chance"

if frame.args.layout == "grid" then
local high, normal, low = collect(hkey, tier)
local function chips(codes, chance)
local out = {}
for _, c in ipairs(codes) do
local r = render_item(frame, c, "card", size)
if r then out[#out + 1] = '<span class="sb-chip ' .. chance .. '">' .. r .. '</span>' end
end
return table.concat(out)
end
return '<div class="sb-grid">'
.. chips(high, "sb-chip-high")
.. chips(normal, "sb-chip-normal")
.. chips(low, "sb-chip-low")
.. '</div>'
end

return tier_columns(frame, hkey, tier, style, size, theme, hi, mid, lo)
end

-- {{#invoke:StreetBrawlItems|tiers|HERO|style=..|size=..|theme=..}} -> all five tiers, each with a heading.
function p.tiers(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local style = (frame.args.style == "card") and "card" or "icon"
local size = frame.args.size
local theme = frame.args.theme or ""
local hi = frame.args.high or "High chance"
local mid = frame.args.middle or "Middle chance"
local lo = frame.args.low or "Low chance"

local labels = { "Tier 1", "Tier 2", "Tier 3", "Tier 4", "Legendary" }
local out = {}
for t = 1, 5 do
out[#out + 1] = "=== " .. labels[t] .. " ===\n" .. tier_columns(frame, hkey, t, style, size, theme, hi, mid, lo)
end
return table.concat(out, "\n\n")
end

-- {{#invoke:StreetBrawlItems|hero_counter|HERO|heading=..|note=..}}
function p.hero_counter(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local _, _, _, counter = hero_sets(hkey)

local codes = {}
for _, c in ipairs(counter) do if iok(c) then codes[#codes + 1] = c end end
if #codes == 0 then return "" end
table.sort(codes, item_less)

local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, "card"); if r then parts[#parts + 1] = r end end

local out = {}
local heading = frame.args.heading
if heading and heading ~= "" then out[#out + 1] = "=== " .. heading .. " ===" end
local note = frame.args.note
if note and note ~= "" then out[#out + 1] = "''" .. note .. "''" end
out[#out + 1] = classdiv(parts, "sb-cards")
return table.concat(out, "\n")
end

-- {{#invoke:StreetBrawlItems|item|ITEM|GROUP|label=..|note=..}}
function p.item(frame)
local code = item_code(frame.args[1]); if not code then return "" end
local group = mw.text.trim(frame.args[2] or "")

local fav, unf, ctr = {}, {}, {}
for _, o in ipairs(sb.Outliers) do
if o.Item == code and RELEASED[o.Hero] then
if o.Bucket == "Good" then fav[#fav + 1] = o.Hero
elseif type(o.Weight) == "number" and o.Weight < 1 then unf[#unf + 1] = o.Hero end
if o.Counter ~= nil then ctr[#ctr + 1] = o.Hero end
end
end
local list = (group == "favored" and fav) or (group == "unfavored" and unf) or (group == "counter" and ctr)
if not list then return "" end
table.sort(list, function(a, b) return (KEY_TO_NAME[a] or a) < (KEY_TO_NAME[b] or b) end)

local parts = {}
for _, k in ipairs(list) do local r = render_hero(frame, k); if r then parts[#parts + 1] = r end end
if #parts == 0 then return "" end

local pre = ""
local label = frame.args.label
if label and label ~= "" then pre = pre .. "'''" .. label .. "'''<br>" end
local note = frame.args.note
if note and note ~= "" then pre = pre .. "''" .. note .. "''<br>" end
return pre .. classdiv(parts, "sb-icons")
end

-- {{#invoke:StreetBrawlItems|item_in_pool|ITEM}} -> "1" if in the Street Brawl pool, else ""
function p.item_in_pool(frame)
local code = item_code(frame.args[1]); if not code then return "" end
for _, c in ipairs(sb.AvailableItems) do if c == code then return "1" end end
return ""
end

return p

User:Vergir

2026-07-21T12:07:07Z

~2026-ChargeOrbActive711: Rebuild as clean design comparison: Fill/Border/Heading/Accent-top/Accent-bottom, Holliday all tiers, ItemBoxes (with help from vergir-bot LLM)

<templatestyles src="Template:HeroStreetBrawl/styles.css" />
Street Brawl layout design comparison — Holliday, all tiers, ItemBoxes @0.75.

= Fill =
{{#invoke:StreetBrawlItems|tiers|Holliday|style=card}}

= Border =
{{#invoke:StreetBrawlItems|tiers|Holliday|style=card|theme=sb-theme-border}}

= Heading =
{{#invoke:StreetBrawlItems|tiers|Holliday|style=card|theme=sb-theme-head}}

= Accent (top) =
{{#invoke:StreetBrawlItems|tiers|Holliday|style=card|theme=sb-theme-accent}}

= Accent (bottom) =
{{#invoke:StreetBrawlItems|tiers|Holliday|style=card|theme=sb-theme-accent-bottom}}

Template:HeroStreetBrawlItems/styles.css

2026-07-21T12:05:02Z

~2026-ChargeOrbActive711: Cards: space-evenly (distribute leftover, center); Accent moved to top border + add bottom-border variant (with help from vergir-bot LLM)

.sb-group {
margin-top: 1em;
}
.sb-group:first-child {
margin-top: 0.25em;
}

.sb-label {
font-weight: bold;
margin-bottom: 0.25em;
font-size: 1.1em;
}

.sb-cards {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
}

.sb-icons {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
align-items: center;
}

.sb-common {
margin-top: 0.75em;
}

.sb-common-head {
font-weight: bold;
cursor: pointer;
margin-bottom: 0.25em;
}

.sb-common-head::after {
content: " \25BE";
font-size: 0.8em;
opacity: 0.6;
}

.sb-common.mw-collapsed .sb-common-head::after {
content: " \25B8";
}

.sb-common-body {
line-height: 1.9;
}

/* Tier columns. Widths are set per case by sb-w-* classes from the module. */
.sb-tier {
display: flex;
gap: 8px;
align-items: stretch;
margin-top: 0.5em;
}

.sb-col {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
border-radius: 6px;
overflow: hidden;
}

.sb-col-head {
padding: 3px 8px;
font-weight: bold;
}

.sb-col-body {
flex: 1;
min-height: 120px;
padding: 6px 8px;
line-height: 1.8;
}

.sb-col-cards {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: flex-start;
align-content: flex-start;
justify-content: space-evenly;
}

/* Column width cases */
.sb-w-high {
flex: 0 0 35%;
}
.sb-w-fill {
flex: 1 1 0;
}
.sb-low-narrow,
.sb-low-wide {
flex: 0 0 auto;
}
/* Low beside High: one card wide, cards stacked vertically, packed to the top */
.sb-low-narrow .sb-col-cards {
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
}
/* Low without High: sized to fit all its cards on one line */
.sb-low-wide .sb-col-cards {
flex-wrap: nowrap;
justify-content: flex-start;
}

/* Per-chance colour + tints (drive every theme) */
.sb-col-high {
--chance: #4f8f36;
--tint: rgba(90, 150, 60, 0.12);
--tint-soft: rgba(90, 150, 60, 0.07);
}
.sb-col-normal {
--chance: #b28b28;
--tint: rgba(190, 150, 45, 0.12);
--tint-soft: rgba(190, 150, 45, 0.07);
}
.sb-col-low {
--chance: #9c3f37;
--tint: rgba(170, 65, 55, 0.12);
--tint-soft: rgba(170, 65, 55, 0.07);
}

/* Default theme "Fill": colored header bar + tinted body */
.sb-col {
background: var(--tint);
}
.sb-col-head {
background: var(--chance);
color: #fff;
}

/* Theme "Border": colored header bar + no body tint + colored border */
.sb-theme-border .sb-col {
background: transparent;
border: 1px solid var(--chance);
}

/* Theme "Heading": label sits OUTSIDE the box as a plain uncolored subheading; the box (border + soft tint) is the body */
.sb-theme-head .sb-col {
background: transparent;
overflow: visible;
}
.sb-theme-head .sb-col-head {
background: transparent;
color: inherit;
font-size: 1.05em;
padding: 0 0 3px 2px;
}
.sb-theme-head .sb-col-body {
background: var(--tint-soft);
border: 1px solid var(--chance);
border-radius: 6px;
}

/* Theme "Accent" (top): colored top border + soft tint + colored heading text */
.sb-theme-accent .sb-col {
background: var(--tint-soft);
border-top: 3px solid var(--chance);
border-radius: 6px;
}
.sb-theme-accent .sb-col-head {
background: transparent;
color: var(--chance);
}

/* Theme "Accent bottom": colored bottom border */
.sb-theme-accent-bottom .sb-col {
background: var(--tint-soft);
border-bottom: 3px solid var(--chance);
border-radius: 6px;
}
.sb-theme-accent-bottom .sb-col-head {
background: transparent;
color: var(--chance);
}

/* layout=grid: one wrapping grid; each card framed by a chance-colored outline */
.sb-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
margin-top: 0.5em;
}
.sb-chip {
display: inline-flex;
padding: 3px;
border: 2px solid var(--chance);
border-radius: 9px;
}
.sb-chip-high {
--chance: #4f8f36;
}
.sb-chip-normal {
--chance: #b28b28;
}
.sb-chip-low {
--chance: #9c3f37;
}

@media (max-width: 720px) {
.sb-tier {
flex-direction: column;
}
.sb-w-high,
.sb-low-narrow,
.sb-low-wide {
flex: 1 1 auto;
}
.sb-low-narrow .sb-col-cards,
.sb-low-wide .sb-col-cards {
flex-direction: row;
flex-wrap: wrap;
}
}

Module:StreetBrawlItems

2026-07-21T12:04:30Z

~2026-ChargeOrbActive711: Card size 0.75; extract tier logic; add p.tiers (all tiers for a hero) (with help from vergir-bot LLM)

local p = {}

local sb = mw.loadJsonData("Data:StreetBrawlData.json")["item-buckets"]
local items = mw.loadJsonData("Data:ItemData.json")
local heroes = mw.loadJsonData("Data:HeroData.json")

-- Slot display order: Weapon -> Vitality (Armor) -> Spirit (Tech)
local SLOT_RANK = { Weapon = 1, Armor = 2, Tech = 3 }
-- Default card scale passed to ItemBox (tier columns and counter cards).
local CARD_SIZE = "0.75"

local NAME_TO_KEY, KEY_TO_NAME, RELEASED = {}, {}, {}
for key, h in pairs(heroes) do
if type(h) == "table" and h.Name then
KEY_TO_NAME[key] = h.Name
NAME_TO_KEY[mw.ustring.lower(h.Name)] = key
if not h.InDevelopment and not h.IsDisabled then RELEASED[key] = true end
end
end

local function hero_key(input)
if not input then return nil end
input = mw.text.trim(input)
if input == "" then return nil end
if heroes[input] then return input end
return NAME_TO_KEY[mw.ustring.lower(input)]
end

local function iname(code) local it = items[code]; return it and it.Name or nil end
-- A "real" item: exists, has a display name, and is not disabled/removed.
local function iok(code)
local it = items[code]
return it ~= nil and it.Name ~= nil and it.IsDisabled ~= true
end
local function itier(code)
local it = items[code]; if not it then return nil end
if it.StreetBrawl == true then return 5 end
return it.Tier
end
local function islot(code) local it = items[code]; return it and it.Slot end
local function icost(code)
local it = items[code]; local c = it and it.Cost
return type(c) == "number" and c or math.huge
end

-- Sort order: slot (Weapon -> Armor -> Tech), then cost ascending, then name.
local function item_less(a, b)
local ra = SLOT_RANK[islot(a)] or 99
local rb = SLOT_RANK[islot(b)] or 99
if ra ~= rb then return ra < rb end
local ca, cb = icost(a), icost(b)
if ca ~= cb then return ca < cb end
return (iname(a) or a) < (iname(b) or b)
end

local function render_item(frame, code, style, size)
local name = iname(code); if not name then return nil end
if style == "icon" then return frame:expandTemplate{title = "ItemIcon", args = {name}} end
return frame:expandTemplate{title = "ItemBox", args = {name, showTierTag = "true", size = size or CARD_SIZE}}
end
local function render_hero(frame, key)
local name = KEY_TO_NAME[key]; if not name then return nil end
return frame:expandTemplate{title = "HeroIcon", args = {name}}
end

-- Lays rendered members out in a container with the given class (styled via CSS).
local function classdiv(parts, class)
if #parts == 0 then return "" end
return '<div class="' .. class .. '">' .. table.concat(parts) .. '</div>'
end

local function hero_sets(hkey)
local favored, unfavored, special, counter = {}, {}, {}, {}
for _, o in ipairs(sb.Outliers) do
if o.Hero == hkey then
if o.Bucket == "Good" then favored[o.Item] = true; special[o.Item] = true
elseif type(o.Weight) == "number" and o.Weight < 1 then unfavored[o.Item] = true; special[o.Item] = true end
if o.Counter ~= nil then counter[#counter + 1] = o.Item end
end
end
return favored, unfavored, special, counter
end

-- Returns sorted high (favored), normal (pool), low (unfavored) item-code lists for a tier.
local function collect(hkey, tier)
local favored, unfavored = hero_sets(hkey)
local high, normal, low = {}, {}, {}
for _, c in ipairs(sb.AvailableItems) do
if iok(c) and (tier == nil or itier(c) == tier) then
if favored[c] then high[#high + 1] = c
elseif unfavored[c] then low[#low + 1] = c
else normal[#normal + 1] = c end
end
end
table.sort(high, item_less)
table.sort(normal, item_less)
table.sort(low, item_less)
return high, normal, low
end

local function item_code(input)
input = mw.text.trim(input or "")
if input == "" then return nil end
if items[input] then return input end
for k, v in pairs(items) do
if type(v) == "table" and v.Name == input and v.IsDisabled ~= true then return k end
end
for k, v in pairs(items) do
if type(v) == "table" and v.Name == input then return k end
end
return nil
end

-- Builds one tier as conditional columns:
-- High chance (favored) 35% and Middle chance (pool) fill the rest.
-- Low chance (unfavored) is dropped when empty; a narrow one-card column on the right
-- when High is present; a fit-content column on the right when High is absent.
local function tier_columns(frame, hkey, tier, style, size, theme, hi, mid, lo)
local high, normal, low = collect(hkey, tier)
local body_class = (style == "card") and "sb-col-body sb-col-cards" or "sb-col-body"
local sep = (style == "card") and "" or "<br>"

local function col(codes, cls, head)
local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, style, size); if r then parts[#parts + 1] = r end end
return '<div class="sb-col ' .. cls .. '">'
.. '<div class="sb-col-head">' .. head .. '</div>'
.. '<div class="' .. body_class .. '">' .. table.concat(parts, sep) .. '</div>'
.. '</div>'
end

local cls = "sb-tier"
if theme ~= "" then cls = cls .. " " .. theme end

local out = {}
if #high > 0 then
out[#out + 1] = col(high, "sb-col-high sb-w-high", hi)
end
out[#out + 1] = col(normal, "sb-col-normal sb-w-fill", mid)
if #low > 0 then
local low_w = (#high > 0) and "sb-low-narrow" or "sb-low-wide"
out[#out + 1] = col(low, "sb-col-low " .. low_w, lo)
end
return '<div class="' .. cls .. '">' .. table.concat(out) .. '</div>'
end

-- {{#invoke:StreetBrawlItems|hero|HERO|GROUP|TIER|label=..|collapse=yes|style=card|icon}}
-- Legacy: superseded by p.tier, kept for reference.
function p.hero(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local group = mw.text.trim(frame.args[2] or "")
local tier = tonumber(frame.args[3])
local style = frame.args.style
if not style or style == "" then style = (group == "common") and "icon" or "card" end
local collapse = (frame.args.collapse == "yes" or frame.args.collapse == "true")
local label = frame.args.label or ""

local favored, unfavored, special = hero_sets(hkey)
local pred
if group == "favored" then pred = function(c) return favored[c] end
elseif group == "unfavored" then pred = function(c) return unfavored[c] end
elseif group == "common" then pred = function(c) return not special[c] end
else return "" end

local codes = {}
for _, c in ipairs(sb.AvailableItems) do
if iok(c) and (tier == nil or itier(c) == tier) and pred(c) then codes[#codes + 1] = c end
end
table.sort(codes, item_less)

local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, style); if r then parts[#parts + 1] = r end end
if #parts == 0 then return "" end

local row_class = (style == "icon") and "sb-icons" or "sb-cards"
local out = '<div class="sb-group">'
if label ~= "" then out = out .. '<div class="sb-label">' .. label .. '</div>' end
return out .. classdiv(parts, row_class) .. '</div>'
end

-- {{#invoke:StreetBrawlItems|tier|HERO|TIER|style=icon|card|size=..|theme=..|layout=grid|high=..|middle=..|low=..}}
function p.tier(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local tier = tonumber(frame.args[2])
local style = (frame.args.style == "card") and "card" or "icon"
local size = frame.args.size
local theme = frame.args.theme or ""
local hi = frame.args.high or "High chance"
local mid = frame.args.middle or "Middle chance"
local lo = frame.args.low or "Low chance"

if frame.args.layout == "grid" then
local high, normal, low = collect(hkey, tier)
local function chips(codes, chance)
local out = {}
for _, c in ipairs(codes) do
local r = render_item(frame, c, "card", size)
if r then out[#out + 1] = '<span class="sb-chip ' .. chance .. '">' .. r .. '</span>' end
end
return table.concat(out)
end
return '<div class="sb-grid">'
.. chips(high, "sb-chip-high")
.. chips(normal, "sb-chip-normal")
.. chips(low, "sb-chip-low")
.. '</div>'
end

return tier_columns(frame, hkey, tier, style, size, theme, hi, mid, lo)
end

-- {{#invoke:StreetBrawlItems|tiers|HERO|style=..|size=..|theme=..}} -> all five tiers stacked.
function p.tiers(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local style = (frame.args.style == "card") and "card" or "icon"
local size = frame.args.size
local theme = frame.args.theme or ""
local hi = frame.args.high or "High chance"
local mid = frame.args.middle or "Middle chance"
local lo = frame.args.low or "Low chance"

local labels = { "Tier 1", "Tier 2", "Tier 3", "Tier 4", "Legendary" }
local out = {}
for t = 1, 5 do
out[#out + 1] = "'''" .. labels[t] .. "'''\n" .. tier_columns(frame, hkey, t, style, size, theme, hi, mid, lo)
end
return table.concat(out, "\n\n")
end

-- {{#invoke:StreetBrawlItems|hero_counter|HERO|heading=..|note=..}}
function p.hero_counter(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local _, _, _, counter = hero_sets(hkey)

local codes = {}
for _, c in ipairs(counter) do if iok(c) then codes[#codes + 1] = c end end
if #codes == 0 then return "" end
table.sort(codes, item_less)

local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, "card"); if r then parts[#parts + 1] = r end end

local out = {}
local heading = frame.args.heading
if heading and heading ~= "" then out[#out + 1] = "=== " .. heading .. " ===" end
local note = frame.args.note
if note and note ~= "" then out[#out + 1] = "''" .. note .. "''" end
out[#out + 1] = classdiv(parts, "sb-cards")
return table.concat(out, "\n")
end

-- {{#invoke:StreetBrawlItems|item|ITEM|GROUP|label=..|note=..}}
function p.item(frame)
local code = item_code(frame.args[1]); if not code then return "" end
local group = mw.text.trim(frame.args[2] or "")

local fav, unf, ctr = {}, {}, {}
for _, o in ipairs(sb.Outliers) do
if o.Item == code and RELEASED[o.Hero] then
if o.Bucket == "Good" then fav[#fav + 1] = o.Hero
elseif type(o.Weight) == "number" and o.Weight < 1 then unf[#unf + 1] = o.Hero end
if o.Counter ~= nil then ctr[#ctr + 1] = o.Hero end
end
end
local list = (group == "favored" and fav) or (group == "unfavored" and unf) or (group == "counter" and ctr)
if not list then return "" end
table.sort(list, function(a, b) return (KEY_TO_NAME[a] or a) < (KEY_TO_NAME[b] or b) end)

local parts = {}
for _, k in ipairs(list) do local r = render_hero(frame, k); if r then parts[#parts + 1] = r end end
if #parts == 0 then return "" end

local pre = ""
local label = frame.args.label
if label and label ~= "" then pre = pre .. "'''" .. label .. "'''<br>" end
local note = frame.args.note
if note and note ~= "" then pre = pre .. "''" .. note .. "''<br>" end
return pre .. classdiv(parts, "sb-icons")
end

-- {{#invoke:StreetBrawlItems|item_in_pool|ITEM}} -> "1" if in the Street Brawl pool, else ""
function p.item_in_pool(frame)
local code = item_code(frame.args[1]); if not code then return "" end
for _, c in ipairs(sb.AvailableItems) do if c == code then return "1" end end
return ""
end

return p

User:Vergir

2026-07-21T11:46:14Z

~2026-ChargeOrbActive711: Temp layout check: case A (no Low) and case B (narrow Low) (with help from vergir-bot LLM)

= Abrams =
{{HeroStreetBrawl|Abrams}}

= Holliday =
{{HeroStreetBrawl|Holliday}}

= Doorman =
{{HeroStreetBrawl|The Doorman}}

= Vindicta =
{{HeroStreetBrawl|Vindicta}}

= McGinnis =
{{HeroStreetBrawl|McGinnis}}

<templatestyles src="Template:HeroStreetBrawl/styles.css" />
= Street Brawl tier layout bake-off (Holliday, Tier 1) =

== Fill (current) ==
'''Item list'''
{{#invoke:StreetBrawlItems|tier|Holliday|1}}
'''ItemBoxes (0.845, flush 4-per-row)'''
{{#invoke:StreetBrawlItems|tier|Holliday|1|style=card|size=0.875}}

== Border ==
'''Item list'''
{{#invoke:StreetBrawlItems|tier|Holliday|1|theme=sb-theme-border}}
'''ItemBoxes (0.845, flush 4-per-row)'''
{{#invoke:StreetBrawlItems|tier|Holliday|1|theme=sb-theme-border|style=card|size=0.875}}

== Heading ==
'''Item list'''
{{#invoke:StreetBrawlItems|tier|Holliday|1|theme=sb-theme-head}}
'''ItemBoxes (0.845, flush 4-per-row)'''
{{#invoke:StreetBrawlItems|tier|Holliday|1|theme=sb-theme-head|style=card|size=0.875}}

== Accent ==
'''Item list'''
{{#invoke:StreetBrawlItems|tier|Holliday|1|theme=sb-theme-accent}}
'''ItemBoxes (0.845, flush 4-per-row)'''
{{#invoke:StreetBrawlItems|tier|Holliday|1|theme=sb-theme-accent|style=card|size=0.875}}

<templatestyles src="Template:HeroStreetBrawl/styles.css" />
== Warden — one style per tier (ItemBoxes, 0.875) ==

=== Tier 1 — Fill ===
{{#invoke:StreetBrawlItems|tier|Warden|1|style=card|size=0.875}}

=== Tier 2 — Border ===
{{#invoke:StreetBrawlItems|tier|Warden|2|theme=sb-theme-border|style=card|size=0.875}}

=== Tier 3 — Heading ===
{{#invoke:StreetBrawlItems|tier|Warden|3|theme=sb-theme-head|style=card|size=0.875}}

=== Tier 4 — Accent ===
{{#invoke:StreetBrawlItems|tier|Warden|4|theme=sb-theme-accent|style=card|size=0.875}}

=== Legendary — Fill ===
{{#invoke:StreetBrawlItems|tier|Warden|5|style=card|size=0.875}}

<templatestyles src="Template:HeroStreetBrawl/styles.css" />
= Grid layout prototype (outline = chance) =
'''Outline colour:''' <span style="color:#4f8f36">■ green = High chance</span> · <span style="color:#b28b28">■ amber = Middle</span> · <span style="color:#9c3f37">■ red = Low</span>

== Holliday (grid) ==
=== Tier 1 ===
{{#invoke:StreetBrawlItems|tier|Holliday|1|layout=grid|size=0.875}}
=== Tier 2 ===
{{#invoke:StreetBrawlItems|tier|Holliday|2|layout=grid|size=0.875}}
=== Tier 3 ===
{{#invoke:StreetBrawlItems|tier|Holliday|3|layout=grid|size=0.875}}
=== Tier 4 ===
{{#invoke:StreetBrawlItems|tier|Holliday|4|layout=grid|size=0.875}}
=== Legendary ===
{{#invoke:StreetBrawlItems|tier|Holliday|5|layout=grid|size=0.875}}

== Warden — Tier 2, favored-heavy (grid) ==
{{#invoke:StreetBrawlItems|tier|Warden|2|layout=grid|size=0.875}}

<templatestyles src="Template:HeroStreetBrawl/styles.css" />
= Layout check =
== Abrams T1 (High + Middle, no Low) ==
{{#invoke:StreetBrawlItems|tier|Abrams|1|theme=sb-theme-head|style=card}}
== Holliday T1 (High + Middle + narrow Low) ==
{{#invoke:StreetBrawlItems|tier|Holliday|1|theme=sb-theme-head|style=card}}

Template:HeroStreetBrawlItems/styles.css

2026-07-21T11:45:33Z

~2026-ChargeOrbActive711: Conditional column widths: High 35%, Middle fills, narrow one-card Low / fit-content Low; drop fixed 25/50/25 (with help from vergir-bot LLM)

.sb-group {
margin-top: 1em;
}
.sb-group:first-child {
margin-top: 0.25em;
}

.sb-label {
font-weight: bold;
margin-bottom: 0.25em;
font-size: 1.1em;
}

.sb-cards {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
}

.sb-icons {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
align-items: center;
}

.sb-common {
margin-top: 0.75em;
}

.sb-common-head {
font-weight: bold;
cursor: pointer;
margin-bottom: 0.25em;
}

.sb-common-head::after {
content: " \25BE";
font-size: 0.8em;
opacity: 0.6;
}

.sb-common.mw-collapsed .sb-common-head::after {
content: " \25B8";
}

.sb-common-body {
line-height: 1.9;
}

/* Tier columns. Widths are set per case by sb-w-* classes from the module. */
.sb-tier {
display: flex;
gap: 8px;
align-items: stretch;
margin-top: 0.5em;
}

.sb-col {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
border-radius: 6px;
overflow: hidden;
}

.sb-col-head {
padding: 3px 8px;
font-weight: bold;
}

.sb-col-body {
flex: 1;
min-height: 120px;
padding: 6px 8px;
line-height: 1.8;
}

.sb-col-cards {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: flex-start;
align-content: flex-start;
}

/* Column width cases */
.sb-w-high {
flex: 0 0 35%;
}
.sb-w-fill {
flex: 1 1 0;
}
.sb-low-narrow,
.sb-low-wide {
flex: 0 0 auto;
}
/* Low beside High: one card wide, cards stacked vertically */
.sb-low-narrow .sb-col-cards {
flex-direction: column;
flex-wrap: nowrap;
}
/* Low without High: sized to fit all its cards on one line */
.sb-low-wide .sb-col-cards {
flex-wrap: nowrap;
}

/* Per-chance colour + tints (drive every theme) */
.sb-col-high {
--chance: #4f8f36;
--tint: rgba(90, 150, 60, 0.12);
--tint-soft: rgba(90, 150, 60, 0.07);
}
.sb-col-normal {
--chance: #b28b28;
--tint: rgba(190, 150, 45, 0.12);
--tint-soft: rgba(190, 150, 45, 0.07);
}
.sb-col-low {
--chance: #9c3f37;
--tint: rgba(170, 65, 55, 0.12);
--tint-soft: rgba(170, 65, 55, 0.07);
}

/* Default theme "Fill": colored header bar + tinted body */
.sb-col {
background: var(--tint);
}
.sb-col-head {
background: var(--chance);
color: #fff;
}

/* Theme "Border": colored header bar + no body tint + colored border */
.sb-theme-border .sb-col {
background: transparent;
border: 1px solid var(--chance);
}

/* Theme "Heading": label sits OUTSIDE the box as a plain uncolored subheading; the box (border + soft tint) is the body */
.sb-theme-head .sb-col {
background: transparent;
overflow: visible;
}
.sb-theme-head .sb-col-head {
background: transparent;
color: inherit;
font-size: 1.05em;
padding: 0 0 3px 2px;
}
.sb-theme-head .sb-col-body {
background: var(--tint-soft);
border: 1px solid var(--chance);
border-radius: 6px;
}

/* Theme "Accent": thick colored left stripe + soft tint + colored heading text */
.sb-theme-accent .sb-col {
background: var(--tint-soft);
border-left: 4px solid var(--chance);
border-radius: 0 6px 6px 0;
}
.sb-theme-accent .sb-col-head {
background: transparent;
color: var(--chance);
}

/* layout=grid: one wrapping grid; each card framed by a chance-colored outline */
.sb-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
margin-top: 0.5em;
}
.sb-chip {
display: inline-flex;
padding: 3px;
border: 2px solid var(--chance);
border-radius: 9px;
}
.sb-chip-high {
--chance: #4f8f36;
}
.sb-chip-normal {
--chance: #b28b28;
}
.sb-chip-low {
--chance: #9c3f37;
}

@media (max-width: 720px) {
.sb-tier {
flex-direction: column;
}
.sb-w-high,
.sb-low-narrow,
.sb-low-wide {
flex: 1 1 auto;
}
.sb-low-narrow .sb-col-cards,
.sb-low-wide .sb-col-cards {
flex-direction: row;
flex-wrap: wrap;
}
}

Module:StreetBrawlItems

2026-07-21T11:44:58Z

~2026-ChargeOrbActive711: p.tier columns: conditional widths (drop empty Low; 35/65; narrow one-card Low when High present, fit-content Low when High absent); card size 0.8 (with help from vergir-bot LLM)

local p = {}

local sb = mw.loadJsonData("Data:StreetBrawlData.json")["item-buckets"]
local items = mw.loadJsonData("Data:ItemData.json")
local heroes = mw.loadJsonData("Data:HeroData.json")

-- Slot display order: Weapon -> Vitality (Armor) -> Spirit (Tech)
local SLOT_RANK = { Weapon = 1, Armor = 2, Tech = 3 }
-- Default card scale passed to ItemBox (tier columns and counter cards).
local CARD_SIZE = "0.8"

local NAME_TO_KEY, KEY_TO_NAME, RELEASED = {}, {}, {}
for key, h in pairs(heroes) do
if type(h) == "table" and h.Name then
KEY_TO_NAME[key] = h.Name
NAME_TO_KEY[mw.ustring.lower(h.Name)] = key
if not h.InDevelopment and not h.IsDisabled then RELEASED[key] = true end
end
end

local function hero_key(input)
if not input then return nil end
input = mw.text.trim(input)
if input == "" then return nil end
if heroes[input] then return input end
return NAME_TO_KEY[mw.ustring.lower(input)]
end

local function iname(code) local it = items[code]; return it and it.Name or nil end
-- A "real" item: exists, has a display name, and is not disabled/removed.
local function iok(code)
local it = items[code]
return it ~= nil and it.Name ~= nil and it.IsDisabled ~= true
end
local function itier(code)
local it = items[code]; if not it then return nil end
if it.StreetBrawl == true then return 5 end
return it.Tier
end
local function islot(code) local it = items[code]; return it and it.Slot end
local function icost(code)
local it = items[code]; local c = it and it.Cost
return type(c) == "number" and c or math.huge
end

-- Sort order: slot (Weapon -> Armor -> Tech), then cost ascending, then name.
local function item_less(a, b)
local ra = SLOT_RANK[islot(a)] or 99
local rb = SLOT_RANK[islot(b)] or 99
if ra ~= rb then return ra < rb end
local ca, cb = icost(a), icost(b)
if ca ~= cb then return ca < cb end
return (iname(a) or a) < (iname(b) or b)
end

local function render_item(frame, code, style, size)
local name = iname(code); if not name then return nil end
if style == "icon" then return frame:expandTemplate{title = "ItemIcon", args = {name}} end
return frame:expandTemplate{title = "ItemBox", args = {name, showTierTag = "true", size = size or CARD_SIZE}}
end
local function render_hero(frame, key)
local name = KEY_TO_NAME[key]; if not name then return nil end
return frame:expandTemplate{title = "HeroIcon", args = {name}}
end

-- Lays rendered members out in a container with the given class (styled via CSS).
local function classdiv(parts, class)
if #parts == 0 then return "" end
return '<div class="' .. class .. '">' .. table.concat(parts) .. '</div>'
end

local function hero_sets(hkey)
local favored, unfavored, special, counter = {}, {}, {}, {}
for _, o in ipairs(sb.Outliers) do
if o.Hero == hkey then
if o.Bucket == "Good" then favored[o.Item] = true; special[o.Item] = true
elseif type(o.Weight) == "number" and o.Weight < 1 then unfavored[o.Item] = true; special[o.Item] = true end
if o.Counter ~= nil then counter[#counter + 1] = o.Item end
end
end
return favored, unfavored, special, counter
end

local function item_code(input)
input = mw.text.trim(input or "")
if input == "" then return nil end
if items[input] then return input end
for k, v in pairs(items) do
if type(v) == "table" and v.Name == input and v.IsDisabled ~= true then return k end
end
for k, v in pairs(items) do
if type(v) == "table" and v.Name == input then return k end
end
return nil
end

-- {{#invoke:StreetBrawlItems|hero|HERO|GROUP|TIER|label=..|collapse=yes|style=card|icon}}
-- GROUP = favored | unfavored | common (use hero_counter for counters)
-- Legacy: superseded by p.tier, kept for reference.
function p.hero(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local group = mw.text.trim(frame.args[2] or "")
local tier = tonumber(frame.args[3])
local style = frame.args.style
if not style or style == "" then style = (group == "common") and "icon" or "card" end
local collapse = (frame.args.collapse == "yes" or frame.args.collapse == "true")
local label = frame.args.label or ""

local favored, unfavored, special = hero_sets(hkey)
local pred
if group == "favored" then pred = function(c) return favored[c] end
elseif group == "unfavored" then pred = function(c) return unfavored[c] end
elseif group == "common" then pred = function(c) return not special[c] end
else return "" end

local codes = {}
for _, c in ipairs(sb.AvailableItems) do
if iok(c) and (tier == nil or itier(c) == tier) and pred(c) then codes[#codes + 1] = c end
end
table.sort(codes, item_less)

local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, style); if r then parts[#parts + 1] = r end end
if #parts == 0 then return "" end

if collapse then
local id = "sbcommon-" .. hkey .. "-" .. tostring(tier or 0)
local head = (label ~= "" and label) or "Common"
return '<div class="sb-common mw-collapsible mw-collapsed" id="mw-customcollapsible-' .. id .. '">'
.. '<div class="sb-common-head mw-customtoggle-' .. id .. '">' .. head .. '</div>'
.. '<div class="sb-common-body mw-collapsible-content">' .. table.concat(parts, " · ") .. '</div>'
.. '</div>'
end

local row_class = (style == "icon") and "sb-icons" or "sb-cards"
local out = '<div class="sb-group">'
if label ~= "" then out = out .. '<div class="sb-label">' .. label .. '</div>' end
return out .. classdiv(parts, row_class) .. '</div>'
end

-- {{#invoke:StreetBrawlItems|tier|HERO|TIER|style=icon|card|size=..|theme=..|layout=grid|high=..|middle=..|low=..}}
-- Default: conditional columns. High chance (favored) 35% and Middle chance (pool) fill
-- the rest. Low chance (unfavored) is dropped when empty; when present alongside High it
-- becomes a narrow one-card column on the right; when High is absent it sits on the right
-- sized to fit its cards on one line. layout=grid: one grid, cards outlined by chance.
function p.tier(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local tier = tonumber(frame.args[2])
local style = (frame.args.style == "card") and "card" or "icon"
local size = frame.args.size
local theme = frame.args.theme or ""
local favored, unfavored = hero_sets(hkey)

local high, normal, low = {}, {}, {}
for _, c in ipairs(sb.AvailableItems) do
if iok(c) and (tier == nil or itier(c) == tier) then
if favored[c] then high[#high + 1] = c
elseif unfavored[c] then low[#low + 1] = c
else normal[#normal + 1] = c end
end
end
table.sort(high, item_less)
table.sort(normal, item_less)
table.sort(low, item_less)

-- layout=grid: single wrapping grid, cards outlined by chance (High, then Middle, then Low).
if frame.args.layout == "grid" then
local function chips(codes, chance)
local out = {}
for _, c in ipairs(codes) do
local r = render_item(frame, c, "card", size)
if r then out[#out + 1] = '<span class="sb-chip ' .. chance .. '">' .. r .. '</span>' end
end
return table.concat(out)
end
return '<div class="sb-grid">'
.. chips(high, "sb-chip-high")
.. chips(normal, "sb-chip-normal")
.. chips(low, "sb-chip-low")
.. '</div>'
end

local body_class = (style == "card") and "sb-col-body sb-col-cards" or "sb-col-body"
local sep = (style == "card") and "" or "<br>"

local function col(codes, cls, head)
local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, style, size); if r then parts[#parts + 1] = r end end
return '<div class="sb-col ' .. cls .. '">'
.. '<div class="sb-col-head">' .. head .. '</div>'
.. '<div class="' .. body_class .. '">' .. table.concat(parts, sep) .. '</div>'
.. '</div>'
end

local hi = frame.args.high or "High chance"
local mid = frame.args.middle or "Middle chance"
local lo = frame.args.low or "Low chance"
local cls = "sb-tier"
if theme ~= "" then cls = cls .. " " .. theme end

-- Conditional columns per the presence of High and Low.
local out = {}
if #high > 0 then
out[#out + 1] = col(high, "sb-col-high sb-w-high", hi)
end
out[#out + 1] = col(normal, "sb-col-normal sb-w-fill", mid)
if #low > 0 then
local low_w = (#high > 0) and "sb-low-narrow" or "sb-low-wide"
out[#out + 1] = col(low, "sb-col-low " .. low_w, lo)
end
return '<div class="' .. cls .. '">' .. table.concat(out) .. '</div>'
end

-- {{#invoke:StreetBrawlItems|hero_counter|HERO|heading=..|note=..}}
-- Returns the whole counter block (heading + note + cards), or "" when empty.
function p.hero_counter(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local _, _, _, counter = hero_sets(hkey)

local codes = {}
for _, c in ipairs(counter) do if iok(c) then codes[#codes + 1] = c end end
if #codes == 0 then return "" end
table.sort(codes, item_less)

local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, "card"); if r then parts[#parts + 1] = r end end

local out = {}
local heading = frame.args.heading
if heading and heading ~= "" then out[#out + 1] = "=== " .. heading .. " ===" end
local note = frame.args.note
if note and note ~= "" then out[#out + 1] = "''" .. note .. "''" end
out[#out + 1] = classdiv(parts, "sb-cards")
return table.concat(out, "\n")
end

-- {{#invoke:StreetBrawlItems|item|ITEM|GROUP|label=..|note=..}}
-- GROUP = favored | unfavored | counter
function p.item(frame)
local code = item_code(frame.args[1]); if not code then return "" end
local group = mw.text.trim(frame.args[2] or "")

local fav, unf, ctr = {}, {}, {}
for _, o in ipairs(sb.Outliers) do
if o.Item == code and RELEASED[o.Hero] then
if o.Bucket == "Good" then fav[#fav + 1] = o.Hero
elseif type(o.Weight) == "number" and o.Weight < 1 then unf[#unf + 1] = o.Hero end
if o.Counter ~= nil then ctr[#ctr + 1] = o.Hero end
end
end
local list = (group == "favored" and fav) or (group == "unfavored" and unf) or (group == "counter" and ctr)
if not list then return "" end
table.sort(list, function(a, b) return (KEY_TO_NAME[a] or a) < (KEY_TO_NAME[b] or b) end)

local parts = {}
for _, k in ipairs(list) do local r = render_hero(frame, k); if r then parts[#parts + 1] = r end end
if #parts == 0 then return "" end

local pre = ""
local label = frame.args.label
if label and label ~= "" then pre = pre .. "'''" .. label .. "'''<br>" end
local note = frame.args.note
if note and note ~= "" then pre = pre .. "''" .. note .. "''<br>" end
return pre .. classdiv(parts, "sb-icons")
end

-- {{#invoke:StreetBrawlItems|item_in_pool|ITEM}} -> "1" if in the Street Brawl pool, else ""
function p.item_in_pool(frame)
local code = item_code(frame.args[1]); if not code then return "" end
for _, c in ipairs(sb.AvailableItems) do if c == code then return "1" end end
return ""
end

return p

User:Vergir

2026-07-21T09:53:16Z

~2026-ChargeOrbActive711: Add grid-layout prototype (chance-outlined cards) for review (with help from vergir-bot LLM)

Template:HeroStreetBrawlItems/styles.css

2026-07-21T09:52:50Z

~2026-ChargeOrbActive711: Add grid + chance-outlined chip styles for layout=grid (with help from vergir-bot LLM)

.sb-group {
margin-top: 1em;
}
.sb-group:first-child {
margin-top: 0.25em;
}

.sb-label {
font-weight: bold;
margin-bottom: 0.25em;
font-size: 1.1em;
}

.sb-cards {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
}

.sb-icons {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
align-items: center;
}

.sb-common {
margin-top: 0.75em;
}

.sb-common-head {
font-weight: bold;
cursor: pointer;
margin-bottom: 0.25em;
}

.sb-common-head::after {
content: " \25BE";
font-size: 0.8em;
opacity: 0.6;
}

.sb-common.mw-collapsed .sb-common-head::after {
content: " \25B8";
}

.sb-common-body {
line-height: 1.9;
}

/* Three-column tier layout: High 25% | Middle 50% | Low 25% */
.sb-tier {
display: flex;
gap: 8px;
align-items: stretch;
margin-top: 0.5em;
}

.sb-col {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
border-radius: 6px;
overflow: hidden;
}

.sb-col-head {
padding: 3px 8px;
font-weight: bold;
}

.sb-col-body {
flex: 1;
min-height: 120px;
padding: 6px 8px;
line-height: 1.8;
}

.sb-col-cards {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: flex-start;
align-content: flex-start;
}

/* Per-chance colour + tints (drive every theme). flex-grow sets the 25/50/25 width split. */
.sb-col-high {
flex-grow: 25;
--chance: #4f8f36;
--tint: rgba(90, 150, 60, 0.12);
--tint-soft: rgba(90, 150, 60, 0.07);
}
.sb-col-normal {
flex-grow: 50;
--chance: #b28b28;
--tint: rgba(190, 150, 45, 0.12);
--tint-soft: rgba(190, 150, 45, 0.07);
}
.sb-col-low {
flex-grow: 25;
--chance: #9c3f37;
--tint: rgba(170, 65, 55, 0.12);
--tint-soft: rgba(170, 65, 55, 0.07);
}

/* Default theme "Fill": colored header bar + tinted body */
.sb-col {
background: var(--tint);
}
.sb-col-head {
background: var(--chance);
color: #fff;
}

/* Theme "Border": colored header bar + no body tint + colored border */
.sb-theme-border .sb-col {
background: transparent;
border: 1px solid var(--chance);
}

/* Theme "Heading": label sits OUTSIDE the box as a plain uncolored subheading; the box (border + soft tint) is the body */
.sb-theme-head .sb-col {
background: transparent;
overflow: visible;
}
.sb-theme-head .sb-col-head {
background: transparent;
color: inherit;
font-size: 1.05em;
padding: 0 0 3px 2px;
}
.sb-theme-head .sb-col-body {
background: var(--tint-soft);
border: 1px solid var(--chance);
border-radius: 6px;
}

/* Theme "Accent": thick colored left stripe + soft tint + colored heading text */
.sb-theme-accent .sb-col {
background: var(--tint-soft);
border-left: 4px solid var(--chance);
border-radius: 0 6px 6px 0;
}
.sb-theme-accent .sb-col-head {
background: transparent;
color: var(--chance);
}

/* layout=grid: one wrapping grid; each card framed by a chance-colored outline */
.sb-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
margin-top: 0.5em;
}
.sb-chip {
display: inline-flex;
padding: 3px;
border: 2px solid var(--chance);
border-radius: 9px;
}
.sb-chip-high {
--chance: #4f8f36;
}
.sb-chip-normal {
--chance: #b28b28;
}
.sb-chip-low {
--chance: #9c3f37;
}

@media (max-width: 720px) {
.sb-tier {
flex-direction: column;
}
}

Module:StreetBrawlItems

2026-07-21T09:52:26Z

~2026-ChargeOrbActive711: p.tier: add layout=grid mode (one wrapping grid, cards outlined by chance) (with help from vergir-bot LLM)

local p = {}

local sb = mw.loadJsonData("Data:StreetBrawlData.json")["item-buckets"]
local items = mw.loadJsonData("Data:ItemData.json")
local heroes = mw.loadJsonData("Data:HeroData.json")

-- Slot display order: Weapon -> Vitality (Armor) -> Spirit (Tech)
local SLOT_RANK = { Weapon = 1, Armor = 2, Tech = 3 }
-- Default card scale passed to ItemBox (tier columns and counter cards).
local CARD_SIZE = "0.875"

local NAME_TO_KEY, KEY_TO_NAME, RELEASED = {}, {}, {}
for key, h in pairs(heroes) do
if type(h) == "table" and h.Name then
KEY_TO_NAME[key] = h.Name
NAME_TO_KEY[mw.ustring.lower(h.Name)] = key
if not h.InDevelopment and not h.IsDisabled then RELEASED[key] = true end
end
end

local function hero_key(input)
if not input then return nil end
input = mw.text.trim(input)
if input == "" then return nil end
if heroes[input] then return input end
return NAME_TO_KEY[mw.ustring.lower(input)]
end

local function iname(code) local it = items[code]; return it and it.Name or nil end
-- A "real" item: exists, has a display name, and is not disabled/removed.
local function iok(code)
local it = items[code]
return it ~= nil and it.Name ~= nil and it.IsDisabled ~= true
end
local function itier(code)
local it = items[code]; if not it then return nil end
if it.StreetBrawl == true then return 5 end
return it.Tier
end
local function islot(code) local it = items[code]; return it and it.Slot end
local function icost(code)
local it = items[code]; local c = it and it.Cost
return type(c) == "number" and c or math.huge
end

-- Sort order: slot (Weapon -> Armor -> Tech), then cost ascending, then name.
local function item_less(a, b)
local ra = SLOT_RANK[islot(a)] or 99
local rb = SLOT_RANK[islot(b)] or 99
if ra ~= rb then return ra < rb end
local ca, cb = icost(a), icost(b)
if ca ~= cb then return ca < cb end
return (iname(a) or a) < (iname(b) or b)
end

local function render_item(frame, code, style, size)
local name = iname(code); if not name then return nil end
if style == "icon" then return frame:expandTemplate{title = "ItemIcon", args = {name}} end
return frame:expandTemplate{title = "ItemBox", args = {name, showTierTag = "true", size = size or CARD_SIZE}}
end
local function render_hero(frame, key)
local name = KEY_TO_NAME[key]; if not name then return nil end
return frame:expandTemplate{title = "HeroIcon", args = {name}}
end

-- Lays rendered members out in a container with the given class (styled via CSS).
local function classdiv(parts, class)
if #parts == 0 then return "" end
return '<div class="' .. class .. '">' .. table.concat(parts) .. '</div>'
end

local function hero_sets(hkey)
local favored, unfavored, special, counter = {}, {}, {}, {}
for _, o in ipairs(sb.Outliers) do
if o.Hero == hkey then
if o.Bucket == "Good" then favored[o.Item] = true; special[o.Item] = true
elseif type(o.Weight) == "number" and o.Weight < 1 then unfavored[o.Item] = true; special[o.Item] = true end
if o.Counter ~= nil then counter[#counter + 1] = o.Item end
end
end
return favored, unfavored, special, counter
end

local function item_code(input)
input = mw.text.trim(input or "")
if input == "" then return nil end
if items[input] then return input end
for k, v in pairs(items) do
if type(v) == "table" and v.Name == input and v.IsDisabled ~= true then return k end
end
for k, v in pairs(items) do
if type(v) == "table" and v.Name == input then return k end
end
return nil
end

-- {{#invoke:StreetBrawlItems|hero|HERO|GROUP|TIER|label=..|collapse=yes|style=card|icon}}
-- GROUP = favored | unfavored | common (use hero_counter for counters)
-- Legacy: superseded by p.tier, kept for reference.
function p.hero(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local group = mw.text.trim(frame.args[2] or "")
local tier = tonumber(frame.args[3])
local style = frame.args.style
if not style or style == "" then style = (group == "common") and "icon" or "card" end
local collapse = (frame.args.collapse == "yes" or frame.args.collapse == "true")
local label = frame.args.label or ""

local favored, unfavored, special = hero_sets(hkey)
local pred
if group == "favored" then pred = function(c) return favored[c] end
elseif group == "unfavored" then pred = function(c) return unfavored[c] end
elseif group == "common" then pred = function(c) return not special[c] end
else return "" end

local codes = {}
for _, c in ipairs(sb.AvailableItems) do
if iok(c) and (tier == nil or itier(c) == tier) and pred(c) then codes[#codes + 1] = c end
end
table.sort(codes, item_less)

local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, style); if r then parts[#parts + 1] = r end end
if #parts == 0 then return "" end

if collapse then
local id = "sbcommon-" .. hkey .. "-" .. tostring(tier or 0)
local head = (label ~= "" and label) or "Common"
return '<div class="sb-common mw-collapsible mw-collapsed" id="mw-customcollapsible-' .. id .. '">'
.. '<div class="sb-common-head mw-customtoggle-' .. id .. '">' .. head .. '</div>'
.. '<div class="sb-common-body mw-collapsible-content">' .. table.concat(parts, " · ") .. '</div>'
.. '</div>'
end

local row_class = (style == "icon") and "sb-icons" or "sb-cards"
local out = '<div class="sb-group">'
if label ~= "" then out = out .. '<div class="sb-label">' .. label .. '</div>' end
return out .. classdiv(parts, row_class) .. '</div>'
end

-- {{#invoke:StreetBrawlItems|tier|HERO|TIER|style=icon|card|size=..|theme=..|layout=grid|high=..|middle=..|low=..}}
-- Default: three columns High chance (favored) | Middle chance (pool) | Low chance (unfavored).
-- layout=grid: one wrapping grid of the whole tier, each card outlined by its chance.
function p.tier(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local tier = tonumber(frame.args[2])
local style = (frame.args.style == "card") and "card" or "icon"
local size = frame.args.size
local theme = frame.args.theme or ""
local favored, unfavored = hero_sets(hkey)

local high, normal, low = {}, {}, {}
for _, c in ipairs(sb.AvailableItems) do
if iok(c) and (tier == nil or itier(c) == tier) then
if favored[c] then high[#high + 1] = c
elseif unfavored[c] then low[#low + 1] = c
else normal[#normal + 1] = c end
end
end
table.sort(high, item_less)
table.sort(normal, item_less)
table.sort(low, item_less)

-- layout=grid: single wrapping grid, cards outlined by chance (High, then Middle, then Low).
if frame.args.layout == "grid" then
local function chips(codes, chance)
local out = {}
for _, c in ipairs(codes) do
local r = render_item(frame, c, "card", size)
if r then out[#out + 1] = '<span class="sb-chip ' .. chance .. '">' .. r .. '</span>' end
end
return table.concat(out)
end
return '<div class="sb-grid">'
.. chips(high, "sb-chip-high")
.. chips(normal, "sb-chip-normal")
.. chips(low, "sb-chip-low")
.. '</div>'
end

local body_class = (style == "card") and "sb-col-body sb-col-cards" or "sb-col-body"
local sep = (style == "card") and "" or "<br>"

local function col(codes, cls, head)
local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, style, size); if r then parts[#parts + 1] = r end end
return '<div class="sb-col ' .. cls .. '">'
.. '<div class="sb-col-head">' .. head .. '</div>'
.. '<div class="' .. body_class .. '">' .. table.concat(parts, sep) .. '</div>'
.. '</div>'
end

local hi = frame.args.high or "High chance"
local mid = frame.args.middle or "Middle chance"
local lo = frame.args.low or "Low chance"
local cls = "sb-tier"
if theme ~= "" then cls = cls .. " " .. theme end
return '<div class="' .. cls .. '">'
.. col(high, "sb-col-high", hi)
.. col(normal, "sb-col-normal", mid)
.. col(low, "sb-col-low", lo)
.. '</div>'
end

-- {{#invoke:StreetBrawlItems|hero_counter|HERO|heading=..|note=..}}
-- Returns the whole counter block (heading + note + cards), or "" when empty.
function p.hero_counter(frame)
local hkey = hero_key(frame.args[1]); if not hkey then return "" end
local _, _, _, counter = hero_sets(hkey)

local codes = {}
for _, c in ipairs(counter) do if iok(c) then codes[#codes + 1] = c end end
if #codes == 0 then return "" end
table.sort(codes, item_less)

local parts = {}
for _, c in ipairs(codes) do local r = render_item(frame, c, "card"); if r then parts[#parts + 1] = r end end

local out = {}
local heading = frame.args.heading
if heading and heading ~= "" then out[#out + 1] = "=== " .. heading .. " ===" end
local note = frame.args.note
if note and note ~= "" then out[#out + 1] = "''" .. note .. "''" end
out[#out + 1] = classdiv(parts, "sb-cards")
return table.concat(out, "\n")
end

-- {{#invoke:StreetBrawlItems|item|ITEM|GROUP|label=..|note=..}}
-- GROUP = favored | unfavored | counter
function p.item(frame)
local code = item_code(frame.args[1]); if not code then return "" end
local group = mw.text.trim(frame.args[2] or "")

local fav, unf, ctr = {}, {}, {}
for _, o in ipairs(sb.Outliers) do
if o.Item == code and RELEASED[o.Hero] then
if o.Bucket == "Good" then fav[#fav + 1] = o.Hero
elseif type(o.Weight) == "number" and o.Weight < 1 then unf[#unf + 1] = o.Hero end
if o.Counter ~= nil then ctr[#ctr + 1] = o.Hero end
end
end
local list = (group == "favored" and fav) or (group == "unfavored" and unf) or (group == "counter" and ctr)
if not list then return "" end
table.sort(list, function(a, b) return (KEY_TO_NAME[a] or a) < (KEY_TO_NAME[b] or b) end)

local parts = {}
for _, k in ipairs(list) do local r = render_hero(frame, k); if r then parts[#parts + 1] = r end end
if #parts == 0 then return "" end

local pre = ""
local label = frame.args.label
if label and label ~= "" then pre = pre .. "'''" .. label .. "'''<br>" end
local note = frame.args.note
if note and note ~= "" then pre = pre .. "''" .. note .. "''<br>" end
return pre .. classdiv(parts, "sb-icons")
end

-- {{#invoke:StreetBrawlItems|item_in_pool|ITEM}} -> "1" if in the Street Brawl pool, else ""
function p.item_in_pool(frame)
local code = item_code(frame.args[1]); if not code then return "" end
for _, c in ipairs(sb.AvailableItems) do if c == code then return "1" end end
return ""
end

return p