draw connections between selected tiles

diff --git a/main.coffee b/main.coffee
index be83ff2..147b76a 100644 (file)
--- a/main.coffee
+++ b/main.coffee
@@ -332,9 +332,13 @@ unselect_tile = ->
        update_selection_display()
 
 _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
 
 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
 
        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
 
 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) ->
        update_selection_display()
 
 new_tile = (space, y) ->

diff --git a/style.less b/style.less
index 59ee961..2c0c6b3 100644 (file)
--- a/style.less
+++ b/style.less
@@ -213,6 +213,13 @@ body {
                background-color: @selected-good-color;
        }
 }
                background-color: @selected-good-color;
        }
 }

+.connector {
+       position: absolute;
+       height: 10px;
+       width: 10px;
+       background: #666;
+       border-radius: 10px;
+}

 #loading {
        position: absolute;
        top: 140px;
 #loading {
        position: absolute;
        top: 140px;