Creating a Boggle Game using React: Part 1

Published Sep 04, 2017
Creating a Boggle Game using React: Part 1

Introduction

Boggle is a word game where you try to make words from letters out of sequentially adjacent cubes, where "adjacent" is defined as horizontally, vertically, and diagonally neighboring cubes.

The longer the word, the more points you score. Words must be at least three letters long, may include singular and plural (or other derived forms) separately, but may not use the same letter cube more than once per word.
After three minutes have elapsed, the game ends.

The letter "Q" is displayed as (and is scored as) "Qu."

Scoring

Submitted words are scored, as follows, based on the length of the word:
- 3-4 letters: 1 point
- 5 letters: 2 points
- 6 letters: 3 points
- 7 letters: 5 points
- 8 or more letters: 11 points

The User Interface

highfidelity_wireframe.png

Setup

Create a folder named BoggleGame and have a folder structure similiar to the image below .
Screen Shot 2017-08-27 at 3.08.30 PM.png

Files & Folders

  • components - The is the folder where we keep all our React components.
  • images - Contains images used in the project.
  • index.html - The page that bootstraps React and loads necessary HTML, CSS and JavaScript files.
  • styles.css - All our CSS styles go here.
  • index.js - This is the entry point for our React components.

Currently, all the files and folders are/should be empty.

Coding

To get started, we design our user interface with HTML and CSS.

BoggleUIStepOneEdit.png

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Boggle Game</title>
</head>
<body>
    <div id="boggle-container">
        <img src="./images/logo.png" class="logo" />
        <div id="board"></div>
        <div id="word-submit"></div>
        <table id="score-table"></table>
    </div>
</body>
</html>

./images/logo.png
logo.png

style.css

body {
    background-color: #F57921;
    font-family: Arial, Helvetica, sans-serif;
}

#boggle-container {
    display: flex;
    flex-direction: column;
    width: 490px;
    margin: 0 auto;
}

.logo {
    align-self: center;
}

#board {
    border: 5px solid #FFCA08;
    background-color: #398BD4;
    padding: 5px;
    margin-top: 20px;
}

Current view

Screen Shot 2017-08-27 at 6.05.53 PM.png

The Board

BoggleUIStepTwo.png

index.html

...

<div id="board">
    <div class="row">
        <div class="boggle">
            <span>A</span>
        </div> 
        <div class="boggle">
            <span>B</span>
        </div> 
        <div class="boggle">
            <span>C</span>
        </div> 
        <div class="boggle">
            <span>D</span>
        </div> 
        <div class="boggle">
            <span>E</span>
        </div>
    </div>
</div>

...

styles.css

...

.row {
    display: flex;
    text-align:center;
    flex-direction:row;
    padding: 5px;
}

.boggle:hover {
    cursor: pointer;
}

.boggle {
   width: 80px;
   height: 80px;
   border-radius: 5px;
   background-color: #ffffff;
   box-shadow: -4px 2px 8px 1px rgba(0,0,0,0.69);
   flex:1 1 auto;
   margin:5px;
}

.boggle.selected {
   background-color: #ACCEEC;
}

.boggle span {
   font-weight: bold;
   display: block;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

...

What We Have

Screen Shot 2017-08-28 at 12.40.17 AM.png

The Current Word and Submit Word Area

Screen Shot 2017-08-28 at 12.42.12 AM.png

index.html

...
<div id="word-submit">
    <span><strong>Current Word:</strong> ABC</span>
    <button type="button">Submit Word</button>
</div>
...

style.css

...

#word-submit {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
}
...

What We Have

Screen Shot 2017-08-28 at 12.47.48 AM.png

The Score Table Area

Screen Shot 2017-08-28 at 12.49.10 AM.png

...
<table id="score-table">
    <tr>
        <th>Word </th>
        <th>Score</th>
    </tr>
    <tr>
        <td>congruent</td>
        <td>11</td>
    </tr>
    <tr>
        <td>urgent</td>
        <td>3</td>
    </tr>
    <tr id="footer">
        <td>Total </td>
        <td>14</td>
    </tr>
</table>
...
...

#score-table {
    align-self: left;
    border: 5px solid #FFCA08;
    border-collapse: collapse;
    text-align: left;
}

#score-table td, #score-table th {
    border: 5px solid #FFCA08;
    background-color: white;
    padding: 5px;
}

#score-table tr#footer td {
    background-color: #ACCEEC;
}
...

What We Have

Screen Shot 2017-08-28 at 1.01.44 AM.png

Putting It All Together

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Boggle Game</title>
</head>
<body>
    <div id="boggle-container">
        <img src="./images/logo.png" class="logo" />
        <div id="board">
            <div class="row">
                <div class="boggle">
                    <span>A</span>
                </div> 
                <div class="boggle">
                    <span>B</span>
                </div> 
                <div class="boggle">
                    <span>C</span>
                </div> 
                <div class="boggle">
                    <span>D</span>
                </div> 
                <div class="boggle">
                    <span>E</span>
                </div>
            </div>
            <div class="row">
                <div class="boggle">
                    <span>A</span>
                </div> 
                <div class="boggle">
                    <span>B</span>
                </div> 
                <div class="boggle">
                    <span>C</span>
                </div> 
                <div class="boggle">
                    <span>D</span>
                </div> 
                <div class="boggle">
                    <span>E</span>
                </div>
            </div>
            <div class="row">
                <div class="boggle">
                    <span>A</span>
                </div> 
                <div class="boggle">
                    <span>B</span>
                </div> 
                <div class="boggle">
                    <span>C</span>
                </div> 
                <div class="boggle">
                    <span>D</span>
                </div> 
                <div class="boggle">
                    <span>E</span>
                </div>
            </div>
            <div class="row">
                <div class="boggle">
                    <span>A</span>
                </div> 
                <div class="boggle">
                    <span>B</span>
                </div> 
                <div class="boggle">
                    <span>C</span>
                </div> 
                <div class="boggle">
                    <span>D</span>
                </div> 
                <div class="boggle">
                    <span>E</span>
                </div>
            </div>
            <div class="row">
                <div class="boggle">
                    <span>A</span>
                </div> 
                <div class="boggle">
                    <span>B</span>
                </div> 
                <div class="boggle">
                    <span>C</span>
                </div> 
                <div class="boggle">
                    <span>D</span>
                </div> 
                <div class="boggle">
                    <span>E</span>
                </div>
            </div>
        </div>
        <div id="word-submit">
            <span><strong>Current Word:</strong> ABC </span>
            <button type="button">Submit Word</button>
        </div>
        <table id="score-table">
            <tr>
                <th>Word </th>
                <th>Score</th>
            </tr>
            <tr>
                <td>congruent</td>
                <td>11</td>
            </tr>
            <tr>
                <td>urgent</td>
                <td>3</td>
            </tr>
            <tr id="footer">
                <td>Total </td>
                <td>14</td>
            </tr>
        </table>
    </div>
</body>
</html>

style.css


body {
    background-color: #F57921;
    font-family: Arial, Helvetica, sans-serif;
}

#boggle-container {
    display: flex;
    flex-direction: column;
    width: 490px;
    margin: 0 auto;
}

.logo {
    align-self: center;
}

#board {
    border: 5px solid #FFCA08;
    background-color: #398BD4;
    padding: 5px;
    margin-top: 20px;
}

.row {
    display: flex;
    text-align:center;
    flex-direction:row;
    padding: 5px;
}

.boggle:hover {
    cursor: pointer;
}

.boggle {
   width: 80px;
   height: 80px;
   border-radius: 5px;
   background-color: #ffffff;
   box-shadow: -4px 2px 8px 1px rgba(0,0,0,0.69);
   flex:1 1 auto;
   margin:5px;
}

.boggle.selected {
   background-color: #ACCEEC;
}

.boggle span {
   font-weight: bold;
   display: block;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

#word-submit {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
}

#score-table {
    align-self: left;
    border: 5px solid #FFCA08;
    border-collapse: collapse;
    text-align: left;
}

#score-table td, #score-table th {
    border: 5px solid #FFCA08;
    background-color: white;
    padding: 5px;
}

#score-table tr#footer td {
    background-color: #ACCEEC;
}

What We Have

Screen Shot 2017-08-28 at 1.06.53 AM.png

In the second part of this tutorial, we will extract each element on the page into appropriate React components and include the game play and scoring logic!

If you enjoyed this tutorial, or have any questions or comments, feel free to like the post or comment below!

Discover and read more posts from Oyebanji Jacob
get started
Enjoy this post?

Leave a like and comment for Oyebanji

13