Fix podium screen

This commit is contained in:
Joey Yakimowich-Payne 2026-01-15 20:13:15 -07:00
commit 1d8c08a680
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
2 changed files with 13 additions and 12 deletions

View file

@ -44,13 +44,13 @@ export const Podium: React.FC<PodiumProps> = ({ players, onRestart }) => {
initial={{ height: 0 }}
animate={{ height: "60%" }}
transition={{ type: 'spring', bounce: 0.5, delay: 0.5 }}
className="w-1/3 bg-gray-200 rounded-t-[3rem] flex flex-col items-center justify-end p-6 relative border-x-4 border-t-4 border-white/50 shadow-xl"
className="w-1/3 bg-gray-200 rounded-t-2xl md:rounded-t-[3rem] flex flex-col items-center justify-end p-2 md:p-6 relative border-x-4 border-t-4 border-white/50 shadow-xl"
>
<div className="absolute -top-20 flex flex-col items-center">
<span className="text-xl font-bold mb-2 text-white drop-shadow-md">{second.name}</span>
<div className="absolute -top-12 md:-top-20 flex flex-col items-center">
<span className="text-sm md:text-xl font-bold mb-1 md:mb-2 text-white drop-shadow-md text-center leading-tight">{second.name}</span>
<PlayerAvatar seed={second.avatarSeed} size={40} />
</div>
<span className="text-3xl font-black text-gray-500 mb-4">{second.score}</span>
<span className="text-xl md:text-3xl font-black text-gray-500 mb-2 md:mb-4">{second.score}</span>
</motion.div>
)}
@ -60,13 +60,13 @@ export const Podium: React.FC<PodiumProps> = ({ players, onRestart }) => {
initial={{ height: 0 }}
animate={{ height: "80%" }}
transition={{ type: 'spring', bounce: 0.6, delay: 1 }}
className="w-1/3 bg-yellow-400 rounded-t-[3rem] flex flex-col items-center justify-end p-6 relative z-10 shadow-2xl border-x-4 border-t-4 border-white/50"
className="w-1/3 bg-yellow-400 rounded-t-2xl md:rounded-t-[3rem] flex flex-col items-center justify-end p-2 md:p-6 relative z-10 shadow-2xl border-x-4 border-t-4 border-white/50"
>
<div className="absolute -top-28 flex flex-col items-center">
<span className="text-3xl font-bold mb-2 text-yellow-100 drop-shadow-md">{winner.name}</span>
<div className="absolute -top-16 md:-top-28 flex flex-col items-center">
<span className="text-lg md:text-3xl font-bold mb-1 md:mb-2 text-yellow-100 drop-shadow-md text-center leading-tight">{winner.name}</span>
<PlayerAvatar seed={winner.avatarSeed} size={56} className="ring-4 ring-yellow-300" />
</div>
<span className="text-5xl font-black text-yellow-900 mb-6">{winner.score}</span>
<span className="text-3xl md:text-5xl font-black text-yellow-900 mb-2 md:mb-6">{winner.score}</span>
</motion.div>
)}
@ -76,13 +76,13 @@ export const Podium: React.FC<PodiumProps> = ({ players, onRestart }) => {
initial={{ height: 0 }}
animate={{ height: "40%" }}
transition={{ type: 'spring', bounce: 0.5, delay: 0 }}
className="w-1/3 bg-orange-400 rounded-t-[3rem] flex flex-col items-center justify-end p-6 relative border-x-4 border-t-4 border-white/50 shadow-xl"
className="w-1/3 bg-orange-400 rounded-t-2xl md:rounded-t-[3rem] flex flex-col items-center justify-end p-2 md:p-6 relative border-x-4 border-t-4 border-white/50 shadow-xl"
>
<div className="absolute -top-20 flex flex-col items-center">
<span className="text-xl font-bold mb-2 text-white drop-shadow-md">{third.name}</span>
<div className="absolute -top-12 md:-top-20 flex flex-col items-center">
<span className="text-sm md:text-xl font-bold mb-1 md:mb-2 text-white drop-shadow-md text-center leading-tight">{third.name}</span>
<PlayerAvatar seed={third.avatarSeed} size={40} />
</div>
<span className="text-3xl font-black text-orange-900 mb-4">{third.score}</span>
<span className="text-xl md:text-3xl font-black text-orange-900 mb-2 md:mb-4">{third.score}</span>
</motion.div>
)}
</div>

View file

@ -217,6 +217,7 @@ fi
print_step "Building frontend with production URLs..."
VITE_API_URL="https://${KABOOT_DOMAIN}" \
VITE_BACKEND_URL="https://${KABOOT_DOMAIN}" \
VITE_AUTHENTIK_URL="https://${AUTH_DOMAIN}" \
VITE_OIDC_CLIENT_ID="kaboot-spa" \
VITE_OIDC_APP_SLUG="kaboot" \