Merge pull request #398 from RAIRLab/397-feature-clean-dream-theme-st…

…ream Fewer themes!
RAIRLab · Jul 24, 2024 · 5841a38 · 5841a38
2 parents ccec3e4 + 883fe49
commit 5841a38
Show file tree

Hide file tree

Showing 11 changed files with 176 additions and 254 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/CSS/themes.css b/src/CSS/themes.css
@@ -2,34 +2,11 @@
  * @author James Oswald
  */
 
-/* Default Theme, Huda-Tiwari Nature Theme*/
-:root {
-    --global-background : #ffffff;
-    --p-text : #000000;
-    --canvas-items : #000000;
-    --good-placement : #00FF00;
-    --bad-placement : #FF0000;
-    --header-border: 2px solid #000000;
-    --header-bg : #a6b6d9;
-    --toolbar-border: 2px solid black;
-    --toolbar-bg: #94b09c;
-    --subbar-border: 2px solid black;
-    --subbar-bg: #bed7be;
-    --sidebar-border: 2px solid #000000;
-    --sidebar-bg: #526D82;
-    --mode-btn-border: 2px solid #000000;
-    --mode-btn-bg: buttonface;
-    --mode-btn-icon-color : #000000;
-    --mode-btn-radius: 25%;
-    --mode-btn-hover-bg: #d4e8f5;
-    --mode-btn-shadow: 1px 2px 1px #000000;
-    --mode-btn-press-shadow: inset 0px 0px 5px #000000; 
-}
-
-[data-theme="Wireframe"] {
+[data-theme="Light-Wireframe"] {
     --global-background : #ffffff;
     --p-text : #000000;
     --canvas-bg : #ffffff;
+    --canvas-odd-bg : #c3c3c3;
     --canvas-items : #000000;
     --good-placement : #00FF00;
     --bad-placement : #FF0000;
@@ -57,6 +34,7 @@
     --global-background : #000000;
     --p-text : var(--dark-highlights);
     --canvas-bg : #000000;
+    --canvas-odd-bg : #6b6b6b;
     --canvas-items : var(--dark-highlights);
     --good-placement : #00ff00;
     --bad-placement : #ff0000;
@@ -77,125 +55,55 @@
     --mode-btn-press-shadow: none; 
 }
 
-[data-theme="vs-code"] {
-    --p-text : #dcdcaa;
-    --canvas-bg : #1f1f1f;
-    --canvas-items : #9cdcfe;
-    --good-placement : #73c991;
-    --bad-placement : #f44747;
-    --header-border: 1px solid #cccccc;
-    --header-bg : #2b2b2b;
-    --toolbar-border: 1px solid #cccccc;
-    --toolbar-bg: #2b2b2b;
-    --subbar-border: 1px solid #cccccc;
-    --subbar-bg: #2b2b2b;
-    --sidebar-border: 1px solid #cccccc;
-    --sidebar-bg: #2b2b2b;
-    --mode-btn-border: 1px solid #cccccc;
-    --mode-btn-bg: #2b2b2b;
-    --mode-btn-icon-color : #868686;
-    --mode-btn-radius: 10%;
-    --mode-btn-hover-bg: none;
-    --mode-btn-shadow: none;
-    --mode-btn-press-shadow: none; 
-}
-
-/* Ryan Theme */
-[data-theme="Peirced-from-Within"] {
-    --dark-highlights : #b11d20;
-    --p-text : #f5d51d;
-    --canvas-bg : #07140e;
-    --canvas-items : #f4f3cd;
-    --good-placement : #46ff00;
-    --bad-placement : #c60003;
-    --header-border: 1px solid #0a1e0a;
-    --header-bg : #151715;
-    --toolbar-border: 1px solid #02281c;
-    --toolbar-bg: #150f12;
-    --subbar-border: 1px solid #05281c;
-    --subbar-bg: #201412;
-    --sidebar-border: 1px solid #05281c;
-    --sidebar-bg: #05141d;
-    --mode-btn-border: 1px solid #05281c;
-    --mode-btn-bg: r#2b2b2b;
-    --mode-btn-icon-color : #868686;
-    --mode-btn-radius: 0%;
-    --mode-btn-hover-bg: none;
-    --mode-btn-shadow: none;
-    --mode-btn-press-shadow: none; 
-}
-
-/* Dawn Theme */
-[data-theme="Vampire-Core"] {
+/* Following two schemes altered according this link: 
+https://davidmathlogic.com/colorblind/#%23000000-%23E69F00-%2356B4E9-%23009E73-%23F0E442-%230072B2-%23D55E00-%23CC79A7 */
+[data-theme="Light-Colorblind"] {
     --global-background : #ffffff;
-    --p-text : #ffffff;
-    --canvas-bg : #a00404;
+    --p-text : #000000;
+    --canvas-bg : #ffffff;
+    --canvas-odd-bg : #c3c3c3;
     --canvas-items : #000000;
-    --good-placement : #ffffff;
-    --bad-placement : #e480c6;
-    --header-border: 2px solid #ffffff;
-    --header-bg : #000000;
-    --toolbar-border: 2px solid #ffffff;
-    --toolbar-bg: #000000;
-    --subbar-border: 2px solid #ffffff;
-    --subbar-bg: #000000;
-    --sidebar-border: 2px solid #ffffff;
-    --sidebar-bg: #000000;
-    --mode-btn-border: 2px solid #a00404;
-    --mode-btn-bg: #a00404;;
-    --mode-btn-icon-color :#ffffff;
-    --mode-btn-radius: 25%;
-    --mode-btn-hover-bg: none;
-    --mode-btn-shadow: none;
-    --mode-btn-press-shadow: inset 0px 0px 5px #ffffff; 
-}
-
-/* Anusha Theme */
-[data-theme="Peircing-the-Galaxy"] {
-    --global-background : #ffffff;
-    --p-text : #85d8ff;
-    --canvas-bg : #34034a;
-    --canvas-items : #ffffff;
-    --good-placement : #85d8ff;
-    --bad-placement : #f59696;
+    --good-placement : #009E73;
+    --bad-placement : #D55E00;
     --header-border: 2px solid #000000;
-    --header-bg : #270968;
+    --header-bg : #ffffff;
     --toolbar-border: 2px solid #000000;
-    --toolbar-bg: #2b0962;
+    --toolbar-bg: #ffffff;
     --subbar-border: 2px solid #000000;
-    --subbar-bg: #350953;
+    --subbar-bg: #ffffff;
     --sidebar-border: 2px solid #000000;
-    --sidebar-bg: #470d60;
+    --sidebar-bg: #ffffff;
     --mode-btn-border: 2px solid #000000;
-    --mode-btn-bg: #6c2da2;;
-    --mode-btn-icon-color :#ffffff;
-    --mode-btn-radius: 25%;
+    --mode-btn-bg: buttonface;
+    --mode-btn-icon-color : #000000;
+    --mode-btn-radius: 0%;
     --mode-btn-hover-bg: none;
-    --mode-btn-shadow: 1px 2px 1px #000000;
-    --mode-btn-press-shadow: inset 0px 0px 5px #000000;
+    --mode-btn-shadow: none;
+    --mode-btn-press-shadow: inset 0px 0px 5px #552898; 
 }
 
-/* Subrina Theme */
-[data-theme="Ocean-Pearl"] {
-    --global-background : #ffffff;
-    --p-text : #ffffff;
-    --canvas-bg : #e2b3ef;
-    --canvas-items : #5d95a3;
-    --good-placement : #ffffff;
-    --bad-placement : #8dc4d2;
-    --header-border: 2px solid #ffffff;
-    --header-bg : #8dc4d2;
-    --toolbar-border: 2px solid #ffffff;
-    --toolbar-bg: #8dc4d2;
-    --subbar-border: 2px solid #ffffff;
-    --subbar-bg: #8dc4d2;
-    --sidebar-border: 2px solid #ffffff;
-    --sidebar-bg: #8dc4d2;
-    --mode-btn-border: 2px solid #bb77ce;
-    --mode-btn-bg: #bb77ce;;
-    --mode-btn-icon-color :#ffffff;
-    --mode-btn-radius: 25%;
+[data-theme="Dark-Colorblind"] {
+    --dark-highlights : #762eac;
+    --global-background : #000000;
+    --p-text : var(--dark-highlights);
+    --canvas-bg : #000000;
+    --canvas-odd-bg : #6b6b6b;
+    --canvas-items : var(--dark-highlights);
+    --good-placement : #009E73;
+    --bad-placement : #D55E00;
+    --header-border: 2px solid var(--dark-highlights);
+    --header-bg : #000000;
+    --toolbar-border: 2px solid var(--dark-highlights);
+    --toolbar-bg: #000000;
+    --subbar-border: 2px solid var(--dark-highlights);
+    --subbar-bg: #000000;
+    --sidebar-border: 2px solid var(--dark-highlights);
+    --sidebar-bg: #000000;
+    --mode-btn-border: 2px solid var(--dark-highlights);
+    --mode-btn-bg: #000000;
+    --mode-btn-icon-color : var(--dark-highlights);
+    --mode-btn-radius: 50%;
     --mode-btn-hover-bg: none;
     --mode-btn-shadow: none;
-    --mode-btn-press-shadow: inset 0px 0px 5px #ffffff; 
+    --mode-btn-press-shadow: none; 
 }
diff --git a/src/ProofTools/DeiterationTool.ts b/src/ProofTools/DeiterationTool.ts
@@ -9,7 +9,7 @@ import {AEGTree} from "../AEG/AEGTree";
 import {AtomNode} from "../AEG/AtomNode";
 import {CutNode} from "../AEG/CutNode";
 import {getCurrentProofTree} from "./ProofToolUtils";
-import {highlightNode, redrawProof, redrawTree} from "../SharedToolUtils/DrawUtils";
+import {highlightNode, redrawProof} from "../SharedToolUtils/DrawUtils";
 import {illegalColor} from "../Themes";
 import {offset} from "../SharedToolUtils/DragTool";
 import {Point} from "../AEG/Point";
@@ -118,7 +118,6 @@ function determineLegalityAndHighlightAsIllegal(): void {
         if (tempParent !== null) {
             tempParent.remove(currentPoint);
         }
-        redrawTree(tempTree);
         highlightNode(currentNode, illegalColor());
         tempTree.insert(currentNode);
     } else {

diff --git a/src/ProofTools/DoubleCutDeletionTool.ts b/src/ProofTools/DoubleCutDeletionTool.ts
@@ -8,7 +8,7 @@
 import {AEGTree} from "../AEG/AEGTree";
 import {AtomNode} from "../AEG/AtomNode";
 import {CutNode} from "../AEG/CutNode";
-import {drawCut, redrawProof, redrawTree} from "../SharedToolUtils/DrawUtils";
+import {drawCut, redrawProof} from "../SharedToolUtils/DrawUtils";
 import {getCurrentProofTree} from "./ProofToolUtils";
 import {illegalColor} from "../Themes";
 import {offset} from "../SharedToolUtils/DragTool";
@@ -152,7 +152,6 @@ function determineLegalityAndHighlightAsIllegal(): void {
             tempLower.children = [];
         }
 
-        redrawTree(tempTree);
         highlightDoubleCutAsIllegal(currentNode);
     } else {
         legalNode = false;

diff --git a/src/ProofTools/ErasureTool.ts b/src/ProofTools/ErasureTool.ts
@@ -10,7 +10,7 @@ import {AEGTree} from "../AEG/AEGTree";
 import {AtomNode} from "../AEG/AtomNode";
 import {CutNode} from "../AEG/CutNode";
 import {getCurrentProofTree} from "./ProofToolUtils";
-import {highlightNode, redrawProof, redrawTree} from "../SharedToolUtils/DrawUtils";
+import {highlightNode, redrawProof} from "../SharedToolUtils/DrawUtils";
 import {illegalColor} from "../Themes";
 import {offset} from "../SharedToolUtils/DragTool";
 import {Point} from "../AEG/Point";
@@ -122,7 +122,6 @@ function determineLegalityAndHighlightAsIllegal(): void {
             tempParent.remove(currentPoint);
         }
 
-        redrawTree(tempTree);
         highlightNode(currentNode, illegalColor());
         tempTree.insert(currentNode);
     } else {

diff --git a/src/ProofTools/ProofMoveMultiTool.ts b/src/ProofTools/ProofMoveMultiTool.ts
@@ -61,7 +61,7 @@ export function proofMoveMultiMouseDown(event: MouseEvent): void {
             currentParent.remove(startingPoint);
         }
         legalNode = true;
-        redrawTree(currentProofTree);
+        redrawTree(TreeContext.currentProofStep!.tree);
         highlightNode(currentNode, legalColor());
     } else {
         legalNode = false;
@@ -84,7 +84,7 @@ export function proofMoveMultiMouseMove(event: MouseEvent): void {
             event.y - startingPoint.y
         );
 
-        redrawTree(currentProofTree);
+        redrawTree(TreeContext.currentProofStep!.tree);
         if (currentNode instanceof CutNode) {
             const tempCut: CutNode = alterCutChildren(currentNode, moveDifference);
             const color = isMoveLegal(currentProofTree, tempCut) ? legalColor() : illegalColor();

diff --git a/src/ProofTools/ProofMoveSingleTool.ts b/src/ProofTools/ProofMoveSingleTool.ts
@@ -70,7 +70,7 @@ export function proofMoveSingleMouseDown(event: MouseEvent): void {
         }
         legalNode = true;
 
-        redrawTree(currentProofTree);
+        redrawTree(TreeContext.currentProofStep!.tree);
         if (currentNode instanceof AtomNode) {
             drawAtom(currentNode, legalColor(), true);
         } else {
@@ -94,7 +94,7 @@ export function proofMoveSingleMouseMove(event: MouseEvent): void {
             event.y - startingPoint.y
         );
 
-        redrawTree(currentProofTree);
+        redrawTree(TreeContext.currentProofStep!.tree);
         if (currentNode instanceof CutNode) {
             const tempCut: CutNode = alterCut(currentNode, moveDifference);
             const color = isMoveLegal(currentProofTree, tempCut) ? legalColor() : illegalColor();

diff --git a/src/ProofTools/ProofResizeTool.ts b/src/ProofTools/ProofResizeTool.ts
@@ -19,7 +19,6 @@ import {
     determineDirection,
     drawCut,
     redrawProof,
-    redrawTree,
 } from "../SharedToolUtils/DrawUtils";
 import {CutNode} from "../AEG/CutNode";
 import {ellipseLargeEnough, resizeCut} from "../SharedToolUtils/EditModeUtils";
@@ -94,7 +93,7 @@ export function proofResizeMouseMove(event: MouseEvent): void {
         if (currentNode instanceof CutNode) {
             const tempCut: CutNode = resizeCut(currentNode, moveDifference, direction);
             if (tempCut.ellipse !== null) {
-                redrawTree(currentProofTree);
+                redrawProof();
                 const color = isValid(tempCut) ? legalColor() : illegalColor();
                 drawCut(tempCut, color);
                 determineAndChangeCursorStyle(color, "cursor: crosshair", "cursor: no-drop");

diff --git a/src/SharedToolUtils/DrawUtils.ts b/src/SharedToolUtils/DrawUtils.ts
@@ -11,7 +11,7 @@ import {AtomNode} from "../AEG/AtomNode";
 import {CutNode} from "../AEG/CutNode";
 import {Ellipse} from "../AEG/Ellipse";
 import {offset} from "./DragTool";
-import {legalColor, placedColor} from "../Themes";
+import {cssVar, legalColor, placedColor} from "../Themes";
 import {Point} from "../AEG/Point";
 import {TreeContext} from "../TreeContext";
 
@@ -184,7 +184,7 @@ export function redrawTree(tree: AEGTree, color?: string): void {
  * @param color Incoming color string. Defaults to the color of a valid placement if not passed in.
  */
 function redrawCut(incomingNode: CutNode, color?: string): void {
-    for (let i = 0; incomingNode.children.length > i; i++) {
+    for (let i = 0; i < incomingNode.children.length; i++) {
         if (incomingNode.children[i] instanceof AtomNode) {
             redrawAtom(<AtomNode>incomingNode.children[i]);
         } else {
@@ -203,6 +203,17 @@ function redrawCut(incomingNode: CutNode, color?: string): void {
             0,
             2 * Math.PI
         );
+        ctx.globalCompositeOperation = "destination-over";
+
+        ctx.fillStyle =
+            (TreeContext.modeState === "Draw" &&
+                TreeContext.tree.getLevel(incomingNode) % 2 === 0) ||
+            (TreeContext.modeState === "Proof" &&
+                TreeContext.currentProofStep!.tree.getLevel(incomingNode) % 2 === 0)
+                ? cssVar("--canvas-odd-bg")
+                : cssVar("--canvas-bg");
+        ctx.fill();
+        ctx.globalCompositeOperation = "source-over";
         ctx.stroke();
     }
 }

diff --git a/src/Themes.ts b/src/Themes.ts
@@ -25,7 +25,7 @@ let placedColorStr: string = cssVar("--canvas-items");
  * @param varName Variable from a CSS Style Sheet.
  * @returns Property value of varName in string form.
  */
-function cssVar(varName: string): string {
+export function cssVar(varName: string): string {
     return getComputedStyle(document.body).getPropertyValue(varName);
 }
 

diff --git a/src/index.html b/src/index.html
@@ -142,14 +142,10 @@
             <p>Theme:</p>
           </div>
           <select id="theme-select" name="theme-select" data-choose-theme>
-            <option value="">Nature</option>
-            <option value="Wireframe">Wireframe</option>
+            <option value="Light-Wireframe">Light-Wireframe</option>
             <option value="Dark-Wireframe">Dark-Wireframe</option>
-            <option value="vs-code">VS-Code</option>
-            <option value="Peirced-from-Within">Peirced-from-Within</option>
-            <option value="Vampire-Core">Vampire-Core</option>
-            <option value="Peircing-the-Galaxy">Peircing-the-Galaxy</option>
-            <option value="Ocean-Pearl">Ocean-Pearl</option>
+            <option value="Light-Colorblind">Light-Colorblind</option>
+            <option value="Dark-Colorblind">Dark-Colorblind</option>
           </select>
           <button type="button" onclick="saveMode()" title="Save File" class="toolButton">
             <i class="fa fa-floppy-o" aria-hidden="true"></i>