feat: add artwork for Witnesses (#46)

* feat: add camelCase values to Witness enum

* fix: change artwork to look for camelCase.png

* feat: add first set of witness artwork

* fix: another set of artwork

* fix: rename atlas artwork

* fix: remove places artwork

* feat: update witness artwork

* feat: batch 1 of new witnesses

* feat: batch 2 of new witnesses

* feat: batch 3 of new witnesses

* feat: batch 4 of new witnesses

* feat: batch 5 of new witnesses

* feat: batch 6 of new witnesses

* feat: update witness artwork batch 1

* feat: update witness artwork batch 2

* feat: update witness artwork batch 3

* feat: update witness artwork batch 4

* fix: artwork path breaks with tildes

src/i18n/en/atlases/iceland.ts

@@ -1,5 +1,5 @@
 export const iceland = {
-	city: 'Reykjavík',
+	city: 'Reykjavik',
 	descriptions: {
 		0: 'Reykjavík, the capital of Iceland, is known for its colorful buildings and beautiful harbors.',
 		1: 'With a population of over 120,000, Reykjavík is the largest city in Iceland, containing nearly a third of the country’s population.',

src/i18n/en/index.ts

@@ -314,64 +314,64 @@ const en = {
 		},
 		witnesses: {
 			// Airport
-			0: 'Baggage clerk',
-			1: 'Flight attendant',
-			2: 'Pilot',
+			baggageClerk: 'Baggage clerk',
+			flightAttendant: 'Flight attendant',
+			pilot: 'Pilot',
 
 			// Bank
-			3: 'Bank guard',
-			4: 'Teller',
-			5: 'Vice president',
+			bankGuard: 'Bank guard',
+			teller: 'Teller',
+			vicePresident: 'Vice president',
 
 			// Foreign ministry
-			6: 'Ambassador',
-			7: 'Attache',
-			8: 'Under secretary',
+			ambassador: 'Ambassador',
+			attache: 'Attache',
+			underSecretary: 'Under secretary',
 
 			// Harbor
-			9: 'Customs officer',
-			10: 'Harbor master',
-			11: 'Sailor',
+			customsOfficer: 'Customs officer',
+			harborMaster: 'Harbor master',
+			sailor: 'Sailor',
 
 			// Hotel
-			12: 'Bellhop',
-			13: 'House detective',
-			14: 'Hotel manager',
+			bellhop: 'Bellhop',
+			houseDetective: 'House detective',
+			hotelManager: 'Hotel manager',
 
 			// Library
-			15: 'Archivist',
-			16: 'Circulation clerk',
-			17: 'Reference librarian',
+			archivist: 'Archivist',
+			circulationClerk: 'Circulation clerk',
+			referenceLibrarian: 'Reference librarian',
 
 			// Marketplace
-			18: 'Hawker',
-			19: 'Street merchant',
-			20: 'Urchin',
+			hawker: 'Hawker',
+			streetMerchant: 'Street merchant',
+			urchin: 'Urchin',
 
 			// Museum
-			21: 'Curator',
-			22: 'Docent',
-			23: 'Museum guard',
+			curator: 'Curator',
+			docent: 'Docent',
+			museumGuard: 'Museum guard',
 
 			// Palace
-			24: 'Palace guard',
-			25: 'Privy councillor',
-			26: 'Soldier',
+			palaceGuard: 'Palace guard',
+			privyCouncillor: 'Privy councillor',
+			soldier: 'Soldier',
 
 			// Riverfront
-			27: "Sailor's parrot",
-			28: 'Stevedore',
-			29: 'Tugboat captain',
+			sailorsParrot: "Sailor's parrot",
+			stevedore: 'Stevedore',
+			tugboatCaptain: 'Tugboat captain',
 
 			// Sport Club
-			30: 'Bartender',
-			31: 'Tennis pro',
-			32: 'Waiter',
+			bartender: 'Bartender',
+			tennisPro: 'Tennis pro',
+			waiter: 'Waiter',
 
 			// Stock Exchange
-			33: 'Analyst',
-			34: 'Messenger',
-			35: 'Trader'
+			analyst: 'Analyst',
+			messenger: 'Messenger',
+			trader: 'Trader'
 		}
 	},
 	player: {

src/i18n/es/index.ts

@@ -316,64 +316,64 @@ const es = {
 		},
 		witnesses: {
 			// Aeropuerto
-			0: 'Empleado de equipaje',
-			1: 'Azafata',
-			2: 'Piloto',
+			baggageClerk: 'Empleado de equipaje',
+			flightAttendant: 'Azafata',
+			pilot: 'Piloto',
 
 			// Banco
-			3: 'Guardia de banco',
-			4: 'Cajero',
-			5: 'Vicepresidente',
+			bankGuard: 'Guardia de banco',
+			teller: 'Cajero',
+			vicePresident: 'Vicepresidente',
 
 			// Ministerio de Relaciones Exteriores
-			6: 'Embajador',
-			7: 'Agregado',
-			8: 'Subsecretario',
+			ambassador: 'Embajador',
+			attache: 'Agregado',
+			underSecretary: 'Subsecretario',
 
 			// Puerto
-			9: 'Oficial de aduanas',
-			10: 'Capitán de puerto',
-			11: 'Marinero',
+			customsOfficer: 'Oficial de aduanas',
+			harborMaster: 'Capitán de puerto',
+			sailor: 'Marinero',
 
 			// Hotel
-			12: 'Botones',
-			13: 'Detective del hotel',
-			14: 'Gerente del hotel',
+			bellhop: 'Botones',
+			houseDetective: 'Detective del hotel',
+			hotelManager: 'Gerente del hotel',
 
 			// Biblioteca
-			15: 'Archivero',
-			16: 'Cajero de circulación',
-			17: 'Bibliotecario de referencia',
+			archivist: 'Archivero',
+			circulationClerk: 'Cajero de circulación',
+			referenceLibrarian: 'Bibliotecario de referencia',
 
 			// Mercado
-			18: 'Vendedor ambulante',
-			19: 'Comerciante callejero',
-			20: 'Pillo',
+			hawker: 'Vendedor ambulante',
+			streetMerchant: 'Comerciante callejero',
+			urchin: 'Pillo',
 
 			// Museo
-			21: 'Curador',
-			22: 'Guía',
-			23: 'Guardia de museo',
+			curator: 'Curador',
+			docent: 'Guía',
+			museumGuard: 'Guardia de museo',
 
 			// Palacio
-			24: 'Guardia de palacio',
-			25: 'Consejero privado',
-			26: 'Soldado',
+			palaceGuard: 'Guardia de palacio',
+			privyCouncillor: 'Consejero privado',
+			soldier: 'Soldado',
 
 			// Malecón
-			27: 'Loro del marinero',
-			28: 'Estibador',
-			29: 'Capitán de remolcador',
+			sailorsParrot: 'Loro del marinero',
+			stevedore: 'Estibador',
+			tugboatCaptain: 'Capitán de remolcador',
 
 			// Club deportivo
-			30: 'Barman',
-			31: 'Profesional de tenis',
-			32: 'Camarero',
+			bartender: 'Barman',
+			tennisPro: 'Profesional de tenis',
+			waiter: 'Camarero',
 
 			// Bolsa de valores
-			33: 'Analista',
-			34: 'Mensajero',
-			35: 'Operador'
+			analyst: 'Analista',
+			messenger: 'Mensajero',
+			trader: 'Operador'
 		}
 	},
 	player: {

src/lib/game.ts

@@ -28,69 +28,69 @@ enum Place {
 
 enum Witness {
 	// Airport
-	BAGGAGE_CLERK,
-	FLIGHT_ATTENDANT,
-	PILOT,
+	BAGGAGE_CLERK = 'baggageClerk',
+	FLIGHT_ATTENDANT = 'flightAttendant',
+	PILOT = 'pilot',
 
 	// Bank
-	BANK_GUARD,
-	TELLER,
-	VICE_PRESIDENT,
+	BANK_GUARD = 'bankGuard',
+	TELLER = 'teller',
+	VICE_PRESIDENT = 'vicePresident',
 
 	// Foreign Ministry
-	AMBASSADOR,
-	ATTACHE,
-	UNDER_SECRETARY,
+	AMBASSADOR = 'ambassador',
+	ATTACHE = 'attache',
+	UNDER_SECRETARY = 'underSecretary',
 
 	// Harbor
-	CUSTOMS_OFFICER,
-	HARBOR_MASTER,
-	SAILOR,
+	CUSTOMS_OFFICER = 'customsOfficer',
+	HARBOR_MASTER = 'harborMaster',
+	SAILOR = 'sailor',
 
 	// Hotel
-	BELLHOP,
-	HOUSE_DETECTIVE,
-	HOTEL_MANAGER,
+	BELLHOP = 'bellhop',
+	HOUSE_DETECTIVE = 'houseDetective',
+	HOTEL_MANAGER = 'hotelManager',
 
 	// Library
-	ARCHIVIST,
-	CIRCULATION_CLERK,
-	REFERENCE_LIBRARIAN,
+	ARCHIVIST = 'archivist',
+	CIRCULATION_CLERK = 'circulationClerk',
+	REFERENCE_LIBRARIAN = 'referenceLibrarian',
 
 	// Marketplace
-	HAWKER,
-	STREET_MERCHANT,
-	URCHIN,
+	HAWKER = 'hawker',
+	STREET_MERCHANT = 'streetMerchant',
+	URCHIN = 'urchin',
 
 	// Museum
-	CURATOR,
-	DOCENT,
-	MUSEUM_GUARD,
+	CURATOR = 'curator',
+	DOCENT = 'docent',
+	MUSEUM_GUARD = 'museumGuard',
 
 	// Palace
-	PALACE_GUARD,
-	PRIVY_COUNCILLOR,
-	SOLDIER,
+	PALACE_GUARD = 'palaceGuard',
+	PRIVY_COUNCILLOR = 'privyCouncillor',
+	SOLDIER = 'soldier',
 
 	// Riverfront
-	SAILORS_PARROT,
-	STEVEDORE,
-	TUGBOAT_CAPTAIN,
+	SAILORS_PARROT = 'sailorsParrot',
+	STEVEDORE = 'stevedore',
+	TUGBOAT_CAPTAIN = 'tugboatCaptain',
 
 	// Sport Club
-	BARTENDER,
-	TENNIS_PRO,
-	WAITER,
+	BARTENDER = 'bartender',
+	TENNIS_PRO = 'tennisPro',
+	WAITER = 'waiter',
 
 	// Stock Exchange
-	ANALYST,
-	MESSENGER,
-	TRADER
+	ANALYST = 'analyst',
+	MESSENGER = 'messenger',
+	TRADER = 'trader'
 }
 
 interface Scene {
 	place: LocalizedPlace;
-	witness: string;
+	witness: LocalizedWitness;
 	clue: string;
 	suspectClue?: string;
 }
@@ -156,12 +156,12 @@ export function generateGame(LL: TranslationFunctions): Game {
 interface LocalizedPlace {
 	place: Place;
 	name: string;
-	artwork: string;
 }
 
 interface LocalizedWitness {
 	witness: Witness;
 	name: string;
+	artwork: string;
 }
 
 function generateRounds(LL: TranslationFunctions, suspect: LocalizedSuspect): Round[] {
@@ -286,8 +286,8 @@ function generateScenes(params: ScenesParams): Scene[] {
 		scenes.push({
 			clue,
 			suspectClue,
-			place: place,
-			witness: witness.name
+			place,
+			witness
 		});
 	}
 
@@ -474,10 +474,7 @@ function getLocalizedPlaces(LL: TranslationFunctions): LocalizedPlace[] {
 
 		places.push({
 			place: parseInt(placeKey),
-			name: LL.scenes.places[translationKey](),
-
-			// HACK: We are using the English name of the `place` to get the artwork.
-			artwork: getArtworkPath(en.scenes.places[translationKey], 'places')
+			name: LL.scenes.places[translationKey]()
 		});
 	}
 
@@ -534,17 +531,15 @@ function getLocalizedWitnesses(LL: TranslationFunctions, place: Place): Localize
 
 	if (possibleWitnesses.length === 0) throw new Error('No witnesses found for this place.');
 
-	const witnessKeys = Object.keys(LL.scenes.witnesses);
 	const witnessesInPlace: LocalizedWitness[] = [];
 
-	for (const witnessKey of witnessKeys) {
-		const translationKey = witnessKey as keyof Translation['scenes']['witnesses'];
-		const witnessIndex = witnessKey as keyof typeof Witness;
-		const witness = Witness[witnessIndex];
-
-		if (possibleWitnesses.map((key) => Witness[key]).includes(witness.toString())) {
-			witnessesInPlace.push({ witness, name: LL.scenes.witnesses[translationKey]() });
-		}
+	for (const possibleWitness of possibleWitnesses) {
+		const witnessKey = possibleWitness as keyof Translation['scenes']['witnesses'];
+		witnessesInPlace.push({
+			witness: possibleWitness,
+			name: LL.scenes.witnesses[witnessKey](),
+			artwork: getArtworkPath(witnessKey, 'witnesses')
+		});
 	}
 
 	return getRandomValue(witnessesInPlace);

src/lib/helpers.ts

@@ -8,8 +8,13 @@ export function redirectTo(url: string) {
 	if (browser) window.location.href = url;
 }
 
-export function getArtworkPath(name: string, folder: 'atlas' | 'places'): string {
-	return `/artwork/${folder}/${name.replace(' ', '-').replace(' ', '-').toLowerCase()}.png`;
+export function getArtworkPath(name: string, folder: 'atlas' | 'witnesses'): string {
+	const normalized = name.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, (match, index) => {
+		if (+match === 0) return ''; // or if (/\s+/.test(match)) for white spaces
+		return index === 0 ? match.toLowerCase() : match.toUpperCase();
+	});
+
+	return `/artwork/${folder}/${normalized}.png`;
 }
 
 export function delay(ms: number): Promise<void> {