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

Add save function and stub out for restore

main
Chandler Swift 2024-03-07 00:49:53 -06:00
parent 6888c944a4
commit 174067d946
Signed by: chandlerswift
GPG Key ID: A851D929D52FB93F
1 changed files with 54 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
index.html
View File

@ -11,12 +11,18 @@
<h1>Name All the Cities</h1>
<div class="mb-3">
<label class="form-label">State:</label>
<div class="input-group">
<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 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>
</div>
<div class="row" v-show="state_cities != null">
@ -101,20 +107,17 @@
"All above 50k": cities => cities.filter(city => city.pop >= 50000),
"All above 25k": cities => cities.filter(city => city.pop >= 25000),
},
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();
}
},
async launch() {
@ -136,17 +139,39 @@
this.draw();
},
async mounted() {
// Fire off this request ASAP
this.shapes_request = fetch("data/states.geojson");
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];
// 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 = "";
}
}
},
draw() {