Skip to content

Commit 6518079

Browse files
Jack CarrigJack Carrig
Jack Carrig
authored and
Jack Carrig
committed
added search by tag and start game button
1 parent 5bd643e commit 6518079

File tree

7 files changed

+208
-70
lines changed

7 files changed

+208
-70
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
node_modules
2+
.env

‎MemoryGame.js

+62-41
Original file line numberDiff line numberDiff line change
@@ -34,69 +34,90 @@ MemoryGame = function(dbconfig){
3434
}
3535

3636
this.cards = [];
37+
3738
};
3839

39-
MemoryGame.prototype.getCollection = function(callback) {
40-
this.db.collection('games', function(error, game_collection) {
40+
MemoryGame.prototype.getCollection = function(collectionName, callback) {
41+
this.db.collection(collectionName, function(error, coll) {
4142
if(error) callback(error)
42-
else callback(null, game_collection)
43+
else callback(null, coll)
4344
});
4445
}
4546

46-
MemoryGame.prototype.newGame = function(callback) {
47-
this.getCollection(function(error, games) {
47+
MemoryGame.prototype.newGame = function(config, callback) {
48+
49+
this.numMatches = config.matches;
50+
this.tag = config.tag;
51+
52+
this.getCollection('games', function(error, games) {
4853
if(error) callback(error)
4954
else {
50-
//this.game_id = 'gPYfDz';
51-
//callback(null, this.game_id);
52-
//uncomment when you want to hit instagram and make a new game
53-
var numMatches = 8;
54-
var numCards = 2 * numMatches;
55-
this.game_id = "g"+makeid();
56-
var card = {};
57-
58-
instagram.media.popular(function(images, error) {
59-
if(error) console.log("instagram error: "+error);
60-
else {
61-
var i = 0;
62-
//insert cards into a game
63-
for(var x in images) {
64-
if(i < numMatches) {
65-
for(var j = 0; j < 2; j++) {
66-
card = {
67-
'game_id' : this.game_id,
68-
'card_id' : makeid(),
69-
'source' : images[x].images.thumbnail.url,
70-
'pic_id' : images[x].id,
71-
'created_at' : new Date()
72-
};
73-
games.insert(card);
74-
}
75-
i++;
76-
}else break;
77-
}
78-
}
79-
callback(null, this.game_id);
80-
});
81-
//end block comment
55+
callback(null, games);
8256
}
8357
});
8458
}
8559

60+
MemoryGame.prototype.getPhotos = function(callback) {
61+
62+
if(this.tag) {
63+
instagram.tags.media(this.tag, function (tag, error) {
64+
if(error) console.log("instagram error: "+error);
65+
else {
66+
callback(null, tag);
67+
}
68+
});
69+
}else{
70+
instagram.media.popular(function(images, error){
71+
if(error) console.log("instagram error: "+error);
72+
else {
73+
callback(null, images);
74+
}
75+
});
76+
}
77+
}
78+
79+
MemoryGame.prototype.setupGame = function(config, callback) {
80+
81+
this.game_id = "g"+makeid();
82+
83+
var card = {};
84+
var i = 0;
85+
//insert cards into a game
86+
for(var x in config.photos) {
87+
if(i < this.numMatches) {
88+
for(var j = 0; j < 2; j++) {
89+
card = {
90+
'game_id' : this.game_id,
91+
'card_id' : makeid(),
92+
'source' : config.photos[x].images.thumbnail.url,
93+
'pic_id' : config.photos[x].id,
94+
'created_at' : new Date()
95+
};
96+
config.games.insert(card);
97+
}
98+
i++;
99+
}else break;
100+
}
101+
callback(null, this.game_id);
102+
}
103+
86104
MemoryGame.prototype.dealGame = function(game_id, callback) {
87-
this.getCollection(function(error, games) {
105+
this.getCollection('games', function(error, games) {
88106
if(error) callback(error)
89107
else {
90-
games.find({'game_id':game_id}).sort({'card_id':1}).toArray(function(error, cards) {
108+
games.find({'game_id':game_id}, {'card_id': 1}).sort({'card_id':1}).toArray(function(error, cards) {
91109
if(error) callback(error)
92-
else callback(null, cards);
110+
else {
111+
var delt = [{"game_id": game_id, "cards": cards}];
112+
callback(null, delt);
113+
}
93114
});
94115
}
95116
});
96117
}
97118

98119
MemoryGame.prototype.flipCard = function(game_id, card_id, callback) {
99-
this.getCollection(function(error, games) {
120+
this.getCollection('games', function(error, games) {
100121
if(error) callback(error)
101122
else {
102123
games.findOne({'game_id':game_id, 'card_id': card_id}, function(error, pic) {

‎app.js

+19-13
Original file line numberDiff line numberDiff line change
@@ -52,28 +52,34 @@ var memoryGame = new MemoryGame(dbconfig);
5252
// Routes
5353

5454
app.get('/', function(req,res) {
55-
res.render('start.jade', {
55+
res.render('index.jade', {
5656
locals: {
5757
title: 'start a game!',
5858
}
5959
});
6060
});
6161

62-
app.get('/flip', function(req,res) {
62+
app.post('/start', function(req,res) {
63+
64+
var gameConfig = {
65+
'matches': 8
66+
, 'tag': req.param('tag')
67+
};
68+
6369
//create a new game of in the database
64-
memoryGame.newGame(function(error, game){
65-
//get dealt cards for the game and display them
66-
memoryGame.dealGame(game, function(error, cards) {
67-
if(error) callback(error)
68-
else {
69-
//res.send(util.inspect(cards));
70-
res.render('flip.jade', {
71-
locals: {
72-
title: 'powered by instagram',
73-
cards:cards
70+
memoryGame.newGame(gameConfig, function(error, game){
71+
//load photos from instagram
72+
memoryGame.getPhotos(function(error, photos){
73+
//add game and photos to db
74+
memoryGame.setupGame({'games':game, 'photos':photos}, function(error, game) {
75+
//get dealt cards for the game and display them
76+
memoryGame.dealGame(game, function(error, cards) {
77+
if(error) callback(error)
78+
else {
79+
res.send(cards);
7480
}
7581
});
76-
}
82+
});
7783
});
7884
});
7985
});

‎public/javascripts/memory-game.js

+30-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,36 @@ var turn = [];
22

33
$(function(){
44

5-
$('div.card a').click(function(e) {
5+
//Start a new game of memory
6+
$('button#start-btn').click(function(e){
7+
$.ajax({
8+
url: '/start'
9+
, type: "POST"
10+
, dataType: "json"
11+
, cache: false
12+
, data: { 'tag': $('#search').val() }
13+
, success: function(data){
14+
var cards = data[0].cards;
15+
var game_id = data[0].game_id;
16+
if(cards.length > 0) {
17+
$('div#game').hide().html('loading...');
18+
var game = $(document.createElement('div'));
19+
for (var i in cards) {
20+
var el = $(document.createElement('div')).attr({'id': cards[i].card_id, 'class':'card'});
21+
el.append($(document.createElement('a')).attr('href', '/flip/'+game_id+'/'+cards[i].card_id).text('flip me'));
22+
game.append(el);
23+
}
24+
$('div#game').hide().html(game).fadeIn();
25+
}
26+
}
27+
, error: function(jqXHR, textStatus, err){
28+
alert('text status '+textStatus+', err '+err)
29+
}
30+
});
31+
});
32+
33+
34+
$('div.card a').live('click',function(e) {
635
e.preventDefault();
736
$(this).addClass('selected');
837
//if less than 2 cards have been flipped.

‎public/stylesheets/style.css

+15-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/stylesheets/style.styl

+66-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,78 @@
11
@import 'nib'
22

3+
html
4+
height 100%
5+
padding 0
6+
body 0
7+
background-color lighten(#00B7FF, 20)
38
body
9+
height 100%
410
padding 0
511
margin 0
612
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
713
background linear-gradient(top, #FFFFFF, lighten(#00B7FF, 20))
14+
#container
15+
min-height 100%
16+
position relative
817
header
918
h1
1019
padding 0 50px
1120
display inline-block
1221
p
1322
display inline-block
23+
#main
24+
padding-bottom 60px
1425
a
1526
color: #00B7FF
27+
div.large
28+
width 850px
29+
margin 0 auto
30+
padding 25px
31+
div
32+
display inline-block
33+
div.form-input
34+
width 600px
35+
padding 15px
36+
div.form-button
37+
vertical-align top
38+
padding 15px
39+
input
40+
width 550px
41+
padding 10px
42+
font-size 24px
43+
border-radius 10px
44+
border 1px solid #00B7FF
45+
input:focus
46+
box-shadow: 0px 0px 5px #00B7FF
47+
label
48+
width 550px
49+
font-size 11px
50+
margin 5px 0 0 5px
51+
display inline-block
52+
button
53+
background #66D4FF
54+
border-top 1px solid #38538c
55+
border-right 1px solid #1f2d4d
56+
border-bottom 1px solid #151e33
57+
border-left 1px solid #1f2d4d
58+
border-radius 4px
59+
box-shadow inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111
60+
color #fff
61+
font bold 20px "helvetica neue", helvetica, arial, sans-serif
62+
line-height 1
63+
margin-top 0
64+
margin-bottom 10px
65+
padding 10px 0 12px 0
66+
text-align center
67+
text-shadow 0px -1px 1px #1e2d4d
68+
width 150px
69+
-webkit-background-clip padding-box
70+
button:hover
71+
box-shadow inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111
72+
cursor pointer
73+
button:active
74+
box-shadow inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111
75+
margin-top 8px
1676
#game
1777
padding 0 35px
1878
width 850px
@@ -42,18 +102,21 @@ div.card
42102
padding 15px
43103
.green
44104
background-color #ccffcc
45-
//background-transparency(#ccffcc, .6)
46105
color #00cc00
47106
.red
48107
background-color #ffcccc
49-
//background-transparency(#ffcccc, .6)
50108
color #ff3333
51109
footer
110+
position absolute
111+
bottom 0
112+
height 60px
113+
left 0
114+
right 0
52115
text-align center
53-
padding 40px
54116
p
55117
font-size 12px
56118
color #555
57119
a
58120
color #555
59121

122+

‎views/index.jade

+15-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1-
header
2-
h1= title
3-
p powered by Instagram
4-
section
5-
#messages
6-
#game
7-
- each card in cards
8-
div(id=card.card_id).card
9-
//p= card.id
10-
a(href="/flip/"+card.game_id+"/"+card.card_id) flip me
1+
div#container
2+
header
3+
h1 memory
4+
p powered by Instagram
5+
div#main
6+
div.large
7+
div.form-input
8+
input(type="text", id="search", placeholder="Popular Photos", tabIndex="1")
9+
label(for="search", tabIndex="2") search your favorite tags to customize your game.
10+
div.form-button
11+
button#start-btn Play now!
12+
#messages
13+
#game
14+
footer
15+
<p>copyright 2012 <a href="http://jackcarrig.com" target="_blank">jackcarrig.com</a></p>

0 commit comments

Comments
 (0)