adding many elements together in p5 - javascript

i want to make a textbox and a dropdown list together. when i run code it executes only one(either that textbox or dropdown)
here's my code:
let button;
let sel;
let sel2;
var text;
var x = 10;
var y = 230;
var img;
function setup() {
createCanvas(windowWidth, 600);
background(0);
img = loadImage("audi.jpg");
sel = createSelect();
sel.position(20, 150);
sel.option('FERARI');
sel.option('MERCEDES');
sel.option('TOYOTA');
sel.option('AUDI');
sel.option('BMW');
sel2 = createSelect();
sel2.position(300, 150);
sel2.option('FERARI');
sel2.option('MERCEDES');
sel2.option('TOYOTA');
sel2.option('AUDI');
sel2.option('BMW');
button = createButton('COMPARE');
button.position(550, 150);
button.mousePressed(display);
text = createInput();
text.pos(300, 300);
}
function display() {
textSize(16);
fill(255, 215, 0);
let index = sel.value();
text(index, 20, 430);
let number = sel2.value();
text(number, 300, 430);
if(sel.value() === 'BMW') {
text('MILEAGE: 14-20 km/l', 20, 460);
text('COST: 41.7-48.5 LAKH', 20, 490);
text('FUEL TYPE: PREMIUM FUEL', 20, 520);
}
if(sel.value() === 'AUDI') {
text('MILEAGE: 9 km/l', 20, 460);
text('COST: 1.345 CORE', 20, 490);
text('FUEL TYPE: PETROL', 20, 520);
}
if(sel.value() === 'FERARI') {
text('MILEAGE: 9 km/l', 20, 460);
text('COST: 3.5 CORE', 20, 490);
text('FUEL TYPE: PETROL', 20, 520);
}
if(sel.value() === 'MERCEDES BENZ C CLASS') {
text('MILEAGE: 10-19 km/l', 20, 460);
text('COST: 40.9 LAKHS', 20, 490);
text('FUEL TYPE: UNLEADED FUEL', 20, 520);
}
if(sel.value() === 'TOYOTA') {
text('MILEAGE: 7-10 km/l', 20, 460);
text('COST: 28.66-36.88 LAKH', 20, 490);
text('FUEL TYPE: MID GRADE GASOLINE', 20, 520);
}
if(sel2.value() === 'AUDI') {
text('MILEAGE: 9 km/l', 300, 460);
text('COST: 1.345 CORE', 300, 490);
text('FUEL TYPE: PETROL', 300, 520);
}
if(sel2.value() === 'BMW') {
text('MILEAGE: 14-20 km/l', 300, 460);
text('COST: 41.7-48.5 LAKH', 300, 490);
text('FUEL TYPE: PREMIUM FUEL', 300, 520);
}
if(sel2.value() === 'TOYOTA') {
text('MILEAGE: 7-10 km/l', 300, 460);
text('COST: 28.66-36.88 LAKH', 300, 490);
text('FUEL TYPE: MID GRADE GASOLINE', 300, 520);
}
if(sel2.value() === 'FERARI') {
text('MILEAGE: 9 km/l', 300, 460);
text('COST: 3.5 CORE', 300, 490);
text('FUEL TYPE: PETROL', 300, 520);
}
if(sel2.value() === 'MERCEDES BENZ C CLASS') {
text('MILEAGE: 10-19 km/l', 300, 460);
text('COST: 40.9 LAKHS', 300, 490);
text('FUEL TYPE: UNLEADED FUEL', 300, 520);
}
}
(don't laugh at the design.)
when i do some arranging, then sometimes the textbox appears and when i click the compare button nothing happens.
pls help and thnx in advance.

There are two problems in your code.
You have a variable named var text. Because p5.js is already using that name for a function, you have to rename it to something like var textBox. (Don't forget to change the lines in your setup() as well)
textBox.pos() is not a valid function. Change it to textBox.position();

Related

How do I fetch the current Y cursor in jsPDF autotable?

My code:
if(table!=null){
if(table.rows.length>1){
doc.autoTable({
html: '#news_pos_details',
startX: 50,
startY: 144,
theme: 'grid',
columnStyles: {
0: {
cellWidth: 70,
},
1: {
cellWidth: 70,
},
2: {
cellWidth: 40,
},
},
styles: {
fontSize: 15,
cellWidth: 'wrap'
}
})
}
else{
doc.setFontType("italic");
doc.text(52,174,"No news available in this section");
}
}
doc.text(//How do I know where to start text??)
I want to write some text below the table, but I am confused as to what the Y coordinate should be. It will be dynamic depending on the height of the table? So what's the workaround for it?
you can use
doc.lastAutoTable.finalY
doc.text("En votre aimable règlement", 20, doc.lastAutoTable.finalY + 46);

Why do i need press twice to display the element 0?

I want to press one time to display all the elements,
why I should press two times to display the 0 elements?
I try to order the if statements but I didn't figure it out.
here is the link fiddle
var words = ['rainbow', 'heart', 'purple', 'friendship', 'love'];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
textSize(32);
text(words[i]);
}
function mousePressed() {
for (let i = 0; i < words.length; i++) {
text(words[i], 100, i * 50 + 50);
if (i == 0) {
fill(255, 0, 0);
}
if (i == 1 ) {
fill(0, 50, 100, 300);
}
if (i == 2) {
fill(0, 165, 300, 200);
}
if (i == 3) {
fill(0, 50, 100, 300);
}
if (i == 4) {
fill(0, 50, 100, 300);
}
}
}
Because fill() was not called before the first text(). By the way, drawing code should reside in draw().
const words = ['rainbow', 'heart', 'purple', 'friendship', 'love'],
colors = [
[255, 0, 0],
[0, 50, 100, 300],
[0, 165, 300, 200],
[0, 50, 100, 300],
[0, 50, 100, 300],
];
let isMousePressed = false;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
textSize(32);
if (isMousePressed)
words.forEach((w, i) => {
fill.call(null, colors[i]);
text(w, 100, (i + 1) * 50);
});
}
function mousePressed() {
isMousePressed = true;
}
Credits for solving goes to #TimTimWong, I am just explaining a comment I made.
const words = [
{
word: 'rainbow',
colors: [255, 0, 0],
},
{
word: 'heart',
colors: [0, 50, 100, 300],
},
{
word: 'purple',
colors: [0, 165, 300, 200],
},
{
word: 'friendship',
colors: [0, 50, 100, 300],
},
{
word: 'love',
colors: [0, 50, 100, 300],
}
];
let isMousePressed = false;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
textSize(32);
if (isMousePressed) {
words.forEach(({ word, color }, i) => {
fill.call(null, color);
text(word, 100, (i + 1) * 50);
});
}
}
function mousePressed() {
isMousePressed = true;
}

Array inside javascript property

function initialise() {
doubleCount = 0;
playerturn = 1;
hotelrating = 0;
flipped = 0;
//setRent();
//createPlayers();
//createPositions();
//createCards();
//createSets();
//drawBoard();
//starplugin();
//setPrices();
}
function playgame() {
setPrices();
clearContent();
rollDice(); //two dice rolls
drawDice(); //displays the dice
setPosition(); //update player position
movePiece();
checkForSale();
checkDouble();
}
function starplugin() {
$('#star').raty({
path: 'lib/img/',
cancel: true,
cancelHint: 'remove my rating!',
cancelPlace: 'right'
});
$("#star > img").click(function () {
hotelrating = $(this).attr("alt");
});
}
function clearContent() {
if (flipped === 1) {
//$(".cards").flippyReverse();
$(".cards").flippy({
color_target: "#F8F8F8",
duration: "500"
});
flipped = 0;
}
$("#drawncardtitle").text("");
$("#drawncard").text("");
$("#buildsets1").hide();
$("#buildsets2").hide();
$('.buildsets').find('option').remove();
}
function canBuild() {
var set = ["brown", "blue", "pink", "orange", "red", "yellow", "green", "navy"];
var buildablesets = [
[""],
[""],
[""]
];
for (var i = 0; i < set.length; i++) {
if (doesOwnSet('player' + playerturn, set[i])) {
buildablesets[playerturn].push(set[i]);
}
}
buildablesetsx = buildablesets[playerturn];
if (buildablesetsx.length > 1) {
$(".buildmenu").toggle();
$("#buildsets" + playerturn).show();
buildsets = $("#buildsets" + playerturn);
for (k = 1; k < buildablesets[playerturn].length; k++) {
buildsets.append("<option value='" + buildablesetsx[k] + "'>" + buildablesetsx[k] + "</option>");
}
} else {
$(".buildmenu").hide();
}
}
function build() {
var setname = $('#buildsets' + playerturn).find(":selected").text();
var balance = players['player' + playerturn].balance;
var currentRating = sets[setname].rating;
var ratingToAdd = hotelrating - currentRating;
var cost = sets[setname].cost * ratingToAdd;
if (hotelrating < currentRating) {
alert("Sorry mate, you can't downgrade");
}
if (cost > balance) {
alert("Sorry mate, you can't afford that!");
} else {
players['player' + playerturn].balance = balance - cost;
sets[setname].rating = hotelrating;
}
$(".buildmenu").hide();
}
function doesOwnSet(player, type) {
return Object.keys(positions)
.map(function (key) {
return positions[key];
})
.filter(function (pos) {
return pos.type === type;
})
.every(function (pos) {
return pos.owner === player;
});
}
function rollDice() {
var x = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
var y = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
dice1 = x;
dice2 = y;
dicetotal = dice1 + dice2;
}
function drawDice() {
$('.dice1').css('background-image', 'url(img/dice/' + dice1 + '.png)');
$('.dice2').css('background-image', 'url(img/dice/' + dice2 + '.png)');
}
function drawBoard() {
var set = ["brown", "blue", "pink", "orange", "red", "yellow", "green", "navy"];
for (var i = 0; i < set.length; i++) {
var setcolor = sets[set[i]].color;
if (set[i] == "yellow") {
$('.yellow').css('color', 'black');
}
$('.' + set[i]).css('background', setcolor);
}
}
function setPosition() {
players['player' + playerturn].currentpos = players['player' + playerturn].startpos + dicetotal;
players['player' + playerturn].prevpos = players['player' + playerturn].currentpos - dicetotal;
currentposition = players['player' + playerturn].currentpos;
if (currentposition >= 40) {
var balance = players['player' + playerturn].balance;
players['player' + playerturn].balance = balance + 200;
$("#debug2").text("+ $200");
if (currentposition > 40) {
players['player' + playerturn].currentpos = currentposition - 40;
}
}
if (currentposition == 30) {
players['player' + playerturn].currentpos = 10;
}
players['player' + playerturn].startpos = players['player' + playerturn].currentpos;
title = positions['position' + players['player' + playerturn].currentpos].title;
}
function movePiece() {
var x = "#piece" + playerturn + "pos" + players['player' + playerturn].currentpos;
var y = "#piece" + playerturn + "pos" + players['player' + playerturn].prevpos;
$(x).slideToggle();
$(y).slideToggle();
}
function checkForSale() {
var forsale = positions['position' + players['player' + playerturn].currentpos].forsale;
if (forsale == "y") {
checkOwner();
} else {
checkType();
}
}
function checkOwner() {
var owner = positions['position' + players['player' + playerturn].currentpos].owner;
if (owner == "none") {
assignOwner();
} else {
payRent();
}
}
function payRent() {
var currentpos = players['player' + playerturn].currentpos;
var balance = players['player' + playerturn].balance;
var type = positions['position' + players['player' + playerturn].currentpos].type;
if (type == "utility") {
var rent = 4 * dicetotal;
} else {
var rent = positions['position' + currentpos].rent;
}
players['player' + playerturn].balance = balance - rent;
}
function assignOwner() {
var price = positions['position' + players['player' + playerturn].currentpos].price;
var balance = players['player' + playerturn].balance;
var title = positions['position' + players['player' + playerturn].currentpos].title;
players['player' + playerturn].balance = balance - price;
positions['position' + players['player' + playerturn].currentpos].owner = "player" + playerturn;
//positions['position'+players['player'+playerturn].currentpos].price = positions['position'+players['player'+playerturn].currentpos].rent;
$("#owns" + playerturn).append(title + '</br>');
}
function checkType() {
var balance = players['player' + playerturn].balance;
var type = positions['position' + players['player' + playerturn].currentpos].type;
if (type == "tax") {
var tax = positions['position' + players['player' + playerturn].currentpos].tax;
players['player' + playerturn].balance = balance - tax;
$("#debug2").text("- $" + tax);
} else {
if (type == "chance") {
chanceCard();
} else if (type == "chest") {
chestCard();
}
}
}
function chanceCard() {
var balance = players['player' + playerturn].balance;
var x = Math.floor(Math.random() * ((16 - 1) + 1) + 1);
var title = chancecards['chance' + x].title;
var type = chancecards['chance' + x].type;
var bill = chancecards['chance' + x].bill;
var bonus = chancecards['chance' + x].bonus;
if (type == "bill") {
players['player' + playerturn].balance = balance - bill;
$("#debug2").text("- $" + bill);
} else if (type == "bonus") {
players['player' + playerturn].balance = balance + bonus;
$("#debug2").text("+ $" + bonus);
} else if (type == "move") {
var newposition = chancecards['chance' + x].newposition;
var currentposition = players['player' + playerturn].currentpos;
if (newposition == 40) { //this if the player has to "advance to go"
advanceToGo();
} else if (newposition < currentposition) { //if the new position is less than the current one it means the player has to go past go
players['player' + playerturn].balance = balance + 200;
$("#debug2").text("+ $200");
}
players['player' + playerturn].prevpos = players['player' + playerturn].currentpos;
players['player' + playerturn].currentpos = newposition;
players['player' + playerturn].startpos = players['player' + playerturn].currentpos;
movePiece();
checkForSale();
} else if (title == "Go back 3 spaces") {
players['player' + playerturn].prevpos = players['player' + playerturn].currentpos;
players['player' + playerturn].currentpos = players['player' + playerturn].currentpos - 3;
players['player' + playerturn].startpos = players['player' + playerturn].currentpos;
movePiece();
checkForSale();
}
$(".cards").css('display', 'block');
$(".cards").flippy({
color_target: "#F8F8F8",
duration: "500",
verso: '<span id="cardtitle">Chance</span><span id="cardinfo"> ' + title + '</span>'
});
flipped = 1;
}
function chestCard() {
var balance = players['player' + playerturn].balance;
var x = Math.floor(Math.random() * ((14 - 1) + 1) + 1);
var title = chestcards['chest' + x].title;
var chesttype = chestcards['chest' + x].type;
var bill = chestcards['chest' + x].bill;
var bonus = chestcards['chest' + x].bonus;
if (chesttype == "bill") {
players['player' + playerturn].balance = balance - bill;
$("#debug2").text("- $" + bill);
} else if (chesttype == "bonus") {
players['player' + playerturn].balance = balance + bonus;
$("#debug2").text("+ $" + bonus);
} else if (chesttype == "move") {
var newposition = chestcards['chest' + x].newposition;
var currentposition = players['player' + playerturn].currentpos;
if (newposition == 40) { //this if the player has to "advance to go"
advanceToGo();
} else if (newposition < currentposition) { //if the new position is less than the current one it means the player has to go past go
players['player' + playerturn].balance = balance + 200;
$("#debug2").text("+ $200");
}
players['player' + playerturn].prevpos = players['player' + playerturn].currentpos;
players['player' + playerturn].currentpos = newposition;
players['player' + playerturn].startpos = players['player' + playerturn].currentpos;
movePiece();
checkForSale();
}
//$("#cardtitle").text("Community Chest");
//$("#cardinfo").text(title);
$(".cards").css('display', 'block');
$(".cards").flippy({
color_target: "#F8F8F8",
duration: "500",
verso: '<span id="cardtitle">Community Chest</span><span id="cardinfo"> ' + title + '</span>'
});
flipped = 1;
}
function advanceToGo() {
var balance = players['player' + playerturn].balance;
players['player' + playerturn].balance = balance + 200;
$("#debug2").text("+ $200");
}
function checkDouble() {
if (dice1 == dice2) {
doubleCount++;
if (doubleCount == 3) {
var currentpossition = players['player' + playerturn].currentpos;
players['player' + playerturn].currentpos = 10;
changeTurn();
}
} else {
changeTurn();
doubleCount = 0;
}
}
function changeTurn() {
if (playerturn == 1) {
playerturn = 2;
$("#roll1").prop("disabled", true);
$("#roll2").prop("disabled", false);
$(".buildmenu").hide();
canBuild();
} else {
playerturn = 1;
$("#roll2").prop("disabled", true);
$("#roll1").prop("disabled", false);
$(".buildmenu").hide();
canBuild();
}
}
function createPlayers() {
players = {
player1: {
currentpos: 0,
prevpos: 0,
startpos: 0,
balance: 1500
},
player2: {
currentpos: 0,
prevpos: 0,
startpos: 0,
balance: 1500
}
};
}
function createPositions() {
positions = {
position1: {
title: "Cairo",
type: "brown",
owner: "player1",
price: 60,
rent: [2, 10, 30, 90, 160, 250],
rating: 0,
forsale: "y"
},
position3: {
title: "Vienna",
type: "brown",
owner: "player1",
price: 60,
rent: [2, 20, 60, 180, 320, 450],
rating: 0,
forsale: "y"
},
position5: {
title: "Schiphol",
type: "airport",
owner: "none",
price: 200,
rent: 25,
rating: 0,
forsale: "y"
},
position6: {
title: "Brussels",
type: "blue",
owner: "none",
price: 100,
rent: [6, 30, 90, 270, 400, 550],
rating: 0,
forsale: "y"
},
position8: {
title: "Oslo",
type: "blue",
owner: "none",
price: 100,
rent: [6, 30, 90, 270, 400, 550],
rating: 0,
forsale: "y"
},
position9: {
title: "Zurich",
type: "blue",
owner: "none",
price: 120,
rent: [6, 30, 90, 270, 400, 550],
rating: 0,
forsale: "y"
},
position11: {
title: "Amsterdam",
type: "pink",
owner: "none",
price: 140,
rent: [10, 50, 150, 450, 625, 750],
rating: 0,
forsale: "y"
},
position13: {
title: "Bangkok",
type: "pink",
owner: "none",
price: 140,
rent: [10, 50, 150, 450, 625, 750],
rating: 0,
forsale: "y"
},
position14: {
title: "Istanbul",
type: "pink",
owner: "none",
price: 160,
rent: [12, 60, 180, 500, 700, 900],
rating: 0,
forsale: "y"
},
position15: {
title: "Charles de Gaulle",
type: "airport",
owner: "none",
price: 200,
rent: 25,
rating: 0,
forsale: "y"
},
position16: {
title: "Hong Kong",
type: "orange",
owner: "none",
price: 180,
rent: [14, 70, 200, 550, 750, 950],
rating: 0,
forsale: "y"
},
position18: {
title: "Madrid",
type: "orange",
owner: "none",
price: 180,
rent: [14, 70, 200, 550, 750, 950],
rating: 0,
forsale: "y"
},
position19: {
title: "Sydney",
type: "orange",
owner: "none",
price: 200,
rent: [16, 80, 220, 600, 800, 100],
rating: 0,
forsale: "y"
},
position21: {
title: "Toronto",
type: "red",
owner: "none",
price: 220,
rent: [18, 90, 250, 700, 875, 1050],
rating: 0,
forsale: "y"
},
position23: {
title: "Mumbai",
type: "red",
owner: "none",
price: 220,
rent: [18, 90, 250, 700, 875, 1050],
rating: 0,
forsale: "y"
},
position24: {
title: "Rome",
type: "red",
owner: "none",
price: 240,
rent: [20, 100, 300, 750, 925, 1100],
rating: 0,
forsale: "y"
},
position25: {
title: "Heathrow",
type: "airport",
owner: "none",
price: 200,
rent: 25,
rating: 0,
forsale: "y"
},
position26: {
title: "Rio",
type: "yellow",
owner: "none",
price: 240,
rent: [22, 110, 330, 800, 975, 1150],
rating: 0,
forsale: "y"
},
position27: {
title: "Tokyo",
type: "yellow",
owner: "none",
price: 240,
rent: [22, 110, 330, 800, 975, 1150],
rating: 0,
forsale: "y"
},
position29: {
title: "Paris",
type: "yellow",
owner: "none",
price: 280,
rent: [24, 120, 360, 850, 1025, 1200],
rating: 0,
forsale: "y"
},
position31: {
title: "Berlin",
type: "green",
owner: "none",
price: 300,
rent: [26, 130, 390, 900, 1100, 1275],
rating: 0,
forsale: "y"
},
position32: {
title: "Bejing",
type: "green",
owner: "none",
price: 300,
rent: [26, 130, 390, 900, 1100, 1275],
rating: 0,
forsale: "y"
},
position34: {
title: "Moscow",
type: "green",
owner: "none",
price: 320,
rent: [28, 150, 450, 1000, 1200, 1400],
rating: 0,
forsale: "y"
},
position35: {
title: "John F Kennedy",
type: "airport",
owner: "none",
price: 200,
rent: 25,
rating: 0,
forsale: "y"
},
position37: {
title: "New York",
type: "navy",
owner: "player2",
price: 350,
rent: [35, 175, 500, 1100, 1300, 1500],
rating: 0,
forsale: "y"
},
position39: {
title: "London",
type: "navy",
owner: "player2",
price: 400,
rent: [50, 200, 600, 1400, 1700, 2000],
rating: 0,
forsale: "y"
},
position12: {
title: "Electro",
type: "utility",
owner: "none",
price: 150,
rent: 10,
rating: 0,
forsale: "y"
},
position28: {
title: "Nuclear",
type: "utility",
owner: "none",
price: 150,
rent: 10,
rating: 0,
forsale: "y"
},
position2: {
title: "Community Chest",
type: "chest"
},
position17: {
title: "Community Chest",
type: "chest"
},
position33: {
title: "Community Chest",
type: "chest"
},
position7: {
title: "Chance",
type: "chance"
},
position22: {
title: "Chance",
type: "chance"
},
position36: {
title: "Chance",
type: "chance"
},
position10: {
title: "Jailhouse",
type: "jail"
},
position20: {
title: "Coffee House",
type: "coffee"
},
position30: {
title: "Go to Jail",
type: "jail"
},
position40: {
title: "Go",
type: "home"
},
position4: {
title: "Income Tax",
type: "tax",
tax: 200
},
position38: {
title: "Super Tax",
type: "tax",
tax: 100
}
};
}
function createCards() {
chancecards = {
chance1: {
title: "Advance to go",
type: "move",
newposition: 40
},
chance2: {
title: "Advance to London",
type: "move",
newposition: 39
},
chance4: {
title: "Your ass is going to jail",
type: "move",
newposition: 10
},
chance9: {
title: "Advance to Rome",
type: "move",
newposition: 24
},
chance10: {
title: "Advance to Charles de Gaulle",
type: "move",
newposition: 15
},
chance11: {
title: "Advance to Amsterdam",
type: "move",
newposition: 11
},
chance6: {
title: "Go back 3 spaces",
type: "movex",
newposition: -3
},
chance14: {
title: "No drink and driving mate1",
type: "bill",
bill: 20
},
chance15: {
title: "Get out of Jail free card",
type: "bill",
bill: 150
},
chance7: {
title: "Pay school fees",
type: "bill",
bill: 150
},
chance12: {
title: "Speeding fine",
type: "bill",
bill: 150
},
chance5: {
title: "Bank pays you dividend",
type: "bonus",
bonus: 40
},
chance13: {
title: "You have won the competition",
type: "bonus",
bonus: 200
},
chance16: {
title: "Your building loan matures",
type: "bonus",
bonus: 200
},
chance3: {
title: "You are assessed for street repairs $40 per house $115 per hotel",
type: "billx"
},
chance8: {
title: "House repairs $25 per house $100 per hotel",
type: "billx"
}
};
chestcards = {
chest1: {
title: "Advance to go",
type: "move",
newposition: 40,
bonus: 200
},
chest2: {
title: "Advance to Cairo",
type: "move",
newposition: 1
},
chest3: {
title: "Go to Jail",
type: "move",
newposition: 10
},
chest4: {
title: "Pay hospital fees",
type: "bill",
bill: 100
},
chest5: {
title: "Pay doctor fees",
type: "bill",
bill: 50
},
chest6: {
title: "Pay insurance premium",
type: "bill",
bill: 50
},
chest7: {
title: "Bank error. Collect $200",
type: "bonus",
bonus: 200
},
chest8: {
title: "Annuity matures. Collect $100",
type: "bonus",
bonus: 100
},
chest9: {
title: "You inherit $100",
type: "bonus",
bonus: 100
},
chest10: {
title: "From sale of stock you get $50",
type: "bonus",
bonus: 50
},
chest11: {
title: "Preference shares: $25",
type: "bonus",
bonus: 25
},
chest12: {
title: "You have won second prize in a beauty contest. Collect $10.",
type: "bonus",
bonus: 10
},
chest13: {
title: "It is your birthday. Collect $10.",
type: "bonus",
bonus: 10
},
chest14: {
title: "You win the lottery. Collect $10",
type: "bonus",
bonus: 10
}
};
}
function createSets() {
sets = {
brown: {
cost: 100,
rating: 0,
color: "#996600"
},
blue: {
cost: 150,
rating: 0,
color: "#99CCFF"
},
pink: {
cost: 300,
rating: 0,
color: "#FF0066"
},
orange: {
cost: 300,
rating: 0,
color: "#FF6600"
},
red: {
cost: 450,
rating: 0,
color: "#CC0000"
},
yellow: {
cost: 450,
rating: 0,
color: "#FFFF00"
},
green: {
cost: 600,
rating: 0,
color: "#006600"
},
navy: {
cost: 400,
rating: 0,
color: "#003399"
}
};
}
What is wrong with my code? In the console log i get the following error "Uncaught SyntaxError: Unexpected token [ ". It is something to do with the rent property? I am sorry if the question was not clear, didn't know how to ask it.
alert(positions['position1'].rent[0])
Put quotation marks around the 'position1'.
I also recommend that when there is only one rent, as in position 25, you still have it in an array. So like: rent : [25]
Also, in the first line in the function, do this:
window.positions = { /* ... your positions ... */ }
You need to put quotes around the positions, also you need to call the function:
createPositions()
alert(positions["position1"].rent[0]);
Here is a working fiddle: http://jsfiddle.net/YRJCP/
you have made various mistake to declare your javascript object.
First you have declared the javascript object inside a function but you did not return the javascript object when you are calling the function.
Either you can return the javascript object from the function or you can remove the fucntion and just declare the objects inside sript tag
please look my below changes. it shall work now.
var positions = {
position1: {
title: "Cairo",
type: "brown",
owner: "player1",
price: 60,
rent: [2, 10, 30, 90, 160, 250],
rating: 0,
forsale: "y"
},
position3: {
title: "Vienna",
type: "brown",
owner: "player1",
price: 60,
rent: [2, 20, 60, 180, 320, 450],
rating: 0,
forsale: "y"
},
position5: {
title: "Schiphol",
type: "airport",
owner: "none",
price: 200,
rent: 25,
rating: 0,
forsale: "y"
},
position6: {
title: "Brussels",
type: "blue",
owner: "none",
price: 100,
rent: [6, 30, 90, 270, 400, 550],
rating: 0,
forsale: "y"
},
position8: {
title: "Oslo",
type: "blue",
owner: "none",
price: 100,
rent: [6, 30, 90, 270, 400, 550],
rating: 0,
forsale: "y"
},
position9: {
title: "Zurich",
type: "blue",
owner: "none",
price: 120,
rent: [6, 30, 90, 270, 400, 550],
rating: 0,
forsale: "y"
},
position11: {
title: "Amsterdam",
type: "pink",
owner: "none",
price: 140,
rent: [10, 50, 150, 450, 625, 750],
rating: 0,
forsale: "y"
},
position13: {
title: "Bangkok",
type: "pink",
owner: "none",
price: 140,
rent: [10, 50, 150, 450, 625, 750],
rating: 0,
forsale: "y"
},
position14: {
title: "Istanbul",
type: "pink",
owner: "none",
price: 160,
rent: [12, 60, 180, 500, 700, 900],
rating: 0,
forsale: "y"
},
position15: {
title: "Charles de Gaulle",
type: "airport",
owner: "none",
price: 200,
rent: 25,
rating: 0,
forsale: "y"
},
position16: {
title: "Hong Kong",
type: "orange",
owner: "none",
price: 180,
rent: [14, 70, 200, 550, 750, 950],
rating: 0,
forsale: "y"
},
position18: {
title: "Madrid",
type: "orange",
owner: "none",
price: 180,
rent: [14, 70, 200, 550, 750, 950],
rating: 0,
forsale: "y"
},
position19: {
title: "Sydney",
type: "orange",
owner: "none",
price: 200,
rent: [16, 80, 220, 600, 800, 100],
rating: 0,
forsale: "y"
},
position21: {
title: "Toronto",
type: "red",
owner: "none",
price: 220,
rent: [18, 90, 250, 700, 875, 1050],
rating: 0,
forsale: "y"
},
position23: {
title: "Mumbai",
type: "red",
owner: "none",
price: 220,
rent: [18, 90, 250, 700, 875, 1050],
rating: 0,
forsale: "y"
},
position24: {
title: "Rome",
type: "red",
owner: "none",
price: 240,
rent: [20, 100, 300, 750, 925, 1100],
rating: 0,
forsale: "y"
},
position25: {
title: "Heathrow",
type: "airport",
owner: "none",
price: 200,
rent: 25,
rating: 0,
forsale: "y"
},
position26: {
title: "Rio",
type: "yellow",
owner: "none",
price: 240,
rent: [22, 110, 330, 800, 975, 1150],
rating: 0,
forsale: "y"
},
position27: {
title: "Tokyo",
type: "yellow",
owner: "none",
price: 240,
rent: [22, 110, 330, 800, 975, 1150],
rating: 0,
forsale: "y"
},
position29: {
title: "Paris",
type: "yellow",
owner: "none",
price: 280,
rent: [24, 120, 360, 850, 1025, 1200],
rating: 0,
forsale: "y"
},
position31: {
title: "Berlin",
type: "green",
owner: "none",
price: 300,
rent: [26, 130, 390, 900, 1100, 1275],
rating: 0,
forsale: "y"
},
position32: {
title: "Bejing",
type: "green",
owner: "none",
price: 300,
rent: [26, 130, 390, 900, 1100, 1275],
rating: 0,
forsale: "y"
},
position34: {
title: "Moscow",
type: "green",
owner: "none",
price: 320,
rent: [28, 150, 450, 1000, 1200, 1400],
rating: 0,
forsale: "y"
},
position35: {
title: "John F Kennedy",
type: "airport",
owner: "none",
price: 200,
rent: 25,
rating: 0,
forsale: "y"
},
position37: {
title: "New York",
type: "navy",
owner: "player2",
price: 350,
rent: [35, 175, 500, 1100, 1300, 1500],
rating: 0,
forsale: "y"
},
position39: {
title: "London",
type: "navy",
owner: "player2",
price: 400,
rent: [50, 200, 600, 1400, 1700, 2000],
rating: 0,
forsale: "y"
},
position38: {
title: "Super Tax",
type: "tax",
tax: 100
}
};
second you are accessing the object in a wrong way
alert(positions.position1.rent[0]); //this should print 2

How to track the animation frame count in kinetic.js?

This is my code :
var playerTimerGroup = new Kinetic.Group({
x:420,
y:350
});
var animations = {
idle: [{
x: 408,
y: 1420,
width: 55,
height: 55
}, {
x: 463,
y: 1420,
width: 55,
height: 55
}, {
x: 518,
y: 1420,
width: 55,
height: 55
}, {
x: 573,
y: 1420,
width: 55,
height: 55
}, {
x: 628,
y: 1420,
width: 55,
height: 55
}]
};
var timer = new Kinetic.Sprite({
x: 0,
y: 0,
image: SpriteImaage,
animation: 'idle',
animations: animations,
frameRate: 7,
index: 0
});
playerTimerGroup.add(timer);
layer.add(playerTimerGroup);
stage.add(self.layer);
timer.start();
Here i want to show a text (seconds) which keep changing for every frame.
How to achieve this ?
(I mean when first animation start I want to show 1, on second I want to show 2 and so on... till last animation.)
I tried this :
_.each(animations.idle, function(value, index){
timer.afterFrame(index, function(){
console.log(index);
});
});
but this runs only for last index..
any way to bind timer.afterFrame for every index or call timer.afterFrame for every index ?
var playerTimerGroup = new Kinetic.Group({
x: 420,
y: 350
});
var animations = {
idle: [{
x: 408,
y: 1420,
width: 55,
height: 55
}, {
x: 463,
y: 1420,
width: 55,
height: 55
}, {
x: 518,
y: 1420,
width: 55,
height: 55
}, {
x: 573,
y: 1420,
width: 55,
height: 55
}, {
x: 628,
y: 1420,
width: 55,
height: 55
}]
};
var timer = new Kinetic.Sprite({
x: 0,
y: 0,
image: SpriteImaage,
animation: 'idle',
animations: animations,
frameRate: 1,
index: 0
});
creating a text object here, which will change on every second:
var timerText = new Kinetic.Text({
x: 15,
y: 15,
text: '20',
fontSize: 25,
fontFamily: 'Calibri',
fill: 'white'
});
i = 1;
time = 0;
creating an animation object here which will change the text on every second:
var timerTextAnimation = new Kinetic.Animation(function(frame) {
timerText.setText(i);
if (frame.time - time >= 1000) {
i++;
time = frame.time;
}
}, layer);
timerTextAnimation.start();
playerTimerGroup.add(timer);
playerTimerGroup.add(timerText);
layer.add(playerTimerGroup);
stage.add(self.layer);
timer.start();
stopping all the animations here:
timer.afterFrame(animations.idle.length - 1, function() {
timer.stop();
timerTextAnimation.stop();
});
This works for me.
hope it also helps others.

Highcharts chart not showing in IE9

i have made a Time Series chart with highcharts.
It works fine with FF, but it doesnt run in IE9.
What could be the probleme here?
http://jsfiddle.net/sbra/tcFju/
Full code on jsfiddle: Snippet here:
$(function () {
$(document).ready(function() {
var jsData = JSON.parse('{"data":[{"dateTime":1035151200001,"value":0.737},{"dateTime":1358722800001,"value":1.374},{"dateTime":1359327600001,"value":1.374},{"dateTime":1360537200001,"value":1.38}]}'.valueOf());
console.log(jsData);
var chartData = [];
for (i in jsData.data) {
chartData.push( [ new Date(jsData.data[i].dateTime).getTime(), jsData.data[i].value ] );
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'tsc_chartDiv',
zoomType: 'x',
spacingRight: 20,
spacingLeft: 20,
marginLeft: 200
},
title: {
text: 'xyz'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in'
},
credits: { text: '-.com', href: '' },
xAxis: {
type: 'datetime',
maxZoom: '1209600000', // fourteen days
title: {
text: null
}
},
yAxis: {
title: {
text: ''
},
plotBands: [{
color: 'rgba(253, 195, 156, .6)',
from: 1.5,
label: {
text: 'High'
},
to: 1000},
{
from: 1.4,
label: {
text: 'Normaal'
},
to: 1.5},
{
color: 'rgba(196, 243, 112, .6)',
from: 0,
label: {
text: 'Low'
},
to: 1.4}],
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'xyz',
data: chartData
}]
});
var startx = 0;
var starty = 20;
var roundedVal = 0;
chart.renderer.text('Index (I) Änderung:', startx + 20, starty + 20).add();
roundedVal = (Math.round(parseFloat("0.004366812227074135")*1000)/10).toFixed(1);
console.log(roundedVal);
if (roundedVal >= 0.1) {
chart.renderer.image("images/chart/up.png", startx + 20, starty + 40, 50, 50).add();
}
else if (!(roundedVal>=-0.1)) {
chart.renderer.image("images/chart/down.png", startx + 20, starty + 40, 50, 50).add();
} else {
chart.renderer.image("images/chart/equal.png", startx + 20, starty + 40, 50, 50).add();
}
chart.renderer.text(roundedVal + "%", startx + 100, starty + 75).css({
fontWeight: 'bold',
fontSize: '20px',
}).add();
chart.renderer.text('I-Aktuell:', startx + 20, starty + 120).add();
roundedVal = (Math.round(parseFloat("1.38")*1000)/1000).toString();
chart.renderer.text(roundedVal, startx + 20, starty + 160).css({
fontWeight: 'bold',
fontSize: '30px',
}).add();
chart.renderer.text('I-Zuletzt:', startx + 20, starty + 200).add();
roundedVal = (Math.round(parseFloat("1.374")*1000)/1000).toString();
chart.renderer.text(roundedVal, startx + 100, starty + 200).add();
chart.renderer.text('I-Höchst:', startx + 20, starty + 220).add();
roundedVal = (Math.round(parseFloat("1.466")*1000)/1000).toString();
chart.renderer.text(roundedVal, startx + 100, starty + 220).add();
chart.renderer.text('I-Tiefst:', startx + 20, starty + 240).add();
roundedVal = (Math.round(parseFloat("0.685")*1000)/1000).toString();
chart.renderer.text(roundedVal, startx + 100, starty + 240).add();
chart.renderer.text('I-AVG:', startx + 20, starty + 260).add();
roundedVal = (Math.round(parseFloat("1.0567862745098051")*1000)/1000).toString();
chart.renderer.text(roundedVal, startx + 100, starty + 260).add();
});
});
Thx
stefan
It seems the problem is
console.log(jsData);
after removing this line it is working now for me.

Categories

Resources