Merge pull request #275 from LleidaHack/integration

Integration

src/App.js

@@ -29,6 +29,7 @@ import LegalInfoLanding from "./pages/Landing/LegalInfoLanding";
 import Error404Landing from "./pages/Landing/Error404Landing";
 import "src/styles/styles.css";
 import ConfirmAssistancePage from "./pages/hackeps/Confirm";
+import Hacking from "./pages/hackeps/Hacking";
 
 export default function App() {
   useEffect(() => {
@@ -97,6 +98,7 @@ export default function App() {
           <Route path="/user-verification" element={<LoginVerify />} />
           <Route path="/assistance" element={<ConfirmAssistancePage />} />
           <Route path="*" element={<Error404 />} />
+          <Route path="/hacking" element={<Hacking />} />
         </Routes>
       </Router>
       {/*

src/components/hackeps/Hacking/ActivityList.js

@@ -0,0 +1,60 @@
+const activities = [
+  {
+    date: "2024-11-23T17:00:00",
+    title: "Diana!",
+    description: (
+      <div className="flex flex-col">
+        <p>Aula: L4 (Aula d'informatica final del passadis)</p>
+        <p>Coordinadors: Dinamització</p>
+        <p>Premis? Sempre hi ha premis!!</p>
+      </div>
+    ),
+  },
+  //Barret al cono s'ha d'especificar el horari encara
+  {
+    date: "2024-11-23T15:47:00",
+    title: "Barret al Cono 🎓",
+    description: (
+      <div className="flex flex-col">
+        <p>Aula: L4 (Aula d'informatica final del passadis)</p>
+        <p>Coordinadors: Dinamització</p>
+        <p>Premis? Sempre hi ha premis!!</p>
+      </div>
+    ),
+  },
+  {
+    date: "2024-11-23T18:30:00",
+    title: "Joc de les cadires 🪑",
+    description: (
+      <div className="flex flex-col">
+        <p>Aula: L4 (Aula d'informatica final del passadis)</p>
+        <p>Coordinadors: Dinamització</p>
+        <p>Premis? Sempre hi ha premis!!</p>
+      </div>
+    ),
+  },
+  {
+    date: "2024-11-23T19:30:00",
+    title: "Kahoot ⁉️",
+    description: (
+      <div className="flex flex-col">
+        <p>Aula: L4 (Aula d'informatica final del passadis)</p>
+        <p>Coordinadors: Dinamització</p>
+        <p>Premis? Sempre hi ha premis!!</p>
+      </div>
+    ),
+  },
+  {
+    date: "2024-11-23T23:00:00",
+    title: "Slideshare Karaoke 🎤",
+    description: (
+      <div className="flex flex-col">
+        <p>Aula: L4 (Aula d'informatica final del passadis)</p>
+        <p>Coordinadors: Dinamització</p>
+        <p>Premis? Sempre hi ha premis!!</p>
+      </div>
+    ),
+  },
+];
+
+export default activities;

src/components/hackeps/Hacking/AdsContainer.js

@@ -0,0 +1,49 @@
+import { React, useEffect, useState } from "react";
+
+const AdsContainer = ({ color, title, element1, element2 }) => {
+  const [show, setShow] = useState(true);
+  function hideAdvice() {
+    if (show) {
+      setShow(false);
+      document.querySelector(".Corredera-Anuncis").style.display = "none";
+    }
+  }
+  useEffect(() => {
+    if (!show) {
+      document.querySelector(".Corredera-Anuncis").style.display = "block";
+    }
+  }, []);
+
+  return (
+    <>
+      <div
+        className={`Corredera-Anuncis bg-green-500 w-[80vw] h-full  rounded-lg flex flex-col absolute left-1/2 transform -translate-x-1/2 z-[20] shadow-2xl opacity-90`}
+      >
+        {/* Aixo es mostrara per damunt de lo que hi hagi al top side, animacions o lo que sigui. */}
+
+        <div className="X button mb-2 text-red-600 font-semibold text-end mt-2 mr-4 text-3xl cursor-pointer	">
+          <p onClick={hideAdvice}>×</p>
+        </div>
+        <div className="Titol-Activitat text-center	font-extrabold">
+          <h2 className="text-4xl ">{title} </h2>
+        </div>
+        <div className="flex flex-row w-full pl-8 mt-2">
+          <div className="CounterActivity mt-2 flex-1 justify-items-center pr-8">
+            <p className="EventStatus text-xl">
+              La activitat comença dintre de{" "}
+            </p>
+            <div className="items-end">{element2}</div>
+
+            {/* <CounterActivity type={1} targetTime={targetTime}/> */}
+          </div>
+          <div className="Descripcio flex-1 border-l-2 border-black pl-8 ">
+            <div className="text-xl">{element1}</div>
+          </div>
+        </div>
+        {/* Fins aqui el AdsContainer */}
+      </div>
+    </>
+  );
+};
+
+export default AdsContainer;

src/components/hackeps/Hacking/Body-old.js

@@ -0,0 +1,113 @@
+import { React, useEffect, useState } from "react";
+import profiles from "./Profiles";
+import hackLogo from "src/icons/banner_home_icon.png";
+import camaleon from "src/assets/camaleon.gif";
+import "./elements.css";
+import CounterActivity from "./CounterActivity";
+import "./Waiting.css";
+
+const Body = () => {
+  const [profile, setProfile] = useState("Hacking");
+  const [title, setTitle] = useState("HackEPS 2024");
+  const [midSideElement, setMidSideElement] = useState(
+    <div className="midSideElement">MidSideElement</div>,
+  );
+  const [botSideElement, setBotSideElement] = useState(
+    <div className="botSideElement">BotSideElement</div>,
+  );
+  //Hacer una configuración con 4 perfiles de actividad (1. Hacking, 2. Anuncios de actividad en curso, 3. Comidas o cenas junto a las instrucciones del aula, 4. Modo noche( oscuro))
+  //En Backend, una tabla con el itinerario y en frontend, un endpoint que actualize cada X tiempo buscando si hay nueva actividad que anunciar.
+  //En frontend, la actualización dependerá de la hora local. Esto es para que todo se sincronize al mismo tiempo en todos los dispositivos.
+
+  //Las configuraciones deben cambiar entre ellas de forma suave, con animaciones y sin saltos.
+
+  //Aqui hi haura un servell a backend per obtindre el perfil actual.
+  useEffect(() => {
+    const actualProfile = "Hacking"; //getActualHackingProfile();
+    setProfile(actualProfile);
+  }, []);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // Do something after 5 seconds
+      const profile2 = "Meals";
+      transitionBackgrounds(profile2);
+    }, 5000);
+
+    return () => clearTimeout(timer); // Cleanup the timer on component unmount
+  }, []);
+
+  function transitionBackgrounds(nextProfile) {
+    const bg1 = profiles[profile].bgColor?.trim(); // Actual profile
+    const bg2 = profiles[nextProfile]?.bgColor?.trim();
+    // Validar que bg1 y bg2 sean cadenas válidas
+    if (!/^#[0-9A-Fa-f]{6}$/.test(bg1) || !/^#[0-9A-Fa-f]{6}$/.test(bg2)) {
+      console.error("Uno de los colores no es válido:", { bg1, bg2 });
+      return;
+    }
+    const step = 0.1;
+    let opacity = 0;
+    const mainDiv = document.querySelector(".mainDiv");
+
+    let interval = setInterval(() => {
+      if (opacity >= 1) {
+        clearInterval(interval);
+        setProfile(nextProfile); // Actualizar el perfil al finalizar
+      } else {
+        opacity += step;
+
+        // Calcular los valores RGB mezclados
+        const r = Math.round(
+          parseInt(bg1.slice(1, 3), 16) * (1 - opacity) +
+            parseInt(bg2.slice(1, 3), 16) * opacity,
+        );
+        const g = Math.round(
+          parseInt(bg1.slice(3, 5), 16) * (1 - opacity) +
+            parseInt(bg2.slice(3, 5), 16) * opacity,
+        );
+        const b = Math.round(
+          parseInt(bg1.slice(5, 7), 16) * (1 - opacity) +
+            parseInt(bg2.slice(5, 7), 16) * opacity,
+        );
+
+        // Aplicar estilo al elemento
+        mainDiv.style.transition = `background-color 0.1s ease-in-out`;
+        mainDiv.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
+      }
+    }, 100);
+  }
+
+  return (
+    <div className="mainDiv w-screen h-full flex flex-col overflow-hidden justify-between items-center">
+      <div className="topSide ">
+        {/* Aquesta corredera anuncis, al finalitzar, pasara a formar part de una component anomenada AdsContainer */}
+        <div className="Corredera-Anuncis bg-red-300 w-[80vw] mt-5 rounded-lg flex flex-col absolute left-1/2 transform -translate-x-1/2 z-[20]">
+          {/* Aixo es mostrara per damunt de lo que hi hagi al top side, animacions o lo que sigui. */}
+          <div className="X button mb-2">
+            <p>X</p>
+          </div>
+          <div className="Titol Activitat">
+            <p>Activitat Lúdica</p>
+          </div>
+          <div className="Descripcio">
+            <p>
+              <span>Aula: </span> 0.05
+            </p>
+          </div>
+          <div className="CounterActivity mt-2">
+            <p className="EventStatus">La activitat comença dintre de </p>
+            <CounterActivity type="1" time="57" />
+          </div>
+          {/* Fins aqui el AdsContainer */}
+        </div>
+      </div>
+      <div className="midSide bg-red-300">{midSideElement}</div>
+
+      <div className="botSide mb-40 self-end mr-10 bg-red-300">
+        {botSideElement}
+        {/* canviara entre patrocinadors, counterhack block, etc... */}
+      </div>
+    </div>
+  );
+};
+
+export default Body;