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:668a5e3dd0ebfbea959f01f2dda89185b4d415a2
Branches Tags
chandlerswift:main
..
compare: chandlerswift:174067d94691b152204d764bb1a38558ced7f185
Branches Tags
chandlerswift:main

No commits in common. "668a5e3dd0ebfbea959f01f2dda89185b4d415a2" and "174067d94691b152204d764bb1a38558ced7f185" have entirely different histories.
668a5e3dd0 ... 174067d946

1 changed files with 4 additions and 33 deletions
Show stats Expand all files Collapse all files

37
index.html
View file

@ -17,16 +17,15 @@
<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 || !state_name">Play</button>
<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>
<label for="restore-input" class="btn btn-success" :class="{disabled: launched}">Restore</label>
<button class="btn btn-success" type="button" @click="restore" :disabled="launched">Restore</button>
</div>
<input id="restore-input" type="file" @input="restore" style="display: none;"></button>
</div>
</div>
<div class="row" v-show="launched">
<div class="row" v-show="state_cities != null">
<div class="col-4">
<div class="mb-3">
<label for="city-guess" class="form-label">City:</label>
@ -157,35 +156,7 @@
downloadAnchorNode.click();
downloadAnchorNode.remove();
},
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();
async restore() {
},
guess() {
const rank = this.simplified_cities.indexOf(simplify(this.city_guess))