Big refactor of messiala code, updated all areas

pull/96/head
v4ltages 2 months ago
parent 42bdc62ecc
commit 4e2ce78865
No known key found for this signature in database
GPG Key ID: DC7BC38E0DC642B
  1. 381
      src/app/[locale]/messiala/page.tsx
  2. 218
      src/data/roomNames.ts
  3. 21
      translations/en.json
  4. 17
      translations/et.json

@ -7,6 +7,12 @@ import { useEffect, useRef, useState, useMemo } from "react";
import { EyeClosed, Eye } from "lucide-react";
import SectionDivider from "@/components/SectionDivider";
import { useTranslations } from "next-intl";
import {
roomNameKeys,
staticRoomNames,
roomMeta,
RoomNameKey,
} from "@/data/roomNames";
// Define interface for the ref with toggle function
interface MountRefCurrent extends HTMLDivElement {
@ -25,27 +31,19 @@ export default function Expo() {
const currentViewRef = useRef<"tudengimaja" | "fuajee">("fuajee");
const t = useTranslations();
// Define room names with translations
const roomNames = useMemo(
() => ({
boardGames: t("expo.areas.boardGames"),
bar: t("expo.areas.bar"),
eval: "EVAL",
simRacing: t("expo.areas.simRacing"),
fighting: t("expo.areas.fighting"),
lvlup: "LVLup!",
redbull: "Red Bull",
// fuajee rooms
estoniagamedev: t("expo.areas.estoniagamedev"),
info: t("expo.areas.info"),
tartuyk: t("expo.areas.tartuyk"),
tly: t("expo.areas.tly"),
gameup: "GameUP!",
ittk: t("expo.areas.ittk"),
photobooth: t("expo.areas.photobooth"),
}),
[t],
);
// Room names using translations and staticRoomNames
const roomNames = useMemo(() => {
const names: Record<RoomNameKey, string> = {} as never;
roomNameKeys.forEach((key) => {
if (staticRoomNames[key]) {
names[key] = staticRoomNames[key]!;
} else {
// fallback to translation key or just key
names[key] = t(`expo.areas.${key}`, { default: key });
}
});
return names;
}, [t]);
useEffect(() => {
if (!mountRef.current) return;
@ -128,20 +126,7 @@ export default function Expo() {
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
// Create individual rooms as rectangles with custom positions using roomMeta
const rooms: THREE.Mesh[] = [];
const roomData: Array<{
mesh: THREE.Mesh;
@ -152,117 +137,38 @@ export default function Expo() {
}> = [];
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.boardGames,
},
{
width: 3.5,
height: 0.7,
depth: 1.2,
x: 0.7,
z: -0.3,
color: roomColors[1],
name: roomNames.bar,
},
{
width: 1.8,
height: 0.7,
depth: 1.5,
x: 1,
z: -3.5,
color: roomColors[2],
name: roomNames.eval,
},
{
width: 2,
height: 0.7,
depth: 4.5,
x: 5.2,
z: -2,
color: roomColors[3],
name: roomNames.simRacing,
},
{
width: 3,
height: 0.7,
depth: 1.5,
x: -1.7,
z: -3.5,
color: roomColors[4],
name: roomNames.fighting,
},
// {
// 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: roomNames.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: roomNames.redbull,
},
];
roomDefinitions.forEach((roomDef) => {
// Generate rooms for tudengimaja and fuajee using roomMeta
roomNameKeys.forEach((key) => {
const metas = roomMeta[key];
if (!metas) return;
metas.forEach((meta) => {
if (meta.view !== "tudengimaja") return;
const geometry = new THREE.BoxGeometry(
roomDef.width,
roomDef.height,
roomDef.depth,
meta.size.width,
meta.size.height,
meta.size.depth,
);
const material = new THREE.MeshLambertMaterial({
color: roomDef.color,
color: meta.color,
});
const room = new THREE.Mesh(geometry, material);
room.position.set(roomDef.x, roomDef.height / 2, roomDef.z);
room.position.set(meta.position.x, meta.position.y, meta.position.z);
room.castShadow = true;
room.receiveShadow = true;
room.userData = { name: roomDef.name, originalColor: roomDef.color };
room.userData = { name: roomNames[key], originalColor: meta.color };
scene.add(room);
rooms.push(room);
roomData.push({
mesh: room,
name: roomDef.name,
originalColor: roomDef.color,
name: roomNames[key],
originalColor: meta.color,
originalScale: room.scale.clone(),
view: "tudengimaja",
});
});
});
// Create toggleable room dividers
const createTogglableDivider = (
@ -274,9 +180,9 @@ export default function Expo() {
) => {
const wallGeometry = new THREE.BoxGeometry(width, height, depth);
const wallMaterial = new THREE.MeshLambertMaterial({
color: 0x555555,
transparent: true,
opacity: 0,
color: 0x2e5570,
// transparent: true,
// opacity: 0,
});
const wall = new THREE.Mesh(wallGeometry, wallMaterial);
@ -287,8 +193,10 @@ export default function Expo() {
};
// Add strategic dividers between major areas
createTogglableDivider(10, 2, 2, -2.5, 1.5); // Wall between main entrance
createTogglableDivider(2, 2, 2, 5.5, 1.5); // Wall right next to Lauamängud & Redbull Sim Racing
createTogglableDivider(2, 2, 1, -6.5, 1); // Wall behind photowall
createTogglableDivider(4, 2, 2, -3.5, 1.5); // Wall between main entrance
createTogglableDivider(2, 2, 1, -0.5, 1.5); // Wall behind bar
createTogglableDivider(2, 2, 2, 1.5, 1.5); // Wall between main entrance
// Store dividers reference for later access
dividersRef = [...dividers];
@ -305,10 +213,7 @@ export default function Expo() {
// Second ground plane
const groundGeometry2 = new THREE.PlaneGeometry(2, 7);
const groundMaterial2 = new THREE.MeshLambertMaterial({
color: 0xcccccc,
});
const ground2 = new THREE.Mesh(groundGeometry2, groundMaterial2);
const ground2 = new THREE.Mesh(groundGeometry2, groundMaterial);
ground2.rotation.x = -Math.PI / 2;
ground2.position.x = -12.2;
ground2.position.y = -5;
@ -361,121 +266,41 @@ export default function Expo() {
},
);
// Function to create example rooms for fuajee
// Function to create rooms for fuajee using roomMeta
const createfuajeeRooms = () => {
const fuajeeRoomColors = [
0x7b1642, // ITÜK - Cherry Red
0x365591, // Light Blue - Tartu Ülikool
0xa82838, // Red - Tallinna Ülikool
0x183bbf, // Dark Blue - Eesti Gamedev
0xd12e7d, // Purple - Taltech
0x228b22, // Green - GameUP
0xff6347, // Orange - Info
0x20b2aa, // Light Sea Green - Photobooth
];
const fuajeeRoomDefinitions = [
{
width: 5,
height: 0.5,
depth: 3.5,
x: -6,
z: 2.8,
color: fuajeeRoomColors[4],
name: roomNames.ittk,
},
{
width: 5,
height: 0.5,
depth: 2,
x: 2.2,
z: -1.5,
color: fuajeeRoomColors[1],
name: roomNames.tartuyk,
},
{
width: 6,
height: 0.5,
depth: 2,
x: -5.8,
z: -1.2,
color: fuajeeRoomColors[3],
name: roomNames.estoniagamedev,
},
{
width: 2,
height: 0.5,
depth: 2,
x: -1.5,
z: -1.5,
color: fuajeeRoomColors[6],
name: roomNames.info,
},
{
width: 2,
height: 0.5,
depth: 1.5,
x: 6,
z: -1.7,
color: fuajeeRoomColors[2],
name: roomNames.tly,
},
{
width: 2,
height: 0.5,
depth: 1.5,
x: 11,
z: -1.7,
color: fuajeeRoomColors[4],
name: roomNames.ittk,
},
{
width: 2,
height: 0.5,
depth: 1.5,
x: 13.5,
z: -1.7,
color: fuajeeRoomColors[7],
name: roomNames.photobooth,
},
{
width: 2,
height: 0.5,
depth: 1.5,
x: 8.5,
z: -1.7,
color: fuajeeRoomColors[5],
name: roomNames.gameup,
},
];
fuajeeRoomDefinitions.forEach((roomDef) => {
roomNameKeys.forEach((key) => {
const metas = roomMeta[key];
if (!metas) return;
metas.forEach((meta) => {
if (meta.view !== "fuajee") return;
const geometry = new THREE.BoxGeometry(
roomDef.width,
roomDef.height,
roomDef.depth,
meta.size.width,
meta.size.height,
meta.size.depth,
);
const material = new THREE.MeshLambertMaterial({
color: roomDef.color,
color: meta.color,
});
const room = new THREE.Mesh(geometry, material);
room.position.set(roomDef.x, roomDef.height / 2 + 2, roomDef.z);
room.position.set(meta.position.x, meta.position.y, meta.position.z);
room.castShadow = true;
room.receiveShadow = true;
room.userData = { name: roomDef.name, originalColor: roomDef.color };
room.userData = { name: roomNames[key], originalColor: meta.color };
room.visible = true; // Initially visible for fuajee default
scene.add(room);
fuajeeRooms.push(room);
roomData.push({
mesh: room,
name: roomDef.name,
originalColor: roomDef.color,
name: roomNames[key],
originalColor: meta.color,
originalScale: room.scale.clone(),
view: "fuajee",
});
});
});
};
// Resize handler
@ -737,6 +562,7 @@ export default function Expo() {
{currentView === "tudengimaja" && (
<div className="flex flex-wrap gap-4 pb-4">
{/* Bar */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
@ -746,15 +572,17 @@ export default function Expo() {
{t("expo.areas.bar")}
</span>
</div>
{/* EVAL */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
style={{ backgroundColor: "#ffe66d" }}
style={{ backgroundColor: "#4d86f7" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
EVAL
</span>
</div>
{/* Board Games */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
@ -764,49 +592,104 @@ export default function Expo() {
{t("expo.areas.boardGames")}
</span>
</div>
{/* LVLup */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
style={{ backgroundColor: "#080682" }}
style={{ backgroundColor: "#d34e35" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
LVLup!
</span>
</div>
{/* Red Bull */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
style={{ backgroundColor: "#C02841" }}
style={{ backgroundColor: "#c02841" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
Red Bull
</span>
</div>
{/* Sim Racing */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
style={{ backgroundColor: "#ff6600" }}
style={{ backgroundColor: "#d8b43c" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
{t("expo.areas.simRacing")}
</span>
</div>
<div className="items-center gap-2 hidden">
{/* Fighting */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
style={{ backgroundColor: "#3498db" }}
style={{ backgroundColor: "#a8f494" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
Sony
{t("expo.areas.fighting")}
</span>
</div>
{/* K-space */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
style={{ backgroundColor: "#ff1493" }}
style={{ backgroundColor: "#2c5da3" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
{t("expo.areas.fighting")}
K-space.ee
</span>
</div>
{/* Photowall */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
style={{ backgroundColor: "#d12e7d" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
{t("expo.areas.photowall")}
</span>
</div>
{/* Buckshot Roulette */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
style={{ backgroundColor: "#edb4b1" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
Buckshot Roulette
</span>
</div>
{/* Chill Area */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
style={{ backgroundColor: "#05512e" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
{t("expo.areas.chillArea")}
</span>
</div>
{/* Alzgamer */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
style={{ backgroundColor: "#d08331" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
Alzgamer
</span>
</div>
{/* WC */}
<div className="flex items-center gap-2">
<div
className="w-4 h-4 border border-gray-300"
style={{ backgroundColor: "#332b5d" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
WC
</span>
</div>
</div>
@ -856,7 +739,7 @@ export default function Expo() {
style={{ backgroundColor: "#20b2aa" }}
></div>
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
{t("expo.areas.photobooth")}
{t("expo.areas.studentformula")}
</span>
</div>
<div className="flex items-center gap-2">
@ -943,6 +826,12 @@ export default function Expo() {
roomNames.fighting,
roomNames.lvlup,
roomNames.redbull,
roomNames.kspace,
roomNames.photowall,
roomNames.buckshotroulette,
roomNames.wc,
roomNames.chillArea,
roomNames.alzgamer,
].includes(hoveredRoom)) ||
(currentView === "fuajee" &&
[
@ -951,8 +840,8 @@ export default function Expo() {
roomNames.info,
roomNames.tly,
roomNames.ittk,
roomNames.photobooth,
roomNames.gameup,
roomNames.studentformula,
].includes(hoveredRoom))) && (
<div
className="fixed bg-black bg-opacity-80 text-white px-3 py-2 rounded-lg text-sm pointer-events-none z-50"

@ -0,0 +1,218 @@
export const roomNameKeys = [
"boardGames",
"bar",
"eval",
"simRacing",
"fighting",
"lvlup",
"redbull",
"kspace",
"photowall",
"buckshotroulette",
"chillArea",
"estoniagamedev",
"info",
"tartuyk",
"tly",
"gameup",
"ittk",
"wc",
"alzgamer",
"studentformula",
] as const;
export type RoomNameKey = (typeof roomNameKeys)[number];
/**
* Static room names that do not require translation.
* Centralizing here allows easy management and expansion.
*/
export const staticRoomNames: Partial<Record<RoomNameKey, string>> = {
eval: "EVAL",
redbull: "Red Bull",
kspace: "K-space.ee",
buckshotroulette: "Buckshot Roulette",
gameup: "GameUP! Academy",
wc: "WC",
alzgamer: "Alzgamer",
};
/**
* Room metadata for tudengimaja and fuajee rooms.
* Centralizes size, position, and color for easier management.
*/
export interface RoomMeta {
color: number;
size: { width: number; height: number; depth: number };
position: { x: number; y: number; z: number };
view: "tudengimaja" | "fuajee";
}
export const roomMeta: Partial<Record<RoomNameKey, RoomMeta[]>> = {
// tudengimaja rooms
lvlup: [
{
color: 0xd34e35,
size: { width: 7, height: 0.7, depth: 2 },
position: { x: 2.8, y: 0, z: 4.75 },
view: "tudengimaja",
},
],
kspace: [
{
color: 0x2c5da3,
size: { width: 5, height: 0.7, depth: 2 },
position: { x: -3.2, y: 0, z: 4.75 },
view: "tudengimaja",
},
],
bar: [
{
color: 0x4ecdc4,
size: { width: 2, height: 0.7, depth: 0.7 },
position: { x: -0.5, y: 0, z: 1 },
view: "tudengimaja",
},
],
eval: [
{
color: 0x4d86f7,
size: { width: 2, height: 0.7, depth: 1.5 },
position: { x: 1.7, y: 0, z: -3.8 },
view: "tudengimaja",
},
],
simRacing: [
{
color: 0xd8b43c,
size: { width: 1.5, height: 0.7, depth: 5 },
position: { x: -6.8, y: 0, z: -2.2 },
view: "tudengimaja",
},
],
redbull: [
{
color: 0xc02841,
size: { width: 2, height: 0.7, depth: 1.5 },
position: { x: -3.9, y: 0, z: -3.8 },
view: "tudengimaja",
},
],
fighting: [
{
color: 0xa8f494,
size: { width: 3.5, height: 0.7, depth: 1.5 },
position: { x: -1.1, y: 0, z: -3.8 },
view: "tudengimaja",
},
],
photowall: [
{
color: 0xd12e7d,
size: { width: 2, height: 0.7, depth: 1 },
position: { x: -6.6, y: 0, z: 1.9 },
view: "tudengimaja",
},
],
buckshotroulette: [
{
color: 0xedb4b1,
size: { width: 2, height: 0.7, depth: 1.5 },
position: { x: 3.7, y: 0, z: -3.8 },
view: "tudengimaja",
},
],
chillArea: [
{
color: 0x05512e,
size: { width: 1.5, height: 0.7, depth: 5 },
position: { x: 5.5, y: 0, z: -2.1 },
view: "tudengimaja",
},
{
color: 0x05512e,
size: { width: 3.8, height: 0.7, depth: 1.5 },
position: { x: 0.4, y: 0, z: -0.2 },
view: "tudengimaja",
},
],
alzgamer: [
{
color: 0xd08331,
size: { width: 3.5, height: 0.7, depth: 1.5 },
position: { x: -3.3, y: 0, z: -0.2 },
view: "tudengimaja",
},
],
wc: [
{
color: 0x332b5d,
size: { width: 2, height: 0.7, depth: 2 },
position: { x: 5.3, y: 0, z: 1.5 },
view: "tudengimaja",
},
],
// fuajee rooms
ittk: [
{
color: 0xd12e7d,
size: { width: 4.5, height: 0.5, depth: 3 },
position: { x: -3.8, y: 0, z: 3.3 },
view: "fuajee",
},
],
tartuyk: [
{
color: 0x365591,
size: { width: 5, height: 0.5, depth: 2.5 },
position: { x: 2.7, y: 0, z: -1.7 },
view: "fuajee",
},
],
estoniagamedev: [
{
color: 0x183bbf,
size: { width: 6, height: 0.5, depth: 2.5 },
position: { x: -5.8, y: 0, z: -1.7 },
view: "fuajee",
},
{
color: 0x183bbf,
size: { width: 2, height: 0.5, depth: 5.5 },
position: { x: -7.7, y: 0, z: 2.1 },
view: "fuajee",
},
],
info: [
{
color: 0xff6347,
size: { width: 2, height: 0.5, depth: 2 },
position: { x: -1, y: 0, z: -2 },
view: "fuajee",
},
],
tly: [
{
color: 0xa82838,
size: { width: 4, height: 0.5, depth: 2 },
position: { x: 7.5, y: 0, z: -1.8 },
view: "fuajee",
},
],
gameup: [
{
color: 0x228b22,
size: { width: 2, height: 0.5, depth: 1.5 },
position: { x: 10.7, y: 0, z: -2 },
view: "fuajee",
},
],
studentformula: [
{
color: 0x20b2aa,
size: { width: 2.5, height: 0.5, depth: 1.5 },
position: { x: 13, y: 0, z: -2 },
view: "fuajee",
},
],
};

@ -64,7 +64,7 @@
"computerParticipant": {
"title": "Computer Participant",
"earlyPrice": "8€",
"latePrice":"10€",
"latePrice": "10€",
"features": [
"Personal desk, power and internet connection",
"Access to expo area",
@ -165,7 +165,7 @@
"auditorium": "Auditorium",
"studentHouse": "Student House (Tudengimaja)",
"auditoriumAndStudentHouse": "Auditorium and Student House",
"entranceHall": "Entrance Hall"
"entranceHall": "Lobby"
}
},
"stream": {
@ -193,18 +193,21 @@
"title": "Expo Area",
"description": "The TipiLAN expo area hosts companies, additional activities and lectures.",
"areas": {
"bar": "Bar Area",
"bar": "Bar",
"boardGames": "Board Games Area",
"simRacing": "Red Bull Sim Racing",
"fighting": "Fighting Games Area",
"photobooth": "Photo booth",
"simRacing": "Red Bull Rally Simulators",
"fighting": "Baltic Fighting Games League",
"ityk": "TalTech IT Faculty Student Council",
"tartuyk": "Tartu University",
"estoniagamedev": "Estonia Gamedev",
"estoniagamedev": "Estonian game developers",
"info": "Information booth",
"tly": "Tallinn University",
"ittk": "TalTech School of Information Technologies",
"gameup": "GameUP!"
"ittk": "TalTech School of IT",
"gameup": "GameUP!",
"photowall": "Photo wall",
"lvlup": "LVLup! video game museum",
"studentformula": "Student Formula",
"chillArea": "Chill area"
},
"hide": "Hide walls",
"show": "Show walls"

@ -64,7 +64,7 @@
"computerParticipant": {
"title": "Arvutiga osaleja",
"earlyPrice": "8€",
"latePrice":"10€",
"latePrice": "10€",
"features": [
"Isiklik laud, voolu- ja internetiühendus",
"Ligipääs messialale",
@ -194,18 +194,21 @@
"title": "Messiala",
"description": "TipiLANi messialal paiknevad ettevõtted, lisategevused ja toimuvad loengud.",
"areas": {
"bar": "Baariala",
"bar": "Baar",
"boardGames": "Lauamängude ala",
"simRacing": "Red Bull Sim Racing",
"fighting": "Võitlusmängu ala",
"photobooth": "Fotoboks",
"simRacing": "Red Bull rallisimulaatorid",
"fighting": "Balti Võitlusmängude Liiga",
"ityk": "IT-teaduskonna üliõpilaskogu",
"tartuyk": "Tartu Ülikool",
"estoniagamedev": "Eesti Gamedev",
"estoniagamedev": "Eesti mänguarendajad",
"info": "Infoboks",
"tly": "Tallinna Ülikool",
"ittk": "TalTech IT-Teaduskond",
"gameup": "GameUP!"
"gameup": "GameUP!",
"photowall": "Fotosein",
"lvlup": "LVLup! videomängude muuseum",
"studentformula": "Tudengivormel",
"chillArea": "Chill-ala"
},
"hide": "Peida seinad",
"show": "Näita seinu"

Loading…
Cancel
Save