new color scheme

index.html

@@ -37,9 +37,29 @@
       <span class="close">&times;</span>
       <p>keybindings:</p>
       <table>
+        <tr>
+          <th>key</th>
+          <th>action</th>
+          <th>key</th>
+          <th>action</th>
+        </tr>
         <tr>
           <td>h</td>
-          <td>left</td>
+          <td>move left</td>
+          <td>l</td>
+          <td>move righ</td>
+        </tr>
+        <tr>
+          <td>j</td>
+          <td>move down</td>
+          <td>k</td>
+          <td>move up</td>
+        </tr>
+        <tr>
+          <td>x</td>
+          <td>delete char</td>
+          <td>k</td>
+          <td>up</td>
         </tr>
       </table>
     </div>

sketch.js

@@ -8,24 +8,24 @@ class Cell {
     this.word = new Array(2)
     this.neighbour = new Array(4); //0=left, 1=top, 2=right, 3=bot
   }
-  drawChar = function (color, fontcolor = "black") {
-    this.drawCell(color);
+  drawChar = function (color, fontcolor = "black", strokeColor = "black") {
+    //drawCell
+    ctx.fillStyle = color;
+    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = 2;
+    ctx.fillRect(this.x * size, this.y * size, size, size);
+    ctx.strokeRect(this.x * size, this.y * size, size, size);
+    //draw text
     ctx.fillStyle = fontcolor;
     ctx.font = size / 2 + "px monospace";
     ctx.fillText(this.currentChar.toUpperCase(), this.x * size + size / 3, this.y * size + size / 1.5);
-
+    //draw hintNr
     if (this.hintNr) {
       ctx.fillStyle = "black";
       ctx.font = "14px Consolas";
       ctx.fillText(this.hintNr, this.x * size + 4, (this.y) * size + 15);
     }
   }
-  drawCell = function (fillstyle) {  //draw field
-    ctx.fillStyle = fillstyle;
-    ctx.strokeStyle = "#4717f6";
-    ctx.fillRect(this.x * size, this.y * size, size, size);
-    ctx.strokeRect(this.x * size, this.y * size, size, size);
-  }
 }
 class Word {
   static number = 0;
@@ -34,7 +34,8 @@ class Word {
   constructor(clue, word, x, y, direction) {
     this.chars = new Array();
     this.direction = direction;
-    this.highlightColor = direction ? '#c8b9fc' : "#CFE9F5";
+    // this.highlightColor = direction ? '#c8b9fc' : '#CFE9F5';
+    this.highlightColor = direction ? '#fff5bc' : '#ffddbd';
     if (!mycell[x][y].hintNr) {
       mycell[x][y].hintNr = ++Word.number;
     }
@@ -68,35 +69,43 @@ class Word {
   highlight = function () {
     let filled = true;
     this.li.scrollIntoView({ behavior: 'smooth' });
-    // this.li.style.color = m_orientation==this.direction?"red":"black";
     this.li.style.color = "black";
     this.li.style.background = this.highlightColor;
     this.chars.forEach(element => {
       if (element == activeCell)
-        element.drawChar(m_orientation ? '#7e5df9' : '#80C4E4');
+        element.drawChar(m_orientation ? '#ffe553' : '#ffab58');
       else {
           element.drawChar(this.highlightColor);
       }
       if (element.currentChar == "")
         filled = false;
     });
-    //TODO: !!  
     if (filled) {
       this.chars.forEach(element => {
         let color = this.highlightColor;
         if (element == activeCell)
-          color = m_orientation ? '#7e5df9' : '#80C4E4';
+          color = m_orientation ? '#ffe553' : '#ffab58';
         if (element.currentChar.toUpperCase() == element.actualChar.toUpperCase()) {
           element.drawChar(color, "green");
         }
         else
-          element.drawChar(color, "red");
+          element.drawChar(color, "#bf060b");
       });
     }
+    //highlight
+    ctx.strokeStyle = "#bf060b";
+    if (this.direction == m_orientation) {
+      this.li.style.borderColor = "#bf060b";
+      if (this.direction)
+        ctx.strokeRect(this.chars[0].x * size, this.chars[0].y * size, size, this.chars.length * size);
+      else
+        ctx.strokeRect(this.chars[0].x * size, this.chars[0].y * size, this.chars.length * size, size);
+    }
   }
   clearHighlight = function () {
     this.li.style.color = "white";
     this.li.style.background = 'none';
+    this.li.style.borderColor = "transparent";
     this.chars.forEach(element => {
       element.drawChar('white');
     });
@@ -206,6 +215,7 @@ function logKey(e) {
         case "I": //start of horizontal word
           if (activeCell.word[0])
             activeCell = activeCell.word[0].chars[0];
+        case "R":
         case "i":
           activeMode = mode.insert;
           m_orientation = 0;
@@ -228,6 +238,9 @@ function logKey(e) {
         case "r":
           activeMode = mode.replace;
           break;
+        case "`":
+          activeCell.currentChar = activeCell.actualChar;
+          break;
         default:
           break;
       }

style.css

+:root{
+  /* --bg-color: #074079; */
+  --bg-color: #2b2a33;
+}
 body{
-    background-color:#4717f6;
+    background-color: var(--bg-color);
     color:white;
     font-family:Courier;
     font-size: 2em;
@@ -29,6 +33,7 @@ ol{
 }
 li{
   cursor: pointer;
+  border: 2px solid transparent;
 }
 
 #canvasWrapper{
@@ -60,8 +65,8 @@ canvas{
 
 /* Modal Content */
 .modal-content {
-  /* background-color: #fefefe; */
-  background-color: #4717f6;
+  background-color: var(--bg-color);
+  color:white;
   margin: auto;
   padding: 20px;
   box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
@@ -89,6 +94,20 @@ canvas{
   font-size: 1.2em;
   width: 1.2em;
 }
+.modal-content table{
+  margin: 0 auto;
+}
+.modal-content tr{
+  /* margin: 5px; */
+}
+.modal-content th{
+  border: 1px white solid;
+  padding: 0px 1em;
+}
+.modal-content td{
+  border: 1px white solid;
+  text-align: center;
+}
 
 /* ===============statusBar div=============== */
 #status{