JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<canvas id="cv" width=200 height=200></canvas>
<input type=text id="OLLcode"/> <input type=text id="OLLdesc"/><input type=button id="addCode" value="Добавить"><br>
<select id="OLLlist" size=7>
    </select>

CSS

#cv{

    border:1px solid black;
    
}

JavaScript

function line(ctx,x1,y1,x2,y2){
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
}

var mouseX, mouseY;

var cv = $("#cv")[0];
var ctx = cv.getContext("2d");
var W = cv.width, H= cv.height;
var RS = Math.round(W/7);
var TA=Array();
for(i=0;i<21; i++)TA[i]=0;
ctx.fillstyle ="black";

ctx.beginPath();

ctx.fillStyle = "gray";
ctx.strokeStyle = "black";
ctx.lineWidth  = 1;
for(x = 0; x < W/RS; x ++)
for(y = 0; y < W/RS; y ++){
   // line(ctx, i, 0, i, H);
   // line(ctx, 0, i, W, i);
        if(!(((y == 0 || y == 6) && (x == 1 || x == 3 || x == 5)) ||
          ((y == 1 || y == 3 || y == 5) && (x == 0 || x == 1 || x == 3 || x == 5 || x == 6)))) 
             ctx.fillRect(x*RS,y*RS,RS,RS);    
        ctx.strokeRect(x*RS,y*RS,RS,RS);
}
ctx.stroke();

function getArrayPositionFromCoord(x,y){
    if(y == 0) return Math.floor(x/2);
    if(y == 1 || y == 3 || y == 5) 
        if(x < 2) return 3 + Math.floor(y/2) * 5 + x; else 
        if(x == 3) return 3 + Math.floor(y/2) * 5 + 2; else
        return 3 + Math.floor(y/2) * 5 + x - 2; else
    if(y == 6) return Math.floor(x/2)+18;
}

function getOLLCodeFromArray(){
    var code = 0;
    for(i=0; i<21; i++)
        if(TA[i])code |= (1<<i);
    return code;
}
$('#cv').on('click', function(e) {
var x = (e.pageX - cv.offsetLeft) / (RS) | 0;
 var y = (e.pageY - cv.offsetTop)  / (RS) | 0;
    if((((y == 0 || y == 6) && (x == 1 || x == 3 || x == 5)) ||
        ((y == 1 || y == 3 || y == 5) && (x == 0 || x == 1 || x == 3 || x == 5 || x == 6)))){
    var pos = getArrayPositionFromCoord(x,y);
    if(TA[pos] )
    {    
        TA[pos]=0;
        ctx.fillStyle ="lime";
    }
    else
    {
        TA[pos]=1;
        ctx.fillStyle ="green";
    } 
    ctx.fillRect(x*RS+1,y*RS+1,RS-2,RS-2);
        $("#OLLcode").val(getOLLCodeFromArray()); }
});
var ox=-1,oy=-1;
cv.onmousemove = function(e){
var x = (e.pageX - cv.offsetLeft) / (RS) | 0;
 var y = (e.pageY - cv.offsetTop)  / (RS) | 0;
    if(ox !=x || oy != y){
        if((((y == 0 || y ==...