Skip to content

Commit 034aeb5

Browse files
CartesianXR7CartesianXR7
authored
Updates canvas.rs
1 parent 1c34f4f commit 034aeb5

1 file changed

Lines changed: 1 addition & 34 deletions

File tree

‎src/components/canvas.rs‎

Lines changed: 1 addition & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ pub struct CanvasProps {
1818
pub width: usize,
1919
pub height: usize,
2020
pub rover_state: crate::rover::RoverState,
21-
pub visual_start: Coord, // Visual start marker position
21+
pub visual_start: Coord,
2222
pub traveled_path: Vec<Coord>, // Turquoise path
2323
pub amber_dobs: Vec<Coord>, // Amber DOBs for display
2424
pub on_mouse_down: Callback<Coord>,
@@ -34,10 +34,8 @@ pub fn canvas(props: &CanvasProps) -> Html {
3434
let drag_mode = use_state(|| DragMode::None);
3535
let animation_frame = use_state(|| 0i32);
3636

37-
// Dynamic cell size based on container - responsive to window resize
3837
let cell_size = use_state(|| 20.0f64);
3938

40-
// Calculate cell size based on container - responsive to resize
4139
{
4240
let canvas_ref = canvas_ref.clone();
4341
let cell_size = cell_size.clone();
@@ -64,10 +62,8 @@ pub fn canvas(props: &CanvasProps) -> Html {
6462
}
6563
};
6664

67-
// Initial size calculation
6865
update_size();
6966

70-
// Add resize event listener
7167
let window = web_sys::window().unwrap();
7268
let closure = wasm_bindgen::closure::Closure::wrap(Box::new(move || {
7369
update_size();
@@ -77,7 +73,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
7773
.add_event_listener_with_callback("resize", closure.as_ref().unchecked_ref())
7874
.unwrap();
7975

80-
// Return cleanup function
8176
move || {
8277
if let Some(window) = web_sys::window() {
8378
let _ = window.remove_event_listener_with_callback(
@@ -90,7 +85,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
9085
});
9186
}
9287

93-
// Animation timer for pulsing effect
9488
{
9589
let animation_frame = animation_frame.clone();
9690
use_effect_with((), move |_| {
@@ -102,7 +96,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
10296
});
10397
}
10498

105-
// Main rendering effect - separate from animation
10699
{
107100
let canvas_ref = canvas_ref.clone();
108101
let rover_state = props.rover_state.clone();
@@ -128,21 +121,18 @@ pub fn canvas(props: &CanvasProps) -> Html {
128121
if let Some(canvas) = canvas_ref.cast::<HtmlCanvasElement>() {
129122
let cell_size = cell_size_val;
130123

131-
// Set canvas size
132124
let w_px = (width as f64) * cell_size;
133125
let h_px = (height as f64) * cell_size;
134126
canvas.set_width(w_px as u32);
135127
canvas.set_height(h_px as u32);
136128

137-
// Get 2D context
138129
let context = canvas
139130
.get_context("2d")
140131
.unwrap()
141132
.unwrap()
142133
.dyn_into::<web_sys::CanvasRenderingContext2d>()
143134
.unwrap();
144135

145-
// Clear background
146136
let doc = window().unwrap().document().unwrap();
147137
let body = doc.body().unwrap();
148138
let body_element = body.dyn_into::<HtmlBodyElement>().unwrap();
@@ -152,7 +142,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
152142
context.set_fill_style_str(bg_color);
153143
context.fill_rect(0.0, 0.0, w_px, h_px);
154144

155-
// Draw grid lines
156145
let grid_color = if is_dark { "#1f1f1f" } else { "#e5e7eb" };
157146
context.set_stroke_style_str(grid_color);
158147
context.set_line_width(0.5);
@@ -173,7 +162,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
173162
context.stroke();
174163
}
175164

176-
// LAYER 1: Draw original static obstacles (gray)
177165
let obstacle_color = if is_dark { "#3f3f46" } else { "#52525b" };
178166
context.set_fill_style_str(obstacle_color);
179167
for &(ox, oy) in &rover_state.obstacles {
@@ -189,7 +177,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
189177
}
190178
}
191179

192-
// LAYER 2: Draw amber DOBs (yellow - undiscovered obstacles)
193180
let amber_dob_color = if is_dark { "#d97706" } else { "#f59e0b" };
194181
context.set_fill_style_str(amber_dob_color);
195182
for &(ox, oy) in &amber_dobs {
@@ -205,7 +192,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
205192
}
206193
}
207194

208-
// LAYER 3: Draw converted obstacles (blue - discovered obstacles)
209195
let converted_obstacle_color = if is_dark { "#2563eb" } else { "#3b82f6" };
210196
context.set_fill_style_str(converted_obstacle_color);
211197
for &(ox, oy) in &rover_state.converted_obstacles {
@@ -221,9 +207,7 @@ pub fn canvas(props: &CanvasProps) -> Html {
221207
}
222208
}
223209

224-
// LAYER 4: Draw TURQUOISE traveled path (from visual start to current rover position)
225210
if !traveled_path.is_empty() {
226-
// Turquoise path line
227211
context.set_stroke_style_str("#14b8a6");
228212
context.set_line_width(3.0);
229213
context.set_line_cap("round");
@@ -242,7 +226,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
242226
}
243227
context.stroke();
244228

245-
// Turquoise path dots
246229
context.set_fill_style_str("#0d9488");
247230
for &(x, y) in traveled_path.iter().skip(1) {
248231
let px = (x as f64) * cell_size + (cell_size / 2.0);
@@ -256,7 +239,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
256239
}
257240
}
258241

259-
// LAYER 5: Draw PURPLE future path (from current rover position to goal)
260242
if !rover_state.path.is_empty() && rover_state.path.len() > 1 {
261243
context.set_stroke_style_str("#a855f7");
262244
context.set_line_width(3.0);
@@ -277,7 +259,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
277259
}
278260
context.stroke();
279261

280-
// Purple path dots
281262
context.set_fill_style_str("#9333ea");
282263
if rover_state.path.len() > 2 {
283264
for &(x, y) in
@@ -295,7 +276,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
295276
}
296277
}
297278

298-
// LAYER 6: Draw visual start position (green) - stays in original position
299279
let (start_x, start_y) = visual_start;
300280
if start_x < width && start_y < height {
301281
let x = (start_x as f64) * cell_size;
@@ -313,7 +293,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
313293
.unwrap();
314294
}
315295

316-
// LAYER 7: Draw goal position (red)
317296
let (goal_x, goal_y) = rover_state.goal;
318297
if goal_x < width && goal_y < height {
319298
let x = (goal_x as f64) * cell_size;
@@ -331,24 +310,19 @@ pub fn canvas(props: &CanvasProps) -> Html {
331310
.unwrap();
332311
}
333312

334-
// LAYER 8: Draw rover with circular orange detection range
335313
let (rx, ry) = rover_state.pos;
336314
if rx < width && ry < height {
337315
let cx = (rx as f64) * cell_size + (cell_size / 2.0);
338316
let cy = (ry as f64) * cell_size + (cell_size / 2.0);
339317

340-
// Pulsing circular detection range in orange (2 cells radius)
341318
let time = (frame as f64) * 0.02;
342319
let pulse = (time.sin() * 0.3 + 0.7).max(0.1);
343320

344-
// Draw circular detection range
345321
context.save();
346322

347-
// Set shadow for glow effect
348323
context.set_shadow_color("rgba(251, 146, 60, 0.5)");
349324
context.set_shadow_blur(15.0);
350325

351-
// Main detection circle (2 cells radius)
352326
context.set_stroke_style_str(&format!(
353327
"rgba(251, 146, 60, {})",
354328
pulse * 0.8
@@ -360,7 +334,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
360334
.unwrap();
361335
context.stroke();
362336

363-
// Inner circle for visual effect
364337
context.set_stroke_style_str(&format!(
365338
"rgba(251, 146, 60, {})",
366339
pulse * 0.5
@@ -374,23 +347,20 @@ pub fn canvas(props: &CanvasProps) -> Html {
374347

375348
context.restore();
376349

377-
// Rover body (khaki brown)
378350
context.set_fill_style_str("#8b7355");
379351
context.begin_path();
380352
context
381353
.arc(cx, cy, 10.0, 0.0, std::f64::consts::PI * 2.0)
382354
.unwrap();
383355
context.fill();
384356

385-
// Inner circle
386357
context.set_fill_style_str("#a0926b");
387358
context.begin_path();
388359
context
389360
.arc(cx, cy, 6.0, 0.0, std::f64::consts::PI * 2.0)
390361
.unwrap();
391362
context.fill();
392363

393-
// Inner highlight
394364
context.set_fill_style_str("rgba(255, 255, 255, 0.4)");
395365
context.begin_path();
396366
context
@@ -401,10 +371,8 @@ pub fn canvas(props: &CanvasProps) -> Html {
401371
}
402372
};
403373

404-
// Initial render
405374
render();
406375

407-
// Set up animation loop
408376
let render_loop = gloo_timers::callback::Interval::new(50, move || {
409377
render();
410378
});
@@ -414,7 +382,6 @@ pub fn canvas(props: &CanvasProps) -> Html {
414382
);
415383
}
416384

417-
// Mouse event handlers (unchanged)
418385
let width = props.width;
419386
let height = props.height;
420387
let cell_size_val = *cell_size;

0 commit comments

Comments
 (0)