手把手教你玩eos：卡牌游戏第八课——优化细节体验

文章由EOS节点EOSWing（柚翼）首发于eoswing.io博客，内容将不定期更新，仅供学习交流之用。

0.引言
0.1教程概况
手把手教你玩eos系列教程，从最基础开始，一步一步教你学会用eos。比如发代币，开发DAPP等等。
本文是第十四篇。本篇教程是卡牌游戏的最后一课，讲解怎么进一步优化整个游戏的细节体验。

0.2 学习内容
相关准备
编写前端代码
测试代码

0.3 机器环境
cpu: 1核
内存: 8G
操作系统：CentOS 7.4 64位
服务器所在地：香港

推荐将服务器放在网络较为优质的环境，比如香港。不然会有很多配置依赖下载上的问题。

1 相关准备
1.1 课程目标
在本课程中，我们将优化游戏细节体验，比如添加游戏帮助对话框，进度提示，优化加载体验等等。

1.2 准备工作
进入开发环境容器
docker exec -it eosdev /bin/bash
进入前端文件夹
cd /eos-work/frontend/

2 编写前端代码
2.1 添加游戏帮助对话框
在GameInfo中添加RulesModal模态对话框

cd ./src/components/Game/components/GameInfo

svn checkout https://github.com/EOSIO/eosio-card-game-repo/branches/lesson-8/frontend/src/components/Game/components/GameInfo/components
在GameInfo.jsx中加入RulesModal组件

vi GameInfo.jsx
更新代码如下：

import React, { Component } from 'react';
// Components
import { Button } from 'components';
//在此次添加引用
// Game subcomponents
import { RulesModal } from './components';
class Info extends Component {
render() {
// Extract data and event functions from props
const { className, deckCardCount, handCardCount, onEndGame } = this.props;
// Display:
// Round number: 18 <-- ((max deck = 17) + 1) - Deck Cards - Hand Cards
// Rules button to trigger a modal
// Button to end the current game
return (

) } } export default Info;

2.2 添加进度提示

cd /eos-work/frontend/src/components/Button/

vi Button.jsx
编辑代码如下:

import React, { Component } from 'react';
class Button extends Component {
constructor(props) {
// Inherit constructor
super(props);
// Component state setup
this.state = {
loading: false,
};
// Bind functions
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
const { onClick } = this.props;
// Show the loading indicator in case the action to be performed takes too long
this.setState({ loading: true });
// If the prop onClick is a function, invoke it and stores its return value in promise
// If the prop onClick is NOT a function, the value of promise will be false
const promise = typeof onClick === "function" && onClick();
// If promise is a function (a Promise), invoke setState after it has been resolved.
if (promise && typeof promise.then === "function") {
return promise.then(() => {
this.isComponentMounted && this.setState({ loading: false });
});
}
// Otherwise, just invoke setState directly
this.isComponentMounted && this.setState({ loading: false });
}
componentDidMount() {
this.isComponentMounted = true;
}
componentWillUnmount() {
this.isComponentMounted = false;
}
render() {
const { className, type, style, children } = this.props;
let { loading } = this.state;
// Enable the loading CSS class if either the private state attribute loading
// or the props loading is true
loading = loading || this.props.loading;
return (
<button
className={Button${ className ? ' ' + className : '' }${ loading ? ' loading' : '' }}
onClick={ this.handleClick }
{ ...{ type, style } }

{ children }
);
}
}
export default Button;
在Game.jsx中更新引用

cd /eos-work/frontend/src/components/Game/
vi Game.jsx
编辑代码如下:

// React core
import React, { Component } from 'react';
import { connect } from 'react-redux';
// Game subcomponents
import { GameInfo, GameMat, PlayerProfile, Resolution } from './components';
// Services and redux action
import { UserAction } from 'actions';
import { ApiService } from 'services';
class Game extends Component {
constructor(props) {
// Inherit constructor
super(props);
// State for showing/hiding components when the API (blockchain) request is loading
this.state = {
loading: true,
};
// Bind functions
this.loadUser = this.loadUser.bind(this);
this.handleStartGame = this.handleStartGame.bind(this);
this.handlePlayCard = this.handlePlayCard.bind(this);
this.handleNextRound = this.handleNextRound.bind(this);
this.handleEndGame = this.handleEndGame.bind(this);
// Call loadUser before mounting the app
this.loadUser();
}
// Get latest user object from blockchain
loadUser() {
// Extract setUser of UserAction and user.name of UserReducer from redux
const { setUser, user: { name } } = this.props;
// Send request the blockchain by calling the ApiService,
// Get the user object and store the win_count, lost_count and game_data object
return ApiService.getUserByName(name).then(user => {
setUser({
win_count: user.win_count,
lost_count: user.lost_count,
game: user.game_data,
});
// Set the loading state to false for displaying the app
this.setState({ loading: false });
});
}
handleStartGame() {
// Send a request to API (blockchain) to start game
// And call loadUser again for react to render latest game status to UI
return ApiService.startGame().then(()=>{
return this.loadUser();
});
}
handlePlayCard(cardIdx) {
// Extract user.game of UserReducer from redux
const { user: { game } } = this.props;
// If it is an empty card, not going to do anything
if (game.hand_player[cardIdx] === 0) {
return;
}
// Show the loading indicator if the connection took too long
this.setState({ loading: true });
// Send a request to API (blockchain) to play card with card index
// And call loadUser again for react to render latest game status to UI
return ApiService.playCard(cardIdx).then(()=>{
return this.loadUser();
});
}
handleNextRound() {
// Send a request to API (blockchain) to trigger next round
// And call loadUser again for react to render latest game status to UI
return ApiService.nextRound().then(()=>{
return this.loadUser();
});
}
handleEndGame() {
// Send a request to API (blockchain) to end the game
// And call loadUser again for react to render latest game status to UI
return ApiService.endGame().then(()=>{
return this.loadUser();
});
}
render() {
// Extract data from state and user data of UserReducer from redux
const { loading } = this.state;
const { user: { name, win_count, lost_count, game } } = this.props;
// Flag to indicate if the game has started or not
// By checking if the deckCard of AI is still 17 (max card)
const isGameStarted = game && game.deck_ai.length !== 17;
// If game hasn't started, display PlayerProfile
// If game has started, display GameMat, Resolution, Info screen
return (

{ !isGameStarted ? : } { isGameStarted && loading && } ) } } // Map all state to component props (for redux to connect) const mapStateToProps = state => state;

// Map the following action to props
const mapDispatchToProps = {
setUser: UserAction.setUser,
};
// Export a redux connected component
export default connect(mapStateToProps, mapDispatchToProps)(Game);

2.3 优化加载体验
现在每次刷新游戏屏幕时都会短暂显示登录屏幕。

这是由ApiService从区块链获取最新用户数据引起的。

在检索用户数据时，dApp认为用户没有登录。

为了防止这种情况，我们将向App.jsx添加一个名为loading的组件状态。

在检索区块链数据时出现，直到有反馈，确定是应用是在登录页面，游戏结束屏幕还是个人资料屏幕等等。

cd /eos-work/frontend/src/components/Login/

vi Login.jsx
更新代码如下：

import React, { Component } from 'react';
import { connect } from 'react-redux';
// Components
import { Button } from 'components';
// Services and redux action
import { UserAction } from 'actions';
import { ApiService } from 'services';
class Login extends Component {
constructor(props) {
// Inherit constructor
super(props);
// State for form data and error message
this.state = {
form: {
username: '',
key: '',
error: '',
},
isSigningIn: false,
}
// Bind functions
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

// Runs on every keystroke to update the React state
handleChange(event) {
const { name, value } = event.target;
const { form } = this.state;

this.setState({
form: {
...form,
[name]: value,
error: '',
},
});
}

componentDidMount() {
this.isComponentMounted = true;
}

componentWillUnmount() {
this.isComponentMounted = false;
}

// Handle form submission to call api
handleSubmit(event) {
// Stop the default form submit browser behaviour
event.preventDefault();
// Extract form state
const { form } = this.state;
// Extract setUser of UserAction and user.name of UserReducer from redux
const { setUser } = this.props;
// Set loading spinner to the button
this.setState({ isSigningIn: true });
// Send a login transaction to the blockchain by calling the ApiService,
// If it successes, save the username to redux store
// Otherwise, save the error state for displaying the message
return ApiService.login(form)
.then(() => {
setUser({ name: form.username });
})
.catch(err => {
this.setState({ error: err.toString() });
})
.finally(() => {
if (this.isComponentMounted) {
this.setState({ isSigningIn: false });
}
});
}

render() {
// Extract data from state
const { form, error, isSigningIn } = this.state;

return (

) } }

// Map all state to component props (for redux to connect)
const mapStateToProps = state => state;

// Map the following action to props
const mapDispatchToProps = {
setUser: UserAction.setUser,
};

// Export a redux connected component
export default connect(mapStateToProps, mapDispatchToProps)(Login);
再在App.jsx中更新引用

cd /eos-work/frontend/src/components/App/

vi App.jsx
更新代码如下：

// React core
import React, { Component } from 'react';
import { connect } from 'react-redux';
// Components
import { Game, Login } from 'components';
// Services and redux action
import { UserAction } from 'actions';
import { ApiService } from 'services';

class App extends Component {

constructor(props) {
// Inherit constructor
super(props);

// 此处添加状态，默认loading为true
// State for showing/hiding components when the API (blockchain) request is loading
this.state = {
loading: true,
};
// Bind functions
this.getCurrentUser = this.getCurrentUser.bind(this);
// Call getCurrentUser before mounting the app
this.getCurrentUser();
}

getCurrentUser() {
// Extract setUser of UserAction from redux
const { setUser } = this.props;
// Send a request to API (blockchain) to get the current logged in user
return ApiService.getCurrentUser()
// If the server return a username
.then(username => {
// Save the username to redux store
// For structure, ref: ./frontend/src/reducers/UserReducer.js
setUser({ name: username });
})
// To ignore 401 console error
.catch(() => {})
//在获取到区块链数据反馈后，设置loading状态为false
// Run the following function no matter the server return success or error
.finally(() => {
// Set the loading state to false for displaying the app
this.setState({ loading: false });
});
}

render() {
// Extract data from state and props (user is from redux)
const { loading } = this.state;
const { user: { name, game } } = this.props;

// 确定游戏处于什么状态
// Determine the app status for styling
let appStatus = "login";
if (game && game.status !== 0) {
appStatus = "game-ended";
} else if (game && game.selected_card_ai > 0) {
appStatus = "card-selected";
} else if (game && game.deck_ai.length !== 17) {
appStatus = "started";
} else if (name) {
appStatus = "profile";
}

// Set class according to loading state, it will hide the app (ref to css file)
// If the username is set in redux, display the Game component
// If the username is NOT set in redux, display the Login component
return (

); }

}

// Map all state to component props (for redux to connect)
const mapStateToProps = state => state;

// Map the following action to props
const mapDispatchToProps = {
setUser: UserAction.setUser,
};

// Export a redux connected component
export default connect(mapStateToProps, mapDispatchToProps)(App);

3 测试代码
cd /eos-work/frontend

npm start
在浏览器中输入网址测试。

点击右边的rules按钮查看游戏规则帮助

选择卡牌后，在等待时会出现进度加载提示：

还有刷新后回到主界面等等，就不一一截图了。

至此，一个完整的EOS卡牌游戏就制作完成了。

4 后记
延伸阅读
在本文的学习中如果遇到问题，欢迎留言或者在如下链接寻找解决方案：

EOS官方游戏开发第五课: https://battles.eos.io/tutorial/lesson5/chapter1

如果觉得这一系列教程有点意思，请投票给柚翼节点（eoswingdotio）。您的投票是本教程持续更新的动力源泉，谢谢。