Update app.py

app.py

@@ -1,8 +1,5 @@
 import random
 import streamlit as st
-from PIL import Image, ImageDraw
-import requests
-from io import BytesIO
 
 def roll_dice():
     """Simulates rolling a six-sided dice."""
@@ -20,45 +17,32 @@ def update_player_position(player_pos, dice, board):
              st.write("Oops! You encountered a snake")
     return player_pos
 
-def calculate_player_coordinates(position):
-  """Calculates approximate x, y coordinates for the player position."""
-  row = (position - 1) // 10
-  col = (position - 1) % 10
+def draw_board(player_position):
+    """Draws the game board using Streamlit."""
+    board_size = 10
+    board_squares = []
+    for i in range(100):
+        row = i // board_size
+        col = i % board_size
+        square_number = i + 1
 
-  # Adjust for snake and ladder board layout
-  if row % 2 == 1:
-      col = 9 - col
+         #Adjust the number according to the row odd or even
+        if row % 2 == 1:
+            square_number = (row * board_size) + (board_size - col)
+        else:
+            square_number = (row * board_size) + col + 1
 
-  x = 50 + col * 50 # Adjust these values as necessary
-  y = 450 - row * 50 # Adjust these values as necessary
+        square_style = "background-color: lightgray; padding: 10px; border: 1px solid black; text-align: center;"
+        if square_number == player_position:
+            square_style = "background-color: red; padding: 10px; border: 1px solid black; text-align: center; color:white; font-weight: bold;"
 
-  return x, y
-
-
-def display_game_board(player_position):
-    board_image_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Snakes_and_ladders_board_simple.svg/1920px-Snakes_and_ladders_board_simple.svg.png"
-
-    try:
-        response = requests.get(board_image_url, stream=True)
-        response.raise_for_status()
-        board_image = Image.open(BytesIO(response.content)).convert("RGBA")
-
-        # Calculate player position coordinates
-        player_x, player_y = calculate_player_coordinates(player_position)
-
-        # Create a drawing context
-        draw = ImageDraw.Draw(board_image)
-
-        # Draw a circle to represent the player at their position
-        radius = 15
-        draw.ellipse((player_x - radius, player_y - radius, player_x + radius, player_y + radius), fill='red')
-
-        st.image(board_image, caption="Snake and Ladder Board", width=500)
-    except requests.exceptions.RequestException as e:
-            st.write(f"Could not load the game board image. Please check your internet connection or try again later. {e}")
-    except Exception as e:
-        st.write(f"An error occurred: {e}")
+        board_squares.append(f"<div style='{square_style}'>{square_number}</div>")
 
+    # create a layout of 10 rows each with 10 columns
+    for row in range(board_size):
+        cols = st.columns(board_size)
+        for col in range(board_size):
+             cols[col].markdown(board_squares[(row * board_size) + col], unsafe_allow_html=True)
 
 
 def snake_and_ladder():
@@ -81,7 +65,7 @@ def snake_and_ladder():
 
     player_pos = st.session_state.player_pos
 
-    display_game_board(player_pos)
+    draw_board(player_pos)
 
     if player_pos < 100:
         if st.button("Roll Dice"):