From 03276ce4004033dc7856da947ed08846a575e4a9 Mon Sep 17 00:00:00 2001
From: stowu2005 <stowu2005@gmail.com>
Date: Mon, 30 Dec 2024 01:53:09 -0800
Subject: [PATCH] Added color dropdown

---
 public/index.html | 58 +++++++++++++++++++++++++---
 public/main.js    | 96 +++++++++++++++++++++++++++++++++++++++++------
 public/style.css  | 25 ++++++++++++
 3 files changed, 161 insertions(+), 18 deletions(-)

diff --git a/public/index.html b/public/index.html
index e431ce9..4d93101 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,28 +27,72 @@
         <div id="bar-chart" style="margin-bottom: 2.5vw;"></div>
         <p style="text-align:center;">The total population of counties named is: <span id="total_population">0</span> / 331,092,220</p>
         <div id="pop-chart" style="margin-bottom: 2.5vw;"></div>
-        <p style="text-align:center; margin-bottom: -1vw; display: none;" id="finish-text">Thank you for playing!</p>
+        <p style="text-align:center; margin-bottom: calc(-1vw - 4px); display: none;" id="finish-text">Thank you for playing!</p>
         <div style="display: flex; justify-content: center;" id="input-div">
-            <button id="" style="opacity:0; pointer-events: none; margin-right:10px">Finish</button>
+            <button id="" style="opacity:0; pointer-events: none; margin-right:10px">Finish</button> <!-- For spacing only -->
+            <div style="margin-right: 10px; margin-top: 18.5px; position: relative;">
+                <span class="circle" id="color-picker" style="background-color: red;"></span>
+                <div style="position: absolute; border-style: solid; border-radius: 10px; border-width: 2.5px;
+                    background-color: white; right: -7px; top: 30px; padding-top: 5px;
+                    height: 158px; text-align:center; width: 30px; display: none" id="color-picker-div">
+                    <span class="circle-select" id="color-picker-red" style="background-color: red; border-color: rgb(155, 155, 0);"></span>
+                    <span class="circle-select" id="color-picker-blue" style="background-color: blue; "></span>
+                    <span class="circle-select" id="color-picker-green" style="background-color: green; "></span>
+                    <span class="circle-select" id="color-picker-purple" style="background-color: purple;"></span>
+                    <span class="circle-select" id="color-picker-orange" style="background-color: orange;"></span>
+                </div>
+            </div>
             <form style="text-align:center; display: inline-block;" action="javascript:submit()" autocomplete="off">
                 <label for="input_bar">Enter a county:</label><br/>
                 <input type="text" id="input_bar" name="input_bar" placeholder="e.g. &quot;Los Angeles&quot;, &quot;Cook&quot;"><br/>
             </form>
             <button id="finish-btn" style="margin-left:10px; cursor: pointer; height: 21.5px; margin-top:18.5px">Finish</button>
+            <!-- For spacing only -->
+            <div style="margin-left: 10px; margin-top: 18.5px; position: relative; opacity: 0; pointer-events: none;">
+                <span class="circle" id="color-picker" style="background-color: red;"></span>
+            </div>
 
         </div>
-        <p style="text-align:center; margin-bottom: -1vw; display: block;" id="Error"><br/></p>
+        <p style="text-align:center; margin-bottom: -1vw; display: block; margin-top: -4px;" id="Error"><br/></p>
     <br/>
     </div>
     <div class="svg-container" id="svg-map-container">
         <svg id="map">
-            <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
+            <pattern id="reddiagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
                 <rect width="32" height="32" fill="red" />
                 <path d="M-8,8 l16,-16
                         M0,32 l32,-32
                         M24,40 l16,-16"
                       style="stroke:yellow; stroke-width:8;" />
               </pattern>
+              <pattern id="bluediagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
+                <rect width="32" height="32" fill="blue" />
+                <path d="M-8,8 l16,-16
+                        M0,32 l32,-32
+                        M24,40 l16,-16"
+                      style="stroke:yellow; stroke-width:8;" />
+              </pattern>
+              <pattern id="greendiagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
+                <rect width="32" height="32" fill="green" />
+                <path d="M-8,8 l16,-16
+                        M0,32 l32,-32
+                        M24,40 l16,-16"
+                      style="stroke:yellow; stroke-width:8;" />
+              </pattern>
+              <pattern id="purplediagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
+                <rect width="32" height="32" fill="purple" />
+                <path d="M-8,8 l16,-16
+                        M0,32 l32,-32
+                        M24,40 l16,-16"
+                      style="stroke:yellow; stroke-width:8;" />
+              </pattern>
+              <pattern id="orangediagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
+                <rect width="32" height="32" fill="orange" />
+                <path d="M-8,8 l16,-16
+                        M0,32 l32,-32
+                        M24,40 l16,-16"
+                      style="stroke:yellow; stroke-width:8;" />
+              </pattern>
         </svg>
     </div>
     <div id="checkbox-div">
@@ -65,13 +109,13 @@
     <div id="overlay" class="overlay"></div>
     <div id="popup" class="popup">
         <button id="closePopup" class="close-btn">&#x00d7</button>
-        <h2 style="margin-top: -2px; margin-bottom: 30px;">How to play:</h2>
+        <h1 style="margin-top: -2px; margin-bottom: 30px;">How to play:</h1>
         <p>Type in the name of a county in the search bar (submit with enter). All counties with that name will display on the map.
             If a name is invalid, an error will be displayed.
         </p>
         </br>
         <p>Once a state has more than half its population guessed, it will be considered &quot;won&quot;.</p>
-        <p>At that point, its electoral votes will be added to the total, and it will be displayed with a red hue.</p>
+        <p>At that point, its electoral votes will be added to the total, and it will be displayed with a hue.</p>
         <p>The goal is to reach 270 electoral votes, with the amount of electoral votes is shown on the bar at the bottom.
             When 270 (or more) electoral votes are won, you will be notified.</p>
         </br>
@@ -83,6 +127,8 @@ <h2 style="margin-top: -2px; margin-bottom: 30px;">How to play:</h2>
         <p>Hovering over a named county will show general facts about the county.</p>
         <p>Hovering over a bar in the bar chart will show specific statistics for that bar.</p>
         </br>
+        <p>To change the color of the named counties, use the dropdown by clicking the circle located next to the search bar.</p>
+        </br>
         <p>Toggling the &quot;Show Last Named Counties&quot; checkbox will make the last named counties
             appear in yellow (along with their corresponding data in the bars).</p>
         </br>
diff --git a/public/main.js b/public/main.js
index b8f7c04..a86285a 100644
--- a/public/main.js
+++ b/public/main.js
@@ -22,6 +22,15 @@ let map_tooltip
 let checked = true
 let won = false
 let finished = false
+let color = "red"
+let colorMap = new Map([
+    ["red", "rgba(255, 0, 0, 0.4)"], 
+    ["blue", "rgba(0, 0, 255, 0.4)"],
+    ["green", "rgba(0, 255, 0, 0.4)"],
+    ["purple", "rgba(128, 0, 128, 0.4)"],
+    ["orange", "rgba(255, 165, 0, 0.4)"],
+    ])
+let colorSelection = false
 
 
 async function fetchJSONData() {
@@ -114,7 +123,7 @@ async function fetchJSONData() {
 
         const outline = g.append("g")
             .attr("fill", "none")
-            .attr("stroke", "blue")
+            .attr("stroke", "black")
             .attr("stroke-linejoin", "round")
             .attr("stroke-width", 0)
             .attr("cursor", "pointer")
@@ -197,6 +206,11 @@ async function fetchJSONData() {
 
         function hover(event, d, this_county) {
             let tooltip_opacity = 0.8
+            if (color === "orange") {
+                tooltip_opacity = 0.9
+            } else if (color === "blue") {
+                tooltip_opacity = 0.7
+            }
             if (this_county.style('fill') === "rgb(255, 255, 0)") {
                 this_county
                 .style("opacity", 0)
@@ -254,7 +268,7 @@ function submit() {
     d_list = counties_array.filter((d) => fips.includes(d.__data__.id))
     for (const d of prev_named_counties) {
         d3.select(d).transition()
-            .style("fill", "red");
+            .style("fill", color);
     }
     prev_named_counties = d_list
     let prev_named = 0
@@ -272,7 +286,7 @@ function submit() {
             .style("fill", "yellow");
         } else {
             d3.select(d).transition()
-            .style("fill", "red");
+            .style("fill", color);
         }
     }
     total_pop += prev_named_pop
@@ -283,7 +297,7 @@ function submit() {
             if (state_population_gotten.get(state) * 2 >= state_totals.get(state)) {
                 named_states.set(state, 1)
                 total_electoral_votes += state_electoral_votes.get(state)
-                d3.select(states_map.get(state)).transition().style("fill", "red");
+                d3.select(states_map.get(state)).transition().style("fill", color);
                 if (!won && total_electoral_votes >= 270) {
                     won = true
                     should_alert = true
@@ -378,7 +392,7 @@ function barchart(percentage, total_percentage, bar_chart, label1, label2, recen
         .attr('class', 'bartooltip')
 
     const data = [
-        { label: `${label1}`, value: bar_percentage, left: 0, color: 'red',
+        { label: `${label1}`, value: bar_percentage, left: 0, color: color,
             percentage: `(${(100 * percentage/total_percentage).toFixed(2)}\%)`},
         { label: `${label3}`, value: recent_percentage, left: bar_percentage, color: 'yellow',
             percentage: `(${(100 * recent_percentage/total_percentage).toFixed(2)}\%)`},
@@ -396,14 +410,14 @@ function barchart(percentage, total_percentage, bar_chart, label1, label2, recen
         .attr('height', 100)
         .attr('fill', function (d) {
             if (d.color === "yellow") {
-                return "url(#diagonalHatch)"
+                return `url(#${color}diagonalHatch)`
             }
             return d.color
         })
         .on("mouseenter", function (event, d) {
             let d_pop = d.value
             d3.select(this).style("opacity", 0.4)
-            if (d.color === 'red') {
+            if (d.color === color) {
                 d_pop = percentage
                 d3.select(this.nextSibling).style("opacity", 0.4)
             } else if (d.color === 'yellow') {
@@ -422,7 +436,7 @@ function barchart(percentage, total_percentage, bar_chart, label1, label2, recen
         tooltip.style('top', (event.pageY - 20) + 'px')
             .style('left', (event.pageX + 10) + 'px');
     }).on("mouseout", function (event, d) {
-        if (d.color === 'red') {
+        if (d.color === color) {
             d3.select(this.nextSibling).style("opacity", 1)
         }
         d3.select(this).style("opacity", 1)
@@ -430,11 +444,13 @@ function barchart(percentage, total_percentage, bar_chart, label1, label2, recen
     });
 }
 
-d3.select("#prev_named_btn").on("click", update);
+d3.select("#prev_named_btn").on("click", function(){
+    checked = !(document.getElementById("prev_named").checked);
+    document.getElementById("prev_named").checked = checked;
+    update();
+});
 
 function update() {
-    checked = !(document.getElementById("prev_named").checked)
-    document.getElementById("prev_named").checked = checked
     if (checked === false) {
         if (curr !== null) {
             let state_gotten = state_population_gotten.get(curr_state)
@@ -444,7 +460,7 @@ function update() {
         }
         for (const d of prev_named_counties) {
             d3.select(d).transition()
-                .style("fill", "red");
+                .style("fill", color);
         }
         barchart(total_counties, 3142, "#bar-chart", "Number of counties guessed", "Number of counties remaining",
         0, "")
@@ -577,3 +593,59 @@ d3.select("#website").on("mouseleave", function () {
     d3.select("#website").transition().style("font-size", "32px");
 });
 
+d3.select("#color-picker").on("mouseenter", function () {
+    d3.select("#color-picker").style("background-color", `${colorMap.get(color)}`);
+});
+
+d3.select("#color-picker").on("mouseleave", function () {
+    d3.select("#color-picker").style("background-color", `${color}`);
+});
+
+d3.select("#color-picker").on("click", function () {
+    if (colorSelection) {
+        d3.select("#color-picker").transition().style("border-color", "#444");
+        d3.select("#color-picker-div").transition().style("display", "none");
+    } else {
+        d3.select("#color-picker").transition().style("border-color", "rgb(155, 155, 0)");
+        d3.select("#color-picker-div").transition().style("display", "block");
+    }
+    colorSelection = !colorSelection
+});
+
+d3.selectAll(".circle-select").on("mouseenter", function () {
+    d3.select(this).transition().style("width", "21.5px")
+    .style("height", "21.5px").style("margin-top", "1px").style("margin-bottom", "1px");   
+});
+
+d3.selectAll(".circle-select").on("mouseleave", function () {
+    d3.select(this).transition().style("width", "17.5px")
+        .style("height", "17.5px").style("margin-top", "3px").style("margin-bottom", "3px");
+});
+
+d3.selectAll(".circle-select").on("click", function () {
+    colorSelection = false;
+    if (color !== d3.select(this).style("background-color")) {
+        color = d3.select(this).style("background-color");
+        d3.selectAll(".circle-select").style("border-color", "#444");
+        d3.select(this).style("border-color", "rgb(155, 155, 0)");
+        changeColor();
+    }
+    d3.select("#color-picker").transition().style("border-color", "#444").style("background-color", color);
+    d3.select("#color-picker-div").transition().style("display", "none");
+});
+
+function changeColor() {
+    named_states.forEach((value, key) => {
+        d3.select(states_map.get(key)).transition().style("fill", color);
+    })
+    named_counties.forEach((value, key) => {
+        for (const d of value) {
+            d3.select(d).transition()
+                .style("fill", color);
+        }
+    })
+    update();
+    if (curr === null) {
+        barchart(total_electoral_votes, 538, "#vote-chart", "Electoral Votes Won", "Electoral Votes remaining", 0, "");
+    } 
+}
diff --git a/public/style.css b/public/style.css
index 755d766..7c1f6fd 100644
--- a/public/style.css
+++ b/public/style.css
@@ -105,4 +105,29 @@ p {
     top: 20px;
     right: 20px;
     box-shadow: 0 2px 2px rgb(0, 0, 0, 0.7);
+}
+
+.circle {
+    height: 17.5px;
+    width: 17.5px;
+    border-radius: 50%;
+    border: solid;
+    border-width: 2px;
+    border-color: #444;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.circle-select {
+    position: relative;
+    height: 17.5px;
+    width: 17.5px;
+    margin-bottom: 3px;
+    margin-top: 3px;
+    border-radius: 50%;
+    border: solid;
+    border-width: 2px;
+    border-color: #444;
+    cursor: pointer;
+    display: inline-block;
 }
\ No newline at end of file