Separate color for borders and blocked cells #75

DKMiller71 · 2021-09-24T16:59:25Z

DKMiller71
Sep 24, 2021

These seem to be controlled by the same option (colour-background). Is there a way to set a different color for the border vs the blocked cells. For example, if you want a the blocked cells to have a white background but the cells to have black borders?

viresh-ratnakar · 2021-09-24T17:53:28Z

viresh-ratnakar
Sep 24, 2021
Maintainer

There are no exolve options to do this directly. However, you can just add a little JavaScript code to do this easily. Add the customizeExolve(...) function to your file, and change 'gray' to whatever you want.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="https://viresh-ratnakar.github.io/exolve-m.css"/>
<script src="https://viresh-ratnakar.github.io/exolve-m.js"></script>

<title>Hacky Double</title>

</head>
<body>
<script>

function customizeExolve(puz) {
  for (let row = 0; row < puz.gridHeight; row++) {
    for (let col = 0; col < puz.gridWidth; col++) {
      if (puz.grid[row][col].isLight) {
        continue;
      }
      const rect = document.createElement('div');
      rect.className = 'xlv-coloured-cell';
      const cellLeft = puz.cellLeftPos(col, puz.GRIDLINE) + puz.GRIDLINE;
      const cellTop = puz.cellTopPos(row, puz.GRIDLINE) + puz.GRIDLINE;
      rect.style.left =  '' +  cellLeft + 'px';
      rect.style.top = '' + cellTop + 'px';
      rect.style.width = '' + (puz.cellW - 2 * puz.GRIDLINE) + 'px';
      rect.style.height = '' + (puz.cellH - 2 * puz.GRIDLINE) + 'px';
      rect.style.backgroundColor = 'gray';
      rect.style.opacity = '1.0';
      puz.colourGroup.appendChild(rect);
    }
  }
  puz.colourGroup.style.display = '';
}

createExolve(`
======REPLACE WITH YOUR PUZZLE BELOW======

exolve-begin
  exolve-id: test-add-blocks
  exolve-title: Add Blocks
  exolve-width: 5
  exolve-height: 5
  exolve-grid:
    0 0 0 0 0
    0 . 0 . 0
    0 0 0 0 0
    0 . 0 . 0
    0 0 0 0 0
  exolve-across:
    1 Blah
    4 Blah
    5 Blah
  exolve-down:
    1 Blah
    2 Blah
    3 Blah
exolve-end

======REPLACE WITH YOUR PUZZLE ABOVE======
`);
</script>
</body>
</html>

1 reply

DKMiller71 Sep 24, 2021
Author

Hmm, that gives some weird looking results, because the blocked cells end up with borders too. Trying to attach screenshot.
I was trying to create a "floating" effect, where the blocked squares inherit the page background (white in this case), the outside lines of the puzzle are dark and the inner lines are thin.

The colored/circled cells are a different thing.

viresh-ratnakar · 2021-09-24T19:05:16Z

viresh-ratnakar
Sep 24, 2021
Maintainer

Oh, I had made it so that it was "inset" like that. You can cover the whole block by changing to these lines in the code:

      const cellLeft = puz.cellLeftPos(col, puz.GRIDLINE);
      const cellTop = puz.cellTopPos(row, puz.GRIDLINE);
      rect.style.left =  '' +  cellLeft + 'px';
      rect.style.top = '' + cellTop + 'px';
      rect.style.width = '' + puz.cellW + 'px';
      rect.style.height = '' + puz.cellH + 'px';

0 replies

DKMiller71 · 2021-09-25T03:59:11Z

DKMiller71
Sep 25, 2021
Author

Revised version that I used:

function customizeExolve(puz) {
	recolorBlockedCells(puz, 'white');
}	

function recolorBlockedCells(puz, colorname) {
	
  for (let row = 0; row < puz.gridHeight; row++) {
    for (let col = 0; col < puz.gridWidth; col++) {
      if (puz.grid[row][col].isLight) {
        continue;
      }
      const rect = document.createElement('div');
      rect.className = 'xlv-coloured-cell';

      let isBordT = row>0 && puz.grid[row-1][col].isLight;
      let isBordL = col>0 && puz.grid[row][col-1].isLight;
      let isBordR = col<puz.gridWidth-1 && puz.grid[row][col+1].isLight;
      let isBordB = row<puz.gridHeight-1 && puz.grid[row+1][col].isLight;

      const cellLeft = puz.cellLeftPos(col, 0) + (isBordL ? 2*puz.GRIDLINE : 0);
      const cellTop = puz.cellTopPos(row, 0) + (isBordT ? 2*puz.GRIDLINE : 0);

      rect.style.left =  '' + cellLeft + 'px';
      rect.style.top = '' + cellTop + 'px';
      rect.style.margin = '0px';

      let thisW = puz.cellW + 2*puz.GRIDLINE - ((isBordL?1:0) + (isBordR?1:0) * puz.GRIDLINE);
      let thisH = puz.cellH + 2*puz.GRIDLINE - ((isBordT?1:0) + (isBordB?1:0) * puz.GRIDLINE);

      rect.style.width = '' + thisW + 'px';
      rect.style.height = '' + thisH + 'px';
 
			
      rect.style.backgroundColor = colorname;
      rect.style.opacity = '1.0';
      puz.colourGroup.appendChild(rect);
    }
  }
  puz.colourGroup.style.display = '';
	
}

2 replies

viresh-ratnakar Sep 27, 2021
Maintainer

BTW, I think if you print this puzzle, then after printing, the rects added in recolorBlockedCells() may look misplaced/mis-scaled, unfortunately.

You can fix that by modifying customizeExolve() like this:

function customizeExolve(puz) {
  puz.recolourCells = (function() {
    var cached_function = puz.recolourCells;
    return function() {
      cached_function.apply(this);
      recolorBlockedCells(this, 'white');
    };
  })();
  recolorBlockedCells(puz, 'white');
}

DKMiller71 Sep 27, 2021
Author

I was actually trying out a new approach... this seems to work even better. If you use it with exolve-option: colour-background:transparent, you get a neat floating effect (I'm testing with a sparse crossword and it seems to work.

function customizeExolve(puz) {
    insertBackgroundForLightCells(puz, 'black');
} 

function insertBackgroundForLightCells(puz, colorname) {

  for (let row = 0; row < puz.gridHeight; row++) {
    for (let col = 0; col < puz.gridWidth; col++) {
      if (!puz.grid[row][col].isLight) { continue; }

      const cellLeft = puz.cellLeftPos(col, 0);
      const cellTop = puz.cellTopPos(row, 0);
      const thisW = puz.cellW + 2*puz.GRIDLINE;
      const thisH = puz.cellH + 2*puz.GRIDLINE;

      const rect = 
        document.createElementNS('http://www.w3.org/2000/svg', 'rect');

      rect.setAttributeNS(null, 'x', cellLeft);
      rect.setAttributeNS(null, 'y', cellTop);
      rect.setAttributeNS(null, 'width', thisW);
      rect.setAttributeNS(null, 'height', thisH);
      rect.setAttributeNS(null, 'fill', colorname);

      puz.background.after(rect);
    }
  }
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Separate color for borders and blocked cells #75

{{title}}

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Separate color for borders and blocked cells #75

DKMiller71 Sep 24, 2021

Replies: 3 comments · 3 replies

viresh-ratnakar Sep 24, 2021 Maintainer

DKMiller71 Sep 24, 2021 Author

viresh-ratnakar Sep 24, 2021 Maintainer

DKMiller71 Sep 25, 2021 Author

viresh-ratnakar Sep 27, 2021 Maintainer

DKMiller71 Sep 27, 2021 Author

DKMiller71
Sep 24, 2021

Replies: 3 comments 3 replies

viresh-ratnakar
Sep 24, 2021
Maintainer

DKMiller71 Sep 24, 2021
Author

viresh-ratnakar
Sep 24, 2021
Maintainer

DKMiller71
Sep 25, 2021
Author

viresh-ratnakar Sep 27, 2021
Maintainer

DKMiller71 Sep 27, 2021
Author