Day 14 web visualization

Author: Cadiac

aoc-solver/src/y2024/day14.rs

@@ -8,12 +8,12 @@ type Coords = (i64, i64);
 const DIRECTIONS: [Coords; 4] = [(0, -1), (1, 0), (0, 1), (-1, 0)];
 
 #[derive(Debug, PartialEq)]
-struct Robot {
+pub struct Robot {
     v: Coords,
     pos: Coords,
 }
 
-fn parse(input: &str) -> Result<Vec<Robot>, AocError> {
+pub fn parse(input: &str) -> Result<Vec<Robot>, AocError> {
     let machines = input
         .trim()
         .lines()
@@ -37,7 +37,7 @@ fn parse(input: &str) -> Result<Vec<Robot>, AocError> {
     Ok(machines)
 }
 
-fn predict(robot: &Robot, width: u64, height: u64, seconds: i64) -> Coords {
+pub fn predict(robot: &Robot, width: u64, height: u64, seconds: i64) -> Coords {
     let x = (robot.pos.0 + seconds * robot.v.0).rem_euclid(width as i64);
     let y = (robot.pos.1 + seconds * robot.v.1).rem_euclid(height as i64);
     (x, y)
@@ -148,11 +148,11 @@ impl Solution for Day14 {
         let width = 101;
         let height = 103;
 
-        // Turns out this logic was more or less useless - all the robot velocities
-        // are less than the (prime) width & height, so the repeated positions are just
-        // determined by lcm(101, 103). But this logic would find the repeating patterns
-        // even if some robots were moving faster than the size of the area and
-        // possibly teleporting more than once per second.
+        // Turns out this logic was more or less useless - the width and the height are
+        // both primes, and also all the robot velocities less than the area dimensions,
+        // so the repeated positions are just determined by lcm(101, 103).
+        // But this logic would find the repeating patterns even if the dimensions were not
+        // prime or if robots were teleporting many times per second.
         let loops_after = repeats_every(&robots, width, height);
 
         // Assume that the christmas tree probably has a large continuous area,

aoc-web/src/header.rs

@@ -33,6 +33,7 @@ pub fn header(props: &HeaderProps) -> Html {
                                     <NavLink route={Route::Solution { year: 2024, day: 12 }} current={props.route.clone()} text={"12"}/>
                                     <NavLink route={Route::Solution { year: 2024, day: 13 }} current={props.route.clone()} text={"13"}/>
                                     <NavLink route={Route::Solution { year: 2024, day: 14 }} current={props.route.clone()} text={"14"}/>
+                                    <NavLink route={Route::EasterEgg} current={props.route.clone()} text={"14+"}/>
                                 </>
                             }
                         },

aoc-web/src/router.rs

@@ -4,7 +4,7 @@ use yew_router::prelude::*;
 
 use crate::{
     header::Header, home::Home, runner::SolutionTask, solution::Solution,
-    syntax::SyntaxHighlightTask, y2022,
+    syntax::SyntaxHighlightTask, y2022, y2024,
 };
 
 #[derive(Clone, Routable, PartialEq)]
@@ -21,6 +21,8 @@ pub enum Route {
     Lava,
     #[at("/2022/22/cube")]
     Cube,
+    #[at("/2024/14/visual")]
+    EasterEgg,
     #[not_found]
     #[at("/404")]
     NotFound,
@@ -31,6 +33,7 @@ pub fn switch(route: Route) -> Html {
         Route::Index | Route::NotFound => 2024,
         Route::Solution { year, day: _ } | Route::Home { year } => year,
         Route::Lava | Route::Rope | Route::Cube => 2022,
+        Route::EasterEgg => 2024,
     };
 
     let main = match route {
@@ -48,6 +51,9 @@ pub fn switch(route: Route) -> Html {
         Route::Cube => {
             html! { <y2022::Cube/> }
         }
+        Route::EasterEgg => {
+            html! { <y2024::EasterEgg/> }
+        }
         Route::NotFound => html! {<h1>{ "Not Found :(" }</h1>},
     };
 

aoc-web/src/y2024/easter_egg.rs

@@ -0,0 +1,105 @@
+use std::collections::HashSet;
+
+use yew::prelude::*;
+
+use aoc_solver::solution::Solution;
+use aoc_solver::y2024::day14::{parse, predict, Day14, Robot};
+
+pub struct EasterEgg {
+    seconds: i64,
+    width: u64,
+    height: u64,
+    robots: Vec<Robot>,
+    predicted: HashSet<(i64, i64)>,
+}
+
+pub enum Msg {
+    TimeChanged(i64),
+}
+
+impl Component for EasterEgg {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        let robots = parse(Day14.default_input()).unwrap();
+        let width = 101;
+        let height = 103;
+        let seconds = 7892;
+
+        let predicted: HashSet<(i64, i64)> = robots
+            .iter()
+            .map(|robot| predict(robot, width, height, seconds))
+            .collect();
+
+        Self {
+            seconds,
+            width,
+            height,
+            robots,
+            predicted,
+        }
+    }
+
+    fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool) {}
+
+    fn destroy(&mut self, _: &Context<Self>) {}
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::TimeChanged(new_time) => {
+                self.seconds = new_time;
+                self.predicted = self
+                    .robots
+                    .iter()
+                    .map(|robot| predict(robot, self.width, self.height, self.seconds))
+                    .collect();
+
+                true
+            }
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let output = (0..self.height)
+            .map(|y| {
+                (0..self.width)
+                    .map(|x| {
+                        if self.predicted.contains(&(x as i64, y as i64)) {
+                            '#'
+                        } else {
+                            '.'
+                        }
+                    })
+                    .collect::<String>()
+            })
+            .collect::<Vec<_>>()
+            .join("\n");
+
+        html! {
+            <>
+                <h2>{"-- Day 14 --"}</h2>
+
+                <input
+                    class="full-width"
+                    type="range"
+                    min="0"
+                    max="10403"
+                    value={self.seconds.to_string()}
+                    step="1"
+                    oninput={ctx.link().callback(|event: InputEvent| {
+                        let input = event.target_unchecked_into::<web_sys::HtmlInputElement>();
+                        let seconds = input.value().parse::<i64>().unwrap_or_default();
+                        Msg::TimeChanged(seconds)
+                    })}
+                />
+                <span class="success">
+                    {format!("t={}", self.seconds)}
+                </span>
+                <pre class="small">
+                    <code>{ output }</code>
+                </pre>
+            </>
+        }
+    }
+}

aoc-web/src/y2024/mod.rs

@@ -1 +1,3 @@
+mod easter_egg;
 
+pub use self::easter_egg::EasterEgg;

aoc-web/static/styles.css

@@ -222,4 +222,42 @@ code:before {
   opacity: 0;
   animation: fadeInAnimation ease-in 400ms;
   animation-fill-mode: forwards;
-}
+}
+
+.full-width {
+  width: 100%;
+  max-width: 900px;
+}
+
+.small {
+  font-size: 0.75rem;
+}
+
+input[type="range" i] {
+  padding-top: 1em;
+  padding-bottom: 1em;
+  margin: 1em 0 0 0;
+  height: 10px;
+  border: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  background-size: 16px 100%;
+  background-position: 0% 0%;
+  background-repeat: repeat;
+}
+
+input[type="range" i]::-webkit-slider-runnable-track {
+  height: 5px; 
+  background-color: #009900;
+}
+
+input[type="range" i]::-webkit-slider-thumb {
+  width: 10px;
+  height: 30px;
+  background-color: #ffff66;
+  box-shadow: 0 0 5px #ffff66;
+  -webkit-appearance: none;
+  margin-top: -1em;
+}
+