完成开始菜单的初始构建，调整了结构，打算将时间交给react管理,webssembly只完成对棋局的构建，对下一步预测，输赢等

web/chess/public/chess/black_bishop.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#6d645c;}.cls-2{fill:#54463a;}.cls-3{fill:#fff;}.cls-4{fill:#42210b;}</style></defs><title/><path class="cls-1" d="M26.66,4.84S38.08,15.55,38,22.55A13.93,13.93,0,0,1,33.38,33H36l.06,5H40v5H8V38h4V33h3a12.77,12.77,0,0,1-4.81-12.19C11.44,12.81,21.44,5,21.44,5S21.13.87,24,1.19,26.66,4.84,26.66,4.84Z"/><rect class="cls-2" height="5.06" width="4.44" x="31.19" y="33"/><rect class="cls-3" height="5.06" width="4.73" x="12.25" y="32.97"/><rect class="cls-2" height="5.06" width="4.78" x="35" y="37.94"/><rect class="cls-3" height="5.06" width="4.78" x="8" y="37.97"/><polygon class="cls-3" points="22.54 6.23 22.54 6.23 22.71 6.41 22.54 6.23"/><path class="cls-3" d="M15.73,29.27a11.45,11.45,0,0,1-2.18-4.35c-1.1-4.62,1.52-8.56,2.66-10,.77-1,1.49-2,2.22-3l4.11-5.71-1.1-1.17L12.71,15.21s-2.67,4.63-2.79,9S14,33,14,33c0,1,4.88,0,4.88,0l0-.6L20,32A8.1,8.1,0,0,1,15.73,29.27Z"/><polygon class="cls-2" points="25.29 6.41 25.46 6.23 25.46 6.23 25.29 6.41"/><path class="cls-2" d="M35.29,15.21,26.56,5.06l-1.1,1.17,4.11,5.71.42.58-5.3,7.15c0-.06,4.37-3.86,6.36-5.72.29.39.44.59.75,1,1.14,1.44,3.76,5.38,2.66,10a11.49,11.49,0,0,1-2.24,4.42A8.34,8.34,0,0,1,27.53,32l1.56.61,0,.42S34,34,34,33c0,0,4.21-4.33,4.08-8.75S35.29,15.21,35.29,15.21Z"/><path class="cls-3" d="M24.15,2a1.75,1.75,0,0,0-.79,1.58,1.84,1.84,0,0,0,1,1.48s-1.35.35-1.77.13S21,3.31,21.21,3a14.32,14.32,0,0,1,1.94-1.87A10.29,10.29,0,0,1,24.15,2Z"/><path class="cls-4" d="M40,37H37V33a1,1,0,0,0-1-1h-.76l.38-.42a13.14,13.14,0,0,0,.21-17.31L27.37,4.39a3.47,3.47,0,0,0,.13-.89,3.5,3.5,0,0,0-7,0,3.48,3.48,0,0,0,.13.89l-8.46,9.87a13.13,13.13,0,0,0,.2,17.31l.38.42H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38A1,1,0,0,0,40,37ZM24,2a1.5,1.5,0,0,1,1.35,2.15h0a1.5,1.5,0,0,1-2.68,0h0a1.48,1.48,0,0,1-.15-.65A1.5,1.5,0,0,1,24,2ZM13.86,30.24a11.13,11.13,0,0,1-.17-14.67l8-9.4h0a3.49,3.49,0,0,0,4.5,0h0l3.38,3.95-6.43,8.27a1,1,0,1,0,1.58,1.23L31,11.67l3.34,3.9a11.13,11.13,0,0,1-.17,14.67L32.55,32H15.45ZM13,34H35v3H13Zm26,8H9V39H39Z"/></svg>

web/chess/public/chess/black_king.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#6d645c;}.cls-2{fill:#fff;}.cls-3{fill:#54463a;}.cls-4{fill:#42210b;}</style></defs><title/><path class="cls-1" d="M42.05,9.16a2.34,2.34,0,0,0-1.41,4.21l-8.51,9.23L33.69,8.82l.2,0a2.35,2.35,0,1,0-.9-.18l-6.07,12-2.63-15a2.38,2.38,0,1,0-.6,0L20.91,20.78l-6-12.05a2.57,2.57,0,1,0-.68.22l1.58,13.66L7.2,13.23a2.48,2.48,0,1,0-.59.3L14,32.88l-2,.06-.06,4.94L8,38v5H39.88L40,38H36V33H34l7.26-19.3a2.34,2.34,0,1,0,.8-4.54Z"/><path class="cls-2" d="M6.15,10a1.75,1.75,0,0,0-.79,1.58,1.84,1.84,0,0,0,1,1.48s-1.35.35-1.77.13S3,11.31,3.21,11A14.32,14.32,0,0,1,5.15,9.17,10.29,10.29,0,0,1,6.15,10Z"/><path class="cls-2" d="M14.15,5a1.75,1.75,0,0,0-.79,1.58,1.84,1.84,0,0,0,1,1.48s-1.35.35-1.77.13S11,6.31,11.21,6a14.32,14.32,0,0,1,1.94-1.87A10.29,10.29,0,0,1,14.15,5Z"/><rect class="cls-3" height="5.06" width="4.78" x="35" y="37.94"/><polyline class="cls-2" points="8 37.97 12.78 37.97 12.78 43.03 8 43.03"/><path class="cls-2" d="M15.48,28.64h0L10.9,17.33,7.76,14.42l.32,2.74L14,32.38v.25L12,33v5h5V33h2l.25-1A5.31,5.31,0,0,1,15.48,28.64Z"/><path class="cls-3" d="M32.64,28.64h0l4.59-11.31,3.14-2.91L40,17.16,34,32.38v.25L36,33v5H31V33H29.13l-.25-1A5.31,5.31,0,0,0,32.64,28.64Z"/><path class="cls-3" d="M41.77,10a1.75,1.75,0,0,1,.79,1.58,1.84,1.84,0,0,1-1,1.48s1.35.35,1.77.13,1.54-1.87,1.33-2.15a14.32,14.32,0,0,0-1.94-1.87A10.29,10.29,0,0,0,41.77,10Z"/><path class="cls-3" d="M33.77,5a1.75,1.75,0,0,1,.79,1.58,1.84,1.84,0,0,1-1,1.48s1.35.35,1.77.13S36.92,6.31,36.71,6a14.32,14.32,0,0,0-1.94-1.87A10.29,10.29,0,0,0,33.77,5Z"/><path class="cls-4" d="M42,8a3.5,3.5,0,0,0-3.5,3.5A3.47,3.47,0,0,0,38.85,13v0a3.54,3.54,0,0,0,.35.53L33.38,20,34.64,9.93A3.5,3.5,0,0,0,37.14,8h0V8A3.47,3.47,0,0,0,37.5,6.5a3.5,3.5,0,0,0-7,0A3.47,3.47,0,0,0,30.85,8V8h0a3.49,3.49,0,0,0,.92,1.14l-4.33,8.65-2-11.2A3.48,3.48,0,0,0,27.14,5h0V5A3.47,3.47,0,0,0,27.5,3.5a3.5,3.5,0,0,0-7,0A3.47,3.47,0,0,0,20.85,5V5h0a3.5,3.5,0,0,0,1.65,1.6l-2,11.19L16.21,9.19a3.46,3.46,0,0,0,.92-1.14h0V8A3.47,3.47,0,0,0,17.5,6.5a3.5,3.5,0,0,0-7,0A3.47,3.47,0,0,0,10.85,8V8h0a3.5,3.5,0,0,0,2.5,1.88L14.62,20,8.78,13.58a3.52,3.52,0,0,0,.35-.52h0v0A3.47,3.47,0,0,0,9.5,11.5a3.5,3.5,0,0,0-7,0A3.47,3.47,0,0,0,2.85,13v0h0A3.51,3.51,0,0,0,6,15h.07l6.48,17H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38a1,1,0,0,0-1-1H37V33a1,1,0,0,0-1-1h-.55l6.48-17H42a3.51,3.51,0,0,0,3.14-2h0v0a3.47,3.47,0,0,0,.35-1.53A3.5,3.5,0,0,0,42,8ZM34,5a1.5,1.5,0,1,1-.26,3,1.53,1.53,0,0,1-1.09-.83A1.5,1.5,0,0,1,34,5ZM24,2a1.5,1.5,0,0,1,1.35,2.15h0A1.5,1.5,0,0,1,24.17,5a.89.89,0,0,1-.38,0,1.48,1.48,0,0,1-1.12-.81h0A1.5,1.5,0,0,1,24,2ZM12.66,7.17h0a1.5,1.5,0,1,1,2.7,0h0a1.52,1.52,0,0,1-.84.74,1.08,1.08,0,0,1-.34.08L14,8A1.5,1.5,0,0,1,12.66,7.17Zm-8,5A1.5,1.5,0,1,1,7.5,11.5,1.53,1.53,0,0,1,6,13,1.51,1.51,0,0,1,4.65,12.15ZM39,42H9V39H39ZM13,37V34H35v3Zm1.69-5L8.82,16.59l6.45,7.08a1,1,0,0,0,1.73-.8l-1.27-10.2,4.39,8.77A1,1,0,0,0,21,22h.14a1,1,0,0,0,.84-.82L24,9.74l2,11.43a1,1,0,0,0,.84.82H27a1,1,0,0,0,.89-.55l4.39-8.77L31,22.88a1,1,0,0,0,1.73.8l6.45-7.08L33.31,32ZM43.34,12.17A1.5,1.5,0,0,1,42,13a1.14,1.14,0,0,1-.68-.15,1.49,1.49,0,0,1-.58-.65A1.67,1.67,0,0,1,40.66,11a1.49,1.49,0,0,1,.55-.76A1.44,1.44,0,0,1,42,10a1.48,1.48,0,0,1,1.48,1.5A1.55,1.55,0,0,1,43.34,12.17Z"/></svg>

web/chess/public/chess/black_knight.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#6d645c;}.cls-2{fill:#54463a;}.cls-3{fill:#fff;}.cls-4{fill:#42210b;}</style></defs><title/><polygon class="cls-1" points="25.56 1.38 35.91 14.22 33.3 26.55 34.13 33 36 33 36 38 40 38 40 43 8 43 8 38 12.11 38.13 12.44 32.94 13.94 32.81 14.06 25.06 22.19 16.94 12.38 17.86 10.88 10.94 24.56 5.88 25.56 1.38"/><rect class="cls-2" height="5.06" width="4.44" x="31.19" y="33"/><rect class="cls-3" height="5.06" width="4.73" x="12.25" y="32.97"/><rect class="cls-2" height="5.06" width="4.78" x="35" y="37.94"/><rect class="cls-3" height="5.06" width="4.78" x="8" y="37.97"/><path class="cls-2" d="M33,27c.08.12,1.09,5.8,1.09,5.8l-3.3.21-.07-.31c-.93,0-3.24-.24-3.24-.24L27.6,32a.75.75,0,0,1,.16-.06l.42-.19a4.14,4.14,0,0,0,1.11-.81,2.36,2.36,0,0,0,.63-1.27,4.71,4.71,0,0,0-.13-1.42l-.08-.39a3.71,3.71,0,0,1,.09-1.9l3.34-10.58a1.85,1.85,0,0,0-.25-1.61l-7-10L25.38,2.2l.18-.82L35.62,13.87S32.92,26.83,33,27Z"/><path class="cls-2" d="M29.94,29l-.11-.5.06.23A2.56,2.56,0,0,1,29.94,29Z"/><path class="cls-3" d="M19.14,32l-.27-.12A3.44,3.44,0,0,1,17,28.75v-.61a6.23,6.23,0,0,1,1-3.4l4.54-7-.6-.61-7.89,7.89L14,33h3v-.4l2.22-.15Z"/><path class="cls-2" d="M11.85,16.29l.37,1.7,10.59-.4.75-.73a1.46,1.46,0,0,0,.44-1h0a1.46,1.46,0,0,0-1.68-1.45Z"/><path class="cls-3" d="M15.57,9.62l-4.29,1.17,0,.12h0l.1.56.07.48c-.73.11-.42,1.38-.42,1.38l.74.22.08.44H12l.4-.11s-.3-1.51,8.24-4.42l3.5-1.18A2.68,2.68,0,0,0,26,6h0Z"/><path class="cls-4" d="M40,37H37V33a1,1,0,0,0-1-1H34.85L34,27l3-12.81a1,1,0,0,0-.21-.87l-11-13A1,1,0,0,0,24,1V5.3L10.66,10.06A1,1,0,0,0,10,11.14l1,7A1,1,0,0,0,12.1,19l7.21-.72-6,6A1,1,0,0,0,13,25v7H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38A1,1,0,0,0,40,37ZM15,25.41l7.71-7.71A1,1,0,0,0,21.9,16l-9,.9-.75-5.24L25.34,6.94h0A1,1,0,0,0,26,6V3.73l8.91,10.53L32,26.77a1,1,0,0,0,0,.39L32.82,32H23V28.24l1.89-3.79a1,1,0,1,0-1.79-.89l-2,4A1,1,0,0,0,21,28v4H15ZM13,34H35v3H13Zm26,8H9V39H39Z"/></svg>

web/chess/public/chess/black_pawn.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#6d645c;}.cls-2{fill:#54463a;}.cls-3{fill:#fff;}.cls-4{fill:#42210b;}</style></defs><title/><path class="cls-1" d="M36,38V33H33.81a27.64,27.64,0,0,1-3.69-5.63c-.93-1.9-1.27-5.12-1.38-7.52a9,9,0,1,0-9.41,0,51.43,51.43,0,0,1-1.64,7.61A24.85,24.85,0,0,1,14,33H12v5H8v5H40V38Z"/><rect class="cls-2" height="5.06" width="4.44" x="31.19" y="33"/><rect class="cls-3" height="5.06" width="4.44" x="12.25" y="32.97"/><rect class="cls-2" height="5.06" width="4.78" x="35" y="37.94"/><rect class="cls-3" height="5.06" width="4.78" x="8" y="37.97"/><path class="cls-3" d="M21.14,20.89a35.41,35.41,0,0,1-1.25,7.18c-.83,2.32-.41,3.65.47,3.94S16,32.7,16,32.83s-1.37-.59-1.37-.59,3-3.53,3.57-6.51,1.12-5.85,1.12-5.85Z"/><path class="cls-3" d="M21.4,4.44A9.17,9.17,0,0,0,17.56,12a8.45,8.45,0,0,0,3.83,7.56l-2.07.33s-4.89-3.35-4.24-8.43A9.75,9.75,0,0,1,20,4.28Z"/><path class="cls-2" d="M25.69,4.16A9.56,9.56,0,0,1,29.52,12a8.8,8.8,0,0,1-3.83,7.83l2.07.34S32.65,16.7,32,11.44A10.06,10.06,0,0,0,27.13,4Z"/><path class="cls-2" d="M31.19,32.85a15.2,15.2,0,0,1-3.37-6.14c-.88-3.14-.79-4.69-2.5-4.79C24.2,21.85,28,20,28,20l1.81,4.58,3.38,7.63Z"/><path class="cls-4" d="M40,37H37V33a1,1,0,0,0-1-1H34.38c-1-.92-4.38-4.67-4.38-12v0a10,10,0,1,0-12,0v0c0,7.33-3.41,11.08-4.38,12H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38A1,1,0,0,0,40,37ZM16,12a8,8,0,1,1,8,8A8,8,0,0,1,16,12Zm4,9.14a9.92,9.92,0,0,0,8.08,0A19,19,0,0,0,31.72,32H16.28A19,19,0,0,0,20,21.14ZM13,34H35v3H13Zm26,8H9V39H39Z"/></svg>

web/chess/public/chess/black_queen.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#6d645c;}.cls-2{fill:#54463a;}.cls-3{fill:#fff;}.cls-4{fill:#42210b;}</style></defs><title/><path class="cls-1" d="M40.93,24.22c4.53-6.88.8-13.86-5.36-15.28S23.92,11,23.92,11h-.13S18.31,7.52,12.15,8.94,2.25,17.42,6.78,24.3,14.83,33,14.83,33H12l-.25,5H8l-.21,5H39.92l-.21-5H36l-.25-5H32.88S36.4,31.1,40.93,24.22Z"/><polyline class="cls-2" points="35.63 33 35.63 38.06 31.19 38.06 31.19 33"/><polyline class="cls-3" points="16.98 32.97 16.98 38.03 12.25 38.03 12.25 32.97"/><rect class="cls-2" height="5.06" width="4.78" x="35" y="37.94"/><polyline class="cls-3" points="8 37.97 12.78 37.97 12.78 43.03 8 43.03"/><path class="cls-2" d="M33.81,8.6a6.49,6.49,0,0,0-2.35.4H30l-5.79,2.38-.37.61-2.36,2S33,8.12,37.33,11.48a7,7,0,0,1,2.55,5.68c0,4.71-4.59,9.82-7.6,12.67A9.07,9.07,0,0,1,27.06,32l3,.64.17.32h3.69s9.51-8.06,9.22-14.75S38.28,8.23,33.81,8.6Z"/><path class="cls-3" d="M15.6,29.84c-3-2.85-7.6-8-7.6-12.67A7.3,7.3,0,0,1,13.19,10a13.6,13.6,0,0,1,4.51-.16l-1.32-1s-2.66-.55-3-.55a.84.84,0,0,0-.41.26C8.88,8.81,5,12.11,4.78,18.25,4.49,24.94,14,33,14,33h3.69l.17-.32,3-.64A9.07,9.07,0,0,1,15.6,29.84Z"/><path class="cls-4" d="M40,37H37V33a1,1,0,0,0-1-1h-.14C38.93,29.32,44,24,44,18a10.72,10.72,0,0,0-4.61-9C35.9,6.75,31.06,6.92,25,9.47V5h3a1,1,0,0,0,0-2H25V1a1,1,0,0,0-2,0V3H20a1,1,0,0,0,0,2h3V9.47C16.94,6.92,12.1,6.75,8.61,9A10.72,10.72,0,0,0,4,18c0,6,5.07,11.32,8.14,14H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38A1,1,0,0,0,40,37ZM6,18a8.84,8.84,0,0,1,3.68-7.34c3.11-2,7.91-1.55,13.89,1.24a1,1,0,0,0,.85,0c6-2.79,10.79-3.22,13.89-1.24A8.84,8.84,0,0,1,42,18c0,6.74-7.88,12.92-9.33,14H15.33C13.88,30.93,6,24.75,6,18Zm7,16H35v3H13Zm26,8H9V39H39Z"/></svg>

web/chess/public/chess/black_rook.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#6d645c;}.cls-2{fill:#54463a;}.cls-3{fill:#fff;}.cls-4{fill:#42210b;}</style></defs><title/><path class="cls-1" d="M35.81,38.13l0-5.28-1.91.06A76.4,76.4,0,0,1,31,23.69,61.47,61.47,0,0,1,30.34,15H36V3H31V8H27V3H21V8H17V3H12V15h5.88c0-.08,0,0,0,0h0s0,0,0,.07c-.06,1-.51,8.14-1.41,10.73C15.51,28.57,14.13,33,14,33s-2-.07-2-.07V38H8v5H40V38Z"/><rect class="cls-2" height="12.25" width="2.94" x="33.28" y="2.72"/><rect class="cls-3" height="12.25" width="2.94" x="11.53" y="2.72"/><path class="cls-2" d="M34,33H31.5c-2.67-3.48-3.82-10.85-4.27-15a3.42,3.42,0,0,0-2.51-2l1.59-1.31.68.69c0-.25,0-.38,0-.38h3.15s.09,4.33.36,6.83S34,33,34,33Z"/><rect class="cls-2" height="5.06" width="4.44" x="31.19" y="33"/><rect class="cls-3" height="5.06" width="4.44" x="12.25" y="32.97"/><rect class="cls-2" height="5.06" width="4.78" x="35" y="37.94"/><rect class="cls-3" height="5.06" width="4.78" x="8" y="37.97"/><path class="cls-3" d="M21,15s-.7,13-4.53,18h-2.5s3.24-8.67,3.52-11.17.36-6.83.36-6.83Z"/><path class="cls-3" d="M21,32s-3.07-.26-2.55-2.89S17,30.42,16.91,30.55s-.72,2.23-.72,2.23Z"/><path class="cls-4" d="M40,37H37V33a1,1,0,0,0-1-1H34.67A50.84,50.84,0,0,1,31,16h5a1,1,0,0,0,1-1V3a1,1,0,0,0-1-1H31a1,1,0,0,0-1,1V7H28V3a1,1,0,0,0-1-1H21a1,1,0,0,0-1,1V7H18V3a1,1,0,0,0-1-1H12a1,1,0,0,0-1,1V15a1,1,0,0,0,1,1h5a50.94,50.94,0,0,1-3.64,16H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38A1,1,0,0,0,40,37ZM13,4h3V8a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V4h4V8a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V4h3V14H13Zm6,12H29a51.46,51.46,0,0,0,3.49,16h-17A51.46,51.46,0,0,0,19,16ZM13,34H35v3H13Zm26,8H9V39H39Z"/></svg>

web/chess/public/chess/white_bishop.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#efd5bb;}.cls-2{fill:#dca898;}.cls-3{fill:#fff;}.cls-4{fill:#42210b;}</style></defs><title/><path class="cls-1" d="M26.66,4.84S38.08,15.55,38,22.55A13.93,13.93,0,0,1,33.38,33H36l.06,5H40v5H8V38h4V33h3a12.77,12.77,0,0,1-4.81-12.19C11.44,12.81,21.44,5,21.44,5S21.13.87,24,1.19,26.66,4.84,26.66,4.84Z"/><rect class="cls-2" height="5.06" width="4.44" x="31.19" y="33"/><rect class="cls-3" height="5.06" width="4.73" x="12.25" y="32.97"/><rect class="cls-2" height="5.06" width="4.78" x="35" y="37.94"/><rect class="cls-3" height="5.06" width="4.78" x="8" y="37.97"/><polygon class="cls-3" points="22.54 6.23 22.54 6.23 22.71 6.41 22.54 6.23"/><path class="cls-3" d="M15.73,29.27a11.45,11.45,0,0,1-2.18-4.35c-1.1-4.62,1.52-8.56,2.66-10,.77-1,1.49-2,2.22-3l4.11-5.71-1.1-1.17L12.71,15.21s-2.67,4.63-2.79,9S14,33,14,33c0,1,4.88,0,4.88,0l0-.6L20,32A8.1,8.1,0,0,1,15.73,29.27Z"/><polygon class="cls-2" points="25.29 6.41 25.46 6.23 25.46 6.23 25.29 6.41"/><path class="cls-2" d="M35.29,15.21,26.56,5.06l-1.1,1.17,4.11,5.71.42.58-5.3,7.15c0-.06,4.37-3.86,6.36-5.72.29.39.44.59.75,1,1.14,1.44,3.76,5.38,2.66,10a11.49,11.49,0,0,1-2.24,4.42A8.34,8.34,0,0,1,27.53,32l1.56.61,0,.42S34,34,34,33c0,0,4.21-4.33,4.08-8.75S35.29,15.21,35.29,15.21Z"/><path class="cls-3" d="M24.15,2a1.75,1.75,0,0,0-.79,1.58,1.84,1.84,0,0,0,1,1.48s-1.35.35-1.77.13S21,3.31,21.21,3a14.32,14.32,0,0,1,1.94-1.87A10.29,10.29,0,0,1,24.15,2Z"/><path class="cls-4" d="M40,37H37V33a1,1,0,0,0-1-1h-.76l.38-.42a13.14,13.14,0,0,0,.21-17.31L27.37,4.39a3.47,3.47,0,0,0,.13-.89,3.5,3.5,0,0,0-7,0,3.48,3.48,0,0,0,.13.89l-8.46,9.87a13.13,13.13,0,0,0,.2,17.31l.38.42H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38A1,1,0,0,0,40,37ZM24,2a1.5,1.5,0,0,1,1.35,2.15h0a1.5,1.5,0,0,1-2.68,0h0a1.48,1.48,0,0,1-.15-.65A1.5,1.5,0,0,1,24,2ZM13.86,30.24a11.13,11.13,0,0,1-.17-14.67l8-9.4h0a3.49,3.49,0,0,0,4.5,0h0l3.38,3.95-6.43,8.27a1,1,0,1,0,1.58,1.23L31,11.67l3.34,3.9a11.13,11.13,0,0,1-.17,14.67L32.55,32H15.45ZM13,34H35v3H13Zm26,8H9V39H39Z"/></svg>

web/chess/public/chess/white_king.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#efd5bb;}.cls-2{fill:#fff;}.cls-3{fill:#dca898;}.cls-4{fill:#42210b;}</style></defs><title/><path class="cls-1" d="M42.05,9.16a2.34,2.34,0,0,0-1.41,4.21l-8.51,9.23L33.69,8.82l.2,0a2.35,2.35,0,1,0-.9-.18l-6.07,12-2.63-15a2.38,2.38,0,1,0-.6,0L20.91,20.78l-6-12.05a2.57,2.57,0,1,0-.68.22l1.58,13.66L7.2,13.23a2.48,2.48,0,1,0-.59.3L14,32.88l-2,.06-.06,4.94L8,38v5H39.88L40,38H36V33H34l7.26-19.3a2.34,2.34,0,1,0,.8-4.54Z"/><path class="cls-2" d="M6.15,10a1.75,1.75,0,0,0-.79,1.58,1.84,1.84,0,0,0,1,1.48s-1.35.35-1.77.13S3,11.31,3.21,11A14.32,14.32,0,0,1,5.15,9.17,10.29,10.29,0,0,1,6.15,10Z"/><path class="cls-2" d="M14.15,5a1.75,1.75,0,0,0-.79,1.58,1.84,1.84,0,0,0,1,1.48s-1.35.35-1.77.13S11,6.31,11.21,6a14.32,14.32,0,0,1,1.94-1.87A10.29,10.29,0,0,1,14.15,5Z"/><rect class="cls-3" height="5.06" width="4.78" x="35" y="37.94"/><polyline class="cls-2" points="8 37.97 12.78 37.97 12.78 43.03 8 43.03"/><path class="cls-2" d="M15.48,28.64h0L10.9,17.33,7.76,14.42l.32,2.74L14,32.38v.25L12,33v5h5V33h2l.25-1A5.31,5.31,0,0,1,15.48,28.64Z"/><path class="cls-3" d="M32.64,28.64h0l4.59-11.31,3.14-2.91L40,17.16,34,32.38v.25L36,33v5H31V33H29.13l-.25-1A5.31,5.31,0,0,0,32.64,28.64Z"/><path class="cls-3" d="M41.77,10a1.75,1.75,0,0,1,.79,1.58,1.84,1.84,0,0,1-1,1.48s1.35.35,1.77.13,1.54-1.87,1.33-2.15a14.32,14.32,0,0,0-1.94-1.87A10.29,10.29,0,0,0,41.77,10Z"/><path class="cls-3" d="M33.77,5a1.75,1.75,0,0,1,.79,1.58,1.84,1.84,0,0,1-1,1.48s1.35.35,1.77.13S36.92,6.31,36.71,6a14.32,14.32,0,0,0-1.94-1.87A10.29,10.29,0,0,0,33.77,5Z"/><path class="cls-4" d="M42,8a3.5,3.5,0,0,0-3.5,3.5A3.47,3.47,0,0,0,38.85,13v0a3.54,3.54,0,0,0,.35.53L33.38,20,34.64,9.93A3.5,3.5,0,0,0,37.14,8h0V8A3.47,3.47,0,0,0,37.5,6.5a3.5,3.5,0,0,0-7,0A3.47,3.47,0,0,0,30.85,8V8h0a3.49,3.49,0,0,0,.92,1.14l-4.33,8.65-2-11.2A3.48,3.48,0,0,0,27.14,5h0V5A3.47,3.47,0,0,0,27.5,3.5a3.5,3.5,0,0,0-7,0A3.47,3.47,0,0,0,20.85,5V5h0a3.5,3.5,0,0,0,1.65,1.6l-2,11.19L16.21,9.19a3.46,3.46,0,0,0,.92-1.14h0V8A3.47,3.47,0,0,0,17.5,6.5a3.5,3.5,0,0,0-7,0A3.47,3.47,0,0,0,10.85,8V8h0a3.5,3.5,0,0,0,2.5,1.88L14.62,20,8.78,13.58a3.52,3.52,0,0,0,.35-.52h0v0A3.47,3.47,0,0,0,9.5,11.5a3.5,3.5,0,0,0-7,0A3.47,3.47,0,0,0,2.85,13v0h0A3.51,3.51,0,0,0,6,15h.07l6.48,17H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38a1,1,0,0,0-1-1H37V33a1,1,0,0,0-1-1h-.55l6.48-17H42a3.51,3.51,0,0,0,3.14-2h0v0a3.47,3.47,0,0,0,.35-1.53A3.5,3.5,0,0,0,42,8ZM34,5a1.5,1.5,0,1,1-.26,3,1.53,1.53,0,0,1-1.09-.83A1.5,1.5,0,0,1,34,5ZM24,2a1.5,1.5,0,0,1,1.35,2.15h0A1.5,1.5,0,0,1,24.17,5a.89.89,0,0,1-.38,0,1.48,1.48,0,0,1-1.12-.81h0A1.5,1.5,0,0,1,24,2ZM12.66,7.17h0a1.5,1.5,0,1,1,2.7,0h0a1.52,1.52,0,0,1-.84.74,1.08,1.08,0,0,1-.34.08L14,8A1.5,1.5,0,0,1,12.66,7.17Zm-8,5A1.5,1.5,0,1,1,7.5,11.5,1.53,1.53,0,0,1,6,13,1.51,1.51,0,0,1,4.65,12.15ZM39,42H9V39H39ZM13,37V34H35v3Zm1.69-5L8.82,16.59l6.45,7.08a1,1,0,0,0,1.73-.8l-1.27-10.2,4.39,8.77A1,1,0,0,0,21,22h.14a1,1,0,0,0,.84-.82L24,9.74l2,11.43a1,1,0,0,0,.84.82H27a1,1,0,0,0,.89-.55l4.39-8.77L31,22.88a1,1,0,0,0,1.73.8l6.45-7.08L33.31,32ZM43.34,12.17A1.5,1.5,0,0,1,42,13a1.14,1.14,0,0,1-.68-.15,1.49,1.49,0,0,1-.58-.65A1.67,1.67,0,0,1,40.66,11a1.49,1.49,0,0,1,.55-.76A1.44,1.44,0,0,1,42,10a1.48,1.48,0,0,1,1.48,1.5A1.55,1.55,0,0,1,43.34,12.17Z"/></svg>

web/chess/public/chess/white_knight.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#efd5bb;}.cls-2{fill:#dca898;}.cls-3{fill:#fff;}.cls-4{fill:#42210b;}</style></defs><title/><polygon class="cls-1" points="25.56 1.38 35.91 14.22 33.3 26.55 34.13 33 36 33 36 38 40 38 40 43 8 43 8 38 12.11 38.13 12.44 32.94 13.94 32.81 14.06 25.06 22.19 16.94 12.38 17.86 10.88 10.94 24.56 5.88 25.56 1.38"/><rect class="cls-2" height="5.06" width="4.44" x="31.19" y="33"/><rect class="cls-3" height="5.06" width="4.73" x="12.25" y="32.97"/><rect class="cls-2" height="5.06" width="4.78" x="35" y="37.94"/><rect class="cls-3" height="5.06" width="4.78" x="8" y="37.97"/><path class="cls-2" d="M33,27c.08.12,1.09,5.8,1.09,5.8l-3.3.21-.07-.31c-.93,0-3.24-.24-3.24-.24L27.6,32a.75.75,0,0,1,.16-.06l.42-.19a4.14,4.14,0,0,0,1.11-.81,2.36,2.36,0,0,0,.63-1.27,4.71,4.71,0,0,0-.13-1.42l-.08-.39a3.71,3.71,0,0,1,.09-1.9l3.34-10.58a1.85,1.85,0,0,0-.25-1.61l-7-10L25.38,2.2l.18-.82L35.62,13.87S32.92,26.83,33,27Z"/><path class="cls-2" d="M29.94,29l-.11-.5.06.23A2.56,2.56,0,0,1,29.94,29Z"/><path class="cls-3" d="M19.14,32l-.27-.12A3.44,3.44,0,0,1,17,28.75v-.61a6.23,6.23,0,0,1,1-3.4l4.54-7-.6-.61-7.89,7.89L14,33h3v-.4l2.22-.15Z"/><path class="cls-2" d="M11.85,16.29l.37,1.7,10.59-.4.75-.73a1.46,1.46,0,0,0,.44-1h0a1.46,1.46,0,0,0-1.68-1.45Z"/><path class="cls-3" d="M15.57,9.62l-4.29,1.17,0,.12h0l.1.56.07.48c-.73.11-.42,1.38-.42,1.38l.74.22.08.44H12l.4-.11s-.3-1.51,8.24-4.42l3.5-1.18A2.68,2.68,0,0,0,26,6h0Z"/><path class="cls-4" d="M40,37H37V33a1,1,0,0,0-1-1H34.85L34,27l3-12.81a1,1,0,0,0-.21-.87l-11-13A1,1,0,0,0,24,1V5.3L10.66,10.06A1,1,0,0,0,10,11.14l1,7A1,1,0,0,0,12.1,19l7.21-.72-6,6A1,1,0,0,0,13,25v7H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38A1,1,0,0,0,40,37ZM15,25.41l7.71-7.71A1,1,0,0,0,21.9,16l-9,.9-.75-5.24L25.34,6.94h0A1,1,0,0,0,26,6V3.73l8.91,10.53L32,26.77a1,1,0,0,0,0,.39L32.82,32H23V28.24l1.89-3.79a1,1,0,1,0-1.79-.89l-2,4A1,1,0,0,0,21,28v4H15ZM13,34H35v3H13Zm26,8H9V39H39Z"/></svg>

web/chess/public/chess/white_pawn.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#efd5bb;}.cls-2{fill:#dca898;}.cls-3{fill:#fff;}.cls-4{fill:#42210b;}</style></defs><title/><path class="cls-1" d="M36,38V33H33.81a27.64,27.64,0,0,1-3.69-5.63c-.93-1.9-1.27-5.12-1.38-7.52a9,9,0,1,0-9.41,0,51.43,51.43,0,0,1-1.64,7.61A24.85,24.85,0,0,1,14,33H12v5H8v5H40V38Z"/><rect class="cls-2" height="5.06" width="4.44" x="31.19" y="33"/><rect class="cls-3" height="5.06" width="4.44" x="12.25" y="32.97"/><rect class="cls-2" height="5.06" width="4.78" x="35" y="37.94"/><rect class="cls-3" height="5.06" width="4.78" x="8" y="37.97"/><path class="cls-3" d="M21.14,20.89a35.41,35.41,0,0,1-1.25,7.18c-.83,2.32-.41,3.65.47,3.94S16,32.7,16,32.83s-1.37-.59-1.37-.59,3-3.53,3.57-6.51,1.12-5.85,1.12-5.85Z"/><path class="cls-3" d="M21.4,4.44A9.17,9.17,0,0,0,17.56,12a8.45,8.45,0,0,0,3.83,7.56l-2.07.33s-4.89-3.35-4.24-8.43A9.75,9.75,0,0,1,20,4.28Z"/><path class="cls-2" d="M25.69,4.16A9.56,9.56,0,0,1,29.52,12a8.8,8.8,0,0,1-3.83,7.83l2.07.34S32.65,16.7,32,11.44A10.06,10.06,0,0,0,27.13,4Z"/><path class="cls-2" d="M31.19,32.85a15.2,15.2,0,0,1-3.37-6.14c-.88-3.14-.79-4.69-2.5-4.79C24.2,21.85,28,20,28,20l1.81,4.58,3.38,7.63Z"/><path class="cls-4" d="M40,37H37V33a1,1,0,0,0-1-1H34.38c-1-.92-4.38-4.67-4.38-12v0a10,10,0,1,0-12,0v0c0,7.33-3.41,11.08-4.38,12H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38A1,1,0,0,0,40,37ZM16,12a8,8,0,1,1,8,8A8,8,0,0,1,16,12Zm4,9.14a9.92,9.92,0,0,0,8.08,0A19,19,0,0,0,31.72,32H16.28A19,19,0,0,0,20,21.14ZM13,34H35v3H13Zm26,8H9V39H39Z"/></svg>

web/chess/public/chess/white_queen.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#efd5bb;}.cls-2{fill:#dca898;}.cls-3{fill:#fff;}.cls-4{fill:#42210b;}</style></defs><title/><path class="cls-1" d="M40.93,24.22c4.53-6.88.8-13.86-5.36-15.28S23.92,11,23.92,11h-.13S18.31,7.52,12.15,8.94,2.25,17.42,6.78,24.3,14.83,33,14.83,33H12l-.25,5H8l-.21,5H39.92l-.21-5H36l-.25-5H32.88S36.4,31.1,40.93,24.22Z"/><polyline class="cls-2" points="35.63 33 35.63 38.06 31.19 38.06 31.19 33"/><polyline class="cls-3" points="16.98 32.97 16.98 38.03 12.25 38.03 12.25 32.97"/><rect class="cls-2" height="5.06" width="4.78" x="35" y="37.94"/><polyline class="cls-3" points="8 37.97 12.78 37.97 12.78 43.03 8 43.03"/><path class="cls-2" d="M33.81,8.6a6.49,6.49,0,0,0-2.35.4H30l-5.79,2.38-.37.61-2.36,2S33,8.12,37.33,11.48a7,7,0,0,1,2.55,5.68c0,4.71-4.59,9.82-7.6,12.67A9.07,9.07,0,0,1,27.06,32l3,.64.17.32h3.69s9.51-8.06,9.22-14.75S38.28,8.23,33.81,8.6Z"/><path class="cls-3" d="M15.6,29.84c-3-2.85-7.6-8-7.6-12.67A7.3,7.3,0,0,1,13.19,10a13.6,13.6,0,0,1,4.51-.16l-1.32-1s-2.66-.55-3-.55a.84.84,0,0,0-.41.26C8.88,8.81,5,12.11,4.78,18.25,4.49,24.94,14,33,14,33h3.69l.17-.32,3-.64A9.07,9.07,0,0,1,15.6,29.84Z"/><path class="cls-4" d="M40,37H37V33a1,1,0,0,0-1-1h-.14C38.93,29.32,44,24,44,18a10.72,10.72,0,0,0-4.61-9C35.9,6.75,31.06,6.92,25,9.47V5h3a1,1,0,0,0,0-2H25V1a1,1,0,0,0-2,0V3H20a1,1,0,0,0,0,2h3V9.47C16.94,6.92,12.1,6.75,8.61,9A10.72,10.72,0,0,0,4,18c0,6,5.07,11.32,8.14,14H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38A1,1,0,0,0,40,37ZM6,18a8.84,8.84,0,0,1,3.68-7.34c3.11-2,7.91-1.55,13.89,1.24a1,1,0,0,0,.85,0c6-2.79,10.79-3.22,13.89-1.24A8.84,8.84,0,0,1,42,18c0,6.74-7.88,12.92-9.33,14H15.33C13.88,30.93,6,24.75,6,18Zm7,16H35v3H13Zm26,8H9V39H39Z"/></svg>

web/chess/public/chess/white_rook.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="icons" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#efd5bb;}.cls-2{fill:#dca898;}.cls-3{fill:#fff;}.cls-4{fill:#42210b;}</style></defs><title/><path class="cls-1" d="M35.81,38.13l0-5.28-1.91.06A76.4,76.4,0,0,1,31,23.69,61.47,61.47,0,0,1,30.34,15H36V3H31V8H27V3H21V8H17V3H12V15h5.88c0-.08,0,0,0,0h0s0,0,0,.07c-.06,1-.51,8.14-1.41,10.73C15.51,28.57,14.13,33,14,33s-2-.07-2-.07V38H8v5H40V38Z"/><rect class="cls-2" height="12.25" width="2.94" x="33.28" y="2.72"/><rect class="cls-3" height="12.25" width="2.94" x="11.53" y="2.72"/><path class="cls-2" d="M34,33H31.5c-2.67-3.48-3.82-10.85-4.27-15a3.42,3.42,0,0,0-2.51-2l1.59-1.31.68.69c0-.25,0-.38,0-.38h3.15s.09,4.33.36,6.83S34,33,34,33Z"/><rect class="cls-2" height="5.06" width="4.44" x="31.19" y="33"/><rect class="cls-3" height="5.06" width="4.44" x="12.25" y="32.97"/><rect class="cls-2" height="5.06" width="4.78" x="35" y="37.94"/><rect class="cls-3" height="5.06" width="4.78" x="8" y="37.97"/><path class="cls-3" d="M21,15s-.7,13-4.53,18h-2.5s3.24-8.67,3.52-11.17.36-6.83.36-6.83Z"/><path class="cls-3" d="M21,32s-3.07-.26-2.55-2.89S17,30.42,16.91,30.55s-.72,2.23-.72,2.23Z"/><path class="cls-4" d="M40,37H37V33a1,1,0,0,0-1-1H34.67A50.84,50.84,0,0,1,31,16h5a1,1,0,0,0,1-1V3a1,1,0,0,0-1-1H31a1,1,0,0,0-1,1V7H28V3a1,1,0,0,0-1-1H21a1,1,0,0,0-1,1V7H18V3a1,1,0,0,0-1-1H12a1,1,0,0,0-1,1V15a1,1,0,0,0,1,1h5a50.94,50.94,0,0,1-3.64,16H12a1,1,0,0,0-1,1v4H8a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V38A1,1,0,0,0,40,37ZM13,4h3V8a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V4h4V8a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V4h3V14H13Zm6,12H29a51.46,51.46,0,0,0,3.49,16h-17A51.46,51.46,0,0,0,19,16ZM13,34H35v3H13Zm26,8H9V39H39Z"/></svg>

web/chess/src/App.css

@@ -0,0 +1,84 @@
+.chessBoard{
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    width: 400px;
+    height: 480px;
+    border: 5px solid #BF9970;
+    border-radius: 10px;
+    background: #E1BD97;
+}
+.homeMenu h1{
+    text-align: center;
+    font-size: 50px;
+    margin: 50px;
+}
+.homeMenu ul{
+    list-style-type: none;
+    padding: 0;
+    margin: auto;
+    text-align: center;
+    font-size: 30px;
+    width: 250px;
+}
+.homeMenu ul li{
+    margin-top: 20px;
+    border: 1px solid black;
+    cursor: pointer;
+}
+
+.configure{
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    width: 400px;
+    height: 400px;
+    border: 5px solid #f6f1f1;
+    border-radius: 10px;
+    background: #f8f5f5;
+    user-select: none;
+}
+
+.configure .x{
+    position: absolute;
+    font-size: 20px;
+    right: 5%;
+    top: 5%;
+    cursor: pointer;
+}
+.configure .title{
+    position: absolute;
+    font-size: 20px;
+    left: 5%;
+    top: 5%;
+}
+.configure .option{
+    position: absolute;
+    top: 15%;
+    width: 100%;
+    background: #FAFAFA;
+}
+.configure .option span{
+    font-size: 20px;
+    display: block;
+    margin-left: 5%;
+}
+.configure .option select{
+    display: block;
+    width: 90%;
+    margin-left: 5%;
+    height: 40px;
+}
+.configure .start{
+    position: absolute;
+    font-size: 25px;
+    right: 5%;
+    bottom: 5%;
+    cursor: pointer;
+}

web/chess/src/App.tsx

@@ -1,29 +1,103 @@
-import React, { useEffect, useState } from 'react';
+import init, {ChessGame} from '../pkg';
-import init, { ChessGame } from '../pkg'; // 确保路径正确
+import React, {useContext, useEffect, useState, createContext, useRef} from "react"; // 确保路径正确
+import "./App.css"
+
+const chessGameContext = createContext<{
+    chessGame: ChessGame | undefined;
+    setChessGame: React.Dispatch<React.SetStateAction<ChessGame | undefined>>;
+}>({
+    chessGame: undefined, setChessGame: () => {
+    }
+});
+
+const gameStateContext = createContext<{
+    gameState: boolean;
+    setGameState: React.Dispatch<React.SetStateAction<boolean>>;
+}>({
+    gameState: false, setGameState: () => {
+    }
+});
+
 
 const App: React.FC = () => {
-
+    const [wasmLoading, setWasmLoading] = useState(false);
-
+    const [gameState, setGameState] = useState(true);
+    const [chessGame, setChessGame] = useState<undefined | ChessGame>(undefined);
     useEffect(() => {
-        const loadWasm = async () => {
+        const load = async () => {
             try {
-                await init() // 初始化 WASM 模块
+                await init();
-                const chessboard= ChessGame.new(5*60)
+                setWasmLoading(true);
-                console.log(chessboard.render())
+            } catch (e) {
-
+                console.log("wasm加载失败:", e)
-            } catch (error) {
-                console.error("Failed to load WASM module:", error);
             }
-        };
+        }
-
+        load();
-        loadWasm();
     }, []);
-
+    if (!wasmLoading) {
+        return <div>正在获取 wasm...</div>;
+    }
     return (
-        <div>
+        <gameStateContext.Provider value={{gameState, setGameState}}>
-            <h1>WASM Module Loaded</h1>
+            <chessGameContext.Provider value={{chessGame, setChessGame}}>
-        </div>
+                <div>
+                    {gameState ? <Home/> : <Game/>}
+                </div>
+            </chessGameContext.Provider>
+        </gameStateContext.Provider>
     );
 };
 
+
+const Home: React.FC = () => {
+    const [configureState, setConfigureState] = useState<boolean>(false);
+    const {setGameState} = useContext(gameStateContext);
+    const handleClick = () => {
+        setConfigureState(true);
+    };
+
+    return (
+        configureState ? (
+            <div className="configure">
+                <span className="title">配置菜单</span>
+                <span className="x" onClick={()=>{setConfigureState(false)}}>✕</span>
+                <div className="option">
+                    <span>模式</span>
+                    <select>
+                        <option>1</option>
+                        <option>2</option>
+                    </select>
+                    <span>每轮时间</span>
+                    <select>
+                        <option>1</option>
+                        <option>2</option>
+                    </select>
+                    <span>每位玩家分钟数</span>
+                    <select>
+                        <option>1</option>
+                        <option>2</option>
+                    </select>
+                    <span>谁先玩</span>
+                    <select>
+                        <option>1</option>
+                        <option>2</option>
+                    </select>
+                </div>
+                <span className="start">开始</span>
+            </div>
+        ) : (
+            <div className="homeMenu chessBoard">
+                <h1>国际象棋</h1>
+                <ul>
+                    <li onClick={handleClick}>创建对局</li>
+                </ul>
+            </div>
+        )
+    )
+};
+
+const Game: React.FC = () => {
+    return (<div>游戏</div>)
+}
+
 export default App;

web/chess/src/index.css

@@ -1,68 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

web/chess/src/lib.rs

@@ -10,7 +10,7 @@ enum Grade {
     Bishop,
     Knight,
     Pawn,
-    None
+    None,
 }
 
 impl Grade {
@@ -32,7 +32,6 @@ enum Camp {
     Black,
     White,
 }
-
 impl Camp {
     fn as_str(&self) -> &'static str {
         match self {
@@ -40,8 +39,16 @@ impl Camp {
             Camp::White => "white",
         }
     }
+    fn from_string(s: String) -> Camp {
+        match s.as_str() {
+            "black" => Camp::Black,
+            "white" => Camp::White,
+            _ => Camp::White,
+        }
+    }
 }
 
+
 struct Chessman {
     grade: Grade,
     camp: Camp,
@@ -49,19 +56,20 @@ struct Chessman {
 
 struct Player {
     username: String,
-    time:u32,
+    score: u32,
-    score:u32
 }
 
+
 #[wasm_bindgen]
 pub struct ChessGame {
     players: HashMap<Camp, Player>,
-    chess: Vec<Chessman>,
+    chessboard: Vec<Chessman>,
+    current: Camp,
 }
 
 impl fmt::Display for ChessGame {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        for line in self.chess.as_slice().chunks(8) {
+        for line in self.chessboard.as_slice().chunks(8) {
             for square in line {
                 write!(f, " ")?;
                 match square.camp {
@@ -97,7 +105,7 @@ impl fmt::Display for ChessGame {
 
 #[wasm_bindgen]
 impl ChessGame {
-    pub fn new(time:u32) -> ChessGame {
+    pub fn new(current: String) -> ChessGame {
         fn level_position(index: u8) -> Grade {
             match index {
                 0 | 7 => Grade::Rook,
@@ -112,19 +120,30 @@ impl ChessGame {
             let row = i / 8;
             let color = if row == 0 || row == 1 { Camp::Black } else { Camp::White };
             if row == 1 || row == 6 {
-                return Chessman { grade: Grade::Pawn, camp: color }
+                return Chessman { grade: Grade::Pawn, camp: color };
             } else if row == 0 || row == 7 {
                 return Chessman { grade: level_position(i % 8), camp: color }
-            }  else {
+            } else {
                 Chessman { grade: Grade::None, camp: color }
             }
         }).collect();
-        let mut players=HashMap::new();
+        let mut players = HashMap::new();
-        players.insert(Camp::Black, Player{username:String::from("黑色玩家"), time, score:0 });
+        players.insert(Camp::Black, Player { username: String::from("黑色玩家"), score: 0 });
-        players.insert(Camp::White, Player{username:String::from("白色玩家"), time, score:0 });
+        players.insert(Camp::White, Player { username: String::from("白色玩家"), score: 0 });
 
-        ChessGame { players, chess: chess_game }
+        ChessGame { current: Camp::from_string(current), players, chessboard: chess_game }
     }
     pub fn render(&self) -> String { self.to_string() }
 }
 
+#[wasm_bindgen]
+impl ChessGame {
+    pub fn get_chessboard(&self) -> Vec<JsValue> {
+        let mut chessboard = Vec::new();
+        for i in self.chessboard.iter() {
+            let chess = vec![i.grade.as_str().to_string(), i.camp.as_str().to_string()];
+            chessboard.push(JsValue::from(chess));
+        };
+        chessboard
+    }
+}

web/chess/src/main.tsx

@@ -1,11 +1,8 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import WasmComponent from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
     <WasmComponent />
-  </StrictMode>,
 )