fix: banana

src/App.tsx

@@ -15,11 +15,14 @@ import { Card } from './lib/Card';
 import { Deck, IDeck, IPossibleCard, IReadonlyPossibleCard } from './lib/Deck';
 import { IMutable } from './lib/Mutable';
 
-const cityCards = cities
-	.slice(0, 10)
-	.map((city) => Card.get({ name: city, type: 'City' }));
+const cityCards = Object.keys(cities).map((city) => Card.get({ name: city }));
 const shuffledCityCards = new Assortment(
-	new Map(cityCards.map((card) => [card, 2]))
+	new Map(
+		cityCards.map((card) => [
+			card,
+			cities[card.name as keyof typeof cities],
+		])
+	)
 );
 const infectionDeck = new Deck('Infection Deck');
 infectionDeck.insert(
@@ -63,6 +66,9 @@ function App() {
 	const [drawCount, setDrawCountRaw] = useState(1);
 	const [topDrawFormVisible, setTopDrawFormVisible] = useState(false);
 	const [bottomDrawFormVisible, setBottomDrawFormVisible] = useState(false);
+	const [editDeckFormVisible, setEditDeckFormVisible] = useState(false);
+
+	const [editDeckData, setEditDeckData] = useState<string>('');
 
 	const setDrawCount = useCallback<Dispatch<SetStateAction<number>>>(
 		(count) => {
@@ -91,15 +97,17 @@ function App() {
 				return cards;
 			}, new Set<Card>());
 
-		return [...allTheCards].map((card) => {
-			const probability = Deck.calculateDrawChance(
-				infectionDeck,
-				card,
-				drawCount
-			);
-
-			return { card, probability };
-		});
+		return [...allTheCards]
+			.map((card) => {
+				const probability = Deck.calculateDrawChance(
+					infectionDeck,
+					card,
+					drawCount
+				);
+
+				return { card, probability };
+			})
+			.sort((a, b) => b.probability - a.probability);
 	}, [infectionNonce, drawCount]);
 
 	const colors = useMemo(
@@ -242,6 +250,7 @@ function App() {
 							0
 						);
 						infecDec.remove(0, infecDec.cards.length);
+						infectionDeck.name = infecDec.name;
 
 						const discDec = Deck.fromJson(json.discardDeck);
 						discardDeck.remove(0, discardDeck.cards.length);
@@ -250,6 +259,7 @@ function App() {
 							0
 						);
 						discDec.remove(0, discDec.cards.length);
+						discardDeck.name = discDec.name;
 
 						setDrawCount(json.drawCount);
 					};
@@ -258,6 +268,20 @@ function App() {
 			>
 				Import
 			</button>
+			<button
+				onClick={() => {
+					const data = JSON.stringify(
+						infectionDeck.toJson(),
+						null,
+						2
+					);
+
+					setEditDeckData(data);
+					setEditDeckFormVisible(true);
+				}}
+			>
+				Edit Infction Deck
+			</button>
 
 			<ol>
 				{cardDrawProbabilities.map(({ card, probability }, index) => {
@@ -316,6 +340,38 @@ function App() {
 					<DeckView deck={discardDeck} />
 				</div>
 			</div>
+			<Popup visible={editDeckFormVisible}>
+				<form
+					onSubmit={(e) => {
+						e.preventDefault();
+						const json = Deck.fromJson(JSON.parse(editDeckData));
+						infectionDeck.remove(0, infectionDeck.cards.length);
+						infectionDeck.insert(
+							json.cards as unknown as IPossibleCard[],
+							0
+						);
+						infectionDeck.name = json.name;
+						setEditDeckFormVisible(false);
+					}}
+				>
+					<textarea
+						value={editDeckData}
+						style={{ width: '90vw', height: '80vh' }}
+						onChange={(e) => {
+							setEditDeckData(e.target.value);
+						}}
+					></textarea>
+					<button type="submit">Save</button>
+					<button
+						type="button"
+						onClick={() => {
+							setEditDeckFormVisible(false);
+						}}
+					>
+						Cancel
+					</button>
+				</form>
+			</Popup>
 			<Popup visible={topDrawFormVisible}>
 				<SelectCardForm
 					options={nextDrawOptions}
@@ -525,6 +581,8 @@ function Popup({
 			style={{
 				position: 'fixed',
 				inset: 0,
+				width: '100vw',
+				height: '100vh',
 				background: '#0008',
 				display: visible ? 'flex' : 'none',
 				justifyContent: 'center',

src/components/CardGrid.tsx

@@ -12,24 +12,8 @@ export function CardGrid({ cards }: { cards: Card[] }) {
 		>
 			{cards.map((card) => (
 				<CardBase key={card.name}>
-					{card.image && (
-						<img
-							style={{
-								position: 'absolute',
-								inset: 0,
-								width: '100%',
-								height: '100%',
-								zIndex: 0,
-								objectFit: 'cover',
-								filter: 'brightness(0.3)',
-							}}
-							src={card.image}
-							alt={card.name}
-						/>
-					)}
 					<div style={{ zIndex: 1, position: 'relative' }}>
 						<h3>{card.name}</h3>
-						<p>{card.type}</p>
 					</div>
 				</CardBase>
 			))}

src/components/layout/MainLayout.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+export function MainLayout({ children }: { children: ReactNode }) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				width: '100vw',
+				height: '100vh',
+				isolation: 'isolate',
+			}}
+		>
+			<header>This is a header</header>
+			<main style={{ flexGrow: 1 }}>{children}</main>
+			<footer>This is a footer</footer>
+		</div>
+	);
+}

src/data/cities.ts

@@ -1,50 +1,55 @@
-export const cities = [
-	'Algiers',
-	'Atlanta',
-	'Baghdad',
-	'Bangkok',
-	'Beijing',
-	'Bogota',
-	'Buenos Aires',
-	'Cairo',
-	'Chennai',
-	'Chicago',
-	'Delhi',
-	'Essen, Germany',
-	'Ho Chi Minh City',
-	'Hong Kong',
-	'Istanbul',
-	'Jakarta',
-	'Johannesburg',
-	'Karachi',
-	'Khartoum, Sudan',
-	'Kinshasa',
-	'Kolkata',
-	'Lagos, Nigeria',
-	'Lima',
-	'London',
-	'Los Angeles',
-	'Madrid',
-	'Manila',
-	'Mexico City',
-	'Miami',
-	'Milan',
-	'Montreal',
-	'Moscow',
-	'Mumbai',
-	'New York',
-	'Osaka',
-	'Paris',
-	'Riyadh',
-	'San Francisco',
-	'Santiago',
-	'Sao Paolo',
-	'Seoul',
-	'Shanghai',
-	'St. Petersburg',
-	'Sydney',
-	'Taipei',
-	'Tehran',
-	'Tokyo',
-	'Washington D.C.',
-];
+export const cities = {
+	'Buenos Aires': 2,
+	Cairo: 3,
+	Chicago: 2,
+	Denver: 2,
+	Frankfurt: 2,
+	Istanbul: 3,
+	Jacksonville: 3,
+	Lagos: 3,
+	Lima: 1,
+	London: 3,
+	'New York': 2,
+	Paris: 2,
+	'San Francisco': 2,
+	'Sao Paolo': 1,
+	Tripoli: 3,
+	Washington: 3,
+	//
+	// 'Algiers': 0,
+	// 'Atlanta': 0,
+	// 'Baghdad': 0,
+	// 'Bangkok': 0,
+	// 'Beijing': 0,
+	// 'Bogota': 0,
+	// 'Chennai': 0,
+	// 'Delhi': 0,
+	// 'Essen': 0,
+	// 'Ho Chi Minh City': 0,
+	// 'Hong Kong': 0,
+	// 'Jakarta': 0,
+	// 'Johannesburg': 0,
+	// 'Karachi': 0,
+	// 'Khartoum': 0,
+	// 'Kinshasa': 0,
+	// 'Kolkata': 0,
+	// 'Los Angeles': 0,
+	// 'Madrid': 0,
+	// 'Manila': 0,
+	// 'Mexico City': 0,
+	// 'Miami': 0,
+	// 'Milan': 0,
+	// 'Montreal': 0,
+	// 'Moscow': 0,
+	// 'Mumbai': 0,
+	// 'Osaka': 0,
+	// 'Riyadh': 0,
+	// 'Santiago': 0,
+	// 'Seoul': 0,
+	// 'Shanghai': 0,
+	// 'St. Petersburg': 0,
+	// 'Sydney': 0,
+	// 'Taipei': 0,
+	// 'Tehran': 0,
+	// 'Tokyo': 0,
+};

src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { MainLayout } from './components/layout/MainLayout';
 import './index.css';
 import reportWebVitals from './reportWebVitals';
 
@@ -13,7 +14,9 @@ console.log(process.env.FOOBAR);
 
 root.render(
 	<React.StrictMode>
-		<App />
+		<MainLayout>
+			<App />
+		</MainLayout>
 	</React.StrictMode>
 );
 

src/lib/Card.ts

@@ -1,53 +1,28 @@
 import fuzzy from 'fuzzy';
-import { cities } from '../data/cities';
 
 /**
  * An idempotent Card object. Care shouild be taken not to duplicate cards.
  */
 export class Card implements Card {
 	static #cardBag: Card[] = [];
 
-	static get({
-		name,
-		type,
-	}: {
-		name: string;
-		type: 'City' | 'Epidemic' | 'Other';
-	}): Card {
-		const existingCard = this.#cardBag.find(
-			(card) => card.name === name && card.type === type
-		);
+	static get({ name }: { name: string }): Card {
+		const existingCard = this.#cardBag.find((card) => card.name === name);
 
 		if (existingCard) {
 			return existingCard;
 		}
 
-		const card = new Card(name, type);
+		const card = new Card(name);
 		this.#cardBag.push(card);
 		return card;
 	}
 
-	readonly image?: string;
-
-	private constructor(
-		readonly name: string,
-		readonly type: 'City' | 'Epidemic' | 'Other'
-	) {
-		switch (type) {
-			case 'City':
-				if (cities.includes(name)) {
-					this.image = `/images/cities/${name}.png`;
-				}
-				break;
-			case 'Epidemic':
-				this.image = '/images/epidemic.png';
-				break;
-		}
-	}
+	private constructor(readonly name: string) {}
 
 	static select(
-		cards: readonly Card[],
-		filter: Readonly<{ name: string; fuzzy?: boolean } | { type: string }>
+		cards: Card[],
+		filter: Readonly<{ name: string; fuzzy?: boolean }>
 	): Card[] {
 		if ('name' in filter) {
 			if (filter.fuzzy) {
@@ -58,8 +33,7 @@ export class Card implements Card {
 					.map((result) => result.original);
 			}
 			return cards.filter((card) => card.name === filter.name);
-		} else {
-			return cards.filter((card) => card.type === filter.type);
 		}
+		return cards;
 	}
 }