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>
<div class="mb-3">
<label class="form-label">State:</label>
<div class="btn-toolbar">
<div class="input-group me-3 flex-grow-1">
<select class="form-select" v-model="state_name" :disabled="launched">
<option value="" selected>Select a state…</option>
<option v-for="state in states">{{ state }}</option>
</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 class="input-group">
<select class="form-select" v-model="state_name" :disabled="launched">
<option v-for="state in states">{{ state }}</option>
</select>
<button class="btn btn-primary" type="button" @click="launch" :disabled="launched">Play</button>
</div>
</div>
<div class="row" v-show="state_cities != null">
@ -107,17 +100,20 @@
"All above 50k": cities => cities.filter(city => city.pop >= 50000),
"All above 25k": cities => cities.filter(city => city.pop >= 25000),
},
async mounted() {
// Fire off this request ASAP
this.shapes_request = fetch("data/states.geojson");
guess() {
const rank = this.simplified_cities.indexOf(simplify(this.city_guess))
if (rank >= 0) {
const city = this.state_cities[rank];
// Check if there's a parameter in the URL already
this.state_name = (new URLSearchParams(window.location.search)).get('state');
if (this.state_name) {
this.launch();
} else {
const response = await fetch("data/states.json");
this.states = await response.json();
if (!city.guessed) {
city.guessed = true;
this.message = `${city.name} (population ${city.pop}) is the ${ordinal_suffix_of(rank + 1)} most populated city in ${this.state}.`;
this.city_guess = "";
this.draw();
} else {
this.message = `Already guessed ${city.name} (population ${city.pop}, rank ${rank}).`;
this.city_guess = "";
}
}
},
async launch() {
@ -139,39 +135,17 @@
this.draw();
},
async save() {
const data = {
state: this.state_name,
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];
async mounted() {
// Fire off this request ASAP
this.shapes_request = fetch("data/states.geojson");
if (!city.guessed) {
city.guessed = true;
this.message = `${city.name} (population ${city.pop}) is the ${ordinal_suffix_of(rank + 1)} most populated city in ${this.state}.`;
this.city_guess = "";
this.draw();
} else {
this.message = `Already guessed ${city.name} (population ${city.pop}, rank ${rank}).`;
this.city_guess = "";
}
// Check if there's a parameter in the URL already
this.state_name = (new URLSearchParams(window.location.search)).get('state');
if (this.state_name) {
this.launch();
} else {
const response = await fetch("data/states.json");
this.states = await response.json();
}
},
draw() {