Skip to content

Commit

Permalink
Unnumbered minor Exolve tweak
Browse files Browse the repository at this point in the history
  • Loading branch information
@viresh-ratnakar
viresh-ratnakar authored Apr 10, 2021
1 parent 121c2cb commit 253d1e2
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 70 deletions.
1 change: 1 addition & 0 deletions exolve-m.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,6 +351,7 @@ Version: Exolve v1.12 April 8 2021
border: none;
border-width: 0;
outline: none;
opacity: 0.25;
}
.xlv-status {
margin: 2px 0;
Expand Down
17 changes: 8 additions & 9 deletions exolve-m.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4911,7 +4911,6 @@ Exolve.prototype.makeColouredRect = function(row, col, colour) {
rect.style.width = '' + this.squareDim + 'px';
rect.style.height = '' + this.squareDim + 'px';
rect.style.backgroundColor = colour;
rect.style.opacity = "0.2";
rect.setAttributeNS(null, 'class', 'xlv-coloured-cell');
rect.addEventListener(
'click', this.cellActivator.bind(this, row, col));
Expand All @@ -4920,14 +4919,14 @@ Exolve.prototype.makeColouredRect = function(row, col, colour) {

Exolve.prototype.redisplayNinas = function() {
const NINA_COLORS = [
'rgb(0,0,255)',
'rgb(0,255,0)',
'rgb(0,255,255)',
'rgb(255,0,255)',
'rgb(255,255,0)',
'rgb(255,50,50)',
'rgb(50,255,50)',
'rgb(50,50,255)',
'rgb(0,0,220)',
'rgb(0,220,0)',
'rgb(0,220,220)',
'rgb(220,0,220)',
'rgb(220,220,0)',
'rgb(220,50,50)',
'rgb(50,220,50)',
'rgb(50,50,220)',
'rgb(50,200,200)',
'rgb(200,50,200)',
'rgb(200,200,50)',
Expand Down
128 changes: 67 additions & 61 deletions exolve.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,8 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
class="xlv-grid-input xlv-cell-text"/></div>
<div id="${this.prefix}-nina-group"
style="display:none;left:0;top:0"></div>
<div id="${this.prefix}-colour-group"
style="display:none;left:0;top:0"></div>
</div> <!-- xlv-grid-parent -->
</div> <!-- xlv-grid-parent-centerer -->
<div id="${this.prefix}-controls-etc" class="xlv-controls-etc">
Expand Down Expand Up @@ -622,6 +624,7 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
this.currClueParent = document.getElementById(
this.prefix + '-curr-clue-parent')
this.ninaGroup = document.getElementById(this.prefix + '-nina-group')
this.colourGroup = document.getElementById(this.prefix + '-colour-group')

this.statusNumFilled = document.getElementById(
this.prefix + '-status-num-filled')
Expand Down Expand Up @@ -936,7 +939,8 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
// Parse a questionTexts and create the question elements for (which include
// an input box for the answer). The solution answer may be provided after the
// last ')'.
Exolve.prototype.displayQuestions = function() {
Exolve.prototype.redisplayQuestions = function() {
this.questions.innerHTML = '';
for (let s of this.questionTexts) {
let enumParse = this.parseEnum(s)
let inputLen = enumParse.placeholder.length
Expand Down Expand Up @@ -3555,11 +3559,7 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
for (let x of this.activeCells) {
let gridCell = this.grid[x[0]][x[1]]
let cellRect = gridCell.cellRect
if (gridCell.colour) {
cellRect.style.fill = gridCell.colour
} else {
cellRect.style.fill = this.colorScheme['cell']
}
cellRect.style.fill = this.colorScheme['cell']
if (!gridCell.prefill) {
gridCell.cellText.style.fill = this.colorScheme['light-text']
}
Expand Down Expand Up @@ -4681,6 +4681,31 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
window.addEventListener('resize', this.handleResize.bind(this));
}

Exolve.prototype.recolourCells = function() {
// Set colours specified through exolve-colour.
this.colourGroup.innerHTML = '';
for (let cellColour of this.cellColours) {
if (cellColour.length == 2) {
const ci = cellColour[0]
if (!this.clues[ci]) {
continue
}
let colour = cellColour[1]
for (let cell of this.clues[ci].cells) {
const row = cell[0]
const col = cell[1]
this.colourGroup.appendChild(this.makeColouredRect(row, col, colour));
}
} else {
const row = cellColour[0]
const col = cellColour[1]
const colour = cellColour[2]
this.colourGroup.appendChild(this.makeColouredRect(row, col, colour));
}
}
this.colourGroup.style.display = (this.cellColours.length > 0) ? '' : 'none';
}

Exolve.prototype.displayGrid = function() {
this.numCellsToFill = 0
this.numCellsPrefilled = 0
Expand Down Expand Up @@ -4782,29 +4807,7 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
}
}

// Set colours specified through exolve-colour.
for (let cellColour of this.cellColours) {
if (cellColour.length == 2) {
let ci = cellColour[0]
if (!this.clues[ci]) {
continue
}
let colour = cellColour[1]
for (let cell of this.clues[ci].cells) {
this.grid[cell[0]][cell[1]].colour = colour
this.grid[cell[0]][cell[1]].cellRect.style.fill = colour
}
} else {
let row = cellColour[0]
let col = cellColour[1]
if (!this.grid[row][col].cellRect) {
continue
}
let colour = cellColour[2]
this.grid[row][col].colour = colour
this.grid[row][col].cellRect.style.fill = colour
}
}
this.recolourCells();

// Bars/word-ends to the right and under; hyphens.
for (let i = 0; i < this.gridHeight; i++) {
Expand Down Expand Up @@ -4933,20 +4936,36 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
return cellText
}

Exolve.prototype.displayNinas = function() {
Exolve.prototype.makeColouredRect = function(row, col, colour) {
const rect = document.createElement('div');
const gridCell = this.grid[row][col]
rect.style.left = '' + gridCell.cellLeft + 'px';
rect.style.top = '' + gridCell.cellTop + 'px';
rect.style.width = '' + this.squareDim + 'px';
rect.style.height = '' + this.squareDim + 'px';
rect.style.backgroundColor = colour;
rect.setAttributeNS(null, 'class', 'xlv-coloured-cell');
rect.addEventListener(
'click', this.cellActivator.bind(this, row, col));
return rect;
}

Exolve.prototype.redisplayNinas = function() {
const NINA_COLORS = [
'rgba(0,0,255,0.2)',
'rgba(0,255,0,0.2)',
'rgba(0,255,255,0.2)',
'rgba(255,0,255,0.2)',
'rgba(255,255,0,0.2)',
'rgba(255,50,50,0.2)',
'rgba(50,255,50,0.2)',
'rgba(50,50,255,0.2)',
'rgba(50,200,200,0.2)',
'rgba(200,50,200,0.2)',
'rgba(200,200,50,0.2)',
'rgb(0,0,220)',
'rgb(0,220,0)',
'rgb(0,220,220)',
'rgb(220,0,220)',
'rgb(220,220,0)',
'rgb(220,50,50)',
'rgb(50,220,50)',
'rgb(50,50,220)',
'rgb(50,200,200)',
'rgb(200,50,200)',
'rgb(200,200,50)',
];
this.ninaGroup.innerHTML = '';
this.ninaClassElements = [];
let ninaColorIndex = 0;
for (let nina of this.ninas) {
// First resolve clue indices to cells.
Expand Down Expand Up @@ -4981,16 +5000,7 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
}
const row = cellOrClass[0]
const col = cellOrClass[1]
const ninaRect = document.createElement('div');
ninaRect.style.left = '' + this.grid[row][col].cellLeft + 'px';
ninaRect.style.top = '' + this.grid[row][col].cellTop + 'px';
ninaRect.style.width = '' + this.squareDim + 'px';
ninaRect.style.height = '' + this.squareDim + 'px';
ninaRect.style.backgroundColor = colour;
ninaRect.setAttributeNS(null, 'class', 'xlv-nina');
ninaRect.addEventListener(
'click', this.cellActivator.bind(this, row, col));
this.ninaGroup.appendChild(ninaRect);
this.ninaGroup.appendChild(this.makeColouredRect(row, col, colour));
}
}
}
Expand Down Expand Up @@ -5731,12 +5741,12 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>

this.applyStyles()

this.displayQuestions()
this.redisplayQuestions()
this.displayClues()
this.displayGridBackground()
this.createListeners()
this.displayGrid()
this.displayNinas()
this.redisplayNinas()
this.displayButtons()

this.parseAndDisplayPS()
Expand Down Expand Up @@ -6036,6 +6046,7 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
position: absolute;
border: none;
border-width: 0;
z-index: 1;
}
.xlv-grid-input-rarr {
position: relative;
Expand Down Expand Up @@ -6110,17 +6121,12 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
.xlv-small-button:hover {
cursor: pointer;
}
.xlv-nina-group {
position: absolute;
border: none;
border-width: 0;
outline: none;
}
.xlv-nina {
.xlv-coloured-cell {
position: absolute;
border: none;
border-width: 0;
outline: none;
opacity: 0.25;
}
.xlv-status {
margin: 2px 0;
Expand Down Expand Up @@ -6230,7 +6236,7 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
display: block;
column-count: 2;
}
.xlv-nina {
.xlv-coloured-cell {
color-adjust: exact;
-webkit-print-color-adjust: exact;
}
Expand Down

0 comments on commit 253d1e2

Please sign in to comment.