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.

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 <strong
+		class={`typeicon typeicon-${type}${tera ? ' tera' : ''}`}
+	>{type}</strong>;
+}
+
 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 <div class="teameditor">
 			<ul class="tabbar">
@@ -993,8 +1007,14 @@ export class TeamEditor extends preact.Component<{
 				</button></li>
 			</ul>
 			{TeamEditorState.renderClipboard(this.cancelClipboard)}
+			{this.wizard && !tiny && !editor.innerFocus && <p>
+				<label class="checkbox inline"><input
+					type="checkbox" name="compactMetrics" checked={TeamEditor.compactMetrics}
+					onChange={this.changeCompactMetrics}
+				/> Compact</label>
+			</p>}
 			{this.wizard ? (
-				<TeamWizard editor={editor} onChange={this.props.onChange} onUpdate={this.update} />
+				<TeamWizard editor={editor} onChange={this.props.onChange} onUpdate={this.update} compact={compactMetrics} />
 			) : (
 				<TeamTextbox editor={editor} onChange={this.props.onChange} onUpdate={this.update} />
 			)}
@@ -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<{
 						<button class={`button button-middle${cur('details')}`} onClick={this.setFocus} value={`details|${i}`}>
 							<span class="detailcell">
 								<strong class="label">Types</strong> {}
-								{species.types.map(type => <div><PSIcon type={type} /></div>)}
+								{species.types.map(type => <div><TypeIcon type={type} /></div>)}
 							</span>
 							<span class="detailcell">
 								<strong class="label">Level</strong> {}
@@ -2013,11 +2033,11 @@ class TeamWizard extends preact.Component<{
 							</span>}
 							{editor.gen === 9 && !editor.isChampions && <span class="detailcell">
 								<strong class="label">Tera</strong> {}
-								<PSIcon type={set.teraType || species.requiredTeraType || species.types[0]} />
+								<TypeIcon type={set.teraType || species.requiredTeraType || species.types[0]} tera />
 							</span>}
 							{editor.hpTypeMatters(set) && <span class="detailcell">
 								<strong class="label">H.P.</strong> {}
-								<PSIcon type={editor.getHPType(set)} />
+								<TypeIcon type={editor.getHPType(set)} />
 							</span>}
 						</button>
 					</div></td>
@@ -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 <div class="team-focus-editor">
+		return <div class={`team-focus-editor${this.props.compact ? ' compact' : ''}`}>
 			<ul class="tabbar">
 				<li class="home-li"><button class="button" onClick={this.setFocus}>
 					<i class="fa fa-chevron-left" aria-hidden></i> Back
@@ -2434,7 +2454,7 @@ class TeamWizard extends preact.Component<{
 				<i class="fa fa-undo" aria-hidden></i> Undo delete
 			</button>
 		</p> : null;
-		return <div class="teameditor">
+		return <div class={`teameditor${this.props.compact ? ' compact' : ''}`}>
 			{editor.sets.map((set, i) => [
 				pasteControls(i),
 				this.renderSet(set, i),

play.pokemonshowdown.com/src/panel-teambuilder-team.tsx

@@ -264,7 +264,8 @@ class TeamPanel extends PSRoomPanel<TeamRoom> {
 				/>
 			</label>
 			<TeamEditor
-				team={team} onChange={this.save} readOnly={!!team.teamid && !team.uploadedPackedTeam} resources={this.renderResources()}
+				team={team} onChange={this.save} readOnly={!!team.teamid && !team.uploadedPackedTeam}
+				tiny={room.width < 620} resources={this.renderResources()}
 			>
 				{!!(team.packedTeam && team.format.length > 4) && <p>
 					<button data-cmd="/validate" class="button"><i class="fa fa-check"></i> Validate</button>
@@ -379,7 +380,7 @@ class ViewTeamPanel extends PSRoomPanel {
 			<p>Format: <strong>{teamData.format}</strong></p>
 			<p>Views: <strong>{teamData.views}</strong></p>
 			{team.key && <p><a class="button" href={`team-${team.key}`}>Edit</a></p>}
-			<TeamEditor team={team} readOnly></TeamEditor>
+			<TeamEditor team={team} readOnly tiny={room.width < 620}></TeamEditor>
 		</div></PSPanelWrapper>;
 	}
 }

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 {

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;

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;

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;
 }