Skip to content

Commit ef888cd

Browse files
maxmatthewsmaxmatthews
committed
Reactive charts
1 parent 0a716b3 commit ef888cd

File tree

8 files changed

+259
-55
lines changed

8 files changed

+259
-55
lines changed

‎.meteor/packages

+2
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,5 @@ msavin:mongol
2626
accounts-ui
2727
accounts-password
2828
accounts-base
29+
materialize:materialize
30+
maazalik:highcharts-gauge

‎.meteor/versions

+3
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ [email protected]
4848
[email protected]
4949
[email protected]
5050
[email protected]
51+
maazalik:[email protected]
52+
maazalik:[email protected]
53+
materialize:[email protected]
5154
[email protected]
5255
[email protected]
5356
meteortoys:[email protected]

‎laserTag.css

+11-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
/* CSS declarations go here */
1+
#login-sign-in-link{
2+
color: white;
3+
}
4+
5+
.highcharts-yaxis-labels text{
6+
color: white;
7+
}
8+
9+
.highcharts-container{
10+
margin: 0 auto;
11+
}

‎laserTag.js

+100-13
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,27 @@
11
Games = new Mongo.Collection('games');
22

33
if (Meteor.isClient) {
4+
Template.watchGame.helpers({});
5+
6+
47
Accounts.ui.config({
58
passwordSignupFields: "USERNAME_ONLY"
69
});
710

11+
812
Template.createGame.events({
9-
"submit #newGameForm": function(event){
13+
"submit #newGameForm": function (event) {
1014
lastGame = Games.findOne({}, {sort: {createdAt: -1}});
1115
numOfPlayers = event.target.numberOfPlayers.value;
1216

13-
if (lastGame && lastGame.gameNum){
14-
gameNum = lastGame.gameNum+1;
17+
if (lastGame && lastGame.gameNum) {
18+
gameNum = lastGame.gameNum + 1;
1519
} else {
1620
gameNum = 1;
1721
}
1822
event.preventDefault();
1923
players = [];
20-
for (i = 1; i <= numOfPlayers; i++){
24+
for (i = 1; i <= numOfPlayers; i++) {
2125
players.push({
2226
'playerNum': i,
2327
'score': 100
@@ -30,34 +34,118 @@ if (Meteor.isClient) {
3034
"players": players
3135
});
3236

33-
FlowRouter.go('/game/'+gameNum);
37+
FlowRouter.go('/game/' + gameNum);
3438
}
3539
});
3640

3741
Template.joinGame.events({
38-
"submit #joinGameForm": function(event){
42+
"submit #joinGameForm": function (event) {
3943
event.preventDefault();
4044
gameNumber = event.target.gameNumber.value;
4145
game = Games.find({"gameNum": gameNumber});
4246

43-
if (game){
44-
FlowRouter.go('/game/'+gameNumber)
47+
if (game) {
48+
FlowRouter.go('/game/' + gameNumber)
4549
}
4650
}
4751
});
4852

4953
Template.watchGame.helpers({
50-
"gameNum": function(){
54+
"gameNum": function () {
5155
return FlowRouter.getParam("gameNum");
5256
},
53-
"players": function(){
57+
"players": function () {
5458
game = Games.findOne({"gameNum": parseInt(FlowRouter.getParam("gameNum"))});
5559

56-
if (game && game.players){
60+
61+
if (game && game.players) {
5762
return game.players;
5863
}
64+
},
65+
"getRandNum": function(){
66+
return Math.floor(Math.random()*1000);
67+
},
68+
"getChart": function () {
69+
return {
70+
chart: {
71+
type: 'solidgauge',
72+
backgroundColor: null,
73+
width: 350,
74+
height: 250,
75+
},
76+
77+
title: null,
78+
backgroundColor: null,
79+
pane: {
80+
center: ['50%', '85%'],
81+
size: '140%',
82+
startAngle: -90,
83+
endAngle: 90,
84+
background: {
85+
backgroundColor: '#EEE',
86+
innerRadius: '60%',
87+
outerRadius: '100%',
88+
shape: 'arc'
89+
}
90+
},
91+
92+
tooltip: {
93+
enabled: false
94+
},
95+
96+
yAxis: {
97+
min: 0,
98+
max: 100,
99+
color: "#ffffff",
100+
title: {
101+
text: 'Health Points'
102+
},
103+
104+
stops: [
105+
[0.9, '#00FF00'],
106+
[0.5, '#FFFF00'],
107+
[0.1, '#f44336']
108+
],
109+
lineWidth: 0,
110+
minorTickInterval: null,
111+
tickPixelInterval: 400,
112+
tickWidth: 0,
113+
title: {
114+
y: -70
115+
},
116+
labels: {
117+
y: 16
118+
}
119+
},
120+
121+
plotOptions: {
122+
solidgauge: {
123+
dataLabels: {
124+
y: 5,
125+
borderWidth: 0,
126+
useHTML: true
127+
}
128+
}
129+
},
130+
131+
credits: {
132+
enabled: false
133+
},
134+
135+
series: [{
136+
name: 'Health Points',
137+
data: [this.score],
138+
dataLabels: {
139+
format: '<div style="text-align:center"><span style="font-size:25px;color:white">{y}</span><br/>' +
140+
'<span style="font-size:12px;color:silver">health points</span></div>'
141+
},
142+
tooltip: {
143+
valueSuffix: ' points'
144+
}
145+
}]
146+
};
59147
}
60-
})
148+
});
61149
}
62150

63151
if (Meteor.isServer) {
@@ -101,7 +189,6 @@ if (Meteor.isServer) {
101189
"players": game.players
102190
}
103191
});
104-
105192
game = Games.findOne({"gameNum": parseInt(this.urlParams.gameId)});
106193
return game;
107194
} else{

‎templates/createGame.html

+17-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11
<template name="createGame">
22
<div class="container">
3-
<h1 class="text-center">Create Game</h1>
4-
<form class="text-center" id="newGameForm">
5-
<label class="text-left">Number of Players:</label>
6-
<input type="number" class="form-control" value="2" name="numberOfPlayers">
7-
<br>
8-
<button type="submit" class="btn btn-success">Create Game</button>
9-
</form>
3+
<div class="row">
4+
<div class="col s0 m3">&nbsp;</div>
5+
<div class="col s12 m6">
6+
<div class="card">
7+
<form class="text-center" id="newGameForm">
8+
<div class="card-content">
9+
<span class="card-title">Create Game</span><br>
10+
<label style="text-align: left; width: 100%;">Number of Players:</label>
11+
<input type="number" class="form-control" value="2" name="numberOfPlayers">
12+
</div>
13+
<div class="card-action">
14+
<button type="submit" class="btn btn-success">Create Game</button>
15+
</div>
16+
</form>
17+
</div>
18+
</div>
19+
</div>
1020
</div>
1121
</template>

‎templates/home.html

+95-22
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,101 @@
11
<template name="home">
2-
<div class="container">
3-
<h1 class="text-center">Welcome to laz-AR</h1>
4-
{{#if currentUser}}
5-
<div class="row">
6-
<div class="col-md-3"></div>
7-
<div class="col-md-3 text-center">
8-
<a href="/createGame">
9-
<button class="btn btn-default">
10-
Create Game
11-
</button>
12-
</a>
13-
</div>
14-
<div class="col-md-3 text-center">
15-
<a href="/game">
16-
<button class="btn btn-default">
17-
Join Game
18-
</button>
19-
</a>
2+
<div class="container text-center" style="padding: 10px;">
3+
<i>Made with love at PennApps Spring 2016.</i>
4+
</div>
5+
<div class="container-fluid z-depth-3" style="margin: 0; margin-top: 0px; padding: 0;">
6+
<div class="page-header" id="banner" style="color: white; background: #f44336; margin: 0; padding: 0;">
7+
<div class="container" style="padding-top: 15px;">
8+
<div class="col-lg-6 col-md-6 col-sm-6">
9+
<h1>ShootAt.Me</h1>
10+
<p class="lead">Lazer Tag with Augmented Reality, Prepare to Be Thrilled</p>
11+
{{#if currentUser}}
12+
<div class="row text-center">
13+
<!--<div class="col-md-6">-->
14+
<a href="/createGame">
15+
<button class="btn btn-default" style="background: #607d8b; margin-right: 15px;">
16+
Create Game
17+
</button>
18+
</a>
19+
<!--</div>-->
20+
<!--<div class="col-md-3">-->
21+
<a href="/game">
22+
<button class="btn btn-default" style="background: #607d8b; margin-left: 15px;">
23+
Join Game
24+
</button>
25+
</a>
26+
<!--</div>-->
27+
28+
</div>
29+
{{else}}
30+
<h4 class="text-center">Please login</h4>
31+
{{/if}}
32+
<div class="text-center">
33+
</div>
2034
</div>
35+
<div class="col-lg-6 col-md-6 col-sm-6" style="color: black">
36+
<div class="row text-right" style="margin-right: 15px;">
37+
{{#if currentUser}}
38+
<a style="color: white" onclick="Meteor.logout()">Logout</a>
39+
{{else}}
40+
{{> loginButtons}}
41+
{{/if}}
42+
</div>
43+
<div class="card well">
44+
<p><em>ShootAt.Me</em> is an advanced mobile game for iOS and Android devices which uses QR codes, Houndify, and Augmented Reality to create a high quality virtual experience.</p>
45+
<p>The objective of this game is to capture all of your opponents flags before they get yours.</p>
46+
<br>
2147

48+
<h3>Resources Used</h3><p style="font-weight: bold">For more information, click to find how we used each.</p>
49+
<dl>
50+
<li>Google Cardboard</li>
51+
<li>Houndify</li>
52+
</dl>
53+
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
<div class="container" style="margin-top: 35px;">
60+
<div class="card">
61+
<div class= "card-content">
62+
<span class="card-title">What is shootat.me?</span>
63+
<p class="explanation">
64+
shootat.me is a multiplatform, AR (Augmented Reality) game developed in Android Studio and Xcode during PennApps Spring XIII.
65+
</p>
66+
</div>
67+
</div>
68+
<div class="card">
69+
<div class= "card-content">
70+
<span class="card-title">Who built shootat.me?</span>
71+
<p class="explanation">
72+
<ul>
73+
<li>Max Matthews, Hacker guru and backend developer.</li>
74+
<li>Tristan Wiley, Android developer.</li>
75+
<li>Gurnoor Singh, IOS developer.</li>
76+
<li>Eric cugota, android and frontend developer.</li>
77+
</ul>
78+
</p>
79+
</div>
80+
</div>
81+
<div class="card">
82+
<div class= "card-content">
83+
<span class="card-title">What should I expect when I play it?</span>
84+
<p class="explanation">
85+
this is how the game is seen on your device. you have a reticle, a UI, and your objective is to "tag" as many enemy QR's as possible.
86+
</p>
87+
</div>
88+
</div>
89+
<div class="card">
90+
<div class= "card-content">
91+
<span class="card-title">What are the rules?</span>
92+
<ul>
93+
<li>Each player starts with 100 points(health).</li>
94+
<li>Shooting an enemy removes health from him, shooting from a more further distance removes less points.</li>
95+
<li>When a player looses all it's points, he's kicked out of the game.</li>
96+
<li>The last man standing is the winner.</li>
97+
</ul>
2298
</div>
23-
{{else}}
24-
<h1>Please login</h1>
25-
{{> loginButtons}}
26-
{{/if}}
99+
</div>
27100
</div>
28101
</template>

‎templates/joinGame.html

+16-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
<template name="joinGame">
22
<div class="container">
3-
<h1 class="text-center">Enter Game Number</h1>
4-
<form class="text-center" id="joinGameForm">
5-
<label class="text-left">Enter Game Number:</label>
6-
<input type="number" class="form-control" name="gameNumber">
7-
<br>
8-
<button type="submit" class="btn btn-success">Join Game</button>
9-
</form>
3+
<div class="row">
4+
<div class="col s0 m3">&nbsp;</div>
5+
<div class="col s12 m6">
6+
<div class="card">
7+
<form class="text-center" id="joinGameForm">
8+
<div class="card-content">
9+
<span class="card-title">Enter Game Number</span>
10+
<input type="number" class="form-control" name="gameNumber">
11+
</div>
12+
<div class="card-action">
13+
<button type="submit" class="btn btn-success">Join Game</button>
14+
</div>
15+
</form>
16+
</div>
17+
</div>
18+
</div>
1019
</div>
1120
</template>

0 commit comments

Comments
 (0)