gm-井子棋demo

34a8556a · Matt 高萌 · 34a8556a · 34a8556a · 34a8556a · 34a8556a
Commit 34a8556a authored Jul 23, 2019 by Matt 高萌
24 changed files
--- a/.editorconfig
+++ b/.editorconfig
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
--- a/.eslintrc
+++ b/.eslintrc
+{
+  "extends": "umi"
+}
--- a/.gitignore
+++ b/.gitignore
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# misc
+.DS_Store
+npm-debug.log*
--- a/.roadhogrc.mock.js
+++ b/.roadhogrc.mock.js
+
+export default {
+};
--- a/.webpackrc
+++ b/.webpackrc
+{
+}
--- a/README.md
+++ b/README.md
+# demo
+
--- a/mock/.gitkeep
+++ b/mock/.gitkeep
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "private": true,
+  "scripts": {
+    "start": "roadhog server",
+    "build": "roadhog build",
+    "lint": "eslint --ext .js src test",
+    "precommit": "npm run lint"
+  },
+  "dependencies": {
+    "dva": "^2.4.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "babel-plugin-dva-hmr": "^0.3.2",
+    "eslint": "^4.14.0",
+    "eslint-config-umi": "^0.1.1",
+    "eslint-plugin-flowtype": "^2.34.1",
+    "eslint-plugin-import": "^2.6.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-react": "^7.1.0",
+    "husky": "^0.12.0",
+    "redbox-react": "^1.4.3",
+    "roadhog": "^2.5.0-beta.4"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Dva Demo</title>
+  <link rel="stylesheet" href="index.css" />
+</head>
+<body>
+
+  <div id="root"></div>
+  <script src="index.js"></script>
+
+</body>
+</html>
--- a/src/assets/yay.jpg
+++ b/src/assets/yay.jpg
--- a/src/components/Example.js
+++ b/src/components/Example.js
+import React from 'react';
+
+const Example = () => {
+  return (
+    <div>
+      Example
+    </div>
+  );
+};
+
+Example.propTypes = {
+};
+
+export default Example;
--- a/src/index.css
+++ b/src/index.css
+
+html, body, :global(#root) {
+  height: 100%;
+}
+
--- a/src/index.js
+++ b/src/index.js
+import dva from 'dva';
+import './index.css';
+
+// 1. Initialize
+const app = dva();
+
+// 2. Plugins
+// app.use({});
+
+// 3. Model
+app.model(require('./models/ticTacToe').default);
+
+// 4. Router
+app.router(require('./router').default);
+
+// 5. Start
+app.start('#root');
--- a/src/models/example.js
+++ b/src/models/example.js
+
+export default {
+
+  namespace: 'example',
+
+  state: {},
+
+  subscriptions: {
+    setup({ dispatch, history }) {  // eslint-disable-line
+    },
+  },
+
+  effects: {
+    *fetch({ payload }, { call, put }) {  // eslint-disable-line
+      yield put({ type: 'save' });
+    },
+  },
+
+  reducers: {
+    save(state, action) {
+      return { ...state, ...action.payload };
+    },
+  },
+
+};
--- a/src/models/ticTacToe.js
+++ b/src/models/ticTacToe.js
+export default {
+  namespace: "ticTacToe",
+  state: {
+    history: [
+      {
+        squares: Array(9).fill(null)
+      }
+    ],
+    stepNumber: 0,
+    xIsNext: true
+  },
+
+  reducers: {
+    // 落子
+    nextStep(state, { payload: index }) {
+      let history = state.history.slice(0, state.stepNumber + 1);
+      let current = history[history.length - 1];
+      let squares = current.squares.slice();
+      squares[index] = state.xIsNext ? "X" : "O";
+
+      return {
+        history: history.concat([{ squares: squares }]),
+        stepNumber: history.length,
+        xIsNext: !state.xIsNext
+      }
+    },
+
+    // 回跳
+    jumpTo(state, { payload: stepNumber }) {
+      return {
+        ...state,
+        stepNumber: stepNumber,
+        xIsNext: (stepNumber % 2) === 0
+      }
+    }
+  }
+}
--- a/src/router.js
+++ b/src/router.js
+import React from 'react';
+import { Router, Route, Switch } from 'dva/router';
+// import IndexPage from './routes/IndexPage';
+import TicTacToe from './routes/TicTacToe';
+
+function RouterConfig({ history }) {
+  return (
+    <Router history={history}>
+      <Switch>
+        <Route path="/" exact component={TicTacToe} />
+      </Switch>
+    </Router>
+  );
+}
+
+export default RouterConfig;
--- a/src/routes/IndexPage.css
+++ b/src/routes/IndexPage.css
+
+.normal {
+  font-family: Georgia, sans-serif;
+  margin-top: 3em;
+  text-align: center;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: normal;
+  letter-spacing: -1px;
+}
+
+.welcome {
+  height: 328px;
+  background: url(../assets/yay.jpg) no-repeat center 0;
+  background-size: 388px 328px;
+}
+
+.list {
+  font-size: 1.2em;
+  margin-top: 1.8em;
+  list-style: none;
+  line-height: 1.5em;
+}
+
+.list code {
+  background: #f7f7f7;
+}
--- a/src/routes/IndexPage.js
+++ b/src/routes/IndexPage.js
+import React from 'react';
+import { connect } from 'dva';
+import styles from './IndexPage.css';
+
+function IndexPage() {
+  return (
+    <div className={styles.normal}>
+      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
+      <div className={styles.welcome} />
+      <ul className={styles.list}>
+        <li>To get started, edit <code>src/index.js</code> and save to reload.</li>
+        <li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
+      </ul>
+    </div>
+  );
+}
+
+IndexPage.propTypes = {
+};
+
+export default connect()(IndexPage);
--- a/src/routes/TicTacToe/index.css
+++ b/src/routes/TicTacToe/index.css
+body {
+  font: 14px "Century Gothic", Futura, sans-serif;
+  margin: 20px;
+}
+
+ol,
+ul {
+  padding-left: 30px;
+}
+.game-board {
+  width: 102px;
+}
+.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;
+}
--- a/src/routes/TicTacToe/index.jsx
+++ b/src/routes/TicTacToe/index.jsx
+import React from 'react';
+import { connect } from 'dva';
+import styles from "./index.css";
+
+
+function Square(props) {
+  return (
+    <button className={styles.square} onClick={props.onClick}>
+      {props.value}
+    </button>
+  );
+}
+
+
+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;
+}
+
+
+class TicTacToe extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      history: [
+        {
+          squares: Array(9).fill(null)
+        }
+      ],
+      stepNumber: 0,
+      xIsNext: true
+    };
+  }
+
+  nextStep(key) {
+    const ticTacToe = this.props.ticTacToe;
+    const squares = ticTacToe.history[ticTacToe.stepNumber].squares;
+    if (calculateWinner(squares) || squares[key]) {
+      return;
+    }
+    this.props.dispatch({
+      type: "ticTacToe/nextStep",
+      payload: key
+    });
+  }
+
+  jumpTo(key) {
+    this.props.dispatch({
+      type: "ticTacToe/jumpTo",
+      payload: key
+    });
+  }
+
+  render() {
+    const ticTacToe = this.props.ticTacToe;
+    const xIsNext = ticTacToe.xIsNext;
+    const history = ticTacToe.history;
+    const current = history[ticTacToe.stepNumber];
+    const winner = calculateWinner(current.squares);
+
+    const moves = history.map((item, move) => {
+      const desc = move ?
+        'Go to move #' + move :
+        'Go to game start';
+      return (
+        <li key={move}>
+          <button onClick={() => this.jumpTo(move)}>{desc}</button>
+        </li>
+      );
+    });
+
+    const squares = current.squares;
+    return (
+      <div className={styles.game}>
+        <div className={styles['game-board']}>
+          {squares.map((item, key) => (
+            <Square key={key} index={key} value={item} onClick={() => this.nextStep(key)} />
+          ))}
+        </div>
+        <div className={styles['game-info']}>
+          <div>{
+            winner ? "Winner: " + winner :
+              "Next player: " + (xIsNext ? "X" : "O")
+          }</div>
+          <ol>{moves}</ol>
+        </div>
+      </div>
+    )
+  }
+
+}
+
+export default connect(({ ticTacToe }) => ({ ticTacToe }))(TicTacToe)
--- a/src/routes/test.jsx
+++ b/src/routes/test.jsx
+import React from 'react'
+
+function Square(props) {
+  return (
+    <button className="square" onClick={props.onClick}>
+      {props.value}
+    </button>
+  );
+}
+
+class Board extends React.Component {
+  renderSquare(i) {
+    return (
+      <Square
+        value={this.props.squares[i]}
+        onClick={() => this.props.onClick(i)}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <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 {
+  constructor(props) {
+    super(props);
+    this.state = {
+      history: [
+        {
+          squares: Array(9).fill(null)
+        }
+      ],
+      stepNumber: 0,
+      xIsNext: true
+    };
+  }
+
+  handleClick(i) {
+    const history = this.state.history.slice(0, this.state.stepNumber + 1);
+    const current = history[history.length - 1];
+    const squares = current.squares.slice();
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    squares[i] = this.state.xIsNext ? "X" : "O";
+    this.setState({
+      history: history.concat([
+        {
+          squares: squares
+        }
+      ]),
+      stepNumber: history.length,
+      xIsNext: !this.state.xIsNext
+    });
+  }
+
+  jumpTo(step) {
+    this.setState({
+      stepNumber: step,
+      xIsNext: (step % 2) === 0
+    });
+  }
+
+  render() {
+    const history = this.state.history;
+    const current = history[this.state.stepNumber];
+    const winner = calculateWinner(current.squares);
+
+    const moves = history.map((step, move) => {
+      const desc = move ?
+        'Go to move #' + move :
+        'Go to game start';
+      return (
+        <li key={move}>
+          <button onClick={() => this.jumpTo(move)}>{desc}</button>
+        </li>
+      );
+    });
+
+    let status;
+    if (winner) {
+      status = "Winner: " + winner;
+    } else {
+      status = "Next player: " + (this.state.xIsNext ? "X" : "O");
+    }
+
+    return (
+      <div className="game">
+        <div className="game-board">
+          <Board
+            squares={current.squares}
+            onClick={i => this.handleClick(i)}
+          />
+        </div>
+        <div className="game-info">
+          <div>{status}</div>
+          <ol>{moves}</ol>
+        </div>
+      </div>
+    );
+  }
+}
+
+// ========================================
+
+// ReactDOM.render(<Game />, document.getElementById("root"));
+export default Game;
+
+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;
+}
--- a/src/services/example.js
+++ b/src/services/example.js
+import request from '../utils/request';
+
+export function query() {
+  return request('/api/users');
+}
--- a/src/utils/request.js
+++ b/src/utils/request.js
+import fetch from 'dva/fetch';
+
+function parseJSON(response) {
+  return response.json();
+}
+
+function checkStatus(response) {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  }
+
+  const error = new Error(response.statusText);
+  error.response = response;
+  throw error;
+}
+
+/**
+ * Requests a URL, returning a promise.
+ *
+ * @param  {string} url       The URL we want to request
+ * @param  {object} [options] The options we want to pass to "fetch"
+ * @return {object}           An object containing either "data" or "err"
+ */
+export default function request(url, options) {
+  return fetch(url, options)
+    .then(checkStatus)
+    .then(parseJSON)
+    .then(data => ({ data }))
+    .catch(err => ({ err }));
+}