Update app.py

app.py

@@ -2,83 +2,88 @@ import streamlit as st
 import pandas as pd
 import folium
 from streamlit_folium import folium_static
-from streamlit_components import html
+import extra_streamlit_components as stx
 
-# Set page config
+# 🤠 Howdy, partner! Welcome to the Wild West of coding! 🌵
+
+# 🎭 Set the stage for our grand performance
 st.set_page_config(page_title="Wild Bill vs Buffalo Bill", page_icon="🤠", layout="wide")
 
-# Define the stories
-wild_bill_story = """
-# 🔫 Wild Bill Hickok: The Legendary Gunslinger
-
-## 1. 🌟 Early Life
-   - 🍼 Born James Butler Hickok on May 27, 1837, in Homer, Illinois
-   - 🌾 Grew up on a farm, developing skills in shooting and horseback riding
-   - 🏞️ Left home at 18 to become a stagecoach driver on the Santa Fe Trail
-
-...  # (The rest of the Wild Bill story remains the same)
-"""
-
-buffalo_bill_story = """
-# 🦬 Buffalo Bill Cody: The Showman of the West
-
-## 1. 🌟 Early Life
-   - 🍼 Born William Frederick Cody on February 26, 1846, in Le Claire, Iowa
-   - 🐎 Began riding horses at a young age
-   - 🚂 Worked as a Pony Express rider at age 14
-
-...  # (The rest of the Buffalo Bill story remains the same)
-"""
-
-# Sidebar
-st.sidebar.title("📍 Key Locations & Events")
-
-st.sidebar.markdown("""
-## Wild Bill Hickok
-- 🏡 Homer, Illinois (Birth)
-- 🌽 Rock Creek Station, Nebraska
-- 🐄 Abilene, Kansas
-- 🏜️ Cheyenne, Wyoming
-- 🪙 Deadwood, South Dakota (Death)
-
-## Buffalo Bill Cody
-- 🏡 Le Claire, Iowa (Birth)
-- 🌽 North Platte, Nebraska
-- 🏔️ Cody, Wyoming
-- 🌄 Denver, Colorado
-- 🏛️ Denver, Colorado (Death)
-""")
+# 🧠 Initialize our app's memory (it's not whiskey, I promise!)
+if 'page' not in st.session_state:
+    st.session_state.page = 'home'
+
+# 🍪 Cookie Manager: Because even cowboys need snacks
+@st.cache_resource
+def get_manager():
+    return stx.CookieManager()
 
-# Main content
-st.title("🤠 Wild Bill Hickok vs Buffalo Bill Cody: A Tale of Two Western Legends")
+cookie_manager = get_manager()
 
-col1, col2 = st.columns(2)
+# 🚂 All aboard the Router Express! Next stop: Destination Page
+@st.cache_resource(hash_funcs={"_thread.RLock": lambda _: None})
+def init_router():
+    return stx.Router({"/home": home, "/wild-bill": wild_bill, "/buffalo-bill": buffalo_bill})
 
-with col1:
+# 🏡 Home on the range
+def home():
+    st.title("🤠 Wild Bill Hickok vs Buffalo Bill Cody: A Tale of Two Western Legends")
+    st.write("Welcome to our interactive dime novel! Choose a character to explore their story.")
+
+# 🔫 Wild Bill's saloon (careful, he's a quick draw!)
+def wild_bill():
+    st.title("🔫 Wild Bill Hickok: The Legendary Gunslinger")
     st.markdown(wild_bill_story)
 
-with col2:
+# 🎪 Step right up to Buffalo Bill's Wild West Show!
+def buffalo_bill():
+    st.title("🦬 Buffalo Bill Cody: The Showman of the West")
     st.markdown(buffalo_bill_story)
 
-# Map
-st.subheader("🗺️ Journey Through the Wild West")
+# 🚉 All aboard! The Router is leaving the station!
+router = init_router()
+
+# 🧭 Navigation: Don't get lost in the prairie!
+chosen_id = stx.tab_bar(data=[
+    stx.TabBarItemData(id="home", title="Home", description="Start here"),
+    stx.TabBarItemData(id="wild-bill", title="Wild Bill", description="Explore Wild Bill's story"),
+    stx.TabBarItemData(id="buffalo-bill", title="Buffalo Bill", description="Discover Buffalo Bill's adventures"),
+], default="home")
+
+# 🐎 Giddy up to the chosen page!
+router.route(f"/{chosen_id}")
+
+# 🗺️ You are here (in case you got lost in a saloon)
+router.show_route_view()
+
+# 🕰️ Remember the last saloon... err, page you visited
+cookie_manager.set("last_page", chosen_id)
 
-# Create a base map
+# 📜 Reveal the secrets of your past (visits)
+st.sidebar.write(f"Last visited: {cookie_manager.get('last_page')}")
+
+# 👢 Put your boots on, we're going on a story adventure!
+story_progress = stx.stepper_bar(steps=["Early Life", "Rise to Fame", "Notable Feats", "Legacy"])
+st.sidebar.info(f"Story Progress: Phase #{story_progress}")
+
+# 🗺️ Map: Because even legends need GPS sometimes
+st.subheader("🗺️ Journey Through the Wild West")
 m = folium.Map(location=[41, -100], zoom_start=4)
 
-# Add markers for key locations
+# 📍 Mark the spots where our legends left their boot prints
 locations = [
-    ("Homer, IL", 40.0356, -87.9506, "Wild Bill Hickok's Birthplace"),
-    ("Rock Creek Station, NE", 40.1116, -97.0564, "McCanles Massacre Site"),
-    ("Abilene, KS", 38.9172, -97.2137, "Wild Bill served as Marshal"),
-    ("Cheyenne, WY", 41.1400, -104.8202, "Wild Bill's brief stint as sheriff"),
-    ("Deadwood, SD", 44.3767, -103.7296, "Wild Bill's final days and resting place"),
-    ("Le Claire, IA", 41.5978, -90.3485, "Buffalo Bill's Birthplace"),
-    ("North Platte, NE", 41.1239, -100.7654, "Buffalo Bill's Scout's Rest Ranch"),
-    ("Cody, WY", 44.5263, -109.0565, "Town founded by Buffalo Bill"),
-    ("Denver, CO", 39.7392, -104.9903, "Buffalo Bill's home and final resting place")
+    ("Homer, IL", 40.0356, -87.9506, "Wild Bill's first rodeo (birthplace)"),
+    ("Rock Creek Station, NE", 40.1116, -97.0564, "Wild Bill's wild time (McCanles Massacre)"),
+    ("Abilene, KS", 38.9172, -97.2137, "Wild Bill's badge-wearing days"),
+    ("Cheyenne, WY", 41.1400, -104.8202, "Wild Bill's brief sheriff showdown"),
+    ("Deadwood, SD", 44.3767, -103.7296, "Wild Bill's last poker game 😢"),
+    ("Le Claire, IA", 41.5978, -90.3485, "Buffalo Bill's first 'Yee-haw!' (birthplace)"),
+    ("North Platte, NE", 41.1239, -100.7654, "Buffalo Bill's home on the range"),
+    ("Cody, WY", 44.5263, -109.0565, "Buffalo Bill's namesake town (no buffaloes were harmed)"),
+    ("Denver, CO", 39.7392, -104.9903, "Buffalo Bill's final bow 🎭")
 ]
 
+# 🎨 Paint the town red... or at least mark it on the map
 for name, lat, lon, desc in locations:
     folium.Marker(
         [lat, lon],
@@ -86,98 +91,44 @@ for name, lat, lon, desc in locations:
         tooltip=name
     ).add_to(m)
 
-# Display the map
+# 🌟 Showcase our masterpiece map
 folium_static(m)
 
-# Add React component for animated timeline
-st.subheader("⏳ Animated Timeline")
-
-timeline_component = """
-import React, { useState, useEffect } from 'react';
-
-const Timeline = () => {
-  const [year, setYear] = useState(1837);
-  const [event, setEvent] = useState('');
-
-  const events = {
-    1837: "Wild Bill Hickok born",
-    1846: "Buffalo Bill Cody born",
-    1861: "Wild Bill involved in McCanles Massacre",
-    1867: "Buffalo Bill begins hunting buffalo for Kansas Pacific Railroad",
-    1871: "Wild Bill becomes marshal of Abilene, Kansas",
-    1872: "Buffalo Bill awarded Medal of Honor",
-    1876: "Wild Bill assassinated in Deadwood",
-    1883: "Buffalo Bill's Wild West show debuts",
-    1893: "Buffalo Bill performs at Chicago World's Fair",
-    1917: "Buffalo Bill dies in Denver"
-  };
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setYear(prevYear => {
-        const newYear = prevYear + 1;
-        if (newYear > 1917) return 1837;
-        return newYear;
-      });
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, []);
-
-  useEffect(() => {
-    setEvent(events[year] || '');
-  }, [year]);
-
-  return (
-    <div className="timeline">
-      <h2 className="text-2xl font-bold mb-4">Year: {year}</h2>
-      <p className="text-lg">{event}</p>
-    </div>
-  );
-};
-
-export default Timeline;
-"""
-
-# Use the html component to render the React Timeline
-html(
-    f"""
-    <div id="react-root"></div>
-    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
-    <script type="text/babel">
-        {timeline_component}
-        ReactDOM.render(<Timeline />, document.getElementById('react-root'));
-    </script>
-    """
-)
-
-# Comparison table
+# 📊 Compare our legends (no gunslingers were harmed in the making of this table)
 st.subheader("📊 Side-by-Side Comparison")
-
 comparison_data = {
     "Aspect": ["Birth Year", "Death Year", "Nickname Origin", "Primary Occupation", "Famous For", "Colorado Connection", "South Dakota Connection"],
-    "Wild Bill Hickok": ["1837", "1876", "Unclear, possibly due to his nose", "Lawman, Gunfighter", "Marksmanship, Gunfights", "Visited during travels", "Died in Deadwood"],
-    "Buffalo Bill Cody": ["1846", "1917", "Buffalo hunting skills", "Showman, Scout", "Wild West Show", "Home in Denver", "Performed shows in the state"]
+    "Wild Bill Hickok": ["1837", "1876", "Unclear, possibly his wild nose 👃", "Lawman, Gunfighter", "Quick Draw McGraw IRL", "Visited (probably for the beer 🍺)", "Died in Deadwood (worst poker game ever)"],
+    "Buffalo Bill Cody": ["1846", "1917", "Buffalo hunting (not actual buffaloes)", "Showman, Scout", "Wild West Show (wilder than spring break)", "Home in Denver (loved the mountains)", "Performed shows (to rival Deadwood's saloons)"]
 }
 
+# 🎭 Let the comparison show begin!
 df = pd.DataFrame(comparison_data)
 st.table(df)
 
-# Conclusion
+# 🖼️ A picture's worth a thousand yeehaws!
+st.subheader("Wild West Imagery")
+image_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Wild_Bill_Hickok_1869.jpg/800px-Wild_Bill_Hickok_1869.jpg"
+stx.bouncing_image(image_source=image_url, animate=True, animation_time=1500, height=300, width=200)
+
+# 🌅 Ride off into the sunset with our conclusion
 st.markdown("""
 ## 🌅 Conclusion: Legends of the West
 
-Both Wild Bill Hickok and Buffalo Bill Cody played significant roles in shaping the mythology and reality of the American West. While their paths diverged in many ways, both men left an indelible mark on American history and popular culture.
+Yeehaw! We've corralled the tales of two of the wildest cowboys to ever roam the American frontier! 🤠
+
+- 🔫 **Wild Bill Hickok**: The man, the myth, the mustache! He lived fast, died young, and left a good-looking corpse (with a really bad poker hand).
+
+- 🎪 **Buffalo Bill Cody**: The original showman who put the 'wild' in Wild West! He turned frontier life into a circus... literally!
+
+These two buckaroos shaped the West faster than a tumbleweek 🌿 rollin' in a tornado! Their legacy is as enduring as the smell of a cowboy's boots after a long cattle drive. 🐄💨
 
-- 🔫 **Wild Bill Hickok** embodied the image of the fearless lawman and skilled gunfighter, his life and death becoming the stuff of legend.
-- 🎪 **Buffalo Bill Cody** transformed his real-life adventures into grand spectacles, sharing his vision of the West with audiences around the world.
+So next time you're sipping sarsaparilla 🥤 in a saloon, tip your hat 🤠 to Wild Bill and Buffalo Bill - the OG influencers of the American West!
 
-Their stories, intertwined with the development of Colorado and South Dakota, continue to captivate our imaginations and remind us of a bygone era in American history.
+Remember, in the words of the great philosopher Woody from Toy Story: "There's a snake in my boot!" 🐍👢 (Okay, maybe that's not relevant, but it's still a great quote!)
 """)
 
-# Run the Streamlit app
+# 🎬 That's all, folks!
 if __name__ == "__main__":
     st.sidebar.markdown("---")
-    st.sidebar.markdown("Created with ❤️ using Streamlit")
+    st.sidebar.markdown("Created with ❤️ and a lot of 🤠 using Streamlit")