From 21951b4891e0f7171818848c29e700081e8062b8 Mon Sep 17 00:00:00 2001 From: Sage Vaillancourt Date: Sun, 27 Dec 2020 23:58:51 -0500 Subject: [PATCH] Begin chess implementation --- public/black_bishop.png | Bin 0 -> 801 bytes public/black_king.png | Bin 0 -> 1149 bytes public/black_knight.png | Bin 0 -> 1124 bytes public/black_pawn.png | Bin 0 -> 605 bytes public/black_queen.png | Bin 0 -> 1271 bytes public/black_rook.png | Bin 0 -> 417 bytes public/white_bishop.png | Bin 0 -> 1034 bytes public/white_king.png | Bin 0 -> 1122 bytes public/white_knight.png | Bin 0 -> 1325 bytes public/white_pawn.png | Bin 0 -> 754 bytes public/white_queen.png | Bin 0 -> 1394 bytes public/white_rook.png | Bin 0 -> 626 bytes src/index.css | 12 ++- src/index.js | 168 ++++++++++++++++++++++++++++++++++------ 14 files changed, 155 insertions(+), 25 deletions(-) create mode 100644 public/black_bishop.png create mode 100644 public/black_king.png create mode 100644 public/black_knight.png create mode 100644 public/black_pawn.png create mode 100644 public/black_queen.png create mode 100644 public/black_rook.png create mode 100644 public/white_bishop.png create mode 100644 public/white_king.png create mode 100644 public/white_knight.png create mode 100644 public/white_pawn.png create mode 100644 public/white_queen.png create mode 100644 public/white_rook.png diff --git a/public/black_bishop.png b/public/black_bishop.png new file mode 100644 index 0000000000000000000000000000000000000000..89a46288cf715ef43f06d2ce0afb89c820b99e72 GIT binary patch literal 801 zcmeAS@N?(olHy`uVBq!ia0vp^x**KK0wgC0YY74=mUKs7M+SzC{oH>NS%G|oWRD45bDP46hOx7_4S6Fo+k-*%fF5lweBoc6VX;-`;;_Kaj^> z;_2(k{)C5%M~va$xlNCN@|vD5jv*e$-%j7_FA^wnw4Ql(D3i_+rkpJY4joZY6PxX8 zFtMxaLHbJ8`U7nV3)wVsb#+#B_D;JoLtvY7jp&NT8#gBG;5_Noc#=t5`}4CX1M8WQ zY4_gjlhx(B#-#wom-yNF&MAI@u`y{Y-#^>4d&#iO3UQf8Z&Gwz+lg!#{ zuQ1EMd#ind-ihxLj$O~5Pq?n}J|kG3tKEEU&juZNi?Y3uJFl-S*O}05yl}&g1FBXT z>dYkdP>`E!S7o$Hy@U{wa721w{&-g z_?k)i8FlRj!5zy>e{dzxD-=eEie?PQ6$?!_3!96*R5=%z^1hwZt`|BqgyV)hf9t z6-Y4{85kMp8XD;u8iW`cSs58w85n3A7ywCY<+aCAH00)|WTsW(*5FkqS`E~|;OXk; Jvd$@?2>@0-N`3$U literal 0 HcmV?d00001 diff --git a/public/black_king.png b/public/black_king.png new file mode 100644 index 0000000000000000000000000000000000000000..5a23105b2a5e97e49840a40198017ea01d92b651 GIT binary patch literal 1149 zcmV-@1cLjCP)004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00002 zVoOIv0RM-N%)bBt00(qQO+^Rf3b%Ag-Jv~R7l6|mtAOAbr{D#`@6Nx zDRVY;I=mS4+y5iin8l%Be%fqKgKJxYUNp zU--uyGv>>MqNRd!HurkYrwjjz&U4oOu|UY@xjMh!^ZlIPdCqg5-|xUf`=8ll8kqdw zpsSFo(Z{am07)dt0oIR9l6Ww3onb;Ah*g)c7uie6XoJf*Pe4e(dCEo;oFK^{A~HyF zG}AagjlJ#jM(0DX@-q{uVIF1VbCF~0;p|XM){yH0 zKB;(TdEzO@X8l1b{2|fN%UATV=^k_~V|n+9+}Fd3Lm$)Gp4K-aMOb6t9&w+6%VJ~n`Hslq8xV40 zUPB|B*@mp(L%xrRc?9SWBc}@LZuo7?ig1i4)TD{ni0|w&e|Pk4D|b3zd8~A$x-xcl zmILmH|4yegU-hI#G2$w{uYPX(MBBXVl;-$PX8M9_Jsx*zq`XqCjGUS3aeG{Fjp@Vn zl(|c9c6r`~X;GflZnfT&7wl9!y~iT%<__OOVAeAS>!v)(ZhmA1 z)r=+J9PM1<27_cXo~e}c7-P7}PweA0)^Lhdf2J1F_Rrn0Xk5c*2I?h0cd_{qDad!R zUwBCk+~v3iiX!?(G`-^e+E1JKhCU#NGG;KD@nkc|4K8zvGYkN^yv?g@-k92+>F#ZX zTWqo4`>o#=xA^p}XUOo_Q&r;;HSn0Vu6DMi7K(+II@{HL>@frNh&7p_H?GsuZn)F$ zqP*A*o>4chi|NsEtDbeJosc}{@e<|CpqOzKa-F}p%I~z(!eM$zP)^$dnn$`f0?@`H z-n*;#e!Z*sX0tq9d|z@f(=EJuS!#sEm$G_UM(Em^O|sySlnGFfgEohK3d3ZQ$X{kgn!1!*1~#poxhI+04$)s;{qa-{<7NbWbrKNUjdbrl&H72SL5U32lBC4Of@w%e*jNhg!BitRC{~7`uqFcr2jcy*52N( z<>h5b(%RaZ8XFtqK*xCs*OSh0XJ_X@)`G!cHskvsLZOgGMn)t_8yg#nL?UtEsq>N^ zv!z#7RwPMFOG`Nk+u`^7H99&fNt&OZS7~YK-#|s7g*(Z}lubuRM_$r^%F4>LxVR`u z8XO!<0bdtVH~{=Y#^meo?^jz}Ti(KUw6wG+l}ag*NT|NPJ_TGal=SOf<=kR;cvzA& zG&GdLYy&(~2HeHG;m$?6uC7kWWKxMlLg8>Y1w49|)LFZ{w=m<`%H>YeD4TYho0~K> zH4%wK*xcOIN`ol1UzI}mKBXg ziAJMX)|tc8&gz?(73Uf`oQz_z7y!-9%>tgxwp}J)0*Tt%+JhHKZEdaFBfbax3p}50 zUjoEk>Ys@2?rura%*>2{Kl72k4J0kgQZyP>G#Zsgyf z-T?M9uDyqu{ci0~kVqt0Utb5Hrltm5j%ZHOqrf63XTL3LVJ6&H$F9E&ypxM;CabHf z08~{~f%!ynDo)b-z|+8|z>mNW8L|Lh03RP~^BiUZ=ekTDu)VzvKxJj6fU8dR+#caN z=F!{S#C(LggE?hq(g}=U#ioB(d^R7er4d5F*3Ipuy>;Mo91_4T) z>Urt}GwyC<_S|0o>)-_z36yXG=2azR&U^eI2vsC^+_nbi#}DRSKNx^78Vm>Urt(TaWEeFg7+8 qURYRoV0wD`E+^l%MT!*pKk*;F34^HTFIzeQ0000NS%G|oWRD45bDP46hOx7_4S6Fo+k-*%fF5lweBoc6VX;-`;;_Kaj^> z;_2(k{)C5{M@OJ8M|u_m17oVEi(`n#@weA}y$(Bw9QatTyrnMTkAtJRUR1z~b1s77 ziyrL~-!Of`qg0y)>+f-k*4j2UiLb~N3Gy(~b2@Nj$=s7Y(kH8T`}{Pl)&Fc1;41oG zKkL%|JrAcb->ZCd^9h@doB)dp3y0jsGZ$@LwBGw1)UFZy+n{V0Iqm1_?!{-bR;im_ z%b30J@0@gFW7d_AQ@I`mns3e)w+|MOKYnCh{|64Ee2<3X3+?`X;_my{s8=)duv+E9 z@Yj5S2fbX}`}35z!dP@|t5!al#q!rI{cY&_-s{D;DwbON{btpVkFVci)zTtqq4FT& zzYd?E<(7m6<#PT%Pw2YGOft-i+;Mb^K;K8svqlBY7h^1rxtm;h`I|Lol5J?k?98k` z;;Bbke79b{ksAA|FX-^H)mBTLPd2sigg&VCG&^bgvuTcY*)yMcWnA_QKPUfonRhRA zk#pIT%;?NjkvV^4b5Gx2AG>YJEsJaWtwI(G-=E|n_SNr(R|GH)R7+eVN>UO_QmvAU zQh^kMk%5tcuAz~xp<#%jk(G&wm7$rofq|8Q!TnjAzoBTz%}>cptHiBg-EnR&paup{ LS3j3^P6004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00002 zVoOIv0RM-N%)bBt00(qQO+^Rf3MM#Wv1N-;zwvGxNj6)46B$OdEd0U;q#L?y9Aec;I`Jd5y96HL*E8lh;KkQ(R{ z0r4ZIw1pSNl+xOzVo0DZn^L-^d*}GTWt`5=><;nGa3;H%bMLwTIp=@QJ#z={%l|-v zzAel6h!0s#KlA_fp{*R@2K~Q?>at$m9Pr6#A?&pwm-7(;ryIy{$ucei47O=)1z{k}3axL$&^G8qXMk>6IpbC@V+g&L zwhx73OmC5QHIwh?Ei{Tk@u_9qgYc(!UH1VS*kXAt7$kTBfJPLcXarylH5iEH^;S0N z^&ZfJfbcoh0E7`h@g@LG7(h@b@(mOqECQgKb_6)*y}e)5iTD%F0)I?KWE5o`N`uvE!|dl_0zj6t z`J3r(D{PZ17Qd#A4!fS^ifwLp{-!!;Yn_X&rXTQdB*0=@yB)~ybu`CAr@yB4@0^Ji zdcRC~1n+!+b9}-H6v~1A+g?H;o(e2w2}>x}PECT|wvrd<8+8Nz%-7 zlmal#1h<){oG=ej2EZ-O@e9ZK^-d)oDEz_=(6vjhiAY9%lFwwbJS&wBLMo+BHp_nb zSu!GWO?C-go~d3K$)1ay=BrXJ6uipiHR&|>Ty%-v<5>xQZ!Re{{P>YJ`)7HYl<#9m z@}T&Zr<%I!#R~Cr6|1`I)c8M@^@z;K33*>yB;o-Xkrw$t zdSymLT6=sGaytGJNj9(%P^3t4nMrOlMU*gAJWhfHL12guPH;NzUd6f6^i1C{bHJn2 z(?Bf=5|mL+h%D3GBt?p01{vTgu!v>+)XVd0sf+oVMZBel38YmP(l@Po?sa(i2+yno}P5?(%kmsF12(R7wXk}@{J6c z8JAkl$dGwh+N53?7wDkYFW3KmVl>i3gHao=iC2_RNf5;iW*JY9kD4R&bCv;adN(7# zUosUGQ^^f7q`l$pOCI?LoUm^;%=iJu0000bbVXQnWMOn=I%9HWVRU5xGB7eQEip1J zF)&myF*-ChIyE;dFfckWFzWD|+5i9mC3HntbYx+4WjbwdWNBu305UK#FfB1MEio`u hF)=zcHaayoD=;uRFff~~BW3^q002ovPDHLkV1lE1BJ2PF literal 0 HcmV?d00001 diff --git a/public/black_rook.png b/public/black_rook.png new file mode 100644 index 0000000000000000000000000000000000000000..ca16e6b74e4142fd5a25f872325dacaee5ecdbde GIT binary patch literal 417 zcmV;S0bc%zP)eZAP9mWoHG{=**Sp6&a*cF?>!l6 zuA5XyA4{K6Zh0ad3z3e6NXJ5?W8o`(#WbI*PcIW=%$DQ8q_y4xn8c8N z1xXg_K@`ca?1|T_jvTM6M(0puVHr@+i#FUbL)>qS$c0 z&lY3M#?Cm-8_cPzu29u`JvPeMW0caA%bE|g_Y<-Bj5tdW1Ydptt`pa}NS%G|oWRD45bDP46hOx7_4S6Fo+k-*%fF5lweBoc6VX;-`;;_Kaj^> z;_2(k{)C5%hhO_-(W6}q49r5FE{-7{$KOu(%@GZiXq#`Gp2wZLQ`df>j*HJx6R8|w zj|B@Rwg`l~EZreeayZQOiTVLClU>aluJM+pA52o%pBu|j?FOv~qIjN|Xkd2gNmVCO&Wo9PnK=f%`cgxYl&r-{vs z^b41&VW?fASF3U4->F5`aYb>HuB#nix^%CQ?$ou5vY%e*<9o?2EAnXXsYTg4^ICd# z_~oh|WPiKi;=6*F{7Pl(Gwf5lzFS{;_CCw+?yZM{vZwp^9xS{4Vd);RCtq80Hk4;X zgsq!3-{{{bn=k+V-2Hy4qWJO5qMaVgFKqw3LvG=`pUd-GEM|(`k?`FsFV?d|v!r;U zA-j`_XY#F8g8xn=pUYmqjWhRh+}!iq|LO@(((-aLyH#G6S$t@Ee4_fdyC#OSHOhUu zLvuPxd;;}+uV_16-PP1K>(9;wTU)fkrZFE$y?FWJna8V+^4{KgKAY89PWb7ekXfF! z%dct&>fXEOW$w(kSex^KpCaFK=i?vsx2{{wv%}j|Z`bq$4K=}iiu)eMtq)(VX)ssv z*O&gz-*<2SnOZhgvdsO0PiLRxgx@-xf3Cc3tiAHa&FhBYqO^4R!1;2uhgNLwxxUxv zQAN@@)kVLvx4+S`UKB07|I(yOuUD*8e0Z5xEz9ezds;!i+9?U6g|?@7mVW=0{Mc-V z@~&kET`xGsUS6J6a;&(-()&hPvE?i`4Zg_zhAFi&0$s~|)pPwd=c-1pjy&w86S<)8 z>z%~(ufK^w(z1CKyW7fSHQ!e4*Im_|WewdX zs;+-Mzl5sY6W_XF-c=U|)6z8$S+6l#%3bg={a{{ibjrd~!Qd3f-x%J_dNt=-FTDt! zbN76p+$ZV9J8Hh)`BpfK@$Ti25aDgJ)HW|#pno_kE>$@Gb=O0a=U%$3O{-s-B*c6< z()T;GcyrvQWDD~pcJKVQ-OYPjIq^pN*_eQXb{|(e%}qKXlAFTKd-J$7&qrhaPmcOK z|6DqgXI9iLKmY&XzvsW`>n-zhpQ^&J4VYn6OI#yLQW8s2t&)pUffR$0fsui(p^>hk yL5QJ|m7%GXiLthUft7*5*ZoIsplHa=PsvQH#I2#_QB4X^1B0ilpUXO@geCw*Eykh% literal 0 HcmV?d00001 diff --git a/public/white_king.png b/public/white_king.png new file mode 100644 index 0000000000000000000000000000000000000000..513ac42933effbebbb16ac6b49024f65e412ba3c GIT binary patch literal 1122 zcmeAS@N?(olHy`uVBq!ia0vp^x**KK0wgC0YY74=mUKs7M+SzC{oH>NS%G|oWRD45bDP46hOx7_4S6Fo+k-*%fF5lweBoc6VX;-`;;_Kaj^> z;_2(k{)C5%TSmj=_7iai2IeeJ7sn8f<8P6%=5pR>z z(XOZiTt{4{{5mz;_shv^_7{JoaI7?xn7U+^oxtPCnVudUoHG_IJ(<gyhfliI4cS;1TBwS~K&d#Aox;h~t`UD112WUreP;gfWGN!FY# zOSWXmOpZEZ^v=O{mUF*=wHIgC51Z)ob@O_z?7S?M*s%WR?DU?fwU&?Vaw`2lGn?)? zQ>LA$HAg4?<3-r%QXA1abITsF<5q75aE?S7f3mNNufEiF50`aE4ed8_|@js^AY z{r4X$oNi!R9HZhc*UmBZNW~2HPNvN=50opW`=6R~&y#m$@NE&%@|eKf;N@*oLq1H| z&a`r}v}f|>sbXdq4n&0oon_b5JB|az4S1Xn^WvZPp>MDN!KU?#m z{Abob&!2fSSpqYnYKdz^NlIc#s#S7PDv)9@GB7gGH8j#SGzc*?v@)`=GBMCLFt9Q( i5N(XNLeY?$pOTqYiCaU;o#$;p4Gf;HelF{r5}E*qX74lr literal 0 HcmV?d00001 diff --git a/public/white_knight.png b/public/white_knight.png new file mode 100644 index 0000000000000000000000000000000000000000..433b989fef3c8f5109427fa3946a4cc78434c841 GIT binary patch literal 1325 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 literal 0 HcmV?d00001 diff --git a/src/index.css b/src/index.css index 79d5fee..f29dd1e 100644 --- a/src/index.css +++ b/src/index.css @@ -23,16 +23,22 @@ ol, ul { float: left; font-size: 24px; font-weight: bold; - line-height: 34px; - height: 34px; + line-height: 45px; + height: 45px; margin-right: -1px; margin-top: -1px; padding: 0; text-align: center; - width: 34px; + width: 45px; +} + +.square:hover { + background: lightblue; + transition: 50ms linear; } .square:focus { + background: #8d98e6; outline: none; } diff --git a/src/index.js b/src/index.js index 1ac8ebd..28f481b 100644 --- a/src/index.js +++ b/src/index.js @@ -2,43 +2,147 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -class Square extends React.Component { - render() { +const Pieces = { + WhitePawn: './white_pawn.png', + WhiteRook: './white_rook.png', + WhiteKnight: './white_knight.png', + WhiteBishop: './white_bishop.png', + WhiteQueen: './white_queen.png', + WhiteKing: './white_king.png', + + BlackPawn: './black_pawn.png', + BlackRook: './black_rook.png', + BlackKnight: './black_knight.png', + BlackBishop: './black_bishop.png', + BlackQueen: './black_queen.png', + BlackKing: './black_king.png', +}; + +function Square(props) { + let bg = { + backgroundImage: `url(${props.value})`, + // backgroundColor: "lightblue", + }; + if (props.value != null) { return ( - ); + } else { + return ( + + ); } } class Board extends React.Component { + constructor(props) { + super(props); + this.state = { + squares: this.reset(), + xIsNext: true, + }; + this.reset(); + } + + reset() { + let whiteRow = [ + Pieces.WhiteRook, + Pieces.WhiteKnight, + Pieces.WhiteBishop, + Pieces.WhiteQueen, + Pieces.WhiteKing, + Pieces.WhiteBishop, + Pieces.WhiteKnight, + Pieces.WhiteRook + ]; + let blackRow = [ + Pieces.BlackRook, + Pieces.BlackKnight, + Pieces.BlackBishop, + Pieces.BlackQueen, + Pieces.BlackKing, + Pieces.BlackBishop, + Pieces.BlackKnight, + Pieces.BlackRook + ]; + let squares = whiteRow.slice(); + squares = squares.concat(Array(8).fill(Pieces.WhitePawn)); + squares = squares.concat(Array(32).fill(null)); + squares = squares.concat(Array(8).fill(Pieces.BlackPawn)); + squares = squares.concat(blackRow.slice()); + return squares; + } + + handleClick(i) { + const squares = this.state.squares.slice(); + if (calculateWinner(squares) || squares[i]) { + return; + } + squares[i] = this.state.xIsNext ? 'Black' : 'White'; + this.setState({ + squares: squares, + xIsNext: !this.state.xIsNext, + }); + } + renderSquare(i) { - return ; + return ( + this.handleClick(i)} + /> + ); + } + + row(row) { + let i = row * 8; + return ( +
+ {this.renderSquare(i)} + {this.renderSquare(i + 1)} + {this.renderSquare(i + 2)} + {this.renderSquare(i + 3)} + {this.renderSquare(i + 4)} + {this.renderSquare(i + 5)} + {this.renderSquare(i + 6)} + {this.renderSquare(i + 7)} +
+ ); } render() { - const status = 'Next player: X'; + const winner = calculateWinner(this.state.squares); + let status; + if (winner) { + status = 'Winner: ' + winner; + } else { + status = 'Next player: ' + (this.state.xIsNext ? 'Black' : 'White'); + } - return ( + var texttext =
{status}
-
- {this.renderSquare(0)} - {this.renderSquare(1)} - {this.renderSquare(2)} -
-
- {this.renderSquare(3)} - {this.renderSquare(4)} - {this.renderSquare(5)} -
-
- {this.renderSquare(6)} - {this.renderSquare(7)} - {this.renderSquare(8)} -
+ {this.row(0)} + {this.row(1)} + {this.row(2)} + {this.row(3)} + {this.row(4)} + {this.row(5)} + {this.row(6)} + {this.row(7)}
+ ; + + return ( + texttext ); } } @@ -65,3 +169,23 @@ ReactDOM.render( , document.getElementById('root') ); + +function calculateWinner(squares) { + const lines = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6], + ]; + for (let i = 0; i < lines.length; i++) { + const [a, b, c] = lines[i]; + if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { + return squares[a]; + } + } + return null; +}