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

Trying to implement camera to game part 3

parent ed9eba81
No related branches found
No related tags found
No related merge requests found
...@@ -7,24 +7,77 @@ import './App.css' ...@@ -7,24 +7,77 @@ import './App.css'
class App extends Component { class App extends Component {
constructor(props) { constructor(props) {
super(props) super(props);
this.state = { this.state = {
match: "" match: {
result: "default",
userChoice: "default",
aiChoice: "default",
},
matchId: 1
} }
} }
updateMatch = (match) => { updateMatch = (e) => {
this.setState({ this.setState({
match: match match: e
}) })
this.setState({
matchId: this.state.matchId + 1
})
}
handlePlay(userChoice) {
const plays = ["Rock", "Paper", "Scissors"]
const aiChoice = plays[Math.floor(Math.random() * plays.length)]
console.log("...............")
console.log(userChoice)
console.log(aiChoice)
switch (userChoice + aiChoice) {
case "default":
break;
case "RockRock":
case "ScissorsScissors":
case "PaperPaper":
console.log("draw")
this.updateMatch({
result: "Draw",
userChoice: userChoice,
aiChoice: aiChoice
})
break;
case "RockScissors":
case "ScissorsPaper":
case "PaperRock":
console.log("win")
this.updateMatch({
result: "Win",
userChoice: userChoice,
aiChoice: aiChoice
})
break;
case "ScissorsRock":
case "PaperScissors":
case "RockPaper":
console.log("lose")
this.updateMatch({
result: "Lose",
userChoice: userChoice,
aiChoice: aiChoice
})
break;
}
} }
render(){ render(){
return ( return (
<div className="app"> <div className="app">
<Header /> <Header />
<AiCamera updateMatch={this.updateMatch}/> <AiCamera handlePlay={this.handlePlay}/>
<GameUI updateMatch={this.updateMatch} match={this.state.match}/> <GameUI updateMatch={this.updateMatch} handlePlay={this.handlePlay} match={this.state.match} matchId={this.state.matchId}/>
<Result match={this.state.match}/> <Result match={this.state.match}/>
</div> </div>
); );
......
...@@ -5,9 +5,9 @@ import loadVideo from '../utilities/camera' ...@@ -5,9 +5,9 @@ import loadVideo from '../utilities/camera'
function AiCamera() { function AiCamera() {
// the link to your model provided by Teachable Machine export panel // the link to your model provided by Teachable Machine export panel
// without empty class // without empty class
// const URL = 'https://teachablemachine.withgoogle.com/models/Ycxae80Nq/' // const URL = 'https://teachablemachine.withgoogle.com/models/Ycxae80Nq/'
// with empty identifying
const URL = 'https://teachablemachine.withgoogle.com/models/zecS4aGk6/' const URL = 'https://teachablemachine.withgoogle.com/models/zecS4aGk6/'
...@@ -27,19 +27,16 @@ function AiCamera() { ...@@ -27,19 +27,16 @@ function AiCamera() {
if (model) { if (model) {
const prediction = await model.predict(image, 4) const prediction = await model.predict(image, 4)
setResult(prediction) setResult(prediction)
analyzeMove()
predictVideo(userWebCam) predictVideo(userWebCam)
} }
} }
// registers players mark and plays a turn // registers players mark and plays a turn
async function analyzeMove() { async function makeMove() {
this.props.updateMatch({ this.props.handlePlay("Paper")
userChoice: results[0].className
}
)
} }
// loaded once when component is mounted // loaded once when component is mounted
useEffect(() => { useEffect(() => {
loadModel() loadModel()
...@@ -66,6 +63,7 @@ function AiCamera() { ...@@ -66,6 +63,7 @@ function AiCamera() {
return ( return (
<div> <div>
<button onClick={predictVideo}>Ennusta</button>
<video alignment="middle" id="userWebCam"></video> <video alignment="middle" id="userWebCam"></video>
<ul> <ul>
{results.map(({ className, probability }) => ( {results.map(({ className, probability }) => (
......
...@@ -2,80 +2,19 @@ import React, { Component } from 'react' ...@@ -2,80 +2,19 @@ import React, { Component } from 'react'
import Scores from './Scores' import Scores from './Scores'
class GameUI extends Component { class GameUI extends Component {
constructor(props) {
super(props)
this.state = {
id: 0,
}
}
getAiChoice() {
const plays = ["Rock", "Paper", "Scissors"]
const randomAiPlay = plays[Math.floor(Math.random() * plays.length)]
return randomAiPlay
}
handlePlay(userChoice) {
const aiChoice = this.getAiChoice()
this.setState({
id: this.state.id + 1
})
console.log("...............")
console.log(userChoice)
console.log(aiChoice)
switch (userChoice + aiChoice) {
case "default":
break;
case "RockRock":
case "ScissorsScissors":
case "PaperPaper":
console.log("draw")
this.props.updateMatch({
result: "Draw",
userChoice: userChoice,
aiChoice: aiChoice,
id: this.state.id + 1
})
break;
case "RockScissors":
case "ScissorsPaper":
case "PaperRock":
console.log("win")
this.props.updateMatch({
result: "Win",
userChoice: userChoice,
aiChoice: aiChoice,
id: this.state.id + 1
})
break;
case "ScissorsRock":
case "PaperScissors":
case "RockPaper":
console.log("lose")
this.props.updateMatch({
result: "Lose",
userChoice: userChoice,
aiChoice: aiChoice,
id: this.state.id + 1
})
break;
}
}
render() { render() {
return ( return (
<div> <div>
<Scores match={this.props.match}/> <Scores match={this.props.match} matchId={this.props.matchId}/>
<div className="choices"> <div className="choices">
<div className="choice" id="r" onClick={() => this.handlePlay("Rock")}> <div className="choice" id="r" onClick={() => this.props.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=""/>
</div> </div>
<div className="choice" id="p" onClick={() => this.handlePlay("Paper")}> <div className="choice" id="p" onClick={() => this.props.handlePlay("Paper")}>
<img src="https://img.icons8.com/ios/100/000000/toilet-paper.png" alt=""/> <img src="https://img.icons8.com/ios/100/000000/toilet-paper.png" alt=""/>
</div> </div>
<div className="choice" id="s" onClick={() => this.handlePlay("Scissors")}> <div className="choice" id="s" onClick={() => this.props.handlePlay("Scissors")}>
<img src="https://img.icons8.com/ios/100/000000/cut.png" alt=""/> <img src="https://img.icons8.com/ios/100/000000/cut.png" alt=""/>
</div> </div>
<style jsx>{` <style jsx>{`
......
...@@ -29,7 +29,7 @@ class Scores extends Component { ...@@ -29,7 +29,7 @@ class Scores extends Component {
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
// Typical usage (don't forget to compare props): // Typical usage (don't forget to compare props):
if (this.props.match.id !== prevProps.match.id) { if (this.props.matchId !== prevProps.matchId) {
this.update() this.update()
} }
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment