Merge pull request #32 from Lapikud/development

Development

docs/SETUP.md

@@ -3,6 +3,7 @@
 ## Prerequisites
 - Git
 - Bun
+- If on Windows, it's recommended to use WSL (Windows Subsystem for Linux) and do the following steps there.
 
 ## Installation
 
@@ -48,6 +49,6 @@
    git push origin <branch-name>
    ```
 - Create a pull request:
-   ```bash
-   git pull-request
+   Go to Github,
+    open up this project's repository and make a new pull request.
    ```

src/app/ajakava/page.tsx

@@ -11,9 +11,9 @@ export default function Timetable() {
   const schedule = scheduleData[activeTab];
 
   return (
-    <div className="flex flex-col min-h-[90vh] p-6 sm:p-12 pt-18">
+    <div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
       <h1
-        className={`text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-14 mb-8`}
+        className={`text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-8`}
       >
         Ajakava
       </h1>

src/app/kodukord/page.tsx

@@ -4,11 +4,11 @@ export default function Rulebook() {
   return (
     <div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
       <h1
-        className={`text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 mb-4`}
+        className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4 uppercase`}
       >
         Kodukord
       </h1>
-      <ol className="list-decimal ml-6 text-xl text-[#2A2C3F] dark:text-[#EEE5E5] y-4">
+      <ol className="list-decimal ml-6 md:text-xl text-[#2A2C3F] dark:text-[#EEE5E5] y-4">
         <li>
           Keelatud on:
           <ol className="list-[lower-alpha] ml-6 y-2">
@@ -54,7 +54,7 @@ export default function Rulebook() {
           vanusepiirangutest
         </li>
       </ol>
-      <p className="text-xl text-[#2A2C3F] dark:text-[#EEE5E5] y-4 mt-4">
+      <p className="md:text-xl text-[#2A2C3F] dark:text-[#EEE5E5] y-4 mt-4">
         NB! Reeglite rikkumise puhul on korraldajatel õigus mängija (koos tema
         meeskonnaga) eemaldada ja rakendada edasist keeldu TipiLAN-i üritustelt.
       </p>

src/app/messiala/page.tsx

@@ -3,15 +3,26 @@
 import { vipnagorgialla } from "@/components/Vipnagorgialla";
 import * as THREE from "three";
 import { useEffect, useRef, useState } from "react";
+import { EyeClosed, Eye } from "lucide-react";
+
+// Define interface for the ref with toggle function
+interface MountRefCurrent extends HTMLDivElement {
+  toggleDividers?: (show: boolean) => void;
+}
 
 export default function Expo() {
-  const mountRef = useRef<HTMLDivElement>(null);
+  const mountRef = useRef<MountRefCurrent | null>(null);
   const [hoveredRoom, setHoveredRoom] = useState<string | null>(null);
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const [showDividers, setShowDividers] = useState<boolean>(true);
 
   useEffect(() => {
     if (!mountRef.current) return;
 
+    // Copy ref to variable to avoid stale closure in cleanup
+    const mountElement = mountRef.current;
+    let dividersRef: THREE.Mesh[] = [];
+
     // Scene setup
     const scene = new THREE.Scene();
     scene.background = new THREE.Color(0x0e0f19);
@@ -53,7 +64,7 @@ export default function Expo() {
     renderer.setSize(width, height);
     renderer.shadowMap.enabled = true;
     renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-    mountRef.current.appendChild(renderer.domElement);
+    mountElement.appendChild(renderer.domElement);
 
     // Raycaster for mouse interactions
     const raycaster = new THREE.Raycaster();
@@ -99,6 +110,7 @@ export default function Expo() {
       originalColor: number;
       originalScale: THREE.Vector3;
     }> = [];
+    const dividers: THREE.Mesh[] = [];
 
     // Define rooms with custom positions, sizes and colors
     const roomDefinitions = [
@@ -130,11 +142,11 @@ export default function Expo() {
         name: roomNames[2],
       }, // EVAL
       {
-        width: 2,
+        width: 2.2,
         height: 0.7,
-        depth: 4,
+        depth: 4.5,
         x: 5,
-        z: -1.7,
+        z: -2,
         color: roomColors[3],
         name: roomNames[3],
       }, // Redbull
@@ -193,6 +205,35 @@ export default function Expo() {
       });
     });
 
+    // Create toggleable room dividers
+    const createTogglableDivider = (
+      width: number,
+      height: number,
+      depth: number,
+      x: number,
+      z: number,
+    ) => {
+      const wallGeometry = new THREE.BoxGeometry(width, height, depth);
+      const wallMaterial = new THREE.MeshLambertMaterial({
+        color: 0x555555,
+        transparent: true,
+        opacity: 0,
+      });
+
+      const wall = new THREE.Mesh(wallGeometry, wallMaterial);
+      wall.position.set(x, height / 2, z);
+      wall.visible = false;
+      scene.add(wall);
+      dividers.push(wall);
+    };
+
+    // Add strategic dividers between major areas
+    createTogglableDivider(10, 2, 2, -2.5, 1.5); // Wall between main entrance
+    createTogglableDivider(2, 2, 2, 5.5, 1.5); // Wall right next to Mänguklubi & Redbull
+
+    // Store dividers reference for later access
+    dividersRef = [...dividers];
+
     // Ground plane
     const groundGeometry = new THREE.PlaneGeometry(14, 10.5);
     const groundMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
@@ -205,7 +246,9 @@ export default function Expo() {
 
     // Second ground plane
     const groundGeometry2 = new THREE.PlaneGeometry(2, 7);
-    const groundMaterial2 = new THREE.MeshLambertMaterial({ color: 0xcccccc });
+    const groundMaterial2 = new THREE.MeshLambertMaterial({
+      color: 0xcccccc,
+    });
     const ground2 = new THREE.Mesh(groundGeometry2, groundMaterial2);
     ground2.rotation.x = -Math.PI / 2;
     ground2.position.x = -12.2;
@@ -294,21 +337,41 @@ export default function Expo() {
 
     animate();
 
+    // Function to toggle dividers
+    const toggleDividers = (show: boolean) => {
+      dividersRef.forEach((divider) => {
+        divider.visible = show;
+        (divider.material as THREE.MeshLambertMaterial).opacity = show
+          ? 0.4
+          : 0;
+      });
+    };
+
+    // Expose toggle function to parent scope
+    mountElement.toggleDividers = toggleDividers;
+
     // Cleanup
     return () => {
       window.removeEventListener("resize", handleResize);
       renderer.domElement.removeEventListener("mousemove", onMouseMove);
-      if (mountRef.current && renderer.domElement) {
-        mountRef.current.removeChild(renderer.domElement);
+      if (mountElement && renderer.domElement) {
+        mountElement.removeChild(renderer.domElement);
       }
       renderer.dispose();
     };
   }, []);
 
+  // Update dividers when showDividers state changes
+  useEffect(() => {
+    if (mountRef.current?.toggleDividers) {
+      mountRef.current.toggleDividers(showDividers);
+    }
+  }, [showDividers]);
+
   return (
     <div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
       <h1
-        className={`text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 mb-4`}
+        className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4 uppercase`}
       >
         Messiala
       </h1>
@@ -316,7 +379,7 @@ export default function Expo() {
         <h2 className="text-2xl text-[#2A2C3F] dark:text-[#EEE5E5] mb-3">
           Tudengimaja
         </h2>
-        <div className="flex flex-wrap gap-4">
+        <div className="flex flex-wrap gap-4 pb-4">
           <div className="flex items-center gap-2">
             <div
               className="w-4 h-4 border border-gray-300"
@@ -381,10 +444,22 @@ export default function Expo() {
             </span>
           </div>
         </div>
-      </div>
-      <div className="flex flex-col lg:flex-row gap-8 items-start">
-        <div className="flex-shrink-0 border-3 border-[#1F5673] w-full max-w-[800px]">
-          <div ref={mountRef} className="w-full" />
+        <div className="flex flex-col lg:flex-row gap-8 items-start">
+          <div className="flex-shrink-0 border-3 border-[#1F5673] w-full max-w-[800px] relative">
+            <div ref={mountRef} className="w-full" />
+            <button
+              onClick={() => setShowDividers(!showDividers)}
+              className={`absolute top-2 right-2 px-3 py-2 bg-[#1F5673] text-white hover:bg-[#2A7A9B] ${vipnagorgialla.className} uppercase italic text-sm font-semibold flex items-center transition-colors shadow-lg z-10`}
+            >
+              {showDividers ? (
+                <EyeClosed className="w-6 h-6 mr-2" />
+              ) : (
+                <Eye className="w-6 h-6 mr-2" />
+              )}
+
+              {showDividers ? "Peida" : "Näita"}
+            </button>
+          </div>
         </div>
 
         {/* Tooltip */}

src/app/turniirid/page.tsx

@@ -1,16 +1,16 @@
 import { vipnagorgialla } from "@/components/Vipnagorgialla";
 import Link from "next/link";
+import Image from "next/image";
 
 export default function Tourney() {
-    const headingStyle = `text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5]`;
+    const headingStyle = `text-3xl md:text-5xl lg:text-5xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] -skew-x-2 md:-skew-x-5`;
 
-    const SectionDivider = () => <div className="border-b-[3px] border-[#1F5673] w-full" />;
+    const SectionDivider = () => <hr className="border-t-[3px] border-[#1F5673]" />;
 
     return (
         <div className="flex flex-col min-h-[90vh] mt-16">
-            <div className={"md:m-16"}>
                 <h1
-                    className={`${headingStyle}`}
+                    className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4 m-6 md:m-16`}
                 >
                     Turniirid
                 </h1>
@@ -19,28 +19,29 @@ export default function Tourney() {
                 {/*  Kui tahate oma oskusi proovile panna, siis vaadake siia tagasi! Rohkem*/}
                 {/*  infot lähiajal.*/}
                 {/*</p>*/}
-
-                <div className={"flex flex-row flex-wrap gap-8 md:gap-38"}>
-                    <div className={"-skew-x-2 md:-skew-x-5 pl-4 md:pl-28 md:w-180"}>
-                        <h2 className={`${headingStyle} mt-12`}>
+            <div className="flex flex-col gap-8 md:gap-16">
+                {/* CS2 turniir */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
+                    <div className="-skew-x-2 md:-skew-x-5">
+                        <h2 className={`${headingStyle}`}>
                             CS2 turniir
                         </h2>
-                        <p className={"text-xs mb-4 text-neutral-500"}>
+                        <p className={"text-2xl mb-4 text-neutral-500"}>
                             Toimumisaeg veel selgumisel
                         </p>
-                        <p>
+                        <p className="text-balance">
                             TipiLANil toimub Eesti ühe suurima auhinnafondiga CS2 turniire juba sel sügisel. Haara kaasa
                             sõbrad ja
                             saa osa adrenaliinirohkest kogemusest!
                         </p>
                         <br />
-                        <p>
+                        <p className="text-balance">
                             Auhinnafond on suuruses 5250€, mis jaotatakse TOP3 meeskonna vahel ära. Iga tiimiliige saab
                             vastavalt
                             saavutatud kohale auhinnaks kas 600€, 300€ või 150€.
                         </p>
                         <br />
-                        <div className={"flex flex-row flex-wrap gap-8"}>
+                        <div className="flex flex-row flex-wrap gap-4 md:gap-8">
                             <Link href="/kodukord" target="_blank">
                                 <button
                                     className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
@@ -48,98 +49,132 @@ export default function Tourney() {
                                     LOE REEGLEID
                                 </button>
                             </Link>
-                            <Link href="https://fienta.com/et/tipilan" target="_blank">
+                            <a href="https://fienta.com/et/tipilan" target="_blank">
                                 <button
                                     className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
                                 >
                                     OSTA PILET
                                 </button>
-                            </Link>
+                            </a>
+                        </div>
+                    </div>
+                    <div className="hidden md:block">
+                        <div className="-skew-x-2 md:-skew-x-5">
+                            {/* Image needs to be the div that has the skew. Outside div needs to remain so that overflow wont occur*/}
+                            <Image
+                                src="/images/cs2_tournament.png"
+                                alt="CS2 tournament"
+                                width={600}
+                                height={400}
+                            />
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <SectionDivider />
+                <SectionDivider />
 
-            <div className={"flex flex-row gap-8 md:gap-38 mt-8 mb-12"}>
-                <div className={"pl-4 md:pl-40 md:w-180"}></div>
-                {/* Image placeholder */}
-                <div className={"-skew-x-2 md:-skew-x-5 flex-auto md:w-180 pr-4 md:pr-42 text-right"}>
-                    <h2 className={`${headingStyle}`}>
-                        LoL turniir
-                    </h2>
-                    <p className={"text-xs mb-4 text-neutral-500"}>
-                        Toimumisaeg veel selgumisel
-                    </p>
-                    <p>
-                        TipiLANil toimub Eesti ühe suurima auhinnafondiga LoL turniire juba sel sügisel.
-                        Haara kaasa sõbrad ja saa osa adrenaliinirohkest kogemusest!
-                    </p>
-                    <br />
-                    <p>
-                        Auhinnafond on suuruses 3500€, mis jaotatakse TOP3 meeskonna vahel ära. Iga tiimiliige saab
-                        vastavalt saavutatud kohale auhinnaks kas 400€, 200€ või 100€.
-                    </p>
-                    <br />
-                    <div className="flex flex-row flex-wrap gap-8 justify-end">
-                        <Link href="/kodukord" target="_blank">
-                        <button
-                            className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
-                        >
-                            LOE REEGLEID
-                        </button>
-                    </Link>
-                    <Link href="https://fienta.com/et/tipilan" target="_blank">
-                        <button
-                            className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
-                        >
-                            OSTA PILET
-                        </button>
-                    </Link>
+                {/* LoL turniir */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
+                    <div className="hidden md:block">
+                        <div className="-skew-x-2 md:-skew-x-5">
+                            {/* Image needs to be the div that has the skew. Outside div needs to remain so that overflow wont occur*/}
+                            <Image
+                                src="/images/lol_tournament.png"
+                                alt="LoL tournament"
+                                width={600}
+                                height={400}
+                            />
+                        </div>
+                    </div>
+                    <div className="flex-auto text-right -skew-x-2 md:-skew-x-5">
+                        <h2 className={`${headingStyle}`}>
+                            LoL turniir
+                        </h2>
+                        <p className={"text-2xl mb-4 text-neutral-500"}>
+                            Toimumisaeg veel selgumisel
+                        </p>
+                        <p className="text-balance">
+                            TipiLANil toimub Eesti ühe suurima auhinnafondiga LoL turniire juba sel sügisel.
+                            Haara kaasa sõbrad ja saa osa adrenaliinirohkest kogemusest!
+                        </p>
+                        <br />
+                        <p className="text-balance">
+                            Auhinnafond on suuruses 3500€, mis jaotatakse TOP3 meeskonna vahel ära. Iga tiimiliige saab
+                            vastavalt saavutatud kohale auhinnaks kas 400€, 200€ või 100€.
+                        </p>
+                        <br />
+                        <div className="flex flex-row flex-wrap gap-4 md:gap-8 justify-end">
+                            <Link href="/kodukord" target="_blank">
+                            <button
+                                className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
+                            >
+                                LOE REEGLEID
+                            </button>
+                            </Link>
+                            <a href="https://fienta.com/et/tipilan" target="_blank">
+                                <button
+                                    className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
+                                >
+                                    OSTA PILET
+                                </button>
+                            </a>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <SectionDivider />
+                <SectionDivider />
 
-            <div className={"-skew-x-2 md:-skew-x-5 pl-4 md:pl-40 md:w-180 mt-8 mb-12"}>
-                <h2 className={`${headingStyle}`}>
-                    Miniturniirid
-                </h2>
-                <p className={"text-xs mb-4 text-neutral-500"}>
-                    Toimumisaeg veel selgumisel
-                </p>
-                <p>
-                    TipiLANil toimub mitmeid erinevaid lõbusaid ja võistlushimu tekitavaid miniturniire.
-                    Miniturniirid toimuvad järgnevates mängudes: Tetris, SimRacing, Tekken. FIFA, Minecraft Bedwards,
-                    Buckshot Roulette, LostGamer.
-                </p>
-                <br />
-                <p>
-                    Auhinnafond on kõigi turniiride peale 1250€ ja reeglina saab rahalise auhinna miniturniiri võitja.
-                </p>
-                <br />
-                <div className={"flex flex-row flex-wrap gap-8"}>
-                    <Link href="/kodukord" target="_blank">
-                        <button
-                            className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
-                        >
-                            LOE REEGLEID
-                        </button>
-                    </Link>
-                    <Link href="https://fienta.com/et/tipilan" target="_blank">
-                        <button
-                            className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
-                        >
-                            OSTA PILET
-                        </button>
-                    </Link>
+                {/* Mini-turniirid */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
+                    <div className="-skew-x-2 md:-skew-x-5">
+                        <h2 className={`${headingStyle}`}>
+                            Mini&shy;turniirid
+                        </h2>
+                        <p className={"text-2xl mb-4 text-neutral-500"}>
+                            Toimumisaeg veel selgumisel
+                        </p>
+                        <p className="text-balance">
+                            TipiLANil toimub mitmeid erinevaid lõbusaid ja võistlushimu tekitavaid miniturniire.
+                            Miniturniirid toimuvad järgnevates mängudes: SimRacing, Tekken, FIFA, Minecraft Bedwars,
+                            Buckshot Roulette, LostGamer ja palju muud.
+                        </p>
+                        <br />
+                        <p className="text-balance">
+                            Auhinnafond on kõigi turniiride peale 1250€ ja reeglina saab rahalise auhinna miniturniiri võitja.
+                        </p>
+                        <br />
+                        <div className="flex flex-row flex-wrap gap-4 md:gap-8">
+                            <Link href="/kodukord" target="_blank">
+                                <button
+                                    className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
+                                >
+                                    LOE REEGLEID
+                                </button>
+                            </Link>
+                            <a href="https://fienta.com/et/tipilan" target="_blank">
+                                <button
+                                    className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
+                                >
+                                    OSTA PILET
+                                </button>
+                            </a>
+                        </div>
+                    </div>
+                    <div className="hidden md:block">
+                        <div className="-skew-x-2 md:-skew-x-5">
+                            {/* Image needs to be the div that has the skew. Outside div needs to remain so that overflow wont occur*/}
+                            <Image
+                                src="/images/minitournament.png"
+                                alt="mini tournaments"
+                                width={600}
+                                height={400}
+                            />
+                        </div>
+                    </div>
                 </div>
+
+                <SectionDivider />
             </div>
-
-            <SectionDivider />
-
         </div>
     );
 }

src/components/Footer.tsx

@@ -5,22 +5,22 @@ import Image from "next/image";
 import { vipnagorgialla } from "@/components/Vipnagorgialla";
 
 const Footer = () => (
-  <div className="flex flex-col justify-center sm:justify-between px-12 py-16 gap-8">
-    <div className="flex items-center justify-center sm:justify-between">
-      <div className="flex flex-col gap-4 items-center">
+  <div className="flex flex-col justify-center sm:justify-between px-6 py-8 md:px-12 md:py-16 gap-4 md:gap-8">
+    <div className="flex md:items-center gap-8 md:gap-0 justify-between flex-col md:flex-row">
+      <div className="flex flex-col items-start md:items-center">
         <Image
           src="/tipilan-white.svg"
-          width={300}
-          height={50}
+          width={250}
+          height={36}
           alt="TipiLAN Logo"
-          className="h-9 ml-3 dark:hidden"
+          className="h-9 dark:hidden"
         />
         <Image
           src="/tipilan-dark.svg"
-          width={300}
-          height={50}
+          width={250}
+          height={36}
           alt="TipiLAN Logo"
-          className="h-9 ml-3 not-dark:hidden"
+          className="h-9 not-dark:hidden"
         />
       </div>
       {/* Social media */}
@@ -28,7 +28,7 @@ const Footer = () => (
         <a
           href="https://discord.gg/eB7sVqgJ9b"
           target="_blank"
-          className="mx-4"
+          className="mx-4 ml-0 md:ml-4"
           rel="noopener noreferrer"
         >
           <SiDiscord
@@ -63,7 +63,7 @@ const Footer = () => (
         </a>
       </div>
     </div>
-    <div className="flex flex-col gap-4 ml-9">
+    <div className="flex flex-col">
       <h2
         className={`text-3xl sm:text-4xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 mb-4`}
       >