Skip to content

Commit ff65852

Browse files
devatmanpal17devatmanpal17
committed
Merge upstream main and preserve reduced judge headings
2 parents a124af4 + 0dd3032 commit ff65852

3 files changed

Lines changed: 80 additions & 57 deletions

File tree

‎components/PokedexJudgeMobile.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import React from "react";
3+
import React, { useState } from "react";
44
import Image from "next/image";
55

66
// SINGLE JUDGE DATA
@@ -10,7 +10,8 @@ const SINGLE_JUDGE = {
1010
};
1111

1212
const PokedexJudgeMobile: React.FC = () => {
13-
const currentJudge = SINGLE_JUDGE;
13+
// Initialize state directly with default value (no useEffect required)
14+
const [currentJudge] = useState<typeof SINGLE_JUDGE | null>(SINGLE_JUDGE);
1415

1516
return (
1617
<div
@@ -95,6 +96,6 @@ const PokedexJudgeMobile: React.FC = () => {
9596
</div>
9697
</div>
9798
);
98-
};
99+
}; //fix PR
99100

100101
export default PokedexJudgeMobile;

‎components/judges.tsx‎

Lines changed: 70 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,17 @@ import PokedexJudgeMobile from "./PokedexJudgeMobile";
77
interface JudgeInfo {
88
name: string;
99
image: string;
10+
line1: string;
11+
line2: string;
12+
line3: string;
1013
}
1114

1215
const SINGLE_JUDGE: JudgeInfo = {
1316
name: "Palak Awasthi",
1417
image: "/judges/judge1.jpg",
18+
line1: "Software Developer 2 @ PayPal",
19+
line2: "Google Women Techmakers Ambassador",
20+
line3: "Top 100 Influential Voice in AI",
1521
};
1622

1723
export default function PokedexJudge() {
@@ -27,7 +33,6 @@ export default function PokedexJudge() {
2733
);
2834
const cardRef = useRef<HTMLDivElement>(null);
2935

30-
// 1. Screen size detector: true ONLY for small mobile devices (<640px)
3136
useEffect(() => {
3237
const checkMobile = () => {
3338
setIsMobile(window.innerWidth < 640);
@@ -75,12 +80,10 @@ export default function PokedexJudge() {
7580
);
7681
};
7782

78-
// 2. Render mobile view if under 640px viewport width
7983
if (isMobile) {
8084
return <PokedexJudgeMobile />;
8185
}
8286

83-
// 3. Render desktop and iPad/Tablet layout for screen sizes >= 640px
8487
return (
8588
<div
8689
className="relative w-full min-h-screen flex flex-col items-center justify-start p-2 sm:p-4 select-none overflow-y-auto overflow-x-hidden portrait-section-container"
@@ -94,10 +97,10 @@ export default function PokedexJudge() {
9497
<div className="absolute inset-0 bg-black/15 pointer-events-none" />
9598

9699
{/* Outer Content Container */}
97-
<div className="relative z-10 flex flex-col items-center w-full max-w-5xl h-full pt-1 md:pt-2 pb-8 portrait-inner-wrapper">
100+
<div className="relative z-10 flex flex-col items-center w-full max-w-4xl h-full pt-1 md:pt-2 pb-8 portrait-inner-wrapper">
98101

99102
{/* HEADER */}
100-
<div className="mb-4 z-20 portrait-header-box">
103+
<div className="mb-2 z-20 portrait-header-box">
101104
<h1
102105
className="text-white text-[70px] leading-[80px] md:text-[111px] md:leading-none lg:text-[148px] xl:text-[185px] font-pixeboy tracking-normal drop-shadow-[0_6px_6px_rgba(0,0,0,0.8)] filter transition-all duration-300 select-none text-center portrait-header-text"
103106
style={{ fontWeight: 400 }}
@@ -107,7 +110,7 @@ export default function PokedexJudge() {
107110
</div>
108111

109112
{/* POKEDEX CARD CONTAINER */}
110-
<div className="w-full max-w-[95%] sm:max-w-xl md:max-w-none flex justify-center origin-center transition-transform duration-300 portrait-card-scaler">
113+
<div className="w-full max-w-[90%] sm:max-w-lg md:max-w-none flex justify-center origin-center transition-transform duration-300 portrait-card-scaler">
111114
<div
112115
ref={cardRef}
113116
onMouseMove={handleMouseMove}
@@ -120,45 +123,45 @@ export default function PokedexJudge() {
120123
className="flex flex-col md:flex-row items-center md:items-end justify-center w-full relative rounded-3xl gap-0"
121124
>
122125
{/* LEFT PANEL */}
123-
<div className="w-full max-w-[360px] md:max-w-[400px] min-h-[480px] sm:min-h-[510px] bg-[#D30A40] border-4 border-black rounded-2xl md:rounded-l-2xl md:rounded-r-none p-4 sm:p-5 flex flex-col justify-between relative z-10 shadow-[0_20px_45px_rgba(0,0,0,0.45)] overflow-hidden">
124-
<div className="flex items-center gap-3 z-10">
125-
<div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-[#85d7ff] via-[#31a5ee] to-[#005c9e] border-4 border-white rounded-full ring-2 ring-black shadow-inner relative flex items-center justify-center shrink-0">
126-
<div className="w-2.5 h-2.5 sm:w-3 sm:h-3 bg-white/70 rounded-full absolute top-1 left-1.5 filter blur-[0.5px]" />
126+
<div className="w-full max-w-[290px] md:max-w-[320px] min-h-[400px] sm:min-h-[430px] bg-[#D30A40] border-4 border-black rounded-2xl md:rounded-l-2xl md:rounded-r-none p-3.5 sm:p-4 flex flex-col justify-between relative z-10 shadow-[0_20px_45px_rgba(0,0,0,0.45)] overflow-hidden">
127+
<div className="flex items-center gap-2.5 z-10">
128+
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-[#85d7ff] via-[#31a5ee] to-[#005c9e] border-3 border-white rounded-full ring-2 ring-black shadow-inner relative flex items-center justify-center shrink-0">
129+
<div className="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-white/70 rounded-full absolute top-1 left-1 filter blur-[0.5px]" />
127130
</div>
128131

129132
<div className="flex gap-1.5 ml-1">
130-
<div className="w-3 h-3 bg-[#ff3b30] border border-black rounded-full shadow-[0_0_4px_#ff3b30] animate-pulse" />
131-
<div className="w-3 h-3 bg-[#ffcc00] border border-black rounded-full shadow-[0_0_4px_#ffcc00]" />
132-
<div className="w-3 h-3 bg-[#4cd964] border border-black rounded-full shadow-[0_0_4px_#4cd964]" />
133+
<div className="w-2.5 h-2.5 bg-[#ff3b30] border border-black rounded-full shadow-[0_0_4px_#ff3b30] animate-pulse" />
134+
<div className="w-2.5 h-2.5 bg-[#ffcc00] border border-black rounded-full shadow-[0_0_4px_#ffcc00]" />
135+
<div className="w-2.5 h-2.5 bg-[#4cd964] border border-black rounded-full shadow-[0_0_4px_#4cd964]" />
133136
</div>
134137
</div>
135138

136139
{/* Decorative Header Cutout */}
137140
<div
138-
className="absolute top-0 left-0 right-0 h-20 border-b-4 border-black pointer-events-none bg-transparent"
141+
className="absolute top-0 left-0 right-0 h-16 border-b-4 border-black pointer-events-none bg-transparent"
139142
style={{
140143
clipPath:
141-
"polygon(0 0, 100% 0, 100% 70px, 60% 70px, 45% 44px, 0 44px)",
144+
"polygon(0 0, 100% 0, 100% 55px, 60% 55px, 45% 36px, 0 36px)",
142145
}}
143146
/>
144147

145148
{/* SCREEN CONTAINER */}
146149
<div
147-
className="bg-black p-1 mt-4 mb-2 w-full flex flex-col items-center justify-center"
150+
className="bg-black p-1 mt-3 mb-1.5 w-full flex flex-col items-center justify-center"
148151
style={{
149152
clipPath:
150153
"polygon(0% 0%, 100% 0%, 100% 100%, 12% 100%, 0% 88%)",
151154
}}
152155
>
153156
<div
154-
className="bg-[#dedede] p-3 sm:p-4 relative shadow-inner w-full flex flex-col items-center justify-center"
157+
className="bg-[#dedede] p-2.5 sm:p-3 relative shadow-inner w-full flex flex-col items-center justify-center"
155158
style={{
156159
clipPath:
157160
"polygon(0% 0%, 100% 0%, 100% 100%, 12% 100%, 0% 88%)",
158161
}}
159162
>
160163
<div
161-
className="bg-black p-0.75 w-full"
164+
className="bg-black p-0.5 w-full"
162165
style={{
163166
clipPath:
164167
"polygon(0% 0%, 100% 0%, 100% 100%, 12% 100%, 0% 88%)",
@@ -181,7 +184,7 @@ export default function PokedexJudge() {
181184
/>
182185

183186
{showQuestionMark || !currentJudge ? (
184-
<div className="text-[#ffcc00] font-pixeboy text-8xl sm:text-9xl font-bold animate-spin-perpendicular select-none filter drop-shadow-[0_6px_10px_rgba(0,0,0,0.85)] will-change-transform">
187+
<div className="text-[#ffcc00] font-pixeboy text-6xl sm:text-7xl font-bold animate-spin-perpendicular select-none filter drop-shadow-[0_6px_10px_rgba(0,0,0,0.85)] will-change-transform">
185188
?
186189
</div>
187190
) : (
@@ -203,93 +206,107 @@ export default function PokedexJudge() {
203206
</div>
204207

205208
{/* MID PADS PANEL */}
206-
<div className="flex justify-between items-center px-1 mt-3 mb-1">
207-
<div className="w-10 h-10 sm:w-11 sm:h-11 bg-zinc-800 border-2 border-black rounded-full shadow-[0_3px_0_#000] active:translate-y-0.5 active:shadow-none transition-all cursor-pointer" />
209+
<div className="flex justify-between items-center px-1 mt-2 mb-1">
210+
<div className="w-8 h-8 sm:w-9 sm:h-9 bg-zinc-800 border-2 border-black rounded-full shadow-[0_2.5px_0_#000] active:translate-y-0.5 active:shadow-none transition-all cursor-pointer" />
208211

209-
<div className="flex gap-2">
210-
<span className="w-12 sm:w-15 h-3.5 sm:h-4 bg-[#ff3b30] border border-black rounded-full shadow-[inset_0_1px_2px_rgba(255,255,255,0.4)]" />
211-
<span className="w-12 sm:w-15 h-3.5 sm:h-4 bg-[#31a5ee] border border-black rounded-full shadow-[inset_0_1px_2px_rgba(255,255,255,0.4)]" />
212+
<div className="flex gap-1.5">
213+
<span className="w-10 sm:w-12 h-3 bg-[#ff3b30] border border-black rounded-full shadow-[inset_0_1px_2px_rgba(255,255,255,0.4)]" />
214+
<span className="w-10 sm:w-12 h-3 bg-[#31a5ee] border border-black rounded-full shadow-[inset_0_1px_2px_rgba(255,255,255,0.4)]" />
212215
</div>
213216

214-
<div className="w-8 sm:w-12 h-4" />
217+
<div className="w-6 sm:w-10 h-3" />
215218
</div>
216219

217220
{/* LOWER HARDWARE HUB */}
218221
<div className="flex items-end justify-between w-full relative px-0.5 gap-2">
219-
<div className="flex items-center bg-black rounded-md h-11 sm:h-12 p-1 overflow-hidden flex-1 relative border border-zinc-700 transform -translate-y-4 sm:-translate-y-6">
222+
<div className="flex items-center bg-black rounded-md h-9 sm:h-10 p-1 overflow-hidden flex-1 relative border border-zinc-700 transform -translate-y-3 sm:-translate-y-4">
220223
<button
221224
onClick={handleScanJudge}
222-
className="bg-[#ff9500] text-black border border-white rounded-full w-7 h-7 sm:w-8 sm:h-8 font-black text-base sm:text-lg flex items-center justify-center cursor-pointer hover:bg-[#ffb03a] hover:scale-105 active:scale-95 transition-all z-20 absolute left-1 shadow-inner"
225+
className="bg-[#ff9500] text-black border border-white rounded-full w-6 h-6 sm:w-7 sm:h-7 font-black text-sm sm:text-base flex items-center justify-center cursor-pointer hover:bg-[#ffb03a] hover:scale-105 active:scale-95 transition-all z-20 absolute left-1 shadow-inner"
223226
>
224227
&gt;
225228
</button>
226229

227230
<button
228231
onClick={handleScanJudge}
229-
className="w-full bg-transparent text-white font-pixeboy text-lg sm:text-xl tracking-widest text-center py-2 pl-6 outline-none cursor-pointer hover:text-[#ff9500] active:scale-[0.98] transition-all truncate"
232+
className="w-full bg-transparent text-white font-pixeboy text-base sm:text-lg tracking-widest text-center py-1 pl-5 outline-none cursor-pointer hover:text-[#ff9500] active:scale-[0.98] transition-all truncate"
230233
>
231234
Surprise Me!
232235
</button>
233236
</div>
234237

235-
<div className="relative w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center shrink-0 mb-2 sm:mb-[20px]">
236-
<div className="absolute w-5 sm:w-7 h-16 sm:h-20 bg-zinc-800 border-2 border-black rounded-sm shadow-md" />
237-
<div className="absolute w-16 sm:w-20 h-5 sm:h-7 bg-zinc-800 border-2 border-black rounded-sm shadow-md" />
238-
<div className="absolute w-5 sm:w-7 h-5 sm:h-7 bg-zinc-800 z-10" />
238+
<div className="relative w-12 h-12 sm:w-16 sm:h-16 flex items-center justify-center shrink-0 mb-1 sm:mb-[12px]">
239+
<div className="absolute w-4 sm:w-5 h-12 sm:h-16 bg-zinc-800 border-2 border-black rounded-sm shadow-md" />
240+
<div className="absolute w-12 sm:w-16 h-4 sm:h-5 bg-zinc-800 border-2 border-black rounded-sm shadow-md" />
241+
<div className="absolute w-4 sm:w-5 h-4 sm:h-5 bg-zinc-800 z-10" />
239242
</div>
240243
</div>
241244
</div>
242245

243246
{/* HINGES (Desktop & Landscape) */}
244-
<div className="hidden md:flex flex-col justify-around h-[260px] w-5 z-20 -mx-[9px] relative mb-12 shrink-0 portrait-hinge">
245-
<div className="w-5 h-12 bg-gradient-to-r from-zinc-800 via-zinc-600 to-zinc-900 border-2 border-black rounded-md shadow-lg z-20" />
246-
<div className="w-5 h-12 bg-gradient-to-r from-zinc-800 via-zinc-600 to-zinc-900 border-2 border-black rounded-md shadow-lg z-20" />
247+
<div className="hidden md:flex flex-col justify-around h-[210px] w-4.5 z-20 -mx-[8px] relative mb-10 shrink-0 portrait-hinge">
248+
<div className="w-4.5 h-10 bg-gradient-to-r from-zinc-800 via-zinc-600 to-zinc-900 border-2 border-black rounded-md shadow-lg z-20" />
249+
<div className="w-4.5 h-10 bg-gradient-to-r from-zinc-800 via-zinc-600 to-zinc-900 border-2 border-black rounded-md shadow-lg z-20" />
247250
</div>
248251

249252
{/* RIGHT INFO PANEL */}
250-
<div className="w-full max-w-[360px] md:max-w-[340px] bg-transparent -mt-2 md:mt-0 relative z-0 portrait-right-panel">
251-
{/* Outer Black Border Wrapper for Cut Angles */}
253+
<div className="w-full max-w-[290px] md:max-w-[270px] bg-transparent -mt-2 md:mt-0 relative z-0 portrait-right-panel">
254+
{/* Outer Black Border Wrapper */}
252255
<div
253-
className="w-full bg-black p-[4px] rounded-b-2xl md:rounded-b-none md:rounded-r-2xl shadow-[0_20px_45px_rgba(0,0,0,0.45)] portrait-right-panel-inner"
256+
className="w-full bg-black p-[3.5px] rounded-b-2xl md:rounded-b-none md:rounded-r-2xl shadow-[0_20px_45px_rgba(0,0,0,0.45)] portrait-right-panel-inner"
254257
style={{
255258
clipPath: "polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 8%)",
256259
}}
257260
>
258261
{/* Inner Red Container */}
259262
<div
260-
className="w-full h-full bg-[#D30A40] rounded-b-[12px] md:rounded-b-none md:rounded-r-[12px] p-3 sm:p-4 flex flex-col justify-between"
263+
className="w-full h-full bg-[#D30A40] rounded-b-[12px] md:rounded-b-none md:rounded-r-[12px] p-2.5 sm:p-3 flex flex-col justify-between"
261264
style={{
262265
clipPath: "polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 8%)",
263266
}}
264267
>
265268
<div
266-
className="bg-black p-0.75 flex-grow flex"
269+
className="bg-black p-0.5 flex-grow flex"
267270
style={{
268271
clipPath:
269272
"polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 6%)",
270273
}}
271274
>
272275
<div
273-
className="bg-[#c2c2c2] w-full h-full p-3 sm:p-4 flex flex-col items-center justify-center font-pixeboy text-[#1d1d1d] relative shadow-[inset_0_2px_5px_rgba(0,0,0,0.25)] min-h-[260px] md:min-h-[340px]"
276+
className="bg-[#c2c2c2] w-full h-full p-3 sm:p-4 flex flex-col items-center justify-start font-pixeboy text-[#1d1d1d] relative shadow-[inset_0_2px_5px_rgba(0,0,0,0.25)] min-h-[200px] md:min-h-[270px]"
274277
style={{
275278
clipPath:
276279
"polygon(7% 0, 100% 0, 100% 100%, 0 100%, 0 5%)",
277280
}}
278281
>
279-
<div className="absolute top-0 right-0 bg-[#D30A40] border-b-2 border-l-2 border-black px-2 py-1 flex items-center gap-1.5 rounded-bl-md">
280-
<span className="w-2.5 h-2.5 bg-[#ff3b30] border border-black rounded-full shadow-sm" />
281-
<span className="w-2.5 h-2.5 bg-[#ffcc00] border border-black rounded-full shadow-sm" />
282-
<span className="w-2.5 h-2.5 bg-[#4cd964] border border-black rounded-full shadow-sm" />
282+
<div className="absolute top-0 right-0 bg-[#D30A40] border-b-2 border-l-2 border-black px-1.5 py-0.5 flex items-center gap-1 rounded-bl-md z-10">
283+
<span className="w-2 h-2 bg-[#ff3b30] border border-black rounded-full shadow-sm" />
284+
<span className="w-2 h-2 bg-[#ffcc00] border border-black rounded-full shadow-sm" />
285+
<span className="w-2 h-2 bg-[#4cd964] border border-black rounded-full shadow-sm" />
283286
</div>
284287

285288
{currentJudge && (
286289
<div
287290
key={`info-${loadKey}`}
288-
className="flex flex-col items-center justify-center w-full flex-grow text-center"
291+
className="flex flex-col items-center justify-start w-full flex-grow text-center pt-2 animate-text-slide"
289292
>
290-
<h2 className="text-4xl sm:text-5xl uppercase tracking-normal text-[#0c0c0c] animate-text-slide font-pixeboy font-normal break-words">
293+
{/* Name at the Top */}
294+
<h2 className="text-3xl sm:text-4xl uppercase tracking-normal text-[#0c0c0c] font-pixeboy font-normal break-words border-b-2 border-black/20 pb-1.5 mb-2.5 w-full">
291295
{currentJudge.name}
292296
</h2>
297+
298+
{/* 3-Line Intro matching exact background color */}
299+
<div className="flex flex-col gap-1.5 w-full text-[#0c0c0c] text-lg sm:text-xl font-normal leading-tight tracking-wide">
300+
<p className="bg-[#c2c2c2] py-1 px-1.5">
301+
{currentJudge.line1}
302+
</p>
303+
<p className="bg-[#c2c2c2] py-1 px-1.5">
304+
{currentJudge.line2}
305+
</p>
306+
<p className="bg-[#c2c2c2] py-1 px-1.5">
307+
{currentJudge.line3}
308+
</p>
309+
</div>
293310
</div>
294311
)}
295312
</div>
@@ -310,8 +327,8 @@ export default function PokedexJudge() {
310327
flex-direction: column !important;
311328
justify-content: space-between !important;
312329
overflow: hidden !important;
313-
padding-top: 3rem !important;
314-
padding-bottom: 2rem !important;
330+
padding-top: 2rem !important;
331+
padding-bottom: 1.5rem !important;
315332
background-position: center bottom !important;
316333
}
317334
@@ -329,9 +346,9 @@ export default function PokedexJudge() {
329346
.portrait-card-scaler {
330347
transform: scale(
331348
min(
332-
calc(85vw / 740px),
333-
calc(55vh / 510px),
334-
1.05
349+
calc(85vw / 600px),
350+
calc(55vh / 430px),
351+
1.0
335352
)
336353
) !important;
337354
transform-origin: center center !important;
@@ -350,7 +367,7 @@ export default function PokedexJudge() {
350367
351368
.portrait-right-panel {
352369
margin-top: 0 !important;
353-
max-width: 340px !important;
370+
max-width: 270px !important;
354371
}
355372
356373
.portrait-right-panel-inner {

0 commit comments

Comments
 (0)