Merge pull request #7 from bioshazard/3-vote-weight-hue

#3 vote weight hue
bioshazard · Oct 8, 2023 · ed6274f · ed6274f
2 parents 4591166 + ffc6c58
commit ed6274f
Showing 1 changed file with 32 additions and 3 deletions.
diff --git a/src/components/Board.jsx b/src/components/Board.jsx
@@ -500,6 +500,30 @@ export default function Board(props) {
   // } )
   // console.log(votingDisabled)
 
+  // trick to get tailwind to include these...
+  const hueClasses = [
+    "bg-blue-100",
+    "bg-blue-200",
+    "bg-blue-300",
+    "bg-blue-400",
+    "bg-blue-500",
+    "bg-blue-600",
+    "bg-blue-700",
+    "bg-blue-800",
+    "bg-blue-900",
+  ]
+
+  const getMyVoteHue = (cardId) => {
+    // Print hue by weight first decimal (0+ to 10)
+    const myVoteWeight = Math.round(voteTotals.mine[cardId] * 10 / voteTotals.mineTotal)
+
+
+    // even normalization across blue 100 - 900
+    const tailwindHue = (Math.floor(myVoteWeight * 0.4) + 4) * 100
+
+    return `bg-blue-${tailwindHue} ${tailwindHue > 300 ? "text-white" : "text-black"}`
+  }
+
   return (
     <div className="p-2">
       <ReactModal
@@ -615,9 +639,14 @@ export default function Board(props) {
                             <FontAwesomeIcon icon={faMinus} />
                           </button>
                           {/* TODO: Kinda gross to have double ternary... but its not THAT complicated... */}
-                          <span title={votingDisabled ? "Voting is disabled after discussion begins" : "Add your votes!"} className={`${voteTotals.mine[card.id] ? (
-                            !votingDisabled ? "bg-blue-500 text-white" : "bg-black text-white"
-                          ) : "bg-gray-300"} p-1 rounded`}>
+                          <span title={votingDisabled ? "Voting is disabled after discussion begins" : "Add your votes!"}
+                          className={[
+                            "p-1 rounded",
+                            !voteTotals.mine[card.id] ? "bg-gray-300" : ( [
+                              !votingDisabled ? getMyVoteHue(card.id) : "bg-black"
+                            ].join(" ")
+                            )
+                          ].join(" ")}>
                             {voteTotals.mine[card.id] && (
                               `${(voteTotals.mine[card.id] / voteTotals.mineTotal).toFixed(2)} (${voteTotals.mine[card.id]})`
                             ) || 0}