From 5dd5d4cd7306a020020464349ce2b2eae2a9fc48 Mon Sep 17 00:00:00 2001
From: Chandler Swift <chandler@chandlerswift.com>
Date: Tue, 5 Mar 2024 23:29:06 -0600
Subject: [PATCH] Add checkbox to show unguessed cities

---
 index.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 23ce8f5..f99ac93 100644
--- a/index.html
+++ b/index.html
@@ -61,6 +61,9 @@
             </div>
             <div class="col-8 h-100">
                 <canvas id="canvas" class="mx-3 my-auto" @vue:mounted="draw" width="800" height="600"></canvas>
+                <div>
+                    <input type="checkbox" v-model="show_unguessed_cities" @change="draw"> Show unguessed cities
+                </div>
             </div>
         </div>
     </div>
@@ -137,6 +140,7 @@
                 simplified_cities: cities.map(city => simplify(city.name)),
                 city_guess: "",
                 message: "",
+                show_unguessed_cities: true,
                 achievements: {
                     "Top Five": cities => cities.slice(0, 5),
                     "Top Ten": cities => cities.slice(0, 10),
@@ -192,7 +196,13 @@
                         if (city.guessed) {
                             ctx.beginPath();
                             const c = transform(city.location)
-                            console.log(city.location, c)
+                            ctx.fillStyle = "black";
+                            ctx.arc(c[0], c[1], 2, 0, 2*Math.PI, true);
+                            ctx.fill();
+                        } else if (this.show_unguessed_cities) {
+                            ctx.beginPath();
+                            const c = transform(city.location)
+                            ctx.fillStyle = "lightgray";
                             ctx.arc(c[0], c[1], 2, 0, 2*Math.PI, true);
                             ctx.fill();
                         }