polyglotzz.js v1.0.0

Polyglot.zz / js

Javascript (ES6) implementation of word search puzzle generator. This library generates word search puzzles and solutions.

Getting started

Example usage with react.js

import React from 'react';
import Puzzle from 'polyglotzz.js' 
import './App.css';
 
class App extends React.Component {

  renderPuzzleCell = (cell, i) =>{
    return <span key={i}>{cell}</span>
  }

  renderPuzzleRow = (row, i) =>{
      const cells = row.map(this.renderPuzzleCell);

      return <div key={i}>{cells}</div>
  }

  renderWordClue = (word, i) =>{
   return <li key={i}>{word}</li>
  }

  render() {

    // initialize puzzle
    const myPuzzle = new Puzzle();

    // add some words
    myPuzzle.add('apple');
    myPuzzle.add('banana');
    myPuzzle.add('watermelon');
    myPuzzle.add('cherry')
 
    // render board state
    const board = myPuzzle.puzzle.map(this.renderPuzzleRow);
    const clues = myPuzzle.words.map(this.renderWordClue);

    return <div>
        <h1>Word Search</h1>
        <div>{board}</div>
        <ul>{clues}</ul>
    </div>
  }
}

export default App;

Outputs:

App.css

 body{
   text-align:center;
   padding-top: 100px;
 }
 
 div > span {
    font-family: monospace;
    font-size: 120%;
    display: inline-block;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 30px;
    width: 30px;
 }

 ul {
   list-style: none;
   display: flex;
   word-wrap: wrap;
   align-items: center;
   justify-content: center;
 }
 ul> li {
   padding: 0.5em 2em;
   font-family: monospace;
   font-size: 150%;
 }

see Usage Manual for more detailed examples