v1.40

### Version: Exolve v1.40: July 3, 2022 - Make the next/prev buttons in the top clue have vertical-align 'text-top' rather than 'top' (the difference shows up when font size is increased). - When parsing multiline exolve sections (such as exolve-preamble), also include any text on the section line itself. - Lots more css tweaks, mainly to ensure blog themese do not encroach and override critical exolve css.
viresh-ratnakar · Jul 3, 2022 · 127a00e · 127a00e
1 parent 2c45bf5
commit 127a00e
Show file tree

Hide file tree

Showing 48 changed files with 291 additions and 195 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+### Version: Exolve v1.40: July 3, 2022
+
+- Make the next/prev buttons in the top clue have vertical-align
+  'text-top' rather than 'top' (the difference shows up when font
+  size is increased).
+- When parsing multiline exolve sections (such as exolve-preamble),
+  also include any text on the section line itself.
+- Lots more css tweaks, mainly to ensure blog themese do not encroach and
+  override critical exolve css.
+
 ### Version: Unnumbered minor tweak
 
 - Add buttonRow1 and buttonRow2 members to the Exolve object.

diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 ## An Easily Configurable Interactive Crossword Solver
 
-### Version: Exolve v1.39 June 20, 2022
+### Version: Exolve v1.40 July 3, 2022
 
 Exolve can help you create online interactively solvable crosswords (simple
 ones with blocks and/or bars as well as those that are jumbles or are
@@ -1287,7 +1287,7 @@ The list of currently supported options is as follows:
   if the window is resized. The number of columns can only be one of
   the following: 1 (which is the same as what we get without the
   columnar-layout option, when the available width is too small), 2, or 3.
-  As of June 2022, columnar layout is quirky: Chrome supports it best,
+  As of July 322, columnar layout is quirky: Chrome supports it best,
   but all browsers seem to have some peculiarities.
 - **`font-family:<ff>`** Set the font-family CSS value (for clues, preamble,
   etc.). You can set this to **inherit** to override Exolve's default of

diff --git a/exolve-from-ipuz.js b/exolve-from-ipuz.js
@@ -24,7 +24,7 @@ SOFTWARE.
 The latest code and documentation for Exolve can be found at:
 https://github.com/viresh-ratnakar/exolve
 
-Version: Exolve v1.39 June 20, 2022
+Version: Exolve v1.40 July 3, 2022
 */
 
 /**

diff --git a/exolve-from-puz.js b/exolve-from-puz.js
@@ -24,7 +24,7 @@ SOFTWARE.
 The latest code and documentation for Exolve can be found at:
 https://github.com/viresh-ratnakar/exolve
 
-Version: Exolve v1.39 June 20, 2022
+Version: Exolve v1.40 July 3, 2022
 */
 
 function exolveFromPuzNextNull(buffer, offset) {

diff --git a/exolve-from-text.js b/exolve-from-text.js
@@ -24,7 +24,7 @@ SOFTWARE.
 The latest code and documentation for Exolve can be found at:
 https://github.com/viresh-ratnakar/exolve
 
-Version: Exolve v1.39 June 20, 2022
+Version: Exolve v1.40 July 3, 2022
 */
 
 /**

diff --git a/exolve-m-simple.html b/exolve-m-simple.html
@@ -14,11 +14,11 @@
 
 See the full Exolve license notice in exolve-m.js.
 
-Version: Exolve v1.39 June 20, 2022
+Version: Exolve v1.40 July 3, 2022
 -->
 
-<link rel="stylesheet" type="text/css" href="https://viresh-ratnakar.github.io/exolve-m.css?v1.39"/>
-<script src="https://viresh-ratnakar.github.io/exolve-m.js?v1.39"></script>
+<link rel="stylesheet" type="text/css" href="https://viresh-ratnakar.github.io/exolve-m.css?v1.40"/>
+<script src="https://viresh-ratnakar.github.io/exolve-m.js?v1.40"></script>
 
 <title>Exolve</title>
 

diff --git a/exolve-m.css b/exolve-m.css
@@ -5,7 +5,7 @@ Copyright (c) 2019 Viresh Ratnakar
 
 See the full license notice in exolve-m.js.
 
-Version: Exolve v1.39 June 20, 2022
+Version: Exolve v1.40 July 3, 2022
 */
 
 @media (max-width: 500px) {
@@ -147,13 +147,17 @@ Version: Exolve v1.39 June 20, 2022
   fill: rgba(0,0,0,0.0);
 }
 .xlv-frame .xlv-clues table {
+  border: none;
   border-collapse: collapse;
   border-spacing: 0;
+  margin: inherit;
 }
 .xlv-frame .xlv-clues tr {
+  border: none;
   break-inside: avoid;
 }
 .xlv-frame .xlv-clues td {
+  border: none;
   padding: 0 6px 4px 0;
   vertical-align: top;
 }
@@ -280,10 +284,12 @@ Version: Exolve v1.39 June 20, 2022
   position: relative;
   display: inline-block;
 }
-.xlv-grid-input-wrapper {
+.xlv-frame .xlv-grid-input-wrapper {
   position: absolute;
   border: none;
   border-width: 0;
+  margin: 0;
+  padding: 0;
   z-index: 1;
 }
 .xlv-grid-input-rarr {
@@ -306,16 +312,19 @@ Version: Exolve v1.39 June 20, 2022
   left: 40%;
   top: -20%;
 }
-.xlv-grid-input {
-  text-align: center;
-  text-anchor: middle;
+.xlv-frame .xlv-grid-input,
+.xlv-frame .xlv-grid-input:focus {
+  background: rgba(0,0,0,0.0);
   border: none;
-  width: 100%;
-  height: 100%;
-  padding: 2px 0 0 0;
   color: rgba(0,0,0,0.0);
-  background: rgba(0,0,0,0.0);
+  font-weight: normal;
+  height: 100%;
+  line-height: normal;
   outline: none;
+  padding: 2px 0 0 0;
+  text-align: center;
+  text-anchor: middle;
+  width: 100%;
 }
 .xlv-controls-etc {
   padding: 0 0 2px 0;
@@ -335,36 +344,41 @@ Version: Exolve v1.39 June 20, 2022
   break-after: avoid;
 }
 .xlv-nextprev {
-  vertical-align: top;
+  vertical-align: text-top;
 }
 .xlv-frame hr {
   margin: 0 0 4px 0;
 }
-.xlv-button {
+.xlv-frame .xlv-button {
   border: none;
+  display: inline-block;
+  font-family: monospace;
+  line-height: normal;
   outline: none;
   text-align: center;
   text-decoration: none;
-  display: inline-block;
-  font-family: monospace;
 }
 .xlv-button:hover {
   cursor: pointer;
 }
 .xlv-button:disabled {
   cursor: not-allowed;
 }
-.xlv-small-button {
+.xlv-frame .xlv-small-button {
   border: 1px solid gray;
-  outline: none;
-  padding: 0 4px 2px 4px;
-  margin: 0;
-  text-align: center;
-  text-decoration: none;
+  border-radius: 0;
+  box-shadow: none;
   display: inline-block;
   font-family: monospace;
   font-size: 13px;
   font-weight: bold;
+  line-height: normal;
+  margin: 0;
+  outline: none;
+  padding: 0 4px 2px 4px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
 }
 .xlv-small-button:hover {
   cursor: pointer;

diff --git a/exolve-m.html b/exolve-m.html
@@ -10,10 +10,10 @@
 
 See the full Exolve license notice in exolve-m.js.
 
-Version: Exolve v1.39 June 20, 2022
+Version: Exolve v1.40 July 3, 2022
 -->
-<link rel="stylesheet" type="text/css" href="exolve-m.css?v1.39"/>
-<script src="exolve-m.js?v1.39"></script>
+<link rel="stylesheet" type="text/css" href="exolve-m.css?v1.40"/>
+<script src="exolve-m.js?v1.40"></script>
 
 <title>Exolve (replace with puzzle title)</title>
 

diff --git a/exolve-m.js b/exolve-m.js
@@ -79,7 +79,7 @@ function Exolve(puzzleSpec,
                 visTop=0,
                 maxDim=0,
                 saveState=true) {
-  this.VERSION = 'Exolve v1.39 June 20, 2022';
+  this.VERSION = 'Exolve v1.40 July 3, 2022';
   this.id = '';
 
   this.puzzleText = puzzleSpec;
@@ -956,7 +956,7 @@ Exolve.prototype.parseOverall = function() {
     } else if (parsedSec.section == 'language') {
       this.parseLanguage(parsedSec.value)
     }
-    parsedSec = nextParsedSec
+    parsedSec = nextParsedSec;
   }
   this.dirOrder = {}
   this.dirOrder['A'] = (this.sectionLines[
@@ -1407,33 +1407,52 @@ Exolve.prototype.parseLanguage = function(s) {
 }
 
 Exolve.prototype.extractSectionLines = function(start, end) {
-  let text = this.specLines[start];
-  let l = start + 1;
+  /**
+   * Grab any text after the exolve-*: marker, which is at index start-1.
+   */
+  let text = '';
+  if (start > 0) {
+    const markerLine = this.specLines[start - 1].trim();
+    if (markerLine.startsWith('exolve-')) {
+      const colon = markerLine.indexOf(':');
+      if (colon >= 0) {
+        text = markerLine.substr(colon + 1).trim();
+      }
+    }
+  }
+  let l = start;
   while (l <= end) {
-    text = text + '\n' + this.specLines[l];
+    if (text) text += '\n';
+    text += this.specLines[l];
     l++;
   }
-  return text;
+  return text.trim();
 }
 
 // Extracts the prelude from its previously identified lines and sets up
 // its display.
 Exolve.prototype.parseAndDisplayPrelude = function() {
   const lines = this.sectionLines['prelude'] ||
                 this.sectionLines['preamble'] || [-1,-1];
-  if (lines[0] < 0 || lines[1] < lines[0]) {
+  if (lines[0] < 0) {
+    return;
+  }
+  const preamble = this.extractSectionLines(lines[0], lines[1]);
+  if (!preamble) {
     return;
   }
-  document.getElementById(this.prefix + '-preamble').innerHTML =
-    this.extractSectionLines(lines[0], lines[1]);
+  document.getElementById(this.prefix + '-preamble').innerHTML = preamble;
 }
 
 Exolve.prototype.parseAndDisplayPS = function() {
   const lines = this.sectionLines['postscript'] || [-1,-1];
-  if (lines[0] < 0 || lines[1] < lines[0]) {
+  if (lines[0] < 0) {
     return;
   }
   const psText = this.extractSectionLines(lines[0], lines[1]);
+  if (!psText) {
+    return;
+  }
   psHTML = `<div id='${this.prefix}-postscript'
     class='xlv-postscript'><hr> ${psText} </div>`;
   this.frame.insertAdjacentHTML('beforeend', psHTML);
@@ -1443,48 +1462,57 @@ Exolve.prototype.parseAndDisplayPS = function() {
 // populates its element, and adds it to revelationList.
 Exolve.prototype.parseAndDisplayExplanations = function() {
   const lines = this.sectionLines['explanations'] || [-1,-1];
-  if (lines[0] < 0 || lines[1] < lines[0]) {
+  if (lines[0] < 0) {
+    return;
+  }
+  const explnText = this.extractSectionLines(lines[0], lines[1]);
+  if (!explnText) {
     return;
   }
   const expln = document.getElementById(this.prefix + '-explanations');
-  expln.innerHTML = this.extractSectionLines(lines[0], lines[1]);
+  expln.innerHTML = explnText;
   this.revelationList.push(expln);
 }
 
 Exolve.prototype.parseAndDisplayMaker = function() {
   const lines = this.sectionLines['maker'] || [-1,-1];
-  if (lines[0] < 0 || lines[1] < lines[0]) {
+  if (lines[0] < 0) {
+    return;
+  }
+  const makerText = this.extractSectionLines(lines[0], lines[1]);
+  if (!makerText) {
     return;
   }
-  let maker = `<br>${this.textLabels['maker-info']}:<br>\n` +
-    '<div style="margin:0 0 0 4ex">\n' +
-    this.specLines.slice(lines[0], lines[1] + 1).join('\n') +
-    '</div>';
+  const maker = `<br>${this.textLabels['maker-info']}:<br>\n` +
+    '<div style="margin:0 0 0 4ex">\n' + makerText + '</div>';
   const elt = document.getElementById(this.prefix + '-metadata')
   elt.insertAdjacentHTML('beforeend', maker)
 }
 
 // Parses exolve-relabel, noting relabelled texts of various buttons etc.
 Exolve.prototype.parseRelabel = function() {
   const lines = this.sectionLines['relabel'] || [-1,-1];
-  if (lines[0] < 0 || lines[1] < lines[0]) {
+  if (lines[0] < 0) {
+    return;
+  }
+  const relabelText = this.extractSectionLines(lines[0], lines[1]);
+  if (!relabelText) {
     return;
   }
-  let l = lines[0];
-  while (l <= lines[1]) {
-    const colon = this.specLines[l].indexOf(':')
+  const relabelLines = relabelText.split('\n');
+  for (specLine of relabelLines) {
+    const colon = specLine.indexOf(':')
     if (colon < 0) {
       this.throwErr('Line in exolve-relabel does not look like ' +
-                    '"name: new-label":' + this.specLines[l])
+                    '"name: new-label":' + specLine)
     }
-    let id = this.specLines[l].substr(0, colon).trim()
-    let val = this.specLines[l].substr(colon + 1).trim()
+    let id = specLine.substr(0, colon).trim()
+    let val = specLine.substr(colon + 1).trim()
     if (this.textLabels[id]) {
       this.textLabels[id] = val
     } else {
       this.throwErr('exolve-relabel: unsupported id: ' + id)
     }
-    l++;
   }
 }
 
@@ -3665,21 +3693,21 @@ Exolve.prototype.applyStyles = function() {
       color: ${this.colorScheme['imp-text']};
     }
     #${this.prefix}-frame .xlv-button {
-      background-color: ${this.colorScheme['button']};
+      background: ${this.colorScheme['button']};
       color: ${this.colorScheme['button-text']};
     }
     #${this.prefix}-frame .xlv-button:hover {
-      background-color: ${this.colorScheme['button-hover']};
+      background: ${this.colorScheme['button-hover']};
     }
     #${this.prefix}-frame .xlv-button:disabled {
-      background-color: gray;
+      background: gray;
     }
     #${this.prefix}-frame .xlv-small-button {
-      background-color: ${this.colorScheme['small-button']};
+      background: ${this.colorScheme['small-button']};
       color: ${this.colorScheme['small-button-text']};
     }
     #${this.prefix}-frame .xlv-small-button:hover {
-      background-color: ${this.colorScheme['small-button-hover']};
+      background: ${this.colorScheme['small-button-hover']};
     }
   `;
 }
@@ -5558,6 +5586,8 @@ Exolve.prototype.recolourCells = function(scale=1) {
 }
 
 Exolve.prototype.displayGrid = function() {
+  this.gridInput.style.fontSize = this.letterSize + 'px'
+  this.gridInputWrapper.style.fontSize = this.letterSize + 'px'
   this.numCellsToFill = 0
   this.numCellsPrefilled = 0
   for (let i = 0; i < this.gridHeight; i++) {