feat: initial import — ClickerZ formation project (Express + React/Vite)

Frontend/src/components/Hud/Hud.jsx

@@ -0,0 +1,157 @@
+import "../../scss/components/Hud.scss";
+import { useWildCoin } from "../WildCoin/WildCoinContext";
+import Timer from "../timer/Timer";
+import propTypes from "prop-types";
+
+function Hud({ isVisible }) {
+  Hud.propTypes = {
+    isVisible: propTypes.bool.isRequired,
+  };
+
+  const {
+    manic,
+    snowman,
+    bonnet,
+    sugar,
+    cookie,
+    couronne,
+    epice,
+    biere,
+    coffee,
+  } = useWildCoin();
+
+  const { incrementClick, incrementPerSecond } = useWildCoin();
+  const hiddenDiv = isVisible ? "none" : null;
+
+  return (
+    <div className="hudContainer">
+      <div style={{ display: hiddenDiv }} className="hudStats">
+        <div className="time section">
+          <p>Temps de jeu</p>
+          <p><Timer /></p>
+        </div>
+        <div className="auto section">
+          <p>Auto CPS</p>
+          <p>{incrementPerSecond}</p>
+        </div>
+        <div className="player section">
+          <p>Player Click</p>
+          <p>{incrementClick}</p>
+        </div>
+        
+      </div>
+      <div className="hudBooster">
+          {coffee[0] === true ? (
+            <div className="boosterItem">
+              <div
+                className="boosterIcon"
+                style={{ backgroundImage: `url(/svg/Tasse.svg)` }}
+                alt="coffee"
+              />
+              <div className="countbox">
+              <p className="boosterCount">{coffee[1]}</p>
+              </div>
+            </div>
+          ) : null}
+          {manic[0] === true ? (
+            <div className="boosterItem">
+              <div
+                className="boosterIcon"
+                style={{ backgroundImage: `url(/svg/Hand.svg)` }}
+                alt="coffee"
+              />
+              <div className="countbox">
+              <p className="boosterCount">{manic[1]}</p>
+              </div>
+            </div>
+          ) : null}
+          {snowman[0] === true ? (
+            <div className="boosterItem">
+              <div
+                className="boosterIcon"
+                style={{ backgroundImage: `url(/svg/Bonhome.svg)` }}
+                alt="coffee"
+              />
+              <div className="countbox">
+                <p className="boosterCount">{snowman[1]}</p>
+              </div>
+            </div>
+          ) : null}
+          {bonnet[0] === true ? (
+            <div className="boosterItem">
+              <div
+                className="boosterIcon"
+                style={{ backgroundImage: `url(/svg/Bonnet.svg)` }}
+                alt="coffee"
+              />
+              <div className="countbox">
+                <p className="boosterCount">{bonnet[1]}</p>
+              </div>
+            </div>
+          ) : null}
+          {sugar[0] === true ? (
+            <div className="boosterItem">
+              <div
+                className="boosterIcon"
+                style={{ backgroundImage: `url(/svg/Canne.svg)` }}
+                alt="coffee"
+              />
+              <div className="countbox">
+                <p className="boosterCount">{sugar[1]}</p>
+              </div>
+            </div>
+          ) : null}
+          {cookie[0] === true ? (
+            <div className="boosterItem">
+              <div
+                className="boosterIcon"
+                style={{ backgroundImage: `url(/svg/Cookie.svg)` }}
+                alt="coffee"
+              />
+              <div className="countbox">
+                <p className="boosterCount">{cookie[1]}</p>
+              </div>
+            </div>
+          ) : null}
+          {couronne[0] === true ? (
+            <div className="boosterItem">
+              <div
+                className="boosterIcon"
+                style={{ backgroundImage: `url(/svg/Courone.svg)` }}
+                alt="coffee"
+              />
+              <div className="countbox">
+                <p className="boosterCount">{couronne[1]}</p>
+              </div>
+            </div>
+          ) : null}
+          {epice[0] === true ? (
+            <div className="boosterItem">
+              <div
+                className="boosterIcon"
+                style={{ backgroundImage: `url(/svg/PainDep.svg)` }}
+                alt="coffee"
+              />
+              <div className="countbox">
+                <p className="boosterCount">{epice[1]}</p>
+              </div>
+            </div>
+          ) : null}
+          {biere[0] === true ? (
+            <div className="boosterItem">
+              <div
+                className="boosterIcon"
+                style={{ backgroundImage: `url(/svg/Beer.svg)` }}
+                alt="coffee"
+              />
+              <div className="countbox">
+                <p className="boosterCount">{biere[1]}</p>
+              </div>
+            </div>
+          ) : null}
+        </div>
+    </div>
+  );
+}
+
+export default Hud;