Skip to content

Commit

Permalink
Merge pull request #152 from andela/feature/157610021/notification-in…
Browse files Browse the repository at this point in the history 
…vite-UI-designs

fix errors in feature/157610021/notification-invite-UI-designs
  • Loading branch information
@andela-moe
andela-moe committed May 24, 2018
2 parents 906d219 + 78ba370 commit 9100bd1
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 82 deletions.
3 changes: 1 addition & 2 deletions config/socket/socket.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,7 @@ module.exports = function (io) {
username: data
};
onlineUsers.push(user);
io.sockets.emit('people', onlineUsers);
console.log('connect', onlineUsers);
io.sockets.emit('people', onlineUsers)
});

socket.on('showOnlineUsers', () => {
Expand Down
41 changes: 41 additions & 0 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,47 @@
text-transform: uppercase;
}

.online-users {
background: green;
padding: 10px;
margin-top: 5px;
color: #f2f2f2;
font-size: 18px;
border-radius: 5px;
}
.pb-20 {
padding-bottom: 20px;
}
.invite {
float: right;
cursor: pointer;
}

/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab-content {
padding: 10px;
background: white;
border: 1px solid #ccc;
overflow: scroll;
height: 620px;
}

#app-modal,
.app-modal {
display: flex;
Expand Down
3 changes: 0 additions & 3 deletions public/js/controllers/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,9 +241,6 @@ angular //eslint-disable-line
};

$scope.abandonGame = function () {
if ($scope.global.user) {
socket.emit('connectedUser', $scope.global.user.username);
}
window.location = '/'; //eslint-disable-line
};

Expand Down
39 changes: 29 additions & 10 deletions public/js/controllers/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ angular.module('mean.system').controller('IndexController', [
'$location',
'socket',
'game',
($scope, Global, $http, $q, $location, socket, game) => {
'$window',
($scope, Global, $http, $q, $location, socket, game, $window) => {
$scope.global = Global;

let messageArray = [];
Expand All @@ -17,15 +18,20 @@ angular.module('mean.system').controller('IndexController', [
$location.path('/app');
};

window.onload = () => {
connectPeople();
useGames();
};

connectPeople = () => {
socket.emit('connectedUser', $scope.global.user.username);
if (window.user) {
console.log('This function sets the user online');
socket.emit('connectedUser', window.user.username);
}
};

$window.onload = connectPeople();


window.onload = () => {
useGames();
};

$scope.removeUserOnline = () => {
socket.emit('removeUser', $scope.global.user.username);
};
Expand Down Expand Up @@ -184,14 +190,27 @@ angular.module('mean.system').controller('IndexController', [
localStorage.setItem('gameCard', invite.userCard);
});

$scope.inviteTab = false;
$scope.playerTab = true;
$scope.inviteModal = false;
$scope.showPlayerTab = () => {
$scope.inviteTab = false;
$scope.playerTab = true;
};

$scope.showInviteTab = () => {
if (window.user) {
$scope.inviteTab = true;
$scope.playerTab = false;
}
$scope.inviteModal = true;
};

$scope.userGames = () => {
useGames();
};

$scope.abandonGame = function () {
if ($scope.global.user) {
socket.emit('connectedUser', $scope.global.user.username);
}
window.location = '/';
};

Expand Down
103 changes: 42 additions & 61 deletions public/views/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<div landing class="h-container">


<div class="logo" ng-controller="IndexController">
<div class="logo">
<img src="/img/playing-cards.png" alt="">
<h5>
<a style="color:#4f4f4f !important" href="/" data-step="1" data-intro="Welcome to cards for humanity. Let me take you on a quick tour of how to play the GAME">Cards for Humanity</a>
Expand All @@ -49,9 +49,8 @@ <h5>
<a href="/" id="top">Home</a>
</li>
<li>
<a href="#!/dashboard">Dashboard</a>
<a href="" id="charity">Charity</a>
</li>
</span>
<span ng-show="showOptions">
<li>
<a href="#!/signup">Sign Up</a>
Expand All @@ -60,13 +59,16 @@ <h5>
<a href="#!/signin">Sign in</a>
</li>
</span>
<li>
<a href="#!/dashboard">Dashboard</a>
</li>
<span>
<li>
<a style="color: red !important;" ng-click="abandonGame()" data-step="8" data-intro="Click to leave the game and go back to the Home Page. You wont be able to join the game again if it has already stated.">ABANDON GAME</a>
</li>
<li ng-click="startsme()">
<a data-step="9" data-intro="You can click here to take the tour again. Have Fun.">Take Tour</a>
</li>
<li>
<a style="color: red !important;" ng-click="abandonGame()" data-step="8" data-intro="Click to leave the game and go back to the Home Page. You wont be able to join the game again if it has already stated.">ABANDON GAME</a>
</li>
<li ng-click="startsme()">
<a data-step="9" data-intro="You can click here to take the tour again. Have Fun." style="margin-right:20px;">Take Tour</a>
</li>
</span>
<span ng-hide="showOptions">
<li style="display: flex; padding: 0 0 10px 30px; cursor: pointer;" ng-if="messageLength > 0">
Expand Down Expand Up @@ -113,28 +115,11 @@ <h5>
<!-- question (dashboard) directive -->
<div question class="dashboard" data-step="3" data-intro="You can see how many players have joined the game. A minimum of 3 players and a maximum of 12 players can play the gamne for each round.">
</div>
<div ng-click="cardMixer()" data-step="5" data-intro="This is a card you click when you are the czar to draw the next question">
<div class="flip-container" id="myCard">
<div class="flipper">
<div class="front">
<div class="front">
<div class="deck">
<img src="../img/deck22.jpg">
</div>
</div>
</div>
<div class="back">
<div class="front">
<div class="deck">
<img src="../img/deck.png">
</div>
</div>
</div>
</div>
</div>
<div class="deck">
<img src="../img/deck.png" />
</div>
</div>

</div>
<!-- answers directive -->
<div answers class="game-body" data-step="2" data-intro="Here are the instruction to play the game">

Expand All @@ -148,14 +133,14 @@ <h5>
<div class="col s12">
<ul class="tabs">
<li class="tab">
<a class="active" href="#" ng-click="playerTab()">Players</a>
<a class="active" href="#" ng-click="showPlayerTab()">Players</a>
</li>
<li class="tab">
<a href="#" ng-click="inviteTab()">Send Invites</a>
<a href="#" ng-click="showInviteTab()">Send Invites</a>
</li>
</ul>
</div>
<div ng-show="tabPlayer" class="col s12 tabDiv">
<div ng-show="playerTab" class="col s12 tab-div" style="background: white">
<form ng-show="game.state === 'awaiting players' && showOptions === false" class="search-form search-form-side" name="searchForm">
<input type="text" placeholder="Search for players..." ng-model="user.email" />
<button type="submit" ng-click="getUserInfo(user, searchForm)">
Expand All @@ -166,9 +151,9 @@ <h5>

</div>
</div>
<div ng-show="tabInvite" class="col s12 tabDiv">
<div id="invite" class="tabcontent" ng-controller="IndexController" style="padding-bottom: 20px">
<h4>Click on the mail button to invite other players online</h4>
<div ng-show="inviteTab" class="col s12 tab-div" style="background: white">
<div class="tabcontent" ng-controller="IndexController" style="padding-bottom: 20px">
<h4 style="font-size: 1.8rem">Click on the mail button to invite other players online</h4>
<h6>Online Players</h6>
<hr>
<div ng-repeat="person in users">
Expand All @@ -181,7 +166,7 @@ <h6>Online Players</h6>
</div>
</div>
</aside>
<div id="chat-div" style="display:flex; flex-direction: column" class="chat-div" data-step="6" data-intro="You can click here to chat with other online gamers.">
<div id="chat-div" style="display:flex; flex-direction: column" class="chat-div">
<h2 id="chat-head" onclick="show()">CHAT</h2>
<div id="chat-content" class="chat-content">
<div id="chat-item" ng-repeat="chat in chats" style="display: flex; flex-direction: row">
Expand All @@ -197,10 +182,8 @@ <h2 id="chat-head" onclick="show()">CHAT</h2>
</div>
<form>
<span class="chat-control">
<input type="text" name="message" id="input" ng-model="message">
<button ng-click="sendChatMessage(message)">
<i class="material-icons">send</i>
</button>
<input type="text" name="message" id="input" ng-model="message" placeholder="Message from {{game.players[game.playerIndex].username}}...">
<button ng-click="sendChatMessage(message)">Send</button>
</span>
</form>
</div>
Expand All @@ -220,7 +203,7 @@ <h5> You are about to {{game.userMessage | lowercase}}. Click button to start.</
</div>
</div>
<!-- Maximum Player Reached Notification Modal-->
<div id="modal" ng-show="game.errorMsg">
<div id="app-modal" ng-show="game.errorMsg">
<div id="modal-content">
<div class="modal-body" ng-if="game.errorMsg">
<h6>{{game.errorMsg}}</h6>
Expand All @@ -238,7 +221,7 @@ <h6>{{game.errorMsg}}</h6>
</div>
</div>
<!-- User Found Modal-->
<div id="modal" class="app-modal" ng-show="game.message">
<div id="modal" ng-show="game.message">
<div id="modal-content" class="app-modal-content">
<button type="button" ng-click="closeModal()">&times;</button>
<div class="modal-body" ng-if="game.message">
Expand All @@ -252,23 +235,21 @@ <h6>{{game.message}}</h6>
</div>
</div>
</div>
</div>
</div>
<script src="../js/chat-style.js"></script>
<script>
function hideInvite(e) {
document.getElementById(e.target.id).style.display = 'none';
}
$(document).ready(function () {
$('.tabs').tabs();
$('.modal').modal();
$(".dropdown-trigger").dropdown();
$('.menu-toggle').click(function () {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
<script src="../js/chat-style.js"></script>
<script>
function hideInvite(e) {
document.getElementById(e.target.id).style.display = 'none';
}
$(document).ready(function () {
$('.tabs').tabs();
$('.modal').modal();
$(".dropdown-trigger").dropdown();
$('.menu-toggle').click(function () {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
$(".main-header").addClass("solid");
$(".site-nav").addClass("solid");
$(".humburger.solid").addClass("solid")
})
$(".main-header").addClass("solid");
$(".site-nav").addClass("solid");
$(".humburger.solid").addClass("solid")
})
</script>
</script>
7 changes: 1 addition & 6 deletions public/views/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ <h5>Cards for Humanity</h5>
</li>
</span>
<li>
<a href="#!/team">
<a href="" id="team">
Meet the Team
</a>
</li>
Expand Down Expand Up @@ -197,7 +197,6 @@ <h1>Charity</h1>
}, 1000);
});
}

$('#top').click(function (event) {
event.preventDefault();
$('#mainpage').scrollView();
Expand All @@ -210,8 +209,6 @@ <h1>Charity</h1>
event.preventDefault();
$('#meettheteam').scrollView();
});


$(".charity-side").hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
Expand All @@ -231,9 +228,7 @@ <h1>Charity</h1>
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})

window.onload = () => {
$scope / connectPeople
}

</script>

0 comments on commit 9100bd1

Please sign in to comment.