Teams: left-align sprites, add home sprites option

teams.pokemonshowdown.com/src/teams-view.tsx

@@ -17,6 +17,16 @@ const MODES: Record<string, { width: number, colGap: string }> = {
 	'3col': { width: 33, colGap: '2rem' },
 };
 
+const SPRITE_OPTS = [
+	{title: 'Gen 1', val: 1},
+	{title: 'Gen 2', val: 2},
+	{title: 'Gen 3', val: 3},
+	{title: 'Gen 4', val: 4},
+	{title: 'Gen 5', val: 5},
+	{title: 'Gen 6', val: 6},
+	{val: 'home', title: 'Home'},
+];
+
 interface Team {
 	team: string;
 	title: string;
@@ -188,7 +198,7 @@ function PokemonSet({ set }: { set: Dex.PokemonSet }) {
 }
 
 class SetBlock extends preact.Component<{
-	set: Dex.PokemonSet, gen: number, mode?: string | null,
+	set: Dex.PokemonSet, gen: number | string, mode?: string | null,
 }> {
 	render() {
 		const set = this.props.set;
@@ -196,42 +206,75 @@ class SetBlock extends preact.Component<{
 		const spriteData = Dex.getSpriteData(
 			Dex.species.get(set.species),
 			true,
-			{ gen, shiny: set.shiny, gender: set.gender as 'F' }
+			// home unsupported by this, hack it a bit
+			{ gen: gen as number, shiny: set.shiny, gender: set.gender as 'F' }
 		);
-		let forceResize = 110;
+		let forceResize = 100;
 		if (matchMedia("(max-width: 450px)").matches && this.props.mode === '2col') {
-			forceResize = 55;
+			forceResize /= 2;
 		}
 		if (spriteData.w > forceResize) {
 			const w = spriteData.w;
 			spriteData.w *= (forceResize / w);
 			spriteData.h *= (forceResize / w);
 		}
-		return <div>
-			<div style={{ flex: '0 0 20%', width: 'auto', pad: '3px' }}>
-				<img
-					src={spriteData.url}
-					width={spriteData.w}
-					height={spriteData.h}
-				/>
-				{set.item ? <PSIcon item={set.item} /> : <></>}
+		if (gen === 'home') {
+			spriteData.url = spriteData.url.replace(/gen\d/, 'home');
+		}
+		return (
+			<div style={{ display: "flex", alignItems: "center" }}>
+				<div
+					style={{
+						flex: "0 0 20%",
+						display: "flex",
+						justifyContent: "flex-start",
+						alignItems: "center",
+						alignSelf: "flex-start",
+						padding: "5px",
+					}}
+				>
+					<div>
+						<img
+							src={spriteData.url}
+							width={spriteData.w}
+							height={spriteData.h}
+							alt=""
+						/>
+						{set.item && <PSIcon item={set.item} />}
+					</div>
+				</div>
+
+				<div
+					style={{
+						flex: "0 0 60%",
+						minWidth: 0,
+						textAlign: "left",
+						padding: "5px",
+						overflowWrap: "anywhere",
+    					wordBreak: "break-word",
+					}}
+				>
+					<PokemonSet set={set} />
+				</div>
 			</div>
-			<div style={{ flex: "0 0 80%", textAlign: 'left' }}>
-				<PokemonSet set={set} />
-			</div>
-		</div>;
+		);
 	}
 }
 
 export class TeamViewer extends preact.Component<PageProps> {
 	id: string;
 	pw?: string;
+	static getSpriteGen() {
+		const val = localStorage.getItem('spritegen') || 6;
+		if (val === 'home') return val;
+		return Number(val) || 6;
+	}
 	override state = {
 		team: undefined as null | void | Team,
 		error: undefined as string | undefined,
 		copyButtonUsed: undefined as number | undefined,
 		displayMode: localStorage.getItem('teamdisplaymode') || null,
-		spriteGen: Number(localStorage.getItem('spritegen')) || 6,
+		spriteGen: TeamViewer.getSpriteGen(),
 		manageOpen: false,
 		changesMade: false,
 		teamEdits: null as { format?: string, private?: number } | null,
@@ -298,7 +341,7 @@ export class TeamViewer extends preact.Component<PageProps> {
 						value={this.state.spriteGen}
 						class="button"
 					>
-						{[1, 2, 3, 4, 5, 6].map(num => <option value={num}>Gen {num} Sprites</option>)}
+						{SPRITE_OPTS.map(({val, title}) => <option value={val}>{title} Sprites</option>)}
 					</select>
 				</div>
 				<hr />