Update app.py

app.py

@@ -111,7 +111,7 @@ def join_game():
         else:
             st.error("Invalid Game ID. Please check and try again.")
 
-# Function to start the game
+# Function to start the game when all players have joined
 def start_game(game_data):
     topics = game_data['topics']
     questions = game_data['questions']
@@ -171,102 +171,38 @@ def start_game(game_data):
 
             st.success(f"Game Over! Your final score is {score}")
 
-# Function to display the leaderboard with animations
-def display_dashboard():
+# Function to display recent players and cracker animations
+def display_homepage():
+    # Display recent winners from the leaderboard file
     leaderboard_df = load_leaderboard()
+    recent_winners = leaderboard_df.tail(5)  # Show the most recent winners (up to 5)
 
-    st.subheader("Top 3 Players")
-    top_3 = leaderboard_df.head(3)
-    
-    # First Place Winner - Celebration Animation
-    first_place = top_3.iloc[0] if not leaderboard_df.empty else None
-    if first_place is not None:
-        st.write(f"🏆 {first_place['name']} - {first_place['score']} points! 🎉 {first_place['avatar']}")
-        st.markdown("<h3 style='color: gold;'>🎉 Congratulations on First Place! 🎉</h3>", unsafe_allow_html=True)
-        html_code = f"""
-        <div style="text-align: center;">
-            <h2>🏆 Winner: {first_place['name']} 🏆</h2>
-            <p>Score: {first_place['score']}</p>
-            <p>Avatar: {first_place['avatar']}</p>
-        </div>
-        <div id="balloon" style="position: absolute; top: 50%; left: 50%; animation: float 2s infinite;">
-            🎈🎉
-        </div>
-        <style>
-        @keyframes float {{
-            0% {{ transform: translateY(0); }}
-            50% {{ transform: translateY(-50px); }}
-            100% {{ transform: translateY(0); }}
-        }}
-        </style>
-        """
-        html(html_code)
-
-    # Second Place Winner - Celebration Animation
-    if len(top_3) > 1:
-        second_place = top_3.iloc[1]
-        st.write(f"🥈 {second_place['name']} - {second_place['score']} points! {second_place['avatar']}")
-        st.markdown("<h3 style='color: silver;'>👏 Congratulations on Second Place! 👏</h3>", unsafe_allow_html=True)
-        html_code = f"""
-        <div style="text-align: center;">
-            <h2>🥈 Runner-up: {second_place['name']} 🥈</h2>
-            <p>Score: {second_place['score']}</p>
-            <p>Avatar: {second_place['avatar']}</p>
-        </div>
-        <div style="animation: clap 1s linear infinite;">
-            👏👏👏
-        </div>
-        <style>
-        @keyframes clap {{
-            0% {{ transform: scale(1); }}
-            50% {{ transform: scale(1.2); }}
-            100% {{ transform: scale(1); }}
-        }}
-        </style>
-        """
-        html(html_code)
+    st.subheader("Recent Winners")
+    for index, winner in recent_winners.iterrows():
+        st.write(f"{winner['name']} - {winner['score']} points - Avatar: {winner['avatar']}")
 
-    # Third Place Winner - Celebration Animation
-    if len(top_3) > 2:
-        third_place = top_3.iloc[2]
-        st.write(f"🥉 {third_place['name']} - {third_place['score']} points! {third_place['avatar']}")
-        st.markdown("<h3 style='color: #cd7f32;'>👍 Nice Try on Third Place! 👍</h3>", unsafe_allow_html=True)
+    # Celebration for the first winner with cracker animation
+    first_winner = recent_winners.iloc[-1] if not recent_winners.empty else None
+    if first_winner is not None:
+        st.markdown("<h3 style='color: gold;'>🎉 Congratulations to the First Winner! 🎉</h3>", unsafe_allow_html=True)
         html_code = f"""
         <div style="text-align: center;">
-            <h2>🥉 Third Place: {third_place['name']} 🥉</h2>
-            <p>Score: {third_place['score']}</p>
-            <p>Avatar: {third_place['avatar']}</p>
+            <h2>🏆 {first_winner['name']} 🏆</h2>
+            <p>Score: {first_winner['score']}</p>
+            <p>Avatar: {first_winner['avatar']}</p>
         </div>
-        <div style="animation: thumbsUp 1s linear infinite;">
-            👍
+        <div id="fireworks" style="position: absolute; top: 50%; left: 50%; animation: fireworks 2s infinite;">
+            🎆🎇
         </div>
         <style>
-        @keyframes thumbsUp {{
-            0% {{ transform: rotate(0deg); }}
-            50% {{ transform: rotate(20deg); }}
-            100% {{ transform: rotate(0deg); }}
+        @keyframes fireworks {{
+            0% {{ transform: scale(0); opacity: 1; }}
+            100% {{ transform: scale(3); opacity: 0; }}
         }}
         </style>
         """
         html(html_code)
 
-    # Pie chart for the distribution of player scores
-    fig = go.Figure(data=[go.Pie(labels=leaderboard_df['name'], values=leaderboard_df['score'], hole=0.3)])
-    fig.update_layout(title="Score Distribution")
-    st.plotly_chart(fig)
-
-    # Bar chart of leaderboard rankings
-    fig = px.bar(
-        leaderboard_df,
-        x='name',
-        y='score',
-        color='name',
-        title="Leaderboard",
-        labels={'name': 'Player', 'score': 'Score'},
-        hover_data=["avatar"]
-    )
-    st.plotly_chart(fig)
-
 # Main function to handle Streamlit app
 def main():
     st.title('AI Quiz Game')
@@ -274,9 +210,7 @@ def main():
     mode = st.sidebar.selectbox("Select Mode", ["Home", "Create Game", "Join Game", "Leaderboard"])
 
     if mode == "Home":
-        st.write("Welcome to the Game!")
-        st.write("You can create a new game, join an existing game, or check the leaderboard.")
-        display_dashboard()
+        display_homepage()
 
     elif mode == "Create Game":
         create_game()
@@ -285,7 +219,7 @@ def main():
         join_game()
 
     elif mode == "Leaderboard":
-        display_dashboard()
+        display_homepage()
 
 if __name__ == "__main__":
     main()