Update app.py

app.py

@@ -1072,93 +1072,119 @@ def init_theme_state():
 # Theme Selection UI
 def show_theme_selection():
     st.markdown("""
-        <div class="thai-eng">
-            <div class="thai">🎨 เลือกธีมเรื่องราว</div>
-            <div class="eng">Choose Story Theme</div>
+        <div class="theme-header">
+            <h3>🎨 เลือกธีมเรื่องราว | Choose Story Theme</h3>
         </div>
     """, unsafe_allow_html=True)
     
+    # สร้าง 2 rows, แต่ละ row มี 4 themes
+    themes_per_row = 4
     available_themes = get_available_themes(st.session_state.level)
     
-    # สร้าง 2 columns สำหรับแสดงธีม
-    col1, col2 = st.columns(2)
-    
-    for idx, theme in enumerate(available_themes):
-        # สลับระหว่าง column 1 และ 2
-        with col1 if idx % 2 == 0 else col2:
-            theme_card = f"""
-            <div class="theme-card" 
-                 style="background-color: {theme['background_color']};
-                        padding: 15px;
-                        border-radius: 10px;
-                        margin: 5px 0;
-                        border: 2px solid {theme['accent_color']};
-                        cursor: pointer;">
-                <h3>{theme['icon']} {theme['name_th']}</h3>
-                <p style="font-size: 0.9em; color: #666;">
-                    {theme['description_th']}
-                </p>
-            </div>
-            """
-            # ใช้ button แทน markdown สำหรับการคลิก
-            if st.button(theme['name_th'], key=f"theme_button_{theme['id']}", help=theme['description_th']):
-                # บันทึกธีมที่เลือก
-                st.session_state.current_theme = theme['id']
-                
-                # สร้างจุดเริ่มต้นเรื่อง
-                starter = generate_dynamic_story_starter(theme['id'], st.session_state.level)
-                st.session_state.theme_story_starter = starter
-                
-                # เพิ่มจุดเริ่มต้นเรื่องเป็นประโยคแรกใน story
-                st.session_state.story = [{
-                    "role": "AI",
-                    "content": starter['en'],
-                    "thai_content": starter['th'],
-                    "is_starter": True
-                }]
-                
-                # แสดง theme intro
-                st.markdown(f"""
-                    <div style="background-color: {theme['background_color']}; 
-                              padding: 20px; 
-                              border-radius: 10px;
-                              margin: 10px 0;
-                              border: 2px solid {theme['accent_color']}">
-                        <h3>{theme['icon']} เริ่มต้นการผจญภัยในธีม {theme['name_th']}</h3>
-                        <p>{theme['description_th']}</p>
-                        <div style="background-color: rgba(255,255,255,0.7);
-                                  padding: 15px;
-                                  border-radius: 8px;
-                                  margin-top: 10px;">
-                            <p style="color: #666;">AI เริ่มเรื่องให้คุณแล้ว คุณพร้อมที่จะเขียนต่อ:</p>
-                            <p style="color: #1e88e5;">{starter['th']}</p>
-                            <p style="color: #333;">{starter['en']}</p>
-                        </div>
-                    </div>
-                """, unsafe_allow_html=True)
+    # แบ่งธีมเป็น 2 rows
+    for i in range(0, len(available_themes), themes_per_row):
+        row_themes = available_themes[i:i + themes_per_row]
+        cols = st.columns(themes_per_row)
         
-                st.rerun()
+        for col, theme in zip(cols, row_themes):
+            with col:
+                # สร้าง theme card แบบ interactive
+                theme_card = f"""
+                <div class="theme-card" 
+                     onclick="this.classList.toggle('selected')"
+                     style="background: linear-gradient(135deg, {theme['background_color']}, white);
+                            border: 2px solid {theme['accent_color']};
+                            border-radius: 12px;
+                            padding: 15px;
+                            margin: 5px;
+                            cursor: pointer;
+                            transition: all 0.3s ease;
+                            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+                            text-align: center;
+                            min-height: 150px;">
+                    <div style="font-size: 2em; margin-bottom: 8px;">
+                        {theme['icon']}
+                    </div>
+                    <h4 style="color: {theme['accent_color']}; 
+                               margin: 5px 0; 
+                               font-family: 'Sarabun', sans-serif;">
+                        {theme['name_th']}
+                    </h4>
+                    <p style="font-size: 0.85em; 
+                             color: #666; 
+                             margin-top: 5px;
+                             display: -webkit-box;
+                             -webkit-line-clamp: 2;
+                             -webkit-box-orient: vertical;
+                             overflow: hidden;">
+                        {theme['description_th']}
+                    </p>
+                </div>
+                """
+                
+                if st.markdown(theme_card, unsafe_allow_html=True):
+                    st.session_state.current_theme = theme['id']
+                    starter = generate_dynamic_story_starter(theme['id'], st.session_state.level)
+                    st.session_state.theme_story_starter = starter
+                    st.rerun()
 
 # เพิ่ม CSS สำหรับ theme cards
 st.markdown("""
     <style>
+    .theme-header {
+        text-align: center;
+        margin-bottom: 20px;
+    }
+    
+    .theme-header h3 {
+        color: #1e88e5;
+        font-family: 'Sarabun', sans-serif;
+    }
+    
     .theme-card {
-        transition: transform 0.2s, box-shadow 0.2s;
+        position: relative;
+        overflow: hidden;
     }
+    
     .theme-card:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        transform: translateY(-5px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
     }
-    .stButton button {
-        background-color: transparent;
-        border: none;
-        text-align: left;
+    
+    .theme-card:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
-        padding: 0;
+        height: 100%;
+        background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.5));
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+    
+    .theme-card:hover:before {
+        opacity: 1;
+    }
+    
+    .theme-card.selected {
+        transform: scale(0.98);
+        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
     }
-    .stButton button:hover {
-        background-color: transparent;
-        border: none;
+    
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+        .theme-card {
+            min-height: 120px;
+        }
+        
+        .theme-card h4 {
+            font-size: 0.9em;
+        }
+        
+        .theme-card p {
+            font-size: 0.8em;
+        }
     }
     </style>
 """, unsafe_allow_html=True)