example(tic-tac-toe): done

EqualMa · EqualMa · commit aba26732b478 · 2022-03-02T01:35:00.000+08:00
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/README.md b/README.md
@@ -34,7 +34,7 @@ folder. You can preview them at [this site](https://frender-rs.github.io/frender
 
     ```toml
     [dependencies]
-    frender = "= 1.0.0-alpha.6"
+    frender = "= 1.0.0-alpha.7"
     ```
 
 3.  Create `index.html` in the project root directory.
diff --git a/examples/tic-tac-toe/Cargo.toml b/examples/tic-tac-toe/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "tic-tac-toe"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+frender = { path = "../../frender" }
diff --git a/examples/tic-tac-toe/index.html b/examples/tic-tac-toe/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tic Tac Toe - frender</title>
+    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+    <link data-trunk rel="css" href="styles.css" />
+  </head>
+  <body>
+    <div id="frender-root"></div>
+  </body>
+</html>
diff --git a/examples/tic-tac-toe/src/data.rs b/examples/tic-tac-toe/src/data.rs
@@ -0,0 +1,135 @@
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Square {
+    Empty,
+    FillX,
+    FillO,
+}
+
+impl Square {
+    pub fn is_empty(&self) -> bool {
+        match self {
+            Square::Empty => true,
+            _ => false,
+        }
+    }
+
+    pub fn to_str(&self) -> &'static str {
+        match self {
+            Square::Empty => "",
+            Square::FillX => "X",
+            Square::FillO => "O",
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub struct Board {
+    pub squares: [Square; 9],
+}
+
+impl Board {
+    pub fn new_empty() -> Self {
+        Self {
+            squares: [Square::Empty; 9],
+        }
+    }
+
+    pub fn calculate_winner(&self) -> Square {
+        static LINES: &[[usize; 3]] = &[
+            [0, 1, 2],
+            [3, 4, 5],
+            [6, 7, 8],
+            [0, 3, 6],
+            [1, 4, 7],
+            [2, 5, 8],
+            [0, 4, 8],
+            [2, 4, 6],
+        ];
+
+        for &[a, b, c] in LINES {
+            let a = &self.squares[a];
+            if !a.is_empty() && a == &self.squares[b] && a == &self.squares[c] {
+                return *a;
+            }
+        }
+
+        Square::Empty
+    }
+}
+
+#[derive(Debug, Clone)]
+pub struct Game {
+    // make the fields private so that we can guard the game logic
+    history: Vec<Board>,
+    step_number: usize,
+}
+
+impl Game {
+    pub fn new() -> Self {
+        let mut history = Vec::with_capacity(9);
+        history.push(Board::new_empty());
+        Game {
+            history,
+            step_number: 0,
+        }
+    }
+
+    pub fn current(&self) -> &Board {
+        &self.history[self.step_number]
+    }
+
+    pub fn full_history(&self) -> &Vec<Board> {
+        &self.history
+    }
+
+    pub fn step_number(&self) -> usize {
+        self.step_number
+    }
+
+    #[inline]
+    pub fn x_is_next(&self) -> bool {
+        self.step_number % 2 == 0
+    }
+
+    #[inline]
+    pub fn next_player(&self) -> Square {
+        if self.x_is_next() {
+            Square::FillX
+        } else {
+            Square::FillO
+        }
+    }
+
+    /// returns whether state changed
+    pub fn click(&mut self, i: usize) -> bool {
+        let current = self.current();
+
+        // i valid and the game is not over and the square is not filled
+        if i <= 8 && current.squares[i].is_empty() && current.calculate_winner().is_empty() {
+            // copy current board as the next
+            let mut next = *current;
+            next.squares[i] = self.next_player();
+
+            let keep = self.step_number + 1;
+            if keep < self.history.len() {
+                self.history.truncate(keep);
+            }
+            self.history.push(next);
+
+            self.step_number += 1;
+
+            true
+        } else {
+            false
+        }
+    }
+
+    /// returns whether state changed
+    pub fn jump_to(&mut self, i: usize) -> bool {
+        if &i == &self.step_number || &i >= &self.history.len() {
+            return false;
+        }
+        self.step_number = i;
+        true
+    }
+}
diff --git a/examples/tic-tac-toe/src/main.rs b/examples/tic-tac-toe/src/main.rs
@@ -0,0 +1,165 @@
+//! The frender version of
+//! [ReactJs Tic Tac Toe](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)
+
+pub mod data;
+
+use frender::prelude::*;
+
+def_props! {
+    pub struct SquareProps {
+        pub value<TNode: react::Node>(v: TNode) -> react::AnyNode {
+            v.into_node()
+        },
+        pub on_click: react::AnyFn<dyn Fn()>,
+    }
+}
+
+#[component]
+fn Square(props: &SquareProps) {
+    rsx!(
+        <button class="square" on_click={props.on_click.clone()}>
+            {&props.value}
+        </button>
+    )
+}
+
+def_props! {
+    pub struct BoardProps {
+        pub board: data::Board,
+        pub on_click: react::AnyFn<dyn Fn(usize)>,
+    }
+}
+
+#[component]
+fn Board(props: &BoardProps) {
+    let render_square = |i: usize| {
+        let on_click = props.on_click.clone();
+        rsx!(
+            <Square
+                value:={props.board.squares[i].to_str()}
+                on_click={move || on_click(i)}
+            />
+        )
+    };
+
+    rsx!(
+        <div>
+            <div class="board-row">
+                {render_square(0)}
+                {render_square(1)}
+                {render_square(2)}
+            </div>
+            <div class="board-row">
+                {render_square(3)}
+                {render_square(4)}
+                {render_square(5)}
+            </div>
+            <div class="board-row">
+                {render_square(6)}
+                {render_square(7)}
+                {render_square(8)}
+            </div>
+        </div>
+    )
+}
+
+#[component]
+fn Game() {
+    let (state, state_setter) = react::use_state!(() => data::Game::new());
+
+    let current = state.current();
+    let winner = current.calculate_winner();
+
+    let status = match winner {
+        data::Square::Empty => format!("Next player: {}", state.next_player().to_str()),
+        _ => format!("Winner: {}", winner.to_str()),
+    };
+
+    let on_click = {
+        let state_setter = state_setter.clone();
+        move |i| {
+            state_setter.set_optional_from_old(move |old| {
+                let mut game = (**old).clone();
+                if game.click(i) {
+                    // game state changed
+                    Some(game)
+                } else {
+                    // game state not changed
+                    None
+                }
+            })
+        }
+    };
+
+    let jump_to = move |i| {
+        state_setter.set_optional_from_old(move |old| {
+            let mut game = (**old).clone();
+            if game.jump_to(i) {
+                // game state changed
+                Some(game)
+            } else {
+                // game state not changed
+                None
+            }
+        })
+    };
+
+    let moves = (0..state.full_history().len())
+        .map(|i: usize| {
+            let jump_to = jump_to.clone();
+            let desc = if i > 0 {
+                format!("Go to move #{}", i)
+            } else {
+                "Go to game start".to_string()
+            };
+            rsx!(
+              <li key={i}>
+                <button on_click={move || jump_to(i)}>{desc}</button>
+              </li>
+            )
+        })
+        .collect::<Vec<_>>();
+
+    rsx!(
+        <div class="game">
+            <div class="game-board">
+                <Board
+                    board={*current}
+                    on_click={on_click}
+                />
+            </div>
+            <div class="game-info">
+                <div>{status}</div>
+                <ol>{moves}</ol>
+            </div>
+        </div>
+    )
+}
+
+#[component(main(mount_element_id = "frender-root"))]
+fn Main() {
+    rsx!(
+        <div style={style! {
+            "margin": "auto",
+            "padding": 16,
+            "maxWidth": 768,
+        }}>
+            <h1>
+                "Tic Tac Toe - "
+                <i>
+                    <a href="https://github.com/frender-rs/frender" target={html::AnchorTarget::Blank}>
+                        <b children="f" />
+                        "render"
+                    </a>
+                </i>
+            </h1>
+            <p>
+                "This is the frender version of "
+                <a href="https://codepen.io/gaearon/pen/gWWZgR?editors=0010" target={html::AnchorTarget::Blank}>"ReactJs Tic Tac Toe"</a>
+            </p>
+            <main style={style!{ "marginTop": "32px" }}>
+                <Game />
+            </main>
+        </div>
+    )
+}
diff --git a/examples/tic-tac-toe/styles.css b/examples/tic-tac-toe/styles.css
