+
+
+
+
+
+ {hintCount === 1 ? "Hint Remaining: " : "Hints Remaining: "}
@@ -293,6 +328,8 @@ function App() {
+ {cards.map((card) => (
diff --git a/src/components/singlecard/SingleCard.js b/src/components/singlecard/SingleCard.js
index ff349ff..4109236 100644
--- a/src/components/singlecard/SingleCard.js
+++ b/src/components/singlecard/SingleCard.js
@@ -8,6 +8,51 @@ export default function SingleCard({ card, handleChoice, flipped, disabled }) {
}
};
+ const handleClick = () => {
+ if (!disabled) {
+ handleChoice(card);
+ }
+ };
+
+ return (
+
+
+
return (
+ 
+
+
+
+
+
diff --git a/src/index.js b/src/index.js
index 6832e78..1b3a5f8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,15 @@
import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client'; // <-- make sure this is 'react-dom/client'
import './index.css';
import App from './App';
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container); // <-- create root
+root.render(
+);
,
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..9c4cf4e
--- /dev/null
+++ b/src/utils/useHint.js
@@ -0,0 +1,96 @@
+// 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 available = cards.filter(c => !c.matched);
+ if (available.length === 0) {
+ clearInterval(hintIntervalRef.current);
+ hintLockedRef.current = false;
+ setHintCooldown(0);
+ return;
+ }
+
+ const cryptoObj = globalThis.crypto || globalThis.msCrypto;
+
+ const idxA = cryptoObj.getRandomValues(new Uint32Array(1))[0] % available.length;
+ let idxB = cryptoObj.getRandomValues(new Uint32Array(1))[0] % (available.length - 1);
+ if (idxB >= idxA) idxB += 1;
+
+ const cardA = available[idxA].c;
+ const cardB = available[idxB].c;
+
+ setHintActive(true);
+ setDisabled(true);
+ setChoiceOne(cardA);
+ setChoiceTwo(cardB);
+ 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,
+ };
+}