chandlerswift/name-all-cities-by-population-quiz
1
0
Fork 0
Code Issues 3 Pull requests Packages Projects Releases Wiki Activity

Compare commits

base: chandlerswift:174067d94691b152204d764bb1a38558ced7f185
Branches Tags
chandlerswift:main
..
compare: chandlerswift:d2a80397b21be597e9c1a67f28c618371b9c17c7
Branches Tags
chandlerswift:main

No commits in common. "174067d94691b152204d764bb1a38558ced7f185" and "d2a80397b21be597e9c1a67f28c618371b9c17c7" have entirely different histories.
174067d946 ... d2a80397b2

1 changed files with 28 additions and 54 deletions
Show stats Expand all files Collapse all files

82
index.html
View file

@ -11,18 +11,11 @@
<h1>Name All the Cities</h1> <h1>Name All the Cities</h1>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">State:</label> <label class="form-label">State:</label>
<div class="btn-toolbar"> <div class="input-group">
<div class="input-group me-3 flex-grow-1"> <select class="form-select" v-model="state_name" :disabled="launched">
<select class="form-select" v-model="state_name" :disabled="launched"> <option v-for="state in states">{{ state }}</option>
<option value="" selected>Select a state…</option> </select>
<option v-for="state in states">{{ state }}</option> <button class="btn btn-primary" type="button" @click="launch" :disabled="launched">Play</button>
</select>
<button class="btn btn-primary" type="button" @click="launch" :disabled="launched">Play</button>
</div>
<div class="btn-group">
<button class="btn btn-secondary" type="button" @click="save" :disabled="!launched">Save</button>
<button class="btn btn-success" type="button" @click="restore" :disabled="launched">Restore</button>
</div>
</div> </div>
</div> </div>
<div class="row" v-show="state_cities != null"> <div class="row" v-show="state_cities != null">
@ -107,17 +100,20 @@
"All above 50k": cities => cities.filter(city => city.pop >= 50000), "All above 50k": cities => cities.filter(city => city.pop >= 50000),
"All above 25k": cities => cities.filter(city => city.pop >= 25000), "All above 25k": cities => cities.filter(city => city.pop >= 25000),
}, },
async mounted() { guess() {
// Fire off this request ASAP const rank = this.simplified_cities.indexOf(simplify(this.city_guess))
this.shapes_request = fetch("data/states.geojson"); if (rank >= 0) {
const city = this.state_cities[rank];
// Check if there's a parameter in the URL already if (!city.guessed) {
this.state_name = (new URLSearchParams(window.location.search)).get('state'); city.guessed = true;
if (this.state_name) { this.message = `${city.name} (population ${city.pop}) is the ${ordinal_suffix_of(rank + 1)} most populated city in ${this.state}.`;
this.launch(); this.city_guess = "";
} else { this.draw();
const response = await fetch("data/states.json"); } else {
this.states = await response.json(); this.message = `Already guessed ${city.name} (population ${city.pop}, rank ${rank}).`;
this.city_guess = "";
}
} }
}, },
async launch() { async launch() {
@ -139,39 +135,17 @@
this.draw(); this.draw();
}, },
async save() { async mounted() {
const data = { // Fire off this request ASAP
state: this.state_name, this.shapes_request = fetch("data/states.geojson");
cities: this.state_cities,
time: new Date,
};
// https://stackoverflow.com/a/30800715
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data));
const downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
const safeStateName = this.state_name.replace(/[^A-Za-z]/, '-');
const datestring = `${data.time.getFullYear()}-${data.time.getMonth() + 1}-${data.time.getDate()}`;
downloadAnchorNode.setAttribute("download", `name-all-cities-${safeStateName}-${datestring}.json`);
document.body.appendChild(downloadAnchorNode); // required for firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();
},
async restore() {
},
guess() {
const rank = this.simplified_cities.indexOf(simplify(this.city_guess))
if (rank >= 0) {
const city = this.state_cities[rank];
if (!city.guessed) { // Check if there's a parameter in the URL already
city.guessed = true; this.state_name = (new URLSearchParams(window.location.search)).get('state');
this.message = `${city.name} (population ${city.pop}) is the ${ordinal_suffix_of(rank + 1)} most populated city in ${this.state}.`; if (this.state_name) {
this.city_guess = ""; this.launch();
this.draw(); } else {
} else { const response = await fetch("data/states.json");
this.message = `Already guessed ${city.name} (population ${city.pop}, rank ${rank}).`; this.states = await response.json();
this.city_guess = "";
}
} }
}, },
draw() { draw() {