Add color dropdown

issue #69

common/colors.go

@@ -7,39 +7,36 @@ import (
 	"github.com/lucasb-eyer/go-colorful"
 )
 
+// Colors holds all the valid html color names for MovieNight
 // the values in colors must be lowercase so it matches with the color input
 // this saves from having to call strings.ToLower(color) every time to check
-var colors = []string{
+var Colors = []string{
 	"aliceblue", "antiquewhite", "aqua", "aquamarine", "azure",
-	"beige", "bisque", "black", "blanchedalmond", "blue",
-	"blueviolet", "brown", "burlywood", "cadetblue", "chartreuse",
-	"chocolate", "coral", "cornflowerblue", "cornsilk", "crimson",
-	"cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray",
-	"darkgrey", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen",
-	"darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen",
-	"darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet",
-	"deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue",
-	"firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro",
-	"ghostwhite", "gold", "goldenrod", "gray", "grey",
-	"green", "greenyellow", "honeydew", "hotpink", "indianred",
-	"indigo", "ivory", "khaki", "lavender", "lavenderblush",
-	"lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan",
-	"lightgoldenrodyellow", "lightgray", "lightgrey", "lightgreen", "lightpink",
-	"lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey",
-	"lightsteelblue", "lightyellow", "lime", "limegreen", "linen",
-	"magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid",
+	"beige", "bisque", "blanchedalmond", "blueviolet", "brown",
+	"burlywood", "cadetblue", "chartreuse", "chocolate", "coral",
+	"cornflowerblue", "cornsilk", "crimson", "cyan", "darkcyan",
+	"darkgoldenrod", "darkgray", "darkkhaki", "darkmagenta", "darkolivegreen",
+	"darkorange", "darkorchid", "darksalmon", "darkseagreen", "darkslateblue",
+	"darkslategray", "darkturquoise", "darkviolet", "deeppink", "deepskyblue",
+	"dimgray", "dodgerblue", "firebrick", "floralwhite", "forestgreen",
+	"fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod",
+	"gray", "greenyellow", "honeydew", "hotpink", "indigo",
+	"ivory", "khaki", "lavender", "lavenderblush", "lawngreen",
+	"lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow",
+	"lightgrey", "lightgreen", "lightpink", "lightsalmon", "lightseagreen",
+	"lightskyblue", "lightslategray", "lightsteelblue", "lightyellow", "lime",
+	"limegreen", "linen", "magenta", "mediumaquamarine", "mediumorchid",
 	"mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise",
-	"mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin",
-	"navajowhite", "navy", "oldlace", "olive", "olivedrab",
-	"orange", "orangered", "orchid", "palegoldenrod", "palegreen",
-	"paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru",
-	"pink", "plum", "powderblue", "purple", "rebeccapurple",
-	"red", "rosybrown", "royalblue", "saddlebrown", "salmon",
-	"sandybrown", "seagreen", "seashell", "sienna", "silver",
-	"skyblue", "slateblue", "slategray", "slategrey", "snow",
-	"springgreen", "steelblue", "tan", "teal", "thistle",
-	"tomato", "turquoise", "violet", "wheat", "white",
-	"whitesmoke", "yellow", "yellowgreen",
+	"mediumvioletred", "mintcream", "mistyrose", "moccasin", "navajowhite",
+	"oldlace", "olive", "olivedrab", "orange", "orangered",
+	"orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred",
+	"papayawhip", "peachpuff", "peru", "pink", "plum",
+	"powderblue", "purple", "rebeccapurple", "red", "rosybrown",
+	"royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen",
+	"seashell", "sienna", "silver", "skyblue", "slateblue",
+	"slategray", "snow", "springgreen", "steelblue", "tan",
+	"teal", "thistle", "tomato", "turquoise", "violet",
+	"wheat", "white", "whitesmoke", "yellow", "yellowgreen",
 }
 
 var (
@@ -50,7 +47,7 @@ var (
 // It also accepts hex codes in the form of #RGB and #RRGGBB
 func IsValidColor(s string) bool {
 	s = strings.ToLower(s)
-	for _, c := range colors {
+	for _, c := range Colors {
 		if s == c {
 			return true
 		}

static/js/chat.js

@@ -192,11 +192,22 @@ function updateColor() {
 
 function changeColor() {
     if (isValidColor(colorAsHex())) {
-        sendMessage("/color " + colorAsHex());
-        showColors(false);
+        sendColor(colorAsHex());
     }
 }
 
+function colorSelectChange() {
+    let val = $("#colorSelect").val()
+    if (val !== "") {
+        sendColor(val);
+    }
+}
+
+function sendColor(color) {
+    sendMessage("/color " + color);
+    showColors(false);
+}
+
 function setTimestamp(v) {
     showTimestamp(v)
     document.cookie = "timestamp=" + v
@@ -272,37 +283,3 @@ window.addEventListener("load", () => {
     // Make sure name is focused on start
     $("#name").focus();
 });
-
-function pleaseremovethis() {
-    colors = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure",
-        "beige", "bisque", "black", "blanchedalmond", "blue",
-        "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse",
-        "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson",
-        "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray",
-        "darkgrey", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen",
-        "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen",
-        "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet",
-        "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue",
-        "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro",
-        "ghostwhite", "gold", "goldenrod", "gray", "grey",
-        "green", "greenyellow", "honeydew", "hotpink", "indianred",
-        "indigo", "ivory", "khaki", "lavender", "lavenderblush",
-        "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan",
-        "lightgoldenrodyellow", "lightgray", "lightgrey", "lightgreen", "lightpink",
-        "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey",
-        "lightsteelblue", "lightyellow", "lime", "limegreen", "linen",
-        "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid",
-        "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise",
-        "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin",
-        "navajowhite", "navy", "oldlace", "olive", "olivedrab",
-        "orange", "orangered", "orchid", "palegoldenrod", "palegreen",
-        "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru",
-        "pink", "plum", "powderblue", "purple", "rebeccapurple",
-        "red", "rosybrown", "royalblue", "saddlebrown", "salmon",
-        "sandybrown", "seagreen", "seashell", "sienna", "silver",
-        "skyblue", "slateblue", "slategray", "slategrey", "snow",
-        "springgreen", "steelblue", "tan", "teal", "thistle",
-        "tomato", "turquoise", "violet", "wheat", "white",
-        "whitesmoke", "yellow", "yellowgreen",]
-
-}

static/main.html

@@ -75,8 +75,8 @@
                     <input id="colorBlue" type="range" min="0" max="255" value="0" oninput="updateColor();" />
                     <span id="colorBlueLabel"></span>
                 </div>
-                <div id="colorInputDiv" class="range-div">
-                    #<input id="colorInput" type="text" maxlength="6" onchange="changeColorInput();" />
+                <div class="range-div">
+                    <select id="colorSelect" onchange="colorSelectChange();"></select>
                 </div>
                 <div id="colorName" class="range-div">
                     NAME

wasm/main.go

@@ -189,6 +189,16 @@ func main() {
 	js.Set("debugValues", js.CallbackOf(debugValues))
 	js.Set("showTimestamp", js.CallbackOf(showTimestamp))
 
+	go func() {
+		time.Sleep(time.Second * 1)
+		inner := `<option value=""></option>`
+		for _, c := range common.Colors {
+			inner += fmt.Sprintf(`<option value="%s">%s</option>\n`, c, c)
+		}
+
+		js.Get("colorSelect").Set("innerHTML", inner)
+	}()
+
 	// This is needed so the goroutine does not end
 	for {
 		// heatbeat to keep connection alive to deal with nginx