real messages from backend to frontend

protossbot/src/bot.rs

@@ -48,6 +48,18 @@ impl AiModule for ProtosBot {
     build_manager::on_frame(game, &player, &mut locked_state);
     worker_management::assign_idle_workers_to_minerals(game, &player, &mut locked_state);
 
+    // Update web server with current build status
+    let stage_name = locked_state
+      .build_stages
+      .get(locked_state.current_stage_index)
+      .map(|s| s.name.clone())
+      .unwrap_or_else(|| "Unknown".to_string());
+    self.build_status.update(
+      stage_name,
+      locked_state.current_stage_index,
+      locked_state.stage_item_status.clone(),
+    );
+
     build_manager::print_debug_build_status(game, &player, &locked_state);
     draw_unit_ids(game);
   }
@@ -92,10 +104,19 @@ impl AiModule for ProtosBot {
 pub struct ProtosBot {
   game_state: Arc<Mutex<GameState>>,
   shared_speed: crate::web_server::SharedGameSpeed,
+  build_status: crate::web_server::SharedBuildStatus,
 }
 
 impl ProtosBot {
-  pub fn new(game_state: Arc<Mutex<GameState>>, shared_speed: crate::web_server::SharedGameSpeed) -> Self {
+  pub fn new(
-    Self { game_state, shared_speed }
+    game_state: Arc<Mutex<GameState>>,
+    shared_speed: crate::web_server::SharedGameSpeed,
+    build_status: crate::web_server::SharedBuildStatus,
+  ) -> Self {
+    Self {
+      game_state,
+      shared_speed,
+      build_status,
+    }
   }
 }

protossbot/src/main.rs

@@ -6,20 +6,31 @@ mod web_server;
 use bot::ProtosBot;
 use state::game_state::GameState;
 use std::sync::{Arc, Mutex};
-use web_server::SharedGameSpeed;
+use web_server::{SharedBuildStatus, SharedGameSpeed};
 
 fn main() {
   println!("Starting RustBot...");
 
   let game_state = Arc::new(Mutex::new(GameState::default()));
   let shared_speed = SharedGameSpeed::new(42); // Default speed (slowest)
+  let build_status = SharedBuildStatus::new();
 
   // Start web server in a separate thread
   let shared_speed_clone = shared_speed.clone();
+  let build_status_clone = build_status.clone();
   std::thread::spawn(move || {
     let runtime = tokio::runtime::Runtime::new().unwrap();
-    runtime.block_on(web_server::start_web_server(shared_speed_clone));
+    runtime.block_on(web_server::start_web_server(
+      shared_speed_clone,
+      build_status_clone,
+    ));
   });
 
-  rsbwapi::start(move |_game| ProtosBot::new(game_state.clone(), shared_speed.clone()));
+  rsbwapi::start(move |_game| {
+    ProtosBot::new(
+      game_state.clone(),
+      shared_speed.clone(),
+      build_status.clone(),
+    )
+  });
 }

protossbot/src/state/game_state.rs

@@ -1,5 +1,5 @@
-use std::collections::HashMap;
 use rsbwapi::{Order, Position, Unit, UnitType, UpgradeType};
+use std::collections::HashMap;
 
 use crate::state::build_stages::BuildStage;
 
@@ -9,9 +9,9 @@ pub struct GameState {
   pub build_stages: Vec<BuildStage>,
   pub current_stage_index: usize,
   pub desired_game_speed: i32,
+  pub stage_item_status: HashMap<String, String>,
 }
 
-
 impl Default for GameState {
   fn default() -> Self {
     Self {
@@ -20,6 +20,7 @@ impl Default for GameState {
       build_stages: crate::state::build_stages::get_build_stages(),
       current_stage_index: 0,
       desired_game_speed: 20,
+      stage_item_status: HashMap::new(),
     }
   }
 }

protossbot/src/utils/build_manager.rs

@@ -7,6 +7,10 @@ use crate::{
 
 pub fn on_frame(game: &Game, player: &Player, state: &mut GameState) {
   check_and_advance_stage(player, state);
+
+  // Update stage item status
+  state.stage_item_status = get_status_for_stage_items(game, player, state);
+
   try_start_next_build(game, player, state);
 }
 
@@ -61,6 +65,74 @@ fn try_start_next_build(game: &Game, player: &Player, state: &mut GameState) {
   }
 }
 
+fn get_status_for_stage_items(
+  game: &Game,
+  player: &Player,
+  state: &GameState,
+) -> std::collections::HashMap<String, String> {
+  let mut status_map = std::collections::HashMap::new();
+
+  let Some(current_stage) = state.build_stages.get(state.current_stage_index) else {
+    return status_map;
+  };
+
+  for (unit_type, &desired_count) in &current_stage.desired_counts {
+    let unit_name = unit_type.name().to_string();
+    let current_count = count_units_of_type(player, state, *unit_type);
+
+    if current_count >= desired_count {
+      status_map.insert(
+        unit_name,
+        format!("Complete ({}/{})", current_count, desired_count),
+      );
+      continue;
+    }
+
+    if !can_afford_unit(player, *unit_type) {
+      let minerals_short = unit_type.mineral_price() - player.minerals();
+      let gas_short = unit_type.gas_price() - player.gas();
+      status_map.insert(
+        unit_name,
+        format!(
+          "Need {} minerals, {} gas ({}/{})",
+          minerals_short.max(0),
+          gas_short.max(0),
+          current_count,
+          desired_count
+        ),
+      );
+      continue;
+    }
+
+    if unit_type.is_building() {
+      if let Some(builder) = find_builder_for_unit(player, *unit_type) {
+        let build_location =
+          build_location_utils::find_build_location(game, &builder, *unit_type, 20);
+        if build_location.is_none() {
+          status_map.insert(
+            unit_name,
+            format!("No build location ({}/{})", current_count, desired_count),
+          );
+          continue;
+        }
+      } else {
+        status_map.insert(
+          unit_name,
+          format!("No builder available ({}/{})", current_count, desired_count),
+        );
+        continue;
+      }
+    }
+
+    status_map.insert(
+      unit_name,
+      format!("Ready to build ({}/{})", current_count, desired_count),
+    );
+  }
+
+  status_map
+}
+
 fn get_next_thing_to_build(game: &Game, player: &Player, state: &GameState) -> Option<UnitType> {
   let current_stage = state.build_stages.get(state.current_stage_index)?;
 
@@ -68,6 +140,7 @@ fn get_next_thing_to_build(game: &Game, player: &Player, state: &GameState) -> O
     return Some(pylon);
   }
 
+  let status_map = get_status_for_stage_items(game, player, state);
   let mut candidates = Vec::new();
 
   for (unit_type, &desired_count) in &current_stage.desired_counts {
@@ -77,20 +150,10 @@ fn get_next_thing_to_build(game: &Game, player: &Player, state: &GameState) -> O
       continue;
     }
 
-    if !can_afford_unit(player, *unit_type) {
+    let status = status_map.get(&unit_type.name().to_string());
-      continue;
+    if status.is_some() && status.unwrap().starts_with("Ready to build") {
+      candidates.push(*unit_type);
     }
-
-    if unit_type.is_building() {
-      let builder = find_builder_for_unit(player, *unit_type)?;
-      let build_location =
-        build_location_utils::find_build_location(game, &builder, *unit_type, 20);
-      if build_location.is_none() {
-        continue;
-      }
-    }
-
-    candidates.push(*unit_type);
   }
 
   candidates

protossbot/src/web_server.rs

@@ -6,6 +6,7 @@ use axum::{
   Json, Router,
 };
 use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
 use std::sync::{Arc, Mutex};
 use tower_http::{cors::CorsLayer, services::ServeDir};
 
@@ -30,6 +31,48 @@ impl SharedGameSpeed {
   }
 }
 
+#[derive(Clone, Default)]
+pub struct BuildStatusData {
+  pub stage_name: String,
+  pub stage_index: usize,
+  pub item_status: HashMap<String, String>,
+}
+
+#[derive(Clone)]
+pub struct SharedBuildStatus {
+  data: Arc<Mutex<BuildStatusData>>,
+}
+
+impl SharedBuildStatus {
+  pub fn new() -> Self {
+    Self {
+      data: Arc::new(Mutex::new(BuildStatusData::default())),
+    }
+  }
+
+  pub fn update(
+    &self,
+    stage_name: String,
+    stage_index: usize,
+    item_status: HashMap<String, String>,
+  ) {
+    let mut data = self.data.lock().unwrap();
+    data.stage_name = stage_name;
+    data.stage_index = stage_index;
+    data.item_status = item_status;
+  }
+
+  pub fn get(&self) -> BuildStatusData {
+    self.data.lock().unwrap().clone()
+  }
+}
+
+#[derive(Clone)]
+struct AppState {
+  game_speed: SharedGameSpeed,
+  build_status: SharedBuildStatus,
+}
+
 #[derive(Serialize, Deserialize)]
 pub struct GameSpeedResponse {
   pub speed: i32,
@@ -40,13 +83,26 @@ pub struct GameSpeedRequest {
   pub speed: i32,
 }
 
-async fn get_game_speed(State(state): State<SharedGameSpeed>) -> Response {
+#[derive(Serialize, Deserialize)]
-  let speed = state.get();
+pub struct BuildStatusResponse {
+  pub stage_name: String,
+  pub stage_index: usize,
+  pub items: Vec<BuildItemStatusInfo>,
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct BuildItemStatusInfo {
+  pub unit_name: String,
+  pub status: String,
+}
+
+async fn get_game_speed(State(app_state): State<AppState>) -> Response {
+  let speed = app_state.game_speed.get();
   (StatusCode::OK, Json(GameSpeedResponse { speed })).into_response()
 }
 
 async fn set_game_speed(
-  State(state): State<SharedGameSpeed>,
+  State(app_state): State<AppState>,
   Json(payload): Json<GameSpeedRequest>,
 ) -> Response {
   if payload.speed < -1 || payload.speed > 1000 {
@@ -57,7 +113,7 @@ async fn set_game_speed(
       .into_response();
   }
 
-  state.set(payload.speed);
+  app_state.game_speed.set(payload.speed);
 
   (
     StatusCode::OK,
@@ -68,17 +124,44 @@ async fn set_game_speed(
     .into_response()
 }
 
-pub async fn start_web_server(shared_speed: SharedGameSpeed) {
+async fn get_build_status(State(app_state): State<AppState>) -> Response {
+  let data = app_state.build_status.get();
+
+  let items: Vec<BuildItemStatusInfo> = data
+    .item_status
+    .iter()
+    .map(|(unit_name, status)| BuildItemStatusInfo {
+      unit_name: unit_name.clone(),
+      status: status.clone(),
+    })
+    .collect();
+
+  let response = BuildStatusResponse {
+    stage_name: data.stage_name,
+    stage_index: data.stage_index,
+    items,
+  };
+
+  (StatusCode::OK, Json(response)).into_response()
+}
+
+pub async fn start_web_server(shared_speed: SharedGameSpeed, build_status: SharedBuildStatus) {
   let static_dir = std::env::current_dir().unwrap().join("static");
 
   let cors = CorsLayer::very_permissive();
 
+  let app_state = AppState {
+    game_speed: shared_speed,
+    build_status,
+  };
+
   let app = Router::new()
     .route("/api/speed", get(get_game_speed))
     .route("/api/speed", post(set_game_speed))
+    .route("/api/build-status", get(get_build_status))
     .layer(cors)
     .fallback_service(ServeDir::new(static_dir))
-    .with_state(shared_speed);
+    .with_state(app_state);
 
   let addr = "127.0.0.1:3333";
 

protossbot/static/index.html

@@ -1,220 +1,345 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
-  <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Protoss Bot - Game Speed Control</title>
+    <title>Protoss Bot - Game Speed Control</title>
-  <style>
+    <style>
-    * {
+      * {
-      margin: 0;
+        margin: 0;
-      padding: 0;
+        padding: 0;
-      box-sizing: border-box;
+        box-sizing: border-box;
-    }
+      }
 
-    body {
+      body {
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-      background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
-      min-height: 100vh;
+        min-height: 100vh;
-      display: flex;
+        display: flex;
-      justify-content: center;
+        justify-content: center;
-      align-items: center;
+        align-items: center;
-      padding: 20px;
+        padding: 20px;
-    }
+      }
 
-    .container {
+      .container {
-      background: #1e1e1e;
+        background: #1e1e1e;
-      border: 2px solid #d4af37;
+        border: 2px solid #d4af37;
-      border-radius: 20px;
+        border-radius: 20px;
-      box-shadow: 0 20px 60px rgba(212, 175, 55, 0.3);
+        box-shadow: 0 20px 60px rgba(212, 175, 55, 0.3);
-      padding: 40px;
+        padding: 40px;
-      max-width: 500px;
+        max-width: 500px;
-      width: 100%;
+        width: 100%;
-    }
+      }
 
-    h1 {
+      h1 {
-      color: #d4af37;
+        color: #d4af37;
-      margin-bottom: 30px;
+        margin-bottom: 30px;
-      font-size: 28px;
+        font-size: 28px;
-      text-align: center;
+        text-align: center;
-    }
+      }
 
-    .control-group {
+      .control-group {
-      margin-bottom: 30px;
+        margin-bottom: 30px;
-    }
+      }
 
-    label {
+      label {
-      display: block;
+        display: block;
-      color: #d4af37;
+        color: #d4af37;
-      font-weight: 600;
+        font-weight: 600;
-      margin-bottom: 10px;
+        margin-bottom: 10px;
-      font-size: 14px;
+        font-size: 14px;
-    }
+      }
 
-    .speed-display {
+      .speed-display {
-      text-align: center;
+        text-align: center;
-      margin-bottom: 20px;
+        margin-bottom: 20px;
-    }
+      }
 
-    .speed-value {
+      .speed-value {
-      font-size: 48px;
+        font-size: 48px;
-      font-weight: bold;
+        font-weight: bold;
-      color: #d4af37;
+        color: #d4af37;
-      display: block;
+        display: block;
-    }
+      }
 
-    .speed-label {
+      .speed-label {
-      color: #999;
+        color: #999;
-      font-size: 12px;
+        font-size: 12px;
-      text-transform: uppercase;
+        text-transform: uppercase;
-      letter-spacing: 1px;
+        letter-spacing: 1px;
-    }
+      }
 
-    .preset-buttons {
+      .preset-buttons {
-      display: grid;
+        display: grid;
-      grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(4, 1fr);
-      gap: 10px;
+        gap: 10px;
-      margin-bottom: 20px;
+        margin-bottom: 20px;
-    }
+      }
 
-    button {
+      button {
-      padding: 20px 12px;
+        padding: 20px 12px;
-      border: 2px solid #d4af37;
+        border: 2px solid #d4af37;
-      border-radius: 8px;
+        border-radius: 8px;
-      font-size: 18px;
+        font-size: 18px;
-      font-weight: 600;
+        font-weight: 600;
-      cursor: pointer;
+        cursor: pointer;
-      transition: all 0.2s ease;
+        transition: all 0.2s ease;
-      background: #2d2d2d;
+        background: #2d2d2d;
-      color: #d4af37;
+        color: #d4af37;
-    }
+      }
 
-    button small {
+      button small {
-      display: block;
+        display: block;
-      font-size: 11px;
+        font-size: 11px;
-      font-weight: normal;
+        font-weight: normal;
-      margin-top: 4px;
+        margin-top: 4px;
-      opacity: 0.7;
+        opacity: 0.7;
-    }
+      }
 
-    button:hover {
+      button:hover {
-      background: #d4af37;
+        background: #d4af37;
-      color: #1e1e1e;
+        color: #1e1e1e;
-      transform: translateY(-2px);
+        transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
+        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
-    }
+      }
 
-    button:active {
+      button:active {
-      transform: translateY(0);
+        transform: translateY(0);
-    }
+      }
 
-    .status {
+      .status {
-      padding: 12px;
+        padding: 12px;
-      border-radius: 8px;
+        border-radius: 8px;
-      text-align: center;
+        text-align: center;
-      font-size: 13px;
+        font-size: 13px;
-      margin-top: 20px;
+        margin-top: 20px;
-      opacity: 0;
+        opacity: 0;
-      transition: opacity 0.3s ease;
+        transition: opacity 0.3s ease;
-    }
+      }
 
-    .status.visible {
+      .status.visible {
-      opacity: 1;
+        opacity: 1;
-    }
+      }
 
-    .status.success {
+      .status.success {
-      background: rgba(34, 197, 94, 0.2);
+        background: rgba(34, 197, 94, 0.2);
-      color: #4ade80;
+        color: #4ade80;
-      border: 1px solid #22c55e;
+        border: 1px solid #22c55e;
-    }
+      }
 
-    .status.error {
+      .status.error {
-      background: rgba(239, 68, 68, 0.2);
+        background: rgba(239, 68, 68, 0.2);
-      color: #f87171;
+        color: #f87171;
-      border: 1px solid #ef4444;
+        border: 1px solid #ef4444;
-    }
+      }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>⚡ Game Speed Control</h1>
 
-    <div class="speed-display">
+      .build-status-section {
-      <span class="speed-value" id="currentSpeed">42</span>
+        margin-top: 30px;
-      <span class="speed-label">Current Speed</span>
+        padding-top: 30px;
-    </div>
+        border-top: 2px solid #333;
+      }
 
-    <div class="control-group">
+      .build-status-section h2 {
-      <label>Select Speed</label>
+        color: #d4af37;
-      <div class="preset-buttons">
+        font-size: 20px;
-        <button onclick="setSpeed(42)">42<br><small>Slowest</small></button>
+        margin-bottom: 20px;
-        <button onclick="setSpeed(1)">1<br><small>Fast</small></button>
+      }
-        <button onclick="setSpeed(0)">0<br><small>Fastest</small></button>
+
-        <button onclick="setSpeed(-1)">-1<br><small>Max</small></button>
+      .stage-info {
+        background: #2d2d2d;
+        padding: 15px;
+        border-radius: 8px;
+        margin-bottom: 15px;
+        border: 1px solid #444;
+      }
+
+      .stage-name {
+        color: #d4af37;
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 10px;
+      }
+
+      .build-items {
+        list-style: none;
+      }
+
+      .build-item {
+        padding: 8px 10px;
+        margin: 5px 0;
+        background: #1e1e1e;
+        border-radius: 4px;
+        border-left: 3px solid #d4af37;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .build-item.ready {
+        border-left-color: #22c55e;
+      }
+
+      .build-item.complete {
+        border-left-color: #3b82f6;
+        opacity: 0.7;
+      }
+
+      .build-item.waiting {
+        border-left-color: #f59e0b;
+      }
+
+      .unit-name {
+        color: #d4af37;
+        font-weight: 600;
+      }
+
+      .unit-status {
+        color: #999;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>⚡ Game Speed Control</h1>
+
+      <div class="speed-display">
+        <span class="speed-value" id="currentSpeed">42</span>
+        <span class="speed-label">Current Speed</span>
+      </div>
+
+      <div class="control-group">
+        <label>Select Speed</label>
+        <div class="preset-buttons">
+          <button onclick="setSpeed(42)">42<br /><small>Slowest</small></button>
+          <button onclick="setSpeed(1)">1<br /><small>Fast</small></button>
+          <button onclick="setSpeed(0)">0<br /><small>Fastest</small></button>
+          <button onclick="setSpeed(-1)">-1<br /><small>Max</small></button>
+        </div>
+      </div>
+
+      <div id="status" class="status"></div>
+
+      <div class="build-status-section">
+        <h2>📋 Build Status</h2>
+        <div class="stage-info">
+          <div class="stage-name" id="stageName">Loading...</div>
+          <ul class="build-items" id="buildItems">
+            <li class="build-item">Connecting to bot...</li>
+          </ul>
+        </div>
       </div>
     </div>
 
-    <div id="status" class="status"></div>
+    <script id="game-speed-script">
-  </div>
+      const currentSpeedDisplay = document.getElementById("currentSpeed");
+      const statusDiv = document.getElementById("status");
 
-  <script>
+      async function fetchCurrentSpeed() {
-    const currentSpeedDisplay = document.getElementById('currentSpeed');
+        try {
-    const statusDiv = document.getElementById('status');
+          const response = await fetch("http://127.0.0.1:3333/api/speed");
-
+          if (response.ok) {
-    // Fetch current speed on load
+            const data = await response.json();
-    async function fetchCurrentSpeed() {
+            updateSpeedDisplay(data.speed);
-      try {
+          }
-        const response = await fetch('http://127.0.0.1:3333/api/speed');
+        } catch (error) {
-        if (response.ok) {
+          showStatus("Unable to connect to bot", "error");
-          const data = await response.json();
-          updateSpeedDisplay(data.speed);
         }
-      } catch (error) {
-        showStatus('Unable to connect to bot', 'error');
       }
-    }
 
-    // Update speed display
+      function updateSpeedDisplay(speed) {
-    function updateSpeedDisplay(speed) {
+        currentSpeedDisplay.textContent = speed;
-      currentSpeedDisplay.textContent = speed;
+      }
-    }
 
-    // Set speed via API
+      async function setSpeed(speed) {
-    async function setSpeed(speed) {
+        try {
-      try {
+          const response = await fetch("http://127.0.0.1:3333/api/speed", {
-        const response = await fetch('http://127.0.0.1:3333/api/speed', {
+            method: "POST",
-          method: 'POST',
+            headers: {
-          headers: {
+              "Content-Type": "application/json",
-            'Content-Type': 'application/json',
+            },
-          },
+            body: JSON.stringify({ speed: speed }),
-          body: JSON.stringify({ speed: speed }),
+          });
-        });
 
-        if (response.ok) {
+          if (response.ok) {
-          const data = await response.json();
+            const data = await response.json();
-          updateSpeedDisplay(data.speed);
+            updateSpeedDisplay(data.speed);
-          showStatus(`Speed set to ${data.speed}`, 'success');
+            showStatus(`Speed set to ${data.speed}`, "success");
-        } else {
+          } else {
-          showStatus('Failed to update speed', 'error');
+            showStatus("Failed to update speed", "error");
+          }
+        } catch (error) {
+          showStatus("Connection error", "error");
         }
-      } catch (error) {
-        showStatus('Connection error', 'error');
       }
-    }
 
-    // Show status message
+      function showStatus(message, type) {
-    function showStatus(message, type) {
+        statusDiv.textContent = message;
-      statusDiv.textContent = message;
+        statusDiv.className = `status ${type} visible`;
-      statusDiv.className = `status ${type} visible`;
+        setTimeout(() => {
-      setTimeout(() => {
+          statusDiv.classList.remove("visible");
-        statusDiv.classList.remove('visible');
+        }, 3000);
-      }, 3000);
+      }
-    }
 
-    // Fetch current speed on page load
+      fetchCurrentSpeed();
-    fetchCurrentSpeed();
+      setInterval(fetchCurrentSpeed, 1000);
+    </script>
 
-    // Poll for speed changes every 2 seconds
+    <script id="build-status-script">
-    setInterval(fetchCurrentSpeed, 2000);
+      const stageNameEl = document.getElementById("stageName");
-  </script>
+      const buildItemsEl = document.getElementById("buildItems");
-</body>
+
+      async function fetchBuildStatus() {
+        try {
+          const response = await fetch(
+            "http://127.0.0.1:3333/api/build-status",
+          );
+          if (response.ok) {
+            const data = await response.json();
+            updateBuildStatus(data);
+          }
+        } catch (error) {
+          console.error("Failed to fetch build status:", error);
+        }
+      }
+
+      function updateBuildStatus(data) {
+        stageNameEl.textContent = `Stage ${data.stage_index + 1}: ${data.stage_name}`;
+
+        if (data.items.length === 0) {
+          buildItemsEl.innerHTML =
+            '<li class="build-item">No build items in current stage</li>';
+          return;
+        }
+
+        // Sort items alphabetically by unit name
+        const sortedItems = [...data.items].sort((a, b) =>
+          a.unit_name.localeCompare(b.unit_name),
+        );
+
+        buildItemsEl.innerHTML = sortedItems
+          .map((item) => {
+            let itemClass = "build-item";
+            if (item.status.includes("Complete")) {
+              itemClass += " complete";
+            } else if (item.status.includes("Ready to build")) {
+              itemClass += " ready";
+            } else {
+              itemClass += " waiting";
+            }
+
+            return `
+          <li class="${itemClass}">
+            <span class="unit-name">${item.unit_name}</span>
+            <span class="unit-status">${item.status}</span>
+          </li>
+        `;
+          })
+          .join("");
+      }
+
+      fetchBuildStatus();
+      setInterval(fetchBuildStatus, 1000);
+    </script>
+  </body>
 </html>

scripts/5-configure-registry.sh

@@ -20,11 +20,6 @@ INSTALL_DIR="$PROJECT_DIR/starcraft"
 
 SC_WIN_PATH="$(winepath -w "$INSTALL_DIR" 2>/dev/null || echo "Z:${INSTALL_DIR}" | sed 's/\//\\\\/g')\\\\"
 
-# if wine REG QUERY "HKEY_LOCAL_MACHINE\\SOFTWARE\\Blizzard Entertainment\\Starcraft" /v InstallPath >/dev/null 2>&1; then
-#     echo "Registry already configured, skipping..."
-#     exit 0
-# fi
-
 echo "Configuring registry..."
 # Core registry entries
 wine REG ADD "HKEY_LOCAL_MACHINE\\SOFTWARE\\Blizzard Entertainment\\Starcraft" \