kandi background

memory-game | A card matching game built on HTML5, CSS3 and Javascript . | Game Engine library

Download this library from

kandi X-RAY | memory-game Summary

memory-game is a JavaScript library typically used in Gaming, Game Engine, Nodejs, jQuery applications. memory-game has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can download it from GitHub.
A card matching game built on HTML5, CSS3 and Javascript (no frameworks used).

kandi-support Support

  • memory-game has a low active ecosystem.
  • It has 42 star(s) with 34 fork(s). There are 8 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 0 open issues and 2 have been closed. On average issues are closed in 339 days. There are no pull requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of memory-game is current.

quality kandi Quality

  • memory-game has 0 bugs and 0 code smells.

securitySecurity

  • memory-game has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • memory-game code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.

license License

  • memory-game is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.

buildReuse

  • memory-game releases are not available. You will need to build from source code and install.
  • memory-game saves you 120 person hours of effort in developing the same functionality from scratch.
  • It has 304 lines of code, 0 functions and 5 files.
  • It has low code complexity. Code complexity directly impacts maintainability of the code.
Top functions reviewed by kandi - BETA

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

memory-game Key Features

A card matching game built on HTML5, CSS3 and Javascript (no frameworks used).

memory-game Examples and Code Snippets

  • Creating an array in one function and then using it somewhere else
  • Why 'backface-visibility: hidden' does not work with text?
  • Html-Css image stretched
  • Scan if al matches have been made in a memorie game
  • HTML: memory game check if two pictures matched function
  • Flip Card HTML: Wont flip or stay flip when I click
  • How to change timer into a countdown timer for the Memory game
  • Shape of elements get distorted when scrolling further down the page using 3D animation
  • Text over flipped image CSS
  • Swing: JPanel "setSize" is ignored?

Creating an array in one function and then using it somewhere else

const ImportedArray = useMemo(() => ImportedWords().shuffledWords, []);

Community Discussions

Trending Discussions on memory-game
  • Creating an array in one function and then using it somewhere else
  • Why 'backface-visibility: hidden' does not work with text?
  • Html-Css image stretched
  • Scan if al matches have been made in a memorie game
  • HTML: memory game check if two pictures matched function
  • Flip Card HTML: Wont flip or stay flip when I click
  • How to change timer into a countdown timer for the Memory game
  • Shape of elements get distorted when scrolling further down the page using 3D animation
  • Text over flipped image CSS
  • Swing: JPanel "setSize" is ignored?
Trending Discussions on memory-game

QUESTION

Creating an array in one function and then using it somewhere else

Asked 2022-Jan-19 at 22:45

TL:DR, I am creating a randomly-ordered array in one React component, that I need to use in another component - but the second component keeps re-rendering and therefore re-shuffling my array - but I need its order to be fixed once it gets imported for the first time.

First things first - if I am doing this in a needlessly roundabout way, please do say so, I'm not set on this way.

I am making a flashcard program, and I want to give users the option to play games with random selections of their cards.

The way I am currently trying to do this, is that I have a functional component (because I need to do things like dispatch in it) which works as follows - I've added comments to explain what each bit does:

import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getPosts } from "../../actions/posts";


export function WORDS() {
  const dispatch = useDispatch();
  const [localUser, setLocalUser] = useState();


  //get all users
  useEffect(() => {
    dispatch(getPosts());
  }, []);

  const users = useSelector((state) => state.posts);


  
  //set user to match the user in the local storage
  const [user, setUser] = useState();

  useEffect(() => {
    setLocalUser(JSON.parse(localStorage.getItem("profile")));
  }, [localStorage]);

  useEffect(() => {
    setUser(users.filter((user) => user.code == localUser?.code)[0]);
  }, [users, localUser]);



  //create an array of 8 random words from the users cards object
  let RandomArray = []
  if (user) {
    for (let i = 0; RandomArray.length < 8; i++) {
      let RanNum = Math.floor(Math.random() * user.cards.length);
      !RandomArray.includes(user.cards[RanNum]) && RandomArray.push(user.cards[RanNum])
    }
  }




  //create duplicates of each word and make an array of them all, once with the front of the card in first place and once with the back in first place
  let shuffledWords = [];

RandomArray.map((word) => {
  let newWord = { Q: word.front, A: word.back };
  let newWord2 = { Q: word.back, A: word.front };
  shuffledWords.push(newWord);
  shuffledWords.push(newWord2);
});



//shuffle that array
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

  shuffleArray(shuffledWords);



  //return this array so I can call it in other functions
  return { shuffledWords }
};

The game is then a kind of 'memory' game, where users try and match words with their translation. That's currently running like this, again with comments (please excuse the excessive inline styling - I will move that all to the stylesheet eventually but I've left it in here just in case any of that is what's causing the problems.):

import React, { useState } from "react";

import { WORDS as ImportedWords } from "./WORDS";

export const Memory = () => {

  //import words from function
  const ImportedArray = ImportedWords().shuffledWords

  //create state variables for the first and second card a user pics
  const [selectL1, setSelectL1] = useState("");
  const [selectL2, setSelectL2] = useState("");

  //create state variables for whether to display a card or not and whether or not it was correct
  const [show, setShow] = useState([]);
  const [correct, setCorrect] = useState([]);

  //variable to make cards unclickable while they're spinning over
  const [clickable, setClickable] = useState(true);


  //if user has picked two cards, check if they match and either set them to correct or turn them back over
  if (selectL1 && selectL2) {
    clickable == true && setClickable(false);

    let selectQ = ImportedArray.filter((word) => word.Q == selectL1)[0];

    console.log("selectQ: ", selectQ);

    selectQ && selectL2 == selectQ.A
      ? correct.push(selectL1, selectL2)
      : console.log("Incorrect!");

    setTimeout(function () {
      setSelectL1("");
      setSelectL2("");
      setShow([]);
      setClickable(true);
      //correct.length == shuffledWords.length * 2 && alert("You win!");
    }, 800);
  }


  //show the card a user's clicked
  const selectCard = (wordId) => {
    !selectL1 ? setSelectL1(wordId) : setSelectL2(wordId);

    show.push(wordId);
  };


  
  return (
    <div className="memory-game-wrapper">
      <div
        style={{ perspective: "2000px", pointerEvents: !clickable && "none" }}
      >

      {/* filter through the imported array and display them */}
        {ImportedArray.map((word) => {
          return (
            <div
              className={
                show.includes(word.Q) || correct.includes(word.Q)
                  ? "card flip"
                  : "card"
              }
              id={word.Q}
              style={{
                borderRadius: "5px",
                display: "inline-block",
                width: "100px",
                height: "180px",
                backgroundColor: "rgb(185, 204, 218)",
                margin: "5px",
              }}
              onClick={() =>
                !correct.includes(word.Q) &&
                !show.includes(word.Q) &&
                selectCard(word.Q)
              }
            >
              <div
                className="back-face"
                style={{
                  position: "absolute",
                  height: "100%",
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <center>
                  <span style={{ userSelect: "none" }}></span>
                </center>
              </div>

              <div
                className="front-face"
                style={{
                  position: "absolute",
                  height: "100%",
                  display: "flex",
                  width: "100%",
                  borderRadius: "5px",
                  border: "5px solid rgb(185, 204, 218)",
                  boxSizing: "border-box",
                  backgroundColor: correct.includes(word.Q)
                    ? "white"
                    : "rgb(185, 204, 218)",
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <h3 style={{ userSelect: "none" }}>{word.Q}</h3>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

I suspected that what was happening was that the whole array is being re-rendered any time a user clicks on any of the cards, which means the order gets shuffled again - and makes the game unplayable, so I whacked in a console.log(ImportedArray[0]) to check and yes, that is definitely happening. But I can't work out how to stop it?

Any ideas??

ANSWER

Answered 2022-Jan-19 at 22:45

If the Memory component is not conditionally mounted/unmounted in the parent, like {condition && <Memory}, you can use the useMemo hook to memoize the imported words at the first render.

const ImportedArray = useMemo(() => ImportedWords().shuffledWords, []);

Anyway the WORDS component is a candidate to be a custom hook where you can encapsulate the words logic. it should be named useWords

Source https://stackoverflow.com/questions/70778487

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install memory-game

You can download it from GitHub.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Build your Application

Share this kandi XRay Report

Reuse Pre-built Kits with memory-game