We Keep Coding

Othello Game Switching Turns Doesn't Work in React.js

I'm working on an Othello game in React and I've already implemented the code to switch player turns. It does switch from one to another(between white and black). But if there's no move available for the upcoming player, the turn stays the same. I though I had it all done but now I came across to such a case when trying out the game, and although it does switch player turns regularly, my code does not consider keeping it the same when necessary. Do you know why? How can I solve it?
Here's my code:
Where I change it:
setWinnerAndTurn() {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[this.state.stepNumber];
const squares = current.squares.slice()
const blackSquares = []
const whiteSquares = []
// Check for a winner
for (var row=0;row<squares.length;row++) {
for (var col=0;col<squares[row].length;col++) {
if (squares[row][col] === 'black') {
blackSquares.push([row,col])
} else if (squares[row][col] === 'white') {
whiteSquares.push([row,col])
}
}
}
// Debug
//console.log(blackSquares)
//console.log(whiteSquares)
const total = [blackSquares,whiteSquares]
const movesAvailable = [[],[]]
for (var t=0;t<total.length;t++) {
const currentArray = total[t]
const returned = this.checkElementsAround(currentArray)
for (var r=0;r<returned.length;r++) {
movesAvailable[t].push(returned[r])
}
}
// Debug
console.log(movesAvailable)
if (blackSquares.length + whiteSquares.length === squares.length * squares[0].length || (movesAvailable[0] === [] && movesAvailable[1] === [])) {
// Declare a winner
if (blackSquares.length !== whiteSquares.length) {
this.setState({
winner: (blackSquares.length > whiteSquares.length) ? 'black' : 'white'
})
} else {
this.setState({
winner: 'tie'
})
}
} else {
// Change turn
if (movesAvailable[0] === []) {
this.setState({
blackIsNext: false
})
} else if (movesAvailable[1] === []){
this.setState({
blackIsNext: true
})
} else {
this.setState({
blackIsNext: !this.state.blackIsNext
})
}
}
}
And where I call the function:
render() {
<GameBoard squares={current.squares} onClick={(row,col) => {
const elems = this.checkElementsAround(this.checkMoveValidity())
//console.log(elems)
for (let el=0;el<elems.length;el++) {
const turning = this.checkTurningStones(elems[el].directions)
if (turning.length !== 0) {
if (row === elems[el].coordinates[0] && col === elems[el].coordinates[1]) {
this.handleMove(row,col);
//console.log(turning)
for (var t=0;t<turning.length;t++) {
this.handleMove(turning[t][0],turning[t][1])
}
this.setWinnerAndTurn()
break
}
}
}
}}/>
}

Solved the problem, but don't know how. That's strange...
Here's the Code:
setWinnerAndTurn() {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[this.state.stepNumber];
const squares = current.squares.slice()
const blackSquares = []
const whiteSquares = []
// Check for a winner
for (var row=0;row<squares.length;row++) {
for (var col=0;col<squares[row].length;col++) {
if (squares[row][col] === 'black') {
blackSquares.push([row,col])
} else if (squares[row][col] === 'white') {
whiteSquares.push([row,col])
}
}
}
const valids = this.checkElementsAround(this.checkEmptySpaces())
// checkEmptySpaces returns all the empty spaces in the game
// checkElementsAround returns all the objects in all directions if there's initially an element in that direction
const movesAvailable = [0,0]
for (var t=0;t<2;t++) {
const isBlack = (t === 0) ? true : false
for (var v=0;v<valids.length;v++) {
const valid = valids[v]
const turned = this.checkTurningStones(valid.directions,isBlack)
if (turned.length !== 0) {
movesAvailable[t]++;
}
}
}
if (blackSquares.length + whiteSquares.length === squares.length * squares[0].length || (movesAvailable === [0,0])) {
// Declare a winner
if (blackSquares.length !== whiteSquares.length) {
this.setState({
winner: (blackSquares.length > whiteSquares.length) ? 'black' : 'white'
})
} else {
this.setState({
winner: 'tie'
})
}
} else {
// Change turn
if (movesAvailable[0] === 0) {
this.setState({
blackIsNext: false
})
} else if (movesAvailable[1] === 0){
this.setState({
blackIsNext: true
})
} else {
this.setState({
blackIsNext: !this.state.blackIsNext
})
}
}
}
Where I used it:
<div className="master-container">
<GameBoard squares={current.squares} onClick={(row,col) => {
const elems = this.checkElementsAround(this.checkEmptySpaces())
for (let el=0;el<elems.length;el++) {
const turning = this.checkTurningStones(elems[el].directions, this.state.blackIsNext)
if (turning.length !== 0) {
turning.unshift([row,col])
if (row === elems[el].coordinates[0] && col === elems[el].coordinates[1]) {
this.handleMove(turning)
this.setWinnerAndTurn()
// Debug
console.log(history.length)
break
}
}
}
}}/>
// handleMove -> You give an array of coordinates and it does turn them
// setWinnerAndTurn -> Our function
// checkTurningStones -> I give it the output of checkElementsAround as a parameter, it does return the elements that are to be turned upside down
Actually I know how I fixed it; the thing is that since most of my conditional statements depend on the values returned from some of my functions, when used inappropriately, some conditional statements would never return true. That's what I solved.

Merging two functions into one to simplify the code

I got these two functions, and they work great.
But since I only call global.replaceFields from global.translateAll then I want to get rid of global.replaceFields and put its functionality inside global.translateAll
How would you go about merging global.replaceFields into global.translateAll without losing the current functionality?
Thanks :)
// Translate everything in that field
global.translateAll = (textfield, usersLanguage) => {
for (var property in textfield) {
if (!textfield.hasOwnProperty(property)) {
return false;
} else if (typeof textfield[property] !== "object") {
textfield[property] = global.replaceFields(textfield[property], usersLanguage);
} else {
global.translateAll(textfield[property], usersLanguage);
}
}
}
// Translate everything in that field
global.replaceFields = (textfield, usersLanguage) => {
// Keep running until all fields are replaced
while (textfield.indexOf("{{") != -1) {
// isolate the field
let fromField = textfield.substring((textfield.indexOf("{{") + 2), (textfield.indexOf("}}")));
let toField = ""
// If its a translated text
if (fromField.indexOf("trans") != -1) {
toField = usersLanguage[fromField];
textfield = textfield.replace("{{" + fromField + "}}", toField);
}
}
return (textfield);
}

This should work
global.translateAll = (textfield, usersLanguage) => {
var replaceFields = (textfield, usersLanguage) => {
// Keep running until all fields are replaced
while (textfield.indexOf("{{") != -1) {
// isolate the field
let fromField = textfield.substring((textfield.indexOf("{{") + 2), (textfield.indexOf("}}")));
let toField = ""
// If its a translated text
if (fromField.indexOf("trans") != -1) {
toField = usersLanguage[fromField];
textfield = textfield.replace("{{" + fromField + "}}", toField);
}
}
return (textfield);
}
for (var property in textfield) {
if (!textfield.hasOwnProperty(property)) {
return false;
} else if (typeof textfield[property] !== "object") {
textfield[property] = replaceFields(textfield[property], usersLanguage);
} else {
global.translateAll(textfield[property], usersLanguage);
}
}
}

How can I create empty JSON keys (nested or not) using a string?

I currently have this code built in JS, but it's really, really ugly.
Is there any better way to approach it?
The way it works basically is pushing a string like app.chat.test to be the key, and value like teststr.
I test the lengths to see if the "parent" key is there, otherwise we build it.
function constructJson(jsonKey, jsonValue){
//REWRITE!!!!!!!!
let jsonObj = langFile;
let jsonKeyArr = jsonKey.split('.')
if (jsonKeyArr.length === 1) {
if (valToAdd === undefined) {
if (jsonObj[jsonKey] === undefined) {
jsonObj[jsonKey] = {}
}
} else {
if (jsonObj[jsonKey] === undefined) {
jsonObj[jsonKey] = valToAdd
}
}
} else if (jsonKeyArr.length === 2) {
if (jsonObj[jsonKeyArr[0]] === undefined) {
jsonObj[jsonKeyArr[0]] = {}
}
if (jsonObj[jsonKeyArr[0]][jsonKeyArr[1]] === undefined) {
jsonObj[jsonKeyArr[0]][jsonKeyArr[1]] = jsonValue
}
} else if (jsonKeyArr.length === 3) {
if (jsonObj[jsonKeyArr[0]] === undefined) {
jsonObj[jsonKeyArr[0]] = {}
}
if (jsonObj[jsonKeyArr[0]][jsonKeyArr[1]] === undefined) {
jsonObj[jsonKeyArr[0]][jsonKeyArr[1]] = {}
}
if (jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]] === undefined) {
jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]] = jsonValue
}
} else if (jsonKeyArr.length === 4) {
if (jsonObj[jsonKeyArr[0]] === undefined) {
jsonObj[jsonKeyArr[0]] = {}
}
if (jsonObj[jsonKeyArr[0]][jsonKeyArr[1]] === undefined) {
jsonObj[jsonKeyArr[0]][jsonKeyArr[1]] = {}
}
if (jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]] === undefined) {
jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]] = {}
}
if (jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]][jsonKeyArr[3]] === undefined) {
jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]][jsonKeyArr[3]] = jsonValue
}
} else if (jsonKeyArr.length === 5) {
if (jsonObj[jsonKeyArr[0]] === undefined) {
jsonObj[jsonKeyArr[0]] = {}
}
if (jsonObj[jsonKeyArr[0]][jsonKeyArr[1]] === undefined) {
jsonObj[jsonKeyArr[0]][jsonKeyArr[1]] = {}
}
if (jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]] === undefined) {
jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]] = {}
}
if (jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]][jsonKeyArr[3]] === undefined) {
jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]][jsonKeyArr[3]] = {}
}
if (jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]][jsonKeyArr[3]][jsonKeyArr[4]] === undefined) {
jsonObj[jsonKeyArr[0]][jsonKeyArr[1]][jsonKeyArr[2]][jsonKeyArr[3]][jsonKeyArr[4]] = jsonValue
}
} else if (jsonKeyArr.length > 5) {
return console.log("Length over 5 not supported yet!")
}
return jsonObj;
}
Regards.

OF course it's possible, a simple loop will perfeclty do the job.
function constructJson(jsonKey, jsonValue){
//REWRITE!!!!!!!!
langFile = {a:{}, foo:{}};// remove this for your own code
var jsonObj = langFile;
var jsonKeyArr = jsonKey.split('.');
var currentValue = jsonObj;
for(var i = 0; i < jsonKeyArr.length;i++){
if(currentValue[jsonKeyArr[i]]===undefined){
currentValue[jsonKeyArr[i]] = {};
}
if(i < jsonKeyArr.length-1){
currentValue = currentValue[jsonKeyArr[i]];
}else{
currentValue[jsonKeyArr[i]] = jsonValue;
}
}
return jsonObj;
}
alert(JSON.stringify(constructJson("a.b.cd.ef", "toto")));
I just assigning to a temporary variable each sublevel. When i'm on the last i'm assigning the value.

Yes you can, using the javascript reduce function on the array created from the splitted string.
function namespaceCreateExceptLast(representationOfElementToCreate, baseNamespace) {
var tokens;
if (typeof representationOfElementToCreate !== 'string')
throw new Error('Expecting string as first parameter');
if (baseNamespace === undefined)
baseNamespace = window;
tokens = representationOfElementToCreate.split('.');
// Remove the last element (which will contain the value)
tokens.pop();
// Use reduce to create part by part your new object
return tokens.reduce(function (prev, property) {
if (typeof prev !== 'object') {
throw Error('One property is already defined but not an object, namespace creation has failed', property);
return undefined;
} else {
if (!prev[property])
prev[property] = {};
return prev[property];
}
}, baseNamespace);
};
Then you can have:
function constructJson(jsonKey, jsonValue){
let jsonObj = langFile;
var lastItem = namespaceCreateExceptLast(jsonKey, jsonObj);
var lastKey = jsonKey.substring(jsonKey.lastIndexOf('.') + 1);
lastItem[lastKey] = jsonValue;
}
I have added some comments and exceptions to help you understand how it's done, but it's mainly based on the reduce function which you can easily get help for (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/reduce).

Javascript function returns undefined instead of int

My js/jquery function does not work properly and instead of INT returns undefined.
function __getLastSelectedCategory(table_id) {
if ( jQuery('.categories_table[data-table-id="1"]').find('td.active').length > 0 ){
console.log('check1');
if (table_id != '0') {
console.log('check2');
var checkTableId = parseInt(table_id) - 1;
var table = jQuery('.cl_categories_display ').find('table[data-table-id="' + checkTableId + '"]');
if (table.find('td.active').length > 0) {
console.log('check3');
console.log('table id: ' + table.find('td.active').data('category-id'));
return table.find('td.active').data('category-id');
} else {
console.log('check4');
__getLastSelectedCategory(checkTableId);
}
} else {
console.log('check5');
var lastTable = jQuery('.cl_categories_display ').find('table:last');
var lastTableId = lastTable.data('table-id');
if (lastTable.find('td.active').length > 0) {
console.log('check6');
return lastTable.find('td.active').data('category-id');
} else {
console.log('check7');
__getLastSelectedCategory(lastTableId);
}
}
} else {
console.log('check8');
return null;
}
}
when I run this function I see in console:
check 1
check 5
check 7
check 1
check 2
check 3
table id: 1
last cat: undefined
so the recursion works fine, but instead of integer (console printed "table id: 1") ir returns undefined. What could be wrong?

You forgot return from recurse call: It returned value from the inner function to the outer, but did not return it from outer function to the caller. Try this:
function __getLastSelectedCategory(table_id) {
if ( jQuery('.categories_table[data-table-id="1"]').find('td.active').length > 0 ){
console.log('check1');
if (table_id != '0') {
console.log('check2');
var checkTableId = parseInt(table_id) - 1;
var table = jQuery('.cl_categories_display ').find('table[data-table-id="' + checkTableId + '"]');
if (table.find('td.active').length > 0) {
console.log('check3');
console.log('table id: ' + table.find('td.active').data('category-id'));
return table.find('td.active').data('category-id');
} else {
console.log('check4');
return __getLastSelectedCategory(checkTableId);
}
} else {
console.log('check5');
var lastTable = jQuery('.cl_categories_display ').find('table:last');
var lastTableId = lastTable.data('table-id');
if (lastTable.find('td.active').length > 0) {
console.log('check6');
return lastTable.find('td.active').data('category-id');
} else {
console.log('check7');
return __getLastSelectedCategory(lastTableId);
}
}
} else {
console.log('check8');
return null;
}
}

else if is not printing the console value

I have JavaScript code which displays a multi coffee value.
If I am trying to display a single value coffee, its not going inside the else if.
I modified existing code but getting an undefined error.
Can you tell me how to fix it?
var multCoffees = false;
var singleCoffee = false;
if (Coffees.length > 1) {
multCoffees = true;
}
if (Coffees.length > 1) {
singleCoffee = true;
}
if (apptTimeCell) {
apptTimeHTML = MyDay.dish(allData, multCoffees, singleCoffee);
apptTimeCell.innerHTML = apptTimeHTML;
} else {
apptTimeCell = Util.cep("span", {
className: "appt-time"
});
patientRowTD.insertBefore(apptTimeCell, patCell);
}
dish: function (allData, multCoffees, singleCoffee) {
if (multCoffees) {
var htmlArr = [];
htmlArr.push(allData.APPT_TIME_DISPLAY, "<br/><span class='sub-detail'>", allData.MNEMONIC, "</span>");
console.log("multiCoffee" + allData.PROVIDER_MNEMONIC);
return htmlArr.join("");
} else if (singleCoffee) {
console.log("inside if" + allData.PROVIDER_MNEMONIC);
var htmlArr = [];
htmlArr.push(allData.APPT_TIME_DISPLAY, "<br/><span class='sub-detail'>", allData.PROVIDER_MNEMONIC, "</span>");
console.log("singleCoffee" + allData.PROVIDER_MNEMONIC);
return htmlArr.join("");
} else {
return allData.APPT_TIME_DISPLAY;
}
},
Working code:
var multCoffees = false;
if (Coffees.length > 1) {
multCoffees = true;
}
if (apptTimeCell) {
apptTimeHTML = MyDay.dish(allData, multCoffees);
apptTimeCell.innerHTML = apptTimeHTML;
} else {
apptTimeCell = Util.cep("span", {
className: "appt-time"
});
patientRowTD.insertBefore(apptTimeCell, patCell);
}
dish: function (allData, multCoffees) {
if (multCoffees) {
var htmlArr = [];
htmlArr.push(allData.APPT_TIME_DISPLAY, "<br/><span class='sub-detail'>", allData.MNEMONIC, "</span>");
console.log("multiCoffee" + allData.PROVIDER_MNEMONIC);
return htmlArr.join("");
} else {
return allData.APPT_TIME_DISPLAY;
}
},

Suppose Coffees.length is 2. You do this...
if (Coffees.length > 1) {
multCoffees = true;
}
...and 2 > 1, so now multCoffees is true, but then you do this, which checks the same thing...
if (Coffees.length > 1) {
singleCoffee = true;
}
and, since 2 > 1 still, now BOTH multCoffees AND singleCoffee are true. So when you try to do
if (multCoffees) {
...
} else if (singleCoffee) {
...
}
the first if branch is true, so it is executed, and the else branch is thus ignored (despite also being true). You probably meant to instead start with
if (Coffees.length == 1) {
singleCoffee = true;
} else if (Coffees.length > 1) {
multCoffees = true;
}

replace your first two ifs with this block:
if (Coffees.length == 1) {
singleCoffee = true;
}
else if(Coffees.length > 1){
multCoffees = true;
}
and then try it again!