TeochewThunder

Friday, 10 April 2020

Web Tutorial: Easter Memory Game (Part 3/3)

The logic we've coded so far is sound. But the presentation can be improved for usability purposes. It's not to make it look prettier but rather to ease gameplay.

For this, we'll need to delay the opening and closing of the cards. First, let's make some adjustments to the CSS. For card, we want it to rotate towards the user. So we define the transform-origin property to be right in the middle. The transition property we'll set to 200 milliseconds for all animatable transitions.

And create the new CSS class, flipping. This rotates the card horizontally around the middle of the card, as specified by the transform-origin property in card.

.card
{
    height: 100%;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.flipping
{
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}

.closed:before
{
    display: block;
    content: "EASTER MEMORY GAME\A\2671";
    white-space: pre-wrap;
    text-align: center;
    height: 100%;
    width: 100%;
    background-color: #FFCC00;
    color: #FFFFFF;
}

Add another property to card in the reset() method, isFlipping, with a default value of false.

for(var i = 0; i < totalCards; i++)
{
    var card =
    {
        id: i,
        template: undefined,
        isMatched: false,
        isOpened: false,
        isFlipping: false,
        flip: (e) =>
        {
            this.flipCard(e.currentTarget.id);
        }
    }

    cards.push(card);
}

In the render() method, make another change to the cardDisplay sub-component. This adds "flipping" to the classes that each card is already styled with, if their isFlipping property is true.

Got all that? Let's work some ReactJS magic!

In the flipCard() method, if the card is not opened, we want to open it. But let's close it with an animation. Instead of opening the card right away, enclose that code block in the setTimeout() function with an interval of 200 milliseconds.

if (cards[cardIndex].isOpened)
{

}
else
{
    setTimeout
    (
        () =>
        {
            cards[cardIndex].isOpened = true;
            this.setState({"cards": cards});

            this.matchCards(cards);
        },
        200
    );
}

Be sure to set the isFlipping property to false, because...

if (cards[cardIndex].isOpened)
{

}
else
{
    cards[cardIndex].isFlipping = true;
    this.setState({"cards": cards});

    setTimeout
    (
        () =>
        {
            cards[cardIndex].isFlipping = false;
            cards[cardIndex].isOpened = true;
            this.setState({"cards": cards});

            this.matchCards(cards);
        },
        200
    );
}

...before the setTimeout() function is run, you will set isFlipping to true and update state.

See what happens when I click on one card? It rotates, then shows its image.

That's pretty enough when applied to closed cards. Let's apply this to open cards. We want to close the card if it's opened. But only if it's not also matched with another card. So create an If block to check if the card's isMatched property is false.

if (cards[cardIndex].isOpened)
{
    if (!cards[cardIndex].isMatched)
    {

    }
}
else
{
    cards[cardIndex].isFlipping = true;
    this.setState({"cards": cards});

    setTimeout
    (
        () =>
        {
            cards[cardIndex].isFlipping = false;
            cards[cardIndex].isOpened = true;
            this.setState({"cards": cards});

            this.matchCards(cards);
        },
        200
    );
}

Again, set isFlipping to true, update state, then run the setTimeout() function with an interval of 200 milliseconds. After 200 milliseconds has passed, isFlipping should be set back to false, isOpened to false, and state updated. ReactJS intelligently renders all this, within that 200 milliseconds!

if (!cards[cardIndex].isMatched)
{
    cards[cardIndex].isFlipping = true;
    this.setState({"cards": cards});

    setTimeout
    (
        () =>
        {
            cards[cardIndex].isFlipping = false;
            cards[cardIndex].isOpened = false;

            this.setState({"cards": cards});
        },
        200
    );
}

So now when you click on a closed card, it should flip open. If you click on an open card, it should flip closed unless it's matched with another open card, in which case it will do absolutely fuck-all. Sound about right?

Animation for matching

Now that we've implemented animation for opening and closing of cards, let's do it for matching. Remember if two cards don't match after being opened, they close immediately? Well, we need that shit to slow down.

First, encase the existing code block for not matching, in a setTimeout() function. Add lines to set the isFlipping property of both cards to false.

if (matching[0].template == matching[1].template)
{
    cards[matching[0].id].isMatched = true;
    cards[matching[1].id].isMatched = true;

    var notMatched = cards.filter((x) => {return !x.isMatched;});
    if (notMatched.length == 0) this.stopTimer();

    this.setState({"cards": cards});
}
else
{
    setTimeout
    (
        () =>
        {
            cards[matching[0].id].isFlipping = false;
            cards[matching[0].id].isOpened = false;

            cards[matching[1].id].isFlipping = false;
            cards[matching[1].id].isOpened = false;

            this.setState({"cards": cards});
        },
        200
    );
}

Then encase that setTimeout() call in another outer setTimeout() call. Here, set isFlipping to true for both cards and update state.

setTimeout
(
    () =>
    {
        cards[matching[0].id].isFlipping = true;
        cards[matching[1].id].isFlipping = true;
        this.setState({"cards": cards});

        setTimeout
        (
            () =>
            {
                cards[matching[0].id].isFlipping = false;
                cards[matching[0].id].isOpened = false;

                cards[matching[1].id].isFlipping = false;
                cards[matching[1].id].isOpened = false;

                this.setState({"cards": cards});
            },
            200
        );
    },
    200
);

See what happens when I click on two unmatched cards? They hang there for a split second, then flip back closed! Now you can actually see what didn't match!

Finishing up...

In the render() method, declare btnClick as a callback. It's the reset() method that is called.

var message;
var buttonText;

var btnClick = () => {this.reset();}

if (this.state.seconds == 0)
{
    message = "GAME OVER!";
    buttonText = "REPLAY";
}
else
{
    message = "TIME ELAPSED: ";
    buttonText = "RESET";
}

When rendering the button, set the onClick attribute to btnClick. Now whenever you click the button, the entire grid should reset and the timer goes back to 100 seconds, and the cards are randomly assigned again!

<div id="buttonContainer">
<button onClick={btnClick}>{buttonText}</button>
</div>

Also, declare notMatched. Use the filter() method on cards to get an array of all cards that have the isMatched property set to false. Assign the array to notMatched.

The code block following this should be enveloped in the Else portion of an If-Else block, checking if notMatched is an empty array.

If notMatched is empty, that means the user has matched all card and congratulations are in order.

if (notMatched.length == 0)
{
    message = "CONGRATULATIONS! YOU HAVE COMPLETED THIS GAME WITH TIME REMAINING: ";
    buttonText = "REPLAY";
}
else
{
    if (this.state.seconds == 0)
    {
        message = "GAME OVER!";
        buttonText = "REPLAY";
    }
    else
    {
        message = "TIME ELAPSED: ";
        buttonText = "RESET";
    }
}

Good shit, right?!

Sorry for swearing so much on an Easter-themed web tutorial. I'm just really excited. ReactJS can be a pain in the ass, but sometimes it's also really cool.

Flipping you off,
T___T

Tuesday, 7 April 2020

Web Tutorial: Easter Memory Game (Part 2/3)

This game is all about pairing up. Remember in the reset() method we had 6 templates? Well, for each template there will be 3 pairs. That makes (3 x 2 = 6) cards per template, and since we have 6 templates, that makes (6 x 6 = 36) cards!

After having derived the cards array, create a For loop to iterate through totalTemplates. Also, since we're talking about templates, add the template property to the card object, with a default value of undefined.

And just in case you didn't set the isOpened property to true in the previous part of this tutorial, you should totally do it now.

reset()
{
    this.stopTimer();

    var cards = [];
    var totalTemplates = 6;
    var totalCards = totalTemplates * totalTemplates;

    for(var i = 0; i < totalCards; i++)
    {
        var card =
        {
            id: i,
            template: undefined,
            isOpened: true,
        }

        cards.push(card);
    }

    this.setState({"seconds": 100, "cards": cards});

    this.startTimer();
}

for (var i = 0; i < totalTemplates; i++)
{

}

this.setState({"seconds": 100, "cards": cards});

Within the loop, declare assigned and set it to 0. Then create a While loop that runs as long as assigned is less than totalTemplates.

for (var i = 0; i < totalTemplates; i++)
{
    var assigned = 0;

    while (assigned < totalTemplates)
    {

    }
}

Then declare unassigned. It's an array, returned by running the cards array through the filter() method to only get the elements whose template property is undefined. Here's some info about the filter() method.

for (var i = 0; i < totalTemplates; i++)
{
    var assigned = 0;

    while (assigned < totalTemplates)
    {
        var unassigned = cards.filter((x) => {return x.template == undefined;});
    }
}

Next, declare randomIndex and use a random number function to get any number from 0 to the length of unassigned, minus 1.

for (var i = 0; i < totalTemplates; i++)
{
    var assigned = 0;

    while (assigned < totalTemplates)
    {
        var unassigned = cards.filter((x) => {return x.template == undefined;});
        var randomIndex = Math.floor((Math.random() * (unassigned.length)));
    }
}

And once that's done, we use the id property of the element of unassigned pointed to by randomIndex, to point to the actual element in cards, and set the template property to the current template number! Then increment assigned.

The idea here is to go through every template, numbered 0 to 5, progressively setting the template property of "unassigned" cards until the current template fills up 6 cards. Once each of the 6 templates is assigned to 6 cards, the script exits the For loop. This will not be an infinite loop because the length of unassigned grows shorter by one every time the contents of the While loop is run.

Now in the render() method, remember we created cardDisplay? Here, declare template and set it to "template", concatenating the string with the template property. Then redefine style so that it adds template to the class as well as "opened" if isOpen is true. That's what the space was for!

And after this, the CSS. Set background properties for opened. And then set the background-image property for CSS classes template0 to template5. We'll use the images shown in the first part of this tutorial.

.opened:before
{
    display: block;
    content: "";
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.template0:before
{
    background-image: url(easter0.jpg);
}

.template1:before
{
    background-image: url(easter1.jpg);
}

.template2:before
{
    background-image: url(easter2.jpg);
}

.template3:before
{
    background-image: url(easter3.jpg);
}

.template4:before
{
    background-image: url(easter4.jpg);
}

.template5:before
{
    background-image: url(easter5.jpg);
}

There you go. Each individual template should have 3 pairs, randomly placed all throughout the grid. Remember we set isOpened to true? That's so you can see what's going on.

Clicking the cards!

In the reset() method, set isOpened to false again, and add the flip() method to card. We pass in the event, e, as an argument. In the method, we call the flipCard() method (which we'll write soon), and pass in the id of the card. Remember each card has an id? Well, it's about to be useful.

for(var i = 0; i < totalCards; i++)
{
    var card =
    {
        id: i,
        template: undefined,
        isOpened: false,
        flip: (e) =>
        {
            this.flipCard(e.currentTarget.id);
        }
    }

    cards.push(card);
}

In the render() method, ensure that the onClick attribute is set with the flip() method.

return (
    <div className="cardContainer" key={key}>
        <div className={style} id={item.id} onClick={item.flip}>
        </div>
    </div>
);

Now, we're going to define the flipCard() method. It accepts a parameter - an integer which is the id of the card clicked.

constructor(props)
{
    super(props);
    this.state =
    {
        "seconds": 100,
        "cards": []
    };
}

flipCard(cardIndex)
{

}

stopTimer()
{
    clearInterval(this.interval);
    this.interval = undefined;
}

flipCard() does nothing if seconds is 0, because then the game would be over.

flipCard(cardIndex)
{
    if (this.state.seconds > 0)
    {

    }
}

Then declare cards, and assign the value of the cards array in state, to it. Think of cards in this case as a temporary storage variable. Then define an If block, using the element in the cards array pointed to by cardIndex, and checking if it's opened.

flipCard(cardIndex)
{
    if (this.state.seconds > 0)
    {
        var cards = this.state.cards;

        if (cards[cardIndex].isOpened)
        {

        }
        else
        {

        }
    }
}

Don't do anything for now if the card is opened. But if it isn't, set the isOpened property to true, then replace the cards array in the state, with this altered cards array. We need to do this because arrays in state aren't mutable the normal way.

flipCard(cardIndex)
{
    if (this.state.seconds > 0)
    {
        var cards = this.state.cards;

        if (cards[cardIndex].isOpened)
        {

        }
        else
        {
            cards[cardIndex].isOpened = true;
            this.setState({"cards": cards});
        }
    }
}

Now try clicking on each card. Those that are closed, will be opened to reveal their picture. And those already opened, won't react!

Matching Logic

Time for the next part - determining if the cards are matched. Add the isMatched property to card in the reset() method. The default value is false.

for(var i = 0; i < totalCards; i++)
{
    var card =
    {
        id: i,
        template: undefined,
        isMatched: false,
        isOpened: false,
        flip: (e) =>
        {
            this.flipCard(e.currentTarget.id);
        }
    }

    cards.push(card);
}

Then in the flipCard() method, after setting the isOpened property to true and setting the state, run the matchCards() method, passing in cards as an argument.

Here, define the matchCards() method. It will accept the array arr as a parameter.

constructor(props)
{
    super(props);
    this.state =
    {
        "seconds": 100,
        "cards": []
    };
}

matchCards(arr)
{

}

flipCard(cardIndex)
{
    if (this.state.seconds > 0)
    {
        var cards = this.state.cards;

        if (cards[cardIndex].isOpened)
        {

        }
        else
        {
            cards[cardIndex].isOpened = true;
            this.setState({"cards": cards});

            this.matchCards(cards);
        }
    }
}

Declare cards and assign arr as its value. Then define the variable matching. It is an array that will be produced when we run cards through the filter() method, only returning cards that are opened and not matched.

Then, in an If block, check if the there are two elements in the matching array. This would mean that there are two cards that are opened and not matched, and it is these two cards that need to be compared.

matchCards(arr)
{
    var cards = arr;
    var matching = cards.filter((x) => {return x.isOpened && !x.isMatched;});

    if (matching.length == 2)
    {

    }
}

Compare the template properties of these cards in a nested If block.

If they match, set the isMatched property of these cards to true. Ensure that you use the id property of the matching elements to reference the index of the cards array when you do, because it's the cards in cards that you need to change, not those in matching. Then update cards in state with the newly updated array.

Add an extra condition meanwhile. using the filter() function on cards again, check if any cards are not matched and return the resulting array to the variable notMatched. If there are no cards that aren't matched, stop the timer because the game is over.

matchCards(arr)
{
    var cards = arr;
    var matching = cards.filter((x) => {return x.isOpened && !x.isMatched;});

    if (matching.length == 2)
    {
        if (matching[0].template == matching[1].template)
        {
            cards[matching[0].id].isMatched = true;
            cards[matching[1].id].isMatched = true;

            var notMatched = cards.filter((x) => {return !x.isMatched;});
            if (notMatched.length == 0) this.stopTimer();

            this.setState({"cards": cards});
        }
        else
        {

        }
    }
}

Naturally, if the two cards do not match, close them by setting isOpened to false, and update state.

Next, in the render() method, the cardDisplay component should add an extra CSS class if isOpened and isMatched are true. The CSS class is matched, and that's what we're going to create next.

This one is simple. We'll just set brightness lower if the cards are matched, to visually differentiate them.

.template5:before
{
    background-image: url(easter5.jpg);
}

.matched:before
{
    filter: brightness(30%);
}

Oh wow, did you see that? The matched cards are darker.

You may notice that it is devilishly hard to get a matched pair because when you open a second card and it doesn't match, both cards close straight away. This behavior is correct, but it needs to be improved via animation.

Making the interface friendlier via animation, and some cleaning up.

Saturday, 4 April 2020

Web Tutorial: Easter Memory Game (Part 1/3)

It's time for the annual Easter-themed web tutorial. And I've got a good one here for you today. It's an Easter-themed memory game, the kind you might have played as a kid. For this, we'll be using a crowd-pleaser... ReactJS!

This, of course, will require us to start with some boilerplate code.

Add this div, and style it using the CSS class preload. In it, we have image tags for all the six images we'll be using.

<!DOCTYPE html>
<html>
   <head>
       <title>Easter Memory Game</title>
       <style>

       </style>

       <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
       <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
       <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   </head>

   <body>
       <div class="preload">
           <img src="easter0.jpg" />
           <img src="easter1.jpg" />
           <img src="easter2.jpg" />
           <img src="easter3.jpg" />
           <img src="easter4.jpg" />
           <img src="easter5.jpg" />
       </div>

        <script type="text/babel">

        </script>
   </body>
</html>

In the stylesheet, give all divs a red outline. Set the default font to Verdana and font size to 12 pixels. And hide the preload CSS class.

The images in the div will not be visible. That's the entire point. We put them there so that the images will load normally when they're being used. It's a cheap low-tech preloading technique, but it works! These are the images in question.

easter0.jpg

easter1.jpg

easter2.jpg

easter3.jpg

easter4.jpg

easter5.jpg

Now let's add one more div in our app. It has an id of appContainer.

Here's the styling for it. It will be 500 by 700 pixels, and centered.

.preload
{
   display:none;
}

#appContainer
{
   height: 700px;
   width: 500px;
   margin: 5px auto 0 auto;
}

This is how we begin - with a tall box.

For the script, our component will be EasterMemoryGame. In it, I've added a constructor with a blank state, a componentDidMount() method for stuff we want to run upon loading, and the render() method. Pretty standard stuff.

For the state, we need the property seconds, which will default to a value of 100. The second value, cards, is an array.

constructor(props)
{
   super(props);
   this.state =
   {
       "seconds": 100,
       "cards": []
   };
}

In the render() method, we will return this component within appContainer. There is a div with an id of easterMemoryGameContainer. In turn, it contains an id with a div of timeContainer, a div with an id of buttonContainer containing a button, and a div with an id of deckContainer.

render()
{
   return (
       <div id="easterMemoryGameContainer">
           <div id="timeContainer">

           </div>

           <div id="buttonContainer">
               <button></button>
           </div>

           <div id="deckContainer">

           </div>
       </div>
   );
}

This won't look like much right now. We need to style it.

I won't spend a whole lot of time explaining the layout because it's really simple. easterMemoryGameContainer will fit the whole of appContainer. Wthin it, the three divs are meant to occupy a certain space in that one-column layout, so all have widths set to 100%.

These are the heights of each of the divs.

#easterMemoryGameContainer
{
   height: 100%;
   width: 100%;
}

#timeContainer
{
   height: 150px;
   width: 100%;
}

#buttonContainer
{
   height: 50px;
   width: 100%;
}

#deckContainer
{
   height: 500px;
   width: 100%;
}

Also, timeContainer and buttonContainer have text color set to black and aligned center.

#easterMemoryGameContainer
{
   height: 100%;
   width: 100%;
}

#timeContainer
{
   height: 150px;
   width: 100%;
   text-align: center;
   color: #000000;
}

#buttonContainer
{
   height: 50px;
   width: 100%;
   text-align: center;
   color: #000000;
}

#deckContainer
{
   height: 500px;
   width: 100%;
}

Now we're talking. Let's style the button next.

This is not really all that essential. It's mostly up to personal preferences. I've generally made the button orange with white text, with some changes upon a mouseover.

#buttonContainer
{
   height: 50px;
   width: 100%;
   text-align: center;
   color: #000000;
}

#buttonContainer button
{
   margin: 0.25em;
   width: 5em;
   height: 2.5em;
   text-align: center;
   border-radius: 5px;
   border: 0px solid #000000;
   background-color: rgba(255, 200, 0, 1);
   color: rgba(255, 255, 255, 1);
   font-weight: bold;
}

#buttonContainer button:hover
{
   background-color: rgba(255, 200, 0, 0.5);
   color: rgba(0, 0, 0, 1);
}

#deckContainer
{
   height: 500px;
   width: 100%;
}

Oh, there's no text in the button? That shouldn't surprise you at all. We never added any, after all. This is going to be the domain of the render() method.

In the render() method, the returned method will include the seconds property of this application's state, within another div.

render()
{
   return (
       <div id="easterMemoryGameContainer">
           <div id="timeContainer">
               <div>
                   <h1>{this.state.seconds}</h1>
                   seconds
               </div>
           </div>

           <div id="buttonContainer">
               <button></button>
           </div>

           <div id="deckContainer">

           </div>
       </div>
   );
}

And since that value is set to 100, this is what you should see.

Declare two variables - message and buttonText.

render()
{
   var message;
   var buttonText;

   return (
       <div id="easterMemoryGameContainer">
           <div id="timeContainer">
               <div>
                   <h1>{this.state.seconds}</h1>
                   seconds
               </div>
           </div>

           <div id="buttonContainer">
               <button></button>
           </div>

           <div id="deckContainer">

           </div>
       </div>
   );
}

Next, create an If block for the condition that seconds is 0. Add an Else block.

render()
{
   var message;
   var buttonText;

   if (this.state.seconds == 0)
   {

   }
   else
   {

   }

   return (
       <div id="easterMemoryGameContainer">
           <div id="timeContainer">
               <div>
                   <h1>{this.state.seconds}</h1>
                   seconds
               </div>
           </div>

           <div id="buttonContainer">
               <button></button>
           </div>

           <div id="deckContainer">

           </div>
       </div>
   );
}

Set message and buttonText accordingly. Here's what we're trying to accomplish - the user is given 100 seconds to finish the game. As long as seconds is not zero, message should show "TIME ELAPSED: " and the button acts as a Reset button. Once seconds reaches 0, message should tell the user that the game is over, and the button acts as a Replay button. In reality, the button's functionality doesn't change, but it makes for a more friendly UI.

render()
{
   var message;
   var buttonText;

   if (this.state.seconds == 0)
   {
       message = "GAME OVER!";
       buttonText = "REPLAY";
   }
   else
   {
       message = "TIME ELAPSED: ";
       buttonText = "RESET";
   }

   return (
       <div id="easterMemoryGameContainer">
           <div id="timeContainer">
               <div>
                   <h1>{this.state.seconds}</h1>
                   seconds
               </div>
           </div>

           <div id="buttonContainer">
               <button></button>
           </div>

           <div id="deckContainer">

           </div>
       </div>
   );
}

Add the message and buttonText template strings.

return (
   <div id="easterMemoryGameContainer">
       <div id="timeContainer">
           <div>
               <br />{message}
               <h1>{this.state.seconds}</h1>
               seconds
           </div>
       </div>

       <div id="buttonContainer">
           <button>{buttonText}</button>
       </div>

       <div id="deckContainer">

       </div>
   </div>
);

You should see that your button now has text!

Timer Functions

It's time to move on to actually making the timer move. In the componentDidMount() method, add a call to the reset() method. This means that reset() will be called as soon as the component loads.

componentDidMount()
{
this.reset();
}

Create the reset() method and add calls to the stopTimer() method and the startTimer() method. Create those methods.

stopTimer()
{

}

startTimer()
{

}

reset()
{
   this.stopTimer();

   this.startTimer();
}

componentDidMount()
{
    this.reset();
}

In the stopTimer() method, run the clearInterval() function with the app's built-in interval property as an argument. Then set interval to undefined.

stopTimer()
{
clearInterval(this.interval);
this.interval = undefined;
}

First, check if interval is undefined. It should be (either reset in stopTimer() or as a default value, but no harm being careful.

startTimer()
{
   if (this.interval == undefined)
   {

   }
}

Then use interval to run the setInterval() method. Here, we're using the ECMAScript's Fat Arrow Notation convention. The interval is one second.

startTimer()
{
   if (this.interval == undefined)
   {
       this.interval = setInterval
       (
           () =>
           {

           },
           1000
        );
   }
}

Decrement the seconds property of the application state. If this means that seconds is now 0, run the stopTimer() method.

this.interval = setInterval
(
   () =>
   {
       this.setState({"seconds": this.state.seconds - 1});

       if (this.state.seconds == 0)
       {
           this.stopTimer();
       }
   },
   1000
);

Now when you refresh, you can see the number running down.

And when it reaches 0, you can see that the message and button text have changed.

The Cards

Now we get to the mest of the application - the cards. Here's some styling for cardContainer. Our aim is to have a 6 by 6 grid of cards fitting into the deckContainer div. So if deckContainer is 500 pixels width (because it takes up 100% of appContainer's 500 pixel width), divide that by 6 and you get 83 with some left over. So 72 pixels height and width, with a 10 pixel margin to the top and left, sounds reasonable. Float everything left.

#deckContainer
{
   height: 500px;
   width: 100%;
}

.cardContainer
{
   height: 72px;
   width: 72px;
   margin-left: 10px;
   margin-top: 10px;
   float: left;
}

card is another CSS class which will be nested within cardContainer. It will take up all of its parent's height and width, with rounded corners. Because it is clickable, the cursor property has been set to pointer. The overflow property is set to hidden because we're going to have stuff nested that may exceed the boundaries of this CSS class.

.cardContainer
{
   height: 72px;
   width: 72px;
   margin-left: 10px;
   margin-top: 10px;
   float: left;
}

.card
{
   height: 100%;
   width: 100%;
   border-radius: 5px;
   overflow: hidden;
   cursor: pointer;
}

Our next piece of work will be done at the reset() method. First, declare an empty array, cards. Then set the seconds property of the state to 100, and the cards property to the array you just declared. This method is meant to reset, and that means these are the values at the beginning of every game.

reset()
{
   this.stopTimer();

   var cards = [];

   this.setState({"seconds": 100, "cards": cards});

   this.startTimer();
}

Our intention, remember, is to have a 6 by 6 grid of cards. For that, we'll have 6 templates. Declare the variable totalTemplates and set that to 6. Then declare totalCards and set the value to that of totalTemplates squared.

reset()
{
   this.stopTimer();

   var cards = [];
   var totalTemplates = 6;
   var totalCards = totalTemplates * totalTemplates;

   this.setState({"seconds": 100, "cards": cards});

   this.startTimer();
}

Now implement a For loop to iterate through totalCards.

reset()
{
   this.stopTimer();

   var cards = [];
   var totalTemplates = 6;
   var totalCards = totalTemplates * totalTemplates;

   for(var i = 0; i < totalCards; i++)
   {

   }

   this.setState({"seconds": 100, "cards": cards});

   this.startTimer();
}

Within that loop, declare card as an object that has the properties id (not strictly necessary, but good to have) and isOpened, which is a boolean value telling us if the card is opened (true) or closed (false). By default, it's false. Then add card into the cards array with the push() method.

reset()
{
   this.stopTimer();

   var cards = [];
   var totalTemplates = 6;
   var totalCards = totalTemplates * totalTemplates;

   for(var i = 0; i < totalCards; i++)
   {
       var card =
       {
           id: i,
           isOpened: false,
       }

       cards.push(card);
   }

   this.setState({"seconds": 100, "cards": cards});

   this.startTimer();
}

Now that's done, let's move on to the render() method. Before declaring message and buttonText, declare cardDisplay. It will be a HTML component generated using the map() method applied to the cards array in state which we've just updated with a 36-element grid!

render()
{
   var cardDisplay = this.state.cards.map(
       (item, key) =>
       {

       }
   );

   var message;
   var buttonText;

Declare style. It's "card " with a space at the end, and either "opened " (again with a space) or "closed" depending on the value of the isOpened property.

var cardDisplay = this.state.cards.map(
   (item, key) =>
   {
       var style = "card " + (item.isOpened ? "opened " : "closed");
   }
);

Then return a div styled using cardContainer. We add a key so as to prevent any complaints from the transpiler. Nested within is another div, this one styled using style.

Then in the return statement of the render() method, add cardDisplay to the template returned.

Here you can see the grid you just made! The squares are blank, and that's because we have not yet created the CSS classes for opened or closed.

Let's start by specifying the CSS class closed. We'll use the before pseudoselector for this because we want to make use of the content property. Text is set to white and background is orange. Get creative!

The display property is block, of cours, and we'll make it take up full height and width. Since the parent, card, has overflow set to hidden, its round corners will be aptly shown.

Finally, for content, we have a line of text followed by a break and the HTML symbol of a cross. The white-space property is set to pre-wrap because we want the browser to preserve white spaces for this CSS class and break on line breaks.

.card
{
   height: 100%;
   width: 100%;
   border-radius: 5px;
   overflow: hidden;
   cursor: pointer;
}

.closed:before
{
   display: block;
   content: "EASTER MEMORY GAME\A\2671";
   white-space: pre-wrap;
   text-align: center;
   height: 100%;
   width: 100%;
   background-color: #FFCC00;
   color: #FFFFFF;
}

For opened, it's pretty much the same, only there's no content.

.closed:before
{
   display: block;
   content: "EASTER MEMORY GAME\A\2671";
   white-space: pre-wrap;
   text-align: center;
   height: 100%;
   width: 100%;
   background-color: #FFCC00;
   color: #FFFFFF;
}

.opened:before
{
   display: block;
   content: "";
   height: 100%;
   width: 100%;
}

Also, at this point, you can get rid of the red lines. They're no longer needed.

div {outline: 0px solid #FF0000;}

Now refresh your browser... and see what you've just made! It's a little tacky, sure, what what the hell, right?

If you want to see what opened looks like, just do this, and refresh. You should see the entire grid disappear because no content has been rendered yet for opened, plus we got rid of the red lines.

for(var i = 0; i < totalCards; i++)
{
   var card =
   {
       id: i,
       isOpened: true,
   }

   cards.push(card);
}

No sweat, we're just getting started. Next up, we will focus on game logic and handle opening and closing of cards.

Disclaimer

All opinions expressed on this blog are mine, and mine alone. Deal with it.

All technical information and code are written at my current level of understanding and may be incomplete. Some of it has been deliberately kept simple for clarity. Don't hesitate to correct me.

My experiences may be limited, and as such there may be blind spots in my reasoning. Feel free to disagree.

I'm not being paid to write this blog. This is purely a leisure activity. Keep your expectations low.

This being the Internet, someone is bound to take offense. The Web's a big place, and you're all big boys and girls. Seek life elsewhere.