mirror of https://github.com/Lapikud/tipilan
Merge pull request #46 from Lapikud/development
React 19 update changed the way ref works. Removed redundant packages and updated markdown to use Bunpull/56/head
Voltages
4 months ago
committed by
GitHub
commit
5b464e9f6a
10 changed files with 1081 additions and 790 deletions
@ -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://tipilan.ee https://player.twitch.tv https://embed.twitch.tv; frame-ancestors 'self' https://tipilan.ee;", |
||||
}, |
||||
{ |
||||
key: "X-Frame-Options", |
||||
value: "SAMEORIGIN", |
||||
}, |
||||
], |
||||
}, |
||||
]; |
||||
}, |
||||
}; |
||||
|
||||
export default nextConfig; |
||||
|
||||
@ -1,55 +1,56 @@ |
||||
// 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 ReactMarkdown, { Components } from "react-markdown"; |
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
||||
import SectionDivider from "@/components/SectionDivider"; |
||||
|
||||
export const runtime = "nodejs"; // ensure fs is available (not Edge)
|
||||
export const dynamic = "force-static"; // read at build time
|
||||
export default async function Page() { |
||||
const file = Bun.file("src/data/kodukord.md"); |
||||
const content = await file.text(); |
||||
|
||||
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> |
||||
|
||||
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 className="prose prose-lg dark:prose-invert max-w-none"> |
||||
<ReactMarkdown |
||||
components={ |
||||
{ |
||||
h1: (props) => ( |
||||
<h1 className="text-3xl md:text-4xl font-bold my-4"> |
||||
{props.children} |
||||
</h1> |
||||
), |
||||
h2: (props) => ( |
||||
<h2 className="text-2xl md:text-3xl font-semibold my-3"> |
||||
{props.children} |
||||
</h2> |
||||
), |
||||
ol: (props) => ( |
||||
<ol className="list-decimal ml-6 md:text-xl"> |
||||
{props.children} |
||||
</ol> |
||||
), |
||||
ul: (props) => ( |
||||
<ul className="list-disc ml-6 md:text-xl"> |
||||
{props.children} |
||||
</ul> |
||||
), |
||||
p: (props) => <p className="md:text-xl">{props.children}</p>, |
||||
} as Components |
||||
} |
||||
> |
||||
{content} |
||||
</ReactMarkdown> |
||||
</div> |
||||
); |
||||
</div> |
||||
|
||||
<SectionDivider /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
@ -1,485 +1,499 @@ |
||||
"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 SectionDivider from "@/components/SectionDivider"; |
||||
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; |
||||
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, |
||||
); |
||||
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, |
||||
); |
||||
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); |
||||
// 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 = [ |
||||
0x343434, // Gray - Lauamängude ala
|
||||
0x4ecdc4, // Turquoise - Baariala
|
||||
0xffe66d, // Yellow - EVAL
|
||||
0xff6600, // Orange - Redbull Sim Racing
|
||||
0xff1493, // Deep Pink - Võitlusmängu ala
|
||||
0x3498db, // Blue - Sony
|
||||
0x2ecc71, // Green - Lava
|
||||
0x080682, // Dark Blue - LVLup!
|
||||
0xc02841, // Red - RedBull
|
||||
]; |
||||
|
||||
// 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: "Lauamängude ala", |
||||
}, |
||||
{ |
||||
width: 3.5, |
||||
height: 0.7, |
||||
depth: 1.2, |
||||
x: 0.7, |
||||
z: -0.3, |
||||
color: roomColors[1], |
||||
name: "Baariala", |
||||
}, |
||||
{ |
||||
width: 1.8, |
||||
height: 0.7, |
||||
depth: 1.5, |
||||
x: 1, |
||||
z: -3.5, |
||||
color: roomColors[2], |
||||
name: "EVAL", |
||||
}, |
||||
{ |
||||
width: 2, |
||||
height: 0.7, |
||||
depth: 4.5, |
||||
x: 5.2, |
||||
z: -2, |
||||
color: roomColors[3], |
||||
name: "Red Bull Sim Racing", |
||||
}, |
||||
{ |
||||
width: 3, |
||||
height: 0.7, |
||||
depth: 1.5, |
||||
x: -1.7, |
||||
z: -3.5, |
||||
color: roomColors[4], |
||||
name: "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: 3, |
||||
z: -3.5, |
||||
color: roomColors[8], |
||||
name: "Red Bull", |
||||
}, |
||||
]; |
||||
|
||||
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 Lauamängud & Redbull Sim Racing
|
||||
|
||||
// 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); |
||||
} |
||||
}, [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]"> |
||||
} 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: "#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]"> |
||||
Redbull |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{ backgroundColor: "#343434" }} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
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"}} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
Võitlusmängu ala |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{ backgroundColor: "#080682" }} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
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: "#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: "#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" }} |
||||
></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]"> |
||||
Chillimisala |
||||
</div> |
||||
<div className="flex items-center gap-2"> |
||||
<div |
||||
className="w-4 h-4 border border-gray-300" |
||||
style={{ backgroundColor: "#ff1493" }} |
||||
></div> |
||||
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
Võitlusmängu ala |
||||
</span> |
||||
</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> |
||||
); |
||||
<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,49 +1,103 @@ |
||||
import {vipnagorgialla} from "@/components/Vipnagorgialla"; |
||||
import path from "node:path"; |
||||
import fs from "node:fs/promises"; |
||||
import ReactMarkdown from "react-markdown"; |
||||
import { notFound } from "next/navigation"; |
||||
import ReactMarkdown, { Components } from "react-markdown"; |
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
||||
import SectionDivider from "@/components/SectionDivider"; |
||||
|
||||
type Props = { |
||||
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 ( |
||||
<> |
||||
<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/> |
||||
</> |
||||
); |
||||
// Map of valid slugs to their corresponding file paths and titles
|
||||
const rulesMap = { |
||||
lol: { |
||||
filePath: "src/data/rules/lol.md", |
||||
title: "LOL Reeglid", |
||||
}, |
||||
cs2: { |
||||
filePath: "src/data/rules/cs2.md", |
||||
title: "CS2 Reeglid", |
||||
}, |
||||
} as const; |
||||
|
||||
type RuleSlug = keyof typeof rulesMap; |
||||
|
||||
interface PageProps { |
||||
params: Promise<{ slug: string }>; |
||||
} |
||||
|
||||
async function getRuleContent(slug: string) { |
||||
if (!Object.keys(rulesMap).includes(slug)) { |
||||
return null; |
||||
} |
||||
|
||||
const ruleConfig = rulesMap[slug as RuleSlug]; |
||||
|
||||
try { |
||||
const file = Bun.file(ruleConfig.filePath); |
||||
const content = await file.text(); |
||||
return { |
||||
content, |
||||
title: ruleConfig.title, |
||||
}; |
||||
} catch (error) { |
||||
console.error(`Error reading rule file for slug ${slug}:`, error); |
||||
return null; |
||||
} |
||||
} |
||||
|
||||
export default async function RulePage({ params }: PageProps) { |
||||
const { slug } = await params; |
||||
const ruleData = await getRuleContent(slug); |
||||
|
||||
if (!ruleData) { |
||||
notFound(); |
||||
} |
||||
|
||||
const headingStyle = `text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold uppercase italic text-[#2A2C3F] dark:text-[#EEE5E5]`; |
||||
|
||||
return ( |
||||
<div> |
||||
<div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16"> |
||||
<h1 className={`${headingStyle} mt-8 md:mt-16 mb-4`}> |
||||
{ruleData.title} |
||||
</h1> |
||||
|
||||
<div className="prose prose-lg dark:prose-invert max-w-none"> |
||||
<ReactMarkdown |
||||
components={ |
||||
{ |
||||
h1: (props) => ( |
||||
<h1 className="text-3xl md:text-4xl font-bold my-4"> |
||||
{props.children} |
||||
</h1> |
||||
), |
||||
h2: (props) => ( |
||||
<h2 className="text-2xl md:text-3xl font-semibold my-3"> |
||||
{props.children} |
||||
</h2> |
||||
), |
||||
ol: (props) => ( |
||||
<ol className="list-none ml-6 md:text-xl"> |
||||
{props.children} |
||||
</ol> |
||||
), |
||||
ul: (props) => ( |
||||
<ul className="list-disc ml-6 md:text-xl"> |
||||
{props.children} |
||||
</ul> |
||||
), |
||||
p: (props) => <p className="md:text-xl">{props.children}</p>, |
||||
} as Components |
||||
} |
||||
> |
||||
{ruleData.content} |
||||
</ReactMarkdown> |
||||
</div> |
||||
</div> |
||||
|
||||
<SectionDivider /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export async function generateStaticParams() { |
||||
return Object.keys(rulesMap).map((slug) => ({ |
||||
slug, |
||||
})); |
||||
} |
||||
|
||||
@ -1,64 +1,52 @@ |
||||
import {vipnagorgialla} from "@/components/Vipnagorgialla"; |
||||
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 headingStyle = `text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] uppercase`; |
||||
|
||||
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 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 boxTextStyle = `text-3xl ${vipnagorgialla.className} font-bold uppercase text-[#EEE5E5] pb-2`; |
||||
|
||||
// const SectionDivider = () => <div className="border-b-[3px] border-[#1F5673] w-full"/>;
|
||||
// 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> |
||||
return ( |
||||
<div> |
||||
<div className="flex flex-col md:m-16"> |
||||
<h1 className={`${headingStyle} ml-3 mt-24 md:ml-0 md:mt-16 mb-4 px-4`}> |
||||
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 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 px-8`}> |
||||
<h2 className={`${boxTextStyle}`}>Kodukord</h2> |
||||
</div> |
||||
</Link> |
||||
|
||||
<SectionDivider /> |
||||
<Link href="/reeglid/cs2"> |
||||
<div className={`${boxStyle} bg-[#1F5673] py-20 px-8`}> |
||||
<h2 className={`${boxTextStyle}`}>CS2 reeglid</h2> |
||||
</div> |
||||
</Link> |
||||
|
||||
<Link href="reeglid/lol"> |
||||
<div className={`${boxStyle} bg-[#007CAB] py-20 px-8`}> |
||||
<h2 className={`${boxTextStyle}`}>LoL reeglid</h2> |
||||
</div> |
||||
</Link> |
||||
|
||||
{/* Minitourn. link coming soon*/} |
||||
{/*<Link href="">*/} |
||||
<div className={`${boxStyle} bg-[#1F5673] py-16 px-8`}> |
||||
<h2 className={`${boxTextStyle}`}>Miniturniiride reeglid</h2> |
||||
</div> |
||||
{/*</Link>*/} |
||||
</div> |
||||
); |
||||
</div> |
||||
|
||||
<SectionDivider /> |
||||
</div> |
||||
); |
||||
} |
||||
@ -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=tipilan_ee&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­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> |
||||
); |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
## Tulekul |
||||
|
||||
CS2 turniiri reeglid on hetkel ettevalmistamisel ja avaldatakse peagi. |
||||
|
||||
Jälgige meie discordi! |
||||
Loading…
Reference in new issue