Intergalactics/canvastest.html at master · pents90/Intergalactics · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="/nowjs/now.js"></script>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }

            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>


		$(document).ready(function() {
  			now.ready(function(){
			    now.joinGame("IGX me up!");
			});

                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                var radius = 70;

                var colors = ["#FF8080", "#80FF80", "#8080FF", "#FFFF80"];

				var selectedPlanets = [];
                canvasSize = 600;
                grid = 16;
                minPlanetSize = 5;
                maxPlanetSize = 15;
                squaresize = canvasSize/grid;

                var drawPlanet = function(planet) {
                    radius = 15;
					if (planet.owner < 0) {
						color = "#D0D0D0";
					} else {
                    	color = colors[planet.owner];
					}
                    centerX = planet.x * squaresize + (squaresize/2);
                    centerY = planet.y * squaresize + (squaresize/2);
                    context.beginPath();
                    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                    context.fillStyle = color;
                    context.fill();
                    context.lineWidth = 1;
                    context.strokeStyle = "black";
                    //context.stroke();
                    context.fillStyle = "#000000";
                    context.fillText(planet.name, (planet.x)*squaresize + 2, (planet.y)*squaresize + 10);
                    if (planet.owner >= 0) {
                        context.fillStyle = "#000000";
                        var metrics = context.measureText(planet.ships);
                        context.fillText(planet.ships, (planet.x+1)*squaresize - metrics.width, (planet.y+1)*squaresize - 2);
						var prod = '+' + planet.production;
						metrics = context.measureText(prod);
                        context.fillText(prod, (planet.x+1)*squaresize - metrics.width, (planet.y)*squaresize + 10);
                    }
                    if (selectedPlanets.indexOf(planet) > -1) {
                        context.fillStyle = "#888888";
                        context.beginPath();
                        context.rect(planet.x * squaresize, planet.y * squaresize, squaresize, squaresize);
                        context.stroke();
                    }
                };

                function handleKey(e){
                    var unicode=e.keyCode? e.keyCode : e.charCode
                    var actualkey=String.fromCharCode(unicode).toUpperCase();
                    console.log(actualkey);
                    for (i=0; i<galaxy.length; i++) {
                        var planet = galaxy[i];
                        if (actualkey == planet.name) {
                            if (selectedPlanets.length < 2) {
                                selectedPlanets.push(planet);
                            }
                            // planet.selected = !planet.selected;
                        } else {
                            // planet.selected = false;
                        }
                        if (selectedPlanets.length == 2) {
                            var numShips = prompt("Number of ships to send.");
                            console.log("Send "+numShips+" to "+actualkey);
							now.sendFleet(galaxy.indexOf(selectedPlanets[0]), galaxy.indexOf(selectedPlanets[1]), numShips);
                            selectedPlanets = [];
                        }
                    }
                    drawGalaxy();
                }
                document.onkeypress=handleKey;

                var drawGalaxy = function() {
                    context.beginPath();
                    context.fillStyle = "#FFFFFF";
                    context.rect(0, 0, canvasSize, canvasSize);
                    context.fill();
                    for (i=0; i<galaxy.length; i++) {
                        var planet = galaxy[i];
                        drawPlanet(planet);
                    }
                }

				var galaxy;
				var userNum;

				now.receiveUpdate = function(gal) {
					galaxy = gal;
	                drawGalaxy();
				}

				now.setUserNum = function(num) {
					userNum = num;
				}

                // for (y=0; y<grid; y++) {
                //     for (x=0; x<grid; x++) {
                //         drawPlanet(x, y, Math.random()*(maxPlanetSize-minPlanetSize)+minPlanetSize, "#8ED6FF");
                //     }
                // }

            });
        </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="600" height="600">
        </canvas>
    </body>
</html>