From 643696e68d5a23c907592334432796738fcc288c Mon Sep 17 00:00:00 2001
From: Jason Woofenden <jason@jasonwoof.com>
Date: Tue, 26 Nov 2013 19:30:03 -0500
Subject: [PATCH] draw connections between selected tiles

---
 main.coffee |   49 ++++++++++++++++++++++++++++++++++++++++++++++---
 style.less  |    7 +++++++
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/main.coffee b/main.coffee
index be83ff2..147b76a 100644
--- a/main.coffee
+++ b/main.coffee
@@ -332,9 +332,13 @@ unselect_tile = ->
 	update_selection_display()
 
 _unselect_tile = ->
-	html_tile = selected.pop().dom
-	html_tile.removeClass 'selected_word'
-	html_tile.removeClass 'selected'
+	tile = selected.pop()
+	dom = tile.dom
+	if tile.connector?
+		tile.connector.remove()
+		delete tile.connector
+	dom.removeClass 'selected_word'
+	dom.removeClass 'selected'
 
 unselect_all = ->
 	while selected.length
@@ -627,9 +631,48 @@ show_definition = (word, type, definition, language) ->
 	html += '<div id="definition_credit">Definition &copy;<a href="http://en.wiktionary.org/" target="_blank">wiktionary.org</a> CC-BY-SA</div>'
 	$definition_body.html html
 
+connector_width = 11
+connector_radius = 5
+connector_slant = 12
+add_connector = (tile, horiz, vert) ->
+	style = {}
+	switch horiz
+		when 'left'
+			style.right = '100%'
+		when 'mid'
+			style.left = 21 - connector_radius
+		when 'right'
+			style.left = '100%'
+	switch vert
+		when 'top'
+			style.bottom = '100%'
+		when 'up'
+			style.top = 21 - connector_radius - connector_slant
+		when 'down'
+			style.top = 21 - connector_radius + connector_slant
+		when 'bot'
+			style.top = '100%'
+	tile.connector = $("<div class=\"connector\"></div>").css style
+	tile.dom.append tile.connector
 
 select_tile = (tile) ->
 	selected.push tile
+	if selected.length > 1
+		prev = selected[selected.length - 2]
+		if prev.space.top_px < tile.space.top_px
+			if prev.space.left_px < tile.space.left_px
+				add_connector tile, 'left', 'up'
+			else if prev.space.left_px is tile.space.left_px
+				add_connector tile, 'mid', 'top'
+			else
+				add_connector tile, 'right', 'up'
+		else
+			if prev.space.left_px < tile.space.left_px
+				add_connector tile, 'left', 'down'
+			else if prev.space.left_px is tile.space.left_px
+				add_connector tile, 'mid', 'bot'
+			else
+				add_connector tile, 'right', 'down'
 	update_selection_display()
 
 new_tile = (space, y) ->
diff --git a/style.less b/style.less
index 59ee961..2c0c6b3 100644
--- a/style.less
+++ b/style.less
@@ -213,6 +213,13 @@ body {
 		background-color: @selected-good-color;
 	}
 }
+.connector {
+	position: absolute;
+	height: 10px;
+	width: 10px;
+	background: #666;
+	border-radius: 10px;
+}
 #loading {
 	position: absolute;
 	top: 140px;
-- 
1.7.10.4