Add save function and stub out for restore

index.html

@@ -11,12 +11,19 @@
         <h1>Name All the Cities</h1>
         <div class="mb-3">
             <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">
+                        <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">
             <div class="col-4">
@@ -100,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();
+                // 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 {
-                        this.message = `Already guessed ${city.name} (population ${city.pop}, rank ${rank}).`;
-                        this.city_guess = "";
-                    }
+                    const response = await fetch("data/states.json");
+                    this.states = await response.json();
                 }
             },
             async launch() {
@@ -135,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();
+                    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 {
-                    const response = await fetch("data/states.json");
-                    this.states = await response.json();
+                        this.message = `Already guessed ${city.name} (population ${city.pop}, rank ${rank}).`;
+                        this.city_guess = "";
+                    }
                 }
             },
             draw() {