Project Showcase: Tenzies Clone

Intro

Hello and welcome to another blog post for Anthony’s Techie Thoughts! If you’re new here, my name is Anthony and I’m studying programming to make a career change from mathematics teacher to frontend web developer.

In my blog posts, I reflect on my journey and share things I’m learning along the way. You can find me on Mastodon, Twitter, GitHub, and LinkedIn.

In this blog post, I’ll be sharing some thoughts on a recent project I completed: a clone of the Tenzies dice game. Thanks for stopping by and happy coding!

Tenzies Clone

Overview

This project was introduced in Module 11 "React Basics" of the Scrimba Frontend Career Path. It is a clone of the popular dice game, Tenzies, and is played the same way.

The goal of the game is to roll the 10 dice until they are the same. During gameplay, players can set aside the number they are trying to reach -- this means these dice will not be rolled during the next roll. They then continue rolling and holding dice until all are the same number.

The bulk of this project was completed during follow-along tutorials, however, the following features were completed independently:

• Ability to track time

• Store the player's best time in local storage

• Track the number of rolls

• Use CSS to add dice dots

Built with

• HTML
• CSS
• JavaScript
• React JS

Screenshots

Links

• Live: https://tenzies-clone.netlify.app/

• Repo: https://github.com/ananfito/tenzies-clone

My big takeaway: How to use CSS Grid

This project packed a lot into it! It was a great opportunity to review key practices with React, such as useState and useEffect, but I think my biggest takeaway from this project was learning how to use CSS grid to create the dice dots.

As I learned from this DEV.to blog post by Edwin, the trick here is to use CSS grid with grid-template-areas and the nth-child() pseudo-selector to specify where the dots (or pips) will appear. This is because the dots on an actual dice fall into a 3x3 grid which makes CSS grid a great choice for displaying the dots.

Here's an excerpt of the CSS:

.die-face {
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); 
  padding: .20em;
  width: 45px;
  height: 45px;
  border-radius: 5px;
  cursor: pointer;
  display: grid;
    /* each area (or letter) will be taken by a dot */
  grid-template-areas: 
      "a . c"
      "e g f"
      "d . b";
  flex: 0 0 auto;
}

.pip {
  display: block;
  align-self: center;
  justify-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0;
  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
}

/* these assign the dots to the appropriate grid areas */
.pip:nth-child(2) {
  grid-area: b;
}

.pip:nth-child(3) {
  grid-area: c;
}

.pip:nth-child(4) {
  grid-area: d;
}

.pip:nth-child(5) {
  grid-area: e;
}

.pip:nth-child(6) {
  grid-area: f;
}

/* this places the dot of the 3 and 5 die in the center */
.pip:nth-child(odd):last-child {
grid-area: g;
}

I found this solution to be particularly clever and helpful in completing the independent portions of the project. For a full explanation, I strongly encourage you to read Edwin's post and check out the sandbox he provided at the end of the post.

Closing thoughts

I was excited to work on this project because Tenzies is a game that I’ve played with my family many times. It’s so simple, yet so addictive! The hallmark qualities of a great game. Creating a clone of the game helped me to practice my programming skills and also see the connection between real-world activities and software. And this excites me!

One of the things I love and find fascinating about developing software like this is seeing how activities (like rolling dice) can be broken down into smaller and smaller actions which then can be written as code and executed by a computer. And the best part is when you learn this skill and put it into practice like I have in this project, it’s such an exhilarating moment.

Granted, it takes a lot of hard work, trial and error (maybe lots of errors?), and refactoring to get to that point, but I think that makes it all the more joyous. You get to see the results of how your hard work paid off. And then you get to do it again! These are the two parts of programming I enjoy the most: the process and the results. Which means it’s time to start another project!

Thanks for reading

Thanks so much for reading this post. I hope you found it helpful. I’d love to know: what are your favorite parts of programming? Share your thoughts in the comments below. Hearing your thoughts makes this more of a conversation and helps us all learn. See you next time.