Skip to content
Snippets Groups Projects
Commit 176a427a authored by Silas Dohm's avatar Silas Dohm
Browse files

added replace mode, changed font to monospace, constrained allowed chars (a..z)

parent c6967f86
No related branches found
No related tags found
No related merge requests found
...@@ -11,7 +11,7 @@ class Cell { ...@@ -11,7 +11,7 @@ class Cell {
drawChar = function (color) { drawChar = function (color) {
this.drawCell(color); this.drawCell(color);
ctx.fillStyle = "black"; ctx.fillStyle = "black";
ctx.font = size/2+"px RobotoWeb"; ctx.font = size / 2 + "px monospace";
ctx.fillText(this.currentChar.toUpperCase(), this.x * size + size / 3, this.y * size + size / 1.5); ctx.fillText(this.currentChar.toUpperCase(), this.x * size + size / 3, this.y * size + size / 1.5);
if (this.hintNr) { if (this.hintNr) {
...@@ -85,13 +85,17 @@ class Word { ...@@ -85,13 +85,17 @@ class Word {
var a_canvas = document.getElementById("mycanvas"); var a_canvas = document.getElementById("mycanvas");
var ctx = a_canvas.getContext("2d"); var ctx = a_canvas.getContext("2d");
let insert = false; //nav mode const mode = {
visual: 0,
insert: 1,
replace: 2
};
let activeMode = mode.visual;
let m_orientation = 0; //0 = horizontal 1=vertical let m_orientation = 0; //0 = horizontal 1=vertical
let activeCell; let activeCell;
let lastCell; let lastCell;
let size = 80; let size = 80;
var mycell;
let words = new Array(); let words = new Array();
var columns; var columns;
var rows; var rows;
...@@ -100,7 +104,7 @@ columns = 12; ...@@ -100,7 +104,7 @@ columns = 12;
rows = 12; rows = 12;
ctx.canvas.width = size * columns; ctx.canvas.width = size * columns;
ctx.canvas.height = size * rows; ctx.canvas.height = size * rows;
mycell = new Array(columns); //create array var mycell = new Array(columns); //create array
for (i = 0; i < columns; i++) { for (i = 0; i < columns; i++) {
mycell[i] = new Array(rows); //make array 2D mycell[i] = new Array(rows); //make array 2D
for (j = 0; j < rows; j++) { for (j = 0; j < rows; j++) {
...@@ -120,20 +124,15 @@ function sleep(ms) { ...@@ -120,20 +124,15 @@ function sleep(ms) {
async function click(x, y) { async function click(x, y) {
} }
document.addEventListener('keydown', logKey); document.addEventListener('keydown', logKey);
function logKey(e) { function logKey(e) {
lastCell = activeCell; lastCell = activeCell;
switch (activeMode) {
let x = activeCell.x; case mode.insert:
let y = activeCell.y;
if (insert) { //input
if (e.key == "Escape") if (e.key == "Escape")
insert = false; activeMode = mode.visual;
else { else if(e.keyCode>64 && e.keyCode <91) {
activeCell.currentChar = e.key; activeCell.currentChar = e.key;
activeCell.drawChar("white");
if (m_orientation) { //down if (m_orientation) { //down
activeCell = activeCell.neighbour[3]; activeCell = activeCell.neighbour[3];
} }
...@@ -141,8 +140,16 @@ function logKey(e) { ...@@ -141,8 +140,16 @@ function logKey(e) {
activeCell = activeCell.neighbour[2]; activeCell = activeCell.neighbour[2];
} }
} }
break;
case mode.replace:
if (e.key == "Escape")
activeMode = mode.visual;
else if(e.keyCode>64 && e.keyCode <91) {
activeCell.currentChar = e.key;
activeMode = mode.visual;
} }
else { //vim navigation mode break;
case mode.visual:
switch (e.key) { switch (e.key) {
case "j"://up case "j"://up
activeCell = activeCell.neighbour[3]; activeCell = activeCell.neighbour[3];
...@@ -156,21 +163,37 @@ function logKey(e) { ...@@ -156,21 +163,37 @@ function logKey(e) {
case "h": //left case "h": //left
activeCell = activeCell.neighbour[0]; activeCell = activeCell.neighbour[0];
break; break;
case "I": //start of horizontal word
if (activeCell.word[0])
activeCell = activeCell.word[0].chars[0];
case "i": case "i":
insert = true; activeMode = mode.insert;
m_orientation = 0; m_orientation = 0;
break; break;
case "O":
if (activeCell.word[1])
activeCell = activeCell.word[1].chars[0];
case "o": case "o":
case "a": activeMode = mode.insert;
insert = true;
m_orientation = 1; m_orientation = 1;
break; break;
case "a":
activeCell = activeCell.neighbour[2];
activeMode = mode.insert;
m_orientation = 0;
break;
case "x": case "x":
activeCell.currentChar = ""; activeCell.currentChar = "";
break; break;
case "r":
activeMode = mode.replace;
break;
default: default:
break; break;
} }
break;
default:
break;
} }
lastCell.clearHighlight(); lastCell.clearHighlight();
activeCell.highlight(); activeCell.highlight();
......
...@@ -18,13 +18,17 @@ body{ ...@@ -18,13 +18,17 @@ body{
flex-grow: 1; flex-grow: 1;
flex-wrap: wrap; flex-wrap: wrap;
display: flex; display: flex;
height: 100%; /* height: 100%; */
align-items: center; align-items: center;
} }
.clues{ .clues{
flex-grow: 1; flex-grow: 1;
/* overflow-y: auto;
max-height: 45%; */
}
ol{
overflow-y: auto; overflow-y: auto;
max-height: 45%; max-height: calc(40vh - 2em);
} }
#canvasWrapper{ #canvasWrapper{
......
...@@ -3,8 +3,8 @@ decide on color pallet ...@@ -3,8 +3,8 @@ decide on color pallet
improve input: improve input:
add visual feedback indicating current mode add visual feedback indicating current mode
vim mode: vim mode:
add replace mode (key=r) add replace mode (key=r)
insert mode: insert mode:
only allow characters a..z and A..Z only allow characters a..z and A..Z keycode 65..90
add backspacke functionality add backspacke functionality
maybe arrowkeys maybe arrowkeys
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment