feat: crosswords resize automatically to fit their container

This makes it much easier to drop them into a page. Fonts are also
scaled automatically, although this currently require javascript to
listen for the window.onresize event.

README.md

@@ -119,9 +119,12 @@ This project is currently a work in progress. The overall design goals are:
 
 This is a scattergun list of things to work on, once a good chunk of these have been done the larger bits can be moved to GitHub Issues:
 
+- [ ] feat(accessibility): add the facility to scale the crossword
+      fix the border on word separators, frags the grid
+      make font sizes flex (svg?)
+- [ ] feat(accessibility): get screenreader requirements
 - [ ] refactor: Simplify the static site by removing Angular and Bootstrap, keeping everything as lean and clean as possible.
 - [ ] refactor: finish refactoring classes to simple functions (compileCrossword, createDOM etc)
-- [ ] feat: add hyphens to separate words - requires a change to the model to support commas vs hyphens between segments of thee answer
 - [ ] feat: support clues which span non-contiguous ranges (such as large clues with go both across and down).
 - todo: document the clue structure
-- todo: validate the clue segments properly
+- [ ] refactor: re-theme site to a clean black and white serif style, more like a newspaper

dist/crosswords.css

@@ -7,9 +7,8 @@
 }
 .crossword .cwrow .cwcell {
   position: relative;
-  width: 28px;
-  height: 28px;
   background: black;
+  flex: 1;
   border-top: 1px solid black;
   border-left: 1px solid black;
 }
@@ -21,17 +20,38 @@
 }
 .crossword .cwrow .cwcell .cwcluelabel {
   position: absolute;
-  font-size: 9px;
+  font-size: 0.5em;
   width: 10px;
   height: 10px;
   left: 2px;
   top: 0px;
   z-index: 1;
 }
+.crossword .cwrow .cwcell .cw-across-terminator {
+  position: absolute;
+  font-size: 19px;
+  font-weight: 'bold';
+  width: 10px;
+  height: 10px;
+  right: -6px;
+  top: 0px;
+  z-index: 1;
+}
+.crossword .cwrow .cwcell .cw-down-terminator {
+  position: absolute;
+  transform-origin: top left;
+  transform: rotate(-90deg);
+  font-size: 19px;
+  font-weight: 'bold';
+  width: 10px;
+  height: 10px;
+  bottom: -14px;
+  z-index: 1;
+}
 .crossword .cwrow .cwcell input {
   font-family: sans-serif;
   font-variant: small-caps;
-  font-size: 0.9em;
+  font-size: 1em;
   font-weight: bold;
   text-align: center;
   vertical-align: middle;
@@ -42,9 +62,21 @@
 .crossword .cwrow .cwcell input.active {
   background: #E1E1FF;
 }
+.crossword .cwrow .cwcell:after {
+  content: "";
+  float: left;
+  display: block;
+  padding-top: 100%;
+}
 .crossword .cwrow .cwcell:last-child {
   border-right: 1px solid black;
 }
+.crossword .cwrow .cw-across-word-separator {
+  border-right: 2px solid black;
+}
+.crossword .cwrow .cw-down-word-separator {
+  border-bottom: 2px solid black;
+}
 .crossword .cwrow:last-child .cwcell {
   border-bottom: 1px solid black;
 }

package.json

@@ -11,6 +11,7 @@
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-plugin-import": "^2.20.0",
+    "ignore-styles": "^5.0.1",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "mini-css-extract-plugin": "^0.9.0",
@@ -25,9 +26,9 @@
   },
   "scripts": {
     "lint": "eslint src",
-    "test": "mocha ./src/{,**/}*.specs.js",
-    "test:cov": "nyc mocha ./src/{,**/}*.specs.js",
-    "test:debug": "mocha --inspect-brk -w ./src/{,**/}*.specs.js",
+    "test": "mocha --require ignore-styles ./src/{,**/}*.specs.js",
+    "test:cov": "nyc mocha --require ignore-styles ./src/{,**/}*.specs.js",
+    "test:debug": "mocha --require ignore-styles --inspect-brk -w ./src/{,**/}*.specs.js",
     "release": "standard-version"
   },
   "keywords": [

sample/index.html

@@ -31,6 +31,9 @@
     .selectedClue {
       font-weight: bold;
     }
+    #crossword1 {
+      max-width: 640px;
+    }
     </style>
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
@@ -64,11 +67,9 @@
       <h3>{{info.title}}</h3>
       <h4>Set by {{info.setter.title}}</h4>
       <p>Originally from <a href="{{info.source}}">{{info.source}}</a>.</p>
+      <p>{{currentClue.number}}. {{currentClue.clue}} {{clue.answerStructureText}}</td>
+      <div id="crossword1"></div>
       <table>
-        <tr>
-          <td width="50%"><div id="crossword1"></div></td>
-          <td width="50%">{{currentClue.number}}. {{currentClue.clue}}</td>
-        </tr>
         <tr>
           <td>
             <p><strong>Across</strong></p>

sample/sampleapp.js

@@ -12,7 +12,7 @@ sampleapp.controller('MainController', function($scope, $http) {
 
     //  Create the crossword model.
     crossword = CrosswordsJS.compileCrossword(crosswordDefinition);
-    crosswordDom = new CrosswordsJS.CrosswordDOM(document, crossword, document.getElementById('crossword1'));
+    crosswordDom = new CrosswordsJS.CrosswordDOM(window, crossword, document.getElementById('crossword1'));
 
     $scope.acrossClues = crossword.acrossClues;
     $scope.downClues = crossword.downClues;

src/crossworddom.js

@@ -15,7 +15,8 @@ function getAnswerSegment(answerStructure, letterIndex) {
   }
 }
 
-function CrosswordDOM(document, crossword, parentElement) {
+function CrosswordDOM(window, crossword, parentElement) {
+  const { document } = window;
   this.crossword = crossword;
   this.parentElement = parentElement;
 
@@ -41,7 +42,24 @@ function CrosswordDOM(document, crossword, parentElement) {
     }
   }
 
+  //  For a given crossword object, this function sets the appropriate font
+  //  size based on the current crossword size.
+  const updateCrosswordFontSize = (crosswordContainer) => {
+    //  Get the width of a cell (first child of first row).
+    const cellWidth = crosswordContainer.children[0].children[0].clientWidth;
+    crosswordContainer.style.fontSize = `${cellWidth * 0.6}px`;
+  };
+
+  //  Update the fontsize when the window changes size, add the crossword, set
+  //  the correct fontsize right away.
+  window.addEventListener('resize', () => updateCrosswordFontSize(container));
   parentElement.appendChild(container);
+  updateCrosswordFontSize(container);
+
+  //  Add a helper function to allow the font to be resized programmatically,
+  //  useful if something else changes the size of the crossword.
+  this.updateFontSize = () => updateCrosswordFontSize(container);
+
   this.crosswordElement = container;
 }