I want to disable onClick while the game's AI is making a move (startThinking function) so that players don't randomly click on any part of the game and mess it up.
Here is my code for the class from which I want to access the variables onclick and cursor (relevant bits surrounded by ** **):
class Grid extends React.Component{
constructor(props){
super(props);
var pos = props.pos;
this.xPos = 2+(pos%9)*66+"px";
this.yPos = 2+(Math.floor(pos/9))*66+"px";
this.borderTop = "none";
this.borderLeft = "none";
this.borderRight = "none";
this.borderBottom = "none";
if(pos%3==0){
this.borderLeft = "solid";
}
if(pos%9==8){
this.borderRight = "solid";
}
if(pos>71){
this.borderBottom = "solid";
}
if((pos%27)<9){
this.borderTop = "solid";
}
}
render(){
var pos = this.props.pos;
var icon = this.props.icon;
var backgroundColor = (icon==="none")?((!this.props.legal)?((pos%2)?"white":"#f2f2f2"):((pos%2)?"rgb(177, 251, 169)":"rgb(157, 228, 150)")):((icon==="x")?"rgb(243, 125, 125)":"#6f83f3");
var choice = "";
var **onclick** = (this.props.legal)?this.props.onclick:(()=>{});
var **cursor** = (this.props.legal)?"pointer":"default";
if(icon !== "none"){
choice = (<div className='icon'>{icon}</div>);
}
return(<div onClick={onclick} style={{cursor:cursor,backgroundColor:backgroundColor,top:this.yPos,left:this.xPos,borderLeft:this.borderLeft,borderRight:this.borderRight,borderTop:this.borderTop,borderBottom:this.borderBottom}} className='grid' >{choice}</div>);
}
}
Here is the class from which I want to access the variables onclick and cursor from and change them to the default value (i.e. not active) before the gameAI starts thinking and then I want to revert them back to original after the gameAI finishes thinking and has made a move. Relevant bits surrounded by ** **
class Board extends React.Component {
constructor(props){
super(props);
this.state = {
model: curGame
}
setSimBoard(this);
}
render() {
var model = this.state.model;
var i = -1;
var comps = model.grid.map((sq)=>{
i++;
var n = "block_"+i;
var leg = model.legals.indexOf(i)>-1;
return <Grid id={n} key={n} pos={i} icon={sq.icon} legal={leg} onclick={
((i)=>{
** return ()=>{
// the comments are what i tried, didn't work Grid.onclick = (()=>{});
// Grid.cursor = "default";
startThinking(i);
model.makeMove(i);
// Grid.onclick = (this.props.legal)?this.props.onclick:(()=>{});
// Grid.cursor = (this.props.legal)?"pointer":"default";
this.setState({model:model});
}
})(i) **
}/>;
});
return (
<div>
<div>{comps}</div>
<BoardStatus model={model}/>
<WinCover model={model}/>
</div>
);
}
}
Finally, here's the startThinking function, which is in another js file. Comments are what I tried. ai belongs to another file, which is the gameAI while it's doing the computation for making a move.
function startThinking(i){
//document.getElementById('id').style.pointerEvents = 'none';
console.log("thinking..");
ai.postMessage({game:Object.assign({"ai":true}, curGame) ,move:i});
// document.getElementById('id').style.pointerEvents = 'auto';
}
I'd really appreciate some help on this! Thank you very much!
EDIT: So, Pranesh Ravi told me how to access variables from a class in another class. However, since that didn't solve my issue, I'd like to know how to access the onclick and cursor variables from another file, ai.js, the relevant parts of which are shown below and the super relevant parts are surrounded by ** **. Comments are what I tried to disable click while gameAI is working, which gave me a reference error saying Board is not defined which makes sense.
var thinkTime = 2000;
var think = false;
var maxDepth = 6;
onmessage = function(msg){
** // Board.onclick = (()=>{});
// Board.cursor = "default" **
var game = msg.data.game;
var playerMove = msg.data.move;
think = true;
var search = new SearchTree(game,playerMove,0);
var bestMove = search.traverse(maxDepth,true);
console.log(bestMove);
postMessage(bestMove.move);
** // Board.onclick = (this.props.legal)?this.props.onclick:(()=>{});
// Board.cursor = (this.props.legal)?"pointer":"default"; **
}