bingo-board

A React component for creating playable in-browser Bingo games. You know the kind I mean -- like on Oscar night? or during a Presidential debate?

Using bingo-board

A very vanilla game of Bingo:

import React from 'react';
import ReactDOM from 'react-dom';
import Bingo from 'bingo-board';

const phrases = [ /* your list of phrases -- try to give it at least 30 */ ];

ReactDOM.render(
  <React.StrictMode>
    <Bingo phrases={phrases} />
  </React.StrictMode>,
  document.getElementById('root')
);

This will:

The <Bingo> component will create your standard 5 × 5 grid
Internally, getBingoPhrases will randomly select 24 items from phrases
...and then stick FREE in the middle.

And that's it! Load it in your browser and click away to play.

Custom styles per square

Let's say one of your phrases was :fun: and you wanted to style the text larger and in a specific color. You can add a squareClassResolver function for that.

Let's revisit our vanilla example:

import Bingo, { squareClassResolver } from 'bingo-board';

const phrases = [ ':fun:', /* and 30 more */ ];

const customSquareClassResolver = (phrase) => {
  // In this example, we want to keep the default styling for the 'FREE' square
  let cssClass = squareClassResolver(phrase);

  if (phrase === ':fun:') {
    cssClass = `${cssClass} fun-style`;
  }

  return cssClass.trim();
};

ReactDOM.render(
  <React.StrictMode>
    <Bingo
      phrases={phrases}
      squareClassResolver={customSquareClassResolver}
    />
  </React.StrictMode>,
  document.getElementById('root')
);

Here we get our Bingo board as before, but now we'll apply the fun-style CSS class to the square that gets the :fun: phrase. (I'll leave the actual CSS up to you.)

API

`<Bingo>`

The main component. It takes the following props:

phrases (required) -- An array of strings that it uses to fill out the board; internally, the component uses getBingoPhrases to randomize the list and add the FREE space
freeSquare (optional) -- A string to use for the center 'FREE' square; this will be FREE if not provided
squareClassResolver (optional) -- A function applied to each phrase that will output a CSS class for the square its in; use it to grant custom styles to each square

`squareClassResolver`

Given a string, return a string to be applied as a CSS class to a square on the Bingo board. The library's default implementation returns free-square for the FREE square phrase, and an empty string for everything else.

Scripts

In the project directory, you can run:

`npm test`

Run those tests.

`npm run compile`

Compiles the TypeScript into the dist folder and also copies the base CSS for the component.

N.b., This is run as part of the continuous delivery script in the GitHub workflow. Do not commit to the dist directory unless you know what you're doing.

founddrama / bingo-board