From: Jason Woofenden <jason@jasonwoof.com>
Date: Sun, 13 Oct 2013 00:49:38 +0000 (-0400)
Subject: tips, instructions, better selection display
X-Git-Url: https://jasonwoof.com/gitweb/?p=hexbog.git;a=commitdiff_plain;h=ca948ceed0da56d84396d850825da0024140ed10

tips, instructions, better selection display
---

diff --git a/main.coffee b/main.coffee
index 0467055..9db18fe 100644
--- a/main.coffee
+++ b/main.coffee
@@ -237,12 +237,30 @@ init_board = ->
 	# (neighbors, above, down)
 	init_board_layout()
 
-$selection_display = null # initialized by init_html_board
+$big_tip = null # initialized by init_html_board
+$little_tip = null # initialized by init_html_board
 $score_display = null # initialized by init_html_board
 $definition_body = null # initialized by init_html_board
 update_selection_display = ->
 	word = selected_word()
-	$selection_display.html word
+	$big_tip.removeClass('good')
+	if word.length > 0
+		$big_tip.html word
+		if word.length < 3
+			$little_tip.html "Click more tiles (3 minimum)"
+		else
+			if is_word word
+				if word.indexOf(word.substr(word.length - 1)) < word.length - 1
+					last = 'last '
+				else
+					last = ''
+				$little_tip.html "Click the #{last}\"#{word.substr(word.length - 1)}\" for #{score_for word} points"
+				$big_tip.addClass('good')
+			else
+				$little_tip.html "\"#{word}\" is not in the word list."
+	else
+		$big_tip.html "← Click a word"
+		$little_tip.html "(tiles must be touching)"
 
 	# color the selected tiles according to whether they're a word or not
 	if word.length
@@ -338,6 +356,8 @@ blip_selection = ->
 				sliders[i] = false
 		save_game()
 
+score_for = (word) -> Math.round(Math.pow(1.7, word.length))
+
 activate_selection = ->
 	word = selected_word()
 	if word.length < 3
@@ -348,7 +368,7 @@ activate_selection = ->
 		# FIXME make this automatically part of the selection display
 		log "Not on word list: \"#{word}\""
 		return
-	word_score = Math.round(Math.pow(1.7, word.length))
+	word_score = score_for word
 	score += word_score
 	$score_display.html score
 	# FIXME make some kind of animation showing score gain
@@ -416,7 +436,8 @@ $board = null
 html_tiles = []
 init_html_board = ->
 	$('#loading').remove()
-	$selection_display = $('#selection')
+	$big_tip = $('#big_tip')
+	$little_tip = $('#little_tip')
 	$score_display = $('#score')
 	$score_display.html score
 	$definition_body = $('#definition_body')
@@ -528,7 +549,7 @@ extract_wiktionary_definiton = (html) ->
 
 
 look_up_definition = (word) ->
-	$definition_body.html "Looking up definition for \"#{word}\"."
+	$definition_body.html "Looking up definition for \"#{word}\"..."
 	$.ajax({
 		url: "http://en.wiktionary.org/w/api.php?action=parse&format=json&page=#{word}"
 		jsonpCallback: "lud_#{word}" # always use the same callback for the same word so it's cacheable
@@ -608,5 +629,6 @@ init_game = ->
 	init_board()
 	init_html_board()
 	init_start_over_link()
+	update_selection_display()
 
 $(init_game)
diff --git a/style.less b/style.less
index a1ec6e4..fc4f0e0 100644
--- a/style.less
+++ b/style.less
@@ -5,7 +5,7 @@
 @board-height: @board-inner-height + @board-pad * 2;
 @column-pad: 10px;
 @right-width: 250px;
-@tabs-top: 120px;
+@tabs-top: 150px;
 @tabtab-height: 20px; // also in main.coffee
 @tab-height: 150px; // also in main.coffee
 @tab-pad: 5px;
@@ -14,6 +14,8 @@
 
 @tab-color: #ddf;
 @tabtab-color: darken(@tab-color, 3%);
+@selected-color: #ffa;
+@selected-good-color: #cfc;
 
 body {
 	background: #eef;
@@ -68,6 +70,21 @@ body {
 		height: @tabtab-height * 4 + @tab-height;
 		width: @right-width;
 	}
+	#big_tip {
+		font-size: 24px;
+		font-weight: bold;
+		color: darken(@selected-color, 66%);
+		text-align: center;
+	}
+	#big_tip.good {
+		color: darken(@selected-good-color, 66%);
+	}
+	#score_container {
+		font-weight: bold;
+	}
+	#little_tip {
+		text-align: center;
+	}
 	.tab + .tab, .selected-tab + .tab, .tab + .selected-tab {
 		margin-top: 5px;
 	}
@@ -132,11 +149,11 @@ body {
 	box-shadow: 1px 1px 2px #666;
 }
 .tile.selected, .tile.selected_word {
-	background-color: #ffa;
+	background-color: @selected-color;
 	box-shadow: inset 1px 1px 5px #444;
 }
 .tile.selected_word {
-	background-color: #cfc;
+	background-color: @selected-good-color;
 }
 #loading {
 	position: absolute;
diff --git a/template.html b/template.html
index d5668fc..1621587 100644
--- a/template.html
+++ b/template.html
@@ -36,8 +36,9 @@ cat style.css
 			<h1>HexBog</h1>
 			<div id="subhead">&mdash; A simple word game &mdash;</div>
 
-			<div>Selection: "<span id="selection"></span>"</div>
-			<div>Score: <span id="score">0</span></div>
+			<div id="big_tip"></div>
+			<div id="little_tip"></div>
+			<div id="score_container">Score: <span id="score">0</span></div>
 
 			<div id="tabs">
 				<div id="instructions" class="selected-tab" style="height: 150px">