import json
import streamlit as st
import matplotlib.pyplot as plt

# Page config
st.set_page_config(layout="wide") 

# Load grid data
with open('grid.json') as f:
    grid_data = json.load(f)

# Extract coordinates
buildings = [[b['coords'][0], b['coords'][1]] for b in grid_data['buildings']]
stores = [[s['coords'][0], s['coords'][1]] for s in grid_data['stores']]
roads = [(r['start'], r['end']) for r in grid_data['roads']]

# Plot map
fig, ax = plt.subplots()
ax.axis([0, 10, 0, 10])
ax.set_xticks([i for i in range(11)])
ax.set_yticks([i for i in range(11)])
ax.grid(color='grey', linestyle='-', linewidth=0.25)
ax.scatter(*zip(*buildings), color='red') 
ax.scatter(*zip(*stores), color='green')

# Draw roads
for start, end in roads:
    ax.plot([start[0], end[0]], [start[1], end[1]], color='black')

# Show figure in Streamlit    
st.pyplot(fig)