Skip to content

C
chess-game
Commit dbb915a2 authored by 佚名's avatar 佚名 🎅🏼
Browse files
Options

fix: bugs

parent b2a15326
Show whitespace changes
Inline Side-by-side
Showing with 166 additions and 113 deletions
package.json
View file @ dbb915a2
......@@ -11,7 +11,8 @@
"history": "^4.9.0",
"less": "^3.9.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
"react-dom": "^16.2.0",
"styled-components": "^4.3.2"
},
"devDependencies": {
"babel-plugin-dva-hmr": "^0.3.2",
......
src/components/Board.js
View file @ dbb915a2
import React, { Component } from 'react';
import React from 'react';
import Square from './Square';
import './styles/board.css';
import { BoardRow } from './style';
class Board extends Component {
renderSquare(i) {
const Board = (props) => {
const renderSquare = (i) => {
return (
<Square
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
value={props.squares[i]}
onClick={() => props.dispatch({type: 'game/handleClick', payload: 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>
<BoardRow>
{renderSquare(0)}
{renderSquare(1)}
{renderSquare(2)}
</BoardRow>
<BoardRow>
{renderSquare(3)}
{renderSquare(4)}
{renderSquare(5)}
</BoardRow>
<BoardRow>
{renderSquare(6)}
{renderSquare(7)}
{renderSquare(8)}
</BoardRow>
</div>
)
}
}
export default Board;
\ No newline at end of file
src/components/Square.js
View file @ dbb915a2
import React from 'react';
import './styles/square.css';
import { Button } from './style';
// import './styles/square.css';
//import 样式未生效，问题查找中，暂且定义行内样式
const style = {
width: '34px',
height: '34px',
border: '1px solid #999',
fontSize: '24px',
fontWeight: 'bold',
lineHeight: '34px',
marginTop: '-1px',
marginRight: '-1px',
padding: '0',
textAlign: 'center',
background: '#fff',
}
const Square = (props) => {
return (
<button
style={style}
className="square"
<Button
onClick={props.onClick}
>
{props.value}
</button>
</Button>
);
};
......
src/components/styles/square.css → src/components/style.js
View file @ dbb915a2
.square {
width: 34px;
height: 34px;
border: 1px solid #999;
font-size: 24px;
font-weight: bold;
import styled from 'styled-components';
export const Button = styled.button`
float: left;
width: 60px;
height: 60px;
line-height: 34px;
margin-top: -1px;
margin-right: -1px;
padding: 0;
text-align: center;
background: #fff;
}
border: 1px solid #999;
font-size: 30px;
font-weight: bold;
text-align: center;
&:focus {
outline: none
}
`
.square:focus {
outline: none;
}
\ No newline at end of file
export const BoardRow = styled.div`
&:after {
clear: both;
content: "";
display: table;
}
`
\ No newline at end of file
src/components/styles/board.css deleted 100644 → 0
View file @ b2a15326
.board-row:after {
clear: both;
content: "";
display: table;
}
\ No newline at end of file
src/index.css
View file @ dbb915a2
html, body, :global(#root) {
height: 100%;
}
src/models/game.js
View file @ dbb915a2
......@@ -15,7 +15,6 @@ export default {
reducers: {
handleClick(state, action){
function calculateWinner(squares) {
const lines = [
[0, 1, 2],
......@@ -39,8 +38,9 @@ export default {
const history = state.history.slice(0, state.stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
console.log(action.payload)
if (calculateWinner(squares) || squares[action.payload]) {
return;
return {...state};
}
squares[action.payload] = state.xIsNext ? "X" : "O";
return {
......@@ -55,7 +55,8 @@ export default {
},
jumpTo(state, action){
return {
stepNumber: action.move,
...state,
stepNumber: action.payload,
xIsNext: (action.move % 2) === 0
}
}
......
src/routes/Game.js
View file @ dbb915a2
import React from 'react';
import { connect } from 'dva';
import Board from '../components/Board';
import './game.css';
import style from './game.css';
function calculateWinner(squares) {
const lines = [
......@@ -43,13 +43,12 @@ const Game = ({ history, stepNumber, xIsNext, dispatch }) => {
status = "Next player: " + (xIsNext ? "X" : "O");
}
return (
<div className="game">
<div className={style.game}>
<div className="game-board">
<Board
squares={current.squares}
onClick={(i) => dispatch({type: 'game/handleClick', payload: i}) }
dispatch={dispatch}
/>
<div>样式目前存在较大问题，玩法功能也存在较多问题，正常玩法流程可进行，多次点击目前报错，以及时间回溯功能也报错，下午完善，上午才着手做这个，昨天看了份dva视频教程</div>
</div>
<div className="game-info">
<div>{status}</div>
......
src/routes/game.css
View file @ dbb915a2
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;
margin: 100px 200px;
}
\ No newline at end of file
yarn.lock
View file @ dbb915a2
......@@ -966,7 +966,7 @@
invariant "^2.2.0"
lodash "^4.2.0"
"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.4", "@babel/traverse@^7.4.5", "@babel/traverse@^7.5.0":
"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.4", "@babel/traverse@^7.4.5", "@babel/traverse@^7.5.0":
version "7.5.0"
resolved "https://registry.npm.taobao.org/@babel/traverse/download/@babel/traverse-7.5.0.tgz?cache=0&sync_timestamp=1562245150727&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftraverse%2Fdownload%2F%40babel%2Ftraverse-7.5.0.tgz#4216d6586854ef5c3c4592dab56ec7eb78485485"
integrity sha1-QhbWWGhU71w8RZLatW7H63hIVIU=
......@@ -999,6 +999,23 @@
lodash "^4.17.11"
to-fast-properties "^2.0.0"
"@emotion/is-prop-valid@^0.8.1":
version "0.8.2"
resolved "https://registry.npm.taobao.org/@emotion/is-prop-valid/download/@emotion/is-prop-valid-0.8.2.tgz#b9692080da79041683021fcc32f96b40c54c59dc"
integrity sha1-uWkggNp5BBaDAh/MMvlrQMVMWdw=
dependencies:
"@emotion/memoize" "0.7.2"
"@emotion/memoize@0.7.2":
version "0.7.2"
resolved "https://registry.npm.taobao.org/@emotion/memoize/download/@emotion/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30"
integrity sha1-f0xxt2VAaN/MytKVU1IPmEzGazA=
"@emotion/unitless@^0.7.0":
version "0.7.4"
resolved "https://registry.npm.taobao.org/@emotion/unitless/download/@emotion/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
integrity sha1-qHtLBOWuFKiNSOvvFQFfa30fVnc=
"@types/history@*":
version "4.7.2"
resolved "https://registry.npm.taobao.org/@types/history/download/@types/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
......@@ -1793,6 +1810,21 @@ babel-plugin-react-require@3.0.0:
resolved "https://registry.npm.taobao.org/babel-plugin-react-require/download/babel-plugin-react-require-3.0.0.tgz#2e4e7b4496b93a654a1c80042276de4e4eeb20e3"
integrity sha1-Lk57RJa5OmVKHIAEInbeTk7rIOM=
"babel-plugin-styled-components@>= 1":
version "1.10.6"
resolved "https://registry.npm.taobao.org/babel-plugin-styled-components/download/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b"
integrity sha1-+HgpU3URFfrwmp+SQxQ2kSw0AGs=
dependencies:
"@babel/helper-annotate-as-pure" "^7.0.0"
"@babel/helper-module-imports" "^7.0.0"
babel-plugin-syntax-jsx "^6.18.0"
lodash "^4.17.11"
babel-plugin-syntax-jsx@^6.18.0:
version "6.18.0"
resolved "https://registry.npm.taobao.org/babel-plugin-syntax-jsx/download/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
babel-plugin-syntax-object-rest-spread@^6.13.0:
version "6.13.0"
resolved "https://registry.npm.taobao.org/babel-plugin-syntax-object-rest-spread/download/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
......@@ -2372,6 +2404,11 @@ camelcase@^4.0.0, camelcase@^4.1.0:
resolved "https://registry.npm.taobao.org/camelcase/download/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
camelize@^1.0.0:
version "1.0.0"
resolved "https://registry.npm.taobao.org/camelize/download/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
caniuse-api@^1.5.2:
version "1.6.1"
resolved "https://registry.npm.taobao.org/caniuse-api/download/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
......@@ -2985,6 +3022,11 @@ crypto-random-string@^1.0.0:
resolved "https://registry.npm.taobao.org/crypto-random-string/download/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.npm.taobao.org/css-color-keywords/download/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
css-color-names@0.0.4:
version "0.0.4"
resolved "https://registry.npm.taobao.org/css-color-names/download/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
......@@ -3029,6 +3071,15 @@ css-selector-tokenizer@^0.7.0:
fastparse "^1.1.1"
regexpu-core "^1.0.0"
css-to-react-native@^2.2.2:
version "2.3.1"
resolved "https://registry.npm.taobao.org/css-to-react-native/download/css-to-react-native-2.3.1.tgz#cf0f61e0514846e2d4dc188b0886e29d8bef64a2"
integrity sha1-zw9h4FFIRuLU3BiLCIbinYvvZKI=
dependencies:
camelize "^1.0.0"
css-color-keywords "^1.0.0"
postcss-value-parser "^3.3.0"
css-what@2.1:
version "2.1.3"
resolved "https://registry.npm.taobao.org/css-what/download/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
......@@ -5728,6 +5779,11 @@ is-utf8@^0.2.0:
resolved "https://registry.npm.taobao.org/is-utf8/download/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
is-what@^3.2.4:
version "3.2.4"
resolved "https://registry.npm.taobao.org/is-what/download/is-what-3.2.4.tgz#da528659017bdd4b07892dfe4fd60da6ac500e98"
integrity sha1-2lKGWQF73UsHiS3+T9YNpqxQDpg=
is-windows@^1.0.1, is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.npm.taobao.org/is-windows/download/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
......@@ -6689,6 +6745,11 @@ mem@^1.1.0:
dependencies:
mimic-fn "^1.0.0"
memoize-one@^5.0.0:
version "5.0.5"
resolved "https://registry.npm.taobao.org/memoize-one/download/memoize-one-5.0.5.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmemoize-one%2Fdownload%2Fmemoize-one-5.0.5.tgz#8cd3809555723a07684afafcd6f756072ac75d7e"
integrity sha1-jNOAlVVyOgdoSvr81vdWByrHXX4=
memory-fs@^0.4.0, memory-fs@~0.4.1:
version "0.4.1"
resolved "https://registry.npm.taobao.org/memory-fs/download/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
......@@ -6713,6 +6774,13 @@ meow@^3.3.0, meow@^3.7.0:
redent "^1.0.0"
trim-newlines "^1.0.0"
merge-anything@^2.2.4:
version "2.4.0"
resolved "https://registry.npm.taobao.org/merge-anything/download/merge-anything-2.4.0.tgz?cache=0&sync_timestamp=1562996309832&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmerge-anything%2Fdownload%2Fmerge-anything-2.4.0.tgz#86959caf02bb8969d1ae5e1b652862bc5fe54e44"
integrity sha1-hpWcrwK7iWnRrl4bZShivF/lTkQ=
dependencies:
is-what "^3.2.4"
merge-descriptors@1.0.1:
version "1.0.1"
resolved "https://registry.npm.taobao.org/merge-descriptors/download/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
......@@ -8418,7 +8486,7 @@ react-error-overlay@^4.0.1:
resolved "https://registry.npm.taobao.org/react-error-overlay/download/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
integrity sha1-QXrdsIFKkPOnCC6sunzuWI0A2ok=
react-is@^16.8.1, react-is@^16.8.6:
react-is@^16.6.0, react-is@^16.8.1, react-is@^16.8.6:
version "16.8.6"
resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha1-W7weLSkUHJ+9/tRWND/ivEMKahY=
......@@ -9679,6 +9747,35 @@ style-loader@^0.20.3:
loader-utils "^1.1.0"
schema-utils "^0.4.5"
styled-components@^4.3.2:
version "4.3.2"
resolved "https://registry.npm.taobao.org/styled-components/download/styled-components-4.3.2.tgz#4ca81918c812d3006f60ac5fdec7d6b64a9509cc"
integrity sha1-TKgZGMgS0wBvYKxf3sfWtkqVCcw=
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@babel/traverse" "^7.0.0"
"@emotion/is-prop-valid" "^0.8.1"
"@emotion/unitless" "^0.7.0"
babel-plugin-styled-components ">= 1"
css-to-react-native "^2.2.2"
memoize-one "^5.0.0"
merge-anything "^2.2.4"
prop-types "^15.5.4"
react-is "^16.6.0"
stylis "^3.5.0"
stylis-rule-sheet "^0.0.10"
supports-color "^5.5.0"
stylis-rule-sheet@^0.0.10:
version "0.0.10"
resolved "https://registry.npm.taobao.org/stylis-rule-sheet/download/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
integrity sha1-ROZKKwdmQ/S1Ll/3HvwE2MPEpDA=
stylis@^3.5.0:
version "3.5.4"
resolved "https://registry.npm.taobao.org/stylis/download/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
integrity sha1-9mXyX14pnPPWRlSrlJpXx2i3P74=
subarg@^1.0.0:
version "1.0.0"
resolved "https://registry.npm.taobao.org/subarg/download/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
......@@ -9721,7 +9818,7 @@ supports-color@^4.2.1:
dependencies:
has-flag "^2.0.0"
supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0:
supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
version "5.5.0"
resolved "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
integrity sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment