[Addio569]

Hi,

I have taken code off the internet that I found: http://wserver.co.uk/ringoffire.php

its an online ring of fire game, very good.

anyways I wanted to amend it, and even make my own game eventually from the code.

I have been able to style the HTML using CSS but I haven't managed to change the size of the icons for the cards:

suits = [
		["♥", "#FF0000"],
		["♦", "#FF0000"],
		["♣", "#000"],
		["♠", "#000"]
	];
	
			$('#selection').html("<span style='color:" + suits[suit][1] + "'>" + numbers[number][0] + suits[suit][0] + "</span>");
			$('#chosen').html("<span style='color:" + suits[suit][1] + "'>" + numbers[number][0] + suits[suit][0] + "</span> &nbsp; " + $('#chosen').html());
			$('#meaning').html(numbers[number][1]);
			chosencards.push(number + "" + suit);
			if(numbers[number][0] == '5' || numbers[number][0] == 'K'){
					$('#rules').html($('#rules').html() + "+ " + prompt("Please enter a rule") + "<br />");

Now I am just learning Javascript and CSS (I'm 29!) but I have tried my darndest to change the size of the icons. I see that the span color style is refering to the suits variable but what ever I tried just doesn't work,I tried putting them in divs relevent to the elements but that didn't work, I even tried to put a ahref tag around them to see if I could style it that way but no go.

so how do I set the size of the icons?

thanks in advance!

[andrewsw]

The card icons are just characters so you need to increase the font-size.

Where you create the spans:
Edited: corrected quotes

$('#chosen').html("<span style='color:" 

you could include style='font-size:20px;'. A much better approach is to give these spans a class-name and use a css-stylesheet:

<style type="text/css">
    /* put this in the document head tag */
    .acard { 
        font-size: 20px;
    }
</style>

$('#chosen').html("<span class='acard' style='color:"  

This post has been edited by andrewsw: 01 February 2013 - 02:42 PM

[Addio569]

ok thanks very much! i'll give that a go

p.s I tried:

$('#selection').html("<style="font-size:20px;" span style='color:" + suits[suit][1] + "'>" + numbers[number][0] + suits[suit][0] + "</span>");

and it won't work...

This post has been edited by Dormilich: 01 February 2013 - 02:09 PM

[Dormilich]

of course, you have quote mismatches that cause errors. you need to escape quote marks in a string with backslashes.

PS. the code highlighting visualizes that.

This post has been edited by Dormilich: 01 February 2013 - 02:13 PM

[Addio569]

Dormilich, on 01 February 2013 - 02:11 PM, said:

of course, you have quote mismatches that cause errors. you need to escape quote marks in a string with backslashes.

PS. the code highlighting visualizes that.

the parenthesis are all the same, i'm not sure why it does that in the code...

sorry how do you mean escape with backslashs??

[Dormilich]

Addio569, on 01 February 2013 - 10:26 PM, said:

the parenthesis are all the same, i'm not sure why it does that in the code...

parentheses ( ( and )) have nothing to do with that.

Addio569, on 01 February 2013 - 10:26 PM, said:

sorry how do you mean escape with backslashs??

a backslash \ serves 2 purposes:
- combined with certain characters an otherwise not or hardly to recognize character can be written (e.g. \n for a line break)
- a character that possesses a special meaning is interpreted as character without that meaning
ex.

// the second " closes the string.
// since the following dot does not have a valid meaning (, + ; would be valid operators)
// JS throws an error
"..."..."

// the second " is now escaped (interpreted as " and not as string delimiter)
// the statement becomes valid
"...\"..."

[Addio569]

sorry I meant

" "

those, in my post they are different to whats in my code! weird.

ok I'll give that a go and report back.

Thanks

EDIT: I tried

$('#selection').html("<style='font-size:40px;'</style>\<span style='color:" + suits[suit][1] + "'>" + numbers[number][0] + suits[suit][0] + "</span>");

it runs but it doesn't change the size of the icons....
I got the css thing to work in the end! I'm getting there, but I would like to learn how to do it inline as well!

thanks again

This post has been edited by Dormilich: 02 February 2013 - 02:25 PM
Reason for edit:: removed quote

[andrewsw]

$('#selection').html("<span style='font-size:40px; color:" + suits[suit][1] + "'>" + numbers[number][0] + " " + suits[suit][0] + "</span>");

[Addio569]

andrewsw, on 02 February 2013 - 11:38 AM, said:

$('#selection').html("<span style='font-size:40px; color:" + suits[suit][1] + "'>" + numbers[number][0] + " " + suits[suit][0] + "</span>");

hmm I thought I tried that! oh well!

I left out the span bit I just used 'style'

thanks

This post has been edited by Addio569: 04 February 2013 - 02:20 AM

[Addio569]

i want to make the game better, i want to keep a track of the kings that have been dealt, so when the last king is picked you are alerted, but I haven't a clue how about going about this.

I'm guessing I'd use an index of some sort, and then something to tell when its the last one like .length??

chosencards = [];
kings = 0;

function pickCard(){
	numbers = [
		["A", "Waterfall"],
		["2", "Choose! (Pick someone to drink!)"],
		["3", "Me! (You have to drink!)"],
		["4", "W***e! (All Girls Drink)"],
		["5", "Thumbmaster"],
		["6", "D***s! All Guys Drink"],
		["7", "Toilet Card"],
		["8", "Mate"],
		["9", "Rhyme"],
		["10", "Categories"],
		["J", "Make a rule!"],
		["Q", "Questionmaster"],
		["K", "Add some drink to the middle pint!"]
	];
	suits = [
		["♥", "#FF0000"],
		["♦", "#FF0000"],
		["♣", "#000"],
		["♠", "#000"]
	];
	
		var number = Math.floor(Math.random()*numbers.length);
		var suit = Math.floor(Math.random()*suits.length);
		if(chosen(number + "" + suit)){
			pickCard();
		}else{
			$('#selection').html("<span class='acard' span style='color:" + suits[suit][1] + "'>" + numbers[number][0] + suits[suit][0] + "</span>");
			$('#chosen').html("<span class='acard' span style='color:" + suits[suit][1] + "'>" + numbers[number][0] + suits[suit][0] + "</span> &nbsp; " + $('#chosen').html());
			$('#meaning').html(numbers[number][1]);
			chosencards.push(number + "" + suit);
			if(numbers[number][0] == 'J'){
					$('#rules').html($('#rules').html() + "+ " + prompt("Please enter a rule") + "<br />");
			}
			if(numbers[number][0] == '5'){
					customAlert('THUMBMASTER');
			}
		}
		if(chosencards.length == numbers.length*suits.length){
			$('#newcard').replaceWith($("<div>").html("You have ran out of cards!"));
		}
}

function chosen(x){
	var a = false;
	for(i = 0; i < chosencards.length; i++){
		if(x == chosencards[i]){
			a = true; 
			break;
		}
	}
	return a
}
$(document).keypress(function(e){
	if(e.which == '13' || e.which == '32'){
		pickCard();
	}
});
$(document).ready(function(){
	$('#newcard').click(function(){
		pickCard();
	});
});

thanks

This post has been edited by Addio569: 12 February 2013 - 04:24 AM