Merge pull request #20 from rvhuang/wip-ui-minor-change

Obstacle Type Selection Improvement

src/Heuristic.PathfindingLab/Heuristic.PathfindingLab/Models/MapSettings.cs

@@ -11,7 +11,7 @@ public class MapSettings
         public const int DefaultMapWidth = 40;
         public const int DefaultMapHeight = 20;
         public const int MinMapWidth = 10;
-        public const int MinMapHeight = 20;
+        public const int MinMapHeight = 10;
 
         private int _width;
         private int _height;

src/Heuristic.PathfindingLab/Heuristic.PathfindingLab/Views/Embed/Index.cshtml

@@ -34,23 +34,13 @@
                     <span class="glyphicon glyphicon-globe"></span>
                 </a>
             </div>
+            @await Html.PartialAsync("../Home/_Algorithm")
             @if (Model.IsSmartDevice)
             {
                 <button type="button" class="btn btn-primary btn-sm" data-toggle="button" id="btnFindPath">
                     <span class="glyphicon glyphicon-search"></span>
                 </button>
             } 
-            <div class="btn-group" role="group" data-toggle="buttons">
-                <label class="btn btn-default btn-sm active algorithm"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.AStar)" checked /><span>A*</span></label>
-                <label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Best-first Search"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.BestFirstSearch)" />BFS</label>
-                <label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Iterative Deepening A*"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.IterativeDeepeningAStar)" />IDA*</label>
-                <label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Recursive Best-first Search"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.RecursiveBestFirstSearch)" />RBFS</label>
-            </div> 
-            <div class="btn-group" role="group" data-toggle="buttons">
-                <label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetChebyshevDistance)">Chebyshev</label>
-                <label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetEuclideanDistance)">Euclidean</label>
-                <label class="btn btn-default btn-sm active"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetManhattanDistance)" checked>Manhattan</label>
-            </div>
             <div class="btn-group" role="group" id="histories"></div> 
         </form>
     </div>

src/Heuristic.PathfindingLab/Heuristic.PathfindingLab/Views/Home/Index.cshtml

@@ -36,29 +36,15 @@
                     <span class="glyphicon glyphicon-info-sign"></span>
                 </button>
             </div>
+            @await Html.PartialAsync("_Algorithm")
             @if (Model.IsSmartDevice)
             {
                 <button type="button" class="btn btn-primary btn-sm" data-toggle="button" id="btnFindPath">
                     <span class="glyphicon glyphicon-search"></span>
                 </button>
             } 
-            <div class="btn-group" role="group" data-toggle="buttons">
-                <label class="btn btn-default btn-sm active algorithm"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.AStar)" checked /><span>A*</span></label>
-                <label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Best-first Search"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.BestFirstSearch)" />BFS</label>
-                <label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Iterative Deepening A*"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.IterativeDeepeningAStar)" />IDA*</label>
-                <label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Recursive Best-first Search"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.RecursiveBestFirstSearch)" />RBFS</label>
-            </div> 
-            <div class="btn-group" role="group" data-toggle="buttons">
-                <label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetChebyshevDistance)">Chebyshev</label>
-                <label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetEuclideanDistance)">Euclidean</label>
-                <label class="btn btn-default btn-sm active"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetManhattanDistance)" checked>Manhattan</label>
-            </div>
-            <a href="javascript:void();" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="right" data-container="body" data-content="A heuristic function is used to evaluate the cost of every step. For some of algorithms, at least one heuristic function needs to be selected. If more than one functions are selected, the subsequent one will be used when previous one evaluates two steps as equal.">
-                <span class="glyphicon glyphicon-question-sign"></span>
-            </a> 
-            @if (!Model.IsSmartDevice)
-            {       
-                <span>&nbsp;</span>         
+            else
+            {        
                 <span class="small">Left click to place obstacles, right click on two positions to get a path.</span>
             }
         </form>
@@ -67,7 +53,7 @@
 <div class="row" style="margin-top: 8px">
     <div class="col-lg-2">
         <label>Open List Analysis</label>
-        <a href="javascript:void();" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="right" data-container="body" data-content="The chart shows the retrospective analysis of open list. A stale node is the node that has not expanded because of low priority estimated by heuristic functions.">
+        <a href="javascript:void(0)" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="right" data-container="body" data-content="The chart shows the retrospective analysis of open list. A stale node is the node that has not expanded because of low priority estimated by heuristic functions.">
             <span class="glyphicon glyphicon-question-sign"></span>
         </a>
         <p class="small" id="description">
@@ -88,7 +74,7 @@
     </div>
     <div class="col-lg-5">
         <label>LINQ Expression</label>
-        <a href="javascript:void();" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="right" data-container="body" data-content="A code snippet using LINQ to A* to set conditions and fetch the path will be displayed here.">
+        <a href="javascript:void(0)" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="right" data-container="body" data-content="A code snippet using LINQ to A* to set conditions and fetch the path will be displayed here.">
             <span class="glyphicon glyphicon-question-sign"></span>
         </a>
         <!-- Nav tabs -->
@@ -170,7 +156,7 @@
             </div>
             <div class="modal-body">
                 <p>Copyright © <a href="https://rvhuang.github.io/" target="_blank">Robert Vandenberg Huang</a></p>
-                <p>Copyright © <a href="https://kenney.nl/" target="_blank">Kenney Vleugels</a> (assets)</p>
+                <p>Copyright © <a href="https://kenney.nl/" target="_blank">Kenney Vleugels</a> (asset design)</p>
                 <p>The project is licensed under the MIT license. Feel free to copy, modify and use in your computer science homework (grades not guaranteed).</p>
             </div>
             <div class="modal-footer">

src/Heuristic.PathfindingLab/Heuristic.PathfindingLab/Views/Home/_Algorithm.cshtml

@@ -0,0 +1,110 @@
+@using Heuristic.Linq
+@using Microsoft.AspNetCore.Http
+@using Microsoft.AspNetCore.Http.Extensions
+@{
+    const int assetSize = 16;
+}
+<div class="btn-group" role="group" data-toggle="buttons">
+    <div class="dropup">
+        <button class="btn btn-success btn-sm dropdown-toggle" type="button" id="obstacle-selection" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <span class="glyphicon glyphicon-tree-conifer"></span>
+        </button>
+        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="obstacle-selection">
+            <li style="padding: 2px">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="@(assetSize * 2 * 5)" height="@(assetSize * 2 * 4)">
+                    <defs>
+                        <image id="obstacle-tile-assets" x="0" y="0" width="968" height="526" xlink:href="@UriHelper.BuildAbsolute(Context.Request.Scheme, Context.Request.Host, new PathString("/images/assets.png"))" />
+                        <!---->   
+                        <svg id="obstacle-tile-0" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 13 + 13) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-1" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 14 + 14) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-2" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 15 + 15) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-3" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 16 + 16) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-4" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 17 + 17) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-5" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 18 + 18) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-6" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 19 + 19) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-7" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 20 + 20) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-8" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 21 + 21) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-9" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 22 + 22) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-10" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 23 + 23) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-11" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 24 + 24) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-12" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 25 + 25) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-13" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 26 + 26) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-14" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 24 + 24) @(assetSize * 10 + 10) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-15" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 25 + 25) @(assetSize * 10 + 10) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-16" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 26 + 26) @(assetSize * 10 + 10) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-17" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 24 + 24) @(assetSize * 11 + 11) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-18" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 26 + 26) @(assetSize * 11 + 11) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>
+                        <svg id="obstacle-tile-19" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 27 + 27) @(assetSize * 11 + 11) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
+                            <use xlink:href="#obstacle-tile-assets" />
+                        </svg>       
+                    </defs>    
+                    <g id="obstacle-list">   
+                        @for (var i = 0; i < 20; i++) 
+                        {
+                            <svg x="@(assetSize * 2 * (i % 5))" y="@(assetSize * 2 * (i / 5))">
+                                <use xlink:href="#obstacle-tile-@(i)" data-obstacle-value="@(i + 1)" />
+                            </svg>
+                        }
+                    </g>
+                </svg>
+            </li>
+        </ul>
+    </div>
+</div>
+<div class="btn-group" role="group" data-toggle="buttons">
+    <div class="dropup">
+        <button class="btn btn-default btn-sm dropdown-toggle algorithm" type="button" value="@nameof(HeuristicSearch.AStar)" id="algorithm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">A*</button>
+        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="algorithm">
+            <li><a data-algorithm="@nameof(HeuristicSearch.AStar)" href="#algorithm">A*</a></li>
+            <li><a data-algorithm="@nameof(HeuristicSearch.BestFirstSearch)" href="#algorithm">BFS</a></li>
+            <li><a data-algorithm="@nameof(HeuristicSearch.IterativeDeepeningAStar)" href="#algorithm">IDA*</a></li> 
+            <li><a data-algorithm="@nameof(HeuristicSearch.RecursiveBestFirstSearch)" href="#algorithm">RBFS</a></li>
+        </ul>
+    </div>
+</div>
+<div class="btn-group" role="group" data-toggle="buttons">
+    <label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetChebyshevDistance)">Chebyshev</label>
+    <label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetEuclideanDistance)">Euclidean</label>
+    <label class="btn btn-default btn-sm active"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetManhattanDistance)" checked>Manhattan</label>
+</div>
+<a href="javascript:void(0)" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="top" data-container="body" data-content="A heuristic function is used to evaluate the cost of every step. For some of algorithms, at least one heuristic function needs to be selected. If more than one functions are selected, the subsequent one will be used when previous one evaluates two steps as equal.">
+    <span class="glyphicon glyphicon-question-sign"></span>
+</a> 

src/Heuristic.PathfindingLab/Heuristic.PathfindingLab/Views/Home/_Map.cshtml

@@ -7,7 +7,7 @@
     const int baseOffsetX = 5 * assetSize + 5;
     const int baseOffsetY = 19 * assetSize + 19;
 }
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="@(assetSize * 2 * (Model.Width + 1))" height="@(assetSize * 2 * Model.Height)" id="map">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="@(assetSize * 2 * Model.Width)" height="@(assetSize * 2 * Model.Height)" id="map">
     <defs>
         <image id="tile-assets" x="0" y="0" width="968" height="526" xlink:href="@UriHelper.BuildAbsolute(Context.Request.Scheme, Context.Request.Host, new PathString("/images/assets.png"))" />
         <!---->
@@ -143,12 +143,4 @@
         <text x="@(assetSize * 2 - 3)" y="27" class="cursor-y" text-anchor="end" style="font-size: 0.8em"></text>
         <rect width="@(assetSize * 2)" height="@(assetSize * 2)" x="0" y="0" fill="cadetblue" fill-opacity="0.6" />
     </svg>
-    <g id="obstacle-list">
-        @for (var i = 0; i < 20; i++)
-        {
-            <svg x="@(assetSize * 2 * Model.Width)" y="@(assetSize * 2 * i)" width="@(assetSize * 2)" height="@(assetSize * 2)">
-                <use xlink:href="#obstacle-@(i)" data-obstacle-value="@(i + 1)" />
-            </svg>
-        }
-    </g>
 </svg>