Skip to content

7_Connect4_Responsive #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

7_Connect4_Responsive #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f906ccb
7_Connect4_Responsive
Feb 3, 2015
7897d98
8_Moustache_Connect4_Responsive_and_JS_Optimized
Feb 5, 2015
bb49e56
9_Connect4_v2
Feb 5, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 74 additions & 16 deletions www/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,98 @@

html {
height:100%;
width:100%;
background:white;
}

body {
min-height: 100%;
position: relative;
margin:0;
padding: 0;
}

body > h1 {
line-height: 100%;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#page {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
min-height: 200px;
}
.scale {
display: inline-block;
height: 100%;
}
#game-cont {
position: absolute;
top:70px;
left: 0;
right: 0;
bottom: 0;
text-align: center;
margin: 20px 0 20px 0;
}
@media (max-width: 768px) {
#game-cont {
margin: 0;
}
}
#game-cont > div {
vertical-align: middle;
display: inline-block;
}

.gem {
border-radius:50%;
margin:10px;
width: 30px;
height: 30px;
#board {
width: 100%;
}
#board > div {
position: relative;
}

#turn-cont {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 30px;
color: white;
position: absolute;
top:0;
left: 0;
right: 0;
height: 70px;
text-align: center;
}
#turn-cont > div {
vertical-align: middle;
display: inline-block;
}
.row {
display: inline-block;
width: 14%;
}
.sqHolder{
position: relative;
width: 100%;
}
.sqHolder:before{
content: "";
display: block;
padding-top: 100%;
}
.gem.available {
border: 2px solid #DDDDDD;
background-color: #F6F6F6;
}
.gem{
border-radius:50%;
margin: 5%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

.row {
display:inline-block;
width:40px;
}

}
17 changes: 11 additions & 6 deletions www/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!doctype html>
<html>
<head>
<script src='//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js'></script>
<script>
requirejs.config({
paths:{
jquery:'//code.jquery.com/jquery-1.11.1.min',
'plynd-sdk':'//sandbox.plynd.com/plynd-sdk-0.1-unstable.min'
jquery:'http://code.jquery.com/jquery-1.11.1.min',
'plynd-sdk':'http://sandbox.plynd.com/plynd-sdk-0.1-unstable.min'
},
baseUrl:'./js'
});
Expand All @@ -24,9 +24,14 @@
</head>

<body>
<div id="page">
<div id="board"></div>
<div id="turn"></div>
<div id="page" >
<div id="turn-cont">
<div class="scale"></div><div id="turn"></div>
</div>
<div id="game-cont" >
<div class="scale"></div><div id="board"></div>
</div>
</div>

</body>
</html>
103 changes: 68 additions & 35 deletions www/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,34 @@ define([

// This will remember if an event of placing a gem is ongoing
var currentPlacement = false;

//Look at window orientation
// Grab the data corresponding to this game using the Plynd SDK
Plynd.getGame(function(gameResponse/* json object */) {
// initialize our game representation from the json
game.initialize(gameResponse);

// Analyse #game-cont height and adapt #board width
adaptBoardSize();

// Trigger the rendering
showState();

// Register the callback to any new event happening on the game
Plynd.Realtime.onEvent(onEvent);
});

// Listen each window resize event
$(window).resize(function() {
adaptBoardSize();
});

// Analyse #game-cont height and adapt #board width
var adaptBoardSize = function() {
var gameContHeight = $('#game-cont').height();
$('#board').css('max-width' : (gameContHeight)*7/6);
}

// Show board and player's turn states
var showState = function() {
$('#board').empty();

Expand All @@ -41,52 +56,43 @@ define([
$('#board').append(row);
}

// Show the current player
var message;
if (game.isOver()) {
var winner = game.getWinner();
if (winner.playerID == game.ownPlayerID) {
message = 'You won the game';
}
else {
message = winner.playerName + ' won the game';
}
}
else {
message = (game.hasTurn()) ? 'It is your turn' : 'It is ' + game.getPlayerWithTurn().playerName + '\'s turn';
}
$('#turn').text(message);
};
turnInfo();
}


// Just create a div for showRow function
var createDiv = function(classes) {
var div = $('<div/>',{
class: classes
});
return div ;
}

// Show one row and attach a click listener to it
var showRow = function(rowIndex) {
var row = game.getRow(rowIndex);
var rowDiv = createDiv('row');

var rowDiv = $('<div/>', {
class:'row'
});
for (var i = 0; i < 6 ; i++) {

// Add the gems from the bottom to the top
row.map(function(playerID) {
var gem = $('<div/>', {
class:'gem player'
});
gem.css('background-color', game.getPlayerColor(playerID));
rowDiv.prepend(gem);
});
var sqHolder = createDiv('sqHolder');
var gem = createDiv('gem');
sqHolder.append(gem);

// Append available spots
for (var i = 0; i < 6 - row.length ; i++) {
rowDiv.prepend($('<div/>', {
class:'gem available'
}));
if (i < row.length) {
gem.css('background-color', game.getPlayerColor(row[i]));
}
else {
gem.addClass('available');
}
rowDiv.prepend(sqHolder);
}

// The highlighting of the row (to show where the gem would be placed)
rowDiv.on('mouseenter', function() {
if (!currentPlacement && game.canPlace(rowIndex)) {
rowDiv.find('.available').last().css({
'background-color':game.getOwnColor(),
'background-color': game.getOwnColor(),
'opacity':0.6
});
rowDiv.css('cursor', 'pointer');
Expand All @@ -95,7 +101,10 @@ define([
rowDiv.on('mouseleave', function() {
// Do not remove while submitting the event
if (!currentPlacement) {
rowDiv.find('.available').css({'background-color':'', opacity:1});
rowDiv.find('.available').css({
'background-color':'',
opacity:1
});
rowDiv.css('cursor', '');
}
});
Expand All @@ -111,6 +120,30 @@ define([
return rowDiv;
};

// Check the game state and display a message into #turn
var turnInfo = function() {

var message;

if (game.isOver()) {
var winner = game.getWinner();
$('#turn-cont').css('background-color', winner.playerColor);

if (winner.playerID == game.ownPlayerID) {
message = 'You won the game!';
}
else {
message = winner.playerName + ' won the game!';
}
}

else {
$('#turn-cont').css('background-color', game.getPlayerWithTurn().playerColor);
message = (game.hasTurn()) ? 'It is your turn' : 'It is ' + game.getPlayerWithTurn().playerName + '\'s turn';
}

$('#turn').text(message);
};
// Allow the user to execute an action
var relaxCurrentPlacement = function() {
currentPlacement = false;
Expand Down