Switch to checkboxes

TODO

@@ -5,9 +5,8 @@ advanced player search https://old.reddit.com/r/BasketballGM/comments/1d0xctc/vi
 - more concise URLs - convert object to array for filters
 - columns
   - user picks one of the stat table types, or ratings table
-    - switch from select to checkboxes, so you can select none?
-    - implement similar to player graphs
-    - make sure it works in URL on ctrl+r
+    - implement bios
+    - make sure game highs work
 - form UI
   - select custom filters
     - categories
@@ -982,6 +981,12 @@ customizable columns https://discord.com/channels/@me/914986660020748321
 - define "standard" columns available in some context (like "career total" or "individual season")
 - deal with instability in the current column selection system - like if # of columns changes (sometimes due to season change), selection gets lost
 - start gradually porting over some views
+- new ideas
+  - global category/key column definition, link to header and how to retrieve from player object
+  - this would simplify logic for when i return a list of ratings/stats to show as columns, or more complex stuff like getExtraStatTypeKeys
+  - handle special formatting (like +/-)
+  - handle supercols
+  - who defines the columns fetched? UI or worker? don't want to over fetch...
 
 dropbox integration - save league to cloud
 - add way to view leagues saved in dropbox account and select one from that list

src/ui/views/AdvancedPlayerSearch.tsx

@@ -415,22 +415,29 @@ const ShowStatTypes = ({
 
 	return (
 		<>
-			<select
-				className="form-select"
-				multiple
-				onChange={event => {
-					const newShowStatTypes = Array.from(event.target.selectedOptions).map(
-						o => o.value,
-					);
-					setShowStatTypes(newShowStatTypes);
-				}}
-				size={allStatTypes.length}
-				value={showStatTypes}
-			>
-				{allStatTypes.map(x => {
-					return <OptionDropdown key={x.key} value={x} />;
-				})}
-			</select>
+			{allStatTypes.map(x => {
+				const id = `AdvancedPlayerSearchStatType-${x.key}`;
+				return (
+					<div className="form-check" key={x.key}>
+						<input
+							className="form-check-input"
+							type="checkbox"
+							checked={showStatTypes.includes(x.key as string)}
+							id={id}
+							onChange={event => {
+								if (event.target.checked) {
+									setShowStatTypes([...showStatTypes, x.key as string]);
+								} else {
+									setShowStatTypes(showStatTypes.filter(y => y !== x.key));
+								}
+							}}
+						/>
+						<label className="form-check-label" htmlFor={id}>
+							{Array.isArray(x.value) ? x.value.at(-1)!.text : x.value}
+						</label>
+					</div>
+				);
+			})}
 		</>
 	);
 };