add ability to change player names

Author: tublitzed

assets/js/classes/game/index.js

@@ -38,6 +38,10 @@ class Game {
 	 */
 	bindEventHandlers() {
 		this.vent.sub('save', () => this.save());
+		this.vent.sub('player:nameChanged', () => {
+			this.render();
+			this.save();
+		});
 		this.vent.sub('render', () => this.render());
 		this.vent.sub('drawCard', () => this.onDrawCard());
 		this.vent.sub('error', (error) => this.error(error));
@@ -73,11 +77,10 @@ class Game {
 			}
 		});
 
-		$(document).on('click', '.alert-link', function(event) {
+		$(document).on('click', '.modal-link--alert', function(event) {
 			event.preventDefault();
 			vex.dialog.alert($(this).attr('data-alert-content'));
 		});
-
 	}
 
 	/**

assets/js/classes/player/index.js

@@ -1,11 +1,12 @@
 import $ from 'jquery';
 import roles from '../../modules/roles';
 import exporter from '../../modules/exporter';
+import vex from '../../plugins/vex';
 
 const ACTIVE_CLASS = 'player--active';
 const SECOND_PLAYER_ACTIVE = 'body--player2-active';
 const HIGHLIGHT_SCORE_CLASS = 'player--highlight-score';
-
+const MAX_LENGTH_NAME = 16;
 /**
  * Each game has players.
  */
@@ -24,6 +25,37 @@ class Player {
 		this.guessCount = opts.guessCount || 0;
 		this.guess = opts.guess || null;
 		this.$el = $('#' + this.id);
+		this.bindEventHandlers();
+	}
+
+	/**
+	 * Bind event handlers for this player.
+	 */
+	bindEventHandlers() {
+		this.$el.on('click', '.player__name', (event) => {
+			event.preventDefault();
+			this.showChangeNamePrompt();
+		});
+	}
+
+	/**
+	 * Show modal to change name
+	 */
+	showChangeNamePrompt() {
+		let input = "<input name='vex' type='text' class='vex-dialog-prompt-input' placeholder='Enter new name' maxlength='" + MAX_LENGTH_NAME +"' />"
+		vex.dialog.prompt({
+			message: 'Change your name, ' + this.name + ':',
+			input: input,
+			callback: (value) => {
+				//escape html entities with use of .text()
+				value = $('<div>').html($.trim(value)).text();
+				//false is returned on hitting esc and it's tranformed to a string above.
+				//this has caveat of preventing user from setting their username to 'false' but...oh well. improve if ever needed.
+				if (value && value !== 'false') {
+					this.setName(value);
+				}
+			}
+		});
 	}
 
 	/**
@@ -70,7 +102,7 @@ class Player {
 		$points.find('em').html(this.score === 1 ? 'point' : 'points');
 
 		this.$el.find('.player__role').html(this.getRoleHtml());
-		this.$el.find('.player__name').html(this.name);
+		this.$el.find('.player__name a').html(this.name);
 		return this;
 	}
 
@@ -92,6 +124,20 @@ class Player {
 		return this;
 	}
 
+	/**
+	 * Set name
+	 * @param {string}
+	 */
+	setName(name) {
+		if (name.length > MAX_LENGTH_NAME) {
+			name = name.substr(0, MAX_LENGTH_NAME);
+		}
+		this.name = name;
+		this.render();
+		this.vent.pub('player:nameChanged');
+		return this;
+	}
+
 	/**
 	 * @param {number} num
 	 */
@@ -174,14 +220,14 @@ class Player {
 	buildAlertHintLink(linkText) {
 		let alert = "When you have three correct guesses in a row, you will be allowed to pass.";
 		alert += " It is to your advantage to pass, so you can avoid gaining points.";
-		return "<a href='#' class='alert-link' data-alert-content='" + alert + "'>" + linkText + "</a>";
+		return "<a href='#' class='modal-link modal-link--alert' data-alert-content='" + alert + "'>" + linkText + "</a>";
 	}
 
 	/**
 	 * Export deck
 	 * @return {object}
 	 */
-	export() {
+	export () {
 		return exporter.exportObj(this, ['$el', 'vent']);
 	}
 };

assets/scss/main.scss

@@ -7,7 +7,7 @@
 @import 'modules/_base.scss';
 
 
-.alert-link {
+.modal-link {
 	text-decoration: none;
 	border-bottom: 1px dashed #999;
 }

assets/scss/modules/_players.scss

@@ -18,6 +18,25 @@
     font-size: 1.3em;
     margin: 0.5em 0;
     padding: 0;
+
+    //TODO: fix the jumpiness.
+    a {
+        &:hover {
+            &:after {
+                display: inline-block;
+            }
+        }
+
+        &:after {
+            display: none;
+            position: relative;
+            top: -5px;
+            left: 7px;
+            content: '\f040'; //edit icon. fa-pencil.
+            font: normal normal normal 14px/1 FontAwesome;
+            
+        }
+    }
 }
 
 .player__role {

public/css/main.css

@@ -13,13 +13,13 @@
 		</div>
 		<label class="points-otl show-media-non-lg-only">
 			<span class="points-otl__point-value">0</span> 
-			<span class="points-otl__text">points</span> <a href="#" class="alert-link" data-alert-content="The points on the line will increase until the Guesser gets a wrong answer. Then, all points on the line go to the Guesser. Remember: the goal is to end the game with as few points as possible.">on the line</a>
+			<span class="points-otl__text">points</span> <a href="#" class="modal-link modal-link--alert" data-alert-content="The points on the line will increase until the Guesser gets a wrong answer. Then, all points on the line go to the Guesser. Remember: the goal is to end the game with as few points as possible.">on the line</a>
 		</label>
 	</div>
 	<div class="deck__item">
 		<div class="points-otl points-otl--lg show-media-lg-only">
 			<span class="points-otl__point-value">0</span> 
-			<span class="points-otl__text">points</span> <a href="#" class="alert-link" data-alert-content="The points on the line will increase until the Guesser gets a wrong answer. Then, all points on the line go to the Guesser. Remember: the goal is to end the game with as few points as possible.">on the line</a>
+			<span class="points-otl__text">points</span> <a href="#" class="modal-link modal-link--alert" data-alert-content="The points on the line will increase until the Guesser gets a wrong answer. Then, all points on the line go to the Guesser. Remember: the goal is to end the game with as few points as possible.">on the line</a>
 		</div>
 	</div>
 </div>

public/css/main.css.map

@@ -9,7 +9,10 @@
 						<em></em>
 					</div>
 				</div>
-				<h3 class="player__name"></h3>
+				<h3 class="player__name">
+					<a href="#" class="modal-link" title="Change name">
+					</a>
+				</h3>
 				<h4 class="player__role"></h4>
 				<label class="player__hint"></label>
 			</div>

public/js/app.bundle.js

@@ -23,12 +23,13 @@
 	</ul>
 	<hr />
 	<h2>Protips:</h2>
-	<p>You can also use your keyboard to make moves when it's your turn:</p>
+	<p>Use your keyboard to make moves when it's your turn:</p>
 	<ul>
 		<li><b>Enter: </b> Draw a card.</li>
 		<li><b>Up arrow: </b> Guess high.</li>
 		<li><b>Down arrow: </b> Guess low.</li>
 		<li><b>Right arrow: </b> Pass.</li>
 	</ul>
+	<p>Click your name to change it anytime during the game.</p>
 	<p>It's also worth mentioning that there's a cheat mode. If you can <a href="https://github.com/tublitzed/hi-lo">find it</a>, you can use it. It'll allow you to draw more cards at a time.</p>
 </section>