Getting started on how-to-play instructions.

Shogi.UI/Pages/Home/HomePage.razor

@@ -0,0 +1,50 @@
+@page "/"
+
+@using Shogi.Contracts.Types
+@using System.Net.WebSockets
+@using System.Text
+
+<main class="shogi PrimaryTheme">
+	<h2>What is Shogi?</h2>
+	<p>Shogi is a two-player strategy game where each player simultaneously protects their king while capturing their opponent's.</p>
+	<p>Players take turns, moving one piece each turn until check-mate is achieved.</p>
+
+	<h2>How to Play</h2>
+
+	<h3>Setup</h3>
+	<p>Arrange the board so it looks like this. Take note of the Rook and Bishop positions for each player.</p>
+	<BoardSetupVisualAid />
+
+	<h3>Pieces and Movement</h3>
+	<p>Each piece has a unique set of moves. Some pieces, like the Pawn, may move only one tile per turn. Other pieces, like the Bishop, may move multiple tiles per turn.</p>
+	<p>A tile may only hold one piece and, except for the Knight, pieces may never move through each other.</p>
+	<p>Should your piece enter the tile of an opponent's piece, you must stop there and capture the opponent's piece.</p>
+	<PieceMovesVisualAid />
+
+	<h3>Promotion</h3>
+	<p>The furthest three ranks from your starting position is an area called the <b>promotion zone</b>. A piece may promote at the end of the turn when it moves in to, out of, or within the promotion zone.</p>
+	<p>Promoting changes the move-set available to the peice, and a piece <em>must promote</em> if it has no legal, future moves. An example of this is a Pawn moving the the furthest rank on the board such that it cannot go further. In this case, the Pawn must promote.</p>
+	<p>All pieces may promote <b>except for</b> the Gold General and King.</p>
+	<PromotedPieceVisualAid />
+
+	<h3>Capturing and the Hand</h3>
+	<h3>The King and "Check"</h3>
+	<h3>Victory</h3>
+
+</main>
+
+@code {
+
+	private string activeSessionName = string.Empty;
+
+	private Task OnLoginChanged()
+	{
+		StateHasChanged();
+		return Task.CompletedTask;
+	}
+	private void OnChangeSession(SessionMetadata s)
+	{
+		activeSessionName = s.SessionId.ToString();
+		StateHasChanged();
+	}
+}

Shogi.UI/Pages/Home/HomePage.razor.css

@@ -1,4 +1,7 @@
 .shogi {
 	background-color: var(--primary-color);
 	color: white;
-}
+	padding: 1rem;
+	padding-top: 0;
+	overflow: auto;
+}

Shogi.UI/Pages/Home/VisualAids/BishopMoves.razor

@@ -0,0 +1,248 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg viewBox="0 0 127.70555 127.70555"
+		 version="1.1"
+		 id="svg5"
+		 sodipodi:docname="bishop-moves.svg"
+		 inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+		 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+		 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+		 xmlns:xlink="http://www.w3.org/1999/xlink"
+		 xmlns="http://www.w3.org/2000/svg"
+		 xmlns:svg="http://www.w3.org/2000/svg">
+	<sodipodi:namedview id="namedview7"
+											pagecolor="#ffffff"
+											bordercolor="#666666"
+											borderopacity="1.0"
+											inkscape:pageshadow="2"
+											inkscape:pageopacity="0.0"
+											inkscape:pagecheckerboard="0"
+											inkscape:document-units="mm"
+											showgrid="true"
+											inkscape:zoom="0.52410024"
+											inkscape:cx="373.97426"
+											inkscape:cy="283.34274"
+											inkscape:window-width="1397"
+											inkscape:window-height="827"
+											inkscape:window-x="2099"
+											inkscape:window-y="63"
+											inkscape:window-maximized="1"
+											inkscape:current-layer="layer2"
+											showguides="true"
+											inkscape:snap-bbox="true"
+											inkscape:object-paths="true"
+											inkscape:snap-intersection-paths="true"
+											inkscape:snap-smooth-nodes="true">
+		<inkscape:grid type="xygrid"
+									 id="grid9"
+									 originx="0.3527775"
+									 originy="0.3527775" />
+	</sodipodi:namedview>
+	<defs id="defs2">
+		<marker style="overflow:visible"
+						id="Arrow1Lend"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229" />
+		</marker>
+		<inkscape:path-effect effect="powerstroke"
+													id="path-effect1626"
+													is_visible="true"
+													lpeversion="1"
+													offset_points="1,4.99214"
+													not_jump="false"
+													sort_points="true"
+													interpolator_type="CubicBezierJohan"
+													interpolator_beta="0.2"
+													start_linecap_type="zerowidth"
+													linejoin_type="extrp_arc"
+													miter_limit="4"
+													scale_width="1"
+													end_linecap_type="zerowidth" />
+		<linearGradient id="linearGradient10936">
+			<stop style="stop-color:#fcf3e8;stop-opacity:1"
+						offset="0"
+						id="stop10938" />
+			<stop style="stop-color:#ba6100;stop-opacity:1"
+						offset="1"
+						id="stop10940" />
+		</linearGradient>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient10942"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-5"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+	</defs>
+	<g inkscape:label="Layer 1"
+		 inkscape:groupmode="layer"
+		 id="layer1"
+		 sodipodi:insensitive="true"
+		 transform="translate(0.35277751,0.35277751)">
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870"
+					width="42.333332"
+					height="42.333332"
+					x="0"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-7"
+					width="42.333332"
+					height="42.333332"
+					x="42.333336"
+					y="1.2715658e-06" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-2"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-9"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="42.333336" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-4"
+					width="42.333332"
+					height="42.333332"
+					x="42.33334"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-0"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-8"
+					width="42.333332"
+					height="42.333332"
+					x="42.333332"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-05"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="84.666664" />
+	</g>
+	<g inkscape:groupmode="layer"
+		 id="layer2"
+		 inkscape:label="Layer 2"
+		 transform="translate(0.35277751,0.35277751)">
+		<path style="fill:#000000;stroke:#000000;stroke-width:0.965;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1Lend)"
+					d="M 47.624999,47.624999 5.2916666,5.2916666"
+					id="path7883" />
+		<path style="fill:none;stroke:#000000;stroke-width:0.965;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1Lend-4)"
+					d="M 79.375,47.625 121.70833,5.2916667"
+					id="path7883-9"
+					sodipodi:nodetypes="cc" />
+		<path style="fill:none;stroke:#000000;stroke-width:0.965;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1Lend-48)"
+					d="m 79.375,79.375 42.33333,42.33333"
+					id="path7883-4"
+					sodipodi:nodetypes="cc" />
+		<path style="fill:none;stroke:#000000;stroke-width:0.965;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1Lend-1)"
+					d="M 47.625,79.375 5.2916667,121.70833"
+					id="path7883-7"
+					sodipodi:nodetypes="cc" />
+		<g transform="matrix(0.25535996,0,0,0.25631928,48.371164,49.075988)"
+			 id="g12950">
+			<path d="M 3.6843532,112.89045 H 104.38651 L 87.439074,5.7639005 54.035433,0.49538136 20.63179,5.7639005 Z"
+						style="fill:url(#linearGradient12957-5);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.03418;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.498039"
+						id="path9965" />
+			<path d="m 53.647616,10.896232 c 1.034155,3.5e-5 2.553103,-0.193873 4.556849,-0.581725 2.003691,-0.3877809 3.361049,-0.7432793 4.072077,-1.0664963 0.710965,-0.3231439 1.518916,-0.3554619 2.423855,-0.096954 0.904872,0.258581 1.906731,0.7433516 3.005581,1.4543133 1.098777,0.711032 0.743278,1.325075 -1.066496,1.84213 -1.809846,0.517122 -4.912378,2.973293 -9.307605,7.368521 3.231777,-0.646335 5.203178,-1.163424 5.914207,-1.551268 0.710965,-0.387789 1.518916,-0.452425 2.423855,-0.193908 0.904871,0.258572 2.003684,0.77566 3.296444,1.551267 1.292684,0.775659 1.712818,1.486656 1.260405,2.132993 -0.452492,0.646385 -0.711036,2.003743 -0.775634,4.072077 -0.06468,2.068375 0.0646,5.203225 0.387817,9.404559 0.323141,4.201356 0.420096,7.10998 0.290863,8.72588 -0.129312,1.615904 -0.840309,2.973262 -2.132993,4.072077 -1.292759,1.098811 -2.133028,1.066493 -2.52081,-0.09695 -0.387851,-1.163451 -1.292756,-2.391537 -2.714718,-3.68426 -1.422026,-1.29272 -1.325072,-1.712855 0.290863,-1.260405 1.61587,0.452455 2.714683,0.581727 3.296443,0.387817 0.581689,-0.193906 0.807916,-2.165306 0.67868,-5.914208 -0.129309,-3.748884 -0.290899,-7.10996 -0.484772,-10.083238 -0.193943,-2.973242 -0.42017,-4.880006 -0.678679,-5.720299 -0.258579,-0.840245 -0.807986,-1.292698 -1.648222,-1.357359 -0.840302,-0.06461 -3.5227,0.290888 -8.0472,1.066496 1.163424,0.775657 1.648195,1.454336 1.454313,2.036039 -0.193935,0.581747 -0.290889,1.648242 -0.290862,3.199489 l 3.102535,-0.775634 c 1.034147,-0.258524 1.842098,-0.129252 2.423855,0.387817 0.581693,0.517108 0.290831,0.969561 -0.872588,1.357359 -1.16348,0.387835 -2.714746,0.775651 -4.653802,1.163451 v 4.847711 c 1.551239,-0.258532 2.811643,-0.484759 3.781214,-0.67868 0.969511,-0.193895 1.842098,-0.03231 2.617764,0.484771 0.7756,0.517101 0.517056,0.937236 -0.775634,1.260405 -1.292753,0.323192 -3.1672,0.743326 -5.623344,1.260405 0.129245,2.456181 0.09693,4.815398 -0.09696,7.077658 -0.193934,2.262266 -0.549433,3.458033 -1.066496,3.587306 -0.517114,0.129271 -0.807976,-0.807952 -0.872588,-2.811672 -0.06466,-2.003717 -0.161615,-4.492206 -0.290863,-7.465475 -1.422017,0.258554 -2.520831,0.452462 -3.296443,0.581725 -0.775654,0.129281 -1.680559,-0.129263 -2.714718,-0.775634 -1.034196,-0.646351 -1.001877,-1.034167 0.09695,-1.16345 1.098795,-0.129262 3.070196,-0.452442 5.914207,-0.969542 v -4.653803 c -2.585467,0.387833 -4.266005,0.323197 -5.041619,-0.193908 -0.775652,-0.517072 -0.711016,-0.872571 0.193908,-1.066497 0.904886,-0.19389 2.520788,-0.549389 4.847711,-1.066496 -2.4e-5,-2.843969 -0.323204,-4.589143 -0.969542,-5.235528 l -5.817253,0.775634 c -0.258562,5.170909 -0.581742,9.081392 -0.969542,11.73146 -0.387833,2.650091 -0.969558,5.106262 -1.745176,7.368521 -0.775648,2.262267 -2.359232,4.007441 -4.750757,5.235528 -2.391545,1.228084 -2.682407,0.96954 -0.872588,-0.775634 1.809802,-1.745175 3.102523,-3.975119 3.878169,-6.689841 0.77562,-2.714709 1.260391,-6.011149 1.454313,-9.889331 0.193894,-3.878148 0.0323,-6.302001 -0.484771,-7.271566 -0.517102,-0.969518 -0.38783,-1.389652 0.387817,-1.260405 0.775619,0.129297 1.551252,0.193933 2.326901,0.193909 0.775617,2.4e-5 3.296424,-0.323156 7.562429,-0.969543 2.068331,-2.585417 3.684233,-4.5245 4.847711,-5.817253 1.163421,-1.29269 1.551237,-2.100641 1.163451,-2.423855 -0.387847,-0.323147 -1.001889,-0.387783 -1.84213,-0.193909 -0.840297,0.193943 -1.809839,0.387851 -2.908627,0.581726 -1.098838,0.193941 -2.294606,0.03235 -3.587306,-0.484771 -3.231826,3.490382 -6.205085,5.914235 -8.919788,7.271566 -2.714728,1.357384 -3.102545,1.26043 -1.163451,-0.290863 1.939071,-1.551239 3.684245,-3.264095 5.235528,-5.138573 1.551249,-1.874414 2.553109,-3.296408 3.005581,-4.2659857 0.452433,-0.9695048 0.646341,-1.906728 0.581725,-2.8116723 -0.06466,-0.904866 0.420114,-1.1634103 1.454314,-0.7756338 1.034155,0.3878565 1.906742,0.840309 2.617763,1.3573591 0.710973,0.5171272 0.775609,1.0342159 0.193909,1.5512675 -0.58175,0.5171257 -1.260428,1.2281226 -2.036039,2.1329922 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:49.6406px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.03418;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text2169" />
+			<path d="m 65.411392,71.657019 c 0.86177,1.378932 1.163405,2.370018 0.904906,2.973263 -0.25859,0.603295 -0.344771,2.283834 -0.258544,5.041619 0.08614,2.757827 0.258499,5.472543 0.517089,8.144155 0.258498,2.671637 0.34468,4.998536 0.258545,6.980704 -0.08623,1.982179 -0.344773,3.662717 -0.775634,5.04162 -0.430953,1.3789 -1.249677,2.75781 -2.456174,4.13671 -1.206583,1.3789 -1.982216,1.46508 -2.326901,0.25855 -0.344767,-1.20655 -1.077309,-2.45618 -2.197629,-3.7489 -1.120398,-1.292721 -2.111484,-2.283807 -2.973263,-2.973262 -0.86185,-0.689449 -0.215489,-0.77563 1.939084,-0.258544 2.154499,0.517091 3.447221,0.560182 3.878169,0.129272 0.430866,-0.430904 0.68941,-1.93908 0.775634,-4.52453 0.08614,-2.585436 0.12923,-5.257061 0.129272,-8.014883 -4.2e-5,-2.757791 -0.08622,-5.343234 -0.258544,-7.756338 -0.172405,-2.413057 -0.603312,-3.964323 -1.292723,-4.653802 -5.688016,1.034205 -9.436909,1.809838 -11.24669,2.326901 -1.80984,0.517114 -3.274924,0.25857 -4.395258,-0.775634 -1.120384,-1.034151 -1.335838,-1.551239 -0.646362,-1.551267 0.689427,2.8e-5 2.456147,-0.215426 5.300165,-0.646362 2.843957,-0.430879 7.325393,-1.206512 13.444319,-2.326901 6.118839,-1.120328 10.255548,-1.982143 12.41014,-2.585446 2.15448,-0.603237 3.964291,-0.344692 5.429437,0.775634 1.465023,1.120391 1.809749,1.852933 1.034178,2.197629 -0.775695,0.344756 -2.111508,0.56021 -4.007441,0.646361 -1.89605,0.08621 -4.050586,0.258574 -6.463615,0.517089 -2.413132,0.258574 -4.65385,0.474028 -6.72216,0.646362 z m -27.405727,4.653803 c 2.068338,2.240741 2.973243,4.222914 2.714719,5.946525 -0.258565,1.723647 -0.430928,4.696907 -0.51709,8.919789 -0.0862,4.2229 -0.517108,7.454704 -1.292722,9.695424 -0.775652,2.24071 -1.594376,2.19762 -2.456174,-0.12927 -0.861831,-2.326904 -1.034194,-4.007442 -0.517089,-5.041624 0.517073,-1.034173 0.904889,-2.67162 1.16345,-4.912347 0.258528,-2.240708 0.3878,-4.826152 0.387817,-7.756338 -1.7e-5,-2.930152 -0.258561,-4.739962 -0.775634,-5.429437 -0.86183,0.861838 -2.111461,2.025287 -3.748896,3.490352 -1.63746,1.465104 -3.490361,2.757826 -5.558709,3.878169 -2.068362,1.120375 -2.843995,1.335828 -2.326901,0.646362 0.517084,-0.689437 1.852896,-2.025249 4.007441,-4.007441 2.154527,-1.982155 4.179791,-4.222872 6.075798,-6.72216 1.895977,-2.499236 3.404152,-4.783045 4.52453,-6.851432 1.12034,-2.068322 1.508156,-3.533406 1.163451,-4.395258 -0.344746,-0.861777 0.517068,-0.861777 2.585446,0 2.068332,0.861852 2.757783,1.723666 2.068357,2.585446 l -2.068357,2.585446 c -0.689475,0.861846 -2.499285,3.361108 -5.429437,7.497794 z m 5.429437,-25.078826 c 2.240694,1.206589 3.016327,2.111494 2.326901,2.714718 -0.689477,0.603317 -1.680563,1.551313 -2.973263,2.843991 -1.292744,1.292765 -2.8871,2.844031 -4.783075,4.653802 -1.896009,1.80985 -4.007454,3.404206 -6.334342,4.783075 -2.32691,1.378938 -2.154548,0.689486 0.517089,-2.068356 2.671613,-2.75777 4.783058,-5.386305 6.334343,-7.885611 1.551248,-2.499217 2.240699,-4.309028 2.068356,-5.429436 -0.172383,-1.120309 0.775613,-0.991037 2.843991,0.387817 z m 18.873755,5.946526 c 2.585402,-0.689409 4.438303,-1.249588 5.558709,-1.68054 1.120311,-0.430863 2.326852,-0.2585 3.619624,0.517089 1.292671,0.775677 1.034127,1.55131 -0.775633,2.326901 -1.809861,0.775675 -3.705853,1.335855 -5.687982,1.68054 -1.982217,0.344766 -3.576574,0.603311 -4.783074,0.775634 -1.206581,0.172402 -2.628574,3.9e-5 -4.265986,-0.517089 -1.637483,-0.517049 -1.594393,-1.034138 0.129272,-1.551268 1.723593,-0.517047 3.791948,-1.034136 6.20507,-1.551267 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:66.1874px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.03418;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text2175" />
+		</g>
+	</g>
+</svg>
+
+
+
+@code {
+
+}

Shogi.UI/Pages/Home/VisualAids/BoardSetupVisualAid.razor

@@ -0,0 +1,108 @@
+@using Shogi.Contracts.Types
+
+<div class="BoardSetupVisualAid">
+	<GameBoardPresentation Session="fakeSession" UseSideboard="false" />
+</div>
+
+@code {
+
+	private Session fakeSession = new Session
+		{
+			BoardState = new BoardState
+			{
+				Board = new Dictionary<string, Piece?>
+				{
+					{"A1", new Piece{WhichPiece = WhichPiece.Lance}},
+					{"B1", new Piece{WhichPiece = WhichPiece.Knight}},
+					{"C1", new Piece{WhichPiece = WhichPiece.SilverGeneral}},
+					{"D1", new Piece{WhichPiece = WhichPiece.GoldGeneral}},
+					{"E1", new Piece{WhichPiece = WhichPiece.King}},
+					{"F1", new Piece{WhichPiece = WhichPiece.GoldGeneral}},
+					{"G1", new Piece{WhichPiece = WhichPiece.SilverGeneral}},
+					{"H1", new Piece{WhichPiece = WhichPiece.Knight}},
+					{"I1", new Piece{WhichPiece = WhichPiece.Lance}},
+
+					{"A2", null},
+					{"B2", new Piece{WhichPiece = WhichPiece.Bishop}},
+					{"C2", null},
+					{"D2", null},
+					{"E2", null},
+					{"F2", null},
+					{"G2", null},
+					{"H2", new Piece{WhichPiece = WhichPiece.Rook}},
+					{"I2", null},
+
+					{"A3", new Piece{WhichPiece = WhichPiece.Pawn}},
+					{"B3", new Piece{WhichPiece = WhichPiece.Pawn}},
+					{"C3", new Piece{WhichPiece = WhichPiece.Pawn}},
+					{"D3", new Piece{WhichPiece = WhichPiece.Pawn}},
+					{"E3", new Piece{WhichPiece = WhichPiece.Pawn}},
+					{"F3", new Piece{WhichPiece = WhichPiece.Pawn}},
+					{"G3", new Piece{WhichPiece = WhichPiece.Pawn}},
+					{"H3", new Piece{WhichPiece = WhichPiece.Pawn}},
+					{"I3", new Piece{WhichPiece = WhichPiece.Pawn}},
+
+					{"A4", null},
+					{"B4", null},
+					{"C4", null},
+					{"D4", null},
+					{"E4", null},
+					{"F4", null},
+					{"G4", null},
+					{"H4", null},
+					{"I4", null},
+
+					{"A5", null},
+					{"B5", null},
+					{"C5", null},
+					{"D5", null},
+					{"E5", null},
+					{"F5", null},
+					{"G5", null},
+					{"H5", null},
+					{"I5", null},
+
+					{"A6", null},
+					{"B6", null},
+					{"C6", null},
+					{"D6", null},
+					{"E6", null},
+					{"F6", null},
+					{"G6", null},
+					{"H6", null},
+					{"I6", null},
+
+					{"A7", new Piece{WhichPiece = WhichPiece.Pawn, Owner = WhichPlayer.Player2}},
+					{"B7", new Piece{WhichPiece = WhichPiece.Pawn, Owner = WhichPlayer.Player2}},
+					{"C7", new Piece{WhichPiece = WhichPiece.Pawn, Owner = WhichPlayer.Player2}},
+					{"D7", new Piece{WhichPiece = WhichPiece.Pawn, Owner = WhichPlayer.Player2}},
+					{"E7", new Piece{WhichPiece = WhichPiece.Pawn, Owner = WhichPlayer.Player2}},
+					{"F7", new Piece{WhichPiece = WhichPiece.Pawn, Owner = WhichPlayer.Player2}},
+					{"G7", new Piece{WhichPiece = WhichPiece.Pawn, Owner = WhichPlayer.Player2}},
+					{"H7", new Piece{WhichPiece = WhichPiece.Pawn, Owner = WhichPlayer.Player2}},
+					{"I7", new Piece{WhichPiece = WhichPiece.Pawn, Owner = WhichPlayer.Player2}},
+
+					{"A8", null},
+					{"B8", new Piece{WhichPiece = WhichPiece.Rook, Owner = WhichPlayer.Player2}},
+					{"C8", null},
+					{"D8", null},
+					{"E8", null},
+					{"F8", null},
+					{"G8", null},
+					{"H8", new Piece{WhichPiece = WhichPiece.Bishop, Owner = WhichPlayer.Player2}},
+					{"I8", null},
+
+					{"A9", new Piece{WhichPiece = WhichPiece.Lance, Owner = WhichPlayer.Player2}},
+					{"B9", new Piece{WhichPiece = WhichPiece.Knight, Owner = WhichPlayer.Player2}},
+					{"C9", new Piece{WhichPiece = WhichPiece.SilverGeneral, Owner = WhichPlayer.Player2}},
+					{"D9", new Piece{WhichPiece = WhichPiece.GoldGeneral, Owner = WhichPlayer.Player2}},
+					{"E9", new Piece{WhichPiece = WhichPiece.King, Owner = WhichPlayer.Player2}},
+					{"F9", new Piece{WhichPiece = WhichPiece.GoldGeneral, Owner = WhichPlayer.Player2}},
+					{"G9", new Piece{WhichPiece = WhichPiece.SilverGeneral, Owner = WhichPlayer.Player2}},
+					{"H9", new Piece{WhichPiece = WhichPiece.Knight, Owner = WhichPlayer.Player2}},
+					{"I9", new Piece{WhichPiece = WhichPiece.Lance, Owner = WhichPlayer.Player2}},
+				}
+			}
+		};
+
+}

Shogi.UI/Pages/Home/VisualAids/BoardSetupVisualAid.razor.css

@@ -0,0 +1,5 @@
+.BoardSetupVisualAid {
+	max-width: 80vmin;
+	width: 30rem;
+	display: grid;
+}

Shogi.UI/Pages/Home/VisualAids/GoldGeneralMoves.razor

@@ -0,0 +1,331 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg viewBox="0 0 127.70555 127.70555"
+		 version="1.1"
+		 id="svg5"
+		 sodipodi:docname="goldgeneral-moves.svg"
+		 inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+		 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+		 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+		 xmlns:xlink="http://www.w3.org/1999/xlink"
+		 xmlns="http://www.w3.org/2000/svg"
+		 xmlns:svg="http://www.w3.org/2000/svg">
+	<sodipodi:namedview id="namedview7"
+											pagecolor="#ffffff"
+											bordercolor="#666666"
+											borderopacity="1.0"
+											inkscape:pageshadow="2"
+											inkscape:pageopacity="0.0"
+											inkscape:pagecheckerboard="0"
+											inkscape:document-units="mm"
+											showgrid="true"
+											inkscape:zoom="0.74118967"
+											inkscape:cx="80.950939"
+											inkscape:cy="174.71911"
+											inkscape:window-width="1397"
+											inkscape:window-height="827"
+											inkscape:window-x="152"
+											inkscape:window-y="54"
+											inkscape:window-maximized="0"
+											inkscape:current-layer="layer2"
+											showguides="true"
+											inkscape:snap-bbox="true"
+											inkscape:object-paths="true"
+											inkscape:snap-intersection-paths="true"
+											inkscape:snap-smooth-nodes="true">
+		<inkscape:grid type="xygrid"
+									 id="grid9"
+									 originx="0.3527775"
+									 originy="0.3527775" />
+	</sodipodi:namedview>
+	<defs id="defs2">
+		<marker style="overflow:visible"
+						id="Arrow1Lend"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229" />
+		</marker>
+		<inkscape:path-effect effect="powerstroke"
+													id="path-effect1626"
+													is_visible="true"
+													lpeversion="1"
+													offset_points="1,4.99214"
+													not_jump="false"
+													sort_points="true"
+													interpolator_type="CubicBezierJohan"
+													interpolator_beta="0.2"
+													start_linecap_type="zerowidth"
+													linejoin_type="extrp_arc"
+													miter_limit="4"
+													scale_width="1"
+													end_linecap_type="zerowidth" />
+		<linearGradient id="linearGradient10936">
+			<stop style="stop-color:#fcf3e8;stop-opacity:1"
+						offset="0"
+						id="stop10938" />
+			<stop style="stop-color:#ba6100;stop-opacity:1"
+						offset="1"
+						id="stop10940" />
+		</linearGradient>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient10942"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-5"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-5"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4-3"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6-2" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48-0"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4-7" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5-7" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient2173"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="matrix(0.9299803,0,0,0.9377921,6.7492264,12.988526)" />
+	</defs>
+	<g inkscape:label="Layer 1"
+		 inkscape:groupmode="layer"
+		 id="layer1"
+		 sodipodi:insensitive="true"
+		 transform="translate(0.35277751,0.35277751)">
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870"
+					width="42.333332"
+					height="42.333332"
+					x="0"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-7"
+					width="42.333332"
+					height="42.333332"
+					x="42.333336"
+					y="1.2715658e-06" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-2"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-9"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="42.333336" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-4"
+					width="42.333332"
+					height="42.333332"
+					x="42.33334"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-0"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-8"
+					width="42.333332"
+					height="42.333332"
+					x="42.333332"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-05"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="84.666664" />
+	</g>
+	<g inkscape:groupmode="layer"
+		 id="layer2"
+		 inkscape:label="Layer 2"
+		 transform="translate(0.35277751,0.35277751)">
+		<g id="g2195"
+			 transform="matrix(0.26458333,0,0,0.26458333,49.060547,45.008812)">
+			<path d="M 7.2099199,118.8563 H 100.86094 L 85.10016,18.393866 54.035432,13.453091 22.970702,18.393866 Z"
+						style="fill:url(#linearGradient2173);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.498039"
+						id="path9965" />
+			<path d="m 42.425964,89.371627 c -5.937513,4.218766 -9.335947,6.875013 -10.195314,7.96875 -0.859382,1.093761 -2.26563,0.742199 -4.21875,-1.054688 -1.953127,-1.79686 -2.070314,-2.695296 -0.351562,-2.695312 1.718745,1.6e-5 3.515618,-0.351547 5.390625,-1.054688 1.87499,-0.703107 4.999987,-2.226543 9.375001,-4.570313 0.156231,-7.187471 0.156231,-12.460904 0,-15.820313 -0.156268,-3.359335 -0.703143,-5.859332 -1.640626,-7.500001 -0.937515,-1.640578 -0.625015,-2.265578 0.937501,-1.875 1.562481,0.390672 2.890605,0.976608 3.984375,1.757813 1.093727,0.781294 1.367165,1.601606 0.820312,2.460938 -0.546896,0.859416 -0.820334,4.7266 -0.820312,11.601563 -2.2e-5,6.718774 -0.195334,13.281268 -0.585938,19.687501 -0.390645,6.406253 -0.93752,10.507813 -1.640625,12.304693 -0.703143,1.79687 -1.484393,1.56249 -2.34375,-0.70313 -0.859391,-2.26562 -0.898453,-4.60937 -0.117187,-7.03125 0.781232,-2.42187 1.249982,-6.91405 1.40625,-13.476563 z M 68.91034,86.793501 c 4.218702,-0.624977 7.109324,-1.093726 8.671876,-1.40625 1.562445,-0.312476 2.929631,0.156274 4.101563,1.40625 1.171816,1.250022 0.976504,1.835959 -0.585938,1.757813 -1.562555,-0.0781 -5.625051,0.117208 -12.187501,0.585938 0.156206,7.812512 0.312455,12.656258 0.46875,14.531248 0.156205,1.87501 0.03902,3.59375 -0.351562,5.15625 -0.390669,1.5625 -1.210981,2.92969 -2.460938,4.10157 -1.250041,1.17187 -2.070353,1.05468 -2.460938,-0.35157 -0.390664,-1.40625 -1.679725,-2.73437 -3.867187,-3.98437 -2.187534,-1.25 -2.265659,-1.71875 -0.234375,-1.40625 2.031212,0.3125 3.515586,0.39062 4.453125,0.23437 0.937459,-0.15625 1.406209,-1.09374 1.40625,-2.8125 V 89.371627 c -7.343785,1.093768 -11.835968,1.835955 -13.476563,2.226562 -1.640652,0.390643 -3.164088,1.8e-5 -4.570313,-1.171875 -1.406272,-1.171855 -1.289085,-1.679667 0.351562,-1.523437 1.6406,0.15627 7.460907,-0.46873 17.460939,-1.875001 -0.156291,-2.187475 -0.585978,-3.789036 -1.289063,-4.804687 -0.703164,-1.015597 -0.468789,-1.406222 0.703126,-1.171875 1.171833,0.234403 2.304644,0.585965 3.398437,1.054687 1.093705,0.468777 1.48433,0.937526 1.171875,1.40625 -0.312545,0.468776 -0.546919,1.562524 -0.703125,3.28125 z M 56.254089,72.965375 c 1.406217,0.312537 2.734341,0.898473 3.984376,1.757813 1.249963,0.859409 1.5234,1.796908 0.820312,2.8125 -0.703161,1.015656 -1.601597,1.015656 -2.695312,0 -1.093783,-1.015592 -2.109407,-2.304653 -3.046876,-3.867187 -5.000026,2.812533 -6.250025,3.007845 -3.75,0.585937 2.499971,-2.421838 4.374969,-4.765585 5.625001,-7.03125 1.249966,-2.265581 1.874965,-4.023392 1.875,-5.273438 -3.5e-5,-1.249952 0.546839,-1.679639 1.640625,-1.289063 1.093712,0.390673 2.226524,0.937548 3.398437,1.640625 1.171835,0.703172 1.24996,1.367234 0.234375,1.992188 -1.015664,0.625044 -2.2266,1.953168 -3.632812,3.984375 4.218709,4.1e-5 6.874957,-0.351521 7.96875,-1.054687 1.093705,-0.703083 2.109329,-0.82027 3.046875,-0.351563 0.937452,0.468792 1.796826,1.054729 2.578126,1.757813 0.781199,0.703165 0.781199,1.289102 0,1.757812 -0.7813,0.468789 -3.203172,2.695349 -7.265626,6.679688 -4.062539,3.984404 -8.007847,6.523464 -11.835938,7.617188 -3.828152,1.093774 -4.765651,1.093774 -2.8125,0 1.953095,-1.093724 4.218718,-2.578098 6.796875,-4.453125 2.578088,-1.874969 4.921836,-4.140592 7.031251,-6.796875 2.109331,-2.656212 2.695268,-3.984336 1.757812,-3.984376 -0.781293,4e-5 -2.031291,0.117228 -3.75,0.351563 -1.718788,0.234414 -3.125037,0.0391 -4.21875,-0.585938 -1.093785,1.250039 -2.343784,2.500038 -3.750001,3.75 z m -24.140626,2.343751 c -0.468757,-0.937465 0.273429,-1.054653 2.226563,-0.351563 1.953113,0.703159 3.242174,1.718783 3.867187,3.046875 0.624986,1.328155 0.624986,2.539092 0,3.632813 -0.625013,1.093777 -1.3672,1.093777 -2.226562,0 -0.859386,-1.093721 -1.601573,-2.18747 -2.226563,-3.28125 -0.625009,-1.093718 -1.171883,-2.109342 -1.640625,-3.046875 z m 20.859376,19.453126 c -0.312528,-1.249984 0.507784,-1.484359 2.460938,-0.703125 1.953092,0.781264 3.085903,1.757826 3.398438,2.929688 0.312465,1.171886 0.273402,2.265635 -0.117188,3.281245 -0.390659,1.01564 -1.015658,1.09376 -1.875,0.23438 -0.859407,-0.859366 -1.601593,-1.757802 -2.226563,-2.695313 -0.625029,-0.937488 -1.171904,-1.953112 -1.640625,-3.046875 z"
+						transform="scale(0.9958263,1.0041912)"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:60px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11939" />
+			<path d="m 52.949406,39.777592 c 1.124976,0.750018 1.562475,1.343768 1.3125,1.78125 -0.250024,0.437517 -0.437524,1.406266 -0.5625,2.90625 2.124974,-0.374985 3.874972,-0.718735 5.25,-1.03125 1.374969,-0.312484 2.499968,-0.09373 3.375,0.65625 0.874967,0.750014 0.343717,1.218764 -1.59375,1.40625 -1.937529,0.187513 -4.281277,0.468763 -7.03125,0.84375 l -0.375,10.3125 c 4.749972,-0.374997 8.187468,-0.718747 10.3125,-1.03125 2.124964,-0.312496 3.812462,-0.0625 5.0625,0.75 1.24996,0.812502 1.562459,1.406251 0.9375,1.78125 -0.625039,0.375 -2.062538,0.46875 -4.3125,0.28125 -2.250033,-0.187499 -5.46878,-0.124999 -9.65625,0.1875 -4.187522,0.3125 -7.375019,0.625 -9.5625,0.9375 -2.187514,0.312499 -3.843763,0.593749 -4.96875,0.84375 -1.12501,0.249998 -2.312509,-0.09375 -3.5625,-1.03125 -1.250007,-0.937499 -0.968757,-1.374999 0.84375,-1.3125 1.81249,0.0625 6.031235,-0.343749 12.65625,-1.21875 v -10.125 c -2.375019,0.250012 -3.875017,0.437512 -4.5,0.5625 -0.625016,0.125012 -1.437515,-0.124988 -2.4375,-0.75 -1.000013,-0.624987 -0.718764,-0.968737 0.84375,-1.03125 1.562483,-0.06249 3.656231,-0.281236 6.28125,-0.65625 -2.2e-5,-2.499983 -0.187521,-4.124982 -0.5625,-4.875 -1.750019,0.125019 -3.187518,-0.06248 -4.3125,-0.5625 -1.125016,-0.49998 -0.937516,-0.87498 0.5625,-1.125 1.499981,-0.249979 3.24998,-0.562479 5.25,-0.9375 1.999976,-0.374978 3.593724,-0.718728 4.78125,-1.03125 1.187472,-0.312477 2.187471,-0.187477 3,0.375 0.812469,0.562522 0.624969,1.062521 -0.5625,1.5 -1.187528,0.43752 -3.343776,0.96877 -6.46875,1.59375 z m 1.3125,-14.0625 c 3.874972,3.50003 6.843719,6.031277 8.90625,7.59375 2.062465,1.562524 4.031213,2.812523 5.90625,3.75 1.874959,0.937521 3.906207,1.71877 6.09375,2.34375 2.187452,0.625019 2.624952,1.031269 1.3125,1.21875 -1.312545,0.187518 -3.125044,0.406268 -5.4375,0.65625 -2.312539,0.250017 -4.250037,-0.437482 -5.8125,-2.0625 -1.562534,-1.624979 -3.062532,-3.249977 -4.5,-4.875 -1.43753,-1.624974 -3.781277,-4.124971 -7.03125,-7.5 -3.375021,4.625028 -6.593767,8.437524 -9.65625,11.4375 -3.062511,3.000018 -6.156258,5.125016 -9.28125,6.375 -3.125002,1.250013 -3.250002,0.906263 -0.375,-1.03125 2.874992,-1.937483 5.74999,-4.49998 8.625,-7.6875 2.874984,-3.187474 5.062482,-5.937471 6.5625,-8.25 1.499979,-2.312466 2.218728,-4.031215 2.15625,-5.15625 -0.06252,-1.124962 0.437478,-1.437462 1.5,-0.9375 1.062475,0.500037 1.843725,0.968786 2.34375,1.40625 0.499974,0.437536 0.531224,0.843785 0.09375,1.21875 -0.437525,0.375034 -0.906275,0.875034 -1.40625,1.5 z m 4.875,24.375 c 0.62497,-0.62499 0.90622,-1.28124 0.84375,-1.96875 -0.06253,-0.687488 0.437469,-0.812488 1.5,-0.375 1.062467,0.437511 1.843716,0.96876 2.34375,1.59375 0.499965,0.625009 0.312466,1.031259 -0.5625,1.21875 -0.875033,0.187508 -1.937532,0.593758 -3.1875,1.21875 -1.250029,0.625007 -2.375028,1.156256 -3.375,1.59375 -1.000026,0.437505 -0.968776,0.156255 0.09375,-0.84375 1.062472,-0.999993 1.843721,-1.812492 2.34375,-2.4375 z m -15.75,0.75 c -0.750013,-1.249991 -0.468763,-1.68749 0.84375,-1.3125 1.312484,0.375009 2.343733,0.937509 3.09375,1.6875 0.749982,0.750007 0.906232,1.625006 0.46875,2.625 -0.437518,1.000004 -1.093767,1.062504 -1.96875,0.1875 -0.875015,-0.874994 -1.687514,-1.937493 -2.4375,-3.1875 z"
+						transform="scale(0.9958263,1.0041912)"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:48px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11929" />
+		</g>
+		<circle style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951"
+						cx="21.166666"
+						cy="63.5"
+						r="5.2916665" />
+		<circle style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-4"
+						cx="63.5"
+						cy="21.166666"
+						r="5.2916665" />
+		<circle style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-5"
+						cx="21.166666"
+						cy="21.166666"
+						r="5.2916665" />
+		<circle style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-9"
+						cx="105.83334"
+						cy="21.166666"
+						r="5.2916665" />
+		<circle style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-7"
+						cx="63.5"
+						cy="105.83334"
+						r="5.2916665" />
+		<circle style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-1"
+						cx="105.83334"
+						cy="63.5"
+						r="5.2916665" />
+	</g>
+</svg>
+
+@code {
+
+}

Shogi.UI/Pages/Home/VisualAids/KnightMoves.razor

@@ -0,0 +1,317 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg viewBox="0 0 127.70555 127.70555"
+		 version="1.1"
+		 id="svg5"
+		 sodipodi:docname="knight-moves.svg"
+		 inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+		 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+		 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+		 xmlns:xlink="http://www.w3.org/1999/xlink"
+		 xmlns="http://www.w3.org/2000/svg"
+		 xmlns:svg="http://www.w3.org/2000/svg">
+	<sodipodi:namedview id="namedview7"
+											pagecolor="#ffffff"
+											bordercolor="#666666"
+											borderopacity="1.0"
+											inkscape:pageshadow="2"
+											inkscape:pageopacity="0.0"
+											inkscape:pagecheckerboard="0"
+											inkscape:document-units="mm"
+											showgrid="true"
+											inkscape:zoom="0.74118967"
+											inkscape:cx="80.950939"
+											inkscape:cy="174.71911"
+											inkscape:window-width="1397"
+											inkscape:window-height="827"
+											inkscape:window-x="46"
+											inkscape:window-y="30"
+											inkscape:window-maximized="0"
+											inkscape:current-layer="layer2"
+											showguides="true"
+											inkscape:snap-bbox="true"
+											inkscape:object-paths="true"
+											inkscape:snap-intersection-paths="true"
+											inkscape:snap-smooth-nodes="true">
+		<inkscape:grid type="xygrid"
+									 id="grid9"
+									 originx="0.3527775"
+									 originy="0.3527775" />
+	</sodipodi:namedview>
+	<defs id="defs2">
+		<marker style="overflow:visible"
+						id="Arrow1Lend"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229" />
+		</marker>
+		<inkscape:path-effect effect="powerstroke"
+													id="path-effect1626"
+													is_visible="true"
+													lpeversion="1"
+													offset_points="1,4.99214"
+													not_jump="false"
+													sort_points="true"
+													interpolator_type="CubicBezierJohan"
+													interpolator_beta="0.2"
+													start_linecap_type="zerowidth"
+													linejoin_type="extrp_arc"
+													miter_limit="4"
+													scale_width="1"
+													end_linecap_type="zerowidth" />
+		<linearGradient id="linearGradient10936">
+			<stop style="stop-color:#fcf3e8;stop-opacity:1"
+						offset="0"
+						id="stop10938" />
+			<stop style="stop-color:#ba6100;stop-opacity:1"
+						offset="1"
+						id="stop10940" />
+		</linearGradient>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient10942"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-5"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-5"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4-3"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6-2" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48-0"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4-7" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5-7" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient2173"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="matrix(0.9299803,0,0,0.9377921,6.7492264,12.988526)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-9"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+	</defs>
+	<g inkscape:label="Layer 1"
+		 inkscape:groupmode="layer"
+		 id="layer1"
+		 sodipodi:insensitive="true"
+		 transform="translate(0.35277751,0.35277751)">
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870"
+					width="42.333332"
+					height="42.333332"
+					x="0"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-7"
+					width="42.333332"
+					height="42.333332"
+					x="42.333336"
+					y="1.2715658e-06" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-2"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-9"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="42.333336" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-4"
+					width="42.333332"
+					height="42.333332"
+					x="42.33334"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-0"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-8"
+					width="42.333332"
+					height="42.333332"
+					x="42.333332"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-05"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="84.666664" />
+	</g>
+	<g inkscape:groupmode="layer"
+		 id="layer2"
+		 inkscape:label="Layer 2"
+		 transform="translate(0.35277751,0.35277751)">
+		<circle style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-5"
+						cx="21.166666"
+						cy="21.166666"
+						r="5.2916665" />
+		<circle style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-9"
+						cx="105.83334"
+						cy="21.166666"
+						r="5.2916665" />
+		<g transform="matrix(0.23508705,0,0,0.23989895,50.025544,92.88837)"
+			 id="g12950">
+			<path d="M 3.6843532,112.82938 H 104.38651 L 87.439074,5.702835 54.035433,0.43431586 20.63179,5.702835 Z"
+						style="fill:url(#linearGradient12957-9);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.11413;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.498039"
+						id="path9965" />
+			<path d="m 64.64573,19.392877 c 1.468055,-0.266896 2.869414,-0.533822 4.204081,-0.800777 1.334588,-0.266896 2.335559,-0.133433 3.002916,0.400388 0.667271,0.533881 0.233517,1.101098 -1.301264,1.701652 -1.534863,0.600611 -3.503439,1.101096 -5.905733,1.501458 l -0.200194,4.804664 c 2.802682,-0.533829 4.771258,-0.934218 5.905733,-1.201166 1.134392,-0.266903 2.202094,-0.266903 3.20311,0 1.000926,0.266948 1.66824,0.700702 2.001943,1.301263 0.33361,0.600604 -0.03341,0.967627 -1.101069,1.101069 -1.067747,0.133483 -2.535838,0.300312 -4.404275,0.500486 -1.86852,0.200214 -4.204119,0.500505 -7.006803,0.900874 1.468057,1.067722 2.035274,1.93523 1.701652,2.602527 -0.333692,0.66733 -0.500521,2.135421 -0.500485,4.404275 1.334592,-0.266913 2.535757,-0.500473 3.603498,-0.70068 1.067663,-0.200181 2.001902,1.3e-5 2.802721,0.600583 0.800734,0.600595 0.567175,1.134446 -0.700681,1.601555 -1.267937,0.46713 -3.169781,0.900884 -5.705538,1.301263 l -0.200195,5.205053 c 2.936146,-0.266921 5.471938,-0.567212 7.607385,-0.900874 2.135362,-0.333652 3.770281,-0.133458 4.904762,0.600583 1.134386,0.734049 1.56814,1.301266 1.301263,1.701652 -0.266974,0.400391 -1.735065,0.533854 -4.404276,0.400388 -2.669299,-0.13346 -5.338555,-0.13346 -8.007773,0 -2.669292,0.133466 -5.338547,0.400391 -8.007774,0.800778 -2.669284,0.40039 -4.63786,0.734047 -5.905733,1.000971 -1.267919,0.266927 -2.469084,-0.03336 -3.603498,-0.900874 -1.134453,-0.867507 -0.700699,-1.301261 1.301263,-1.301263 2.001921,2e-6 6.139267,-0.400386 12.412049,-1.201166 V 39.8127 c -1.601586,0.133472 -2.936213,0.200203 -4.003887,0.200194 -1.067731,9e-6 -2.035336,-0.300282 -2.902818,-0.900874 -0.867533,-0.600573 -0.400414,-1.000961 1.401361,-1.201166 1.80172,-0.200184 3.636833,-0.500475 5.505344,-0.900875 -3.3e-5,-3.336557 -0.333689,-5.672155 -1.000972,-7.006802 -1.468122,0.266944 -3.036309,0.567236 -4.704567,0.900875 -1.668311,0.333675 -3.103036,0.166846 -4.304178,-0.500486 -1.201188,-0.667296 -1.101091,-1.067684 0.300291,-1.201166 1.401336,-0.133443 4.771271,-0.734026 10.109815,-1.801749 v -4.60447 c -1.334661,0.133489 -2.402363,0.233586 -3.20311,0.300291 -0.800806,0.06676 -1.634948,-0.100071 -2.502429,-0.500486 -0.867535,-0.400362 -0.800804,-0.767384 0.200194,-1.101068 1.000943,-0.33363 2.836056,-0.834115 5.505345,-1.501458 -3.3e-5,-1.734987 -0.0334,-3.403272 -0.100097,-5.004859 -0.06676,-1.601519 -0.400422,-3.036244 -1.000972,-4.304178 -0.600614,-1.2678582 -0.266958,-1.7016121 1.000972,-1.3012633 1.267863,0.4004277 2.335565,0.8675473 3.203109,1.4013603 0.867472,0.533889 1.0343,1.201203 0.500486,2.001944 -0.533888,0.800812 -0.867545,3.002948 -1.000972,6.606413 z m -19.218657,4.003887 c 2.001925,-0.533826 3.269821,-0.767386 3.803693,-0.70068 0.533831,0.06676 0.967585,0.266951 1.301263,0.600583 0.333635,0.333682 0.166807,0.700705 -0.500486,1.101069 -0.667335,0.400412 -2.202156,0.934263 -4.60447,1.601554 v 5.004859 c 1.067686,0.266943 2.001925,0.567234 2.802721,0.900874 0.800757,0.333674 1.234511,1.067719 1.301263,2.202138 0.06671,1.134448 -0.333677,1.468105 -1.201166,1.000972 -0.867527,-0.467106 -1.835132,-1.234517 -2.902818,-2.302235 v 11.010689 c -1.6e-5,2.268872 -0.233576,4.37091 -0.70068,6.306122 -0.467135,1.935208 -1.067718,2.00194 -1.801749,0.200194 -0.734059,-1.801749 -0.967619,-3.203108 -0.70068,-4.204081 0.266912,-1.000968 0.533838,-2.435693 0.800777,-4.304179 0.266912,-1.868471 0.400374,-5.805623 0.400389,-11.811466 -3.203121,5.872381 -6.272764,9.876263 -9.20894,12.011661 -2.936186,2.135411 -3.6035,2.302239 -2.001943,0.500486 1.601549,-1.801741 3.369931,-4.237437 5.30515,-7.307094 1.935201,-3.06963 3.369926,-5.738885 4.304178,-8.007774 -2.26888,0.667336 -3.937164,1.067724 -5.004859,1.201166 -1.067709,0.133484 -2.135412,-0.03335 -3.203109,-0.500485 -1.067707,-0.467099 -0.767416,-0.867488 0.900874,-1.201167 1.668279,-0.333634 4.637826,-1.234508 8.908649,-2.702623 -1.5e-5,-2.802693 -0.06675,-5.505314 -0.200195,-8.107871 -0.133477,-2.602491 -0.533865,-4.437604 -1.201166,-5.505345 -0.667326,-1.0676632 -0.367035,-1.4680515 0.900875,-1.2011656 1.267882,0.2669651 2.36895,0.6673534 3.303207,1.2011656 0.934222,0.53389 1.10105,1.267935 0.500485,2.202138 -0.6006,0.934276 -1.034354,4.53777 -1.301263,10.810495 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:51.2498px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.11413;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11929" />
+			<path d="m 56.68583,56.989092 c 1.177919,1.009721 1.682756,1.809047 1.514514,2.39798 -0.168316,0.589021 -0.336595,1.556626 -0.504838,2.902818 2.019314,-0.336517 3.491756,-0.631006 4.417332,-0.883466 0.925495,-0.252377 1.724821,-0.168237 2.39798,0.252419 0.673074,0.420739 0.925492,0.799367 0.757257,1.135885 -0.168323,0.336599 -1.177998,0.757297 -3.029028,1.262095 -1.851111,0.504877 -3.533902,0.925575 -5.048379,1.262095 -0.168315,1.009713 -0.252454,2.608364 -0.252419,4.79596 2.019314,-0.336525 3.575896,-0.631013 4.669751,-0.883466 1.093774,-0.252385 2.061379,-0.08411 2.902818,0.504838 0.841353,0.58901 0.420655,1.177987 -1.262095,1.766933 -1.682833,0.589008 -3.786322,1.051776 -6.310474,1.388304 -0.168314,3.029055 -0.252454,4.964265 -0.252419,5.805636 4.711781,-0.504813 7.951154,-1.09379 9.71813,-1.766933 1.766886,-0.67309 3.07105,-1.009648 3.912494,-1.009676 0.841347,2.8e-5 1.766882,0.210377 2.776609,0.631048 1.009623,0.420724 2.229647,1.051771 3.660075,1.893142 1.430317,0.841421 1.640666,2.019375 0.631047,3.533866 -1.00973,1.514533 -1.640777,3.912511 -1.893142,7.19394 -0.252473,3.281457 -0.71524,6.478761 -1.388305,9.591921 -0.673168,3.113169 -2.103541,5.763569 -4.291122,7.951199 -2.187677,2.18762 -3.53391,2.3559 -4.038703,0.50484 -0.504882,-1.85108 -1.766975,-3.70215 -3.786285,-5.55322 -2.01939,-1.85107 -2.06146,-2.482117 -0.126209,-1.893143 1.93517,0.588983 3.491752,1.009673 4.66975,1.262093 1.17791,0.25242 2.145515,-0.46276 2.902819,-2.14556 0.757208,-1.682787 1.430325,-4.417323 2.019351,-8.203616 0.588928,-3.786268 0.757207,-6.562874 0.504838,-8.329826 -0.252469,-1.76691 -0.841446,-2.734515 -1.766933,-2.902818 -0.925583,-0.168255 -2.355956,-0.168255 -4.291122,0 -1.935254,0.168303 -4.459441,0.504861 -7.572569,1.009676 -3.113201,0.50486 -8.371924,1.346256 -15.776185,2.524189 -0.841417,1.682812 -1.598673,1.851091 -2.271771,0.504838 -0.673135,-1.346213 -0.841414,-2.818656 -0.504838,-4.417331 0.336541,-1.598628 0.50482,-3.828327 0.504838,-6.689103 v -9.087083 c -1.8e-5,-3.197264 -0.210367,-5.342823 -0.631047,-6.436683 -0.420716,-1.093769 -0.378646,-1.682745 0.126209,-1.766933 0.50482,-0.08409 1.388285,0.04212 2.650399,0.378628 1.262073,0.336606 3.281423,0.336606 6.058055,0 2.77658,-0.33651 5.721465,-0.841348 8.834664,-1.514513 3.113129,-0.673068 5.384897,-1.177905 6.815312,-1.514514 1.430331,-0.336508 2.524145,-0.252368 3.281447,0.252419 0.75721,0.504888 0.79928,1.009725 0.126209,1.514513 -0.673162,0.504887 -2.229744,1.009724 -4.669751,1.514514 -2.440088,0.504885 -4.501508,0.925583 -6.184264,1.262095 z m -13.125786,1.262095 c -0.33658,5.048419 -0.50486,9.255398 -0.504838,12.620948 -2.2e-5,3.365615 -0.168301,6.647059 -0.504838,9.84434 2.187608,-0.168257 4.206958,-0.378606 6.058055,-0.631048 1.851044,-0.252395 3.533835,-0.546884 5.048379,-0.883466 0.168248,-1.851047 0.252387,-3.702117 0.252419,-5.553217 -1.177986,0.168308 -2.39801,0.294518 -3.660075,0.378628 -1.262122,0.08417 -2.440076,-0.08411 -3.533865,-0.504838 -1.09384,-0.420668 -0.631072,-0.799296 1.388304,-1.135885 l 5.805636,-1.262095 v -4.79596 c -1.682823,0.168316 -3.155266,0.210386 -4.417332,0.126209 -1.262121,-0.0841 -2.145586,-0.294451 -2.650399,-0.631047 -0.504862,-0.336521 0.168254,-0.673079 2.019352,-1.009676 1.851043,-0.33652 3.533835,-0.757218 5.048379,-1.262095 -3.2e-5,-2.355868 -0.08417,-4.375218 -0.252419,-6.058055 -3.029056,0.336604 -6.394639,0.589023 -10.096758,0.757257 z m -9.591921,29.533019 c 0.673104,1.851086 0.967593,3.533877 0.883466,5.048379 -0.08415,1.514523 -0.58899,3.071105 -1.514513,4.669751 -0.925547,1.598658 -1.851082,1.640727 -2.776609,0.126209 -0.925544,-1.514506 -0.967614,-2.81867 -0.12621,-3.912493 0.841388,-1.093805 1.472434,-2.818667 1.893143,-5.174589 0.420687,-2.355894 0.967594,-2.608312 1.640723,-0.757257 z m 26.503991,-3.786285 c 2.019311,1.009694 3.281405,2.145579 3.786285,3.407656 0.504795,1.26211 0.420655,2.397994 -0.252419,3.407656 -0.673159,1.009688 -1.430415,1.009688 -2.271771,0 -0.841435,-1.009662 -1.724901,-2.650384 -2.650399,-4.922169 -0.925573,-2.271752 -0.462805,-2.902798 1.388304,-1.893143 z M 42.04553,86.77453 c 1.514492,0.673133 2.482097,1.766947 2.902818,3.281447 0.420675,1.514525 0.168256,2.776618 -0.757257,3.786284 -0.925558,1.009684 -1.724883,0.673126 -2.39798,-1.009676 -0.673137,-1.682781 -1.135904,-3.323503 -1.388304,-4.92217 -0.252438,-1.598636 0.29447,-1.977264 1.640723,-1.135885 z m 9.087083,-1.009676 c 1.851041,0.673134 2.776576,1.935228 2.776608,3.786285 -3.2e-5,1.682805 -0.33659,2.56627 -1.009676,2.650399 -0.673147,0.08415 -1.346264,-0.462757 -2.019351,-1.640724 -0.673146,-1.177941 -1.220053,-2.482104 -1.640724,-3.912494 -0.420725,-1.430356 0.210322,-1.724844 1.893143,-0.883466 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:64.6193px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.11413;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11939" />
+		</g>
+	</g>
+</svg>
+
+@code {
+
+}

Shogi.UI/Pages/Home/VisualAids/LanceMoves.razor

@@ -0,0 +1,327 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg viewBox="0 0 127.70555 127.70555"
+		 version="1.1"
+		 id="svg5"
+		 sodipodi:docname="lance-moves.svg"
+		 inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+		 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+		 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+		 xmlns:xlink="http://www.w3.org/1999/xlink"
+		 xmlns="http://www.w3.org/2000/svg"
+		 xmlns:svg="http://www.w3.org/2000/svg">
+	<sodipodi:namedview id="namedview7"
+											pagecolor="#ffffff"
+											bordercolor="#666666"
+											borderopacity="1.0"
+											inkscape:pageshadow="2"
+											inkscape:pageopacity="0.0"
+											inkscape:pagecheckerboard="0"
+											inkscape:document-units="mm"
+											showgrid="true"
+											inkscape:zoom="0.74118967"
+											inkscape:cx="80.950939"
+											inkscape:cy="174.71911"
+											inkscape:window-width="1397"
+											inkscape:window-height="827"
+											inkscape:window-x="334"
+											inkscape:window-y="54"
+											inkscape:window-maximized="0"
+											inkscape:current-layer="layer2"
+											showguides="true"
+											inkscape:snap-bbox="true"
+											inkscape:object-paths="true"
+											inkscape:snap-intersection-paths="true"
+											inkscape:snap-smooth-nodes="true">
+		<inkscape:grid type="xygrid"
+									 id="grid9"
+									 originx="0.3527775"
+									 originy="0.3527775" />
+	</sodipodi:namedview>
+	<defs id="defs2">
+		<marker style="overflow:visible"
+						id="Arrow1Lend"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229" />
+		</marker>
+		<inkscape:path-effect effect="powerstroke"
+													id="path-effect1626"
+													is_visible="true"
+													lpeversion="1"
+													offset_points="1,4.99214"
+													not_jump="false"
+													sort_points="true"
+													interpolator_type="CubicBezierJohan"
+													interpolator_beta="0.2"
+													start_linecap_type="zerowidth"
+													linejoin_type="extrp_arc"
+													miter_limit="4"
+													scale_width="1"
+													end_linecap_type="zerowidth" />
+		<linearGradient id="linearGradient10936">
+			<stop style="stop-color:#fcf3e8;stop-opacity:1"
+						offset="0"
+						id="stop10938" />
+			<stop style="stop-color:#ba6100;stop-opacity:1"
+						offset="1"
+						id="stop10940" />
+		</linearGradient>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient10942"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-5"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-5"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4-3"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6-2" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48-0"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4-7" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5-7" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient2173"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="matrix(0.9299803,0,0,0.9377921,6.7492264,12.988526)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-9"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-2"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-2-3"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+	</defs>
+	<g inkscape:label="Layer 1"
+		 inkscape:groupmode="layer"
+		 id="layer1"
+		 sodipodi:insensitive="true"
+		 transform="translate(0.35277751,0.35277751)">
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870"
+					width="42.333332"
+					height="42.333332"
+					x="0"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-7"
+					width="42.333332"
+					height="42.333332"
+					x="42.333336"
+					y="1.2715658e-06" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-2"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-9"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="42.333336" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-4"
+					width="42.333332"
+					height="42.333332"
+					x="42.33334"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-0"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-8"
+					width="42.333332"
+					height="42.333332"
+					x="42.333332"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-05"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="84.666664" />
+	</g>
+	<g inkscape:groupmode="layer"
+		 id="layer2"
+		 inkscape:label="Layer 2"
+		 transform="translate(0.35277751,0.35277751)">
+		<g transform="matrix(0.21657278,0,0,0.23157759,52.439258,93.577716)"
+			 id="g12950">
+			<path d="M 3.6843532,112.89045 H 104.38651 L 87.439074,5.7639005 54.035433,0.49538136 20.63179,5.7639005 Z"
+						style="fill:url(#linearGradient12957-5);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.18144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.498039"
+						id="path9965" />
+			<path d="m 52.10636,14.301197 c 1.624457,0.541528 2.36901,1.116865 2.233663,1.726013 -0.1354,0.609213 -0.203086,1.252236 -0.20306,1.929072 3.519682,-0.676836 6.260993,-1.319859 8.223942,-1.929072 1.962879,-0.609148 3.722733,-0.406088 5.279567,0.60918 1.556754,1.015333 1.082947,1.59067 -1.421422,1.726013 -2.504446,0.135404 -6.328744,0.541524 -11.472906,1.218362 2.301321,2.166003 4.399608,3.85817 6.294869,5.076507 1.895194,1.218384 4.264228,2.369058 7.10711,3.452024 2.842801,1.083008 5.144148,1.861405 6.904049,2.335194 1.759807,0.473825 2.132084,0.812258 1.116832,1.015301 -1.015349,0.203078 -3.14748,0.338451 -6.396399,0.406121 -3.249003,0.0677 -5.313447,-0.37226 -6.193339,-1.319892 -0.879962,-0.947596 -2.199853,-2.301329 -3.959675,-4.061206 -1.759886,-1.759832 -2.91056,-2.978192 -3.452025,-3.655085 -0.541522,-0.676841 -1.286076,-1.421394 -2.233663,-2.233663 v 5.685688 c -2.6e-5,2.572117 -0.33846,4.602718 -1.015302,6.091808 2.030576,-0.406103 3.451997,-0.744537 4.264266,-1.015301 0.812211,-0.270729 1.692138,-0.270729 2.639784,0 0.947582,0.270764 1.962882,0.778414 3.045904,1.522952 1.082952,0.74457 1.353699,1.624497 0.812242,2.639784 -0.54153,1.015314 -0.812277,2.470577 -0.812242,4.365796 -3.5e-5,1.759863 0.101495,3.75662 0.304591,5.990278 0.203024,2.233664 -0.135409,4.061205 -1.015302,5.482628 -0.879961,1.421418 -1.522985,1.726008 -1.929072,0.913771 -0.406153,-0.812243 -0.87996,-1.861387 -1.421422,-3.147434 -0.541525,-1.286048 -1.387609,-1.996758 -2.538254,-2.132133 -1.150702,-0.135372 -2.470593,-0.135372 -3.959675,0 -1.489132,0.135375 -3.316673,0.270749 -5.482628,0.40612 -0.406139,3.384337 -1.049163,4.33195 -1.929073,2.842844 -0.879944,-1.489108 -1.184534,-2.741312 -0.913771,-3.756615 0.27073,-1.015298 0.338417,-3.012055 0.20306,-5.990278 -0.13539,-2.978206 -0.43998,-5.042651 -0.913771,-6.193339 -0.473822,-1.150659 -0.236919,-1.556779 0.710711,-1.218362 0.947597,0.33845 2.030585,0.43998 3.248964,0.304591 1.218341,-0.135358 2.910509,-0.406105 5.076508,-0.812241 -1.083012,-1.353718 -1.455289,-2.369018 -1.116832,-3.045905 0.33841,-0.676847 0.575313,-3.248942 0.710711,-7.71629 -3.113612,4.196602 -6.43026,7.41172 -9.949954,9.645363 -3.519722,2.233678 -6.32872,3.722786 -8.427002,4.467326 -2.098293,0.744567 -2.26751,0.57535 -0.50765,-0.50765 1.759848,-1.082974 3.485859,-2.233648 5.178037,-3.452025 1.692157,-1.218344 3.688914,-2.910511 5.990278,-5.076507 2.301331,-2.165953 4.128872,-4.26424 5.482628,-6.294869 -3.790477,0.676895 -6.227198,1.184545 -7.31017,1.522952 -1.083002,0.33846 -2.132146,0.304617 -3.147435,-0.10153 -1.015312,-0.406093 -1.658335,-0.812214 -1.929072,-1.218362 -0.270757,-0.406092 0.60917,-0.642995 2.639783,-0.710711 2.030589,-0.06766 5.956417,-0.642995 11.777497,-1.726012 -2.4e-5,-0.676837 -0.135398,-1.353704 -0.406121,-2.030603 -0.27077,-0.676834 -0.541517,-1.150641 -0.812241,-1.421422 -1.218383,0.270781 -2.233684,0.439997 -3.045904,0.507651 -0.81226,0.06772 -0.473827,-0.270714 1.015301,-1.015302 1.489087,-0.744519 3.045881,-1.692133 4.670387,-2.842844 1.624455,-1.150636 2.335165,-1.9967199 2.132133,-2.5382532 -0.203088,-0.5414538 -2.8e-5,-0.8798873 0.609181,-1.0153015 0.609152,-0.1353325 1.793669,0.2707876 3.553555,1.2183617 1.759822,0.947653 1.827509,1.658364 0.20306,2.132133 -1.624513,0.473844 -4.12892,1.455301 -7.513231,2.944374 z m -5.482627,25.585596 c 1.489088,-0.270738 3.012039,-0.676858 4.568856,-1.218362 1.556771,-0.541483 2.775131,-0.473796 3.655085,0.203061 0.8799,0.676876 0.338407,1.184527 -1.624482,1.522952 -1.96294,0.338442 -3.28283,0.575345 -3.959676,0.710711 -0.676888,0.135381 -1.556815,7e-6 -2.639783,-0.406121 0.135354,1.895236 0.203041,3.65509 0.20306,5.279567 3.519689,-0.406117 5.922567,-0.74455 7.20864,-1.015301 1.286021,-0.270743 2.335165,-0.203056 3.147434,0.20306 0.812211,0.406124 1.319862,0.812244 1.522953,1.218362 0.203029,0.406123 0.439932,0.338436 0.710711,-0.20306 0.270715,-0.541491 0.338401,-2.639779 0.20306,-6.294869 -0.135405,-3.655073 -0.439996,-5.719517 -0.913771,-6.193339 -0.473838,-0.473791 -1.590669,-0.575321 -3.350495,-0.30459 -1.759882,0.270762 -4.738096,0.609196 -8.934653,1.015301 0.135355,1.895242 0.203042,3.722783 0.203061,5.482628 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:51.9834px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.18144;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11929" />
+			<path d="m 56.776745,59.569953 c 3.987328,-0.996797 6.604034,-1.619822 7.850126,-1.869078 1.246009,-0.249164 2.284384,-0.124559 3.115129,0.373816 0.830656,0.498465 0.913726,0.95535 0.24921,1.370657 -0.664605,0.415393 -1.744515,0.830744 -3.239734,1.246051 -1.495302,0.415393 -4.153543,0.955348 -7.974731,1.619867 l -0.249211,4.984207 c 4.984169,-0.664524 7.89162,-1.162944 8.722362,-1.495262 0.830659,-0.332242 1.827499,-0.249172 2.990525,0.249211 1.162935,0.498457 2.284381,1.121482 3.364339,1.869077 1.079862,0.747666 1.827493,1.453761 2.242893,2.118288 0.4153,0.664594 -0.08312,1.495294 -1.495262,2.492104 -1.412239,0.996871 -2.65829,2.492131 -3.738155,4.485786 -1.079956,1.993707 -2.284471,3.821247 -3.61355,5.482627 -1.329162,1.661422 -2.076792,1.578352 -2.242893,-0.24921 l -6.230259,0.747631 v 4.236576 c 4.319609,-0.332264 7.64241,-0.581475 9.968414,-0.747631 2.325918,-0.166124 4.444204,-0.373799 6.354864,-0.623026 1.910561,-0.249193 3.696567,-0.04152 5.358022,0.623026 1.661346,0.664577 2.658186,1.453742 2.990524,2.367498 0.332223,0.913785 -0.166198,1.37067 -1.495262,1.370657 -1.163036,1.3e-5 -2.492157,-0.166127 -3.987365,-0.498421 -1.495313,-0.332266 -4.070484,-0.498407 -7.725521,-0.49842 -3.488986,1.3e-5 -7.310207,0.166154 -11.463676,0.49842 v 10.716046 c -3.3e-5,2.15982 -0.124638,4.11197 -0.373815,5.85644 -0.249243,1.74447 -0.539988,2.86591 -0.872236,3.36434 -0.332312,0.49842 -0.623057,0.20767 -0.872237,-0.87223 -0.249241,-1.07992 -0.415381,-2.65825 -0.49842,-4.735 -0.0831,-2.07675 -0.124636,-6.687139 -0.124605,-13.831175 -4.984233,0.498433 -9.054664,0.955318 -12.211307,1.370657 -3.15668,0.415362 -5.607245,0.789177 -7.351705,1.121446 -1.744482,0.332291 -3.032067,0.332291 -3.862761,0 -0.830707,-0.332269 -1.702942,-0.91376 -2.616708,-1.744472 -0.913775,-0.830688 -0.830705,-1.121433 0.24921,-0.872236 1.079906,0.249223 2.948982,0.249223 5.607233,0 2.658231,-0.249197 5.191867,-0.498407 7.600915,-0.747631 2.409013,-0.249197 6.60405,-0.789152 12.585123,-1.619868 v -4.485786 c -1.661431,0.3323 -4.153532,0.74765 -7.476311,1.246052 -0.830723,1.661419 -1.619888,1.287604 -2.367498,-1.121447 -0.747651,-2.409011 -1.329141,-4.361156 -1.744472,-5.856443 -0.415369,-1.495235 -0.913789,-2.824355 -1.495262,-3.987365 -0.581508,-1.162951 -1.287603,-2.118256 -2.118288,-2.865919 -0.830716,-0.747598 -0.789181,-1.162948 0.124605,-1.246052 0.913755,-0.08304 2.28441,-0.124571 4.111971,-0.124605 1.993661,3.4e-5 5.648742,-0.498386 10.965255,-1.495262 v -4.984207 c -3.322832,0.332321 -5.814933,0.207716 -7.476311,-0.373815 -1.661423,-0.58145 -1.578353,-0.9968 0.249211,-1.246052 1.827517,-0.249168 4.236548,-0.622983 7.2271,-1.121447 -0.166171,-3.821178 -0.747661,-6.437884 -1.744473,-7.850125 -0.996869,-1.41214 -0.124633,-1.785955 2.616709,-1.121447 2.74128,0.664612 3.82119,1.536848 3.239734,2.616709 -0.581524,1.07996 -0.95534,3.032105 -1.121446,5.856443 z M 44.316228,71.532049 c 0.830679,4.485813 1.412169,8.140895 1.744472,10.965255 1.162958,-0.166119 3.738129,-0.581469 7.725521,-1.246051 v -4.485787 c -0.830731,0.166167 -1.910641,0.166167 -3.239735,0 -1.329147,-0.166113 -2.159848,-0.415323 -2.492103,-0.747631 -0.332305,-0.332253 -2.5e-5,-0.581463 0.996841,-0.747631 0.996815,-0.166112 2.575145,-0.498392 4.734997,-0.996841 v -4.485786 z m 12.211306,1.993683 c 2.159788,-0.332251 3.696584,-0.332251 4.610392,0 0.913732,0.33231 0.996802,0.789195 0.24921,1.370657 -0.747668,0.581518 -2.367534,1.038403 -4.859602,1.370657 v 4.734996 c 1.827508,-0.166118 3.987329,-0.415328 6.479469,-0.747631 0.830661,-1.661378 1.578291,-3.738128 2.242893,-6.230258 0.664519,-2.492072 0.955264,-4.070403 0.872237,-4.734997 -0.08311,-0.664526 -0.955348,-0.913736 -2.616709,-0.747631 -1.661441,0.166175 -3.987402,0.415385 -6.97789,0.747631 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:63.7978px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.18144;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11939" />
+		</g>
+		<path style="fill:none;stroke:#000000;stroke-width:0.965;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1Lend)"
+					d="m 63.5,89.958333 -10e-7,-84.6666664"
+					id="path15363"
+					sodipodi:nodetypes="cc" />
+	</g>
+</svg>
+
+@code {
+
+}

Shogi.UI/Pages/Home/VisualAids/PawnMoves.razor

@@ -0,0 +1,346 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg viewBox="0 0 127.70555 127.70555"
+		 version="1.1"
+		 id="svg5"
+		 sodipodi:docname="pawn-moves.svg"
+		 inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+		 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+		 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+		 xmlns:xlink="http://www.w3.org/1999/xlink"
+		 xmlns="http://www.w3.org/2000/svg"
+		 xmlns:svg="http://www.w3.org/2000/svg">
+	<sodipodi:namedview id="namedview7"
+											pagecolor="#ffffff"
+											bordercolor="#666666"
+											borderopacity="1.0"
+											inkscape:pageshadow="2"
+											inkscape:pageopacity="0.0"
+											inkscape:pagecheckerboard="0"
+											inkscape:document-units="mm"
+											showgrid="true"
+											inkscape:zoom="0.74118967"
+											inkscape:cx="175.3937"
+											inkscape:cy="178.76666"
+											inkscape:window-width="1397"
+											inkscape:window-height="827"
+											inkscape:window-x="334"
+											inkscape:window-y="54"
+											inkscape:window-maximized="0"
+											inkscape:current-layer="layer2"
+											showguides="true"
+											inkscape:snap-bbox="true"
+											inkscape:object-paths="true"
+											inkscape:snap-intersection-paths="true"
+											inkscape:snap-smooth-nodes="true">
+		<inkscape:grid type="xygrid"
+									 id="grid9"
+									 originx="0.3527775"
+									 originy="0.3527775" />
+	</sodipodi:namedview>
+	<defs id="defs2">
+		<marker style="overflow:visible"
+						id="Arrow1Lend"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229" />
+		</marker>
+		<inkscape:path-effect effect="powerstroke"
+													id="path-effect1626"
+													is_visible="true"
+													lpeversion="1"
+													offset_points="1,4.99214"
+													not_jump="false"
+													sort_points="true"
+													interpolator_type="CubicBezierJohan"
+													interpolator_beta="0.2"
+													start_linecap_type="zerowidth"
+													linejoin_type="extrp_arc"
+													miter_limit="4"
+													scale_width="1"
+													end_linecap_type="zerowidth" />
+		<linearGradient id="linearGradient10936">
+			<stop style="stop-color:#fcf3e8;stop-opacity:1"
+						offset="0"
+						id="stop10938" />
+			<stop style="stop-color:#ba6100;stop-opacity:1"
+						offset="1"
+						id="stop10940" />
+		</linearGradient>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient10942"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-5"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-5"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4-3"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6-2" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48-0"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4-7" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5-7" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient2173"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="matrix(0.9299803,0,0,0.9377921,6.7492264,12.988526)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-9"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-2"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-2-3"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-4"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-7"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+	</defs>
+	<g inkscape:label="Layer 1"
+		 inkscape:groupmode="layer"
+		 id="layer1"
+		 sodipodi:insensitive="true"
+		 transform="translate(0.35277751,0.35277751)">
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870"
+					width="42.333332"
+					height="42.333332"
+					x="0"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-7"
+					width="42.333332"
+					height="42.333332"
+					x="42.333336"
+					y="1.2715658e-06" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-2"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-9"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="42.333336" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-4"
+					width="42.333332"
+					height="42.333332"
+					x="42.33334"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-0"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-8"
+					width="42.333332"
+					height="42.333332"
+					x="42.333332"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-05"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="84.666664" />
+	</g>
+	<g inkscape:groupmode="layer"
+		 id="layer2"
+		 inkscape:label="Layer 2"
+		 transform="translate(0.35277751,0.35277751)">
+		<circle style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-4"
+						cx="63.5"
+						cy="21.166666"
+						r="5.2916665" />
+		<g transform="matrix(0.2073493,0,0,0.22331386,52.606512,49.80024)"
+			 id="g12950">
+			<path d="M 3.6843532,112.89045 H 104.38651 L 87.439074,5.7639005 54.035433,0.49538136 20.63179,5.7639005 Z"
+						style="fill:url(#linearGradient12957-7);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.22957;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.498039"
+						id="path9965" />
+			<path d="m 58.579078,15.280221 c 2.25418,-0.422629 4.015281,-0.915737 5.28331,-1.479327 1.267957,-0.563515 2.465506,-0.493071 3.592651,0.211332 1.127065,0.704478 0.774845,1.444141 -1.056662,2.218991 -1.831584,0.774919 -4.438014,1.091917 -7.819299,0.950995 l -0.211333,6.551305 c 4.50839,-0.704414 7.924927,-1.267966 10.249622,-1.69066 2.324613,-0.422635 3.909605,-0.281747 4.754979,0.422665 0.845283,0.704469 1.30317,1.268022 1.37366,1.690659 0.0704,0.422692 -0.951041,0.634024 -3.06432,0.633998 -2.113365,2.6e-5 -4.473241,0.140914 -7.079635,0.422664 -2.606466,0.281802 -5.882115,0.704467 -9.826956,1.267995 0.98619,0.281801 1.831519,0.704465 2.535989,1.267994 0.704411,0.563576 0.845299,1.268016 0.422664,2.113324 -0.422693,0.84535 -0.563582,2.324675 -0.422664,4.43798 0.140859,2.113339 0.140859,3.87444 0,5.28331 -0.140918,1.408893 -0.387472,2.359888 -0.739664,2.852988 -0.352248,0.493117 -0.880579,0.246562 -1.584993,-0.739664 -0.704467,-0.986207 -0.915799,-2.07809 -0.633997,-3.275652 0.28175,-1.197536 0.387416,-2.852972 0.316999,-4.966311 -0.07047,-2.113304 -0.246581,-3.59263 -0.528331,-4.43798 -0.281802,-0.845307 -0.563579,-1.620192 -0.84533,-2.324657 -7.467095,1.549794 -11.693739,2.465567 -12.679944,2.747321 -0.986229,0.281798 -2.148556,-0.0352 -3.486984,-0.950995 -1.338446,-0.915751 -1.303224,-1.373637 0.105666,-1.373661 1.54976,2.4e-5 4.578855,-0.422641 9.087293,-1.267994 -0.281794,-4.508395 -0.774903,-7.18527 -1.479327,-8.030631 -0.704457,-0.845296 -0.915789,-1.408849 -0.633997,-1.69066 0.28176,-0.281741 1.232755,-0.246519 2.852987,0.105667 1.620195,0.352255 2.289414,1.091917 2.007658,2.21899 -0.281797,1.127137 -0.352241,3.451791 -0.211332,6.973969 2.113301,-0.422639 4.437955,-0.845303 6.973969,-1.267995 -2.8e-5,-5.071945 -0.105694,-8.770258 -0.316999,-11.09495 -0.211359,-2.324616 -0.598802,-3.9096078 -1.162328,-4.7549793 -0.563579,-0.845286 -0.42269,-1.2327284 0.422665,-1.1623281 0.845302,0.070488 1.901963,0.3522641 3.169986,0.8453295 1.267963,0.4931515 1.690628,1.056704 1.267994,1.6906592 -0.422695,0.6340377 -0.634027,2.5008057 -0.633997,5.6003087 z m 8.241963,18.597251 c 1.127067,0.986234 1.303177,1.690674 0.528331,2.113324 -0.774923,0.422679 -1.76114,1.514562 -2.958653,3.275652 -1.197585,1.761113 -2.958687,3.768769 -5.28331,6.022973 -2.324685,2.254216 -5.494668,4.40276 -9.509958,6.445638 -4.015333,2.042877 -7.924978,3.31087 -11.728948,3.803983 -3.803989,0.493104 -3.48699,-4e-6 0.950996,-1.479327 4.437965,-1.479328 8.453277,-3.41654 12.045946,-5.81164 3.592625,-2.395096 6.551276,-5.177636 8.875961,-8.34763 2.324623,-3.169972 3.416506,-5.353738 3.275652,-6.551304 -0.140923,-1.197532 0.211298,-1.655418 1.056662,-1.373661 0.845293,0.281795 1.761066,0.915792 2.747321,1.901992 z m 2.958654,-5.705975 c 2.254168,0.563575 3.83916,1.268016 4.754979,2.113324 0.915726,0.845349 1.267947,2.007676 1.056662,3.486984 -0.21138,1.479343 -0.986264,1.655453 -2.324657,0.528331 -1.338482,-1.127088 -2.641697,-2.148527 -3.909649,-3.064319 -1.268034,-0.915753 -2.324695,-1.761082 -3.169986,-2.535989 -0.845366,-0.774862 -1.021477,-1.232749 -0.528331,-1.373661 0.493071,-0.140864 1.86673,0.140912 4.120982,0.84533 z m -23.880561,5.28331 c 0.704423,-1.408864 1.232754,-2.148527 1.584993,-2.21899 0.352201,-0.07043 0.493089,0.951014 0.422665,3.064319 -0.07046,2.113339 -0.88057,4.261883 -2.430323,6.445638 -1.549786,2.183777 -2.500781,2.430331 -2.852987,0.739664 -0.352235,-1.690648 -0.03524,-3.134751 0.950996,-4.332314 0.986201,-1.197535 1.761086,-2.430307 2.324656,-3.698317 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:54.1011px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.22957;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11929" />
+			<path d="m 47.416884,73.710501 c 3.496562,-0.499483 6.45201,-0.998995 8.866354,-1.498539 2.414276,-0.499481 4.537204,-0.998994 6.36879,-1.498539 1.831505,-0.499479 3.330042,-0.91574 4.495616,-1.248782 1.165484,-0.332974 2.455891,-0.124844 3.871225,0.624391 1.415237,0.749302 1.623367,1.415319 0.624391,1.998052 -0.999074,0.582796 -2.955498,1.207186 -5.869277,1.873173 -2.913865,0.666046 -4.953541,0.999054 -6.119033,0.999026 2.497525,0.999053 3.538176,1.956452 3.121956,2.872199 -0.416301,0.915799 -0.874187,3.538239 -1.373661,7.867329 6.160615,-0.665999 10.19834,-1.123886 12.113189,-1.373661 1.914746,-0.249737 3.621413,0.166523 5.120007,1.248783 1.498481,1.082294 2.081245,1.914815 1.748295,2.497564 -0.333066,0.58278 -1.831603,0.79091 -4.495616,0.624391 -2.66412,-0.166489 -5.411438,-0.291367 -8.241963,-0.374634 -2.830616,-0.08324 -7.367853,0.208145 -13.611727,0.874147 -6.243937,0.666031 -10.573044,1.207169 -12.987336,1.623417 -2.414328,0.416273 -4.329126,0.832533 -5.744398,1.248782 -1.415298,0.416272 -2.664079,0.416272 -3.746347,0 -1.082286,-0.416249 -2.081311,-1.040639 -2.997077,-1.873173 -0.915779,-0.832508 -0.374641,-1.248768 1.623417,-1.248782 2.164546,1.4e-5 6.826661,-0.499498 13.986361,-1.498539 -2.2e-5,-6.993158 -0.166526,-12.404542 -0.499513,-16.23417 -0.333029,-3.829563 -0.790916,-6.368751 -1.37366,-7.617571 -0.582785,-1.248742 -0.707663,-1.914758 -0.374635,-1.998052 0.332989,-0.08321 1.040631,4.1e-5 2.12293,0.249756 1.082255,0.249798 2.039654,0.582806 2.872199,0.999026 0.832496,0.416301 2.705668,-0.08321 5.61952,-1.498539 2.913793,-1.415243 4.911842,-2.622398 5.994155,-3.621468 1.082241,-0.99898 1.665005,-1.998004 1.748295,-2.997078 0.08321,-0.998976 1.040613,-1.082228 2.8722,-0.249756 1.831504,0.832569 3.24679,1.789968 4.245859,2.872199 0.99898,1.082323 0.499468,1.831591 -1.498538,2.247808 -1.998093,0.416304 -4.454029,1.123947 -7.367816,2.12293 -2.913858,0.999066 -6.618575,2.164595 -11.114162,3.49659 z m 0,13.237092 c 2.997049,-0.332992 6.66014,-0.666 10.989284,-0.999026 0.499476,-4.995107 0.416224,-8.574946 -0.249756,-10.739527 -2.497598,0.166532 -4.537274,0.333036 -6.119034,0.499513 -1.581819,0.166531 -3.121982,0.08328 -4.620494,-0.249757 z m 27.47321,16.733687 c -0.499565,2.83057 -1.998102,2.70569 -4.495616,-0.37464 -2.49761,-3.08033 -4.91192,-5.952522 -7.242937,-8.616597 -2.331099,-2.664057 -2.830611,-3.78796 -1.498539,-3.371712 1.331994,0.416272 2.830531,0.915785 4.495616,1.498539 1.664998,0.582775 3.663047,1.831556 5.994155,3.746347 2.331008,1.914804 3.246781,4.287483 2.747321,7.118063 z M 45.918345,92.192479 c 0.332985,-1.498527 1.54014,-1.290396 3.621469,0.624391 2.081274,1.914808 2.580787,3.080337 1.498539,3.49659 -1.082306,0.416267 -2.081331,0.957406 -2.997078,1.623417 -0.915798,0.666022 -2.622466,1.789925 -5.120007,3.371713 -2.497583,1.58179 -5.286527,2.91382 -8.366842,3.9961 -3.080338,1.08228 -3.121964,0.66602 -0.124878,-1.24878 2.997063,-1.9148 5.619503,-3.9961 7.867329,-6.243911 2.247786,-2.247801 3.454941,-4.120972 3.621468,-5.61952 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:63.9377px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.22957;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11939" />
+		</g>
+	</g>
+</svg>
+
+
+
+@code {
+
+}

Shogi.UI/Pages/Home/VisualAids/PieceMovesVisualAid.razor

@@ -0,0 +1,51 @@
+
+<section>
+	<div class="moves">
+		<h5>Bishop</h5>
+		<BishopMoves />
+	</div>
+
+	<div class="moves">
+		<h5>Rook</h5>
+		<RookMoves />
+	</div>
+</section>
+
+<section>
+	<div class="moves">
+		<h5>Pawn</h5>
+		<PawnMoves />
+	</div>
+
+	<div class="moves">
+		<h5>Lance</h5>
+		<LanceMoves />
+	</div>
+
+	<div class="moves">
+		<h5>Knight</h5>
+		<KnightMoves />
+	</div>
+</section>
+
+<section>
+	<div class="moves">
+		<h5>Silver General</h5>
+		<SilverMoves />
+	</div>
+
+	<div class="moves">
+		<h5>Gold General</h5>
+		<GoldGeneralMoves />
+	</div>
+
+	<div class="moves">
+		<h5>King</h5>
+		<KingMoves />
+	</div>
+</section>
+
+
+@code {
+
+}

Shogi.UI/Pages/Home/VisualAids/PieceMovesVisualAid.razor.css

@@ -0,0 +1,14 @@
+section {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+}
+
+section:not(:last-of-type){
+	margin-bottom: 2rem;
+}
+
+.moves {
+	width: 12rem;
+	text-align: center;
+}

Shogi.UI/Pages/Home/VisualAids/PromotedKnightMoves.razor

@@ -0,0 +1,350 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg viewBox="0 0 127.70555 127.70555"
+		 version="1.1"
+		 id="svg5"
+		 sodipodi:docname="promotedknight-moves.svg"
+		 inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+		 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+		 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+		 xmlns:xlink="http://www.w3.org/1999/xlink"
+		 xmlns="http://www.w3.org/2000/svg"
+		 xmlns:svg="http://www.w3.org/2000/svg">
+	<sodipodi:namedview id="namedview7"
+											pagecolor="#ffffff"
+											bordercolor="#666666"
+											borderopacity="1.0"
+											inkscape:pageshadow="2"
+											inkscape:pageopacity="0.0"
+											inkscape:pagecheckerboard="0"
+											inkscape:document-units="mm"
+											showgrid="true"
+											inkscape:zoom="0.74118967"
+											inkscape:cx="80.950939"
+											inkscape:cy="174.71911"
+											inkscape:window-width="1397"
+											inkscape:window-height="827"
+											inkscape:window-x="334"
+											inkscape:window-y="54"
+											inkscape:window-maximized="0"
+											inkscape:current-layer="layer2"
+											showguides="true"
+											inkscape:snap-bbox="true"
+											inkscape:object-paths="true"
+											inkscape:snap-intersection-paths="true"
+											inkscape:snap-smooth-nodes="true">
+		<inkscape:grid type="xygrid"
+									 id="grid9"
+									 originx="0.3527775"
+									 originy="0.3527775" />
+	</sodipodi:namedview>
+	<defs id="defs2">
+		<marker style="overflow:visible"
+						id="Arrow1Lend"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229" />
+		</marker>
+		<inkscape:path-effect effect="powerstroke"
+													id="path-effect1626"
+													is_visible="true"
+													lpeversion="1"
+													offset_points="1,4.99214"
+													not_jump="false"
+													sort_points="true"
+													interpolator_type="CubicBezierJohan"
+													interpolator_beta="0.2"
+													start_linecap_type="zerowidth"
+													linejoin_type="extrp_arc"
+													miter_limit="4"
+													scale_width="1"
+													end_linecap_type="zerowidth" />
+		<linearGradient id="linearGradient10936">
+			<stop style="stop-color:#fcf3e8;stop-opacity:1"
+						offset="0"
+						id="stop10938" />
+			<stop style="stop-color:#ba6100;stop-opacity:1"
+						offset="1"
+						id="stop10940" />
+		</linearGradient>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient10942"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-5"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-5"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4-3"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6-2" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48-0"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4-7" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5-7" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient2173"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="matrix(0.9299803,0,0,0.9377921,6.7492264,12.988526)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-9"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-2"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-2-3"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+	</defs>
+	<g inkscape:label="Layer 1"
+		 inkscape:groupmode="layer"
+		 id="layer1"
+		 sodipodi:insensitive="true"
+		 transform="translate(0.35277751,0.35277751)">
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870"
+					width="42.333332"
+					height="42.333332"
+					x="0"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-7"
+					width="42.333332"
+					height="42.333332"
+					x="42.333336"
+					y="1.2715658e-06" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-2"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-9"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="42.333336" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-4"
+					width="42.333332"
+					height="42.333332"
+					x="42.33334"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-0"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-8"
+					width="42.333332"
+					height="42.333332"
+					x="42.333332"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-05"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="84.666664" />
+	</g>
+	<g inkscape:groupmode="layer"
+		 id="layer2"
+		 inkscape:label="Layer 2"
+		 transform="translate(0.35277751,0.35277751)">
+		<g transform="matrix(0.23508705,0,0,0.23989895,51.298294,48.725676)"
+			 id="g12950-1">
+			<path d="M 3.6843532,112.82938 H 104.38651 L 87.439074,5.702835 54.035433,0.43431586 20.63179,5.702835 Z"
+						style="fill:url(#linearGradient12957-2-3);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.11413;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.498039"
+						id="path9965-7" />
+			<path d="m 53.730787,31.549461 c 7.311399,7.717685 13.404265,13.658228 18.278615,17.821649 4.874234,4.163495 9.443883,6.905285 13.70896,8.225376 4.264935,1.32015 4.924995,2.23408 1.980183,2.741792 -2.944958,0.507766 -6.042164,0.710861 -9.291629,0.609287 -3.249592,-0.101521 -5.635964,-1.320094 -7.159123,-3.655722 -1.523274,-2.335569 -4.011194,-5.788193 -7.463768,-10.357882 -3.452673,-4.569609 -7.20994,-9.088484 -11.271812,-13.556639 -2.843375,5.280537 -5.686712,9.850186 -8.53002,13.708961 -2.843367,3.858855 -6.29599,7.616121 -10.357881,11.271812 -4.06193,3.655748 -8.022292,6.397537 -11.8811,8.225376 -3.858822,1.82788 -4.112691,1.421689 -0.761609,-1.218574 3.35107,-2.64022 7.006789,-5.991296 10.967169,-10.053238 3.960345,-4.061878 7.869933,-9.393135 11.728777,-15.993787 3.858786,-6.600557 5.585098,-10.865562 5.178941,-12.79503 -0.406225,-1.929347 0.152287,-2.640181 1.67554,-2.132505 1.52318,0.507801 2.894075,1.218636 4.112688,2.132505 1.218533,0.91399 1.523176,1.624824 0.913931,2.132505 -0.609328,0.507797 -1.218615,1.472501 -1.827862,2.894114 z m 11.271812,35.338654 c 1.218523,1.015498 1.269297,1.82788 0.152322,2.437149 -1.117076,0.609304 -2.132553,1.827877 -3.046436,3.655722 -0.913977,1.827874 -2.38642,5.026628 -4.417331,9.596273 -2.030999,4.569653 -3.757311,7.717634 -5.178941,9.443951 -1.421707,1.726307 -2.335637,1.320115 -2.741792,-1.218575 -0.406227,-2.538697 0.304608,-4.92507 2.132505,-7.159124 1.827822,-2.234047 3.452586,-5.382027 4.874297,-9.44395 1.421626,-4.061898 1.777043,-6.245174 1.066252,-6.549837 -0.710877,-0.304624 -3.300345,-0.101528 -7.768411,0.609287 -4.468137,0.710853 -7.565343,1.421687 -9.291629,2.132505 -1.726338,0.710851 -3.706519,0.253886 -5.940549,-1.370896 -2.234071,-1.624746 -1.980202,-2.386354 0.761609,-2.284827 2.741768,0.101568 6.549809,-0.203075 11.424134,-0.91393 4.874259,-0.710814 8.174561,-1.523196 9.900916,-2.437149 1.726269,-0.913906 3.249485,-0.863132 4.569653,0.152322 1.320074,1.015501 2.487873,2.132526 3.503401,3.351079 z M 47.637916,53.483798 c -1.827893,-1.827826 -1.726345,-2.741756 0.304643,-2.741792 2.234017,3.6e-5 4.163425,0.253905 5.788228,0.761609 1.624725,0.507774 2.74175,1.472478 3.35108,2.894114 0.609243,1.421701 0.761565,2.691048 0.456965,3.808044 -0.304687,1.117054 -1.574033,1.015507 -3.808045,-0.304643 -2.23409,-1.320092 -4.265045,-2.792534 -6.092871,-4.417332 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:77.9888px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#de0000;fill-opacity:1;stroke:#000000;stroke-width:1.11413;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11939-0" />
+		</g>
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951"
+						cx="20.012436"
+						cy="60.674435"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-4"
+						cx="62.345772"
+						cy="18.341099"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-5"
+						cx="20.012436"
+						cy="18.341099"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-9"
+						cx="104.6791"
+						cy="18.341099"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-7"
+						cx="62.345772"
+						cy="103.00778"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-1"
+						cx="104.6791"
+						cy="60.674435"
+						r="5.2916665" />
+	</g>
+</svg>
+
+@code {
+
+}

Shogi.UI/Pages/Home/VisualAids/PromotedLanceMoves.razor

@@ -0,0 +1,351 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg viewBox="0 0 127.70555 127.70555"
+		 version="1.1"
+		 id="svg5"
+		 sodipodi:docname="promotedlance-moves.svg"
+		 inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+		 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+		 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+		 xmlns:xlink="http://www.w3.org/1999/xlink"
+		 xmlns="http://www.w3.org/2000/svg"
+		 xmlns:svg="http://www.w3.org/2000/svg">
+	<sodipodi:namedview id="namedview7"
+											pagecolor="#ffffff"
+											bordercolor="#666666"
+											borderopacity="1.0"
+											inkscape:pageshadow="2"
+											inkscape:pageopacity="0.0"
+											inkscape:pagecheckerboard="0"
+											inkscape:document-units="mm"
+											showgrid="true"
+											inkscape:zoom="0.74118967"
+											inkscape:cx="80.950939"
+											inkscape:cy="174.71911"
+											inkscape:window-width="1397"
+											inkscape:window-height="827"
+											inkscape:window-x="334"
+											inkscape:window-y="54"
+											inkscape:window-maximized="0"
+											inkscape:current-layer="layer2"
+											showguides="true"
+											inkscape:snap-bbox="true"
+											inkscape:object-paths="true"
+											inkscape:snap-intersection-paths="true"
+											inkscape:snap-smooth-nodes="true">
+		<inkscape:grid type="xygrid"
+									 id="grid9"
+									 originx="0.3527775"
+									 originy="0.3527775" />
+	</sodipodi:namedview>
+	<defs id="defs2">
+		<marker style="overflow:visible"
+						id="Arrow1Lend"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229" />
+		</marker>
+		<inkscape:path-effect effect="powerstroke"
+													id="path-effect1626"
+													is_visible="true"
+													lpeversion="1"
+													offset_points="1,4.99214"
+													not_jump="false"
+													sort_points="true"
+													interpolator_type="CubicBezierJohan"
+													interpolator_beta="0.2"
+													start_linecap_type="zerowidth"
+													linejoin_type="extrp_arc"
+													miter_limit="4"
+													scale_width="1"
+													end_linecap_type="zerowidth" />
+		<linearGradient id="linearGradient10936">
+			<stop style="stop-color:#fcf3e8;stop-opacity:1"
+						offset="0"
+						id="stop10938" />
+			<stop style="stop-color:#ba6100;stop-opacity:1"
+						offset="1"
+						id="stop10940" />
+		</linearGradient>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient10942"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-5"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-5"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4-3"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6-2" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48-0"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4-7" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5-7" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient2173"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="matrix(0.9299803,0,0,0.9377921,6.7492264,12.988526)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-9"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-2"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-2-3"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+	</defs>
+	<g inkscape:label="Layer 1"
+		 inkscape:groupmode="layer"
+		 id="layer1"
+		 sodipodi:insensitive="true"
+		 transform="translate(0.35277751,0.35277751)">
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870"
+					width="42.333332"
+					height="42.333332"
+					x="0"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-7"
+					width="42.333332"
+					height="42.333332"
+					x="42.333336"
+					y="1.2715658e-06" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-2"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-9"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="42.333336" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-4"
+					width="42.333332"
+					height="42.333332"
+					x="42.33334"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-0"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-8"
+					width="42.333332"
+					height="42.333332"
+					x="42.333332"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-05"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="84.666664" />
+	</g>
+	<g inkscape:groupmode="layer"
+		 id="layer2"
+		 inkscape:label="Layer 2"
+		 transform="translate(0.35277751,0.35277751)">
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951"
+						cx="20.012436"
+						cy="60.674435"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-4"
+						cx="62.345772"
+						cy="18.341099"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-5"
+						cx="20.012436"
+						cy="18.341099"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-9"
+						cx="104.6791"
+						cy="18.341099"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-7"
+						cx="62.345772"
+						cy="103.00778"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-1"
+						cx="104.6791"
+						cy="60.674435"
+						r="5.2916665" />
+		<g transform="matrix(0.21657278,0,0,0.23157759,52.986783,49.120924)"
+			 id="g12950-4">
+			<path d="M 3.6843532,112.89045 H 104.38651 L 87.439074,5.7639005 54.035433,0.49538136 20.63179,5.7639005 Z"
+						style="fill:url(#linearGradient12957);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.18144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.498039"
+						id="path9965-1" />
+			<path d="m 51.054138,65.799294 c 3.138163,1.464519 4.341141,2.929013 3.608935,4.393486 -0.732288,1.464515 -1.203019,6.276424 -1.412192,14.435741 6.904003,-0.836847 12.291249,-1.516791 16.161753,-2.039833 3.870392,-0.523025 6.694774,0.366132 8.473153,2.667474 1.778249,2.301353 0.522968,3.242814 -3.765846,2.824384 -4.288936,-0.418424 -9.466968,-0.523031 -15.534112,-0.31382 -6.067235,0.209216 -11.506784,0.627643 -16.318664,1.255281 -4.811938,0.627643 -8.473173,1.255283 -10.983715,1.882923 -2.51058,0.62764 -4.759624,0.104607 -6.74714,-1.569102 -1.987539,-1.673706 -1.726022,-2.458256 0.784551,-2.353654 2.510549,0.104611 5.596447,4e-6 9.257703,-0.31382 3.661214,-0.313816 8.316212,-0.889153 13.96501,-1.726012 V 73.958626 c -3.5e-5,-2.928971 -0.209248,-5.334926 -0.62764,-7.217871 -5.021158,0.836878 -8.786999,0.627665 -11.297537,-0.627641 -2.510584,-1.255255 -2.301371,-1.987502 0.627641,-2.196743 2.928964,-0.209186 6.694806,-0.836826 11.297536,-1.882922 4.60266,-1.046039 7.950075,-1.778286 10.042255,-2.196744 2.092089,-0.418395 3.713493,-0.05227 4.864217,1.098372 1.150623,1.150704 0.7845,2.039861 -1.098372,2.667474 -1.88297,0.627667 -5.648811,1.359914 -11.297536,2.196743 z m 0.627641,-29.499122 c 5.43951,5.439603 10.931363,10.094602 16.475574,13.96501 5.5441,3.870489 10.251402,6.433353 14.12192,7.688601 3.870379,1.255313 6.69476,2.14447 8.473152,2.667474 1.778237,0.523063 0.470653,1.0984 -3.922755,1.726012 -4.393556,0.627669 -7.950184,0.784579 -10.669896,0.470731 -2.719837,-0.313792 -4.968882,-1.67368 -6.74714,-4.079666 -1.77837,-2.405922 -4.027414,-4.916483 -6.747139,-7.531691 -2.719824,-2.615128 -6.694879,-6.956307 -11.925177,-13.023549 -2.510599,4.184321 -5.125767,8.002466 -7.845512,11.454447 -2.719804,3.452063 -6.119522,6.851781 -10.199164,10.199164 -4.079682,3.347446 -8.10704,5.805704 -12.082088,7.374781 -3.975062,1.569124 -4.131972,1.098394 -0.47073,-1.412192 3.661227,-2.510536 7.427069,-5.648737 11.297536,-9.414614 3.87043,-3.765807 7.008631,-7.636255 9.414613,-11.611356 2.405927,-3.975009 4.079634,-7.113211 5.021128,-9.414614 0.941427,-2.301292 1.202944,-4.184213 0.784551,-5.648768 -0.418461,-1.464433 -0.156944,-2.092073 0.784551,-1.882923 0.941426,0.209277 2.458223,0.941524 4.550396,2.196744 2.092096,1.255341 2.772039,2.249105 2.039833,2.981294 -0.732288,0.732305 -1.516838,1.830675 -2.353653,3.295115 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:80.338px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#de0000;fill-opacity:1;stroke:#000000;stroke-width:1.18144;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11939-4" />
+		</g>
+	</g>
+</svg>
+
+
+@code {
+
+}

Shogi.UI/Pages/Home/VisualAids/PromotedPawnMoves.razor

@@ -0,0 +1,358 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg viewBox="0 0 127.70555 127.70555"
+		 version="1.1"
+		 id="svg5"
+		 sodipodi:docname="promotedpawn-moves.svg"
+		 inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+		 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+		 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+		 xmlns:xlink="http://www.w3.org/1999/xlink"
+		 xmlns="http://www.w3.org/2000/svg"
+		 xmlns:svg="http://www.w3.org/2000/svg">
+	<sodipodi:namedview id="namedview7"
+											pagecolor="#ffffff"
+											bordercolor="#666666"
+											borderopacity="1.0"
+											inkscape:pageshadow="2"
+											inkscape:pageopacity="0.0"
+											inkscape:pagecheckerboard="0"
+											inkscape:document-units="mm"
+											showgrid="true"
+											inkscape:zoom="0.74118967"
+											inkscape:cx="80.950939"
+											inkscape:cy="174.71911"
+											inkscape:window-width="1397"
+											inkscape:window-height="827"
+											inkscape:window-x="334"
+											inkscape:window-y="54"
+											inkscape:window-maximized="0"
+											inkscape:current-layer="layer2"
+											showguides="true"
+											inkscape:snap-bbox="true"
+											inkscape:object-paths="true"
+											inkscape:snap-intersection-paths="true"
+											inkscape:snap-smooth-nodes="true">
+		<inkscape:grid type="xygrid"
+									 id="grid9"
+									 originx="0.3527775"
+									 originy="0.3527775" />
+	</sodipodi:namedview>
+	<defs id="defs2">
+		<marker style="overflow:visible"
+						id="Arrow1Lend"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229" />
+		</marker>
+		<inkscape:path-effect effect="powerstroke"
+													id="path-effect1626"
+													is_visible="true"
+													lpeversion="1"
+													offset_points="1,4.99214"
+													not_jump="false"
+													sort_points="true"
+													interpolator_type="CubicBezierJohan"
+													interpolator_beta="0.2"
+													start_linecap_type="zerowidth"
+													linejoin_type="extrp_arc"
+													miter_limit="4"
+													scale_width="1"
+													end_linecap_type="zerowidth" />
+		<linearGradient id="linearGradient10936">
+			<stop style="stop-color:#fcf3e8;stop-opacity:1"
+						offset="0"
+						id="stop10938" />
+			<stop style="stop-color:#ba6100;stop-opacity:1"
+						offset="1"
+						id="stop10940" />
+		</linearGradient>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient10942"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-5"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-5"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229-3" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4-3"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6-2" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48-0"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4-7" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1-9"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5-7" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient2173"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="matrix(0.9299803,0,0,0.9377921,6.7492264,12.988526)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-9"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-2"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-2-3"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734,-0.06106549)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-4"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+	</defs>
+	<g inkscape:label="Layer 1"
+		 inkscape:groupmode="layer"
+		 id="layer1"
+		 sodipodi:insensitive="true"
+		 transform="translate(0.35277751,0.35277751)">
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870"
+					width="42.333332"
+					height="42.333332"
+					x="0"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-7"
+					width="42.333332"
+					height="42.333332"
+					x="42.333336"
+					y="1.2715658e-06" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-2"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-9"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="42.333336" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-4"
+					width="42.333332"
+					height="42.333332"
+					x="42.33334"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-0"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-8"
+					width="42.333332"
+					height="42.333332"
+					x="42.333332"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-05"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="84.666664" />
+	</g>
+	<g inkscape:groupmode="layer"
+		 id="layer2"
+		 inkscape:label="Layer 2"
+		 transform="translate(0.35277751,0.35277751)">
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951"
+						cx="20.012436"
+						cy="60.674435"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-4"
+						cx="62.345772"
+						cy="18.341099"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-5"
+						cx="20.012436"
+						cy="18.341099"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-9"
+						cx="104.6791"
+						cy="18.341099"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-7"
+						cx="62.345772"
+						cy="103.00778"
+						r="5.2916665" />
+		<circle style="fill:#db1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
+						id="path11951-1"
+						cx="104.6791"
+						cy="60.674435"
+						r="5.2916665" />
+		<g transform="matrix(0.2073493,0,0,0.22331386,53.826937,52.193776)"
+			 id="g12950">
+			<path d="M 3.6843532,112.89045 H 104.38651 L 87.439074,5.7639005 54.035433,0.49538136 20.63179,5.7639005 Z"
+						style="fill:url(#linearGradient12957-4);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.22957;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.498039"
+						id="path9965" />
+			<path d="m 43.584086,31.109869 c 0.409828,-0.614728 1.332005,-0.614728 2.766533,0 1.434467,0.614841 2.561572,1.33209 3.381318,2.151748 0.614751,0.819767 0.614751,1.741944 0,2.766533 -0.614818,1.024692 -1.024675,2.664118 -1.22957,4.918281 -0.409889,2.254257 -0.307425,4.764627 0.307393,7.531118 0.614751,2.766569 1.84432,5.174476 3.688711,7.223726 6.352736,-2.868963 10.246371,-4.662085 11.680917,-5.37937 1.434449,-0.717212 2.254161,-1.383228 2.459141,-1.998052 0.204877,-0.819674 0.563501,-1.434458 1.075874,-1.844355 0.512268,-0.409816 1.383213,-0.102424 2.612836,0.922177 1.229515,1.024681 1.844299,2.100554 1.844356,3.227622 -5.7e-5,1.127142 -1.434554,2.203015 -4.303496,3.227622 -3.073975,0.819746 -5.789273,1.690691 -8.145903,2.612837 -2.356718,0.922208 -4.969552,2.100545 -7.838511,3.535015 -2.86903,1.434524 -5.533097,3.07395 -7.992206,4.918281 -2.459167,1.844376 -4.098592,3.893657 -4.918281,6.147851 -1.024665,2.254226 -1.075897,4.559668 -0.153697,6.916333 0.922154,2.356683 3.022668,4.047341 6.301548,5.071977 3.278821,0.819717 7.326153,1.075877 12.142006,0.768482 4.815771,-0.307389 8.453246,-0.870942 10.912436,-1.69066 2.254158,-0.819707 3.791119,-0.973403 4.610889,-0.461088 0.819656,0.512326 1.331976,1.178342 1.536963,1.998051 0.204869,0.819717 -0.666075,1.741893 -2.612837,2.766533 -1.946874,1.024642 -6.506526,1.639427 -13.678969,1.844356 -7.172529,0.204927 -12.705589,-0.614786 -16.599199,-2.459141 -3.893661,-1.844352 -6.147871,-4.405954 -6.762636,-7.684814 -0.819732,-3.48377 -0.409876,-6.865085 1.22957,-10.143955 1.639405,-3.278831 5.942897,-6.76261 12.910488,-10.451347 -2.254243,-3.278821 -3.637509,-6.608904 -4.1498,-9.990258 -0.512349,-3.381275 -0.666046,-6.096574 -0.461089,-8.145903 0.2049,-2.254162 0.0512,-4.098516 -0.461089,-5.533067 -0.512348,-1.434443 -0.56358,-2.35662 -0.153696,-2.766533 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:78.6925px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#de0000;fill-opacity:1;stroke:#000000;stroke-width:1.22957;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11939" />
+		</g>
+	</g>
+</svg>
+
+@code {
+
+}

Shogi.UI/Pages/Home/VisualAids/PromotedPieceVisualAid.razor

@@ -0,0 +1,40 @@
+
+<section>
+	<div class="moves">
+		<h5>Promoted Bishop - Horse</h5>
+		<HorseMoves />
+	</div>
+
+	<div class="moves">
+		<h5>Promoted Rook - Dragon</h5>
+		<DragonMoves />
+	</div>
+</section>
+
+<section>
+	<div class="moves">
+		<h5>Promoted Pawn</h5>
+		<PromotedPawnMoves />
+	</div>
+
+	<div class="moves">
+		<h5>Promoted Lance</h5>
+		<PromotedLanceMoves />
+	</div>
+
+	<div class="moves">
+		<h5>Promoted Knight</h5>
+		<PromotedKnightMoves />
+	</div>
+</section>
+
+<section>
+	<div class="moves">
+		<h5>Promoted Silver General</h5>
+		<PromotedSilverMoves />
+	</div>
+</section>
+
+@code {
+
+}

Shogi.UI/Pages/Home/VisualAids/PromotedPieceVisualAid.razor.css

@@ -0,0 +1,14 @@
+section {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+}
+
+section:not(:last-of-type){
+	margin-bottom: 2rem;
+}
+
+.moves {
+	width: 12rem;
+	text-align: center;
+}

Shogi.UI/Pages/Home/VisualAids/PromotedSilverMoves.razor

@@ -0,0 +1,261 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg viewBox="0 0 127.70555 127.70555"
+		 version="1.1"
+		 id="svg5"
+		 sodipodi:docname="promotedsilver-moves.svg"
+		 inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+		 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+		 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+		 xmlns:xlink="http://www.w3.org/1999/xlink"
+		 xmlns="http://www.w3.org/2000/svg"
+		 xmlns:svg="http://www.w3.org/2000/svg">
+	<sodipodi:namedview id="namedview7"
+											pagecolor="#ffffff"
+											bordercolor="#666666"
+											borderopacity="1.0"
+											inkscape:pageshadow="2"
+											inkscape:pageopacity="0.0"
+											inkscape:pagecheckerboard="0"
+											inkscape:document-units="mm"
+											showgrid="true"
+											inkscape:zoom="0.74118967"
+											inkscape:cx="189.56012"
+											inkscape:cy="310.98653"
+											inkscape:window-width="1284"
+											inkscape:window-height="827"
+											inkscape:window-x="2462"
+											inkscape:window-y="75"
+											inkscape:window-maximized="0"
+											inkscape:current-layer="layer2"
+											showguides="false"
+											inkscape:snap-bbox="true"
+											inkscape:object-paths="true"
+											inkscape:snap-intersection-paths="true"
+											inkscape:snap-smooth-nodes="true">
+		<inkscape:grid type="xygrid"
+									 id="grid9"
+									 originx="0.3527775"
+									 originy="0.3527775" />
+	</sodipodi:namedview>
+	<defs id="defs2">
+		<marker style="overflow:visible"
+						id="Arrow1Lend"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lstart"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lstart"
+						inkscape:isstock="true">
+			<path transform="matrix(0.8,0,0,0.8,10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6229" />
+		</marker>
+		<inkscape:path-effect effect="powerstroke"
+													id="path-effect1626"
+													is_visible="true"
+													lpeversion="1"
+													offset_points="1,4.99214"
+													not_jump="false"
+													sort_points="true"
+													interpolator_type="CubicBezierJohan"
+													interpolator_beta="0.2"
+													start_linecap_type="zerowidth"
+													linejoin_type="extrp_arc"
+													miter_limit="4"
+													scale_width="1"
+													end_linecap_type="zerowidth" />
+		<linearGradient id="linearGradient10936">
+			<stop style="stop-color:#fcf3e8;stop-opacity:1"
+						offset="0"
+						id="stop10938" />
+			<stop style="stop-color:#ba6100;stop-opacity:1"
+						offset="1"
+						id="stop10940" />
+		</linearGradient>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient10942"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+		<marker style="overflow:visible"
+						id="Arrow1Lend-4"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-6" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-48"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-4" />
+		</marker>
+		<marker style="overflow:visible"
+						id="Arrow1Lend-1"
+						refX="0"
+						refY="0"
+						orient="auto"
+						inkscape:stockid="Arrow1Lend"
+						inkscape:isstock="true">
+			<path transform="matrix(-0.8,0,0,-0.8,-10,0)"
+						style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+						d="M 0,0 5,-5 -12.5,0 5,5 Z"
+						id="path6232-5" />
+		</marker>
+		<linearGradient x1="17.523264"
+										y1="5.9785309"
+										x2="101.69292"
+										y2="113.38583"
+										id="linearGradient12957-9"
+										xlink:href="#linearGradient10936"
+										gradientUnits="userSpaceOnUse"
+										gradientTransform="translate(3.1889734)" />
+	</defs>
+	<g inkscape:label="Layer 1"
+		 inkscape:groupmode="layer"
+		 id="layer1"
+		 sodipodi:insensitive="true"
+		 transform="translate(0.35277751,0.35277751)">
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870"
+					width="42.333332"
+					height="42.333332"
+					x="0"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-7"
+					width="42.333332"
+					height="42.333332"
+					x="42.333336"
+					y="1.2715658e-06" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-2"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="0" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-9"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="42.333336" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-4"
+					width="42.333332"
+					height="42.333332"
+					x="42.33334"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="42.333332" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-0"
+					width="42.333332"
+					height="42.333332"
+					x="1.2715658e-06"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-8"
+					width="42.333332"
+					height="42.333332"
+					x="42.333332"
+					y="84.666664" />
+		<rect style="fill:#ffe680;stroke:#000000;stroke-width:0.705555;stroke-opacity:1"
+					id="rect870-48-05"
+					width="42.333332"
+					height="42.333332"
+					x="84.666664"
+					y="84.666664" />
+	</g>
+	<g inkscape:groupmode="layer"
+		 id="layer2"
+		 inkscape:label="Layer 2"
+		 transform="translate(0.35277751,0.35277751)">
+		<circle style="opacity:1;fill:#de0000;fill-opacity:1;fill-rule:evenodd;stroke:#e81111;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+						id="path9507"
+						cx="63.5"
+						cy="21.166666"
+						r="5.2916665" />
+		<circle style="fill:#de0000;fill-opacity:1;fill-rule:evenodd;stroke:#e81111;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+						id="path9507-8"
+						cx="105.83334"
+						cy="21.166666"
+						r="5.2916665" />
+		<circle style="fill:#de0000;fill-opacity:1;fill-rule:evenodd;stroke:#e81111;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+						id="path9507-87"
+						cx="63.5"
+						cy="105.83334"
+						r="5.2916665" />
+		<circle style="fill:#de0000;fill-opacity:1;fill-rule:evenodd;stroke:#e81111;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+						id="path9507-87-9"
+						cx="21.166666"
+						cy="63.5"
+						r="5.2916665" />
+		<circle style="fill:#de0000;fill-opacity:1;fill-rule:evenodd;stroke:#e81111;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+						id="path9507-87-7"
+						cx="105.83334"
+						cy="63.5"
+						r="5.2916665" />
+		<circle style="fill:#de0000;fill-opacity:1;fill-rule:evenodd;stroke:#e81111;stroke-width:0.964999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+						id="path9507-3"
+						cx="21.166666"
+						cy="21.166666"
+						r="5.2916665"
+						inkscape:transform-center-x="0.71394231"
+						inkscape:transform-center-y="5.3545673" />
+		<g transform="matrix(0.24605729,0,0,0.24812416,49.293058,48.845191)"
+			 id="g12950">
+			<path d="M 3.6843532,112.89045 H 104.38651 L 87.439074,5.7639005 54.035433,0.49538136 20.63179,5.7639005 Z"
+						style="fill:url(#linearGradient10942);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.0708;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.498039"
+						id="path9965" />
+			<path d="m 53.005356,58.98709 c 1.806942,1.405454 2.509657,2.459526 2.108145,3.162217 -0.40159,0.702737 -0.702754,2.158359 -0.90349,4.366871 1.606165,-0.401532 3.513532,-0.803083 5.722106,-1.204654 2.208487,-0.401531 3.81469,-0.150562 4.818617,0.752909 1.003828,0.903508 0.602277,1.70661 -1.204654,2.409308 -1.807027,0.702731 -4.919047,1.355251 -9.336069,1.957563 -0.200815,4.015524 -0.301202,7.428707 -0.301164,10.239559 8.231757,-0.602321 13.803276,-1.003872 16.714576,-1.204654 2.911189,-0.200769 5.169913,0.301169 6.776179,1.505818 1.606142,1.204657 2.308856,2.208535 2.108145,3.011635 -0.20084,0.803103 -1.957625,0.903491 -5.270362,0.301164 -3.312854,-0.602326 -7.629527,-0.853295 -12.950032,-0.752909 -5.320596,0.100389 -10.490564,0.50194 -15.509921,1.204654 -5.019417,0.702715 -8.583182,1.355235 -10.691305,1.957563 -2.108162,0.602325 -4.216305,0.200774 -6.324434,-1.204654 -2.108156,-1.405429 -2.359125,-2.108143 -0.752909,-2.108145 1.806967,2e-6 4.818599,-0.250967 9.034906,-0.752909 4.216263,-0.501936 8.532936,-1.054068 12.950031,-1.656399 V 70.431304 c -3.212442,0.602341 -5.471166,0.953698 -6.776179,1.054072 -1.305068,0.100401 -2.610109,-0.351343 -3.915126,-1.355236 -1.305064,-1.003862 -0.903513,-1.606189 1.204654,-1.806981 2.108118,-0.200759 5.270332,-0.60231 9.486651,-1.204654 -3.4e-5,-3.413165 -0.301197,-6.023247 -0.90349,-7.830252 h -4.517453 c -1.606233,2.6e-5 -2.911274,-0.250943 -3.915126,-0.752909 -1.003902,-0.501912 -1.10429,-0.853269 -0.301164,-1.054072 0.803078,-0.200748 2.559863,-0.552105 5.270362,-1.054072 2.710439,-0.50191 5.220133,-1.054043 7.529088,-1.6564 2.308881,-0.602296 4.417023,-0.953653 6.324434,-1.054072 1.907323,-0.100356 3.212364,0.251001 3.915126,1.054072 0.702666,0.803133 -0.05024,1.556041 -2.258726,2.258727 -2.208576,0.702742 -4.919045,1.355262 -8.131416,1.957563 z M 53.30652,34.894008 c 1.405391,1.807029 4.718186,4.718274 9.938396,8.733742 5.220115,4.015551 9.386206,6.876602 12.498287,8.58316 3.111959,1.706625 5.872622,2.961472 8.281996,3.764544 2.409238,0.803132 4.015442,1.405458 4.818617,1.806982 0.803029,0.401578 -0.702788,0.752935 -4.517453,1.054072 -3.814803,0.30119 -6.776241,0.30119 -8.884324,0 C 73.333837,58.535371 71.42647,57.631881 69.719932,56.126036 68.013286,54.620249 65.905144,52.311331 63.395498,49.199275 60.885757,46.087291 57.221604,41.9212 52.403029,36.700989 c -2.208567,3.614007 -4.567679,7.177772 -7.077342,10.691305 -2.509724,3.513609 -5.521356,6.77621 -9.034906,9.787815 -3.513592,3.01166 -7.077357,5.270384 -10.691305,6.776179 -3.613969,1.505837 -3.513581,0.803123 0.301163,-2.108145 3.814724,-2.911221 7.177713,-6.023241 10.088978,-9.336069 2.911224,-3.312763 5.220143,-6.274201 6.926761,-8.884324 1.706565,-2.61004 3.212381,-5.420896 4.517453,-8.432579 1.305009,-3.011582 1.756754,-5.420888 1.355236,-7.227924 -0.401584,-1.806922 0.30113,-2.409249 2.108145,-1.806981 1.806944,0.602385 3.262566,1.405487 4.366871,2.409308 1.104225,1.003934 1.305001,1.907423 0.602327,2.710471 -0.702754,0.803156 -1.55605,2.007809 -2.55989,3.613963 z"
+						style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:77.0979px;line-height:100%;font-family:KaiTi;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#de0000;fill-opacity:1;stroke:#000000;stroke-width:1.0708;stroke-miterlimit:4;stroke-opacity:0.498039"
+						id="text11939" />
+		</g>
+	</g>
+</svg>
+
+
+@code {
+
+}

Shogi.UI/Pages/Home/_Imports.razor

@@ -0,0 +1 @@
+@using Shogi.UI.Pages.Home.VisualAids

Shogi.UI/Pages/HomePage.razor

@@ -1,26 +0,0 @@
-@page "/"
-
-@using Shogi.Contracts.Types
-@using System.Net.WebSockets
-@using System.Text
-
-<main class="shogi PrimaryTheme">
-	<p>How to play goes here</p>
-	<p>Maybe a cool animation of a game being played.</p>
-</main>
-
-@code {
-
-	private string activeSessionName = string.Empty;
-
-	private Task OnLoginChanged()
-	{
-		StateHasChanged();
-		return Task.CompletedTask;
-	}
-	private void OnChangeSession(SessionMetadata s)
-	{
-		activeSessionName = s.SessionId.ToString();
-		StateHasChanged();
-	}
-}

Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor

@@ -66,7 +66,7 @@
 	</section>
 
 	<!-- Side board -->
-	@if (Session != null)
+	@if (Session != null && UseSideboard == true)
 	{
 		<aside class="side-board PrimaryTheme ThemeVariant--Contrast">
 			<div class="player-area">
@@ -121,6 +121,13 @@
 </article>
 
 @code {
+
+
+
+
+
+
+
 	static readonly string[] Files = new[] { "A", "B", "C", "D", "E", "F", "G", "H", "I" };
 
 	/// <summary>
@@ -136,6 +143,7 @@
 	[Parameter] public Func<Piece, Task>? OnClickHand { get; set; }
 	[Parameter] public Func<Task>? OnClickJoinGame { get; set; }
 	[Parameter] public bool IsMyTurn { get; set; }
+	[Parameter] public bool UseSideboard { get; set; } = true;
 
 	private IReadOnlyCollection<Piece> opponentHand;
 	private IReadOnlyCollection<Piece> userHand;

Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css

@@ -2,7 +2,7 @@
 	--ratio: 0.9;
 	display: grid;
 	grid-template-areas: "board side-board icons";
-	grid-template-columns: auto minmax(10rem, 30rem) 1fr;
+	grid-template-columns: minmax(min-content, calc(100vmin * var(--ratio) - 2rem)) 1fr 1fr;
 	background-color: #444;
 	position: relative; /* For absolute positioned promote prompt. */
 }
@@ -38,7 +38,7 @@
 	gap: 3px;
 	padding: 1rem;
 	background-color: #444444;
-	height: calc(100vmin - 2rem);
+	max-height: 100%;
 	aspect-ratio: var(--ratio);
 }
 
@@ -76,6 +76,7 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-around;
+	font-size: 1.2vmin;
 }
 
 	.ruler.vertical {

Shogi.UI/Pages/Play/Pieces/Bishop.razor

@@ -10,7 +10,6 @@
 			</g>
 		</g>
 	</svg>
-
 }
 else
 {