2024-02-29 17:24:33 -06:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en" class="h-100">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Name All the Cities</title>
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
|
|
|
</head>
|
|
|
|
|
<body class="h-100 d-flex flex-column">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<h1>Name All the Cities</h1>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="state-select" class="form-label">State:</label>
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<select id="state-select" class="form-select" disabled>
|
|
|
|
|
<option select>Choose a state…</option>
|
|
|
|
|
</select>
|
|
|
|
|
<button class="btn btn-primary" type="button" id="go-button">Play</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
(async function init(){
|
|
|
|
|
const response = await fetch("data/states.json");
|
|
|
|
|
const states = await response.json();
|
|
|
|
|
|
|
|
|
|
const ss = document.getElementById('state-select');
|
|
|
|
|
ss.disabled = false;
|
|
|
|
|
for (let state of states) {
|
|
|
|
|
ss.options[ss.options.length] = new Option(state);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.getElementById('go-button').addEventListener('click', async (e) => {
|
|
|
|
|
e.target.disabled = true;
|
|
|
|
|
ss.disabled = true;
|
|
|
|
|
await selectState(ss.value);
|
|
|
|
|
document.getElementById('game').style.display = 'block';
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
import { createApp } from 'https://unpkg.com/petite-vue?module'
|
|
|
|
|
|
|
|
|
|
// https://stackoverflow.com/a/13627586
|
|
|
|
|
function ordinal_suffix_of(i) {
|
|
|
|
|
let j = i % 10,
|
|
|
|
|
k = i % 100;
|
|
|
|
|
if (j === 1 && k !== 11) {
|
|
|
|
|
return i + "st";
|
|
|
|
|
}
|
|
|
|
|
if (j === 2 && k !== 12) {
|
|
|
|
|
return i + "nd";
|
|
|
|
|
}
|
|
|
|
|
if (j === 3 && k !== 13) {
|
|
|
|
|
return i + "rd";
|
|
|
|
|
}
|
|
|
|
|
return i + "th";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const simplify = s => s.toLowerCase().replace(/[^a-z]/g, '');
|
|
|
|
|
|
|
|
|
|
async function selectState(stateName) {
|
|
|
|
|
const response = await fetch(`data/${stateName}.json`);
|
|
|
|
|
const cities = await response.json();
|
|
|
|
|
console.log(cities)
|
|
|
|
|
|
|
|
|
|
window.app = createApp({
|
|
|
|
|
state: stateName,
|
|
|
|
|
cities: cities,
|
|
|
|
|
simplified_cities: cities.map(city => simplify(city.name)),
|
|
|
|
|
city_guess: "",
|
|
|
|
|
message: "",
|
2024-02-29 18:07:58 -06:00
|
|
|
achievements: {
|
|
|
|
|
"Top Five": cities => cities.slice(0, 5),
|
|
|
|
|
"Top Ten": cities => cities.slice(0, 10),
|
|
|
|
|
"Top Twenty": cities => cities.slice(0, 20),
|
|
|
|
|
"Top Fifty": cities => cities.slice(0, 50),
|
|
|
|
|
"Top Hundred": cities => cities.slice(0, 100),
|
|
|
|
|
"Every Single One": cities => cities,
|
|
|
|
|
},
|
2024-02-29 17:24:33 -06:00
|
|
|
guess() {
|
|
|
|
|
const rank = this.simplified_cities.indexOf(simplify(this.city_guess))
|
|
|
|
|
if (rank >= 0) {
|
|
|
|
|
const city = this.cities[rank];
|
|
|
|
|
|
|
|
|
|
if (!city.guessed) {
|
|
|
|
|
city.guessed = true;
|
2024-02-29 18:12:38 -06:00
|
|
|
this.message = `${city.name} (population ${city.pop}) is the ${ordinal_suffix_of(rank + 1)} most populated city in ${this.state}.`;
|
2024-02-29 17:24:33 -06:00
|
|
|
this.city_guess = "";
|
|
|
|
|
} else {
|
|
|
|
|
this.message = `Already guessed ${city.name} (population ${city.pop}, rank ${rank}).`;
|
|
|
|
|
this.city_guess = "";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}).mount()
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<div id="game" v-scope style="display: none;">
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="city-guess" class="form-label">City:</label>
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<input class="form-control" id="city-guess" v-model="city_guess" @keyup.enter="guess">
|
|
|
|
|
<button class="btn btn-primary" type="button" @click="guess">Guess</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="message != ''" class="alert alert-secondary" role="alert">
|
|
|
|
|
{{ message }}
|
|
|
|
|
</div>
|
2024-02-29 18:07:58 -06:00
|
|
|
|
|
|
|
|
<h3>{{ state }} cities</h3>
|
|
|
|
|
<div>
|
|
|
|
|
<span
|
|
|
|
|
v-for="(required_cities, name) in achievements"
|
|
|
|
|
:class="{ 'badge': true, 'me-1': true, 'text-bg-secondary': !required_cities(cities).every(c => c.guessed), 'text-bg-warning': required_cities(cities).every(c => c.guessed) }">
|
|
|
|
|
{{ name }}
|
|
|
|
|
({{ required_cities(cities).filter(c => c.guessed).length }}/{{ required_cities(cities).length }})
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
2024-02-29 17:24:33 -06:00
|
|
|
<table class="table">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Rank</th>
|
|
|
|
|
<th>Name</th>
|
|
|
|
|
<th>Population</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<template v-for="(city, rank) in cities">
|
|
|
|
|
<tr v-show="city.guessed">
|
|
|
|
|
<td>{{ rank + 1 }}</td>
|
|
|
|
|
<td>{{ city.name }}</td>
|
|
|
|
|
<td>{{ city.pop }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</template>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<footer class="footer mt-auto py-3 text-center text-muted">
|
2024-02-29 17:29:30 -06:00
|
|
|
Created by <a href="https://chandlerswift.com">Chandler Swift</a> using 2020 US Census data |
|
|
|
|
|
<a href="https://git.chandlerswift.com/chandlerswift/name-all-cities-by-population-quiz">Source</a>
|
|
|
|
|
(<a href="https://git.chandlerswift.com/chandlerswift/name-all-cities-by-population-quiz/src/branch/main/LICENSE">GPL3</a>)
|
2024-02-29 17:24:33 -06:00
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
