From 331b06cc11f451684d576c18dc22f4bf4861c47c Mon Sep 17 00:00:00 2001
From: Karl Fritsche <github@attrib.org>
Date: Sun, 14 Jun 2020 21:00:20 +0200
Subject: [PATCH] WIP: Testing a approach for a colorblind modus

---
 src/js/game/colors.js           | 45 ++++++++++++++++++++++++++++++---
 src/js/game/items/color_item.js | 19 ++++++++++----
 src/js/game/shape_definition.js | 26 ++++++++++++++++++-
 3 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/src/js/game/colors.js b/src/js/game/colors.js
index 6d483771..ce971fc1 100644
--- a/src/js/game/colors.js
+++ b/src/js/game/colors.js
@@ -35,14 +35,14 @@ for (const key in enumColorToShortcode) {
 /** @enum {string} */
 export const enumColorsToHexCode = {
     [enumColors.red]: "#ff666a",
-    [enumColors.green]: "#78ff66",
+    [enumColors.green]: "#2afc0e",
     [enumColors.blue]: "#66a7ff",
 
     // red + green
-    [enumColors.yellow]: "#fcf52a",
+    [enumColors.yellow]: "#fff509",
 
     // red + blue
-    [enumColors.purple]: "#dd66ff",
+    [enumColors.purple]: "#c70cfa",
 
     // blue + green
     [enumColors.cyan]: "#00fcff",
@@ -165,3 +165,42 @@ for (const colorA in enumColorMixingResults) {
         }
     }
 }
+
+// @todo: generate this from enumColorMixingResults
+export const enumColorBaseColor = {
+    [c.red]: {
+        [c.red]: true,
+        [c.green]: false,
+        [c.blue]: false,
+    },
+    [c.green]: {
+        [c.red]: false,
+        [c.green]: true,
+        [c.blue]: false,
+    },
+    [c.blue]: {
+        [c.red]: false,
+        [c.green]: false,
+        [c.blue]: true,
+    },
+    [c.yellow]: {
+        [c.red]: true,
+        [c.green]: true,
+        [c.blue]: false,
+    },
+    [c.purple]: {
+        [c.red]: true,
+        [c.green]: false,
+        [c.blue]: true,
+    },
+    [c.cyan]: {
+        [c.red]: false,
+        [c.green]: true,
+        [c.blue]: true,
+    },
+    [c.white]: {
+        [c.red]: true,
+        [c.green]: true,
+        [c.blue]: true,
+    },
+}
diff --git a/src/js/game/items/color_item.js b/src/js/game/items/color_item.js
index b2a3cd74..c10d4adf 100644
--- a/src/js/game/items/color_item.js
+++ b/src/js/game/items/color_item.js
@@ -3,7 +3,7 @@ import { smoothenDpi } from "../../core/dpi_manager";
 import { DrawParameters } from "../../core/draw_parameters";
 import { types } from "../../savegame/serialization";
 import { BaseItem } from "../base_item";
-import { enumColors, enumColorsToHexCode } from "../colors";
+import { enumColors, enumColorsToHexCode, enumColorBaseColor } from "../colors";
 import { THEME } from "../theme";
 
 export class ColorItem extends BaseItem {
@@ -74,16 +74,25 @@ export class ColorItem extends BaseItem {
 
         context.fillStyle = enumColorsToHexCode[this.color];
         context.strokeStyle = THEME.items.outline;
-        context.lineWidth = 2 * THEME.items.outlineWidth;
+        context.lineWidth = THEME.items.outlineWidth;
+        // red
         context.beginCircle(2, -1, 3);
         context.stroke();
-        context.fill();
+        if (enumColorBaseColor[this.color][enumColors.red]) {
+            context.fill();
+        }
+        // green
         context.beginCircle(-2, -1, 3);
         context.stroke();
-        context.fill();
+        if (enumColorBaseColor[this.color][enumColors.green]) {
+            context.fill();
+        }
+        // blue
         context.beginCircle(0, 2, 3);
         context.closePath();
         context.stroke();
-        context.fill();
+        if (enumColorBaseColor[this.color][enumColors.blue]) {
+            context.fill();
+        }
     }
 }
diff --git a/src/js/game/shape_definition.js b/src/js/game/shape_definition.js
index 64cc3eab..fb979138 100644
--- a/src/js/game/shape_definition.js
+++ b/src/js/game/shape_definition.js
@@ -6,7 +6,7 @@ import { DrawParameters } from "../core/draw_parameters";
 import { createLogger } from "../core/logging";
 import { Vector } from "../core/vector";
 import { BasicSerializableObject, types } from "../savegame/serialization";
-import { enumColors, enumColorsToHexCode, enumColorToShortcode, enumShortcodeToColor } from "./colors";
+import { enumColors, enumColorsToHexCode, enumColorToShortcode, enumShortcodeToColor, enumColorBaseColor } from "./colors";
 import { THEME } from "./theme";
 
 const rusha = require("rusha");
@@ -346,6 +346,30 @@ export class ShapeDefinition extends BasicSerializableObject {
                 context.fill();
                 context.stroke();
 
+                if (color !== enumColors.uncolored) {
+                    const radius = (quadrantSize * layerScale) / 8;
+                    console.log(radius, centerQuadrantX, centerQuadrantY)
+                    context.lineWidth = THEME.items.outlineWidth / 4;
+                    context.beginCircle(- 2 * radius / 3, 0, radius );
+                    context.stroke();
+                    if (enumColorBaseColor[color][enumColors.green]) {
+                        context.fillStyle = enumColorsToHexCode[enumColors.green];
+                        context.fill();
+                    }
+                    context.beginCircle( 2 * radius / 3, 0, radius);
+                    context.stroke();
+                    if (enumColorBaseColor[color][enumColors.red]) {
+                        context.fillStyle = enumColorsToHexCode[enumColors.red];
+                        context.fill();
+                    }
+                    context.beginCircle(0, radius, radius);
+                    context.stroke();
+                    if (enumColorBaseColor[color][enumColors.blue]) {
+                        context.fillStyle = enumColorsToHexCode[enumColors.blue];
+                        context.fill();
+                    }
+                }
+
                 context.rotate(-rotation);
                 context.translate(-centerQuadrantX, -centerQuadrantY);
             }