Colors are indices now

Technically this makes the actual colors a client concern. However, it
also allows the client to have a different color palette an easy way.

The main reason for doing this however, was reducing payload size, in
preparation for the drawing gallery, to reduce memory usage when saving
drawings and potentially persisting them.

We might also change this to a binary format, as it'll be much smaller,
given the amount of JSON overhead.

A minimum line event will currently have a size of 70b, while in binary,
it would only have 11 bytes, if we don't microoptimise (less is
possible).

Author: Bios-Marcel

internal/api/v1.go

@@ -356,15 +356,10 @@ func (handler *V1Handler) getStats(writer http.ResponseWriter, _ *http.Request)
 	}
 }
 
-var (
-	// CanvasColor is the initially / empty canvas colors value used for
-	// Lobbydata objects.
-	CanvasColor = game.RGBColor{R: 255, G: 255, B: 255}
-	// SuggestedBrushSizes is suggested brush sizes value used for
-	// Lobbydata objects. A unit test makes sure these values are ordered
-	// and within the specified bounds.
-	SuggestedBrushSizes = [4]uint8{8, 16, 24, 32}
-)
+// SuggestedBrushSizes is suggested brush sizes value used for
+// Lobbydata objects. A unit test makes sure these values are ordered
+// and within the specified bounds.
+var SuggestedBrushSizes = [4]uint8{8, 16, 24, 32}
 
 // LobbyData is the data necessary for correctly configuring a lobby.
 // While unofficial clients will probably need all of these values, the
@@ -385,7 +380,7 @@ type LobbyData struct {
 	// MaxBrushSize is the maximum amount of pixels the brush can draw in.
 	MaxBrushSize int `json:"maxBrushSize"`
 	// CanvasColor is the initially (empty) color of the canvas.
-	CanvasColor game.RGBColor `json:"canvasColor"`
+	CanvasColor uint8 `json:"canvasColor"`
 	// SuggestedBrushSizes are suggestions for the different brush sizes
 	// that the user can choose between. These brushes are guaranteed to
 	// be ordered from low to high and stay with the bounds.
@@ -403,7 +398,7 @@ func CreateLobbyData(lobby *game.Lobby) *LobbyData {
 		DrawingBoardBaseHeight: game.DrawingBoardBaseHeight,
 		MinBrushSize:           game.MinBrushSize,
 		MaxBrushSize:           game.MaxBrushSize,
-		CanvasColor:            CanvasColor,
+		CanvasColor:            0, /* White */
 		SuggestedBrushSizes:    SuggestedBrushSizes,
 	}
 }

internal/api/v1_easyjson.go

@@ -264,59 +264,59 @@
                 to prevent hover and active colors to appear. -->
                     <div class="color-button-row">
                         <button class="color-button" style="background-color: #ffffff !Important"
-                            onmousedown="setColor('#ffffff')" onclick="setColor('#ffffff')"></button>
+                            onmousedown="setColor(0)" onclick="setColor(0)"></button>
                         <button class="color-button" style="background-color: #c1c1c1 !Important"
-                            onmousedown="setColor('#c1c1c1')" onclick="setColor('#c1c1c1')"></button>
+                            onmousedown="setColor(1)" onclick="setColor(1)"></button>
                         <button class="color-button" style="background-color: #ef130b !Important"
-                            onmousedown="setColor('#ef130b')" onclick="setColor('#ef130b')"></button>
+                            onmousedown="setColor(2)" onclick="setColor(2)"></button>
                         <button class="color-button" style="background-color: #ff7100 !Important"
-                            onmousedown="setColor('#ff7100')" onclick="setColor('#ff7100')"></button>
+                            onmousedown="setColor(3)" onclick="setColor(3)"></button>
                         <button class="color-button" style="background-color: #ffe400 !Important"
-                            onmousedown="setColor('#ffe400')" onclick="setColor('#ffe400')"></button>
+                            onmousedown="setColor(4)" onclick="setColor(4)"></button>
                         <button class="color-button" style="background-color: #00cc00 !Important"
-                            onmousedown="setColor('#00cc00')" onclick="setColor('#00cc00')"></button>
+                            onmousedown="setColor(5)" onclick="setColor(5)"></button>
                         <button class="color-button" style="background-color: #00b2ff !Important"
-                            onmousedown="setColor('#00b2ff')" onclick="setColor('#00b2ff')"></button>
+                            onmousedown="setColor(6)" onclick="setColor(6)"></button>
                         <button class="color-button" style="background-color: #231fd3 !Important"
-                            onmousedown="setColor('#231fd3')" onclick="setColor('#231fd3')"></button>
+                            onmousedown="setColor(7)" onclick="setColor(7)"></button>
                         <button class="color-button" style="background-color: #a300ba !Important"
-                            onmousedown="setColor('#a300ba')" onclick="setColor('#a300ba')"></button>
+                            onmousedown="setColor(8)" onclick="setColor(8)"></button>
                         <button class="color-button" style="background-color: #d37caa !Important"
-                            onmousedown="setColor('#d37caa')" onclick="setColor('#d37caa')"></button>
+                            onmousedown="setColor(9)" onclick="setColor(9)"></button>
                         <button class="color-button" style="background-color: #a0522d !Important"
-                            onmousedown="setColor('#a0522d')" onclick="setColor('#a0522d')"></button>
+                            onmousedown="setColor(10)" onclick="setColor(10)"></button>
                         <button class="color-button" style="background-color: #592f2a !Important"
-                            onmousedown="setColor('#592f2a')" onclick="setColor('#592f2a')"></button>
+                            onmousedown="setColor(11)" onclick="setColor(11)"></button>
                         <button class="color-button" style="background-color: #ecbcb4 !Important"
-                            onmousedown="setColor('#ecbcb4')" onclick="setColor('#ecbcb4')"></button>
+                            onmousedown="setColor(12)" onclick="setColor(12)"></button>
                     </div>
                     <div class="color-button-row">
                         <button class="color-button" style="background-color: #000000 !Important"
-                            onmousedown="setColor('#000000')" onclick="setColor('#000000')"></button>
+                            onmousedown="setColor(13)" onclick="setColor(13)"></button>
                         <button class="color-button" style="background-color: #4c4c4c !Important"
-                            onmousedown="setColor('#4c4c4c')" onclick="setColor('#4c4c4c')"></button>
+                            onmousedown="setColor(14)" onclick="setColor(14)"></button>
                         <button class="color-button" style="background-color: #740b07 !Important"
-                            onmousedown="setColor('#740b07')" onclick="setColor('#740b07')"></button>
+                            onmousedown="setColor(15)" onclick="setColor(15)"></button>
                         <button class="color-button" style="background-color: #c23800 !Important"
-                            onmousedown="setColor('#c23800')" onclick="setColor('#c23800')"></button>
+                            onmousedown="setColor(16)" onclick="setColor(16)"></button>
                         <button class="color-button" style="background-color: #e8a200 !Important"
-                            onmousedown="setColor('#e8a200')" onclick="setColor('#e8a200')"></button>
+                            onmousedown="setColor(17)" onclick="setColor(17)"></button>
                         <button class="color-button" style="background-color: #005510 !Important"
-                            onmousedown="setColor('#005510')" onclick="setColor('#005510')"></button>
+                            onmousedown="setColor(18)" onclick="setColor(18)"></button>
                         <button class="color-button" style="background-color: #00569e !Important"
-                            onmousedown="setColor('#00569e')" onclick="setColor('#00569e')"></button>
+                            onmousedown="setColor(19)" onclick="setColor(19)"></button>
                         <button class="color-button" style="background-color: #0e0865 !Important"
-                            onmousedown="setColor('#0e0865')" onclick="setColor('#0e0865')"></button>
+                            onmousedown="setColor(20)" onclick="setColor(20)"></button>
                         <button class="color-button" style="background-color: #550069 !Important"
-                            onmousedown="setColor('#550069')" onclick="setColor('#550069')"></button>
+                            onmousedown="setColor(21)" onclick="setColor(21)"></button>
                         <button class="color-button" style="background-color: #a75574 !Important"
-                            onmousedown="setColor('#a75574')" onclick="setColor('#a75574')"></button>
+                            onmousedown="setColor(22)" onclick="setColor(22)"></button>
                         <button class="color-button" style="background-color: #63300d !Important"
-                            onmousedown="setColor('#63300d')" onclick="setColor('#63300d')"></button>
+                            onmousedown="setColor(23)" onclick="setColor(23)"></button>
                         <button class="color-button" style="background-color: #492f31 !Important"
-                            onmousedown="setColor('#492f31')" onclick="setColor('#492f31')"></button>
+                            onmousedown="setColor(24)" onclick="setColor(24)"></button>
                         <button class="color-button" style="background-color: #d1a3a4 !Important"
-                            onmousedown="setColor('#d1a3a4')" onclick="setColor('#d1a3a4')"></button>
+                            onmousedown="setColor(25)" onclick="setColor(25)"></button>
                     </div>
                 </div>
                 <!--The following buttons als override onmousedown and onmouseup to make
@@ -555,6 +555,35 @@
         let sound = localStorage.getItem("sound") !== "false";
         updateSoundIcon();
 
+        const colorMap = [
+            {hex: '#ffffff', rgb: hexStringToRgbColorObject('#ffffff')},
+            {hex: '#c1c1c1', rgb: hexStringToRgbColorObject('#c1c1c1')},
+            {hex: '#ef130b', rgb: hexStringToRgbColorObject('#ef130b')},
+            {hex: '#ff7100', rgb: hexStringToRgbColorObject('#ff7100')},
+            {hex: '#ffe400', rgb: hexStringToRgbColorObject('#ffe400')},
+            {hex: '#00cc00', rgb: hexStringToRgbColorObject('#00cc00')},
+            {hex: '#00b2ff', rgb: hexStringToRgbColorObject('#00b2ff')},
+            {hex: '#231fd3', rgb: hexStringToRgbColorObject('#231fd3')},
+            {hex: '#a300ba', rgb: hexStringToRgbColorObject('#a300ba')},
+            {hex: '#d37caa', rgb: hexStringToRgbColorObject('#d37caa')},
+            {hex: '#a0522d', rgb: hexStringToRgbColorObject('#a0522d')},
+            {hex: '#592f2a', rgb: hexStringToRgbColorObject('#592f2a')},
+            {hex: '#ecbcb4', rgb: hexStringToRgbColorObject('#ecbcb4')},
+            {hex: '#000000', rgb: hexStringToRgbColorObject('#000000')},
+            {hex: '#4c4c4c', rgb: hexStringToRgbColorObject('#4c4c4c')},
+            {hex: '#740b07', rgb: hexStringToRgbColorObject('#740b07')},
+            {hex: '#c23800', rgb: hexStringToRgbColorObject('#c23800')},
+            {hex: '#e8a200', rgb: hexStringToRgbColorObject('#e8a200')},
+            {hex: '#005510', rgb: hexStringToRgbColorObject('#005510')},
+            {hex: '#00569e', rgb: hexStringToRgbColorObject('#00569e')},
+            {hex: '#0e0865', rgb: hexStringToRgbColorObject('#0e0865')},
+            {hex: '#550069', rgb: hexStringToRgbColorObject('#550069')},
+            {hex: '#a75574', rgb: hexStringToRgbColorObject('#a75574')},
+            {hex: '#63300d', rgb: hexStringToRgbColorObject('#63300d')},
+            {hex: '#492f31', rgb: hexStringToRgbColorObject('#492f31')},
+            {hex: '#d1a3a4', rgb: hexStringToRgbColorObject('#d1a3a4')}
+        ];
+
         const set_dummy_word_hints = () => {
             // Dummy wordhint to prevent layout changes.
             applyWordHints([{
@@ -881,13 +910,18 @@
             chooseToolNoUpdate(rubber);
         }
 
-        let localColor;
-        setColorNoUpdate(sessionStorage.getItem("local_color") ?? "#000000");
+        let localColor, localColorIndex;
 
-        updateDrawingStateUI();
+        function indexToHexColor(index) {
+            return colorMap[index].hex;
+        }
 
-        function setColor(colorAsHex) {
-            setColorNoUpdate(colorAsHex);
+        function indexToRgbColor(index) {
+            return colorMap[index].rgb;
+        }
+
+        function setColor(index) {
+            setColorNoUpdate(index);
 
             // If we select a new color, we assume we don't want to use the
             // rubber anymore and automatically switch to the pen.
@@ -902,11 +936,15 @@
             }
         }
 
-        function setColorNoUpdate(colorAsHex) {
-            localColor = hexStringToRgbColorObject(colorAsHex);
-            sessionStorage.setItem("local_color", colorAsHex);
+        function setColorNoUpdate(index) {
+            localColorIndex = index;
+            localColor = indexToRgbColor(index);
+            sessionStorage.setItem("local_color", JSON.stringify(index));
         }
 
+        setColorNoUpdate(JSON.parse(sessionStorage.getItem("local_color")) ?? 13 /* black*/);
+        updateDrawingStateUI();
+
         function setLineWidth(value) {
             setLineWidthNoUpdate(value);
             updateDrawingStateUI();
@@ -1242,14 +1280,15 @@
                     appendMessage("non-guessing-player-message", parsed.data.author, parsed.data.content);
                 } else if (parsed.type === "line") {
                     drawLine(context, parsed.data.x, parsed.data.y,
-                        parsed.data.x2, parsed.data.y2, parsed.data.color,
+                        parsed.data.x2, parsed.data.y2,
+                        indexToRgbColor(parsed.data.color),
                         parsed.data.width);
                 } else if (parsed.type === "fill") {
                     if (floodfillUint8ClampedArray(
                         imageData.data,
                         parsed.data.x,
                         parsed.data.y,
-                        parsed.data.color,
+                        indexToRgbColor(parsed.data.color),
                         imageData.width,
                         imageData.height)) {
                         context.putImageData(imageData, 0, 0);
@@ -1771,13 +1810,13 @@
                         floodfillUint8ClampedArray(
                             imageData.data,
                             drawData.x, drawData.y,
-                            drawData.color,
+                            indexToRgbColor(drawData.color),
                             imageData.width, imageData.height);
                     } else if (drawElement.type === "line") {
                         _drawLine(
                             drawData.x, drawData.y,
                             drawData.x2, drawData.y2,
-                            drawData.color,
+                            indexToRgbColor(drawData.color),
                             drawData.width);
                     } else {
                         console.log("Unknown draw element type: " + drawData.type);
@@ -1874,7 +1913,7 @@
             //clicked and 0 won't be the uninitialized state.
             if (allowDrawing && event.button === 0) {
                 if (localTool === fillBucket) {
-                    fillAndSendEvent(context, event.offsetX, event.offsetY, localColor);
+                    fillAndSendEvent(context, event.offsetX, event.offsetY, localColorIndex);
                 } else {
                     drawLineAndSendEvent(context, event.offsetX, event.offsetY, event.offsetX, event.offsetY);
                 }
@@ -1973,17 +2012,18 @@
         // Clear initially, as it will be black otherwise.
         clear(context);
 
-        function fillAndSendEvent(context, x, y, color) {
+        function fillAndSendEvent(context, x, y, colorIndex) {
             const xScaled = convertToServerCoordinate(x);
             const yScaled = convertToServerCoordinate(y);
+            const color = indexToRgbColor(colorIndex);
             if (floodfillUint8ClampedArray(imageData.data, xScaled, yScaled, color, imageData.width, imageData.height)) {
                 context.putImageData(imageData, 0, 0);
                 const fillInstruction = {
                     type: "fill",
                     data: {
                         x: xScaled,
                         y: yScaled,
-                        color: color
+                        color: colorIndex,
                     },
                 };
                 socket.send(JSON.stringify(fillInstruction));
@@ -1992,6 +2032,7 @@
 
         function drawLineAndSendEvent(context, x1, y1, x2, y2) {
             const color = localTool === rubber ? rubberColor : localColor;
+            const colorIndex = localTool === rubber ? 0 /* white */ : localColorIndex;
 
             const x1Scaled = convertToServerCoordinate(x1);
             const y1Scaled = convertToServerCoordinate(y1);
@@ -2007,7 +2048,7 @@
                     y: y1Scaled,
                     x2: x2Scaled,
                     y2: y2Scaled,
-                    color: color,
+                    color: colorIndex,
                     width: localLineWidth,
                 }
             };

internal/frontend/templates/lobby.html

@@ -94,30 +94,32 @@ type WordHint struct {
 	Underline bool `json:"underline"`
 }
 
-// RGBColor represents a 24-bit color consisting of red, green and blue.
-type RGBColor struct {
-	R uint8 `json:"r"`
-	G uint8 `json:"g"`
-	B uint8 `json:"b"`
-}
-
 type LineEvent struct {
 	Type string `json:"type"`
+	// Data contains the coordinates, stroke width and color. The coors here
+	// aren't uint16, as it allows us to easily allow implementing drawing on
+	// the client, where the user drags the line over the canvas border.
+	// If we were to not accept out of bounds values, the lines would be chopped
+	// off before reaching the canvas border.
 	Data struct {
-		X     int16    `json:"x"`
-		Y     int16    `json:"y"`
-		X2    int16    `json:"x2"`
-		Y2    int16    `json:"y2"`
-		Color RGBColor `json:"color"`
-		Width uint8    `json:"width"`
+		X  int16 `json:"x"`
+		Y  int16 `json:"y"`
+		X2 int16 `json:"x2"`
+		Y2 int16 `json:"y2"`
+		// Color is a color index. This was previously an rgb value, but since
+		// the values are always the same, using an index saves bandwidth.
+		Color uint8 `json:"color"`
+		Width uint8 `json:"width"`
 	} `json:"data"`
 }
 
 type FillEvent struct {
 	Data *struct {
-		X     uint16   `json:"x"`
-		Y     uint16   `json:"y"`
-		Color RGBColor `json:"color"`
+		X uint16 `json:"x"`
+		Y uint16 `json:"y"`
+		// Color is a color index. This was previously an rgb value, but since
+		// the values are always the same, using an index saves bandwidth.
+		Color uint8 `json:"color"`
 	} `json:"data"`
 	Type string `json:"type"`
 }