LocalStorage not updating and then storing new values - javascript

My goal is to build a large array of data that has both text and numbers, and the text is randomly selected from a preselected array of names (first and last name). Function start() is activated with a button.
var malenames = ["John", "Bob", "Jim","Tim","Skylar","Zach","Jacob"];
var maleLast = ["J.","M.","B.","D.","W."];
var males = new Array();
males[0] = new Array("Placeholder","Placeholder",18);
males[1] = new Array("Placeholder","Placeholder",18);
males[2] = new Array("Placeholder","Placeholder",18);
males[3] = new Array("Placeholder","Placeholder",18);
males[4] = new Array("Placeholder","Placeholder",18);
males[5] = new Array("Placeholder","Placeholder",18);
males[6] = new Array("Placeholder","Placeholder",18);
males[7] = new Array("Placeholder","Placeholder",18);
males[8] = new Array("Placeholder","Placeholder",18);
males[9] = new Array("Placeholder","Placeholder",18);
function start() {
localStorage.setItem("random", Math.floor((Math.random()*(100-0))));
span.textContent = localStorage.getItem("random");
var i;
var j;
for (i=0; i < males.length; i++) {
males[i][0] = malenames[Math.floor(Math.random()*malenames.length)];
localStorage.setItem("males", JSON.stringify(males));
}
for (j=0; j<males.length; j++) {
males[j][1] = maleLast[Math.floor(Math.random()*maleLast.length)];
localStorage.setItem("males", JSON.stringify(males));
}
firstN.textContent = males[0][0];
lastN.textContent = males[0][1];
age.textContent = males[0][2];
}
This code successfully randomizes and then saves the first and last names into the array in localStorage. However, I am wanting to modify the number 18 on a timer by adding a value to it every so many seconds.
setInterval(function(){
var k;
for(k=0;k<males.length;k++){
males[k][2]++;
localStorage.setItem("males",JSON.stringify(males));
}
age.innerHTML = males[0][2];
}, 3000);
Everything works just fine and everything gets stored into localStorage until I refresh the page. When I refresh the page, the localStorage array is still correct until the interval occurs. When this happens, the arrays refresh back to [Placeholder, Placeholder, 18]. I am curious as to why the code does this when I am only trying to add to the age variable every interval. I would gladly accept feedback and explanations into understanding this. Thank you.

Maybe you really want to do something more like:
function shuffle(a){
a.sort(function(b, c){
return 0.5 - Math.random();
});
}
function RandomPeople(lastNameArray, firstNameArray){
var t = this;
this.lastNames; this.firstNames;
this.make = function(){
this.lastNames = lastNameArray.slice(); this.firstNames = firstNameArray.slice();
this.people = []; shuffle(this.firstNames);
this.firstNames.forEach(function(n){
t.people.push([t.lastNames[Math.floor(Math.random()*t.lastNames.length)], n, 18]);
});
return this;
}
this.grab = function(){
if(localStorage.people){
return JSON.parse(localStorage.people);
}
return false;
}
this.save = function(){
localStorage.people = JSON.stringify(this.people);
return this;
}
}
var men = new RandomPeople(['J.', 'M.', 'B.', 'D.', 'W.'], ['John', 'Bob', 'Jim', 'Tim', 'Skylar', 'Zach', 'Jacob']);
var peps = men.grab();
if(!peps){
men.make(); peps[5][2] += 2; men.save(); peps = men.people;
}
console.log(peps);

Related

Acrobat dynamic stamp popup window to reflect stamp comment

I am creating an application with an acrobat dynamic stamp pop up window and I would like it to reflect the stamp comment. My dynamic stamp has some JavaScript that will generate a pop-up window. The information on the pop-up window text field will become part of the stamp. I'm trying to add the contents of the pop-up window in two areas.
On the Dynamic stamp (done)
On the Stamp Comments (need help)
Below I added the JavaScript I currently have. If anyone here can help me find a solution, I'd really appreciate it.
var builder =
{
// These map to Text Fields in the Stamp
textBoxes :
[
{ field:"IsoNum", description:"Isometric Number:", default:function() { return Collab.user; } }
]
}
/*********** belongs to: AcroForm:Calculation:Calculate ***********/
// SEE GLOBAL JAVASCRIPT SECTION FOR CUSTOMIZATION
if (event.source.forReal)
{
var stampDialog = CreateDialog(builder);
app.execDialog(stampDialog);
for (var i = 0; i < builder.textBoxes.length; ++i)
{
var t = builder.textBoxes[i];
this.getField(t.field).value = stampDialog.textBoxResults[i];
}
}
function CreateDialog(dialogBuilder)
{
var sd = new Object();
sd.builder = dialogBuilder;
sd.textBoxResults = new Array();
var optionsElements = new Array();
for (var i = 0; i < dialogBuilder.textBoxes.length; ++i)
{
var view = new Object();
view.type = "view";
view.align_children = "align_row";
view.elements = new Array();
var t = dialogBuilder.textBoxes[i];
var s = new Object();
s.type = "static_text";
s.item_id = "sta" + i;
s.name = t.description;
s.width = 110;
var e = new Object();
e.type = "edit_text";
e.item_id = "edt" + i;
e.width = 150;
view.elements[0] = s;
view.elements[1] = e;
optionsElements[i] = view;
}
var optionsCluster =
{
type: "cluster",
name: "Options",
elements: optionsElements
};
sd.initialize = function(dialog)
{
var init = new Object();
for (var i = 0; i < this.builder.textBoxes.length; ++i)
{
var t = this.builder.textBoxes[i];
var id = "edt" + i;
init[id] = t.default();
}
dialog.load(init);
};
sd.commit = function(dialog)
{
var res = dialog.store();
for (var i = 0; i < this.builder.textBoxes.length; ++i)
{
var t = this.builder.textBoxes[i];
var id = "edt" + i;
this.textBoxResults[i] = res[id];
}
};
sd.description =
{
name: "Stamp Dialog",
elements:
[
{
type: "view",
align_children: "align_fill",
elements:
[
optionsCluster
]
},
{
type: "ok"
}
]
};
return sd;
}
I don't have any specific code but it seems you understand enough Acrobat JavaScript to understand my instructions.
The dialog code runs between the time you select and position the stamp and when the stamp actually gets created. For that reason, you can't set the contents of the note directly in your code because the stamp annotation doesn't actually exist until your commit function finishes. What you have to do instead is create a function that sets the contents of the note inside a timeOut and use a delay of about a half second.

How do I determine which value has been called from an array, to use in another function?

I have the below code which is called onclick, and want to be able to show a second image after a few seconds, depending on which one is chosen from the array - so for example if 1.png is shown, then I want to show 1s.png, 2.png then show 2s.png etc
function displayImage () {
var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
var l = img_name.length;
var rnd_no = Math.floor(l*Math.random());
document.getElementById("imgHolder").src = img_name[rnd_no];
}
How do I determine which image has been chosen from the array to then use in another function please ?
You're gonna need a global var for knowing that function is running for the first time or not.
var alreadyRandom = false;
function displayImage()
{
var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
if(alreadyRandom)
{
// If the random for first time is done
var rnd_no = img_name.indexOf(document.getElementById("imgHolder").getAttribute('src'));
if(rnd_no === img_name.length-1)
{
// If the current image is the last one in array,
// go back to the first one
rnd_no = 0;
}
else
{
// Choose the next image in array
rnd_no++;
}
document.getElementById("imgHolder").src = img_name[rnd_no];
}
else
{
var l = img_name.length;
var rnd_no = Math.floor(l*Math.random());
document.getElementById("imgHolder").src = img_name[rnd_no];
alreadyRandom = true; // Tell the function not to random again
}
return img_name[rnd_no];
}
Demo: http://jsbin.com/kanejugahi/edit?html,js,console,output
Moreover, making the array global would make your function more efficient.
Hope this helps,
I think it's important you understand how Functions work in JavaScript and how scope works.
What you need to do is you need to expose that information so that both functions have access. You have the array of images defined and you have already determined the random number so just make them available by declaring them outside of the function so now these variables are available. Defining variables in the global scope is generally bad practice but this is simply for teaching.
var selectedImage; // defined outside so it is available for other functions
function displayImage() {
var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
var rnd_no = Math.floor(img_name.length * Math.random());
selectedImage = img_name[rnd_no];
document.getElementById("imgHolder").src = selectedImage;
}
function anotherFunction() {
console.log(selectedImage);
}
As far as I understand the question, you can use a return and make the image array global.
var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
var img_class = '';
//this function will return the index of the image in array
function displayImage () {
var l = img_name.length;
var rnd_no = Math.floor(l*Math.random());
document.getElementById("imgHolder").src = img_name[rnd_no];
return rnd_no;
}
var nextimage;
function showImages(){
//your logic to show the next image here
nextimage = (displayImage ()+1)%img_name.length;
var myVar = setInterval(function(){
if(img_class==''){
document.getElementById("imgHolder").src = img_name[nextimage];
img_class = 's';
}else{
var img_arr = img_name[nextimage].split(".");
if(img_arr.length===2){
document.getElementById("imgHolder").src = img_arr[0]+"s."+img_arr[1];
}
img_class = '';
nextimage = (nextimage+1)%img_name.length;
}
}, 1000);
}
var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
var img_class = '';
//this function will return the index of the image in array
function displayImage () {
var l = img_name.length;
var rnd_no = Math.floor(l*Math.random());
document.getElementById("imgHolder").src = img_name[rnd_no];
return rnd_no;
}
var nextimage;
function showImages(){
//your logic to show the next image here
nextimage = (displayImage ()+1)%img_name.length;
var myVar = setInterval(function(){
if(img_class==''){
document.getElementById("imgHolder").innerHTML = img_name[nextimage];
img_class = 's';
}else{
var img_arr = img_name[nextimage].split(".");
if(img_arr.length===2){
document.getElementById("imgHolder").innerHTML = img_arr[0]+"s."+img_arr[1];
}
img_class = '';
nextimage = (nextimage+1)%img_name.length;
}
}, 1000);
}
showImages();
<div id="imgHolder"></div>
Mayve something like this?
var images = ["images/1.png", "images/2.png", "images/3.png"];
function displayImage () {
var dom = document.getElementById("imgHolder");
if ( images.indexOf(dom.src) >=0 ) {
dom.src = dom.src.replace(".png", "s.png"); // Seems like a stupid way to do this
return;
}
var l = images.length;
dom.src = images[Math.floor(l*Math.random())];
}

Adding rows to a table, looping an array, doing crazy things, readding first row each time

I feel like this is probably an issue with the loop somewhere, but I am a bit newer to coding and I am having trouble figuring out where exactly the issue is.
Every time I add a new task to the list, it prints the first task again. So if i add a second task, it inserts the first task and second task into the table, if i add a third task it inserts the first task and third task into the table.. its weird.
I looked in my local storage files, and its being stored properly. as in, (task one, task two, task three) no repetition there and its getting stored the way I want it to.
The issue is I am trying to do this:
I want to loop through the array, and have everything that is stored in local storage be posted on the table. (Currently, when I refresh it resets completely. its acting like session storage rather than local storage. it shows up in local storage after I refresh, but as soon as I click to add more after the refresh it disappears)
its a to do list, so I want it to basically show all items by looping through the array, and when I add a new item, have it store that and loop through the array again and post it on the table.
var table = document.getElementById("tableBody");
toDoArray = [];
function buildTable(){
addToStorage();
var retrievedTaskObject = localStorage.getItem("task");
var parsedObject = JSON.parse(retrievedTaskObject);
var addTheTaskName = parsedObject.taskName;
var addTheTaskDate = parsedObject.taskDate;
for(i=0; i < toDoArray.length; i++){
var row = table.insertRow(0);
var cellName = row.insertCell(0);
var cellDate = row.insertCell(1);
var cellId = row.insertCell(2);
var cellCheck = row.insertCell(3);
cellName.innerHTML= parsedObject[i].name;
cellDate.innerHTML= parsedObject[i].date;
var checkStuff = "<input type='checkbox'>";
cellCheck.innerHTML = checkStuff;
}
}
function submitForm(name,date) {
var addTaskName = document.getElementById("taskName").value;
var addTaskDate = document.getElementById("dateTask").value;
var taskSomething = getTaskObj(addTaskName,addTaskDate);
toDoArray.push(taskSomething);
buildTable();
};
function getTaskObj(taskName,taskData){
var taskObject = {
name: taskName,
date: taskData,
};
return taskObject;
}
function addToStorage(){
var storedArray = JSON.stringify(toDoArray);
localStorage.setItem("task",storedArray);}
When you are calling buildTable in submit form, its looping over the whole array again and adding the elements to table. Try this,
var table = document.getElementById("tableBody");
toDoArray = [];
function buildTable(){
addToStorage();
var retrievedTaskObject = localStorage.getItem("task");
var parsedObject = JSON.parse(retrievedTaskObject);
var addTheTaskName = parsedObject.taskName;
var addTheTaskDate = parsedObject.taskDate;
for(i=0; i < toDoArray.length; i++){
addTaskToTable(parsedObject[i]);
}
}
function addTaskToTable(obj){
var row = table.insertRow(0);
var cellName = row.insertCell(0);
var cellDate = row.insertCell(1);
var cellId = row.insertCell(2);
var cellCheck = row.insertCell(3);
cellName.innerHTML= obj.name;
cellDate.innerHTML= obj.date;
var checkStuff = "<input type='checkbox'>";
cellCheck.innerHTML = checkStuff;
}
function submitForm(name,date) {
var addTaskName = document.getElementById("taskName").value;
var addTaskDate = document.getElementById("dateTask").value;
var taskSomething = getTaskObj(addTaskName,addTaskDate);
toDoArray.push(taskSomething);
addTaskToTable(taskSomething);
};
function getTaskObj(taskName,taskData){
var taskObject = {
name: taskName,
date: taskData,
};
return taskObject;
}
function addToStorage(){
var storedArray = JSON.stringify(toDoArray);
localStorage.setItem("task",storedArray);
}
Here's the snippet with my comments.
var tasksStorageName = 'myTasks';
var tasksTable = document.getElementById("tasks_table");
var saveBtn = document.getElementById("save_task_btn");
var tasksList;
var storage = getStorage();
// this is dirty workaround, because localStorage disabled
// due to security reasons. feel free to remove this function
// and use localStorage directly
function getStorage() {
try {
return window.localStorage;
}
catch(e) {
return {
get: function(key) {
return JSON.stringify([
{
id: Date.now(),
name: 'first task',
date: '10/10/2016',
done: false
}
]);
},
set: function(key, object) {
}
};
}
}
function getTasksList() {
var dumpedTasks = storage.get(tasksStorageName);
// in case there are no tasks saved we return empty list
// otherwise parse our tasks.
return dumpedTasks == null ? [] : JSON.parse(dumpedTasks);
}
function dumpTaskList(tasksList) {
var dumpedTasks = JSON.stringify(tasksList);
storage.set(tasksStorageName, dumpedTasks);
}
// try to reuse things, so we have `renderTasks` function
// to render all our tasks to table which uses `renderTask`
// for each task. later we'll use it to add our newly created
// tasks.
function renderTasks(tasks) {
for (var index = 0; index < tasks.length; index++) {
var task = tasks[index];
renderTask(task);
}
}
// helper function to create checkbox
function createCheckboxForTask(task){
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = task.done;
return checkbox;
}
function renderTask(task) {
var taskRow = tasksTable.insertRow();
var doneCell = taskRow.insertCell();
var nameCell = taskRow.insertCell();
var dateCell = taskRow.insertCell();
taskRow.id = task.id;
doneCell.appendChild(createCheckboxForTask(task));
nameCell.innerText = task.name;
dateCell.innerText = task.date;
}
function createTask(name, date) {
return {
// quite naive id generation, don't use it in production
id: Date.now(),
name: name,
date: date,
done: false
}
}
// to restore your previously added tasks
// you need to get them from localStorage
// on load event and render them.
window.addEventListener('load', function(e) {
tasksList = getTasksList();
if (tasksList.length > 0) {
renderTasks(tasksList);
}
});
saveBtn.addEventListener('click', function() {
var name = document.getElementById("task_name").value;
var date = document.getElementById("task_date").value;
var newTask = createTask(name, date);
tasksList.push(newTask);
renderTask(newTask);
dumpTaskList(tasksList);
});
/*
// function does too many things
function buildTable(){
// if you try to call `buildTable` at page load then
// `addToStorage` function will set localStorage task item
// to empty array. thats why you lost your state every time
// you reload page
addToStorage();
var retrievedTaskObject = localStorage.getItem("task");
var parsedObject = JSON.parse(retrievedTaskObject);
// why this two unnecessary variables?
var addTheTaskName = parsedObject.taskName;
var addTheTaskDate = parsedObject.taskDate;
for(i=0; i < toDoArray.length; i++){
addTaskToTable(parsedObject[i]);
}
}
// try to give parametes as well as variables meaningful names
// like `task` this time, not `obj`
function addTaskToTable(obj){
var row = table.insertRow(0);
var cellName = row.insertCell(0);
var cellDate = row.insertCell(1);
var cellId = row.insertCell(2);
var cellCheck = row.insertCell(3);
cellName.innerHTML= obj.name;
cellDate.innerHTML= obj.date;
var checkStuff = "<input type='checkbox'>";
cellCheck.innerHTML = checkStuff;
}
function submitForm(name,date) {
var addTaskName = document.getElementById("taskName").value;
var addTaskDate = document.getElementById("dateTask").value;
var taskSomething = getTaskObj(addTaskName,addTaskDate);
toDoArray.push(taskSomething);
addTaskToTable(taskSomething);
};
// actually you are creating new task object, not getting it
// from somewhere, so it's better to name it like createTask
// or newTask
function getTaskObj(taskName,taskData){
var taskObject = {
name: taskName,
date: taskData,
};
return taskObject;
}
function addToStorage(){
var storedArray = JSON.stringify(toDoArray);
localStorage.setItem("task",storedArray);
}
*/
<div>
<label>Name: </label>
<input id="task_name" type="text"/>
</div>
<div>
<label>Date: </label>
<input id="task_date" type="text"/>
</div>
<button id="save_task_btn" type="button">Save</button>
<table id="tasks_table">
<thead>
<tr>
<th>Done</th>
<th>Name</th>
<th>Date</th>
</tr>
</thead>
<tbody>
</tbody>
<table>

transferring items among several arrays in javascript

I have got a pretty complicated issue, I tried everything and its not working properly. So the conception is (i just copied the interesting part of it, otherwise it would be few hundred more lines) :
The program is a card game and 24 cards (4 different colors, one is always stronger,it is called ADU) are distributed randomly among 4 players (4 arrays). The table where you put down the cards are represented by "asztal" array. First the human player puts a card, then the computers should reach in this order:
If they have same color and higher value - pick that card
If they have same color and any value - pick that card
If they dont have matching color, any car from the special color set (for being simple, its the first card the loop would find in the array)
If they dont have matching color, nor card from special color set, than the first element of the array (player[0]).
If you run my code, you would see it is not grabbing 1/1/1 card from each array, but sometimes more. And those cards do disappear, and not getting into the asztal array. My code: (https://jsfiddle.net/daxa3pL2/)
function CardA(name,value,adu){
this.name = name;
this.value = value;
};
function CardB(name,value,adu){
this.name = name;
this.value = value;
};
function CardC(name,value,adu){
this.name = name;
this.value = value;
};
function CardD(name,value,adu){
this.name = name;
this.value = value;
};
CardA.prototype.adu = false;
CardB.prototype.adu = false;
CardC.prototype.adu = false;
CardD.prototype.adu = false;
var a9 = new CardA("Tök kilenc",0);
var a10 = new CardA("Tök tíz",10);
var aal = new CardA("Tök alsó",2);
var afel = new CardA("Tök felső",3);
var akir = new CardA("Tök király",4);
var aasz = new CardA("Tök ász",11);
var b9 = new CardB("Levél kilenc",0);
var b10 = new CardB("Levél tíz",10);
var bal = new CardB("Levél alsó",2);
var bfel = new CardB("Levél felső",3);
var bkir = new CardB("Levél király",4);
var basz = new CardB("Levél ász",11);
var c9 = new CardC("Makk kilenc",0);
var c10 = new CardC("Makk tíz",10);
var cal = new CardC("Makk alsó",2);
var cfel = new CardC("Makk felső",3);
var ckir = new CardC("Makk király",4);
var casz = new CardC("Makk ász",11);
var d9 = new CardD("Szív kilenc",0);
var d10 = new CardD("Szív tíz",10);
var dal = new CardD("Szív alsó",2);
var dfel = new CardD("Szív felső",3);
var dkir = new CardD("Szív király",4);
var dasz = new CardD("Szív ász",11);
CardC.prototype.adu = true;
var player1 = [c9,b9,b10,d9,a9,d10];
var player2 = [a10,aal,dal,c10,cal,bal];
var player3 = [bfel,bkir,basz,dfel,dkir,dasz];
var player4 = [afel,akir,aasz,cfel,ckir,casz];
var asztal = [];
asztal.push(player1.splice(0,1)[0]);
var player2card1 = function() {
for (i = 0; i < player2.length; i++) {
if (Object.getPrototypeOf(player2[i]) == Object.getPrototypeOf(asztal[0]) && player2[i].value > asztal[0].value) {
asztal.push(player2.splice(i,i+1)[0])
return
}
}
if (asztal.length == 1) {
for (i = 0; i < player2.length; i++) {
if (Object.getPrototypeOf(player2[i]) == Object.getPrototypeOf(asztal[0])) {
asztal.push(player2.splice(i,i+1)[0])
return
}
}
}
if (asztal.length == 1){
for (i = 0; i < player2.length; i++) {
if (player2[i].adu == true) {
asztal.push(player2.splice(i,i+1)[0])
return
}
}
}
if (asztal.length == 1) {
asztal.push(player2.splice(0,1)[0])
return
}
};
var player3card1 = function() {
for (i = 0; i < player3.length; i++) {
if (Object.getPrototypeOf(player3[i]) == Object.getPrototypeOf(asztal[0]) && player3[i].value > asztal[0].value) {
asztal.push(player3.splice(i,i+1)[0])
return
}
}
if (asztal.length == 2) {
for (i = 0; i < player3.length; i++) {
if (Object.getPrototypeOf(player3[i]) == Object.getPrototypeOf(asztal[0])) {
asztal.push(player3.splice(i,i+1)[0])
return
}
}
}
if (asztal.length == 2){
for (i = 0; i < player3.length; i++) {
if (player3[i].adu == true) {
asztal.push(player3.splice(i,i+1)[0])
return
}
}
}
if (asztal.length == 2) {
asztal.push(player3.splice(0,1)[0])
return
}
};
var player4card1 = function() {
for (i = 0; i < player4.length; i++) {
if (Object.getPrototypeOf(player4[i]) == Object.getPrototypeOf(asztal[0]) && player4[i].value > asztal[0].value) {
asztal.push(player4.splice(i,i+1)[0])
return
}
}
if (asztal.length == 3) {
for (i = 0; i < player4.length; i++) {
if (Object.getPrototypeOf(player4[i]) == Object.getPrototypeOf(asztal[0])) {
asztal.push(player4.splice(i,i+1)[0])
return
}
}
}
if (asztal.length == 3){
for (i = 0; i < player4.length; i++) {
if (player4[i].adu == true) {
asztal.push(player4.splice(i,i+1)[0])
return
}
}
}
if (asztal.length == 3) {
asztal.push(player4.splice(0,1)[0])
return
}
};
player2card1();
player3card1();
player4card1();
console.log(player1);
console.log(player2);
console.log(player3);
console.log(player4);
console.log(asztal);
So I debugged your code and there are two fundamental mistakes I found:
1: When you use the splice inside a loop, the indices will change. So, when you do for example
asztal.push(player2.splice(i,i+1)[0])
and put it inside a loop, the indices for player2 matching your condition will change as soon as you do the splice. So the next iteration of your loop will give incorrect results/ miss an index of an object that should be removed.
A possible solution to this is that instead of splice, inside your for-loops, just insert elements into asztal, and DON'T splice the parent. Then outside the loop, splice them from from the players using a FILTER function as follows:
var player2card1 = function() {
for (i = 0; i < player2.length; i++) {
if (Object.getPrototypeOf(player2[i]) == Object.getPrototypeOf(asztal[0]) && player2[i].value > asztal[0].value) {
asztal.push({name: player2[i].name, value: player2[i].value, prototype: player2[i].prototype});
player2[i].name = "delete";
return
}
}
player2.filter((each)=>{return each.name!== "delete"});
2: The second mistake (that I don't think is the problem here but still can cause trouble) is your use of "==". In Javascript, try to use '===' as far as possible as it also checks the type along with equality.
A little refactoring can go a long way to making this clear.
// define a card type class
function CardType(type, adu)
{
// This simply says that if ADU is undefined (not passed) then
// ADU should be set to false by default
this.adu = (typeof adu === 'undefined' ? false : adu);
this.type = type;
}
function Card(name, value, type)
{
this.name = name;
this.value = value;
this.type = type;
}
// Define our card types
var CardA = new CardType("A");
var CardB = new CardType("B");
var CardC = new CardType("C", true);// set to be ADU
var CardD = new CardType("D");
// Define our cards
var a9 = new Card("Tök kilenc",0, CardA);
var a10 = new Card("Tök tíz",10, CardA);
var aal = new Card("Tök alsó",2, CardA);
var afel = new Card("Tök felső",3, CardA);
var akir = new Card("Tök király",4, CardA);
var aasz = new Card("Tök ász",11, CardA);
var b9 = new Card("Levél kilenc",0, CardB);
var b10 = new Card("Levél tíz",10, CardB);
var bal = new Card("Levél alsó",2, CardB);
var bfel = new Card("Levél felső",3, CardB);
var bkir = new Card("Levél király",4, CardB);
var basz = new Card("Levél ász",11, CardB);
var c9 = new Card("Makk kilenc",0, CardC);
var c10 = new Card("Makk tíz",10, CardC);
var cal = new Card("Makk alsó",2, CardC);
var cfel = new Card("Makk felső",3, CardC);
var ckir = new Card("Makk király",4, CardC);
var casz = new Card("Makk ász",11, CardC);
var d9 = new Card("Szív kilenc",0, CardD);
var d10 = new Card("Szív tíz",10, CardD);
var dal = new Card("Szív alsó",2, CardD);
var dfel = new Card("Szív felső",3, CardD);
var dkir = new Card("Szív király",4, CardD);
var dasz = new Card("Szív ász",11, CardD);
var player1 = [c9,b9,b10,d9,a9,d10];
var player2 = [a10,aal,dal,c10,cal,bal];
var player3 = [bfel,bkir,basz,dfel,dkir,dasz];
var player4 = [afel,akir,aasz,cfel,ckir,casz];
var asztal = [];
// It doesn't really make sense to splice the array because
// you are changing the array.
// asztal.push(player1.splice(0,1)[0]);
// This line can be replaced with a simple:
asztal.push(player1[0]);
// This function has lots of redundant code and we can simplify it greatly
// as well as generalize it to work for each player
function getNextCard(player, card){
// By default we take the first card unless we find a better one along the way.
var matchCase2 = null, // same type, any value
matchCase3 = null, // special set
matchCase4 = player[0]; // any card
for(i = 0; i < player.length; i++)
{
// Check our first case
if(player[i].type.type == card.type.type &&
player[i].value > card.value){
return player[i];
}
if(matchCase2 === null && player[i].type.type == card.type.type){
matchCase2 = player[i];
}
if(matchCase3 === null && player[i].type.adu === true){
matchCase3 = player[i];
}
}
if(matchCase2 !== null) return matchCase2;
if(matchCase3 !== null) return matchCase3;
return matchCase4;
}
console.log(getNextCard(player2, asztal[0]));
console.log(getNextCard(player3, asztal[0]));
console.log(getNextCard(player4, asztal[0]));

Html5/javascript/easeljs game project.Lots of code.I need a way out

I am working on a card game with HTML5 canvas and javascript with create.js library. The problem i have is that, I have an onclick function that deletes the clicked card from player's hand(removes the object from the array with splice and then redraws the canvas/redraws on canvas the new array of player's cards without the deleted one). When i do this for first time it does well.But if I click again on the card that it should be for example at index 1 in the array(after the splice method) it doesn't work.
Look at this code:
Here is my code for class Card:
function Card(suit,rank,imageFrontUrl,imageBackUrl)
{
this.imageFront = new createjs.Bitmap(imageFrontUrl);
this.imageBack = new createjs.Bitmap(imageBackUrl);
this.suit = suit;
this.rank = rank;
}
function Deck(){
this.cards = new Array();
this.makeDeck = function()
{
this.cards[0]= new Card("clubs",1,"images/114.png","images/155.png");
this.cards[1]= new Card("clubs",2,"images/115.png","images/155.png");
this.cards[2]= new Card("clubs",3,"images/116.png","images/155.png");
this.cards[3]= new Card("clubs",4,"images/117.png","images/155.png");
this.cards[4]= new Card("clubs",5,"images/118.png","images/155.png");
this.cards[5]= new Card("clubs",6,"images/119.png","images/155.png");
...
}
this.shuffleDeck = function()
{
var j,k;
for (j = 0; j < this.cards.length; j++) {
k = Math.floor(Math.random() * this.cards.length);
temp = this.cards[j];
this.cards[j] = this.cards[k];
this.cards[k] = temp;
}
}
this.dealCardsPlayer = function()
{
var playerDeck = new Array();
for(var i = 0; i<6;i++)
{
var x = this.cards.pop();
playerDeck.push(x);
}
return playerDeck;
}
}
Here is my code for class Player:
function Player()
{
this.playerTurn = false;
this.id = this;
this.name = this;
this.score = this;
this.playerHand = new Array();
this.playerTakenCards = new Array();
this.playerPickCard = function(n)
{
var card = this.playerHand(n);
return card;
}
this.tempArray = this;}
Here is my init function:
function init(){
var canvas = document.getElementById("tutorialCanvas");
var stage = new createjs.Stage(canvas);
var deck = new Deck();
var player1 = new Player();
deck.makeDeck();
deck.shuffleDeck();
player1.playerHand = deck.dealCardsPlayer();
function drawPlayerCards(){
var rotation=280;
for(var i =0;i<player1.playerHand.length;i++)
{
player1.playerHand[i].imageFront.x=330;
player1.playerHand[i].imageFront.y=750;
player1.playerHand[i].imageFront.regX = 0;
player1.playerHand[i].imageFront.regY = 96;
player1.playerHand[i].imageFront.rotation = rotation;
rotation = player1.playerHand[i].imageFront.rotation+20;
stage.addChild(player1.playerHand[i].imageFront);
}
}
createjs.Ticker.addEventListener("tick", stage);}
And here is the function i have problem with:
player1.playerHand[1].imageFront.addEventListener('click',function(event)
{
stage.removeAllChildren();
player1.playerHand.splice(1,1);
drawTableDeck();
drawPlayerCards();
}
After some researching I realized that the function works just for the first bitmap player1.playerHand[1].imageFront . If i change the array with the first onclick event and after that player1.playerHand[1].imageFront is some other image/bitmap, it doesn't work for it. Please help!
Why are you "hardcoding" the index of a card in your hand?
player1.playerHand.forEach(function(card) {
card.imageFront.addEventListener("click", function() {
var index = player1.playerHand.indexOf(card);
if (index != -1) {
stage.removeAllChildren();
player1.playerHand.splice(index, 1);
drawPlayerCards();
}
});
});
Some other notes:
It's a convention to use [] instead of new Array()
We normally put the opening brace { on the same line
Your Player constructor has an error: this.playerHand[n] instead of this.playerHand(n)

Categories