Hi,
I started to develop a SAPUI5 tic tac toe in javascript, but two issues prevent the application to work.
1- I don't know how to refresh my model when I call the onInit() in reset function
2- When I play, I win just only one "x" or "o" and I don't know how correct this issue? With for loop?
Here is my code :
sap.ui.controller("Morpion.controllers.MorpionView", {
onInit:function()
{
oTableau = sap.ui.getCore().byId("app").byId("morpionView").byId("tabCreateMorpion");
oData = [];
var longTab = 3;
for(var x = 0; x < longTab; x++)
{
oData[x] = {};
for(var y = 0; y < longTab; y++)
{
oData[x][y] = " ";
}
}
var oModel = new sap.ui.model.json.JSONModel(oData, "Data");
var oCol1 = new sap.m.Column({ header : new sap.m.Label({text : ""})});
var oCol2 = new sap.m.Column({ header : new sap.m.Label({text : ""})});
var oCol3 = new sap.m.Column({ header : new sap.m.Label({text : ""})});
oInput1 = new sap.m.Input({value:"{Data>input1}", type:"Text", width:"100%", maxLength:1, change:this.play});
oInput2 = new sap.m.Input({value:"{Data>input2}", type:"Text", width:"100%", maxLength:1, change:this.play});
oInput3 = new sap.m.Input({value:"{Data>input3}", type:"Text", width:"100%", maxLength:1, change:this.play});
oTableItems = new sap.m.ColumnListItem({cells:[oInput1, oInput2, oInput3]});
oTableau.addColumn(oCol1);
oTableau.addColumn(oCol2);
oTableau.addColumn(oCol3);
oTableau.bindAggregation("items", "Data>/", oTableItems);
oTableau.setModel(oModel, "Data");
oResetTable = sap.ui.getCore().byId("app").byId("morpionView").byId("tabResetMorpion");
oResetData = {text:"play again"};
var oResetModel = new sap.ui.model.json.JSONModel(oResetData, "ResetData");
var oResetCol = new sap.m.Column({ header : new sap.m.Label({text : ""})});
oResetButton = new sap.m.Button({
press:this.reset,
text:"play again",
width:"100%"
})
oTableButton = new sap.m.ColumnListItem({cells:[oResetButton]});
oResetTable.addColumn(oResetCol);
oResetTable.bindAggregation("items", "ResetData>/", oTableButton);
oResetTable.setModel(oResetModel, "ResetData");
},
play:function(oEvent)
{
var oValue = oEvent.getParameter("value");
var nombreTours;
var i;
var x = 0;
var y = 0;
gagne = false;
for(nombreTours = 0; nombreTours < 9; nombreTours+=1)
{
switch(oValue)
{
case "o":
oValue = "o";
break;
case "O":
oValue = "O";
break;
case "x":
oValue = "x";
break;
case "X":
oValue = "X";
break;
default:
break;
}
oData[x][y] = oValue; // => the second issue is here, no?
for(i = 0; i < 3; i++)
{
if(oData[i][0] != " " && oData[i][0] == oData[i][1] && oData[i][0] == oData[i][2])
{
gagne = true;
}
}
for(i = 0; i < 3; i++)
{
if(oData[0][i] != " " && oData[0][i] == oData[1][i] && oData[0][i] == oData[2][i])
{
gagne = true;
}
}
if(oData[1][1] != " " && ((oData[0][0] == oData[1][1] && oData[0][0] == oData[2][2])
|| (oData[0][2] == oData[1][1] && oData[0][2] == oData[2][0])))
{
gagne = true;
}
}
if(gagne && ((oValue == "o") || (oValue =="O") || (oValue == "x") || (oValue == "X")))
{
alert(oValue + " a gagné");
}
else if(oValue != "o" && oValue != "O" && oValue != "x" && oValue != "X")
{
alert("Veuillez saisir O/o ou X/x");
}
else
{
alert("Personne ne gagne");
}
},
reset:function()
{
var oController = sap.ui.getCore().byId("app").byId("morpionView").getController();
oController.onInit();
}
});
Thanks in advance,
Best regards.
Ewen.