zehnpaard · November 16, 2016 08:21
diff --git a/react-tutorial.core.cljs b/react-tutorial.core.cljs
 (ns react-tutorial.core
  (:require
    [reagent.core :as r]))

 (defn Square []
  [:button.square])

 (defn Board []
  (let [renderSquare (fn [i] [Square])
        status (r/atom "Next player: X")]
    (fn []
      [:div
       [:div.status @status]
       [:div.board-row
        [renderSquare 0]
        [renderSquare 1]
        [renderSquare 2]]
       [:div.board-row
        [renderSquare 3]
        [renderSquare 4]
        [renderSquare 5]]
       [:div.board-row
        [renderSquare 6]
        [renderSquare 7]
        [renderSquare 8]]])))

 (defn Game []
  [:div.game
   [:div.game-board
    [Board]]
   [:div.game-info
    [:div]
    [:ol]]])

 (r/render
  [Game]
  (js/document.getElementById "container"))


 (defn calculateWinner [squares]
  (let [lines [[0 1 2]
               [3 4 5]
               [6 7 8]
               [0 3 6]
               [1 4 7]
               [2 5 8]
               [0 4 8]
               [2 4 6]]]
    (->> lines
         (filter (fn [[a b c]]
                   (and
                     (not (nil? (get squares a)))
                     (= (get squares a)
                        (get squares b)
                        (get squares c)))))
         first
         first
         (get squares))))
diff --git a/react-tutorial.directories.txt b/react-tutorial.directories.txt
 .
 ├── project.clj
 ├── resources
 │   └── public
 │       ├── css
 │       │   └── main.css
 │       └── index.html
 └── src
    └── react_tutorial
        └── core.cljs
diff --git a/react-tutorial.index.html b/react-tutorial.index.html
 <html>
    <head>
        <link href="css/main.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="container"></div>

        <script src="js/out/goog/base.js"></script>
        <script src="js/main.js"></script>
        <script>goog.require('react_tutorial.core')</script>
    </body>
 </html>
diff --git a/react-tutorial.js-equivalent.js b/react-tutorial.js-equivalent.js
 class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
 }

 class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }
  render() {
    const status = 'Next player: X';
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
 }

 class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
 }

 // ========================================

 ReactDOM.render(
  <Game />,
  document.getElementById('container')
 );

 function calculateWinner(squares) {
  const lines = [
    [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 (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
 }

diff --git a/react-tutorial.main.css b/react-tutorial.main.css
 body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
 }

 ol, ul {
  padding-left: 30px;
 }

 .board-row:after {
  clear: both;
  content: "";
  display: table;
 }

 .status {
  margin-bottom: 10px;
 }

 .square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
 }

 .square:focus {
  outline: none;
 }

 .kbd-navigation .square:focus {
  background: #ddd;
 }

 .game {
  display: flex;
  flex-direction: row;
 }

 .game-info {
  margin-left: 20px;
 }
diff --git a/react-tutorial.project.clj b/react-tutorial.project.clj
 (defproject react-tutorial "0.0.1"
  :dependencies [[org.clojure/clojure "1.8.0"]
                 [org.clojure/clojurescript "1.9.293"]
                 [reagent "0.6.0"]]

  :plugins [[lein-cljsbuild "1.1.4"]
            [lein-figwheel "0.5.7"]]

  :cljsbuild
  {:builds
   {:dev {:source-paths ["src"]
          :figwheel true
          :compiler {:output-to "resources/public/js/main.js"
                     :output-dir "resources/public/js/out/"}}}})
	(ns react-tutorial.core
	(:require
	[reagent.core :as r]))

	(defn Square []
	[:button.square])

	(defn Board []
	(let [renderSquare (fn [i] [Square])
	status (r/atom "Next player: X")]
	(fn []
	[:div
	[:div.status @status]
	[:div.board-row
	[renderSquare 0]
	[renderSquare 1]
	[renderSquare 2]]
	[:div.board-row
	[renderSquare 3]
	[renderSquare 4]
	[renderSquare 5]]
	[:div.board-row
	[renderSquare 6]
	[renderSquare 7]
	[renderSquare 8]]])))

	(defn Game []
	[:div.game
	[:div.game-board
	[Board]]
	[:div.game-info
	[:div]
	[:ol]]])

	(r/render
	[Game]
	(js/document.getElementById "container"))


	(defn calculateWinner [squares]
	(let [lines [[0 1 2]
	[3 4 5]
	[6 7 8]
	[0 3 6]
	[1 4 7]
	[2 5 8]
	[0 4 8]
	[2 4 6]]]
	(->> lines
	(filter (fn [[a b c]]
	(and
	(not (nil? (get squares a)))
	(= (get squares a)
	(get squares b)
	(get squares c)))))
	first
	first
	(get squares))))
	.
	├── project.clj
	├── resources
	│ └── public
	│ ├── css
	│ │ └── main.css
	│ └── index.html
	└── src
	└── react_tutorial
	└── core.cljs
	<html>
	<head>
	<link href="css/main.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<div id="container"></div>

	<script src="js/out/goog/base.js"></script>
	<script src="js/main.js"></script>
	<script>goog.require('react_tutorial.core')</script>
	</body>
	</html>
	class Square extends React.Component {
	render() {
	return (
	<button className="square">
	{/* TODO */}
	</button>
	);
	}
	}

	class Board extends React.Component {
	renderSquare(i) {
	return <Square />;
	}
	render() {
	const status = 'Next player: X';
	return (
	<div>
	<div className="status">{status}</div>
	<div className="board-row">
	{this.renderSquare(0)}
	{this.renderSquare(1)}
	{this.renderSquare(2)}
	</div>
	<div className="board-row">
	{this.renderSquare(3)}
	{this.renderSquare(4)}
	{this.renderSquare(5)}
	</div>
	<div className="board-row">
	{this.renderSquare(6)}
	{this.renderSquare(7)}
	{this.renderSquare(8)}
	</div>
	</div>
	);
	}
	}

	class Game extends React.Component {
	render() {
	return (
	<div className="game">
	<div className="game-board">
	<Board />
	</div>
	<div className="game-info">
	<div>{/* status */}</div>
	<ol>{/* TODO */}</ol>
	</div>
	</div>
	);
	}
	}

	// ========================================

	ReactDOM.render(
	<Game />,
	document.getElementById('container')
	);

	function calculateWinner(squares) {
	const lines = [
	[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 (let i = 0; i < lines.length; i++) {
	const [a, b, c] = lines[i];
	if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
	return squares[a];
	}
	}
	return null;
	}
	body {
	font: 14px "Century Gothic", Futura, sans-serif;
	margin: 20px;
	}

	ol, ul {
	padding-left: 30px;
	}

	.board-row:after {
	clear: both;
	content: "";
	display: table;
	}

	.status {
	margin-bottom: 10px;
	}

	.square {
	background: #fff;
	border: 1px solid #999;
	float: left;
	font-size: 24px;
	font-weight: bold;
	line-height: 34px;
	height: 34px;
	margin-right: -1px;
	margin-top: -1px;
	padding: 0;
	text-align: center;
	width: 34px;
	}

	.square:focus {
	outline: none;
	}

	.kbd-navigation .square:focus {
	background: #ddd;
	}

	.game {
	display: flex;
	flex-direction: row;
	}

	.game-info {
	margin-left: 20px;
	}
	(defproject react-tutorial "0.0.1"
	:dependencies [[org.clojure/clojure "1.8.0"]
	[org.clojure/clojurescript "1.9.293"]
	[reagent "0.6.0"]]

	:plugins [[lein-cljsbuild "1.1.4"]
	[lein-figwheel "0.5.7"]]

	:cljsbuild
	{:builds
	{:dev {:source-paths ["src"]
	:figwheel true
	:compiler {:output-to "resources/public/js/main.js"
	:output-dir "resources/public/js/out/"}}}})