Update app.py

app.py

@@ -402,6 +402,10 @@ st.markdown("""
 
 # Initialize session state variables
 def init_session_state():
+    if 'current_theme' not in st.session_state:
+        st.session_state.current_theme = None
+    if 'theme_story_starter' not in st.session_state:
+        st.session_state.theme_story_starter = None
     if 'story' not in st.session_state:
         st.session_state.story = []
     if 'feedback' not in st.session_state:
@@ -1070,28 +1074,93 @@ def show_theme_selection():
     
     available_themes = get_available_themes(st.session_state.level)
     
-    # Create theme selection cards
-    cols = st.columns(2)
+    # สร้าง 2 columns สำหรับแสดงธีม
+    col1, col2 = st.columns(2)
+    
     for idx, theme in enumerate(available_themes):
-        with cols[idx % 2]:
+        # สลับระหว่าง column 1 และ 2
+        with col1 if idx % 2 == 0 else col2:
             theme_card = f"""
-            <div style="
-                background-color: {theme['background_color']};
-                padding: 15px;
-                border-radius: 10px;
-                margin: 5px 0;
-                border: 2px solid {theme['accent_color']};
-                cursor: pointer;
-            ">
+            <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>
             """
-            if st.markdown(theme_card, unsafe_allow_html=True):
+            # ใช้ button แทน markdown สำหรับการคลิก
+            if st.button(
+                theme['name_th'],
+                key=f"theme_button_{theme['id']}",
+                help=theme['description_th'],
+                use_container_width=True
+            ):
+                # บันทึกธีมที่เลือกใน session state
                 st.session_state.current_theme = theme['id']
-                st.session_state.theme_story_starter = get_theme_story_starter(theme['id'], st.session_state.level)
+                
+                # สร้างจุดเริ่มต้นเรื่องแบบไดนามิก
+                starter = generate_dynamic_story_starter(theme['id'], st.session_state.level)
+                st.session_state.theme_story_starter = starter
+                
+                # แสดง 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;">จุดเริ่มต้นเรื่องของคุณ:</p>
+                            <p style="color: #1e88e5;">{starter['th']}</p>
+                            <p style="color: #333;">{starter['en']}</p>
+                        </div>
+                    </div>
+                """, unsafe_allow_html=True)
+                
+                # เพิ่มคำแนะนำการเขียน
+                st.info("📝 เริ่มเขียนเรื่องราวของคุณได้เลย! คุณสามารถใช้จุดเริ่มต้นด้านบนเป็นแรงบันดาลใจ")
+                
+                # แสดงคำศัพท์แนะนำสำหรับธีมนี้
+                with st.expander("📚 คำศัพท์แนะนำสำหรับธีมนี้"):
+                    show_theme_vocabulary()
+                
+                st.rerun()
+
+# เพิ่ม CSS สำหรับ theme cards
+st.markdown("""
+    <style>
+    .theme-card {
+        transition: transform 0.2s, box-shadow 0.2s;
+    }
+    .theme-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    }
+    .stButton button {
+        background-color: transparent;
+        border: none;
+        text-align: left;
+        width: 100%;
+        padding: 0;
+    }
+    .stButton button:hover {
+        background-color: transparent;
+        border: none;
+    }
+    </style>
+""", unsafe_allow_html=True)
+
 
 # Add theme-specific CSS
 def add_theme_css():