Merge pull request #458 from JaredReisinger/dev

allow non-square rendering, fix imperative correctness when loading
JaredReisinger · Dec 13, 2022 · 4aa6dee · 4aa6dee
2 parents 451c906 + fda3353
commit 4aa6dee
Show file tree

Hide file tree

Showing 18 changed files with 1,683 additions and 1,488 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -75,6 +75,24 @@
       "contributions": [
         "ideas"
       ]
+    },
+    {
+      "login": "rhoffmann",
+      "name": "Richard Hoffmann",
+      "avatar_url": "https://avatars.githubusercontent.com/u/678772?v=4",
+      "profile": "https://github.com/rhoffmann",
+      "contributions": [
+        "ideas"
+      ]
+    },
+    {
+      "login": "gitname",
+      "name": "gitname",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7143133?v=4",
+      "profile": "https://github.com/gitname",
+      "contributions": [
+        "bug"
+      ]
     }
   ]
 }
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 ![more badges](https://img.shields.io/badge/badges-%F0%9F%91%8D%20are%20fun-orange)
 [![commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![contributors](https://img.shields.io/badge/contributors-7-orange.svg)](#contributors-)
+[![contributors](https://img.shields.io/badge/contributors-9-orange.svg)](#contributors-)
 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
@@ -155,15 +155,21 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
 <table>
-  <tr>
-    <td align="center"><a href="https://github.com/dreamer01"><img src="https://avatars.githubusercontent.com/u/16663935?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pushpendra Singh</b></sub></a><br /><a href="#ideas-dreamer01" title="Ideas, Planning, & Feedback">🤔</a></td>
-    <td align="center"><a href="https://www.maincross.net/"><img src="https://avatars.githubusercontent.com/u/8095144?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Amit Bansal</b></sub></a><br /><a href="https://github.com/JaredReisinger/react-crossword/issues?q=author%3Azehawki" title="Bug reports">🐛</a></td>
-    <td align="center"><a href="https://github.com/embeddedt"><img src="https://avatars.githubusercontent.com/u/42941056?v=4?s=100" width="100px;" alt=""/><br /><sub><b>embeddedt</b></sub></a><br /><a href="https://github.com/JaredReisinger/react-crossword/commits?author=embeddedt" title="Code">💻</a></td>
-    <td align="center"><a href="https://www.soindaial.com.br/"><img src="https://avatars.githubusercontent.com/u/42916864?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Albranco</b></sub></a><br /><a href="#ideas-drero" title="Ideas, Planning, & Feedback">🤔</a></td>
-    <td align="center"><a href="https://www.robmccollough.dev/"><img src="https://avatars.githubusercontent.com/u/42196611?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rob McCollough</b></sub></a><br /><a href="#ideas-robmccollough" title="Ideas, Planning, & Feedback">🤔</a></td>
-    <td align="center"><a href="https://github.com/lorddaedra"><img src="https://avatars.githubusercontent.com/u/26400787?v=4?s=100" width="100px;" alt=""/><br /><sub><b>lorddaedra</b></sub></a><br /><a href="#ideas-lorddaedra" title="Ideas, Planning, & Feedback">🤔</a></td>
-    <td align="center"><a href="https://github.com/HuHguZ"><img src="https://avatars.githubusercontent.com/u/32592443?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ilya Lukyanov</b></sub></a><br /><a href="#ideas-HuHguZ" title="Ideas, Planning, & Feedback">🤔</a></td>
-  </tr>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/dreamer01"><img src="https://avatars.githubusercontent.com/u/16663935?v=4?s=100" width="100px;" alt="Pushpendra Singh"/><br /><sub><b>Pushpendra Singh</b></sub></a><br /><a href="#ideas-dreamer01" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.maincross.net/"><img src="https://avatars.githubusercontent.com/u/8095144?v=4?s=100" width="100px;" alt="Amit Bansal"/><br /><sub><b>Amit Bansal</b></sub></a><br /><a href="https://github.com/JaredReisinger/react-crossword/issues?q=author%3Azehawki" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/embeddedt"><img src="https://avatars.githubusercontent.com/u/42941056?v=4?s=100" width="100px;" alt="embeddedt"/><br /><sub><b>embeddedt</b></sub></a><br /><a href="https://github.com/JaredReisinger/react-crossword/commits?author=embeddedt" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.soindaial.com.br/"><img src="https://avatars.githubusercontent.com/u/42916864?v=4?s=100" width="100px;" alt="Albranco"/><br /><sub><b>Albranco</b></sub></a><br /><a href="#ideas-drero" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.robmccollough.dev/"><img src="https://avatars.githubusercontent.com/u/42196611?v=4?s=100" width="100px;" alt="Rob McCollough"/><br /><sub><b>Rob McCollough</b></sub></a><br /><a href="#ideas-robmccollough" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/lorddaedra"><img src="https://avatars.githubusercontent.com/u/26400787?v=4?s=100" width="100px;" alt="lorddaedra"/><br /><sub><b>lorddaedra</b></sub></a><br /><a href="#ideas-lorddaedra" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/HuHguZ"><img src="https://avatars.githubusercontent.com/u/32592443?v=4?s=100" width="100px;" alt="Ilya Lukyanov"/><br /><sub><b>Ilya Lukyanov</b></sub></a><br /><a href="#ideas-HuHguZ" title="Ideas, Planning, & Feedback">🤔</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/rhoffmann"><img src="https://avatars.githubusercontent.com/u/678772?v=4?s=100" width="100px;" alt="Richard Hoffmann"/><br /><sub><b>Richard Hoffmann</b></sub></a><br /><a href="#ideas-rhoffmann" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/gitname"><img src="https://avatars.githubusercontent.com/u/7143133?v=4?s=100" width="100px;" alt="gitname"/><br /><sub><b>gitname</b></sub></a><br /><a href="https://github.com/JaredReisinger/react-crossword/issues?q=author%3Agitname" title="Bug reports">🐛</a></td>
+    </tr>
+  </tbody>
 </table>
 
 <!-- markdownlint-restore -->

diff --git a/docs/Styling.md b/docs/Styling.md
@@ -2,7 +2,8 @@ One other major difference (and advantage) to this crossword component is that i
 
 | theme property        | default               | description                                                                                                                                                                 |
 | --------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `columnBreakpoint`    | `'768px'`             | browser-width at which the clues go from showing beneath the grid to showing beside the grid.                                                                               |
+| `allowNonSquare`      | `false`               | allows crossword rendering to be non-square (i.e. a different number of rows and columns)                                                                                   |
+| `columnBreakpoint`    | `'768px'`             | browser-width at which the clues go from showing beneath the grid to showing beside the grid                                                                                |
 | `gridBackground`      | `'rgb(0,0,0)'`        | overall background color (fill) for the crossword grid. Can be `'transparent'` to show through a page background image.                                                     |
 | `cellBackground`      | `'rgb(255,255,255)'`  | background for an answer cell                                                                                                                                               |
 | `cellBorder`          | `'rgb(0,0,0)'`        | border for an answer cell                                                                                                                                                   |
@@ -29,8 +30,8 @@ const data = {
   },
   down: {
     2: {
-      clue: 'three minus two',
-      answer: 'ONE',
+      clue: 'opposite of "off"',
+      answer: 'ON',
       row: 0,
       col: 2,
     },
@@ -40,6 +41,7 @@ const data = {
 <div style={{ width: '30%' }}>
   <ThemeProvider
     theme={{
+      allowNonSquare: true,
       columnBreakpoint: '9999px',
       gridBackground: '#acf',
       cellBackground: '#ffe',
@@ -71,8 +73,8 @@ const data = {
   },
   down: {
     2: {
-      clue: 'three minus two',
-      answer: 'ONE',
+      clue: 'opposite of "off"',
+      answer: 'ON',
       row: 0,
       col: 2,
     },
@@ -83,6 +85,7 @@ const data = {
   <Crossword
     data={data}
     theme={{
+      allowNonSquare: true,
       columnBreakpoint: '9999px',
       gridBackground: '#acf',
       cellBackground: '#ffe',

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -297,7 +297,7 @@ function App() {
 
       <p>
         This is a demo app that makes use of the @jaredreisinger/react-crossword
-        component. It exercizes most of the functionality, so that you can see
+        component. It exercises most of the functionality, so that you can see
         how to do so.
       </p>
 
@@ -314,6 +314,7 @@ function App() {
           <Crossword
             ref={crossword}
             data={data}
+            storageKey="first-example"
             onCorrect={onCorrect}
             onLoadedCorrect={onLoadedCorrect}
             onCrosswordCorrect={onCrosswordCorrect}
@@ -344,6 +345,7 @@ function App() {
           <CrosswordProvider
             ref={crosswordProvider}
             data={data}
+            storageKey="second-example"
             onCorrect={onCorrectProvider}
             onLoadedCorrect={onLoadedCorrectProvider}
             onCrosswordCorrect={onCrosswordCorrectProvider}
@@ -357,6 +359,35 @@ function App() {
 
         <Messages ref={messagesProviderRef}>{messagesProvider}</Messages>
       </CrosswordMessageBlock>
+
+      <p>And a proof-of-concept for non-square crosswords:</p>
+
+      <CrosswordMessageBlock>
+        <CrosswordWrapper>
+          <Crossword
+            data={{
+              across: {
+                1: {
+                  clue: 'one plus one',
+                  answer: 'TWO',
+                  row: 0,
+                  col: 0,
+                },
+              },
+              down: {
+                2: {
+                  clue: 'opposite of "off"',
+                  answer: 'ON',
+                  row: 0,
+                  col: 2,
+                },
+              },
+            }}
+            theme={{ allowNonSquare: true }}
+            storageKey="third-example"
+          />
+        </CrosswordWrapper>
+      </CrosswordMessageBlock>
     </Page>
   );
 }

diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+// import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+// ReactDOM.render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);