- Amélioration de l'UI de vote

- Amélioration de l'affichage du personnage du joueur

css/styles.css

@@ -19,6 +19,35 @@ body {
 	font-size: 16px;
 }
 
+
+.media-list.messages .dead img.card {
+	border: 4px solid #444444;
+	border-radius: 4px 4px 4px 4px;
+	margin-right: 10px;
+	width: 48px;
+	height: 48px;
+}
+
+.media-list.messages .dead {
+	position: relative;
+}
+
+.media-list.messages .dead .cross {
+	background: url('../images/dead-cross.png');
+	width: 34px;
+	height: 40px;
+	position: absolute;
+	left: 7px;
+	top: 4px;
+	opacity: 0.8;
+	display: block;
+}
+
+.media-list.messages small.pull-right {
+	margin-left: 10px;
+}
+
+
 [lg-message] {
 	padding: 5px 10px;
 	margin: 5px 0;
@@ -27,8 +56,10 @@ body {
 }
 
 [lg-message].system-message {
-	border-top: 4px solid silver;
-	border-bottom: 4px solid silver;
+	border-left: 10px solid #EEEEEE;
+	border-right: 10px solid #EEEEEE;
+	border-bottom: 1px solid #EEEEEE;
+	margin: 10px 0;
 }
 
 [lg-message].me {
@@ -69,6 +100,7 @@ body {
 	display: block;
 	position: relative;
 	text-align: right;
+	margin-bottom: 20px;
 }
 
 .character.select {
@@ -105,14 +137,40 @@ body {
 	margin-right: 10px;
 }
 
+.character img + h4 {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	color: #FFFFFF;
+	font-family: 'Lobster Two',cursive;
+	font-size: 140%;
+	height: 50px;
+	line-height: 40px;
+	margin-bottom: 40px;
+	padding: 8px;
+	position: absolute;
+	right: 0;
+	text-align: center;
+	top: 108px;
+	width: 166px;
+	z-index: 10;
+	background: rgba(0, 0, 0, 0.4); /* Old browsers */
+	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, #000000 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,#000000)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,#000000 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,#000000 100%); /* IE10+ */
+	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,#000000 100%); /* W3C */
+
+}
+
 .character figcaption {
 	font-size: 120%;
 	font-family: 'Lobster Two', cursive;
+	padding: 5px 0;
 }
 
-.character figcaption h4 {
-	font-size: 140%;
-	font-family: 'Lobster Two', cursive;
+.character figcaption p {
+	margin: 0;
 }
 
 img.card {
@@ -131,6 +189,15 @@ img.card {
 	margin-right: 10px;
 }
 
+[lg-players-poll] .list-group-item.me {
+	background: #cdcaee;
+	border-color: #cdcaee;
+}
+[lg-players-poll] .list-group-item.me.active {
+	background: #D43F3A;
+	border-color: #D43F3A;
+}
+
 .panel-heading h4 {
 	font-family: 'Wire One', sans-serif;
 	font-size: 28pt;

game/game.html

@@ -34,8 +34,7 @@ <h4>Préparation de la partie...</h4>
 
 		<div ng-switch-when="STOPPED">
 			<div class="alert alert-warning">
-				<h4>Partie terminée</h4>
-				Le maître du jeu a mis fin à la partie! <i class="icon-smiley-sad"></i>
+				<h4>La partie est terminée !</h4>
 			</div>
 		</div>
 

index.html

@@ -13,7 +13,7 @@
 
 	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 
-	<script src="lib/angular/angular.min.js"></script>
+	<script src="lib/angular/angular.js"></script>
 	<script src="lib/angular/angular-route.min.js"></script>
 	<script src="lib/angular/angular-animate.min.js"></script>
 	<script src="lib/angular/i18n/angular-locale_fr-fr.js"></script>

js/app.js

@@ -1,6 +1,6 @@
 (function (Firebase) {
 
-	var app = angular.module("LoupsGarous", ["ngRoute", "firebase"]),
+	var app = angular.module("LoupsGarous", ["ngRoute", "ngAnimate", "firebase"]),
 		firebaseRef = new Firebase(LG_FIREBASE_URL),
 		everythingReady;
 
@@ -124,8 +124,8 @@
 		return {
 			parse : function (input) {
 				angular.forEach(smileys, function (name, symbol) {
-					var regexp = new RegExp(symbol, "ig");
-					input = input.replace(regexp, ':' + name + ':');
+					var regexp = new RegExp("\\s+"+symbol, "ig");
+					input = input.replace(regexp, ' :' + name + ':');
 				});
 				return input.replace(/:([a-z]+):/g, '<i class="icon-smiley-$1"></i>');
 			}
@@ -178,6 +178,7 @@
 		function quitGame () {
 			console.log("quitGame for: ", $rootScope.userInfo.joinRef);
 			if ($rootScope.userInfo.joinRef) {
+				$rootScope.players.remove($rootScope.userInfo.joinRef);
 				delete $rootScope.userInfo.joinRef;
 			}
 		}
@@ -192,9 +193,7 @@
 
 		function stopGame () {
 			$rootScope.game.status = 'STOPPED';
-			$timeout(function () {
-				new Firebase(LG_FIREBASE_URL + 'game/players').remove();
-			});
+			$rootScope.game.time = 'D';
 		}
 
 
@@ -350,15 +349,29 @@
 		//
 
 		function postMessage (msg) {
-			var defer = $q.defer();
-			$rootScope.messages.add({
-				sender: $rootScope.user.id,
-				body: msg,
-				date: new Date().getTime(),
-				time: $rootScope.game.time,
-				team: $rootScope.me ? $rootScope.me.char.team : '',
-				dead: iAmDead()
-			}, function () {
+			var defer = $q.defer(), msgObj;
+
+			if ($rootScope.game.status === 'STOPPED') {
+				msgObj = {
+					sender: $rootScope.user.id,
+					body: msg,
+					date: new Date().getTime(),
+					time: 'D',
+					team: ''
+				};
+			}
+			else {
+				msgObj = {
+					sender: $rootScope.user.id,
+					body: msg,
+					date: new Date().getTime(),
+					time: $rootScope.game.time,
+					team: $rootScope.me ? $rootScope.me.char.team : '',
+					dead: iAmDead()
+				};
+			}
+
+			$rootScope.messages.add(msgObj, function () {
 				resolveDefer(defer);
 			});
 			return defer.promise;
@@ -389,6 +402,7 @@
 
 		function resetGame ()
 		{
+			quitGame();
 			return $q.all([
 				clearMessages(),
 				clearPlayers()
@@ -506,10 +520,14 @@
 			$rootScope.players.update(looser, function () {
 				console.log("killed player synced!");
 				$timeout(function () {
+					var char = lgCharacters.characterById(looser.role);
 					postGameMessage(
+						"<span class=\"dead pull-left\"><img class=\"card\" src=\"images/cartes/" + looser.role + ".png\"/>" +
+						"<span class=\"cross\"></span></span>" +
 						"Le joueur <strong>" + $rootScope.users[looser.user].name + "</strong>" +
-						" (qui était <strong>" + lgCharacters.characterById(looser.role).name + "</strong>" +
-						" est mort. Paix à son âme !"
+						" (qui était <strong>" + char.name + "</strong>)" +
+						" est mort.<br/>" +
+						(char.team === 'L' ? "Et hop : un d'moins !" : "Paix à son âme !")
 					).then(function () {
 						console.log("message posted! resolving...");
 						var end = checkEndOfGame(), endMessage;

js/ui.js

@@ -198,18 +198,19 @@
 			'template' :
 				'<figure class="character clearfix">' +
 					'<img class="card" ng-src="images/cartes/{{ character.id }}.png"/>' +
+					'<h4 ng-click="showDesc=!showDesc" style="cursor:pointer;"><i ng-class="{true:\'icon-chevron-sign-up\',false:\'icon-chevron-sign-down\'}[showDesc]"></i> {{ character.name }}</h4>' +
 					'<figcaption>' +
-					'<h4>{{ character.name }}</h4>' +
-					'<p>{{ character.desc }}</p>' +
+					'<p ng-show="showDesc">{{ character.desc }}</p>' +
 					'</figcaption>' +
-					'</figure>',
+				'</figure>',
 			'replace'  : true,
 			'scope' : {
 				character : '=lgCharacter'
 			},
 
 			'link' : function (scope, iElement, iAttrs, ctrl)
 			{
+				scope.showDesc = false;
 			}
 		}
 	});
@@ -250,22 +251,23 @@
 				'<div class="panel panel-default">' +
 					'<div class="panel-heading"><h4><i class="icon-group"></i> Joueurs</h4></div>' +
 					'<ul class="list-group">' +
-						'<li class="list-group-item" ng-class="{\'active\':p.$id==me.player.$id}" ng-repeat="(name,p) in players">' +
+						'<li class="list-group-item">' +
+							'<div ng-pluralize="" count="mostVotedPlayers.length" when="{\'0\':\'Aucun vote pour le moment\', \'one\':\'Le plus voté :\', \'other\':\'Les {} plus votés :\'}"></div>' +
+							'<span class="label label-danger" ng-repeat="p in mostVotedPlayers">{{ users[game.players[p].user].name }}</span>' +
+						'</li>' +
+						'<li class="list-group-item" ng-class="{\'me\':p.$id==me.player.$id, \'active\':p.$id == me.player.voteFor}" ng-repeat="(name,p) in players">' +
 							'<span class="pull-right votes-count" ng-class="{\'text-muted\':countVotes(p)==0}">{{ countVotes(p) }}</span>' +
-							'<button ng-click="toggleVote(p)" ng-disabled="isDead(p)" class="btn btn-default btn-sm pull-left" ng-class="{\'btn-success\': p.$id == me.player.voteFor && isAlive(p)}" type="button"><i ng-class="{true:\'icon-thumbs-up\', false:\'icon-ban-circle\'}[isAlive(p)]"></i></button>' +
+							'<button ng-click="toggleVote(p)" ng-disabled="isDead(p)" class="btn btn-default btn-sm pull-left" ng-class="{\'active\': p.$id == me.player.voteFor && isAlive(p), \'btn-danger\': p.$id==me.player.$id}" type="button"><i ng-class="{true:\'icon-thumbs-up\', false:\'icon-ban-circle\'}[isAlive(p)]"></i></button>' +
 							' <strong>{{ users[p.user].name }}</strong>' +
+							'<span ng-if="p.$id==me.player.$id" class="text-muted"> (vous)</span>' +
 							'<br/><small>' +
 							'<span ng-if="isDead(p)">est mort</span>' +
 							'<span ng-if="isAlive(p) && !p.voteFor">n\'a pas encore voté</span>' +
-							'<span ng-if="isAlive(p) && p.voteFor && p.$id == p.voteFor"><i class="icon-arrow-right"></i> lui-même</span>' +
+							'<span ng-if="isAlive(p) && p.voteFor && p.$id == p.voteFor">se suicide...</span>' +
 							'<span ng-if="isAlive(p) && p.voteFor && p.$id != p.voteFor"><i class="icon-arrow-right"></i> {{users[game.players[p.voteFor].user].name}}</span>' +
 							'</small>' +
 						'</li>' +
 					'</ul>' +
-					'<div class="panel-footer">' +
-						'<div ng-pluralize="" count="mostVotedPlayers.length" when="{\'0\':\'Aucun vote pour le moment\', \'one\':\'Le plus voté :\', \'other\':\'Les {} plus votés :\'}"></div>' +
-						'<span class="label label-danger" ng-repeat="p in mostVotedPlayers">{{ users[game.players[p].user].name }}</span>' +
-					'</div>' +
 				'</div>',
 			scope : true,