Update Game of Life example (#1462)

* update game_of_life example

examples/game_of_life/src/lib.rs

@@ -158,6 +158,8 @@ impl Component for Model {
         let callback = link.callback(|_| Msg::Tick);
         let handle = IntervalService::spawn(Duration::from_millis(200), callback);
 
+        let (cellules_width, cellules_height) = (53, 40);
+
         Model {
             link,
             active: false,
@@ -165,10 +167,10 @@ impl Component for Model {
                 Cellule {
                     life_state: LifeState::Dead
                 };
-                53 * 40
+                cellules_width * cellules_height
             ],
-            cellules_width: 53,
-            cellules_height: 40,
+            cellules_width,
+            cellules_height,
             job: Box::new(handle),
         }
     }
@@ -211,6 +213,24 @@ impl Component for Model {
     }
 
     fn view(&self) -> Html {
+        let cell_rows =
+            self.cellules
+                .chunks(self.cellules_width)
+                .enumerate()
+                .map(|(y, cellules)| {
+                    let idx_offset = y * self.cellules_width;
+
+                    let cells = cellules
+                        .iter()
+                        .enumerate()
+                        .map(|(x, cell)| self.view_cellule(idx_offset + x, cell));
+                    html! {
+                        <div key=y class="game-row">
+                            { for cells }
+                        </div>
+                    }
+                });
+
         html! {
             <div>
                 <section class="game-container">
@@ -220,7 +240,7 @@ impl Component for Model {
                     </header>
                     <section class="game-area">
                         <div class="game-of-life">
-                            { for self.cellules.iter().enumerate().map(|c| self.view_cellule(c)) }
+                            { for cell_rows }
                         </div>
                         <div class="game-buttons">
                             <button class="game-button" onclick=self.link.callback(|_| Msg::Random)>{ "Random" }</button>
@@ -243,7 +263,7 @@ impl Component for Model {
 }
 
 impl Model {
-    fn view_cellule(&self, (idx, cellule): (usize, &Cellule)) -> Html {
+    fn view_cellule(&self, idx: usize, cellule: &Cellule) -> Html {
         let cellule_status = {
             if cellule.life_state == LifeState::Alive {
                 "cellule-live"
@@ -252,7 +272,7 @@ impl Model {
             }
         };
         html! {
-            <div class=("game-cellule", cellule_status)
+            <div key=idx class=("game-cellule", cellule_status)
                 onclick=self.link.callback(move |_| Msg::ToggleCellule(idx))>
             </div>
         }

examples/game_of_life/static/styles.css

@@ -1,98 +1,104 @@
 html,
 body {
-    margin: 0;
-    padding: 0;
-    text-align: center;
+  margin: 0;
+  padding: 0;
+  text-align: center;
 }
 
 body {
-    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    line-height: 1.4em;
-    color: #4d4d4d;
-    min-width: 230px;
-	max-width: 1000px;
-    margin: 0 auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-font-smoothing: antialiased;
-    font-smoothing: antialiased;
-    font-weight: 300;
-    background-color: #000000;
+  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  color: #4d4d4d;
+  min-width: 230px;
+  max-width: 1000px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  font-weight: 300;
+  background-color: #000000;
 }
 
 .app-logo {
-    animation: app-logo-scale infinite 4s linear;
-    height: 80px;
-    width: 80px;
+  animation: app-logo-scale infinite 4s linear;
+  height: 80px;
+  width: 80px;
 }
 
 .app-header {
-    background-color: #000;
-    height: 130px;
-    color: aliceblue;
+  background-color: #000;
+  height: 130px;
+  color: aliceblue;
 }
 
 .app-title {
-    font-size: 24px;
-    width: 100%;
-    font-weight: 100;
-    text-align: center;
-    -webkit-text-rendering: optimizeLegibility;
-    -moz-text-rendering: optimizeLegibility;
-    text-rendering: optimizeLegibility;
+  font-size: 24px;
+  width: 100%;
+  font-weight: 100;
+  text-align: center;
+  -webkit-text-rendering: optimizeLegibility;
+  -moz-text-rendering: optimizeLegibility;
+  text-rendering: optimizeLegibility;
 }
 
 .app-footer {
-    background-color: #000000;
-    height: 30px;
-    padding: 10px;
+  background-color: #000000;
+  height: 30px;
+  padding: 10px;
 }
 
 .footer-text {
-    color: aliceblue;
-    padding-left: 20px;
-    font-size: 14px;
+  color: aliceblue;
+  padding-left: 20px;
+  font-size: 14px;
 }
 
 .game-area {
-    width: 94%;
-    height: 510px;
-    max-width: 500px;
-    margin: 20px auto;
+  width: 94%;
+  margin: 20px auto;
 }
 
 .game-container {
-    background: #000000;
-    margin: 20px 0 0px 0;
+  background: #000000;
+  margin: 20px 0 0px 0;
 }
 
 .game-of-life {
-    background-color: aliceblue;
-    height: 400px;
-    width: 100%;
-    overflow: hidden;
+  display: inline-block;
+  background-color: aliceblue;
+  width: max-content;
+  overflow: hidden;
+}
+
+.game-row {
+  line-height: 0;
 }
 
 .game-cellule {
-    float: left;
-    width: 8px;
-    height: 8px;
-    border: 1px solid #ccc;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border: 1px solid #ccc;
 }
 
 .cellule-dead {
-    background-color: white;
+  background-color: white;
 }
 
 .cellule-live {
-    background-color: black ;
+  background-color: black;
 }
 
 .game-buttons {
-    width: 100%;
-    margin-top: 20px;
+  width: 100%;
+  margin-top: 20px;
 }
 
 @keyframes app-logo-scale {
-    from { transform: scale(0.8); }
-    to { transform: scale(1.2); }
+  from {
+    transform: scale(0.8);
+  }
+  to {
+    transform: scale(1.2);
+  }
 }