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 }} initial={{ height: 0 }}
animate={{ height: "60%" }} animate={{ height: "60%" }}
transition={{ type: 'spring', bounce: 0.5, delay: 0.5 }} 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"> <div className="absolute -top-12 md:-top-20 flex flex-col items-center">
<span className="text-xl font-bold mb-2 text-white drop-shadow-md">{second.name}</span> <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} /> <PlayerAvatar seed={second.avatarSeed} size={40} />
</div> </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> </motion.div>
)} )}
@ -60,13 +60,13 @@ export const Podium: React.FC<PodiumProps> = ({ players, onRestart }) => {
initial={{ height: 0 }} initial={{ height: 0 }}
animate={{ height: "80%" }} animate={{ height: "80%" }}
transition={{ type: 'spring', bounce: 0.6, delay: 1 }} 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"> <div className="absolute -top-16 md:-top-28 flex flex-col items-center">
<span className="text-3xl font-bold mb-2 text-yellow-100 drop-shadow-md">{winner.name}</span> <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" /> <PlayerAvatar seed={winner.avatarSeed} size={56} className="ring-4 ring-yellow-300" />
</div> </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> </motion.div>
)} )}
@ -76,13 +76,13 @@ export const Podium: React.FC<PodiumProps> = ({ players, onRestart }) => {
initial={{ height: 0 }} initial={{ height: 0 }}
animate={{ height: "40%" }} animate={{ height: "40%" }}
transition={{ type: 'spring', bounce: 0.5, delay: 0 }} 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"> <div className="absolute -top-12 md:-top-20 flex flex-col items-center">
<span className="text-xl font-bold mb-2 text-white drop-shadow-md">{third.name}</span> <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} /> <PlayerAvatar seed={third.avatarSeed} size={40} />
</div> </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> </motion.div>
)} )}
</div> </div>

View file

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