View Full Version : Javascript/Ajax Image textboxes, association, php, and mysql update.

07-20-2008, 06:28 PM
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.

07-20-2008, 06:52 PM
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.

07-20-2008, 08:23 PM
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.

07-20-2008, 08:42 PM
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.

07-20-2008, 10:14 PM
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

07-20-2008, 10:40 PM
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?

07-21-2008, 12:41 PM
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

07-21-2008, 05:29 PM
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 (http://green-beast.com/blog/?p=199)?

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

07-21-2008, 08:24 PM
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)

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

07-21-2008, 10:01 PM
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)

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';

var obj = this.image;
var x = y = 0;
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){
this.tint.src = tintSrc;
this.tint.style.display = 'block';
this.tint.style.display = 'none';
window.onload = function (){
var card = new Card('card');

That assumes an image tag similar to this:
<img src="card.jpg" id="card">

07-22-2008, 12:17 AM
Many Thanks.

Any possibility of a demo implementation..
I created two images, a black(normal), and a red one. This first part confused me. I was under the impression you were intending to utilize changing opacities, thus this not require only 1 image?

Regarding the javascript functions, I did a bit of googling but clearly given my lasck of any js knowledge I got completely lost.

I think a demo would be the best way for me to see/learn...
Thanks once again

07-22-2008, 12:26 AM
When I mentioned a "partially transparent GIF," I meant that the image itself would be partially transparent independent of any CSS.

I know about the CSS 'opacity' property, but I don't know much about it. And (as I understand it) even if the JS were to use it, 2 images would still be required, but the tinting image could be a solid color - so we wouldn't have to know about GIF transparency.

When I either have a partially transparent image (looking into making one with the GIMP now) or can make an image transparent via JS/CSS, I can easily make a demo for you. EDIT: The demo is attached.

Do you have any specific questions about the JavaScript?

07-22-2008, 01:56 PM
Many Thanks for going to the effort of making a demo.
Your demo loads the blue card which is instantly overlayed with the red card.

That is exactly what I want the cards to do except onclick.. so the card is blue when loaded, and then if clicked it gets overlayed.

Regarding the JS, I get the general jist of it.

I thought changing the end of the code to the following would do the job, but it gices an error...

window.onload = function(){
var card = new Card('card');

<img src="blue.jpg" id="card" onclick="card.coverWith('red.gif');">

What is more is there anyway to give the image checkbox characteristics so when clicked it is considered checked. I can then use that to parse which images are clicked/not clicked.


07-22-2008, 05:00 PM
That's because var card only exists within the window.onload function, i.e. it's not global. To make it global,...

window.onload = function(){
window.card = new Card('card');
..and the image's ID value is hiding the variable:

<img src="blue.jpg" id="card" onclick="window.card.coverWith('red.gif');">

But I would like to help you understand the code. Do you have any questions?

07-22-2008, 05:35 PM
That is awesome. It works perfectly.
Regarding the code. I can read through it and appreciate why it outputs how it does, simply because of my own coding knowledge.
The fact I dont actually know javascript is obviously hindering me a bit.

I feel for the most part that I understand it sufficiently that I can manipulate it to do what I want it to do.

One question: with regards to the variable. If I add a submit button

<form action=process.php method=post>
<input type=submit value=Process></form>

I want to be able to process the state of the card I.E Is it selected or not.
My point about checkboxes is that they are a type of form input and easily manipulated in terms of processing their state. How exactly can I process the state of the image?

Thanks once again for your help, you have been brilliant.

07-22-2008, 05:43 PM
I'm sorry; I didn't see the checkbox part of your other message. Yes, you can put an <input type="hidden"> in your form and change it as the user clicks the image. (Attribute values should always be quoted, but I think you know that and you left them out above because that was just an illustration.)

However, that will get complex if a player has a bunch of cards at one time. In that case, I would try to find a way to minimize the hidden fields - like using a bitmask the length of the player's hand.

07-22-2008, 07:03 PM
Yes the above was simply an illustration, and regarding minimizing hidden elements that is also a very good/fair point.

At the moment I am simply looking to get an idea as to the doability (made up word) of my plan.

Once again I am going to ask to be spoonfed as I do not understand your usage of hidden elements.

<input type=hidden name=card[]><img bla bla bla....

how do i make the clicking of the image alter the value of the hidden input?

Thanks once again.

07-22-2008, 07:49 PM
On second thought, provoked by your name=card[], several hidden fields would be easier to handle for both PHP and JS. Also, I don't think a simple boolean value will work here, because how do you know which card is selected? I would do something like this (for the current player's 5th card to attack Player 2's 3rd):
<input type="hidden" name="card[4]" value="1,2">A value of "0" (EDIT: better yet, "") would indicate that the card is not selected.

Here's an updated demo with a better onclick mechanism than I showed you earlier. (Note that I'm not sure that the hidden field's name will work for PHP because I don't have any PHP to test it on.)

07-22-2008, 08:16 PM
pm sent your way. I feel some sort of IM would minimize your time spent on this.
Msny Thanks

07-23-2008, 06:14 PM
Here it is... :) I kept trying to make it complicated, lol, thinking of how the game might ultimately work. But I managed to make the highlighting dynamics simple as prescribed.

07-24-2008, 03:19 PM
Sorry for dissappearing off aim, I got rushed out of the door to an event I hadnt been told about.

Thanks very much for creating the demo. My understanding/needs are gradually being met.

Would it be possible for you to create a processTurn.php file which simply echos the state of each card.
I have tried to do it with some simple PHP: echoing all the post vars for example but I am getting a blank screen.

I think this is the final thing before I can start to utilize it.

07-25-2008, 03:20 AM
That's fine... The same thing happened to me this morning.

By default, $_GET['card'] holds the array; to put it in $_POST just add action="post" to your form.

Looking at my JS again, I noticed that some things were unnecessarily complex, so I updated the HTML page below.

07-25-2008, 01:14 PM
I assume you meant method="post"
I added that, and I am still not getting any values/variables through to my processing page.. *is lost/confused*

07-25-2008, 04:04 PM
Yes, I did mean that. :\

What code are you using? I want to let you do what you can.