81 | {this.state.zombies.map((item,index)=>{
82 | var name = item.name
83 | var level = item.level
84 | return(
85 |
86 |
112 | )
113 | }else{
114 | return(
92 |
110 |
93 | {this.input=input}}
98 | value={this.state.zombieName}
99 | onChange={this.inputChange}>
100 |
101 |
102 |
103 |
108 |
109 | {this.state.transactionHash}
等待确认中...
111 | 等待确认中...
115 |
)
136 | }
137 | }
138 | }
139 | export default MyZombie;
--------------------------------------------------------------------------------
/src/Page.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import ZombieArmy from "./ZombieArmy"
3 | import MyZombie from "./MyZombie"
4 | import ZombieMarket from "./ZombieMarket"
5 | import ZombieSimulator from "./ZombieSimulator"
6 | import ZombieDetail from "./ZombieDetail";
7 | import ZombieAttack from "./ZombieAttack";
8 | import ContractAdmin from "./ContractAdmin"
9 |
10 | class Page extends Component {
11 | constructor(props) {
12 | super(props)
13 | this.state = {page:'',id:0 }
14 | }
15 | componentDidMount(){
16 | let search = this.props.location.search.replace(/\?/,'').split("&")
17 | let page = search[0]
18 | this.setState({page:page})
19 | }
20 | UNSAFE_componentWillReceiveProps(nextProps){
21 | if(nextProps!==this.props){
22 | this.setState({nextProps})
23 | let search = nextProps.location.search.replace(/\?/,'').split("&")
24 | let page = search[0] === '' ? 'ZombieArmy' : search[0]
25 | this.setState({page:page})
26 | return true
27 | }else{
28 | return false
29 | }
30 | }
31 | render() {
32 | switch (this.state.page){
33 | case 'ZombieArmy':
34 | return(
116 |
134 |
117 | {this.input=input}}
122 | value={this.state.zombieName}
123 | onChange={this.inputChange}>
124 |
125 |
126 |
127 |
132 |
133 | {this.state.transactionHash}
等待确认中...
135 | 等待确认中...
53 | {this.state.zombies.map((item,index)=>{
54 | var name = item.name
55 | var level = item.level
56 | return(
57 |
58 |
64 | )
65 | }else{
66 | return ( )
67 | }
68 | }
69 | }
70 |
71 | export default ZombieArmy;
--------------------------------------------------------------------------------
/src/ZombieAttack.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import MyWeb3 from './MyWeb3'
3 | import ZombiePreview from "./ZombiePreview"
4 | import './static/ZombiePreview.css'
5 | import moment from "moment"
6 |
7 | class NewZombie extends Component {
8 | constructor(props) {
9 | super(props);
10 | const searchParams = new URLSearchParams(window.location.search)
11 | const id = searchParams.get('id')
12 | this.state = {
13 | targetId:id ,
14 | targetZombie:{},
15 | myZombies:[],
16 | myZombie:{},
17 | myZombieId:'',
18 | active: {},
19 | buttonTxt:'',
20 | modalDisplay:'none',
21 | transactionHash:'',
22 | AttackBtn:()=>{
23 | return(
28 | )
29 | }
30 | }
31 | this.selectZombie = this.selectZombie.bind(this)
32 | this.zombieAttack = this.zombieAttack.bind(this)
33 | }
34 | componentDidMount(){
35 | let that = this
36 | let ethereum = window.ethereum
37 | if (typeof ethereum !== 'undefined' || (typeof window.web3 !== 'undefined')) {
38 | MyWeb3.init().then(function(res){
39 | that.getZombie(that.state.targetId)
40 | that.getMyZombies()
41 | })
42 | }else {
43 | alert('You have to install MetaMask !')
44 | }
45 | }
46 |
47 | getZombie(zombieId){
48 | let that = this
49 | MyWeb3.zombies(zombieId).then(function (result) {
50 | that.setState({targetZombie:result})
51 | })
52 | }
53 | getMyZombies(){
54 | let that = this
55 | MyWeb3.getZombiesByOwner().then(function(zombies){
56 | if(zombies.length > 0){
57 | for(let i=0;i
112 |
161 | );
162 | }else{
163 | return(
164 |
118 |
130 |
131 |
119 |
129 |
120 |
122 |
123 | VS
124 |
125 |
126 |
128 | {this.state.transactionHash}
132 |
160 |
133 |
137 |
134 |
136 |
138 |
159 |
139 | {this.state.myZombies.map((item,index)=>{
140 | var name = item.name
141 | var level = item.level
142 | return(
143 |
157 | this.selectZombie(index)} >
144 |
154 | )
155 | })}
156 |
145 |
153 |
147 |
152 |
148 | {name}
149 |
150 | CryptoZombie{level}级
151 | 没有能干它的僵尸
165 | )
166 | }
167 | }
168 | }
169 |
170 | export default NewZombie;
--------------------------------------------------------------------------------
/src/ZombieCard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import ZombiePreview from "./ZombiePreview"
3 |
4 | class ZombieCard extends Component {
5 | constructor(props) {
6 | super(props)
7 | this.state = { zombie:this.props.zombie,name:this.props.name,level:this.props.level}
8 | }
9 | UNSAFE_componentWillReceiveProps(nextProps){
10 | if(nextProps!==this.props){
11 | this.setState({ _className:nextProps._className,_style:nextProps._style})
12 | return true
13 | }else{
14 | return false
15 | }
16 | }
17 | render() {
18 | return (
19 |
20 |
30 | )
31 | }
32 | }
33 |
34 | export default ZombieCard;
--------------------------------------------------------------------------------
/src/ZombieDetail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import ZombiePreview from "./ZombiePreview"
3 | import './static/ZombiePreview.css'
4 | import MyWeb3 from './MyWeb3'
5 | import moment from "moment"
6 | import {
7 | BrowserRouter as
8 | Route,
9 | Link
10 | } from "react-router-dom"
11 | import Page from "./Page";
12 |
13 | class Zombiedetail extends Component {
14 | constructor(props) {
15 | super(props)
16 | const searchParams = new URLSearchParams(window.location.search)
17 |
18 | const id = searchParams.get('id')
19 | this.state = {
20 | id:id ,
21 | zombie:{},owner:'',
22 | zombieFeedTimes:0,
23 | myPrice:0,
24 | minPrice:0,
25 | AttackBtn: () =>{return()},
26 | RenameArea: () =>{return()},
27 | zombieNewname:'',
28 | FeedArea: () =>{return()},
29 | LevelupArea: () =>{return()},
30 | SaleArea: () =>{return()},
31 | BuyArea: () =>{return()},
32 | onShop:false,
33 | shopInfo:{}
34 | }
35 | this.zombieChangeName = this.zombieChangeName.bind(this)
36 | this.changeName = this.changeName.bind(this)
37 | this.feed = this.feed.bind(this)
38 | this.levelUp = this.levelUp.bind(this)
39 | this.saleZombie = this.saleZombie.bind(this)
40 | this.buyShopZombie = this.buyShopZombie.bind(this)
41 | this.setPrice = this.setPrice.bind(this)
42 | }
43 |
44 | componentDidMount(){
45 | let that = this
46 | let ethereum = window.ethereum
47 | if (typeof ethereum !== 'undefined' || (typeof window.web3 !== 'undefined')) {
48 | MyWeb3.init().then(function(res){
49 | that.getZombie(that.state.id)
50 | that.getZombieFeedTimes(that.state.id)
51 | that.getMinPrice()
52 | that.getZombieShop(that.state.id)
53 | })
54 | }else {
55 | alert('You have to install MetaMask !')
56 | }
57 | }
58 | getZombieShop(zombieId){
59 | let that = this
60 | MyWeb3.zombieShop(zombieId).then(function (shopInfo) {
61 | if(shopInfo.price>0){
62 | that.setState({onShop:true,shopInfo:shopInfo})
63 | }
64 | })
65 | }
66 | getMinPrice(){
67 | let that = this
68 | MyWeb3.minPrice().then(function (minPrice) {
69 | if(minPrice>0){
70 | MyWeb3.tax().then(function (tax) {
71 | if(tax>0){
72 | that.setState({myPrice:parseFloat(minPrice)+parseFloat(tax),minPrice:parseFloat(minPrice)+parseFloat(tax)})
73 | }
74 | })
75 | }
76 | })
77 | }
78 | getZombieFeedTimes(zombieId){
79 | let that = this
80 | MyWeb3.zombieFeedTimes(zombieId).then(function (result) {
81 | if(result>0){
82 | that.setState({zombieFeedTimes:result})
83 | }
84 | })
85 | }
86 | setPrice(event){
87 | this.setState({
88 | myPrice:event.target.value
89 | })
90 | }
91 | zombieChangeName(event){
92 | this.setState({
93 | zombieNewname:event.target.value
94 | })
95 | }
96 | changeName(){
97 | let that = this
98 | if(window.defaultAccount !== undefined){
99 | MyWeb3.changeName(this.state.id,this.state.zombieNewname)
100 | .then(function(transactionHash){
101 | that.setState({RenameArea : () =>{
102 | return(
21 |
29 |
23 |
28 |
24 | {this.state.name}
25 |
26 | CryptoZombie{this.state.level}级
27 | {transactionHash}
)
103 | }
104 | })
105 | })
106 | }
107 | }
108 | feed(){
109 | let that = this
110 | if(window.defaultAccount !== undefined){
111 | MyWeb3.feed(this.state.id)
112 | .then(function(transactionHash){
113 | that.setState({FeedArea : () =>{
114 | return({transactionHash}
)
115 | }
116 | })
117 | })
118 | }
119 | }
120 | levelUp(){
121 | let that = this
122 | if(window.defaultAccount !== undefined){
123 | MyWeb3.levelUp(this.state.id)
124 | .then(function(transactionHash){
125 | that.setState({LevelupArea : () =>{
126 | return({transactionHash}
)
127 | }
128 | })
129 | })
130 | }
131 | }
132 | saleZombie(){
133 | let that = this
134 | if(window.defaultAccount !== undefined
135 | && this.state.myPrice*this.state.minPrice>0
136 | && this.state.myPrice>=this.state.minPrice){
137 | MyWeb3.saleMyZombie(this.state.id,this.state.myPrice)
138 | .then(function(transactionHash){
139 | that.setState({SaleArea : () =>{
140 | return({transactionHash}
)
141 | }
142 | })
143 | })
144 | }
145 | }
146 | buyShopZombie(){
147 | let that = this
148 | if(window.defaultAccount !== undefined){
149 | MyWeb3.buyShopZombie(this.state.id,this.state.shopInfo.price)
150 | .then(function(transactionHash){
151 | that.setState({BuyArea : () =>{
152 | return({transactionHash}
)
153 | }
154 | })
155 | })
156 | }
157 | }
158 | getZombie(zombieId){
159 | let that = this
160 | MyWeb3.zombies(zombieId).then(function (result) {
161 | that.setState({zombie:result})
162 | that.setState({zombieNewname:result.name})
163 | MyWeb3.zombieToOwner(zombieId).then(function (zombieOwner) {
164 | that.setState({owner:zombieOwner})
165 | if(window.defaultAccount !== undefined &&
166 | zombieOwner !== window.defaultAccount){
167 | that.setState({AttackBtn : () =>{
168 | return(
169 | )
174 | }
175 | })
176 | if(that.state.onShop){
177 | that.setState({BuyArea : () =>{
178 | return(
179 |
180 |
191 | )
192 | }
193 | })
194 | }
195 | }else{
196 | that.setState({AttackBtn : () =>{return()}})
197 | if(that.state.zombie.level > 1){
198 | that.setState({RenameArea : () =>{
199 | return(
200 |
181 | 售价：{that.state.shopInfo.price} ether
182 |
183 |
184 |
189 |
190 |
201 |
)
218 | }
219 | })
220 | }
221 | if(that.state.zombie.readyTime === 0 || moment().format('X')>that.state.zombie.readyTime){
222 | that.setState({FeedArea : () =>{
223 | return(
224 |
202 |
208 |
209 |
210 |
211 |
216 |
217 |
225 |
230 |
)
231 | }
232 | })
233 | }
234 | that.setState({LevelupArea : () =>{
235 | return(
236 |
237 |
242 |
)
243 | }
244 | })
245 | if(!that.state.onShop){
246 | that.setState({SaleArea : () =>{
247 | return(
248 |
249 |
266 | )
267 | }
268 | })
269 | }
270 | }
271 | })
272 | })
273 | }
274 |
275 | render() {
276 | var readyTime = '已冷却'
277 | if(this.state.zombie.readyTime !== undefined && moment().format('X')
250 |
256 |
257 |
258 |
259 |
264 |
265 |
289 |
328 |
329 | );
330 | }
331 | }
332 |
333 | export default Zombiedetail;
--------------------------------------------------------------------------------
/src/ZombieMarket.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import MyWeb3 from './MyWeb3'
3 | import ZombieCard from "./ZombieCard";
4 | import {
5 | BrowserRouter as
6 | Route,
7 | Link
8 | } from "react-router-dom"
9 | import Page from "./Page";
10 |
11 | class ZombieMarket extends Component {
12 | constructor(props) {
13 | super(props);
14 | this.state = {shopZombies:[] }
15 | }
16 |
17 | componentDidMount(){
18 | //console.log(window.web3._extend.utils)
19 | let that = this
20 | let ethereum = window.ethereum
21 | if (typeof ethereum !== 'undefined' || (typeof window.web3 !== 'undefined')) {
22 | MyWeb3.init().then(function(res){
23 | that.zombieShop()
24 | })
25 | }else {
26 | alert('You have to install MetaMask !')
27 | }
28 | }
29 |
30 | zombieShop(){
31 | let that = this
32 | MyWeb3.getShopZombies().then(function(zombieIds){
33 | if(zombieIds.length>0){
34 | for(var i=0;i
290 |
300 |
291 |
292 |
299 |
294 |
298 |
295 |
296 | CryptoZombie第一级
297 |
301 |
326 | -
302 |
- {this.state.zombie.name} 303 |
- 主人 304 |
- {this.state.owner} 305 |
- 等级 306 |
- {this.state.zombie.level} 307 |
- 胜利次数 308 |
- {this.state.zombie.winCount} 309 |
- 失败次数 310 |
- {this.state.zombie.lossCount} 311 |
- 冷却时间 312 |
- {readyTime} 313 |
- 喂食次数 314 |
- {this.state.zombieFeedTimes} 315 | 316 |
-
317 |
318 | 319 | 320 | 321 | 322 | 323 |
324 |
53 | {this.state.shopZombies.map((item,index)=>{
54 | var name = item.name
55 | var level = item.level
56 | return(
57 |
58 |
64 | )
65 | }else{
66 | return ( )
67 | }
68 | }
69 | }
70 |
71 | export default ZombieMarket;
--------------------------------------------------------------------------------
/src/ZombiePreview.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react'
2 |
3 | class ZombiePreview extends Component {
4 | constructor(props){
5 | super(props)
6 | this.state = { zombie:this.props.zombie,_style:this.props._style,_className:this.props._className}
7 | }
8 | UNSAFE_componentWillReceiveProps(nextProps){
9 | if(nextProps!==this.props){
10 | this.setState({
11 | zombie:nextProps.zombie,
12 | _style:nextProps._style,
13 | _className:nextProps._className,
14 | })
15 | return true
16 | }else{
17 | return false
18 | }
19 | }
20 | render(){
21 | var _style = this.state._style || []
22 | var _className = this.state._className
23 | if(this.state.zombie !== undefined){
24 | _style['color'] = {filter:"hue-rotate(0deg)"}
25 | _style['skin'] = {filter:"hue-rotate(0deg)"}
26 | _style['eye_color'] = {filter:"hue-rotate(0deg)"}
27 | _className = "zombie-parts head-visible-1 eye-visible-1 shirt-visible-1"
28 | if(this.state.zombie.dna !== undefined){
29 | var dna = this.state.zombie.dna
30 | var _head = dna.substring(0,2) % 8 +1
31 | var _eye = dna.substring(2,4) % 11 +1
32 | var _shirt = dna.substring(4,6) % 6 +1
33 | _className = "zombie-parts head-visible-"+_head+" eye-visible-"+_eye+" shirt-visible-"+_shirt
34 | _style['color'] = {filter:"hue-rotate("+dna.substring(6,9) % 360 +1+"deg)"}
35 | _style['skin'] = {filter:"hue-rotate("+dna.substring(9,12) % 360 +1+"deg)"}
36 | _style['eye_color'] = {filter:"hue-rotate("+dna.substring(12,15) % 360+"deg)"}
37 | }
38 | }
39 | return (
40 |
41 | {/* 
*/}
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 
51 | 
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 
70 | 
71 | 
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 
78 | 
79 | 
80 | 
81 |
82 | );
83 | }
84 | }
85 |
86 |
87 | export default ZombiePreview;
88 |
--------------------------------------------------------------------------------
/src/ZombieSimulator.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react'
2 | import './static/ZombiePreview.css';
3 | import ZombiePreview from "./ZombiePreview";
4 | import ZombieToggler from "./ZombieToggler";
5 |
6 |
7 |
8 | class ZombieSimulator extends Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | _value:{
13 | "head":1,
14 | "eye":1,
15 | "shirt":1
16 | },
17 | _className:"zombie-parts head-visible-1 eye-visible-1 shirt-visible-1",
18 | _style:{
19 | eye_color:{filter:"hue-rotate(0deg)"},
20 | skin:{filter:"hue-rotate(0deg)"},
21 | color:{filter:"hue-rotate(0deg)"},
22 | }
23 | };
24 | this.handleChange = this.handleChange.bind(this);
25 | }
26 |
27 | handleChange(event) {
28 | var _id = event.target.id.replace(/_select/,"");
29 |
30 | var _value = this.state._value
31 | var _className = this.state._className
32 | var _style = this.state._style
33 | _value[_id] = event.target.value;
34 |
35 | if(_id === "head" || _id === "eye" || _id === "shirt"){
36 | _className = "zombie-parts head-visible-"+ _value["head"] +" eye-visible-"+ _value["eye"] +" shirt-visible-" + _value["shirt"];
37 | }else{
38 | _style[_id] = {filter:"hue-rotate("+_value[_id]+"deg)"}
39 | }
40 | this.setState({_className,_style,_value});
41 | }
42 | render() {
43 | return */}
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
44 |
;
53 | }
54 | }
55 |
56 |
57 |
58 | export default ZombieSimulator
59 |
--------------------------------------------------------------------------------
/src/ZombieToggler.js:
--------------------------------------------------------------------------------
1 | import React,{Component,Fragment} from 'react'
2 |
3 |
4 | class ZombieToggler extends Component {
5 | constructor(props){
6 | super(props)
7 | this.handleChange=this.handleChange.bind(this)
8 | this.state = { list: [
9 | {
10 | "name":"head",
11 | "title":"头部基因",
12 | "max":8
13 | },{
14 | "name":"eye",
15 | "title":"眼部基因",
16 | "max":11
17 | },{
18 | "name":"shirt",
19 | "title":"上衣基因",
20 | "max":6
21 | },{
22 | "name":"skin",
23 | "title":"皮肤颜色",
24 | "max":360
25 | },{
26 | "name":"eye_color",
27 | "title":"眼睛颜色",
28 | "max":360
29 | },{
30 | "name":"color",
31 | "title":"衣服颜色",
32 | "max":360
33 | }
34 | ],inputValue:[]
35 | }
36 | }
37 | handleChange(event){
38 | var id = event.target.id.replace(/_select/,"")
39 | var _list = this.state.inputValue
40 | _list[id] = event.target.value;
41 | this.setState({
42 | inputValue:_list
43 | })
44 | this.props.handleChange(event);
45 | }
46 | render() {
47 | return (
48 |
45 |
52 |
46 |
50 |
47 |
49 |
49 |
59 |
60 | );
61 | }
62 | }
63 |
64 | export default ZombieToggler;
65 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './static/Index.css'
4 | import App from './App';
5 | require('events').EventEmitter.prototype._maxListeners = 100;
6 | ReactDOM.render(