Styling Rock, Paper, Scissors

--Styling Rock, Paper, Scissors.md

Styling Rock, Paper, Scissors

In this project, you will get the chance to practice styling React applications using different techniques.

You will be styling a game of Rock, Paper, Scissors. However, rather than sticking to one technique, you will be asked to modify its appearance using inline styling syntax, object variable syntax, and, finally, CSS modules!

Throughout the project, you’ll be able to explore the advantages and disadvantages of each approach and practice React naming conventions for style properties.

By the end of this practice project, you will have improved your skills in styling React applications using various techniques and gained a deeper understanding of the different approaches. You will be able to apply your learnings to future React projects and improve your coding skills!

Let’s roll up our sleeves and start!

Game.js

import React, { useState } from "react";
import styles from "./Game.module.css";

const CHOICES = [
  { name: "rock", emoji: "✊" },
  { name: "paper", emoji: "✋" },
  { name: "scissors", emoji: "✌️" },
];

const choiceStyles = {
  display: "flex",
  alignItems: "center",
  marginBottom: 40
};

const emojiStyles = {
  fontSize: 64,
  marginRight: 20
};

const nameStyles  = {
  margin: 0,
  fontSize: 24,
  color: "#FFF"
};

const resultStyle = {
  marginTop: 40,
  fontSize: 48,
  color: "#FFF"
};

function Game() {
  const [playerChoice, setPlayerChoice] = useState(null);
  const [codeyChoice, setCodeyChoice] = useState(null);
  const [result, setResult] = useState(null);

  function handlePlayerChoice(choice) {
    const codeyChoice = CHOICES[Math.floor(Math.random() * CHOICES.length)];
    setPlayerChoice(choice);
    setCodeyChoice(codeyChoice);
    if (choice.name === codeyChoice.name) {
      setResult("Tie!");
    } else if (
      (choice.name === "rock" && codeyChoice.name === "scissors") ||
      (choice.name === "paper" && codeyChoice.name === "rock") ||
      (choice.name === "scissors" && codeyChoice.name === "paper")
    ) {
      setResult("You win!");
    } else {
      setResult("You lose!");
    }
  }

  function resetGame() {
    setPlayerChoice(null);
    setCodeyChoice(null);
    setResult(null);
  }

  return (
    <div className={styles.container}>
      <h1 style={{ fontSize: 48, marginTop: 0 }}>Rock Paper Scissors</h1>
      <div className={styles.choices}>
        {CHOICES.map((choice) => (
          <button
            className={styles.button}
            key={choice.name}
            onClick={() => handlePlayerChoice(choice)}
            aria-label={choice.name}
          >
            {choice.emoji}
          </button>
        ))}
      </div>
      {playerChoice && codeyChoice && (
        <div className={styles.results}>
          <div style={choiceStyles}>
            <span style={emojiStyles}>{playerChoice.emoji}</span>
            <p style={nameStyles}>You chose {playerChoice.name}</p>
          </div>
          <div style={choiceStyles}>
            <span style={emojiStyles}>{codeyChoice.emoji}</span>
            <p style={nameStyles}>The computer chose {codeyChoice.name}</p>
          </div>
          <h2 style={resultStyle}>{result}</h2>
          <button className={styles.button} onClick={resetGame}>Play again</button>
        </div>
      )}
    </div>
  );
}

export default Game;

Game.module.css

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Courier New", Courier, monospace;
  background-color: #000000;
  color: #ffffff;
  padding: 40px;
}

.choices {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.button {
  font-size: 48px;
  background-color: #333333;
  color: #ffffff;
  border: 4px solid #ffffff;
  border-radius: 8px;
  padding: 20px 40px;
  margin: 0 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.results {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}