mirror of https://github.com/Lapikud/tipilan
Renkar
4 months ago
committed by
GitHub
commit
5ba7736ef9
10 changed files with 828 additions and 703 deletions
@ -1,72 +1,77 @@ |
||||
"use client"; |
||||
|
||||
import { useState } from "react"; |
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
||||
import { scheduleData } from "@/data/timetable"; |
||||
import {useState} from "react"; |
||||
import {vipnagorgialla} from "@/components/Vipnagorgialla"; |
||||
import {scheduleData} from "@/data/timetable"; |
||||
import SectionDivider from "@/components/SectionDivider"; |
||||
|
||||
const tabs = Object.keys(scheduleData); |
||||
|
||||
export default function Timetable() { |
||||
const [activeTab, setActiveTab] = useState(tabs[0]); |
||||
const schedule = scheduleData[activeTab]; |
||||
const [activeTab, setActiveTab] = useState(tabs[0]); |
||||
const schedule = scheduleData[activeTab]; |
||||
|
||||
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 md:mt-16 mb-8`} |
||||
> |
||||
Ajakava |
||||
</h1> |
||||
return ( |
||||
<div> |
||||
<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 md:mt-16 mb-8`} |
||||
> |
||||
Ajakava |
||||
</h1> |
||||
|
||||
{/* Tab menu */} |
||||
<div className="flex space-x-4 mb-8"> |
||||
{tabs.map((tab) => ( |
||||
<button |
||||
key={tab} |
||||
onClick={() => setActiveTab(tab)} |
||||
className={`${vipnagorgialla.className} uppercase italic px-4 py-2 text-lg font-semibold ${ |
||||
activeTab === tab |
||||
? "bg-[#00A3E0] text-white" |
||||
: "bg-[#007CAB] dark:bg-[#007CAB] text-[#EEE5E5] hover:bg-[#00A3E0] dark:hover:bg-[#007CAB]" |
||||
} transition-colors`}
|
||||
> |
||||
{tab} |
||||
</button> |
||||
))} |
||||
</div> |
||||
|
||||
{/* Schedule entries */} |
||||
<div className="space-y-6"> |
||||
{schedule.map((item, idx) => ( |
||||
<div |
||||
key={idx} |
||||
className="border-l-3 border-[#007CAB] pl-4 flex flex-row gap-12" |
||||
> |
||||
<div |
||||
className={` ${vipnagorgialla.className} text-[#00A3E0] text-5xl font-bold italic`} |
||||
> |
||||
{item.time} |
||||
</div> |
||||
<div> |
||||
<div |
||||
className={`${vipnagorgialla.className} text-4xl italic font-bold text-[#2A2C3F] dark:text-[#EEE5E5]`} |
||||
> |
||||
{item.title} |
||||
</div> |
||||
{item.description && ( |
||||
<div className="text-2xl text-[#938BA1] dark:text-[#938BA1]"> |
||||
{item.description} |
||||
{/* Tab menu */} |
||||
<div className="flex space-x-4 mb-8"> |
||||
{tabs.map((tab) => ( |
||||
<button |
||||
key={tab} |
||||
onClick={() => setActiveTab(tab)} |
||||
className={`${vipnagorgialla.className} uppercase italic px-4 py-2 text-lg font-semibold ${ |
||||
activeTab === tab |
||||
? "bg-[#00A3E0] text-white" |
||||
: "bg-[#007CAB] dark:bg-[#007CAB] text-[#EEE5E5] hover:bg-[#00A3E0] dark:hover:bg-[#007CAB]" |
||||
} transition-colors`}
|
||||
> |
||||
{tab} |
||||
</button> |
||||
))} |
||||
</div> |
||||
)} |
||||
{item.location && ( |
||||
<div className="text-2xl text-[#938BA1] dark:text-[#938BA1]"> |
||||
{item.location} |
||||
|
||||
{/* Schedule entries */} |
||||
<div className="space-y-6"> |
||||
{schedule.map((item, idx) => ( |
||||
<div |
||||
key={idx} |
||||
className="border-l-3 border-[#007CAB] pl-4 flex flex-row gap-12" |
||||
> |
||||
<div |
||||
className={` ${vipnagorgialla.className} text-[#00A3E0] text-5xl font-bold italic`} |
||||
> |
||||
{item.time} |
||||
</div> |
||||
<div> |
||||
<div |
||||
className={`${vipnagorgialla.className} text-4xl italic font-bold text-[#2A2C3F] dark:text-[#EEE5E5]`} |
||||
> |
||||
{item.title} |
||||
</div> |
||||
{item.description && ( |
||||
<div className="text-2xl text-[#938BA1] dark:text-[#938BA1]"> |
||||
{item.description} |
||||
</div> |
||||
)} |
||||
{item.location && ( |
||||
<div className="text-2xl text-[#938BA1] dark:text-[#938BA1]"> |
||||
{item.location} |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
))} |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</div> |
||||
); |
||||
|
||||
<SectionDivider/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
@ -1,63 +1,55 @@ |
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
||||
// app/kodukord/page.tsx (App Router)
|
||||
import fs from "node:fs"; |
||||
import path from "node:path"; |
||||
import ReactMarkdown from "react-markdown"; |
||||
import remarkGfm from "remark-gfm"; |
||||
import {vipnagorgialla} from "@/components/Vipnagorgialla"; |
||||
import SectionDivider from "@/components/SectionDivider"; |
||||
|
||||
export default function Rulebook() { |
||||
return ( |
||||
<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`} |
||||
> |
||||
Kodukord |
||||
</h1> |
||||
<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"> |
||||
<li>alkoholi ja uimastite omamine ja tarbimine ürituse vältel</li> |
||||
<li>alkoholijoobes või uimastite mõju all viibimine üritusel</li> |
||||
<li> |
||||
suitsetamine (ka e-sigaret) selleks mitte ettenähtud kohtades – |
||||
suitsetada võib suitsuruumis või õues vastava prügikasti juures |
||||
<ul className="list-disc ml-6"> |
||||
<li>suitsetamine alaealistel</li> |
||||
<li>mokatubaka kasutamine TalTech-i territooriumil</li> |
||||
</ul> |
||||
</li> |
||||
<li>külm- ja imitatsioonrelvad</li> |
||||
<li> |
||||
ürituse alal igasuguse vägivalla kasutamine teiste ja teiste vara |
||||
suhtes |
||||
</li> |
||||
<li>teiste vara omavoliline kasutamine, näppimine</li> |
||||
<li>turniiri reeglitele mittevastavalt mängimine</li> |
||||
<li> |
||||
omavoliline taristu (võrgu) näppimine – võrguprobleemidega tuleb |
||||
pöörduda korraldajate poole |
||||
</li> |
||||
<li> |
||||
mängimiseks ebavajalike seadmete ühendamine vooluvõrku (nt |
||||
veekeetja, puhur, sirgendaja) |
||||
</li> |
||||
</ol> |
||||
</li> |
||||
<li>Iga külastaja vastutab enda asjade ja vara eest ise</li> |
||||
<li> |
||||
Korraldajale varalise kahju tekitanud külastaja on kohustatud korvama |
||||
täies ulatuses tekitatud kahju |
||||
</li> |
||||
<li> |
||||
Magamiseks ettenähtud ajal ja magamiseks ettenähtud ruumis tuleb olla |
||||
vaikselt ja võimaldada kaas mängijatel magada |
||||
</li> |
||||
<li>Korraldajad ei vastuta külastajate eest</li> |
||||
<li> |
||||
Mängijad on TipiLAN-il kohustatud kinni pidama mängule seatud |
||||
vanusepiirangutest |
||||
</li> |
||||
</ol> |
||||
<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> |
||||
</div> |
||||
); |
||||
export const runtime = "nodejs"; // ensure fs is available (not Edge)
|
||||
export const dynamic = "force-static"; // read at build time
|
||||
|
||||
export default function Page() { |
||||
const filePath = path.join(process.cwd(), "src/data", "kodukord.md"); |
||||
const content = fs.readFileSync(filePath, "utf8"); |
||||
|
||||
return ( |
||||
<div> |
||||
<div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16"> |
||||
{/* Page title (separate from markdown headings) */} |
||||
<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`} |
||||
> |
||||
Kodukord |
||||
</h1> |
||||
|
||||
<div className="prose prose-lg dark:prose-invert max-w-none"> |
||||
<ReactMarkdown |
||||
remarkPlugins={[remarkGfm]} |
||||
components={{ |
||||
h1: ({node, ...props}) => ( |
||||
<h1 className="text-3xl md:text-4xl font-bold my-4" {...props} /> |
||||
), |
||||
h2: ({node, ...props}) => ( |
||||
<h2 className="text-2xl md:text-3xl font-semibold my-3" {...props} /> |
||||
), |
||||
ol: ({node, ...props}) => ( |
||||
<ol className="list-decimal ml-6 md:text-xl" {...props} /> |
||||
), |
||||
ul: ({node, ...props}) => ( |
||||
<ul className="list-disc ml-6 md:text-xl" {...props} /> |
||||
), |
||||
p: ({node, ...props}) => ( |
||||
<p className="md:text-xl" {...props} /> |
||||
), |
||||
}} |
||||
> |
||||
{content} |
||||
</ReactMarkdown> |
||||
</div> |
||||
</div> |
||||
|
||||
<SectionDivider/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
@ -1,480 +1,485 @@ |
||||
"use client"; |
||||
|
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
||||
import {vipnagorgialla} from "@/components/Vipnagorgialla"; |
||||
import * as THREE from "three"; |
||||
import { useEffect, useRef, useState } from "react"; |
||||
import { EyeClosed, Eye } from "lucide-react"; |
||||
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 { |
||||
toggleDividers?: (show: boolean) => void; |
||||
toggleDividers?: (show: boolean) => void; |
||||
} |
||||
|
||||
export default function Expo() { |
||||
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); |
||||
|
||||
// Get responsive dimensions
|
||||
const getResponsiveDimensions = () => { |
||||
const container = mountRef.current; |
||||
if (!container) return { width: 800, height: 600 }; |
||||
|
||||
const containerWidth = container.offsetWidth; |
||||
const maxWidth = Math.min(containerWidth, 800); |
||||
const width = Math.max(maxWidth, 300); // Minimum width
|
||||
const height = (width * 600) / 800; // Maintain aspect ratio
|
||||
|
||||
return { width, height }; |
||||
}; |
||||
|
||||
const { width, height } = getResponsiveDimensions(); |
||||
|
||||
// Isometric camera setup with responsive sizing
|
||||
const aspect = width / height; |
||||
const baseFrustumSize = 14; |
||||
const frustumSize = width < 600 ? baseFrustumSize * 0.8 : baseFrustumSize; // Smaller frustum for mobile
|
||||
const camera = new THREE.OrthographicCamera( |
||||
(frustumSize * aspect) / -2, |
||||
(frustumSize * aspect) / 2, |
||||
frustumSize / 2, |
||||
frustumSize / -2, |
||||
1, |
||||
1000, |
||||
); |
||||
|
||||
// Position camera for isometric view
|
||||
camera.position.set(10, 10, 14); |
||||
camera.lookAt(-1.4, 0, 0); |
||||
|
||||
// Renderer
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true }); |
||||
renderer.setSize(width, height); |
||||
renderer.shadowMap.enabled = true; |
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap; |
||||
mountElement.appendChild(renderer.domElement); |
||||
|
||||
// Raycaster for mouse interactions
|
||||
const raycaster = new THREE.Raycaster(); |
||||
const mouse = new THREE.Vector2(); |
||||
|
||||
// Lighting
|
||||
const ambientLight = new THREE.AmbientLight(0x404040, 1.2); |
||||
scene.add(ambientLight); |
||||
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); |
||||
directionalLight.position.set(10, 10, 5); |
||||
directionalLight.castShadow = false; |
||||
directionalLight.shadow.mapSize.width = 2048; |
||||
directionalLight.shadow.mapSize.height = 2048; |
||||
scene.add(directionalLight); |
||||
|
||||
// Room colors and names
|
||||
const roomColors = [ |
||||
0xff6b35, // Orange - Mänguklubi
|
||||
0x4ecdc4, // Turquoise - Baariala
|
||||
0xffe66d, // Yellow - EVAL
|
||||
0xe74c3c, // Red - Redbull
|
||||
0x9b59b6, // Purple - Võitlusmängu ala
|
||||
0x3498db, // Blue - Sony
|
||||
0x2ecc71, // Green - Chillimisala
|
||||
]; |
||||
|
||||
const roomNames = [ |
||||
"Mänguklubi", |
||||
"Baariala", |
||||
"EVAL", |
||||
"Redbull", |
||||
"Võitlusmängu ala", |
||||
"Sony", |
||||
"Chillimisala", |
||||
]; |
||||
|
||||
// Create individual rooms as rectangles with custom positions
|
||||
const rooms: THREE.Mesh[] = []; |
||||
const roomData: Array<{ |
||||
mesh: THREE.Mesh; |
||||
name: string; |
||||
originalColor: number; |
||||
originalScale: THREE.Vector3; |
||||
}> = []; |
||||
const dividers: THREE.Mesh[] = []; |
||||
|
||||
// Define rooms with custom positions, sizes and colors
|
||||
const roomDefinitions = [ |
||||
{ |
||||
width: 7, |
||||
height: 0.7, |
||||
depth: 3, |
||||
x: 2.5, |
||||
z: 4, |
||||
color: roomColors[0], |
||||
name: roomNames[0], |
||||
}, // Mänguklubi
|
||||
// {
|
||||
// width: 2.5,
|
||||
// height: 0.7,
|
||||
// depth: 0.7,
|
||||
// x: 1,
|
||||
// z: 0,
|
||||
// color: roomColors[1],
|
||||
// name: roomNames[1],
|
||||
// }, // Baariala
|
||||
{ |
||||
width: 1.8, |
||||
height: 0.7, |
||||
depth: 1.5, |
||||
x: 2.5, |
||||
z: -3.5, |
||||
color: roomColors[2], |
||||
name: roomNames[2], |
||||
}, // EVAL
|
||||
{ |
||||
width: 2.2, |
||||
height: 0.7, |
||||
depth: 4.5, |
||||
x: 5, |
||||
z: -2, |
||||
color: roomColors[3], |
||||
name: roomNames[3], |
||||
}, // Redbull
|
||||
{ |
||||
width: 3, |
||||
height: 0.7, |
||||
depth: 1.3, |
||||
x: 0, |
||||
z: -3.5, |
||||
color: roomColors[4], |
||||
name: roomNames[4], |
||||
}, // Võitlusmängu ala
|
||||
{ |
||||
width: 1.8, |
||||
height: 0.7, |
||||
depth: 1.5, |
||||
x: -2.55, |
||||
z: -3.5, |
||||
color: roomColors[5], |
||||
name: roomNames[5], |
||||
}, // Sony
|
||||
{ |
||||
width: 4, |
||||
height: 0.7, |
||||
depth: 4, |
||||
x: -5.5, |
||||
z: -2.3, |
||||
color: roomColors[6], |
||||
name: roomNames[6], |
||||
}, // Chillimisala
|
||||
]; |
||||
|
||||
roomDefinitions.forEach((roomDef) => { |
||||
const geometry = new THREE.BoxGeometry( |
||||
roomDef.width, |
||||
roomDef.height, |
||||
roomDef.depth, |
||||
); |
||||
const material = new THREE.MeshLambertMaterial({ |
||||
color: roomDef.color, |
||||
}); |
||||
|
||||
const room = new THREE.Mesh(geometry, material); |
||||
room.position.set(roomDef.x, roomDef.height / 2, roomDef.z); |
||||
room.castShadow = true; |
||||
room.receiveShadow = true; |
||||
room.userData = { name: roomDef.name, originalColor: roomDef.color }; |
||||
|
||||
scene.add(room); |
||||
rooms.push(room); |
||||
roomData.push({ |
||||
mesh: room, |
||||
name: roomDef.name, |
||||
originalColor: roomDef.color, |
||||
originalScale: room.scale.clone(), |
||||
}); |
||||
}); |
||||
|
||||
// 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 }); |
||||
const ground = new THREE.Mesh(groundGeometry, groundMaterial); |
||||
ground.rotation.x = -Math.PI / 2; |
||||
ground.position.x = -1.1; |
||||
ground.position.y = -0.5; |
||||
ground.receiveShadow = true; |
||||
scene.add(ground); |
||||
|
||||
// Second ground plane
|
||||
const groundGeometry2 = new THREE.PlaneGeometry(2, 7); |
||||
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; |
||||
ground2.position.y = -5; |
||||
ground2.receiveShadow = true; |
||||
scene.add(ground2); |
||||
|
||||
// Resize handler
|
||||
const handleResize = () => { |
||||
const { width: newWidth, height: newHeight } = getResponsiveDimensions(); |
||||
|
||||
// Update camera
|
||||
const newAspect = newWidth / newHeight; |
||||
const newFrustumSize = |
||||
newWidth < 600 ? baseFrustumSize * 0.8 : baseFrustumSize; |
||||
|
||||
camera.left = (newFrustumSize * newAspect) / -2; |
||||
camera.right = (newFrustumSize * newAspect) / 2; |
||||
camera.top = newFrustumSize / 2; |
||||
camera.bottom = newFrustumSize / -2; |
||||
camera.updateProjectionMatrix(); |
||||
|
||||
// Update renderer
|
||||
renderer.setSize(newWidth, newHeight); |
||||
}; |
||||
|
||||
// Add resize event listener
|
||||
window.addEventListener("resize", handleResize); |
||||
|
||||
// Mouse event handlers
|
||||
const onMouseMove = (event: MouseEvent) => { |
||||
const rect = renderer.domElement.getBoundingClientRect(); |
||||
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; |
||||
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; |
||||
|
||||
// Update mouse position for tooltip
|
||||
setMousePosition({ x: event.clientX, y: event.clientY }); |
||||
|
||||
// Update raycaster
|
||||
raycaster.setFromCamera(mouse, camera); |
||||
const intersects = raycaster.intersectObjects(rooms); |
||||
|
||||
// Reset all rooms to original state
|
||||
roomData.forEach(({ mesh, originalColor, originalScale }) => { |
||||
(mesh.material as THREE.MeshLambertMaterial).color.setHex( |
||||
originalColor, |
||||
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); |
||||
|
||||
// Get responsive dimensions
|
||||
const getResponsiveDimensions = () => { |
||||
const container = mountRef.current; |
||||
if (!container) return {width: 800, height: 600}; |
||||
|
||||
const containerWidth = container.offsetWidth; |
||||
const maxWidth = Math.min(containerWidth, 800); |
||||
const width = Math.max(maxWidth, 300); // Minimum width
|
||||
const height = (width * 600) / 800; // Maintain aspect ratio
|
||||
|
||||
return {width, height}; |
||||
}; |
||||
|
||||
const {width, height} = getResponsiveDimensions(); |
||||
|
||||
// Isometric camera setup with responsive sizing
|
||||
const aspect = width / height; |
||||
const baseFrustumSize = 14; |
||||
const frustumSize = width < 600 ? baseFrustumSize * 0.8 : baseFrustumSize; // Smaller frustum for mobile
|
||||
const camera = new THREE.OrthographicCamera( |
||||
(frustumSize * aspect) / -2, |
||||
(frustumSize * aspect) / 2, |
||||
frustumSize / 2, |
||||
frustumSize / -2, |
||||
1, |
||||
1000, |
||||
); |
||||
mesh.scale.copy(originalScale); |
||||
}); |
||||
|
||||
if (intersects.length > 0) { |
||||
const hoveredMesh = intersects[0].object as THREE.Mesh; |
||||
const roomInfo = roomData.find((r) => r.mesh === hoveredMesh); |
||||
|
||||
if (roomInfo) { |
||||
// Apply hover effects
|
||||
(hoveredMesh.material as THREE.MeshLambertMaterial).color.setHex( |
||||
0xffffff, |
||||
); |
||||
hoveredMesh.scale.multiplyScalar(1.02); |
||||
setHoveredRoom(roomInfo.name); |
||||
|
||||
// Position camera for isometric view
|
||||
camera.position.set(10, 10, 14); |
||||
camera.lookAt(-1.4, 0, 0); |
||||
|
||||
// Renderer
|
||||
const renderer = new THREE.WebGLRenderer({antialias: true}); |
||||
renderer.setSize(width, height); |
||||
renderer.shadowMap.enabled = true; |
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap; |
||||
mountElement.appendChild(renderer.domElement); |
||||
|
||||
// Raycaster for mouse interactions
|
||||
const raycaster = new THREE.Raycaster(); |
||||
const mouse = new THREE.Vector2(); |
||||
|
||||
// Lighting
|
||||
const ambientLight = new THREE.AmbientLight(0x404040, 1.2); |
||||
scene.add(ambientLight); |
||||
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); |
||||
directionalLight.position.set(10, 10, 5); |
||||
directionalLight.castShadow = false; |
||||
directionalLight.shadow.mapSize.width = 2048; |
||||
directionalLight.shadow.mapSize.height = 2048; |
||||
scene.add(directionalLight); |
||||
|
||||
// Room colors and names
|
||||
const roomColors = [ |
||||
0xff6b35, // Orange - Mänguklubi
|
||||
0x4ecdc4, // Turquoise - Baariala
|
||||
0xffe66d, // Yellow - EVAL
|
||||
0xe74c3c, // Red - Redbull
|
||||
0x9b59b6, // Purple - Võitlusmängu ala
|
||||
0x3498db, // Blue - Sony
|
||||
0x2ecc71, // Green - Chillimisala
|
||||
]; |
||||
|
||||
const roomNames = [ |
||||
"Mänguklubi", |
||||
"Baariala", |
||||
"EVAL", |
||||
"Redbull", |
||||
"Võitlusmängu ala", |
||||
"Sony", |
||||
"Chillimisala", |
||||
]; |
||||
|
||||
// Create individual rooms as rectangles with custom positions
|
||||
const rooms: THREE.Mesh[] = []; |
||||
const roomData: Array<{ |
||||
mesh: THREE.Mesh; |
||||
name: string; |
||||
originalColor: number; |
||||
originalScale: THREE.Vector3; |
||||
}> = []; |
||||
const dividers: THREE.Mesh[] = []; |
||||
|
||||
// Define rooms with custom positions, sizes and colors
|
||||
const roomDefinitions = [ |
||||
{ |
||||
width: 7, |
||||
height: 0.7, |
||||
depth: 3, |
||||
x: 2.5, |
||||
z: 4, |
||||
color: roomColors[0], |
||||
name: roomNames[0], |
||||
}, // Mänguklubi
|
||||
// {
|
||||
// width: 2.5,
|
||||
// height: 0.7,
|
||||
// depth: 0.7,
|
||||
// x: 1,
|
||||
// z: 0,
|
||||
// color: roomColors[1],
|
||||
// name: roomNames[1],
|
||||
// }, // Baariala
|
||||
{ |
||||
width: 1.8, |
||||
height: 0.7, |
||||
depth: 1.5, |
||||
x: 2.5, |
||||
z: -3.5, |
||||
color: roomColors[2], |
||||
name: roomNames[2], |
||||
}, // EVAL
|
||||
{ |
||||
width: 2.2, |
||||
height: 0.7, |
||||
depth: 4.5, |
||||
x: 5, |
||||
z: -2, |
||||
color: roomColors[3], |
||||
name: roomNames[3], |
||||
}, // Redbull
|
||||
{ |
||||
width: 3, |
||||
height: 0.7, |
||||
depth: 1.3, |
||||
x: 0, |
||||
z: -3.5, |
||||
color: roomColors[4], |
||||
name: roomNames[4], |
||||
}, // Võitlusmängu ala
|
||||
{ |
||||
width: 1.8, |
||||
height: 0.7, |
||||
depth: 1.5, |
||||
x: -2.55, |
||||
z: -3.5, |
||||
color: roomColors[5], |
||||
name: roomNames[5], |
||||
}, // Sony
|
||||
{ |
||||
width: 4, |
||||
height: 0.7, |
||||
depth: 4, |
||||
x: -5.5, |
||||
z: -2.3, |
||||
color: roomColors[6], |
||||
name: roomNames[6], |
||||
}, // Chillimisala
|
||||
]; |
||||
|
||||
roomDefinitions.forEach((roomDef) => { |
||||
const geometry = new THREE.BoxGeometry( |
||||
roomDef.width, |
||||
roomDef.height, |
||||
roomDef.depth, |
||||
); |
||||
const material = new THREE.MeshLambertMaterial({ |
||||
color: roomDef.color, |
||||
}); |
||||
|
||||
const room = new THREE.Mesh(geometry, material); |
||||
room.position.set(roomDef.x, roomDef.height / 2, roomDef.z); |
||||
room.castShadow = true; |
||||
room.receiveShadow = true; |
||||
room.userData = {name: roomDef.name, originalColor: roomDef.color}; |
||||
|
||||
scene.add(room); |
||||
rooms.push(room); |
||||
roomData.push({ |
||||
mesh: room, |
||||
name: roomDef.name, |
||||
originalColor: roomDef.color, |
||||
originalScale: room.scale.clone(), |
||||
}); |
||||
}); |
||||
|
||||
// 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}); |
||||
const ground = new THREE.Mesh(groundGeometry, groundMaterial); |
||||
ground.rotation.x = -Math.PI / 2; |
||||
ground.position.x = -1.1; |
||||
ground.position.y = -0.5; |
||||
ground.receiveShadow = true; |
||||
scene.add(ground); |
||||
|
||||
// Second ground plane
|
||||
const groundGeometry2 = new THREE.PlaneGeometry(2, 7); |
||||
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; |
||||
ground2.position.y = -5; |
||||
ground2.receiveShadow = true; |
||||
scene.add(ground2); |
||||
|
||||
// Resize handler
|
||||
const handleResize = () => { |
||||
const {width: newWidth, height: newHeight} = getResponsiveDimensions(); |
||||
|
||||
// Update camera
|
||||
const newAspect = newWidth / newHeight; |
||||
const newFrustumSize = |
||||
newWidth < 600 ? baseFrustumSize * 0.8 : baseFrustumSize; |
||||
|
||||
camera.left = (newFrustumSize * newAspect) / -2; |
||||
camera.right = (newFrustumSize * newAspect) / 2; |
||||
camera.top = newFrustumSize / 2; |
||||
camera.bottom = newFrustumSize / -2; |
||||
camera.updateProjectionMatrix(); |
||||
|
||||
// Update renderer
|
||||
renderer.setSize(newWidth, newHeight); |
||||
}; |
||||
|
||||
// Add resize event listener
|
||||
window.addEventListener("resize", handleResize); |
||||
|
||||
// Mouse event handlers
|
||||
const onMouseMove = (event: MouseEvent) => { |
||||
const rect = renderer.domElement.getBoundingClientRect(); |
||||
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; |
||||
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; |
||||
|
||||
// Update mouse position for tooltip
|
||||
setMousePosition({x: event.clientX, y: event.clientY}); |
||||
|
||||
// Update raycaster
|
||||
raycaster.setFromCamera(mouse, camera); |
||||
const intersects = raycaster.intersectObjects(rooms); |
||||
|
||||
// Reset all rooms to original state
|
||||
roomData.forEach(({mesh, originalColor, originalScale}) => { |
||||
(mesh.material as THREE.MeshLambertMaterial).color.setHex( |
||||
originalColor, |
||||
); |
||||
mesh.scale.copy(originalScale); |
||||
}); |
||||
|
||||
if (intersects.length > 0) { |
||||
const hoveredMesh = intersects[0].object as THREE.Mesh; |
||||
const roomInfo = roomData.find((r) => r.mesh === hoveredMesh); |
||||
|
||||
if (roomInfo) { |
||||
// Apply hover effects
|
||||
(hoveredMesh.material as THREE.MeshLambertMaterial).color.setHex( |
||||
0xffffff, |
||||
); |
||||
hoveredMesh.scale.multiplyScalar(1.02); |
||||
setHoveredRoom(roomInfo.name); |
||||
} |
||||
} else { |
||||
setHoveredRoom(null); |
||||
} |
||||
}; |
||||
|
||||
// Add mouse event listener
|
||||
renderer.domElement.addEventListener("mousemove", onMouseMove); |
||||
|
||||
// Animation loop
|
||||
const animate = () => { |
||||
requestAnimationFrame(animate); |
||||
|
||||
// Gentle floating animation for rooms
|
||||
rooms.forEach((room, index) => { |
||||
const originalY = 0.25; // height / 2 for the room height of 0.5
|
||||
const baseY = originalY + Math.sin(Date.now() * 0.001 + index) * 0.05; |
||||
|
||||
// Maintain current scale while updating Y position
|
||||
room.position.y = baseY; |
||||
}); |
||||
|
||||
renderer.render(scene, camera); |
||||
}; |
||||
|
||||
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 (mountElement && renderer.domElement) { |
||||
mountElement.removeChild(renderer.domElement); |
||||
} |
||||
renderer.dispose(); |
||||
}; |
||||
}, []); |
||||
|
||||
// Update dividers when showDividers state changes
|
||||
useEffect(() => { |
||||
if (mountRef.current?.toggleDividers) { |
||||
mountRef.current.toggleDividers(showDividers); |
||||
} |
||||
} else { |
||||
setHoveredRoom(null); |
||||
} |
||||
}; |
||||
|
||||
// Add mouse event listener
|
||||
renderer.domElement.addEventListener("mousemove", onMouseMove); |
||||
|
||||
// Animation loop
|
||||
const animate = () => { |
||||
requestAnimationFrame(animate); |
||||
|
||||
// Gentle floating animation for rooms
|
||||
rooms.forEach((room, index) => { |
||||
const originalY = 0.25; // height / 2 for the room height of 0.5
|
||||
const baseY = originalY + Math.sin(Date.now() * 0.001 + index) * 0.05; |
||||
|
||||
// Maintain current scale while updating Y position
|
||||
room.position.y = baseY; |
||||
}); |
||||
|
||||
renderer.render(scene, camera); |
||||
}; |
||||
|
||||
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 (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-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> |
||||
<div className="mb-6"> |
||||
<h2 className="text-2xl text-[#2A2C3F] dark:text-[#EEE5E5] mb-3"> |
||||
Tudengimaja |
||||
</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]"> |
||||
}, [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`} |
||||
> |
||||
Messiala |
||||
</h1> |
||||
<div className="mb-6"> |
||||
<h2 className="text-2xl text-[#2A2C3F] dark:text-[#EEE5E5] mb-3"> |
||||
Tudengimaja |
||||
</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" }} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
</div> |
||||
<div className="items-center gap-2 hidden"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{backgroundColor: "#4ecdc4"}} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
Baariala |
||||
</span> |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{ backgroundColor: "#ffe66d" }} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{backgroundColor: "#ffe66d"}} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
EVAL |
||||
</span> |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{ backgroundColor: "#e74c3c" }} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{backgroundColor: "#e74c3c"}} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
Redbull |
||||
</span> |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{ backgroundColor: "#9b59b6" }} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{backgroundColor: "#9b59b6"}} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
Võitlusmängu ala |
||||
</span> |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{ backgroundColor: "#3498db" }} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{backgroundColor: "#3498db"}} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
Sony |
||||
</span> |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{ backgroundColor: "#2ecc71" }} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{backgroundColor: "#2ecc71"}} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
Chillimisala |
||||
</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] 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 */} |
||||
{hoveredRoom && ( |
||||
<div |
||||
className="fixed bg-black bg-opacity-80 text-white px-3 py-2 rounded-lg text-sm pointer-events-none z-50" |
||||
style={{ |
||||
left: mousePosition.x + 10, |
||||
top: mousePosition.y - 10, |
||||
}} |
||||
> |
||||
{hoveredRoom} |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
|
||||
<SectionDivider /> |
||||
</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] 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 */} |
||||
{hoveredRoom && ( |
||||
<div |
||||
className="fixed bg-black bg-opacity-80 text-white px-3 py-2 rounded-lg text-sm pointer-events-none z-50" |
||||
style={{ |
||||
left: mousePosition.x + 10, |
||||
top: mousePosition.y - 10, |
||||
}} |
||||
> |
||||
{hoveredRoom} |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
); |
||||
); |
||||
} |
||||
|
||||
@ -1,96 +1,105 @@ |
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
||||
import {vipnagorgialla} from "@/components/Vipnagorgialla"; |
||||
import Link from "next/link"; |
||||
import SectionDivider from "@/components/SectionDivider"; |
||||
|
||||
export default function Tickets() { |
||||
return ( |
||||
<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`} |
||||
> |
||||
PILETID JA REGIS­TREERIMINE |
||||
</h1> |
||||
<div className="flex justify-center lg:items-center flex-col lg:flex-row gap-8 md:gap-12 flex-grow mb-16 md:mt-8 lg:mt-0"> |
||||
<div className="bg-[#007CAB] -skew-x-2 md:-skew-x-5 text-white px-8 md:px-12 py-16 hover:scale-103 transition-all duration-150 w-full md:w-xl lg:w-[400px]"> |
||||
<h2 |
||||
className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`} |
||||
> |
||||
8€ |
||||
</h2> |
||||
<h3 |
||||
className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`} |
||||
> |
||||
Arvutiga osaleja |
||||
</h3> |
||||
<ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]"> |
||||
<li className="text-xl italic"> |
||||
Isiklik laud, voolu- ja internetiühendus |
||||
</li> |
||||
<li className="text-xl">Ligipääs demoalale</li> |
||||
<li className="text-xl">Turniiride pealt vaatamine</li> |
||||
<li className="text-xl">Võimalus osaleda miniturniiridel</li> |
||||
</ul> |
||||
<Link href="https://fienta.com/et/tipilan" target="_blank"> |
||||
<button |
||||
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`} |
||||
> |
||||
OSTA PILET |
||||
</button> |
||||
</Link> |
||||
</div> |
||||
<div className="bg-[#1F5673] -skew-x-2 md:-skew-x-5 text-white px-8 md:px-12 py-16 hover:scale-103 transition-all duration-150 w-full md:w-xl lg:w-[400px]"> |
||||
<h2 |
||||
className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`} |
||||
> |
||||
12-15€ |
||||
</h2> |
||||
<h3 |
||||
className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`} |
||||
> |
||||
Võistleja |
||||
</h3> |
||||
<ul className="pl-4 mb-8 list-[square] marker:text-[#007CAB]"> |
||||
<li className="text-xl">Võimalus osaleda CS2 või LoL turniiril</li> |
||||
<li className="text-xl"> |
||||
Isiklik laud, voolu- ja internetiühendus |
||||
</li> |
||||
<li className="text-xl">Ligipääs demoalale</li> |
||||
<li className="text-xl">Turniiride pealt vaatamine</li> |
||||
<li className="text-xl">Võimalus osaleda miniturniiridel</li> |
||||
</ul> |
||||
<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> |
||||
</div> |
||||
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`} |
||||
> |
||||
PILETID JA REGIS­TREERIMINE |
||||
</h1> |
||||
<div |
||||
className="flex justify-center lg:items-center flex-col lg:flex-row gap-8 md:gap-12 flex-grow mb-16 md:mt-8 lg:mt-0"> |
||||
<div |
||||
className="bg-[#007CAB] -skew-x-2 md:-skew-x-5 text-white px-8 md:px-12 py-16 hover:scale-103 transition-all duration-150 w-full md:w-xl lg:w-[400px]"> |
||||
<h2 |
||||
className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`} |
||||
> |
||||
8€ |
||||
</h2> |
||||
<h3 |
||||
className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`} |
||||
> |
||||
Arvutiga osaleja |
||||
</h3> |
||||
<ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]"> |
||||
<li className="text-xl italic"> |
||||
Isiklik laud, voolu- ja internetiühendus |
||||
</li> |
||||
<li className="text-xl">Ligipääs demoalale</li> |
||||
<li className="text-xl">Turniiride pealt vaatamine</li> |
||||
<li className="text-xl">Võimalus osaleda miniturniiridel</li> |
||||
</ul> |
||||
<Link href="https://fienta.com/et/tipilan" target="_blank"> |
||||
<button |
||||
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`} |
||||
> |
||||
OSTA PILET |
||||
</button> |
||||
</Link> |
||||
</div> |
||||
<div |
||||
className="bg-[#1F5673] -skew-x-2 md:-skew-x-5 text-white px-8 md:px-12 py-16 hover:scale-103 transition-all duration-150 w-full md:w-xl lg:w-[400px]"> |
||||
<h2 |
||||
className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`} |
||||
> |
||||
12-15€ |
||||
</h2> |
||||
<h3 |
||||
className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`} |
||||
> |
||||
Võistleja |
||||
</h3> |
||||
<ul className="pl-4 mb-8 list-[square] marker:text-[#007CAB]"> |
||||
<li className="text-xl">Võimalus osaleda CS2 või LoL turniiril</li> |
||||
<li className="text-xl"> |
||||
Isiklik laud, voolu- ja internetiühendus |
||||
</li> |
||||
<li className="text-xl">Ligipääs demoalale</li> |
||||
<li className="text-xl">Turniiride pealt vaatamine</li> |
||||
<li className="text-xl">Võimalus osaleda miniturniiridel</li> |
||||
</ul> |
||||
<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> |
||||
</div> |
||||
|
||||
<div className="bg-[#007CAB] -skew-x-2 md:-skew-x-5 text-white px-8 md:px-12 py-16 hover:scale-103 transition-all duration-150 w-full md:w-xl lg:w-[400px]"> |
||||
<h2 |
||||
className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`} |
||||
> |
||||
6€ |
||||
</h2> |
||||
<h3 |
||||
className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`} |
||||
> |
||||
Külastaja |
||||
</h3> |
||||
<ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]"> |
||||
<li className="text-xl">Ligipääs demoalale</li> |
||||
<li className="text-xl">Turniiride pealt vaatamine</li> |
||||
<li className="text-xl">Võimalus osaleda miniturniiridel</li> |
||||
</ul> |
||||
<Link href="https://fienta.com/et/tipilan" target="_blank"> |
||||
<button |
||||
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`} |
||||
> |
||||
OSTA PILET |
||||
</button> |
||||
</Link> |
||||
<div |
||||
className="bg-[#007CAB] -skew-x-2 md:-skew-x-5 text-white px-8 md:px-12 py-16 hover:scale-103 transition-all duration-150 w-full md:w-xl lg:w-[400px]"> |
||||
<h2 |
||||
className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`} |
||||
> |
||||
6€ |
||||
</h2> |
||||
<h3 |
||||
className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`} |
||||
> |
||||
Külastaja |
||||
</h3> |
||||
<ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]"> |
||||
<li className="text-xl">Ligipääs demoalale</li> |
||||
<li className="text-xl">Turniiride pealt vaatamine</li> |
||||
<li className="text-xl">Võimalus osaleda miniturniiridel</li> |
||||
</ul> |
||||
<Link href="https://fienta.com/et/tipilan" target="_blank"> |
||||
<button |
||||
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`} |
||||
> |
||||
OSTA PILET |
||||
</button> |
||||
</Link> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<SectionDivider /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
); |
||||
} |
||||
|
||||
@ -1,44 +1,49 @@ |
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
||||
import {vipnagorgialla} from "@/components/Vipnagorgialla"; |
||||
import path from "node:path"; |
||||
import fs from "node:fs/promises"; |
||||
import ReactMarkdown from "react-markdown"; |
||||
import SectionDivider from "@/components/SectionDivider"; |
||||
|
||||
type Props = { |
||||
params: Promise<{ slug: string }>; |
||||
params: Promise<{ slug: string }>; |
||||
}; |
||||
|
||||
export default async function RulePage({ params }: Props) { |
||||
const { slug } = await params; |
||||
|
||||
const filePath = path.join(process.cwd(), "src/data/rules", `${slug}.md`); |
||||
let file: string; |
||||
|
||||
try { |
||||
file = await fs.readFile(filePath, "utf8"); |
||||
} catch { |
||||
file = `# ${slug.toUpperCase()} REEGLID\n\nSisu hetkel puudub.`; |
||||
} |
||||
|
||||
const data = { title: undefined as string | undefined }; |
||||
|
||||
return ( |
||||
<> |
||||
<h1 |
||||
className={`not-prose ${vipnagorgialla.className} font-bold italic uppercase text-[64px] leading-[96px] tracking-[-0.02em] text-[#2A2C3F] dark:text-[#EEE5E5] mx-auto mt-16 mb-6 px-8`} |
||||
> |
||||
{data.title || `${slug.toUpperCase()} REEGLID`} |
||||
</h1> |
||||
|
||||
<div |
||||
className={`mx-auto px-8 font-worksans
|
||||
[&_ol]:ml-6 |
||||
[&_ol_ol]:ml-10 |
||||
[&_ol_ol_ol]:ml-14 |
||||
[&_h2]:font-bold |
||||
`}
|
||||
> |
||||
<ReactMarkdown>{file}</ReactMarkdown> |
||||
</div> |
||||
</> |
||||
); |
||||
export default async function RulePage({params}: Props) { |
||||
const {slug} = await params; |
||||
|
||||
const filePath = path.join(process.cwd(), "src/data/rules", `${slug}.md`); |
||||
let file: string; |
||||
|
||||
try { |
||||
file = await fs.readFile(filePath, "utf8"); |
||||
} catch { |
||||
file = `# ${slug.toUpperCase()} REEGLID\n\nSisu hetkel puudub.`; |
||||
} |
||||
|
||||
const data = {title: undefined as string | undefined}; |
||||
|
||||
return ( |
||||
<> |
||||
<div className="mb-16"> |
||||
<h1 |
||||
className={`not-prose ${vipnagorgialla.className} font-bold italic uppercase text-[64px] leading-[96px] tracking-[-0.02em] text-[#2A2C3F] dark:text-[#EEE5E5] mx-auto mt-16 mb-6 px-8`} |
||||
> |
||||
{data.title || `${slug.toUpperCase()} REEGLID`} |
||||
</h1> |
||||
|
||||
<div |
||||
className={`mx-auto px-8 font-worksans
|
||||
[&_ol]:ml-6 |
||||
[&_ol_ol]:ml-10 |
||||
[&_ol_ol_ol]:ml-14 |
||||
[&_h2]:font-bold |
||||
`}
|
||||
> |
||||
<ReactMarkdown>{file}</ReactMarkdown> |
||||
</div> |
||||
</div> |
||||
|
||||
<SectionDivider/> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
@ -0,0 +1,64 @@ |
||||
import {vipnagorgialla} from "@/components/Vipnagorgialla"; |
||||
import Link from "next/link"; |
||||
import SectionDivider from "@/components/SectionDivider"; |
||||
|
||||
export default function RulesMenu() { |
||||
const headingStyle = `text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5]`; |
||||
|
||||
const boxStyle = `-skew-x-2 md:-skew-x-5 text-white md:px-12 hover:scale-103 transition-all duration-150 w-full md:w-xl lg:w-[400px]`; |
||||
|
||||
const boxTextStyle = `text-3xl ${vipnagorgialla.className} font-bold uppercase text-[#EEE5E5] pb-2`; |
||||
|
||||
// const SectionDivider = () => <div className="border-b-[3px] border-[#1F5673] w-full"/>;
|
||||
|
||||
return ( |
||||
<div> |
||||
<div className="flex flex-col md:m-16"> |
||||
<h1 className={`${headingStyle} mt-8 md:mt-16`}> |
||||
REEGLID |
||||
</h1> |
||||
|
||||
<div className='flex flex-wrap flex-row lg:mt-16 justify-center lg:items-start gap-12 flex-grow mb-8'> |
||||
<Link href="/kodukord"> |
||||
<div className={`${boxStyle} bg-[#007CAB] py-20`}> |
||||
<h2 className={`${boxTextStyle}`}> |
||||
Kodukord |
||||
</h2> |
||||
</div> |
||||
</Link> |
||||
|
||||
<Link href="/reeglid/cs2"> |
||||
<div className={`${boxStyle} bg-[#1F5673] py-20`}> |
||||
<h2 className={`${boxTextStyle}`}> |
||||
CS2 reeglid |
||||
</h2> |
||||
</div> |
||||
</Link> |
||||
|
||||
|
||||
<Link href="reeglid/lol"> |
||||
<div className={`${boxStyle} bg-[#007CAB] py-20`}> |
||||
<h2 className={`${boxTextStyle}`}> |
||||
LoL reeglid |
||||
</h2> |
||||
</div> |
||||
</Link> |
||||
|
||||
{/* Minitourn. link coming soon*/} |
||||
{/*<Link href="">*/}
|
||||
<div |
||||
className={`${boxStyle} bg-[#1F5673] py-16`}> |
||||
<h2 className={`${boxTextStyle}`}> |
||||
Miniturniiride reeglid |
||||
</h2> |
||||
</div> |
||||
{/*</Link>*/} |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<SectionDivider /> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
import React from 'react'; |
||||
|
||||
export default function SectionDivider() { |
||||
return ( |
||||
<hr className="border-t-[3px] border-[#1F5673]" /> |
||||
); |
||||
}; |
||||
@ -0,0 +1,30 @@ |
||||
Üritusel osalemise kodukord kehtib kõigile, nii külastajatele kui võistlejatele. Kodukorra rikkumisel jätab TipiLAN endale õiguse osaleja ürituselt eemaldada ning vajadusel teavitada politseid. Alaealise osaleja puhul teavitame raskema kodukorra eiramise puhul tema vanemaid või eestkostjaid. |
||||
|
||||
# Osaleja meelespea |
||||
|
||||
1. Tulles vaheta oma pilet käepaela vastu. |
||||
2. Osaleja peab olema vähemalt 16-aastane. Pileti kontrollija võib küsida Sinult dokumenti. |
||||
3. Üritust pildistatakse ning filmitakse ja ürituse sisu kajastatakse erinevates meediakanalites. |
||||
4. Kui Sul on ette nähtud TipiLANi poolne majutus, anna sellest teada pileti käepaela vastu vahetamisel. |
||||
5. Kui tuled oma arvutiga, juhendatakse Sind käepaela saades, kuhu saad selle üles panna. |
||||
|
||||
# Ürituse kodukord |
||||
|
||||
1. Osaleja kohustub käituma viisakalt ning väärikalt ja austama teisi üritusel osalejaid. |
||||
2. TipiLAN ei tolereeri: |
||||
2.1. Vihakõnet rahvusliku, rassilise, soolise, seksuaalse või religioosse kuuluvuse, puude, välimuse või vanuse kohta; ahistamist, ähvardavat, solvavat või agressiivset käitumist, sellele õhutamist või selle pooldamist |
||||
2.2. See kehtib nii ürituse alal (IRL) kui ka üritusega seotud online-keskkondades. |
||||
3. Osaleja kohustub käituma ürituse hoone, inventari ja sisustuse suhtes heaperemehelikult. Keelatud on lõhkuda, määrida või viia mujale esemeid, mis ei kuulu osalejale. |
||||
3.1. Kui osalejal on ette nähtud korraldajapoolne majutus, siis majutusalal on osalejal kohustus olla vaikselt ning lubada kaaslastel puhata. |
||||
3.2. Majutusalale ei või kaasa kutsuda isikuid, kellel ei ole seal majutust ette nähtud. |
||||
4. TipiLAN ei vastuta osaleja isikliku vara eest. |
||||
4.1. Korraldajapoolne majutusala on lukustatav ning kõrvalisi isikuid sinna ei lubata, kuid sellest sõltumata tasub oma väärisesemetel silma peal hoida. |
||||
4.2. Kui on tekkinud kahtlus, et on toimunud vargus, tuleb sellest koheselt teavitada korraldajat. |
||||
4.3. Kaotatud asjade leidmisel palume anda need korraldajale või viia need *lost & found’i* (Merchilauda). |
||||
5. Ürituse alal on keelatud suitsetada ning kasutada vape’i. Selleks on õues ette nähtud suitsetamise kohad. |
||||
6. Üritusele ei tohi kaasa võtta illegaalseid aineid või ravimeid, terariistu, tulirelvi, lõhke- või süüteained ning muid esemeid, mis võivad osalejatele või teistele viga teha. |
||||
7. Alaealisel osalejal on keelatud tarbida alkoholi või kasutada nikotiini sisaldavaid tooteid. |
||||
7.1. Olles baarist alkoholi ostmas, on osalejal baaritöötaja nõudmisel kohustus näidata isikuttõendavat dokumenti. |
||||
8. Osaleja kohustub käituma alkoholi suhtes vastutustundlikult. |
||||
9. Keelatud on igasugune hasartmäng nii raha kui muude hüvede peale. |
||||
|
||||
Loading…
Reference in new issue