Feedback

[Charlie-robin]

Feedback

Requirements

• Pseudocode
• Github Repo:
  • README.md
  • 15 commits
• JS code formatted as functions
• JS code formatted with suitable variable names
• The code must be your own
• Click or key press events to trigger the game
  • No refreshing to start the game again
• Be responsive and built mobile-first, it should work on different screen widths
• Deployed website

Score

MARKING-SCHEME

Category	Score
Site Output	35 / 40
Code Knowledge & Use	25 / 25
Readability	15 / 20
Responsiveness	15 / 15
Total Score	90 / 100

Notes

The Code

Positive

• You have a hosted and functioning dynamic typescript game, good going!

• Your game logic is well-structured and separated into separate files with clear and related responsibilities

  • Files like utilities.ts and Functions like checkIfSelectedCardsMatch, resetGame, startTimer, etc make the code easier to understand.

• I love all of the little features you have added as well, you have enjoyed yourself.

  • Sounds, Animations, cursors etc :D

• Your setInterval() is interesting, I like that you have researched this and been able to implement this functionality as timers can be tricky.

• Good README.md as well!

Constructive

• It is a solid game, you have the core functionality working. This is just a suggestion for where you could take it next as it could become quite extendible by just modifying how you store and display your cards.
  • If you stored them in some form of complex data type you would be able to have multiple themes to choose from.
  • I have an example below of how you could organize the card/theme data so you could dynamically create your HTML.

// TYPES
type Theme = {
  backImage: string;
  frontImages: CardFront[];
};

type CardFront = {
  imagePath: string;
  alt: string;
};

// THE DATA YOU NEED FOR A GAME
const marioTheme: Theme = {
  backImage: "./assets/images/super-mario.png",
  frontImages: [
    {
      imagePath: "./assets/images/mario.png",
      alt: "Mario",
    },
    {
      imagePath: "./assets/images/luigi.png",
      alt: "Luigi",
    },
    {
      imagePath: "./assets/images/princess-peach.png",
      alt: "Princess Peach",
    },
    {
      imagePath: "./assets/images/yoshi.png",
      alt: "Yoshi",
    },
    {
      imagePath: "./assets/images/toad.png",
      alt: "Toad",
    },
    {
      imagePath: "./assets/images/bowser.png",
      alt: "Bowser",
    },
    {
      imagePath: "./assets/images/boo.png",
      alt: "Boo",
    },
    {
      imagePath: "./assets/images/princess-daisy.png",
      alt: "Princess Daisy",
    },
  ],
};

// A FUNCTION THAT TAKES A Theme TYPE AND CREATES THE HTML
const getPairsHTML = (theme: Theme) => {
  const cardHTML: string[] = [];
  theme.frontImages.forEach(frontImage => {
    // USE THE DATA TO CREATE THE HTML
    const template = `<div class="card">
    <div class="card__back card__face">
      <img
        class="card__image"
        src=${theme.backImage}
        alt="Super Mario"
      />
    </div>
    <div class="card__front card__face">
      <img
        class="card__image"
        src=${frontImage.imagePath}
        alt=${frontImage.alt}
      />
    </div>
  </div>`;
    cardHTML.push(template, template); // ADD TWO
  });
  shuffleCards(cardHTML);
  return cardHTML.join();
};

console.log(getPairsHTML(marioTheme));

// CAN HAVE DIFFERENT THEMES
const flags: Theme = {
  backImage: "./assets/images/flag-back.png",
  frontImages: [
    {
      imagePath: "./assets/images/example-flag.png",
      alt: "Example Flag",
    },
  ],
};
// REUSE THE SAME FUNCTION
console.log(getPairsHTML(flags));

• Your shuffleCards function is good, it is currently tied to getting HTMLDivElement[] and also returning that type. If you introduced generics you could make your function shuffle any array.
  • It is advanced TS but could be useful for you in future projects.
  • typescript-generics

// CURRENT
export const shuffleCards = (arrayOfCards: HTMLDivElement[]): HTMLDivElement[] => {
  for (let i = arrayOfCards.length - 1; i >= 0; i--) {
    const randomIndex = Math.floor((i + 1) * Math.random());
    const randomValue = arrayOfCards[randomIndex];
    arrayOfCards[randomIndex] = arrayOfCards[i];
    arrayOfCards[i] = randomValue;
  }
  return arrayOfCards;
};

// COULD BE

// <T> IS A PLACEHOLDER FOR A TYPE PARAMETER
// - (array: T[]): T[] = TAKES T ARRAY, RETURNS T ARRAY
export const shuffleCards = <T>(array: T[]): T[] => {
  for (let i = array.length - 1; i >= 0; i--) {
    const randomIndex = Math.floor((i + 1) * Math.random());
    const randomValue = array[randomIndex];
    array[randomIndex] = array[i];
    array[i] = randomValue;
  }
  return array;
};

let numbers = [1, 2, 3, 4, 5];
let letters = ["a", "b", "c"];

let randomNumbers = shuffleCards<number>(numbers); // T IS A number
let randonLetters = shuffleCards<string>(letters); // T IS A string

---

[clee937]

Hi Charlie, Thank you very much for your feedback and suggestions on my game project. I really like the idea of extending this with different themes. Thanks for your suggested code on how to organise the card/theme data to dynamically create the HTML. It is really helpful to see and I’m excited to have a go at implementing it. I’d love to have an Animal Crossing theme and can visualise the cards and audio already 😄

Thanks also for the info on the shuffleCards function and the helpful link on typescript generics 👍