Daily Scrum Bingo in 5 minutes

About

This project is variation of a Bingo game applied to Scrum meetings.
Many teams went to remote working mode due to COVID-19 and still doing their daily operations. People still hold daily Scrum meetings where they provide regular updates to the teammates.
However these meetings might become boring and sometimes very predictable.
To make a bit more fun - let's play Bingo during these meetings!
A player is given a card with 25 phrases that often occur during daily Scrum meeting. Player needs to mark which phrases were heard during this meeting.
Once there is whole row, column or a diagonal marked (during the meeting) - it is called "Bingo!" and player wins.

For this project we are going to use vanilla HTML/JavaScript and make it work in a browser.

Link to scrum.org: https://www.scrum.org/resources/what-is-a-daily-scrum
Link to Wikipedia: https://en.wikipedia.org/wiki/Bingo_(American_version)

Live coding

Here is a live coding session that shows how it can be done.

Duration: 4:58 (coding - 4:12)

Disclaimer: never use this code in production. It was created for fun.

Breakdown

Let's break down the solution and comment on some complex or interesting things.

0:32 - create HTML template in the same way as other projects do.

0:53 - filling in phrases that can be said during the meeting. This list is my guess - feel free to adjust to fit your environment. But in the end we should have texts array to contain exactly size * size elements (as we are playing on squared field).

1:12 - generating a tr and td elements for the table. Making a nested for loop over size * size elements and creating size elements of tr (these will be our rows) and each row will contain size of td elements.
Each td element will have a cell class assigned - we will define the style in the next step.
Note that it's quite convenient to manage assigned classes for element using element.classList.add("cell") and element.classList.remove("cell").
After this step we should see empty grid in the browser.

2:22 - now we need to place phrases into random positions of the grid. There are several ways how to do it and I chose to do the following implementation:

• Shuffle the phrases as one-dimensional array. Here we are doing a.sort((a, b) => 0.5 - Math.random());.
  This requires a bit of clarification. sort function of an Array object can accept a comparator function. Comparator should return -1 if first argument is less than the second, 0 if they are equal or +1 otherwise.
  Our expression is 0.5 - Math.random() - it will give us random number in interval (-0.5; +0.5) that should good enough for shuffling of the elements of the array. In roughly 50% of the cases first argument will be less that the second and in 50% it will be vice versa.
  Then we need to convert the index i into x and y coordinates. As we are going from left to right and from top to bottom x will be equal to i mod size (remainder of i after division by size). And y will be floor(i / size) (integer part of i dividing by size).
  Marking the cell as not selected as well. As you will see later we will use init function for starting new game.

2:53 - cell selection. The select function is quite simple. It checks if the cell is not yet selected and if so - just marks it as selected. It is done in both as visual part (adding selected class to the cell to change its background) and in the in-memore representation of the grid (card.selected = true).
And finally dont' forget to attach change listener to the cell.

3:23 - last step is to check if there is a line with all selected cells. There can be 3 different cases:

• whole row is selected
• whole column is selected
• any of 2 diagonals is selected

Let's try to figure out a generic way how to handle all 3 cases. First of all we know that we need to check size cells in a row.
For row i we can start from cell (0; i) and go left through all cells. In other words we need to iterate size times and change our x coordinate by 1 on every step. Alternatively we can say that we move x coordinate with dx = 1.
Similarly for column i we start from cell (i; 0) and change y coordinate size times with dy = 1.
Top-left to bottom-right diagonal can be done following the same approach: start with (0; 0) cell and iterate with dx = 1 and dy = 1.
Top-right to bottom-left diagonal - similarly: starting from (size - 1; 0) and apply dx = -1 and dy = 1.
lineSelected function does exactly this. It accepts 4 parameters - x and y represent inital coordinates and dx and dy define the iteration direction.
Now we can combine calls to lineSelected function inside checkOver function.
And it concludes the implementation.

4:10 - let's make a simulation of daily Scrum meeting and try to mark some cells. After all cells in topmost row are selected we see "Bingo!" alert shown.

Resources

Sources: https://github.com/5minute/examples/tree/main/scrum_bingo

See live results:https://jsfiddle.net/hvm941es/