Exolve v1.02

viresh-ratnakar · Jan 31, 2021 · 0588ae4 · 0588ae4
1 parent 49a1304
commit 0588ae4
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 31 deletions.
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.01 January 24 2021
+Version: Exolve v1.02 January 30 2021
 */
 
 /**

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.01 January 24 2021
+Version: Exolve v1.02 January 30 2021
 */
 
 function exolveFromPuzNextNull(buffer, offset) {

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.01 January 24 2021
+Version: Exolve v1.02 January 30 2021
 -->
 
-<link rel="stylesheet" type="text/css" href="https://viresh-ratnakar.github.io/exolve-m.css?v1.01"/>
-<script src="https://viresh-ratnakar.github.io/exolve-m.js?v1.01"></script>
+<link rel="stylesheet" type="text/css" href="https://viresh-ratnakar.github.io/exolve-m.css?v1.02"/>
+<script src="https://viresh-ratnakar.github.io/exolve-m.js?v1.02"></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.01 January 24 2021
+Version: Exolve v1.02 January 30 2021
 */
 
 @media (max-width: 500px) {
@@ -105,6 +105,15 @@ Version: Exolve v1.01 January 24 2021
   }
 }
 
+.xlv-clues {
+  max-width: 492px;
+}
+@media (min-width: 1500px) {
+  .xlv-clues {
+    max-width: 984px;
+  }
+}
+
 .xlv-cell {
   cursor: pointer;
 }
@@ -141,7 +150,7 @@ Version: Exolve v1.01 January 24 2021
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: space-around;
 }
 .xlv-flex-col {
   display: flex;
@@ -235,9 +244,6 @@ Version: Exolve v1.01 January 24 2021
 .xlv-controls-row {
   margin: 6px 0 6px 0;
 }
-.xlv-clues {
-  max-width: 984px;
-}
 .xlv-clues-box {
   overflow-y: auto;
   box-sizing: border-box;

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.01 January 24 2021
+Version: Exolve v1.02 January 30 2021
 -->
-<link rel="stylesheet" type="text/css" href="exolve-m.css?v1.01"/>
-<script src="exolve-m.js?v1.01"></script>
+<link rel="stylesheet" type="text/css" href="exolve-m.css?v1.02"/>
+<script src="exolve-m.js?v1.02"></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.01 January 24 2021'
+  this.VERSION = 'Exolve v1.02 January 30 2021'
 
   this.puzzleText = puzzleSpec
   this.containerId = containerId
@@ -423,7 +423,7 @@ Exolve.prototype.init = function() {
           <br/>
         </div> <!-- xlv-grid-panel -->
         <div id="${this.prefix}-clues" class="xlv-flex-row xlv-clues">
-          <div style="display:none">
+          <div class="xlv-clues-panel" style="display:none">
             <div id="${this.prefix}-across-label"
                 class="xlv-clues-box xlv-clues-label">
               <hr/>
@@ -434,7 +434,7 @@ Exolve.prototype.init = function() {
               <br/>
             </div>
           </div>
-          <div style="display:none">
+          <div class="xlv-clues-panel" style="display:none">
             <div id="${this.prefix}-down-label"
                 class="xlv-clues-box xlv-clues-label">
               <hr/>
@@ -445,7 +445,7 @@ Exolve.prototype.init = function() {
               <br/>
             </div>
           </div>
-          <div style="display:none">
+          <div class="xlv-clues-panel" style="display:none">
             <div id="${this.prefix}-nodir-label"
                 class="xlv-clues-box xlv-clues-label">
               <hr/>
@@ -2910,6 +2910,7 @@ Exolve.prototype.displayClues = function() {
       extraPanels.push(newPanel)
 
       const newPanelInDiv = document.createElement('div')
+      newPanelInDiv.setAttributeNS(null, 'class', 'xlv-clues-panel');
       newPanelInDiv.insertAdjacentHTML(
         'afterbegin',
         `<div class="xlv-clues-box xlv-clues-label">
@@ -3033,6 +3034,20 @@ Exolve.prototype.displayClues = function() {
         insertAdjacentHTML('beforeend', this.nodirHeading);
     }
   }
+  // Make all xlv-clues-box divs have the same width.
+  const cbs = document.getElementsByClassName('xlv-clues-box')
+  let maxw = 0;
+  for (let x = 0; x < cbs.length; x++) {
+    const e = cbs[x]
+    if (e.offsetWidth > maxw) {
+      maxw = e.offsetWidth;
+    }
+  }
+  if (maxw > 0) {
+    for (let x = 0; x < cbs.length; x++) {
+      cbs[x].style.width = maxw + 'px'
+    }
+  }
 }
 
 Exolve.prototype.computeGridSize = function(maxDim) {

diff --git a/exolve-player.html b/exolve-player.html
@@ -3,10 +3,10 @@
 <head>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
-<link rel="stylesheet" type="text/css" href="exolve-m.css?v1.01"/>
-<script src="exolve-m.js?v1.01"></script>
-<script src="exolve-from-ipuz.js?v1.01"></script>
-<script src="exolve-from-puz.js?v1.01"></script>
+<link rel="stylesheet" type="text/css" href="exolve-m.css?v1.02"/>
+<script src="exolve-m.js?v1.02"></script>
+<script src="exolve-from-ipuz.js?v1.02"></script>
+<script src="exolve-from-puz.js?v1.02"></script>
 
 <style>
 #exolve-player {

diff --git a/exolve-widget.html b/exolve-widget.html
@@ -17,8 +17,8 @@
 <head>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
-<link rel="stylesheet" type="text/css" href="exolve-m.css?v1.01"/>
-<script src="exolve-m.js?v1.01"></script>
+<link rel="stylesheet" type="text/css" href="exolve-m.css?v1.02"/>
+<script src="exolve-m.js?v1.02"></script>
 <script>
   let puzzleText = '';
   function receivePuzzle(event) {

diff --git a/exolve.html b/exolve.html
@@ -112,7 +112,7 @@
                 visTop=0,
                 maxDim=0,
                 saveState=true) {
-  this.VERSION = 'Exolve v1.01 January 24 2021'
+  this.VERSION = 'Exolve v1.02 January 30 2021'
 
   this.puzzleText = puzzleSpec
   this.containerId = containerId
@@ -456,7 +456,7 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
           <br/>
         </div> <!-- xlv-grid-panel -->
         <div id="${this.prefix}-clues" class="xlv-flex-row xlv-clues">
-          <div style="display:none">
+          <div class="xlv-clues-panel" style="display:none">
             <div id="${this.prefix}-across-label"
                 class="xlv-clues-box xlv-clues-label">
               <hr/>
@@ -467,7 +467,7 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
               <br/>
             </div>
           </div>
-          <div style="display:none">
+          <div class="xlv-clues-panel" style="display:none">
             <div id="${this.prefix}-down-label"
                 class="xlv-clues-box xlv-clues-label">
               <hr/>
@@ -478,7 +478,7 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
               <br/>
             </div>
           </div>
-          <div style="display:none">
+          <div class="xlv-clues-panel" style="display:none">
             <div id="${this.prefix}-nodir-label"
                 class="xlv-clues-box xlv-clues-label">
               <hr/>
@@ -2943,6 +2943,7 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
       extraPanels.push(newPanel)
 
       const newPanelInDiv = document.createElement('div')
+      newPanelInDiv.setAttributeNS(null, 'class', 'xlv-clues-panel');
       newPanelInDiv.insertAdjacentHTML(
         'afterbegin',
         `<div class="xlv-clues-box xlv-clues-label">
@@ -3066,6 +3067,20 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
         insertAdjacentHTML('beforeend', this.nodirHeading);
     }
   }
+  // Make all xlv-clues-box divs have the same width.
+  const cbs = document.getElementsByClassName('xlv-clues-box')
+  let maxw = 0;
+  for (let x = 0; x < cbs.length; x++) {
+    const e = cbs[x]
+    if (e.offsetWidth > maxw) {
+      maxw = e.offsetWidth;
+    }
+  }
+  if (maxw > 0) {
+    for (let x = 0; x < cbs.length; x++) {
+      cbs[x].style.width = maxw + 'px'
+    }
+  }
 }
 
 Exolve.prototype.computeGridSize = function(maxDim) {
@@ -5680,6 +5695,15 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
   }
 }
 
+.xlv-clues {
+  max-width: 492px;
+}
+@media (min-width: 1500px) {
+  .xlv-clues {
+    max-width: 984px;
+  }
+}
+
 .xlv-cell {
   cursor: pointer;
 }
@@ -5716,7 +5740,7 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: space-around;
 }
 .xlv-flex-col {
   display: flex;
@@ -5810,9 +5834,6 @@ <h2 id="${this.prefix}-title" class="xlv-title"></h2>
 .xlv-controls-row {
   margin: 6px 0 6px 0;
 }
-.xlv-clues {
-  max-width: 984px;
-}
 .xlv-clues-box {
   overflow-y: auto;
   box-sizing: border-box;