Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,34 +1,315 @@
+import streamlit as st
+import random
+import requests
+
+# -----------------------------
+# Page Config
+# -----------------------------
+st.set_page_config(
+    page_title="Rock Paper Scissors | Kubra",
+    page_icon="🎮",
+    layout="centered"
+)
+
+# -----------------------------
+# Full UI Theme + Dark/Light Fix
+# -----------------------------
+st.markdown("""
+<style>
+
 /* Force Text Color for Light & Dark Mode */
 html, body, [class*="css"] {
     color: #4a148c !important;
 }
 
-/* Streamlit Main Text */
+/* Main Text */
 .stMarkdown, .stText, .stSubheader, .stMetric {
     color: #4a148c !important;
 }
 
-/* Radio Button Text */
-div[role="radiogroup"] label span {
-    color: #4a148c !important;
+/* Background */
+[data-testid="stAppViewContainer"] {
+    background: linear-gradient(135deg, #efe1ff, #f9f2ff);
+    font-family: "Segoe UI", sans-serif;
 }
 
-/* Metric Labels */
-[data-testid="stMetricLabel"] {
-    color: #6a1b9a !important;
+/* Hide audio player */
+audio {
+    display: none !important;
 }
 
-/* Metric Values */
-[data-testid="stMetricValue"] {
-    color: #4a148c !important;
+/* Header */
+[data-testid="stHeader"] {
+    background: transparent;
+}
+
+/* Title */
+.title {
+    text-align: center;
+    color: #4a148c;
+    font-size: 46px;
+    font-weight: 800;
+    margin-bottom: 5px;
+}
+
+/* Subtitle */
+.subtitle {
+    text-align: center;
+    color: #7b1fa2;
+    font-size: 18px;
+    margin-bottom: 25px;
+}
+
+/* Buttons */
+.stButton>button {
+    background: linear-gradient(135deg, #7b1fa2, #9c27b0);
+    color: white !important;
+    border-radius: 12px;
+    height: 50px;
+    font-size: 18px;
+    font-weight: 600;
+    border: none;
+    width: 100%;
+    transition: 0.3s;
 }
 
-/* Info / Messages */
-.stAlert {
+.stButton>button:hover {
+    background: linear-gradient(135deg, #6a1b9a, #8e24aa);
+    transform: scale(1.02);
+}
+
+/* Radio Buttons */
+div[role="radiogroup"] label {
+    background: white;
     color: #4a148c !important;
+    padding: 12px 18px;
+    border-radius: 10px;
+    margin-right: 10px;
+    border: 2px solid #d1b3ff;
+    font-weight: 600;
+}
+
+/* Selected Radio */
+div[role="radiogroup"] input:checked + div {
+    background: #e1bee7 !important;
+    border-color: #7b1fa2 !important;
+}
+
+/* Result */
+.result {
+    text-align: center;
+    font-size: 30px;
+    font-weight: 800;
+    color: #4a148c;
+    margin-top: 15px;
+}
+
+/* Card */
+.card {
+    background: white;
+    padding: 18px;
+    border-radius: 15px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
 }
 
 /* Footer */
 .footer {
-    color: #6a1b9a !important;
+    text-align: center;
+    color: #7b1fa2;
+    font-size: 14px;
+}
+
+</style>
+""", unsafe_allow_html=True)
+
+
+# -----------------------------
+# Title
+# -----------------------------
+st.markdown('<div class="title">🎮 Rock Paper Scissors</div>', unsafe_allow_html=True)
+st.markdown('<div class="subtitle">Beat the AI • Track Your Score • Have Fun 💜</div>', unsafe_allow_html=True)
+
+
+# -----------------------------
+# Load Sound
+# -----------------------------
+@st.cache_data
+def load_win_sound():
+    url = "https://www.soundjay.com/human/sounds/applause-01.mp3"
+    return requests.get(url).content
+
+
+WIN_SOUND = load_win_sound()
+
+
+# -----------------------------
+# Session State
+# -----------------------------
+if "user_score" not in st.session_state:
+    st.session_state.user_score = 0
+
+if "computer_score" not in st.session_state:
+    st.session_state.computer_score = 0
+
+if "history" not in st.session_state:
+    st.session_state.history = []
+
+if "play_sound" not in st.session_state:
+    st.session_state.play_sound = False
+
+
+# -----------------------------
+# Game Setup
+# -----------------------------
+choices = ["Rock", "Paper", "Scissors"]
+
+icons = {
+    "Rock": "✊",
+    "Paper": "✋",
+    "Scissors": "✌️"
 }
+
+
+# -----------------------------
+# Game Card
+# -----------------------------
+st.markdown('<div class="card">', unsafe_allow_html=True)
+
+st.subheader("🎯 Choose Your Move")
+
+user_choice = st.radio("", choices, horizontal=True)
+
+
+# -----------------------------
+# Play Button
+# -----------------------------
+if st.button("Play Now 🚀"):
+
+    st.session_state.play_sound = False
+
+    computer_choice = random.choice(choices)
+
+    st.divider()
+
+    col1, col2 = st.columns(2)
+
+    with col1:
+        st.markdown("### 👤 You")
+        st.write(icons[user_choice], user_choice)
+
+    with col2:
+        st.markdown("### 🤖 Computer")
+        st.write(icons[computer_choice], computer_choice)
+
+
+    # -----------------------------
+    # Game Logic
+    # -----------------------------
+    if user_choice == computer_choice:
+        result = "It's a Draw 🤝"
+
+    elif (
+        (user_choice == "Rock" and computer_choice == "Scissors") or
+        (user_choice == "Paper" and computer_choice == "Rock") or
+        (user_choice == "Scissors" and computer_choice == "Paper")
+    ):
+
+        result = "You Win! 🎉"
+        st.session_state.user_score += 1
+
+        st.session_state.play_sound = True
+        st.balloons()
+
+    else:
+
+        result = "Computer Wins 😢"
+        st.session_state.computer_score += 1
+
+
+    # Save History
+    st.session_state.history.append({
+        "You": user_choice,
+        "Computer": computer_choice,
+        "Result": result
+    })
+
+
+    # Show Result
+    st.markdown(
+        f'<div class="result">{result}</div>',
+        unsafe_allow_html=True
+    )
+
+
+st.markdown('</div>', unsafe_allow_html=True)
+
+
+# -----------------------------
+# Sound
+# -----------------------------
+if st.session_state.play_sound:
+    st.audio(WIN_SOUND, format="audio/mp3")
+
+
+# -----------------------------
+# Scoreboard
+# -----------------------------
+st.markdown('<div class="card">', unsafe_allow_html=True)
+
+st.subheader("📊 Scoreboard")
+
+c1, c2 = st.columns(2)
+
+with c1:
+    st.metric("You", st.session_state.user_score)
+
+with c2:
+    st.metric("Computer", st.session_state.computer_score)
+
+st.markdown('</div>', unsafe_allow_html=True)
+
+
+# -----------------------------
+# History
+# -----------------------------
+st.markdown('<div class="card">', unsafe_allow_html=True)
+
+st.subheader("📜 Match History")
+
+if st.session_state.history:
+
+    for i, game in enumerate(reversed(st.session_state.history[-8:]), 1):
+
+        st.write(
+            f"**{i}.** 👤 {game['You']} | 🤖 {game['Computer']} | 🏆 {game['Result']}"
+        )
+
+else:
+    st.info("No games yet. Start playing!")
+
+
+st.markdown('</div>', unsafe_allow_html=True)
+
+
+# -----------------------------
+# Reset
+# -----------------------------
+if st.button("Reset Game 🔄"):
+
+    st.session_state.user_score = 0
+    st.session_state.computer_score = 0
+    st.session_state.history = []
+    st.session_state.play_sound = False
+
+    st.rerun()
+
+
+# -----------------------------
+# Footer
+# -----------------------------
+st.markdown("---")
+st.markdown(
+    '<div class="footer">Made with 💜 by Kubra | Streamlit App</div>',
+    unsafe_allow_html=True
+)