Skip to content
Snippets Groups Projects
Commit d6a2f4f3 authored by KaspHell's avatar KaspHell
Browse files

Lifting state up

parent c4fd950e
No related branches found
No related tags found
No related merge requests found
...@@ -29,7 +29,7 @@ class App extends Component { ...@@ -29,7 +29,7 @@ class App extends Component {
<Header /> <Header />
<AiCamera updateMatch={this.updateMatch}/> <AiCamera updateMatch={this.updateMatch}/>
<GameUI updateMatch={this.updateMatch}/> <GameUI updateMatch={this.updateMatch}/>
<Result result={this.state.result}/> <Result result={this.state.result.result}/>
</div> </div>
); );
} }
......
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import * as tf from '@tensorflow/tfjs' import * as tf from '@tensorflow/tfjs'
import * as tmImage from '@teachablemachine/image' import * as tmImage from '@teachablemachine/image'
import loadVideo from './utilities/camera' import loadVideo from '../utilities/camera'
function AiCamera() { function AiCamera() {
......
...@@ -58,8 +58,8 @@ class GameUI extends Component { ...@@ -58,8 +58,8 @@ class GameUI extends Component {
render() { render() {
return ( return (
<div> <div>
<Match match={this.state}/> <Match match={this.props}/>
<Scores result={this.state.result}/> <Scores result={this.props.result}/>
<div className="choices"> <div className="choices">
<div className="choice" id="r" onClick={() => this.handlePlay("Rock")}> <div className="choice" id="r" onClick={() => this.handlePlay("Rock")}>
<img src="https://img.icons8.com/ios/100/000000/paper-waste.png" alt=""/> <img src="https://img.icons8.com/ios/100/000000/paper-waste.png" alt=""/>
......
p {
color: #F1BC53;
font-size: 40px;
font-weight: bold;
text-align: center;
}
import React, {Component} from 'react'; import React, {Component} from 'react';
import './Result.css'
class Result extends Component { class Result extends Component {
constructor(props){ constructor(props){
super(props) super(props)
this.state = {
result: this.props.result
}
} }
render(){ render(){
switch (this.props.result) {
case "default":
return(
<div />
)
case "win":
return( return(
<div> <div>
<p>You win!</p> <p>{this.props.result}</p>
<style jsx>{`
p {
color: #F1BC53;
font-size: 40px;
font-weight: bold;
text-align: center;
}
`}</style>
</div> </div>
) )
break
case "draw":
return (
<div>
<p>It's a draw!</p>
<style jsx>{`
p {
color: #F1BC53;
font-size: 40px;
font-weight: bold;
text-align: center;
}
`}</style>
</div>
)
break
case "lose":
return (
<div>
<p>You lost!</p>
<style jsx>{`
p {
color: #F1BC53;
font-size: 40px;
font-weight: bold;
text-align: center;
}
`}</style>
</div>
)
break
}
} }
} }
export default Result export default Result
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment