Pokémon Type-Pair Tier List Browser

/** @jsxImportSource https://esm.sh/react **/ import React from "https://esm.sh/react"; import { hydrateRoot } from "https://esm.sh/react-dom/client"; import { renderToString } from "https://esm.sh/react-dom/server"; interface TypePair { id: number; type_pair: string; types: string[]; rank: number; tier: string; timestamp: string; timestamp_seconds: number; } interface ComboboxProps { options: string[]; value: string; onChange: (value: string) => void; placeholder: string; } const typePairData: { type_pairs: TypePair[] } = { "type_pairs": [ { "id": 1, "type_pair": "normal-ghost", "types": ["ghost", "normal"], "rank": 2, "tier": "S", "timestamp": "31:28", "timestamp_seconds": 1888, }, { "id": 2, "type_pair": "water-fairy", "types": ["fairy", "water"], "rank": 4, "tier": "S", "timestamp": "31:09", "timestamp_seconds": 1869, }, { "id": 3, "type_pair": "flying-ground", "types": ["flying", "ground"], "rank": 5, "tier": "S", "timestamp": "31:02", "timestamp_seconds": 1862, }, { "id": 4, "type_pair": "water-ground", "types": ["ground", "water"], "rank": 6, "tier": "S", "timestamp": "30:52", "timestamp_seconds": 1852, }, { "id": 5, "type_pair": "poison-dark", "types": ["dark", "poison"], "rank": 7, "tier": "S", "timestamp": "30:43", "timestamp_seconds": 1843, }, { "id": 6, "type_pair": "bug-steel", "types": ["bug", "steel"], "rank": 8, "tier": "S", "timestamp": "30:35", "timestamp_seconds": 1835, }, { "id": 7, "type_pair": "fairy-steel", "types": ["fairy", "steel"], "rank": 1, "tier": "S", "timestamp": "31:38", "timestamp_seconds": 1898, }, { "id": 8, "type_pair": "fairy-ground", "types": ["fairy", "ground"], "rank": 3, "tier": "S", "timestamp": "31:19", "timestamp_seconds": 1879, }, { "id": 9, "type_pair": "ice-ground", "types": ["ground", "ice"], "rank": 9, "tier": "A", "timestamp": "30:20", "timestamp_seconds": 1820, }, { "id": 10, "type_pair": "steel-ground", "types": ["ground", "steel"], "rank": 10, "tier": "A", "timestamp": "30:11", "timestamp_seconds": 1811, }, { "id": 11, "type_pair": "steel-ghost", "types": ["ghost", "steel"], "rank": 11, "tier": "A", "timestamp": "29:59", "timestamp_seconds": 1799, }, { "id": 12, "type_pair": "dragon-water", "types": ["dragon", "water"], "rank": 12, "tier": "A", "timestamp": "29:49", "timestamp_seconds": 1789, }, { "id": 13, "type_pair": "fire-dark", "types": ["dark", "fire"], "rank": 13, "tier": "A", "timestamp": "29:45", "timestamp_seconds": 1785, }, { "id": 14, "type_pair": "fire-fairy", "types": ["fairy", "fire"], "rank": 14, "tier": "A", "timestamp": "29:37", "timestamp_seconds": 1777, }, { "id": 15, "type_pair": "electric-fairy", "types": ["electric", "fairy"], "rank": 15, "tier": "A", "timestamp": "29:22", "timestamp_seconds": 1762, }, { "id": 16, "type_pair": "steel-fighting", "types": ["fighting", "steel"], "rank": 16, "tier": "A", "timestamp": "29:13", "timestamp_seconds": 1753, }, { "id": 17, "type_pair": "steel-dragon", "types": ["dragon", "steel"], "rank": 17, "tier": "A", "timestamp": "29:04", "timestamp_seconds": 1744, }, { "id": 18, "type_pair": "ghost-water", "types": ["ghost", "water"], "rank": 18, "tier": "A", "timestamp": "28:52", "timestamp_seconds": 1732, }, { "id": 19, "type_pair": "ghost-fighting", "types": ["fighting", "ghost"], "rank": 19, "tier": "A", "timestamp": "28:39", "timestamp_seconds": 1719, }, { "id": 20, "type_pair": "electric-fighting", "types": ["electric", "fighting"], "rank": 20, "tier": "A", "timestamp": "28:30", "timestamp_seconds": 1710, }, { "id": 21, "type_pair": "electric-flying", "types": ["electric", "flying"], "rank": 21, "tier": "A", "timestamp": "28:16", "timestamp_seconds": 1696, }, { "id": 22, "type_pair": "water-dark", "types": ["dark", "water"], "rank": 22, "tier": "A", "timestamp": "28:00", "timestamp_seconds": 1680, }, { "id": 23, "type_pair": "steel-water", "types": ["steel", "water"], "rank": 23, "tier": "A", "timestamp": "27:54", "timestamp_seconds": 1674, }, { "id": 24, "type_pair": "water-fighting", "types": ["fighting", "water"], "rank": 24, "tier": "A", "timestamp": "27:42", "timestamp_seconds": 1662, }, { "id": 25, "type_pair": "fire-psychic", "types": ["fire", "psychic"], "rank": 25, "tier": "A", "timestamp": "27:32", "timestamp_seconds": 1652, }, { "id": 26, "type_pair": "steel-psychic", "types": ["psychic", "steel"], "rank": 26, "tier": "A", "timestamp": "27:22", "timestamp_seconds": 1642, }, { "id": 27, "type_pair": "steel-flying", "types": ["flying", "steel"], "rank": 27, "tier": "A", "timestamp": "27:08", "timestamp_seconds": 1628, }, { "id": 28, "type_pair": "water-psychic", "types": ["psychic", "water"], "rank": 28, "tier": "A", "timestamp": "27:00", "timestamp_seconds": 1620, }, { "id": 29, "type_pair": "steel-fire", "types": ["fire", "steel"], "rank": 29, "tier": "A", "timestamp": "26:50", "timestamp_seconds": 1610, }, { "id": 30, "type_pair": "fairy-fighting", "types": ["fairy", "fighting"], "rank": 30, "tier": "A", "timestamp": "26:40", "timestamp_seconds": 1600, }, { "id": 31, "type_pair": "electric-steel", "types": ["electric", "steel"], "rank": 31, "tier": "A", "timestamp": "26:31", "timestamp_seconds": 1591, }, { "id": 32, "type_pair": "steel-grass", "types": ["grass", "steel"], "rank": 32, "tier": "A", "timestamp": "26:20", "timestamp_seconds": 1580, }, { "id": 33, "type_pair": "fairy-dark", "types": ["dark", "fairy"], "rank": 33, "tier": "A", "timestamp": "26:08", "timestamp_seconds": 1568, }, { "id": 34, "type_pair": "water-normal", "types": ["normal", "water"], "rank": 34, "tier": "A", "timestamp": "25:58", "timestamp_seconds": 1558, }, { "id": 35, "type_pair": "poison-water", "types": ["poison", "water"], "rank": 35, "tier": "B", "timestamp": "25:37", "timestamp_seconds": 1537, }, { "id": 36, "type_pair": "water-bug", "types": ["bug", "water"], "rank": 36, "tier": "B", "timestamp": "25:26", "timestamp_seconds": 1526, }, { "id": 37, "type_pair": "ghost-fire", "types": ["fire", "ghost"], "rank": 37, "tier": "B", "timestamp": "25:10", "timestamp_seconds": 1510, }, { "id": 38, "type_pair": "ghost-electric", "types": ["electric", "ghost"], "rank": 38, "tier": "B", "timestamp": "24:56", "timestamp_seconds": 1496, }, { "id": 39, "type_pair": "dragon-fire", "types": ["dragon", "fire"], "rank": 39, "tier": "B", "timestamp": "24:42", "timestamp_seconds": 1482, }, { "id": 40, "type_pair": "bug-electric", "types": ["bug", "electric"], "rank": 40, "tier": "B", "timestamp": "24:33", "timestamp_seconds": 1473, }, { "id": 41, "type_pair": "fighting-flying", "types": ["fighting", "flying"], "rank": 41, "tier": "B", "timestamp": "24:21", "timestamp_seconds": 1461, }, { "id": 42, "type_pair": "ghost-ground", "types": ["ghost", "ground"], "rank": 42, "tier": "B", "timestamp": "24:11", "timestamp_seconds": 1451, }, { "id": 43, "type_pair": "water-flying", "types": ["flying", "water"], "rank": 43, "tier": "B", "timestamp": "23:58", "timestamp_seconds": 1438, }, { "id": 44, "type_pair": "electric-psychic", "types": ["electric", "psychic"], "rank": 44, "tier": "B", "timestamp": "23:49", "timestamp_seconds": 1429, }, { "id": 45, "type_pair": "ghost-dragon", "types": ["dragon", "ghost"], "rank": 45, "tier": "B", "timestamp": "23:36", "timestamp_seconds": 1416, }, { "id": 46, "type_pair": "electric-dark", "types": ["dark", "electric"], "rank": 46, "tier": "B", "timestamp": "23:24", "timestamp_seconds": 1404, }, { "id": 47, "type_pair": "fire-ground", "types": ["fire", "ground"], "rank": 47, "tier": "B", "timestamp": "23:08", "timestamp_seconds": 1388, }, { "id": 48, "type_pair": "ghost-fairy", "types": ["fairy", "ghost"], "rank": 48, "tier": "B", "timestamp": "22:58", "timestamp_seconds": 1378, }, { "id": 49, "type_pair": "fire-fighting", "types": ["fighting", "fire"], "rank": 49, "tier": "B", "timestamp": "22:48", "timestamp_seconds": 1368, }, { "id": 50, "type_pair": "steel-dark", "types": ["dark", "steel"], "rank": 50, "tier": "B", "timestamp": "22:37", "timestamp_seconds": 1357, }, { "id": 51, "type_pair": "steel-poison", "types": ["poison", "steel"], "rank": 51, "tier": "B", "timestamp": "22:27", "timestamp_seconds": 1347, }, { "id": 52, "type_pair": "electric-normal", "types": ["electric", "normal"], "rank": 52, "tier": "B", "timestamp": "22:16", "timestamp_seconds": 1336, }, { "id": 53, "type_pair": "ghost-flying", "types": ["flying", "ghost"], "rank": 53, "tier": "B", "timestamp": "22:06", "timestamp_seconds": 1326, }, { "id": 54, "type_pair": "dragon-fairy", "types": ["dragon", "fairy"], "rank": 54, "tier": "B", "timestamp": "21:55", "timestamp_seconds": 1315, }, { "id": 55, "type_pair": "ice-electric", "types": ["electric", "ice"], "rank": 55, "tier": "B", "timestamp": "21:47", "timestamp_seconds": 1307, }, { "id": 56, "type_pair": "dragon-poison", "types": ["dragon", "poison"], "rank": 56, "tier": "B", "timestamp": "21:39", "timestamp_seconds": 1299, }, { "id": 57, "type_pair": "ghost-rock", "types": ["ghost", "rock"], "rank": 57, "tier": "B", "timestamp": "21:27", "timestamp_seconds": 1287, }, { "id": 58, "type_pair": "fairy-normal", "types": ["fairy", "normal"], "rank": 58, "tier": "B", "timestamp": "21:19", "timestamp_seconds": 1279, }, { "id": 59, "type_pair": "dragon-normal", "types": ["dragon", "normal"], "rank": 59, "tier": "B", "timestamp": "21:08", "timestamp_seconds": 1268, }, { "id": 60, "type_pair": "ghost-poison", "types": ["ghost", "poison"], "rank": 60, "tier": "B", "timestamp": "20:58", "timestamp_seconds": 1258, }, { "id": 61, "type_pair": "grass-fire", "types": ["fire", "grass"], "rank": 61, "tier": "B", "timestamp": "20:48", "timestamp_seconds": 1248, }, { "id": 62, "type_pair": "dragon-ground", "types": ["dragon", "ground"], "rank": 62, "tier": "B", "timestamp": "20:39", "timestamp_seconds": 1239, }, { "id": 63, "type_pair": "fairy-poison", "types": ["fairy", "poison"], "rank": 63, "tier": "B", "timestamp": "20:27", "timestamp_seconds": 1227, }, { "id": 64, "type_pair": "fighting-ground", "types": ["fighting", "ground"], "rank": 64, "tier": "B", "timestamp": "20:16", "timestamp_seconds": 1216, }, { "id": 65, "type_pair": "ghost-dark", "types": ["dark", "ghost"], "rank": 65, "tier": "B", "timestamp": "20:06", "timestamp_seconds": 1206, }, { "id": 66, "type_pair": "normal-ground", "types": ["ground", "normal"], "rank": 66, "tier": "B", "timestamp": "19:58", "timestamp_seconds": 1198, }, { "id": 67, "type_pair": "poison-grass", "types": ["grass", "poison"], "rank": 67, "tier": "B", "timestamp": "19:54", "timestamp_seconds": 1194, }, { "id": 68, "type_pair": "bug-fire", "types": ["bug", "fire"], "rank": 68, "tier": "B", "timestamp": "19:43", "timestamp_seconds": 1183, }, { "id": 69, "type_pair": "fairy-flying", "types": ["fairy", "flying"], "rank": 69, "tier": "B", "timestamp": "19:31", "timestamp_seconds": 1171, }, { "id": 70, "type_pair": "psychic-fairy", "types": ["fairy", "psychic"], "rank": 70, "tier": "B", "timestamp": "19:19", "timestamp_seconds": 1159, }, { "id": 71, "type_pair": "rock-fairy", "types": ["fairy", "rock"], "rank": 71, "tier": "B", "timestamp": "19:08", "timestamp_seconds": 1148, }, { "id": 72, "type_pair": "grass-ghost", "types": ["ghost", "grass"], "rank": 72, "tier": "C", "timestamp": "18:48", "timestamp_seconds": 1128, }, { "id": 73, "type_pair": "dark-flying", "types": ["dark", "flying"], "rank": 73, "tier": "C", "timestamp": "18:39", "timestamp_seconds": 1119, }, { "id": 74, "type_pair": "rock-fighting", "types": ["fighting", "rock"], "rank": 74, "tier": "C", "timestamp": "18:28", "timestamp_seconds": 1108, }, { "id": 75, "type_pair": "fire-water", "types": ["fire", "water"], "rank": 75, "tier": "C", "timestamp": "18:19", "timestamp_seconds": 1099, }, { "id": 76, "type_pair": "dragon-electric", "types": ["dragon", "electric"], "rank": 76, "tier": "C", "timestamp": "18:10", "timestamp_seconds": 1090, }, { "id": 77, "type_pair": "electric-water", "types": ["electric", "water"], "rank": 77, "tier": "C", "timestamp": "18:01", "timestamp_seconds": 1081, }, { "id": 78, "type_pair": "poison-ground", "types": ["ground", "poison"], "rank": 78, "tier": "C", "timestamp": "17:53", "timestamp_seconds": 1073, }, { "id": 79, "type_pair": "bug-ground", "types": ["bug", "ground"], "rank": 79, "tier": "C", "timestamp": "17:46", "timestamp_seconds": 1066, }, { "id": 80, "type_pair": "ghost-bug", "types": ["bug", "ghost"], "rank": 80, "tier": "C", "timestamp": "17:39", "timestamp_seconds": 1059, }, { "id": 81, "type_pair": "dark-ground", "types": ["dark", "ground"], "rank": 81, "tier": "C", "timestamp": "17:32", "timestamp_seconds": 1052, }, { "id": 82, "type_pair": "psychic-fighting", "types": ["fighting", "psychic"], "rank": 82, "tier": "C", "timestamp": "17:20", "timestamp_seconds": 1040, }, { "id": 83, "type_pair": "electric-ground", "types": ["electric", "ground"], "rank": 83, "tier": "C", "timestamp": "17:06", "timestamp_seconds": 1026, }, { "id": 84, "type_pair": "steel-normal", "types": ["normal", "steel"], "rank": 85, "tier": "C", "timestamp": "16:43", "timestamp_seconds": 1003, }, { "id": 85, "type_pair": "rock-water", "types": ["rock", "water"], "rank": 86, "tier": "C", "timestamp": "16:30", "timestamp_seconds": 990, }, { "id": 86, "type_pair": "psychic-ground", "types": ["ground", "psychic"], "rank": 87, "tier": "C", "timestamp": "16:22", "timestamp_seconds": 982, }, { "id": 87, "type_pair": "flying-poison", "types": ["flying", "poison"], "rank": 88, "tier": "C", "timestamp": "16:11", "timestamp_seconds": 971, }, { "id": 88, "type_pair": "electric-poison", "types": ["electric", "poison"], "rank": 89, "tier": "C", "timestamp": "15:55", "timestamp_seconds": 955, }, { "id": 89, "type_pair": "ice-fighting", "types": ["fighting", "ice"], "rank": 90, "tier": "C", "timestamp": "15:43", "timestamp_seconds": 943, }, { "id": 90, "type_pair": "fire-normal", "types": ["fire", "normal"], "rank": 91, "tier": "C", "timestamp": "15:35", "timestamp_seconds": 935, }, { "id": 91, "type_pair": "rock-flying", "types": ["flying", "rock"], "rank": 92, "tier": "C", "timestamp": "15:26", "timestamp_seconds": 926, }, { "id": 92, "type_pair": "ghost-ice", "types": ["ghost", "ice"], "rank": 93, "tier": "C", "timestamp": "15:19", "timestamp_seconds": 919, }, { "id": 93, "type_pair": "grass-dark", "types": ["dark", "grass"], "rank": 94, "tier": "C", "timestamp": "15:08", "timestamp_seconds": 908, }, { "id": 94, "type_pair": "normal-fighting", "types": ["fighting", "normal"], "rank": 95, "tier": "C", "timestamp": "15:00", "timestamp_seconds": 900, }, { "id": 95, "type_pair": "grass-water", "types": ["grass", "water"], "rank": 96, "tier": "C", "timestamp": "14:48", "timestamp_seconds": 888, }, { "id": 96, "type_pair": "fire-flying", "types": ["fire", "flying"], "rank": 97, "tier": "C", "timestamp": "14:40", "timestamp_seconds": 880, }, { "id": 97, "type_pair": "psychic-poison", "types": ["poison", "psychic"], "rank": 98, "tier": "C", "timestamp": "14:30", "timestamp_seconds": 870, }, { "id": 98, "type_pair": "dragon-ice", "types": ["dragon", "ice"], "rank": 99, "tier": "C", "timestamp": "14:19", "timestamp_seconds": 859, }, { "id": 99, "type_pair": "electric-grass", "types": ["electric", "grass"], "rank": 100, "tier": "C", "timestamp": "14:09", "timestamp_seconds": 849, }, { "id": 100, "type_pair": "grass-normal", "types": ["grass", "normal"], "rank": 101, "tier": "C", "timestamp": "13:59", "timestamp_seconds": 839, }, { "id": 101, "type_pair": "bug-dragon", "types": ["bug", "dragon"], "rank": 102, "tier": "C", "timestamp": "13:47", "timestamp_seconds": 827, }, { "id": 102, "type_pair": "dark-dragon", "types": ["dark", "dragon"], "rank": 103, "tier": "C", "timestamp": "13:41", "timestamp_seconds": 821, }, { "id": 103, "type_pair": "normal-flying", "types": ["flying", "normal"], "rank": 104, "tier": "C", "timestamp": "13:33", "timestamp_seconds": 813, }, { "id": 104, "type_pair": "dragon-psychic", "types": ["dragon", "psychic"], "rank": 105, "tier": "C", "timestamp": "13:24", "timestamp_seconds": 804, }, { "id": 105, "type_pair": "fire-poison", "types": ["fire", "poison"], "rank": 106, "tier": "C", "timestamp": "13:11", "timestamp_seconds": 791, }, { "id": 106, "type_pair": "dragon-fighting", "types": ["dragon", "fighting"], "rank": 107, "tier": "C", "timestamp": "12:51", "timestamp_seconds": 771, }, { "id": 107, "type_pair": "dragon-flying", "types": ["dragon", "flying"], "rank": 108, "tier": "C", "timestamp": "12:39", "timestamp_seconds": 759, }, { "id": 108, "type_pair": "rock-grass", "types": ["grass", "rock"], "rank": 109, "tier": "C", "timestamp": "12:31", "timestamp_seconds": 751, }, { "id": 109, "type_pair": "flying-psychic", "types": ["flying", "psychic"], "rank": 110, "tier": "C", "timestamp": "12:17", "timestamp_seconds": 737, }, { "id": 110, "type_pair": "fighting-poison", "types": ["fighting", "poison"], "rank": 111, "tier": "C", "timestamp": "12:04", "timestamp_seconds": 724, }, { "id": 111, "type_pair": "bug-rock", "types": ["bug", "rock"], "rank": 112, "tier": "C", "timestamp": "11:50", "timestamp_seconds": 710, }, { "id": 112, "type_pair": "grass-fairy", "types": ["fairy", "grass"], "rank": 113, "tier": "C", "timestamp": "11:39", "timestamp_seconds": 699, }, { "id": 113, "type_pair": "psychic-normal", "types": ["normal", "psychic"], "rank": 84, "tier": "C", "timestamp": "16:55", "timestamp_seconds": 1015, }, { "id": 114, "type_pair": "fire-electric", "types": ["electric", "fire"], "rank": 114, "tier": "D", "timestamp": "11:02", "timestamp_seconds": 662, }, { "id": 115, "type_pair": "water-ice", "types": ["ice", "water"], "rank": 115, "tier": "D", "timestamp": "10:50", "timestamp_seconds": 650, }, { "id": 116, "type_pair": "ice-poison", "types": ["ice", "poison"], "rank": 116, "tier": "D", "timestamp": "10:36", "timestamp_seconds": 636, }, { "id": 117, "type_pair": "bug-fairy", "types": ["bug", "fairy"], "rank": 117, "tier": "D", "timestamp": "10:21", "timestamp_seconds": 621, }, { "id": 118, "type_pair": "bug-psychic", "types": ["bug", "psychic"], "rank": 118, "tier": "D", "timestamp": "10:10", "timestamp_seconds": 610, }, { "id": 119, "type_pair": "dark-normal", "types": ["dark", "normal"], "rank": 119, "tier": "D", "timestamp": "9:54", "timestamp_seconds": 594, }, { "id": 120, "type_pair": "rock-steel", "types": ["rock", "steel"], "rank": 120, "tier": "D", "timestamp": "9:44", "timestamp_seconds": 584, }, { "id": 121, "type_pair": "dark-fighting", "types": ["dark", "fighting"], "rank": 121, "tier": "D", "timestamp": "9:24", "timestamp_seconds": 564, }, { "id": 122, "type_pair": "steel-ice", "types": ["ice", "steel"], "rank": 122, "tier": "D", "timestamp": "9:03", "timestamp_seconds": 543, }, { "id": 123, "type_pair": "ghost-psychic", "types": ["ghost", "psychic"], "rank": 123, "tier": "D", "timestamp": "8:46", "timestamp_seconds": 526, }, { "id": 124, "type_pair": "grass-fighting", "types": ["fighting", "grass"], "rank": 124, "tier": "D", "timestamp": "8:21", "timestamp_seconds": 501, }, { "id": 125, "type_pair": "dark-ice", "types": ["dark", "ice"], "rank": 125, "tier": "D", "timestamp": "8:02", "timestamp_seconds": 482, }, { "id": 126, "type_pair": "ice-psychic", "types": ["ice", "psychic"], "rank": 126, "tier": "D", "timestamp": "7:47", "timestamp_seconds": 467, }, { "id": 127, "type_pair": "bug-dark", "types": ["bug", "dark"], "rank": 127, "tier": "D", "timestamp": "7:31", "timestamp_seconds": 451, }, { "id": 128, "type_pair": "bug-poison", "types": ["bug", "poison"], "rank": 129, "tier": "D", "timestamp": "6:57", "timestamp_seconds": 417, }, { "id": 129, "type_pair": "rock-psychic", "types": ["psychic", "rock"], "rank": 130, "tier": "D", "timestamp": "6:42", "timestamp_seconds": 402, }, { "id": 130, "type_pair": "dragon-grass", "types": ["dragon", "grass"], "rank": 131, "tier": "D", "timestamp": "6:26", "timestamp_seconds": 386, }, { "id": 131, "type_pair": "dragon-rock", "types": ["dragon", "rock"], "rank": 132, "tier": "D", "timestamp": "6:08", "timestamp_seconds": 368, }, { "id": 132, "type_pair": "ice-fire", "types": ["fire", "ice"], "rank": 133, "tier": "D", "timestamp": "5:55", "timestamp_seconds": 355, }, { "id": 133, "type_pair": "ice-fairy", "types": ["fairy", "ice"], "rank": 134, "tier": "D", "timestamp": "5:39", "timestamp_seconds": 339, }, { "id": 134, "type_pair": "rock-electric", "types": ["electric", "rock"], "rank": 135, "tier": "D", "timestamp": "5:26", "timestamp_seconds": 326, }, { "id": 135, "type_pair": "rock-poison", "types": ["poison", "rock"], "rank": 136, "tier": "D", "timestamp": "5:08", "timestamp_seconds": 308, }, { "id": 136, "type_pair": "ice-flying", "types": ["flying", "ice"], "rank": 137, "tier": "D", "timestamp": "4:52", "timestamp_seconds": 292, }, { "id": 137, "type_pair": "ground-rock", "types": ["ground", "rock"], "rank": 138, "tier": "D", "timestamp": "4:39", "timestamp_seconds": 279, }, { "id": 138, "type_pair": "ground-grass", "types": ["grass", "ground"], "rank": 139, "tier": "D", "timestamp": "4:18", "timestamp_seconds": 258, }, { "id": 139, "type_pair": "normal-rock", "types": ["normal", "rock"], "rank": 140, "tier": "D", "timestamp": "4:05", "timestamp_seconds": 245, }, { "id": 140, "type_pair": "bug-fighting", "types": ["bug", "fighting"], "rank": 141, "tier": "D", "timestamp": "3:45", "timestamp_seconds": 225, }, { "id": 141, "type_pair": "normal-poison", "types": ["normal", "poison"], "rank": 142, "tier": "D", "timestamp": "3:30", "timestamp_seconds": 210, }, { "id": 142, "type_pair": "grass-flying", "types": ["flying", "grass"], "rank": 128, "tier": "D", "timestamp": "7:16", "timestamp_seconds": 436, }, { "id": 143, "type_pair": "fire-rock", "types": ["fire", "rock"], "rank": 143, "tier": "F", "timestamp": "2:25", "timestamp_seconds": 145, }, { "id": 144, "type_pair": "dark-rock", "types": ["dark", "rock"], "rank": 144, "tier": "F", "timestamp": "2:10", "timestamp_seconds": 130, }, { "id": 145, "type_pair": "bug-normal", "types": ["bug", "normal"], "rank": 145, "tier": "F", "timestamp": "2:00", "timestamp_seconds": 120, }, { "id": 146, "type_pair": "grass-psychic", "types": ["grass", "psychic"], "rank": 146, "tier": "F", "timestamp": "1:41", "timestamp_seconds": 101, }, { "id": 147, "type_pair": "ice-normal", "types": ["ice", "normal"], "rank": 147, "tier": "F", "timestamp": "1:24", "timestamp_seconds": 84, }, { "id": 148, "type_pair": "bug-flying", "types": ["bug", "flying"], "rank": 148, "tier": "F", "timestamp": "1:12", "timestamp_seconds": 72, }, { "id": 149, "type_pair": "grass-ice", "types": ["grass", "ice"], "rank": 149, "tier": "F", "timestamp": "1:00", "timestamp_seconds": 60, }, { "id": 150, "type_pair": "grass-bug", "types": ["bug", "grass"], "rank": 150, "tier": "F", "timestamp": "0:48", "timestamp_seconds": 48, }, { "id": 151, "type_pair": "dark-psychic", "types": ["dark", "psychic"], "rank": 151, "tier": "F", "timestamp": "0:36", "timestamp_seconds": 36, }, { "id": 152, "type_pair": "ice-rock", "types": ["ice", "rock"], "rank": 152, "tier": "F", "timestamp": "0:24", "timestamp_seconds": 24, }, { "id": 153, "type_pair": "bug-ice", "types": ["bug", "ice"], "rank": 153, "tier": "F", "timestamp": "0:15", "timestamp_seconds": 15, }, ], }; const getTierColor = (tier: string): string => { switch (tier) { case "S": return "bg-purple-700"; case "A": return "bg-green-500"; case "B": return "bg-blue-500"; case "C": return "bg-yellow-500"; case "D": return "bg-orange-500"; case "F": return "bg-red-700"; default: return "bg-gray-500"; } }; const getTypeColor = (type: string): string => { switch (type.toLowerCase()) { case "normal": return "bg-gray-400"; case "fire": return "bg-red-500"; case "water": return "bg-blue-500"; case "electric": return "bg-yellow-400"; case "grass": return "bg-green-500"; case "ice": return "bg-blue-200"; case "fighting": return "bg-red-700"; case "poison": return "bg-purple-500"; case "ground": return "bg-yellow-600"; case "flying": return "bg-indigo-400"; case "psychic": return "bg-pink-500"; case "bug": return "bg-green-400"; case "rock": return "bg-yellow-700"; case "ghost": return "bg-purple-700"; case "dragon": return "bg-indigo-700"; case "dark": return "bg-gray-700"; case "steel": return "bg-gray-400"; case "fairy": return "bg-pink-300"; default: return "bg-gray-500"; } }; const X: React.FC<{ size: number }> = ({ size }) => ( ); const getGramsAndBigrams = (str) => { const grams = new Set(str.split("")); if (str.length > 1) { for (let i = 0; i < str.length - 1; i++) { grams.add(str.slice(i, i + 2)); } } return grams; }; const jaccardSimilarity = (str1, str2) => { const grams1 = getGramsAndBigrams(str1); const grams2 = getGramsAndBigrams(str2); const intersection = new Set([...grams1].filter(x => grams2.has(x))); const union = new Set([...grams1, ...grams2]); return intersection.size / union.size; }; const Combobox: React.FC = ({ options, value, onChange, placeholder }) => { const [isOpen, setIsOpen] = React.useState(false); const [inputValue, setInputValue] = React.useState(""); const [highlightedIndex, setHighlightedIndex] = React.useState(0); const allOption = { value: "", label: `All ${placeholder.split(" ")[1]}s` }; const extendedOptions = [allOption, ...options.map(opt => ({ value: opt, label: opt }))]; const [filteredOptions, setFilteredOptions] = React.useState(extendedOptions); const updateFilteredOptions = (query) => setFilteredOptions( query === "" ? extendedOptions : extendedOptions // .filter(option => option.label.toLowerCase().includes(query.toLowerCase())) .sort((a, b) => jaccardSimilarity(b.label.toLowerCase(), query.toLowerCase()) - jaccardSimilarity(a.label.toLowerCase(), query.toLowerCase()) ), ); const handleInputChange = (e: React.ChangeEvent) => { setInputValue(e.target.value); updateFilteredOptions(e.target.value); setIsOpen(true); setHighlightedIndex(0); }; const handleOptionClick = (option: { value: string; label: string }) => { onChange(option.value); setInputValue(""); setIsOpen(false); }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "ArrowDown") { e.preventDefault(); setHighlightedIndex(prev => (prev < filteredOptions.length - 1 ? prev + 1 : prev)); } else if (e.key === "ArrowUp") { e.preventDefault(); setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev)); } else if (e.key === "Enter") { e.preventDefault(); if (filteredOptions[highlightedIndex]) { handleOptionClick(filteredOptions[highlightedIndex]); } } else if (e.key === "Escape") { setIsOpen(false); } }; const handleClear = (e: React.MouseEvent) => { e.stopPropagation(); onChange(""); setInputValue(""); }; return (

setIsOpen(true)} onBlur={() => setTimeout(() => setIsOpen(false), 200)} onKeyDown={handleKeyDown} placeholder={value || placeholder} className="w-full p-2 pr-8 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white" /> {value && ( )}

{isOpen && filteredOptions.length > 0 && (

handleOptionClick(option)} className={`p-2 cursor-pointer ${ index === highlightedIndex ? "bg-blue-100 dark:bg-blue-800" : "hover:bg-gray-100 dark:hover:bg-gray-600" } ${ option.value === value ? "font-bold text-blue-600 dark:text-blue-300" : "text-gray-800 dark:text-white" }`} > {option.label}

)}

); }; const PokemonTypePairBrowser: React.FC = () => { const [selectedTier, setSelectedTier] = React.useState(""); const [selectedType, setSelectedType] = React.useState(""); const filteredPairs = React.useMemo(() => { return typePairData.type_pairs .filter(pair => (selectedTier === "" || pair.tier === selectedTier) && (selectedType === "" || pair.types.includes(selectedType)) ) .sort((a, b) => a.rank - b.rank); }, [selectedTier, selectedType]); const uniqueTypes = React.useMemo(() => { const types = new Set(); typePairData.type_pairs.forEach(pair => { pair.types.forEach(type => types.add(type)); }); return Array.from(types).sort(); }, []); const tiers = ["S", "A", "B", "C", "D", "F"]; const handleTypeClick = (type: string) => { setSelectedType(type); }; return (

{filteredPairs.map(pair => (

#{pair.rank} {pair.tier} tier

{pair.types.map(type => ( ))}

Watch at {pair.timestamp}

))}

); }; // Client-side hydration if (typeof document !== "undefined") { hydrateRoot(document.getElementById("root")!, ); } // Server-side rendering export default async function(req: Request): Promise { return new Response( renderToString( Pokémon Type-Pair Tier List Browser , ), { headers: { "content-type": "text/html", }, }, ); }

bl3