chandlerswift/name-all-lakes-by-area-quiz
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add save function and stub out for restore

Browse source
This commit is contained in:
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

69
index.html
View file

@ -11,13 +11,19 @@
<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="input-group"> <div class="btn-toolbar">
<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 value="" selected>Select a state…</option> <option value="" selected>Select a state…</option>
<option v-for="state in states">{{ state }}</option> <option v-for="state in states">{{ state }}</option>
</select> </select>
<button class="btn btn-primary" type="button" @click="launch" :disabled="launched">Play</button> <button class="btn btn-primary" type="button" @click="launch" :disabled="launched">Play</button>
</div> </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 class="row" v-show="state_cities != null"> <div class="row" v-show="state_cities != null">
<div class="col-4"> <div class="col-4">
@ -101,20 +107,17 @@
"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),
}, },
guess() { async mounted() {
const rank = this.simplified_cities.indexOf(simplify(this.city_guess)) // Fire off this request ASAP
if (rank >= 0) { this.shapes_request = fetch("data/states.geojson");
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 {
this.message = `Already guessed ${city.name} (population ${city.pop}, rank ${rank}).`; const response = await fetch("data/states.json");
this.city_guess = ""; this.states = await response.json();
}
} }
}, },
async launch() { async launch() {
@ -136,17 +139,39 @@
this.draw(); this.draw();
}, },
async mounted() { async save() {
// Fire off this request ASAP const data = {
this.shapes_request = fetch("data/states.geojson"); 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 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 = "";
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() {