+
-
+
-
+
-
-
- {hintCount === 1 ? 'Hint Remaining: ' : 'Hints Remaining: '} +
+ {hintCount === 1 ? "Hint Remaining: " : "Hints Remaining: "} {hintCount}
- {cards.map(card => (
+ {cards.map((card) => (
,
- document.getElementById('root')
+
);
+
diff --git a/src/utils/logic.js b/src/utils/logic.js
index 40ce1b8..ab61fd0 100644
--- a/src/utils/logic.js
+++ b/src/utils/logic.js
@@ -1,4 +1,3 @@
-// src/utils/logic.js
export function secureShuffleArray(array) {
const cryptoObj = globalThis.crypto || globalThis.msCrypto;
for (let i = array.length - 1; i > 0; i--) {
diff --git a/src/utils/useHint.js b/src/utils/useHint.js
new file mode 100644
index 0000000..4872249
--- /dev/null
+++ b/src/utils/useHint.js
@@ -0,0 +1,100 @@
+// src/utils/useHint.js
+import { useState, useRef, useCallback } from "react";
+
+export function useHint({
+ cards,
+ handleTime,
+ setChoiceOne,
+ setChoiceTwo,
+ setTurns,
+ setDisabled,
+}) {
+ const [hintCount, setHintCount] = useState(3);
+ const [hintCooldown, setHintCooldown] = useState(0);
+ const [hintActive, setHintActive] = useState(false);
+
+ const hintTimeoutRef = useRef(null);
+ const hintIntervalRef = useRef(null);
+ const hintLockedRef = useRef(false);
+
+ const REVEAL_DURATION = 2000;
+ const HINT_COOLDOWN = 5000;
+
+ const hintCards = useCallback(() => {
+ if (hintActive || hintLockedRef.current) return;
+ if (!cards || cards.length === 0) return;
+ if (hintCount === 0) return;
+
+ setHintCount((c) => c - 1);
+ hintLockedRef.current = true;
+
+ handleTime(true);
+
+ const seconds = Math.floor(HINT_COOLDOWN / 1000);
+ setHintCooldown(seconds);
+ if (hintIntervalRef.current) clearInterval(hintIntervalRef.current);
+ hintIntervalRef.current = setInterval(() => {
+ setHintCooldown((s) => {
+ if (s <= 1) {
+ clearInterval(hintIntervalRef.current);
+ hintIntervalRef.current = null;
+ hintLockedRef.current = false;
+ return 0;
+ }
+ return s - 1;
+ });
+ }, 1000);
+
+ const unmatchedSrcs = [...new Set(cards.filter(c => !c.matched).map(c => c.src))];
+ if (unmatchedSrcs.length === 0) {
+ clearInterval(hintIntervalRef.current);
+ hintLockedRef.current = false;
+ setHintCooldown(0);
+ return;
+ }
+
+ const available = cards.filter(c => !c.matched);
+ if (available.length === 0) {
+ clearInterval(hintIntervalRef.current);
+ hintLockedRef.current = false;
+ setHintCooldown(0);
+ return;
+ }
+
+ const rand = new Uint32Array(1);
+ crypto.getRandomValues(rand);
+ const randomIndex = rand[0] % unmatchedSrcs.length;
+ const randomSrc = unmatchedSrcs[randomIndex];
+ const pair = cards.filter(c => c.src === randomSrc && !c.matched);
+
+ setHintActive(true);
+ setDisabled(true);
+ setChoiceOne(pair[0]);
+ setChoiceTwo(pair[1]);
+ setTurns((t) => t + 1);
+
+ if (hintTimeoutRef.current) clearTimeout(hintTimeoutRef.current);
+ hintTimeoutRef.current = setTimeout(() => {
+ setChoiceOne(null);
+ setChoiceTwo(null);
+ setHintActive(false);
+ setDisabled(false);
+ }, REVEAL_DURATION);
+ }, [cards, hintCount, hintActive, handleTime, setChoiceOne, setChoiceTwo, setTurns, setDisabled]);
+
+ const resetHints = useCallback(() => {
+ setHintCount(3);
+ setHintCooldown(0);
+ hintLockedRef.current = false;
+ if (hintTimeoutRef.current) clearTimeout(hintTimeoutRef.current);
+ if (hintIntervalRef.current) clearInterval(hintIntervalRef.current);
+ }, []);
+
+ return {
+ hintCount,
+ hintCooldown,
+ hintActive,
+ hintCards,
+ resetHints,
+ };
+}
Turns: {turns}
-
+
-
-
- );
-}
+ return (
+ HighScore: {highScore}
-Runtime: {globalThis.localStorage.getItem('runtime') || 0}
+Runtime: {globalThis.localStorage.getItem("runtime") || 0}
Time Elapsed: {elapsedTime || 'Not started'}
- {viewCounter !== null &&This memory got {viewCounter} views
} +Time Elapsed: {elapsedTime || "Not started"}
{gameOverMessage && (
-
-
- 
-
-
-
-
+
+ );
+ }
-// PropTypes Validation
SingleCard.propTypes = {
card: PropTypes.shape({
src: PropTypes.string.isRequired,
diff --git a/src/index.js b/src/index.js
index 6832e78..11d6fa7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,13 @@
import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
+
+
+
+
+
+
+