Messiala & stream

next.config.ts

@@ -1,7 +1,24 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  async headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value:
+              "frame-src 'self' https://player.twitch.tv https://embed.twitch.tv; frame-ancestors 'self';",
+          },
+          {
+            key: "X-Frame-Options",
+            value: "SAMEORIGIN",
+          },
+        ],
+      },
+    ];
+  },
 };
 
 export default nextConfig;

src/app/messiala/page.tsx

@@ -4,7 +4,6 @@ import {vipnagorgialla} from "@/components/Vipnagorgialla";
 import * as THREE from "three";
 import { useEffect, useRef, useState } from "react";
 import { EyeClosed, Eye } from "lucide-react";
-import SectionDivider from "@/components/SectionDivider";
 
 // Define interface for the ref with toggle function
 interface MountRefCurrent extends HTMLDivElement {
@@ -84,23 +83,15 @@ export default function Expo() {
 
     // Room colors and names
     const roomColors = [
-            0xff6b35, // Orange - Mänguklubi
+      0x343434, // Gray - Lauamängude ala
       0x4ecdc4, // Turquoise - Baariala
       0xffe66d, // Yellow - EVAL
-            0xe74c3c, // Red - Redbull
+      0xff6600, // Orange - Redbull Sim Racing
-            0x9b59b6, // Purple - Võitlusmängu ala
+      0xff1493, // Deep Pink - Võitlusmängu ala
       0x3498db, // Blue - Sony
-            0x2ecc71, // Green - Chillimisala
+      0x2ecc71, // Green - Lava
-        ];
+      0x080682, // Dark Blue - LVLup!
-
+      0xc02841, // Red - RedBull
-        const roomNames = [
-            "Mänguklubi",
-            "Baariala",
-            "EVAL",
-            "Redbull",
-            "Võitlusmängu ala",
-            "Sony",
-            "Chillimisala",
     ];
 
     // Create individual rooms as rectangles with custom positions
@@ -122,62 +113,80 @@ export default function Expo() {
         x: 2.5,
         z: 4,
         color: roomColors[0],
-                name: roomNames[0],
+        name: "Lauamängude ala",
-            }, // Mänguklubi
+      },
-            // {
+      {
-            //  width: 2.5,
+        width: 3.5,
-            //  height: 0.7,
+        height: 0.7,
-            //  depth: 0.7,
+        depth: 1.2,
-            //  x: 1,
+        x: 0.7,
-            //  z: 0,
+        z: -0.3,
-            //  color: roomColors[1],
+        color: roomColors[1],
-            //  name: roomNames[1],
+        name: "Baariala",
-            // }, // Baariala
+      },
       {
         width: 1.8,
         height: 0.7,
         depth: 1.5,
-                x: 2.5,
+        x: 1,
         z: -3.5,
         color: roomColors[2],
-                name: roomNames[2],
+        name: "EVAL",
-            }, // EVAL
+      },
       {
-                width: 2.2,
+        width: 2,
         height: 0.7,
         depth: 4.5,
-                x: 5,
+        x: 5.2,
         z: -2,
         color: roomColors[3],
-                name: roomNames[3],
+        name: "Red Bull Sim Racing",
-            }, // Redbull
+      },
       {
         width: 3,
         height: 0.7,
-                depth: 1.3,
+        depth: 1.5,
-                x: 0,
+        x: -1.7,
         z: -3.5,
         color: roomColors[4],
-                name: roomNames[4],
+        name: "Võitlusmängu ala",
-            }, // Võitlusmängu ala
+      },
+      // {
+      //   width: 1.8,
+      //   height: 0.7,
+      //   depth: 1.5,
+      //   x: -4.3,
+      //   z: -3.5,
+      //   color: roomColors[5],
+      //   name: "Sony",
+      // },
+      {
+        width: 3,
+        height: 0.7,
+        depth: 1.7,
+        x: -3.5,
+        z: -0.5,
+        color: roomColors[7],
+        name: "LVLup!",
+      },
+      //{
+      //  width: 2,
+      //  height: 0.7,
+      //  depth: 4,
+      //  x: -6.4,
+      //  z: -2.3,
+      //  color: roomColors[6],
+      //  name: "Lava",
+      //},
       {
         width: 1.8,
         height: 0.7,
         depth: 1.5,
-                x: -2.55,
+        x: 3,
         z: -3.5,
-                color: roomColors[5],
+        color: roomColors[8],
-                name: roomNames[5],
+        name: "Red Bull",
-            }, // Sony
+      },
-            {
-                width: 4,
-                height: 0.7,
-                depth: 4,
-                x: -5.5,
-                z: -2.3,
-                color: roomColors[6],
-                name: roomNames[6],
-            }, // Chillimisala
     ];
 
     roomDefinitions.forEach((roomDef) => {
@@ -230,7 +239,7 @@ export default function Expo() {
 
     // 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
+    createTogglableDivider(2, 2, 2, 5.5, 1.5); // Wall right next to Lauamängud & Redbull Sim Racing
 
     // Store dividers reference for later access
     dividersRef = [...dividers];
@@ -370,7 +379,6 @@ export default function Expo() {
   }, [showDividers]);
 
   return (
-        <div>
     <div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
       <h1
         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`}
@@ -383,15 +391,6 @@ export default function Expo() {
         </h2>
         <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"
-                                style={{backgroundColor: "#ff6b35"}}
-                            ></div>
-                            <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
-              Mänguklubi
-            </span>
-                        </div>
-                        <div className="items-center gap-2 hidden">
             <div
               className="w-4 h-4 border border-gray-300"
               style={{ backgroundColor: "#4ecdc4" }}
@@ -412,22 +411,40 @@ export default function Expo() {
           <div className="flex items-center gap-2">
             <div
               className="w-4 h-4 border border-gray-300"
-                                style={{backgroundColor: "#e74c3c"}}
+              style={{ backgroundColor: "#343434" }}
             ></div>
             <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
-              Redbull
+              Lauamängude ala
             </span>
           </div>
           <div className="flex items-center gap-2">
             <div
               className="w-4 h-4 border border-gray-300"
-                                style={{backgroundColor: "#9b59b6"}}
+              style={{ backgroundColor: "#080682" }}
             ></div>
             <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
-              Võitlusmängu ala
+              LVLup!
             </span>
           </div>
           <div className="flex items-center gap-2">
+            <div
+              className="w-4 h-4 border border-gray-300"
+              style={{ backgroundColor: "#C02841" }}
+            ></div>
+            <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
+              Red Bull
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div
+              className="w-4 h-4 border border-gray-300"
+              style={{ backgroundColor: "#ff6600" }}
+            ></div>
+            <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
+              Red Bull Sim Racing
+            </span>
+          </div>
+          <div className="items-center gap-2 hidden">
             <div
               className="w-4 h-4 border border-gray-300"
               style={{ backgroundColor: "#3498db" }}
@@ -439,10 +456,10 @@ export default function Expo() {
           <div className="flex items-center gap-2">
             <div
               className="w-4 h-4 border border-gray-300"
-                                style={{backgroundColor: "#2ecc71"}}
+              style={{ backgroundColor: "#ff1493" }}
             ></div>
             <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
-              Chillimisala
+              Võitlusmängu ala
             </span>
           </div>
         </div>
@@ -478,8 +495,5 @@ export default function Expo() {
         )}
       </div>
     </div>
-            
-            <SectionDivider />
-        </div>
   );
 }

src/app/striim/page.tsx

@@ -0,0 +1,210 @@
+import { vipnagorgialla } from "@/components/Vipnagorgialla";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div>
+      <div className="grid grid-cols-1 md:grid-cols-2">
+        {/* Title */}
+        <div className="grid grid-cols-1 items-center justify-between mt-18 gap-12 pt-8">
+          <Image
+            src="/tipilan-white.svg"
+            width={850}
+            height={120}
+            alt="TipiLAN Logo"
+            className="px-8 py-8 md:px-12 md:py-14 dark:hidden w-[max(300px,min(100%,850px))] h-auto"
+          />
+          <Image
+            src="/tipilan-dark.svg"
+            width={850}
+            height={120}
+            alt="TipiLAN Logo"
+            className="px-8 py-8 md:px-12 md:py-14 not-dark:hidden w-[max(300px,min(100%,850px))] h-auto2"
+          />
+          <Link
+            href="/ajakava"
+            className="px-8 md:px-12 py-8 flex flex-col gap-4 border-b-3 border-t-3 group border-[#1F5673] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition"
+          >
+            <div className="cursor-pointer flex flex-row justify-between gap-4 items-center">
+              <h2
+                className={`text-[clamp(2rem,1.8rem+1vw,3rem)] ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] group-hover:text-black dark:group-hover:text-[#2A2C3F]`}
+              >
+                Ajakava
+              </h2>
+              <span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
+                arrow_right_alt
+              </span>
+            </div>
+            <div className="flex flex-col gap-4">
+              <span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
+                event_note
+              </span>
+              <p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover:text-[#2A2C3F] group-hover:text-black">
+                TipiLAN on pungil põnevatest turniiridest, mini-võistlustest ja
+                paljust muust.
+              </p>
+            </div>
+          </Link>
+        </div>
+        {/* Stream iframe from Twitch */}
+        <div className="border-[#1F5673] -ml-0.75 border-l-0 md:border-l-3 border-b-3 h-full pt-0 md:pt-16">
+          <iframe
+            src="https://player.twitch.tv/?channel=shroud&parent=localhost&parent=tipilan.ee"
+            height="100%"
+            width="100%"
+            className="w-full h-full min-h-[400px]"
+            allow="autoplay; encrypted-media"
+          ></iframe>
+        </div>
+      </div>
+      {/* Grid of buttons */}
+      <div className="grid grid-cols-1 xl:grid-cols-2 border-[#1F5673]">
+        <Link
+          href="/turniirid"
+          className="px-8 md:px-12 py-8 flex flex-col gap-4 border-b-3 lg:border-r-3 group border-[#1F5673] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition"
+        >
+          <div className="cursor-pointer flex flex-row justify-between gap-4 items-center">
+            <h2
+              className={`text-[clamp(2rem,1.8rem+1vw,3rem)] ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] dark:group-hover:text-[#2A2C3F] group-hover:text-black`}
+            >
+              Turniirid
+            </h2>
+            <span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
+              arrow_right_alt
+            </span>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
+              trophy
+            </span>
+            <p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover:text-[#2A2C3F] group-hover:text-black">
+              TipiLANil toimuvad suurejoonelised CS2 ja LoL turniirid, mille
+              auhinnafond on 10 000€.
+            </p>
+          </div>
+        </Link>
+        <Link
+          href="/messiala"
+          className="px-8 md:px-12 py-8 flex flex-col gap-4 border-b-3 border-[#1F5673] group hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition-all"
+        >
+          <div className="cursor-pointer flex flex-row justify-between gap-4 items-center">
+            <h2
+              className={`text-[clamp(2rem,1.8rem+1vw,3rem)] ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] dark:group-hover:text-[#2A2C3F] group-hover:text-black`}
+            >
+              Messiala
+            </h2>
+            <span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
+              arrow_right_alt
+            </span>
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
+              weekend
+            </span>
+            <p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover:text-[#2A2C3F] group-hover:text-black">
+              TipiLANi messialal paiknevad ettevõtted, lisategevused ja toimuvad
+              loengud.
+            </p>
+          </div>
+        </Link>
+      </div>
+      {/* Date */}
+      <Link
+        href="/piletid"
+        className={`p-8 md:p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#1F5673] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] group transition`}
+      >
+        <div className="cursor-pointer text-left flex flex-row justify-between xl:justify-start gap-8">
+          <h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] dark:group-hover:text-[#2A2C3F] text-[#2A2C3F] group-hover:text-black">
+            Bro&shy;neeri oma koht juba täna!
+          </h3>
+          <span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] hidden md:block group-hover:translate-x-2 group-hover:text-[#EEE5E5] dark:group-hover:text-[#EEE5E5] transition">
+            arrow_right_alt
+          </span>
+        </div>
+        <h2 className="text-[clamp(2.5rem,2.25rem+1.25vw,3.75rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
+          24.-26. okt.
+        </h2>
+      </Link>
+      {/* Sponsors */}
+      <div
+        className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#1F5673]`}
+      >
+        <div className="text-left flex flex-col justify-between xl:justify-start">
+          <h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] text-[#2A2C3F] group-hover:text-black pb-8">
+            TipiLANi tõmbab käima...
+          </h3>
+          <div className="flex flex-row flex-wrap gap-8 md:gap-18 items-center">
+            <Link href="https://taltech.ee" target="_blank">
+              <Image
+                src="/sponsors/taltech-color.png"
+                alt="Taltech (Tallinna Tehnikaülikool)"
+                width={192}
+                height={192}
+                className="object-contain"
+              />
+            </Link>
+            <Link href="https://www.redbull.com/ee-et/" target="_blank">
+              <Image
+                src="/sponsors/redbull.png"
+                alt="Redbull"
+                width={80}
+                height={80}
+                className="object-contain"
+              />
+            </Link>
+            <Link href="https://www.alecoq.ee" target="_blank">
+              <Image
+                src="/sponsors/alecoq.svg"
+                alt="Alecoq"
+                width={200}
+                height={200}
+                className="object-contain"
+              />
+            </Link>
+            <Link href="https://www.simracing.ee/" target="_blank">
+              <Image
+                src="/sponsors/EVAL.png"
+                alt="EVAL"
+                width={200}
+                height={200}
+                className="object-contain"
+              />
+            </Link>
+            <Link href="https://balsnack.ee" target="_blank">
+              <Image
+                src="/sponsors/balsnack.svg"
+                alt="Balsnack"
+                width={200}
+                height={200}
+                className="object-contain"
+              />
+            </Link>
+            <Link
+              href="https://www.rara.ee/sundmused/interaktiivne-videomangude-muuseum-lvlup/"
+              target="_blank"
+            >
+              <Image
+                src="/sponsors/lvlup_logo_export.svg"
+                alt="LVLup!"
+                width={192}
+                height={192}
+                className="object-contain"
+              />
+            </Link>
+            <Link href="https://www.facebook.com/bfglOfficial" target="_blank">
+              <Image
+                src="/sponsors/BFGL.png"
+                alt="BFGL"
+                width={192}
+                height={192}
+                className="object-contain"
+              />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}