magic-api/interface.htm at master · 4zero4/magic-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
	font-family: sans-serif;
}
#cardImage {
	float: right;
}
input#name{
	width: 50%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
function getCard(){
	var cardName = $('#name').val();

	$status = $('#status');
	$status.text("Getting " + cardName + "...");
	$status.show();

	//Request card data from magic-api
	$.get('http://stegriff.co.uk/host/magic/', { 'name' : cardName }, function(data){
		var $panel = $('#results');

		//Remove last card results
		$panel.children().remove();

		//Print out every returned attribute in a definition list
		for(d in data){
			//console.log(d, data[d]);
			$panel.append("<dt>" + d + "</dt><dd>" + data[d] + "</dd>");
		}
		getImage(data.expansion, data.card_number);
		$status.hide();
	});
}

function getImage(magicApiExpansionName, cardId){
	var baseUrl="http://magiccards.info/scans/en/"; // ... /rtr/31.jpg for example
	var mcInfoExpansion = "";
	//TODO Add more data here
	switch (magicApiExpansionName){
		case "Return to Ravnica":
			mcInfoExpansion = "rtr";
			break;
		case "Gatecrash":
			mcInfoExpansion = "gtc";
			break;
		case "Dragon's Maze":
			mcInfoExpansion = 'dgm';
			break;
	}
	var url = baseUrl + mcInfoExpansion + "/" + cardId + ".jpg";
	console.log(url);
	$("#cardImage").attr("src",url);
}

</script>
<title>Magic Card Retriever</title>
</head>
<body>

	<h1>Magic Card Retriever</h1>
	<img id="cardImage">
	<h2 id="status"></h2>

	<form action="#">
		<label>Card name:<input id="name"></label>
		<input type="submit" value="Get card" onclick="getCard()">
	</form>


	<dl id="results"></dl>

	<p><small>Card images only retrieved for RtR, GTC & DGM. Please modify Javascript getImage() to reach more images.</small></p>
</body>
</html>