Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,7 +1,20 @@
 import streamlit as st
 import random
+import os
 from typing import List, Tuple, Dict, Optional
 
+# Fix for Hugging Face Spaces - set Streamlit config directory
+os.environ['STREAMLIT_CONFIG_DIR'] = '/tmp/.streamlit'
+os.makedirs('/tmp/.streamlit', exist_ok=True)
+
+# Streamlit configuration for Hugging Face Spaces
+st.set_page_config(
+    page_title="Puzzle8 Game",
+    page_icon="🧩",
+    layout="centered",
+    initial_sidebar_state="collapsed"
+)
+
 # Constants
 SOLVED_STATE = [1, 2, 3, 4, 5, 6, 7, 8, 0]
 
@@ -145,9 +158,20 @@ if 'game' not in st.session_state:
 # Custom CSS for styling
 st.markdown("""
 <style>
+    /* Hide Streamlit elements */
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+    header {visibility: hidden;}
+    .stDeployButton {display: none;}
+    
     .main > div {
-        padding-top: 2rem;
-        padding-bottom: 2rem;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+    }
+    
+    .stApp {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
     }
     
     .game-container {
@@ -158,6 +182,7 @@ st.markdown("""
         margin: 20px auto;
         text-align: center;
         max-width: 600px;
+        backdrop-filter: blur(10px);
     }
     
     .puzzle-grid {
@@ -170,34 +195,37 @@ st.markdown("""
         padding: 20px;
         background: rgba(0,0,0,0.05);
         border-radius: 8px;
+        max-width: 350px;
     }
     
-    .puzzle-tile {
-        width: 100px;
-        height: 100px;
-        border: none;
-        border-radius: 8px;
-        background: linear-gradient(145deg, #2196F3, #1976D2);
-        color: white;
-        font-size: 24px;
-        font-weight: 700;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    .stButton > button {
+        width: 100px !important;
+        height: 100px !important;
+        border: none !important;
+        border-radius: 8px !important;
+        background: linear-gradient(145deg, #2196F3, #1976D2) !important;
+        color: white !important;
+        font-size: 24px !important;
+        font-weight: 700 !important;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
+        margin: 0 !important;
+        padding: 0 !important;
     }
     
-    .puzzle-tile:hover {
-        transform: translateY(-2px) scale(1.02);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    .stButton > button:hover {
+        transform: translateY(-2px) scale(1.02) !important;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
     }
     
     .empty-tile {
+        width: 100px;
+        height: 100px;
         background: rgba(255,255,255,0.8);
         border: 2px dashed #ccc;
         box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        margin: 0;
     }
     
     .moves-counter {
@@ -259,21 +287,21 @@ st.markdown("""
         opacity: 0.9;
     }
     
-    .stButton > button {
-        width: 140px;
-        height: 45px;
-        border-radius: 8px;
-        font-weight: 600;
-        font-size: 16px;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        margin: 5px;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    .control-button > button {
+        width: 140px !important;
+        height: 45px !important;
+        border-radius: 8px !important;
+        font-weight: 600 !important;
+        font-size: 16px !important;
+        text-transform: uppercase !important;
+        letter-spacing: 0.5px !important;
+        margin: 5px !important;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
     }
     
-    .stButton > button:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    .control-button > button:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
     }
     
     .instructions {
@@ -311,108 +339,133 @@ st.markdown("""
         border: 2px dashed #ccc;
     }
     
-    /* Hide Streamlit elements */
-    #MainMenu {visibility: hidden;}
-    footer {visibility: hidden;}
-    header {visibility: hidden;}
+    /* Mobile responsive */
+    @media (max-width: 768px) {
+        .puzzle-grid {
+            grid-template-columns: repeat(3, 80px);
+            grid-template-rows: repeat(3, 80px);
+            max-width: 280px;
+        }
+        
+        .stButton > button {
+            width: 80px !important;
+            height: 80px !important;
+            font-size: 20px !important;
+        }
+        
+        .empty-tile {
+            width: 80px;
+            height: 80px;
+        }
+        
+        .game-container {
+            padding: 20px;
+            margin: 10px;
+        }
+    }
 </style>
 """, unsafe_allow_html=True)
 
-# Page title
-st.markdown("<h1 style='text-align: center; background: linear-gradient(145deg, #2196F3, #1976D2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; font-size: 3rem; margin-bottom: 30px;'>🧩 Puzzle8</h1>", unsafe_allow_html=True)
-
-# Game container
-game = st.session_state.game
-
-# Status card (moves counter or congratulations)
-if game.game_won:
-    st.markdown(f"""
-    <div class="congratulations-card">
-        <div class="congratulations-title">🏆 Congratulations!</div>
-        <div class="congratulations-subtitle">Puzzle solved in {game.moves} moves!</div>
-    </div>
-    """, unsafe_allow_html=True)
-else:
-    st.markdown(f"""
-    <div class="moves-counter">
-        <div class="moves-value">{game.moves}</div>
-        <div class="moves-label">Moves</div>
-    </div>
-    """, unsafe_allow_html=True)
-
-# Puzzle grid
-st.markdown('<div class="puzzle-grid">', unsafe_allow_html=True)
-
-# Create 3x3 grid of tiles
-cols = st.columns(3)
-for i in range(9):
-    col_idx = i % 3
-    
-    with cols[col_idx]:
-        if game.puzzle and len(game.puzzle) > i:
-            value = game.puzzle[i]
-            
-            if value == 0:
-                # Empty tile
-                st.markdown('<div class="empty-tile puzzle-tile"></div>', unsafe_allow_html=True)
-            else:
-                # Number tile - make it clickable
-                if st.button(str(value), key=f"tile_{i+1}", help=f"Move tile {value}"):
-                    game.make_move(i + 1)
-                    st.rerun()
-
-st.markdown('</div>', unsafe_allow_html=True)
-
-# Control buttons
-col1, col2 = st.columns(2)
-
-with col1:
-    if st.button("🎲 New Game", key="new_game", type="primary"):
-        game.new_game()
-        st.rerun()
-
-with col2:
-    if st.button("🔄 Reset", key="reset_game", type="secondary"):
-        game.reset_game()
-        st.rerun()
-
-# Instructions
-with st.expander("🎯 How to Play", expanded=False):
+def main():
+    # Page title
     st.markdown("""
-    **Goal:** Arrange numbers 1-8 in order with the empty space in the bottom-right corner.
+    <div class="game-container">
+        <h1 style='text-align: center; background: linear-gradient(145deg, #2196F3, #1976D2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; font-size: 3rem; margin-bottom: 30px;'>
+            🧩 Puzzle8
+        </h1>
+    """, unsafe_allow_html=True)
     
-    **Rules:**
-    - Click on tiles adjacent to the empty space to move them
-    - Only tiles next to the empty space can be moved  
-    - Try to solve the puzzle in as few moves as possible!
+    # Game container
+    game = st.session_state.game
+    
+    # Status card (moves counter or congratulations)
+    if game.game_won:
+        st.markdown(f"""
+        <div class="congratulations-card">
+            <div class="congratulations-title">🏆 Congratulations!</div>
+            <div class="congratulations-subtitle">Puzzle solved in {game.moves} moves!</div>
+        </div>
+        """, unsafe_allow_html=True)
+    else:
+        st.markdown(f"""
+        <div class="moves-counter">
+            <div class="moves-value">{game.moves}</div>
+            <div class="moves-label">Moves</div>
+        </div>
+        """, unsafe_allow_html=True)
     
-    **Target arrangement:**
-    """)
+    # Puzzle grid
+    st.markdown('<div class="puzzle-grid">', unsafe_allow_html=True)
     
-    # Goal grid visualization
-    st.markdown("""
-    <div style="text-align: center;">
-        <div class="goal-grid">
-            <div class="goal-tile">1</div>
-            <div class="goal-tile">2</div>
-            <div class="goal-tile">3</div>
-            <div class="goal-tile">4</div>
-            <div class="goal-tile">5</div>
-            <div class="goal-tile">6</div>
-            <div class="goal-tile">7</div>
-            <div class="goal-tile">8</div>
-            <div class="goal-tile goal-empty"></div>
+    # Create 3x3 grid of tiles
+    for row in range(3):
+        cols = st.columns(3)
+        for col in range(3):
+            i = row * 3 + col
+            
+            with cols[col]:
+                if game.puzzle and len(game.puzzle) > i:
+                    value = game.puzzle[i]
+                    
+                    if value == 0:
+                        # Empty tile
+                        st.markdown('<div class="empty-tile"></div>', unsafe_allow_html=True)
+                    else:
+                        # Number tile - make it clickable
+                        if st.button(str(value), key=f"tile_{i+1}"):
+                            game.make_move(i + 1)
+                            st.rerun()
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Control buttons
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        st.markdown('<div class="control-button">', unsafe_allow_html=True)
+        if st.button("🎲 New Game", key="new_game", type="primary"):
+            game.new_game()
+            st.rerun()
+        st.markdown('</div>', unsafe_allow_html=True)
+    
+    with col2:
+        st.markdown('<div class="control-button">', unsafe_allow_html=True)
+        if st.button("🔄 Reset", key="reset_game", type="secondary"):
+            game.reset_game()
+            st.rerun()
+        st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Instructions
+    with st.expander("🎯 How to Play", expanded=False):
+        st.markdown("""
+        **Goal:** Arrange numbers 1-8 in order with the empty space in the bottom-right corner.
+        
+        **Rules:**
+        - Click on tiles adjacent to the empty space to move them
+        - Only tiles next to the empty space can be moved  
+        - Try to solve the puzzle in as few moves as possible!
+        
+        **Target arrangement:**
+        """)
+        
+        # Goal grid visualization
+        st.markdown("""
+        <div style="text-align: center;">
+            <div class="goal-grid">
+                <div class="goal-tile">1</div>
+                <div class="goal-tile">2</div>
+                <div class="goal-tile">3</div>
+                <div class="goal-tile">4</div>
+                <div class="goal-tile">5</div>
+                <div class="goal-tile">6</div>
+                <div class="goal-tile">7</div>
+                <div class="goal-tile">8</div>
+                <div class="goal-tile goal-empty"></div>
+            </div>
         </div>
-    </div>
-    """, unsafe_allow_html=True)
+        """, unsafe_allow_html=True)
+    
+    st.markdown('</div>', unsafe_allow_html=True)
 
-# Debug info (optional - can be removed)
-if st.checkbox("Show Debug Info", value=False):
-    st.write("Current puzzle state:", game.puzzle)
-    st.write("Moves:", game.moves)
-    st.write("Game won:", game.game_won)
-    if game.puzzle:
-        blank_pos = game.get_blank_position(game.puzzle)
-        valid_moves = game.get_valid_moves(blank_pos)
-        st.write("Blank position:", blank_pos)
-        st.write("Valid moves:", valid_moves)
+if __name__ == "__main__":
+    main()