Javascript/Ajax Image textboxes, association, php, and mysql update.

[clowes]

Hey guys, this is a pretty complex one, but I'd really appreciate some help.
I have no experience with javascript, or ajax. I am a PHP coder, and am designing a game of sorts.

The best way to explain it is as follows. A user has a hand of cards, their opponent does too. For each card in the hand, I want to be able to click it, highlight it, then click an enemy card (which will also be highlighted.

I want to be able to do this for each card in my hand, so the corresponding enemy card is highlighted in the same color...
Then I want to be able to click attack, and the attack/defend pairs be inserted into a mysql database.

I can do the updating part, but I cant do the selecting part.
Also Im not sure of a resolution for when two user cards attack the same enemy card.

Any help would be greatly appreciated.
T

[Jesdisciple]

If you don't expect a reinvention of the wheel, a demonstration of what you have so far (preferably a URL) would be very helpful.

[clowes]

Unfortunately as this is the basis of what I want to do, as of yet I have nothing to show.
Nor have I been able to find any similar things on the web.
I know it is doable, and hopefully my description will suffice.
Thx

[Jesdisciple]

Okay, my apologies. You seemed to indicate that one piece was completed.

The selection will be something like this (in a PHP for-loop):

<img src="card.png" onclick="Player1.select(<?php echo $i; ?>);" />

The 'select' JavaScript function would then perform any animations and, if the player's turn is done, make an AJAX call (with the card's index) to a PHP script. The PHP script would evaluate the effect of the turn on the game as a whole and output any relevant info back to the JavaScript.

[clowes]

No worries.
Thanks for taking the time to reply.
At the moment the most useful thing I have found on the web is this: http://www.daniweb.com/forums/thread130274.html

I can make it so when I click on an image it updates some database table. I can work around this to make it do what I want.

The problem is, given that I have no experience with JS... I want it to be highlighted when i click on it, and unhighlighted/the database entry deleted if i change my mind and click it again.

It is really difficult as I have no experience with this.. any idea as to a full solution?
Many Thanks

[Jesdisciple]

I suggest that you only make the database entry when it's impossible for the player to take anything back - when the information actually affects other players.

For the highlighting, I don't know of a way to tint an image with JS unless you put a partially transparent GIF over it. Would that be more practical than making 2 images for each card and switching them out as necessary?

[clowes]

Yes a pratial tint would be great/more efficient.
Given that I have no experience with JS this will be extremely complex I imagine.

Is it the kind of thing that once I have the code I can easily mod it/rearrange it to change things..

My intention was you could click you card, click an enemy card for each card in your deck. Each pair would be tinted a different colour to indicate who is attacking who. Then you would click Atack at the bottom, and at this point the database would be updated (removing the need for clicking on and off if you change your mind).

Is this possible, and could you give me further help as far as writing a code to do that?
Many Thanks

[Jesdisciple]

I think it should adapt to your changes pretty well, though I can't say for sure until it's done.

Do you have images of cards already? And can you make your own tints? (Because I don't know how yet.)

How do you plan to lay your page out - with fixed, fluid, or elastic CSS?

I'll be away for a bit, so wait patiently for my reply.

[clowes]

Thanks very much.

Regarding card images, i dont have any available here and now.
Regarding the layout, I am not sure how it is going to be coded, but it is an image layout, simply with a div in the middle for the content.

I feel quite bad because I am being pretty unhelpful

Essentially if you could design it around any old image that would be great, and then when I have the images I can simply replace them in the code...

Im not sure which is easier, but I am open to either swapping images (I.E Having two images, one highlighted, one normal)

OR
Having one image, and on click the opacity changes.

Any help will be very generously rewarded, as this will make the game mechanic a lot better.
Many Thanks
T

[Jesdisciple]

I feel quite bad because I am being pretty unhelpful

Don't worry about it. Just please keep me updated.

Essentially if you could design it around any old image that would be great, and then when I have the images I can simply replace them in the code...

OK, that'll work.

Im not sure which is easier, but I am open to either swapping images (I.E Having two images, one highlighted, one normal)

OR
Having one image, and on click the opacity changes.

Since you need to have several tints available, I would say the latter would be far less time-consuming, and the JavaScript to lay one image over another is fairly simple. (You need to understand the 'prototype' property for my implementation, though.)

Here's the essential JavaScript... (You mainly need to pay attention to the window.onload function at the bottom.)

function Card(img){
	if(typeof(img) == 'string'){
		img = document.getElementById(img);
	}
	this.image = img;
	this.tint = document.createElement('img');
	this.tint.style.display = 'none';
	document.body.appendChild(this.tint);
	
	var obj = this.image;
	//http://www.quirksmode.org/js/findpos.html
	var x = y = 0;
	while(obj.offsetParent){
		x += obj.offsetLeft;
		y += obj.offsetTop;
		obj = obj.offsetParent;
	}
	
	this.tint.style.position = 'absolute';
	this.tint.style.left = x;
	this.tint.style.top = y;
}
Card.prototype = {
	coverWith: function (tintSrc){
		if(tintSrc){
			this.tint.src = tintSrc;
			this.tint.style.display = 'block';
		}else{
			this.tint.style.display = 'none';
		}
	}
};
window.onload = function (){
	var card = new Card('card');
	card.coverWith('red.jpg');
};

That assumes an image tag similar to this:

<img src="card.jpg" id="card">