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

Add restore function

main
Chandler Swift 2024-03-07 01:26:53 -06:00
parent 174067d946
commit 92518cee5a
Signed by: chandlerswift
GPG Key ID: A851D929D52FB93F
1 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@ -21,8 +21,9 @@
</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>
<label for="restore-input" class="btn btn-success" :class="{disabled: launched}">Restore</label>
</div>
<input id="restore-input" type="file" @input="restore" style="display: none;"></button>
</div>
</div>
<div class="row" v-show="state_cities != null">
@ -156,7 +157,35 @@
downloadAnchorNode.click();
downloadAnchorNode.remove();
},
async restore() {
async restore(event) {
this.launched = true;
// Sure would be nice if the API were just designed this way!
const read_file = async (file) => new Promise((resolve) => {
const fileReader = new FileReader();
fileReader.onload = (e) => resolve(fileReader.result);
fileReader.readAsText(file);
});
const save_data = await read_file(event.target.files[0]);
const save = JSON.parse(save_data, (k, v) => k == 'time' ? new Date(v) : v);
this.state_cities = save.cities;
this.simplified_cities = this.state_cities.map(city => simplify(city.name));
this.state_name = save.state;
this.message = `Restored game from ${save.time.toLocaleString()} with ${save.cities.filter(c => c.guessed).length }/${ save.cities.length} cities guessed`;
// The rest of this function is duplicated from launch(), above
const shapes_response = await this.shapes_request;
const shapes_data = await shapes_response.json();
const shape = shapes_data.features.find(f => f.properties.NAME.toLowerCase() == this.state_name.toLowerCase());
if (shape.geometry.type == "MultiPolygon") {
this.state_shape = shape.geometry.coordinates.map(a => a.flat());
} else { // Polygon
this.state_shape = shape.geometry.coordinates;
}
this.state_mercator_adjusted_bounds = find_bounds(this.state_shape.flat().map(mercator));
this.draw();
},
guess() {
const rank = this.simplified_cities.indexOf(simplify(this.city_guess))