From 2907601f44aeaa33b8a76732bc2b5f61124cb92f Mon Sep 17 00:00:00 2001 From: Guangcong Luo Date: Wed, 24 Jun 2026 06:40:12 +0000 Subject: [PATCH] Non-compact teambuilder This is an experimental branch of the Preact client for making a non-compact version of the teambuilder. I'm backing out of this because people mostly still wanted something that resembled the old teambuilder even more than this. --- .../src/battle-team-editor.tsx | 36 +++-- .../src/panel-teambuilder-team.tsx | 5 +- play.pokemonshowdown.com/style/battle-log.css | 12 +- play.pokemonshowdown.com/style/battle.css | 2 +- play.pokemonshowdown.com/style/client2.css | 3 + .../style/teambuilder.css | 130 ++++++++++++++++-- 6 files changed, 162 insertions(+), 26 deletions(-) diff --git a/play.pokemonshowdown.com/src/battle-team-editor.tsx b/play.pokemonshowdown.com/src/battle-team-editor.tsx index 6f7e220bc..c949a0e01 100644 --- a/play.pokemonshowdown.com/src/battle-team-editor.tsx +++ b/play.pokemonshowdown.com/src/battle-team-editor.tsx @@ -27,6 +27,12 @@ type SampleSets = { }; type SampleSetsTable = { dex?: SampleSets, stats?: SampleSets }; +function TypeIcon({ type, tera }: { type: string, tera?: boolean }) { + return {type}; +} + export class TeamEditorState extends PSModel { static clipboard: { teams: { @@ -913,8 +919,9 @@ export class TeamEditorState extends PSModel { export class TeamEditor extends preact.Component<{ team: Team, narrow?: boolean, onChange?: () => void, readOnly?: boolean, - children?: preact.ComponentChildren, resources?: preact.ComponentChildren, + tiny?: boolean, children?: preact.ComponentChildren, resources?: preact.ComponentChildren, }> { + static compactMetrics = true; wizard = true; editor!: TeamEditorState; setTab = (ev: Event) => { @@ -923,6 +930,11 @@ export class TeamEditor extends preact.Component<{ this.wizard = wizard; this.forceUpdate(); }; + changeCompactMetrics = (ev: Event) => { + TeamEditor.compactMetrics = (ev.currentTarget as HTMLInputElement).checked; + this.forceUpdate(); + window.PS?.update(); + }; static probablyMobile() { return document.body.offsetWidth < 500; } @@ -982,6 +994,8 @@ export class TeamEditor extends preact.Component<{ if (this.props.team.format !== editor.format) { editor.setFormat(this.props.team.format); } + const tiny = this.props.tiny ?? !!this.base?.closest('.tiny-layout'); + const compactMetrics = TeamEditor.compactMetrics && !tiny; return
{TeamEditorState.renderClipboard(this.cancelClipboard)} + {this.wizard && !tiny && !editor.innerFocus &&

+ +

} {this.wizard ? ( - + ) : ( )} @@ -1827,7 +1847,7 @@ class TeamTextbox extends preact.Component<{ } class TeamWizard extends preact.Component<{ - editor: TeamEditorState, onChange?: () => void, onUpdate: () => void, + editor: TeamEditorState, onChange?: () => void, onUpdate: () => void, compact: boolean, }> { setSearchBox: string | null = null; windowing = true; @@ -1993,7 +2013,7 @@ class TeamWizard extends preact.Component<{
@@ -2334,7 +2354,7 @@ class TeamWizard extends preact.Component<{ const cur = (i: number) => setIndex === i ? ' cur' : ''; const sampleSets = type === 'ability' ? editor.getSampleSets(set!) : []; const userSets = type === 'ability' ? editor.getUserSets(set!) : null; - return
+ return

  • : null; - return
    + return
    {editor.sets.map((set, i) => [ pasteControls(i), this.renderSet(set, i), diff --git a/play.pokemonshowdown.com/src/panel-teambuilder-team.tsx b/play.pokemonshowdown.com/src/panel-teambuilder-team.tsx index c64db5183..51e379b61 100644 --- a/play.pokemonshowdown.com/src/panel-teambuilder-team.tsx +++ b/play.pokemonshowdown.com/src/panel-teambuilder-team.tsx @@ -264,7 +264,8 @@ class TeamPanel extends PSRoomPanel { /> {!!(team.packedTeam && team.format.length > 4) &&

    @@ -379,7 +380,7 @@ class ViewTeamPanel extends PSRoomPanel {

    Format: {teamData.format}

    Views: {teamData.views}

    {team.key &&

    Edit

    } - +
    ; } } diff --git a/play.pokemonshowdown.com/style/battle-log.css b/play.pokemonshowdown.com/style/battle-log.css index f419ec99b..fc8815db2 100644 --- a/play.pokemonshowdown.com/style/battle-log.css +++ b/play.pokemonshowdown.com/style/battle-log.css @@ -209,6 +209,16 @@ select.button { text-shadow: none; box-shadow: 0 1px 2px rgba(0,0,0,.1); } +.dark .button.disabled, +.dark .button.disabled:hover, +.dark .button.disabled:active, +.dark .button:disabled, +.dark .button:disabled:hover, +.dark .button:disabled:active, +.dark .button.cur, +.dark .button.cur:hover { + text-shadow: none; +} .button.cur, .button.cur:hover, .button.cur:disabled, @@ -240,7 +250,7 @@ select.button { background: linear-gradient(to bottom, #393d46, #2b2c31); box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45), inset 0.5px 1px 1px rgba(255, 255, 255, 0.5); border-color: #34373b; - text-shadow: none; + text-shadow: 0px 1px 0 black; color: #F9F9F9; } .dark .button:hover { diff --git a/play.pokemonshowdown.com/style/battle.css b/play.pokemonshowdown.com/style/battle.css index 95c36b19a..f203944c5 100644 --- a/play.pokemonshowdown.com/style/battle.css +++ b/play.pokemonshowdown.com/style/battle.css @@ -5,7 +5,7 @@ License: GPLv2 */ -@import url(./battle-log.css?v12); +@import url(./battle-log.css?v13); .battle { position: absolute; diff --git a/play.pokemonshowdown.com/style/client2.css b/play.pokemonshowdown.com/style/client2.css index e3f9c8905..f9264c283 100644 --- a/play.pokemonshowdown.com/style/client2.css +++ b/play.pokemonshowdown.com/style/client2.css @@ -219,6 +219,9 @@ li::marker { display: inline-block; line-height: 12px; } +.dark .mini-header i.text, .dark .tablist i.text { + border-color: #999; +} .tablist .roomtab-battle i.text { display: block; border: 0; diff --git a/play.pokemonshowdown.com/style/teambuilder.css b/play.pokemonshowdown.com/style/teambuilder.css index aa3327975..0f790d9cb 100644 --- a/play.pokemonshowdown.com/style/teambuilder.css +++ b/play.pokemonshowdown.com/style/teambuilder.css @@ -539,6 +539,7 @@ you can't delete it by pressing Backspace */ .set-button { position: relative; max-width: 660px; + margin: 8px 0; } .set-button.cur { opacity: 0.5; @@ -563,7 +564,7 @@ you can't delete it by pressing Backspace */ margin: 0; width: 100%; text-align: left; - height: 100px; + height: 121px; white-space: nowrap; overflow: hidden; padding: 3px; @@ -574,6 +575,11 @@ you can't delete it by pressing Backspace */ } .set-button .label { color: #2f4f6e; + margin-bottom: 3px; +} +.set-button .set-nickname .label, +.set-button .set-pokemon .label { + margin-bottom: 1px; } .dark .set-button .label { color: #a1b0be; @@ -581,26 +587,31 @@ you can't delete it by pressing Backspace */ .set-button .set-nickname { position: absolute; - height: 32px; + height: 35px; width: 120px; - top: 5px; + top: 2px; left: -5px; padding: 0 3px; } .tiny-layout .set-button .set-nickname { width: 90px; } +.compact .set-button .set-nickname, +.tiny-layout .set-button .set-nickname { + top: 5px; + height: 32px; +} .set-button .sprite { display: block; width: 100%; - height: 97px; + height: 119px; } .set-button .sprite-inner { display: block; - padding: 68px 0 0 2px; + padding: 88px 0 0 2px; margin-left: 1px; - height: 29px; + height: 31px; border-bottom-left-radius: 3px; background: linear-gradient(to bottom, transparent 0%, transparent 70%, #d3d3d3 100%); } @@ -615,7 +626,8 @@ you can't delete it by pressing Backspace */ } .set-button .detailcell { float: left; - height: 50px; + padding: 4px 0; + height: 55px; } .dark .set-button .button-first.cur, .dark .set-button .button-middle.cur, @@ -624,7 +636,7 @@ you can't delete it by pressing Backspace */ } .set-button .detailcell + .detailcell { border-left: 1px solid #888; - margin-left: 20px; + margin-left: 7px; padding-left: 3px; } .tiny-layout .set-button .detailcell + .detailcell { @@ -634,26 +646,112 @@ you can't delete it by pressing Backspace */ padding: 0; } .set-button .set-ability .button, .set-button .set-item .button { - height: 40px; + height: 48px; } .set-item .itemicon { float: right; } -.set-button .set-moves .button { - line-height: 18px; +.set-button .set-moves .button div { + line-height: 22px; } -.set-button .set-moves .button.overfull { +.set-button .set-moves .button.overfull div { line-height: normal; } .set-button .set-details .button { - height: 61px; + height: 74px; } .set-button .set-stats, .set-button .set-stats .button { width: 138px; } .set-button .set-stats .button { + padding: 10px 3px 3px; +} +.set-button .set-stats .statrow { + height: 18px; +} +.set-button .set-stats .statrow label { + height: 9px; + line-height: 12px; +} +.set-button .set-stats .statgraph { + height: 9px; +} +.set-button .set-stats .statgraph span { + margin-top: 1px; + height: 8px; +} +.set-button .set-stats .statrow em { + height: 9px; +} +.compact .set-button, +.tiny-layout .set-button, +.team-focus-editor .set-button { + margin: 0; +} +.compact .set-button .label, +.tiny-layout .set-button .label { + margin-bottom: 0; +} +.compact .set-button td .button, +.tiny-layout .set-button td .button { + height: 100px; +} +.compact .set-button .sprite, +.tiny-layout .set-button .sprite { + height: 97px; +} +.compact .set-button .sprite-inner, +.tiny-layout .set-button .sprite-inner { + padding-top: 68px; + height: 29px; +} +.compact .set-button .detailcell, +.tiny-layout .set-button .detailcell { + padding-top: 0; + padding-bottom: 0; + height: 50px; +} +.compact .set-button .set-ability .button, .compact .set-button .set-item .button, +.tiny-layout .set-button .set-ability .button, .tiny-layout .set-button .set-item .button { + height: 40px; +} +.compact .set-button .set-moves .button:not(.overfull) div, +.tiny-layout .set-button .set-moves .button:not(.overfull) div { + line-height: 18px; +} +.compact .set-button .set-details .button, +.tiny-layout .set-button .set-details .button { + height: 61px; +} +.compact .set-button .set-stats .button, +.tiny-layout .set-button .set-stats .button { padding: 3px; } +.compact .set-button .set-stats .statrow, +.tiny-layout .set-button .set-stats .statrow { + height: 15px; +} +.compact .set-button .set-stats .statrow label, +.tiny-layout .set-button .set-stats .statrow label { + height: 5px; +} +.compact .set-button .set-stats .statgraph, +.tiny-layout .set-button .set-stats .statgraph { + height: 5px; +} +.compact .set-button .set-stats .statgraph span, +.tiny-layout .set-button .set-stats .statgraph span { + margin-top: 3px; + height: 6px; +} +.compact .set-button .set-stats .statrow em, +.tiny-layout .set-button .set-stats .statrow em { + height: 5px; +} +.compact .set-button .set-stats .statrow small, +.tiny-layout .set-button .set-stats .statrow small { + line-height: normal; +} .tiny-layout .set-button .set-stats, .tiny-layout .set-button .set-stats .button { width: 40px; } @@ -725,7 +823,7 @@ you can't delete it by pressing Backspace */ } .wizardsearchresults { position: absolute; - top: 230px; + top: 242px; left: 0; right: 0; bottom: 0; @@ -733,6 +831,10 @@ you can't delete it by pressing Backspace */ -webkit-overflow-scrolling: touch; overscroll-behavior-block: contain; } +.compact .wizardsearchresults, +.tiny-layout .wizardsearchresults { + top: 230px; +} .wizardsearchresults .dexlist, .searchresults .dexlist { min-width: 624px; }