From 1009f2ec7647c16dc93c45c42b1255837138ba70 Mon Sep 17 00:00:00 2001 From: Jeffery Ho Date: Fri, 28 May 2021 22:52:34 +0800 Subject: [PATCH 1/3] feat(frontend): add rule content --- mysite/frontend/src/images/rules/board.png | Bin 0 -> 32020 bytes mysite/frontend/src/pages/Rules.js | 486 ++++++++++++++------- 2 files changed, 328 insertions(+), 158 deletions(-) create mode 100644 mysite/frontend/src/images/rules/board.png diff --git a/mysite/frontend/src/images/rules/board.png b/mysite/frontend/src/images/rules/board.png new file mode 100644 index 0000000000000000000000000000000000000000..fee22b92929d9653d84ebb3de13f38aa490b86ee GIT binary patch literal 32020 zcmeHwdt6gj+HR+QQ>LSmnQNKD zBfb~(=5ysDw=wXK|G>TR&Ku7?cZ<0cI{fqJo}=)0zx75~YP8x0GlxmEF7p^->fn}T zuivlF8d$Y|S>vw6se#jOqC{u@@bj-`(Kmm(^m*0g<9~Wi_M033>1$0;O3IbQI42j6 z&F4nfoei8`7kqoT>m0Q6?8eXJ+1xytc0JA2xwxtKWgp15*Nt}Y+$)Uy(0#Kxq2b}l z;j{jj-v&`AQ(f}hg4MJ%0?#s=Cm$~$$VgR@o1|Bz`93)<%A_iE?LN9>|Z`RI(<5C+E+Cd1=>226z}@S2sCtry4-2jZnu-I zR;~MLg=(4bjWev6($f6+eEtRZd;9lC2Qv>7hwx*?UCpLLme=nlSq`N?w`Mgq7*oGL z1RIQae|?ZNk$z2FVK5T3TCGMa*x}W4(7PIAH+3Azxr=R`C2O$^~-_q-t}mo>}@#ZZaRsvXB|mo5v>PmNyk={e{& z(joNjoEpvxz_@s#X@Tt}=Og`15A>IQFYKJYUVqr#ZMd#8=>Vj6@)mAfrb;=HNg4?i zZzto97lh1qRgo!`<=`nsOo#K5K6syL5ZzDYdC{|NglLOWD>z{$BTXH~Xv^o_%I;f2 zCM*fYLi}K?$qz$Ss?A$Am9LPX*O+9gwtD!v8_BjyE{txxpHOoUni@$=2<}AtwPqC2 z2Bk^m1Nx!5mql#h`AFKTHQu)vnSL2&%fa+jICkDFLsA!ue=2}XN2Bt zK0*veQU=NHsgnd-Axf|v(@;OVu@I%@4f&++;lSk4Q8yRqVZ2CuBIP1FBKqseb)o9~dXJ8xprlV@S*_E3X{2cNDXCmwt;3g4U)9IL znqX$Z9(6&X%UuIEC3y7B{k7>Q#<#?MP>)x~KySv)JZ^R+6}a@TTOU({FzQbK*DgmlH|M0Bwf6Xk-Dd(Fdc{{ME_ih58@7s4*W|QT+eJ zdw`eu>5TN_G`>IF3jF5jSjD-8CgJUBIVNrFu!R5nh2G;>GMCI~H9Sp+?+>pbJ&X(e zH#*(hP&7x6HQG!Cp_-FxBgQ+byg z<%Uqq%)v$G$p6gV{&C#&B1Zgi8V75D{clA-?VNu$w_keNIsBC0cSIgd!H81B#s!^s zX=$(D(S@fQh+h_2k$8bIi-rc0YYThIA6R#O(oy_BsPX@8SJ?IF_VFKOX?6q?rF#~Ro)?*Li|oT3 zaX8>0V@>U28L?h!m$`lMv7KCUNc3M7 z@SQs`^}F}aZMJum8t^UflEh6CT17cVKUinW&&dq*^L}9FdN<+yyqNB-ndNGKQaa)c z4l;H5H11kM^*+GDcyauPLf2C6&b&yB5R0?4Q@H^fnZ_)APji*0#^2>}zOc@Tag0hi zr-u)PS;sNQ#y;`DT|ifMj4&fBi{0TUq7%lS_LZX(wKuLCl#E+vUm`y|jeR(NJ~I7c ztfFf=;@4r;o!1S`y9Ay%n||Ds5$s_GFpSz}L#9vV2;dH-mf9a2ScB}zI)kBEQYI&Z zHYGHQXv2g5{9~Nth<$ts)?8ZbZVpFLb=FPP0WCC>U4d{;N=ak9{U*1j9ZsvhqJ_b6Q}5Wk0?$1#qom6@2Rsh&inhf z`T=NAz!ktGEnGE+!#%JGrk5B4pe06Ivj@QAHVXusEhf_zCnFAlra;w=J$feAKk2Z& zf8bTYw2?j?uJG}0k|lpBXW+djWN;~(d{y-4N9xxqgjY7cV@+I+spad>3=HAmLlwmY zHUJWRg(nAAF%Si|(w+kTTIYDx*qUJR+a773bk`*&1bL**-0`=DS4EL(On>n~iw9m6 z>7NH}t#uoOR)=)-RduNcT~nd2@~|P(&sPMIafh!N1`NGvm5M%vB3}>@v$@Bo8neT0 zYE;|1+8Y%YVb)7Q(j+cII=FixMc>U~bLeH=ofQ-19D4S=zmvarUD9YXWW0pL@|`j1 zma_?BepK3W%&ff@&7fdcX_)kfzQWhfAX0X6YrdQi<+aSV*ZN}shKoP3{P>ASK||K^ zQA>YDhG%~7@%!t`>!Zx9t<1@)?cZMB%K5zWMHXL#KG%sU zl}91VCMIz==iue@k&l@ZfdUb&Bi}Al#$x?HjW4UY;NFn=4aUomPX7LjBGw0iPSR1Q zAWZ#T=W-zuWhdx`$Xoe3?#$k}W3$Po{myr}(}&WRU0#K4k)W+x$Aze?G5O}4KQR&G z4V?^y;V5M}5<}a(rUvv?#tQ%15s$G|s2C{VXpDq!TDc-Ff%XBz6Kz>H?vr-d$&*jH zDAK>;9Fj;|-dN?`FvL4@g?&7BJG*O07}S6`K>OUcn|nb(k|maT-^*TETy2*1O)wSr z>RuGF_k!E^1#k!zO)p#!_>B!7qVVeLaALFZ%@5WWsz&SZLXL+#x1s;*!#PT0ON1{(GC zZ%xiq-%cjubgeycOq7VI-^-IC=~;!Y*vLi+x)qu{fGEjd?go#&#L@1lp7!y@%$yf| z{?baZNM<$w;w;&w%gs-^k)!- zzq3)R)8l$%<#z{-7!MqjI>hN~e?9-Aj^LAe{fKvGvII?wF0aAd)odBE9+`0W)OXRQalZZzN=yT%X*0{{Kd&5Ep<7D5^Hl;$SxhU^q-B#c=WU|u|8Fxk@mFmbZiZ7;BkR~W~(anjJolq z>~M*pEiXNUO)KlIxmB^%O$u#iDr2R&F2p|# zH^fKLEy}|O*`o4h=o6pa*)_y#=c57>%RdOv(`JnSXuE!jJ8wX3S-MH&N6f&)u!_*xgg#3%gB?a#; zfTIR;jq_k%0MEXs4p;!Atq3EB&I4TmIxFeh`>g5jQ0Qj{c>yLG{q`(#r$E*j%|6WK|rGWEEZW_e@|S|{egd4j(#e&0(R0Mn4H+rzX{c*(riF}9Kf7Hxi*c9q^H^A28v=DM6JY#q&nD0OL9|V3hQn6C zOP~*j8jMjc z)fbo~oAPGpe&xZFRgm)~b8-kX1`GzfJ;Dk8qmw`pRh!8(sr)Dbm{}qC5-rZNpAMy{iJxXUZatFx|-PYK1m!7f?v3!M%YMrN7LEl01oyhdA zo=331(K3V!aT^)H1*?22ltT#TsgiBfovnAn~3C8 zV)(YTIuiqDRFN_pAs39Hlx4bwb=N>P79@FD#B|Vo-6lfe5zm~0O7qL9qdFCByqy3w z5ZP!tdB2(wlZ>_u?5v%V_j$7EdKQMSU%{jv86)_fMbal_^l3?Prs6ke=$JdEN%NyR zFVFPDCu%-pb`OQFim~_qN+qpx&!xM36$oCTXM%}IndYb_S7(uCJ|19K-K?a~=s46K zcg)3&UwMWm#f{So$Tr=OD@)nlB)(Amj!jHNU}ylSEowZy?4ONub|B}*iK&nE=!kNT zX}ueqEF!Wo_Bf6}G|ExN-D7O4<_X|H1k`NARzo}lWsHoX9#g7~WoA>OGG%gVNI@D~ zN>>%LYkA%+18-xz52^_oEuzT!YAD~I7p|$X4F0NyMWq>K-E3xV&2>Yu!Zaer=vp(F z7}B`5+d6Em@+rtT`6B^~CFM7jG^x zbh9=56Q+=h$57g~4b-VPBsf$GBgZRQmq*v3{)pe7cNE`y+OH!%-mtnc=}Jkk8;Iq#U~OPF+uBPTDn9RU-oIlkDEebjI8Lm2y_9A*g_&8&(*z zg?_c=S*`uGA*oG!g zD{fs&kI=QSXMS!6{*cPmP?ee>F^9%3nQOR8@#9haR>L z_~Bx(yy}@vxlFm=QD?#Zb8XiF9fh6Bczfc}soWUoQ}FaNvLri}BLsg%=oMWX)cN2o zhRJV=My1S?oyAw=9#`ae2jzKvpI$!4!`-9)xrFATsgFgNVjq!NbL?ozHxyl+?DlQS zxl?l-UO;aNE}^b2;l&h&PhJ6-?>}hOln4CP`?#FUCy3SHM8pYc+CIlXTP}&_EI`TK z7DjISJ|}q29-Z&1w=YD=4dhCnfV#e;V|@f{|HS?0h~40ApCERF(|PS24Ind?y%3A} zn^&C29RJsEFvnQiYonf+=fDpK zM5` zXCETzs%d1pc3Mk@rz;RVyIrZEs+ueMsvvSE1&KCklo(T63;n2Z8qi`2;TjZO&7ckF zu$0kp$;&-1^hPAl(EM%}(Zjx5Q$Tw7Xo0(z%=K6W*{1FlQ}r?{)+(o4EK0cjYo#>@ zF6-1pUXlr>6^EcH-g<@Il8rIUq9Ah%*47O}x9AoGn`Z9duEAJ_+suk^u42XfTSz1{ zRlg<(+^8-37@e$bCX4O8Qoc#mmp;ryG|^Pk+JHaI);Teu@{DLCH8BxfNYgfxYVBq% zWnd}Y;w6A`=(<}h`)8$C9^CXI%v)&HsUnq7NydhV8Z6aX6|YO}G0A?DZIu(hD9Dqjj>q*h`k? zo_0h<5)^V7$+JvnFcnZEw%4`bZzTaA%u8^h43|=Gn)s8BX>vInMzN`y(1KKy720R; zjK*TUY5VNcf>}+rw#y13$L(-07+j3`MPnbu~Hgy$-T0CvWdmIL$an-HM_NgxVUy>7%N0d#Mwvc88_0 z@^UQ8$6{wXqH<3x4`dFkePaGN5NX+t-r4@y))*H@Skl75Y9rtCu`Ts5L(n zcy2S=m7Kmc!~`x%(_@E_R45o`Fp$<;^wimwLi*|3avnS2iL5V22GXMpmhO=Cf+&sA z$_Q6ySj+jQ6-=7vcJH~7Qm=B7yl-r2M;nu08OuE_&16#4C z`z(7$ILu*HStd@shop7iG&Qc$xb-Uf>a0f>8cedk%i)1Sg{j>Go5!7eP+`RK%qtjd zF0<5D#zP6LX9Q%c9&UG-?nV^?i^6^+jHPRvD|l&2KQ`5jvO`0HZBVb4K3$Xyheh<- zA4*(ej4X<-u2F2^>0?-$9uJq2&_+cK(cHZQHT}+Hl-*cB zw*>L+l<7a6@2vEI6Q~R~#JJkP{+mJc zgVZC0Sj-Irk3i8E(G4Q0Jx4HG1#2eB=&KUDMTt3Xy+ogC=#xhGk~Ki3{??&40f!+3u|{#KyvytaP8jY zGV1B(%S^BhN)t#AJ?B zlZ{0YHC~EzGge?8g-6uuVcQvyMs$+EqnZ`up#~~gik-m@Mx1C&=zUN9@)J`Vgh%E- z?YHhm@$_<~k;K=w1=;h3+LwvVW9&Z$*v`tFREn+B{cD0~6ZtIyoc1i>`t_mO&QlGU zd0?RU!@ub&qJO;fJ@xBPG#o}&x?eMxjd<9isHQ406xCTp#i$nH?!#^m-*0^gS~K!m z1X?c2UZs#*TRRlxU&{ABVN4J`D%e!A!`)O_NBzXMQ9Kq31xq9&XOK+RlcbU6UM<$1 zRpD+P(nea>6SM)hXDUjs8U8kZ+@Zp(>fYkMZX4W7n}q#O81mPX%vTK=SUc#B)QPk3 zs0|0(!4eZ-S+lXveJ^kKE^hJsKInUy!y{jjlSqWxDr=E6#m*u`nh|}1>3C}nUHnR& zHqupPTA4XRpO{A0%u2K}g*9AAcrjB@51qo|oCUVvKhA5`5h+{&Yjqzbo}g0az~(hr zt3m|-<&pLPW#?Eu;5;c6R!z3TD9^^|AD^-I$!+6P5ueHwZ*u96o>&qbGhNlFrXDS! z&cutHDgZUg8@4kY;YU4^JiC-W@Svs}!Qa^0#105BZQ4@GBbkjnnlhB1thV;iX2Y@F zyyJKS;K$L~r(;8(XdP@#jk~zw+Pl_PKeE8y&#ADHD&qob9_fij6bs@`c8b7O&_F zs+BXbRQg9NHDr{cuf}38qZ=Cbvbt&@40uK@R2F3S13^Wfr=DsketkI)9cI7Ggg)yP z!zXPyb_GFAJ#GrP2cb;k19+&!_Nr*!*0{%RHZa#l@hq67p{dDzX*wL^C_Ub|W=JsdRv5W?Ui;>U z;np%0|5tD`9N@iL$o?tch zy<_#lnqaKG$cq$h zZ@1;Z6MiTKU6swEsU8a`L@kjp8Qt4WHb{6bSoubHw3B#!As@gDv!-*j8#y)PBOe;Q zQrNs(#?i}U>}45s<_xcqpha_QjIA0CF} zj9&6xlgbJ}J^X$LInpFR&Sm%C<)MOyRQ8&4R1%3amJw7Ei?nYNjx7)EEX0k+^-~SC zznkwVCu3PG9dvTcRPzeWbm0)?OJh?jjiDc(Y{B6OjmAUdrtjYj05Rsu{bY@)G)6^# z?GeP6$^)NponVI*Gy)7+nr?dMO}q6kInhETI&OLV2pqOZf6{(QfMQ}o|6bq)NT?qW?lP*}^)*86^{?yq*>ku<8wPvcw zB|4xQ&Q@V*lMSbY`lPf)j9(i|$I)THt~R%LMVqCaRtcdNy2KWkMuTg>bmdoawn9G_ z*ezbL@`xX1cGS~>HZn1W$wa@qnpZC?++AtjtL(cla5kO|5(h|$UvL(EDPbrC&I~}L zR^?Re^+4kQ!v(sYQn7*`@KwqxjTg3?Y&k=sX+C2k=sC!=X=O6aBnMEe*PR(WD&RQL zyQ0^;S3e5Q<~BVM;Q`OA+Go9NwSp(~a-hnL{!dC#(1Rli)17`SBB5Ju*yU^xSuq&^|P|Y=GD9 zTL4{@jdBe*dQA!Svsif5d`xmjdYNq^csDo?AP=4_B0W6aLOwd7o#fw^=kRGWn>N}c znX&LCMNd_c+;f4^X`-qpqP~)c(zlny3X133&v=weh(E>+ZT34F`^2w1vcLjNu0JVU z`s3hz|KCARAnwJO?y;{s(n0@q-0|svO)zM$J!^dK_~4(h^>6p*d(;u{Ed;GDGSona zfgl+u3H-OQ>&0*IUFze18_EYkhgI&#Zv2Ua<6?-Oquy@1t48e4oBw@1Rzl43h{R%+e zSyr1|fCmi;^gyg=ux)cGrS;q8;fXKrzV}C zDbxYGA2`N)ha27i;DcpuBRgfI8y&}RK;ot9eJ=6ySj^w$n8EM%Wqqqay2f1EM~A2W zd7v_s%%xkdh)WC`;|0Je}DMjpB* zcaaY4PLGNH*p+>QRu;u25caEKrI@13i^cxA<8^41dyor17!t1q2F;E@Au0m-3Thp* z#5MvEysWwH`?Tk)$W8*+)c*0M9?^Km0eV`z`Ng)6gt!KsN27$zMeJe@xan6!=nq-1 zI}rf+GQ#SnMyIQ-7369 zo9Yfz!?Ti{{d_hxHUp)-IaP=sD%H?faj3u{7`ei2?r$u3}M69C%Z(v=W;U$Ec3)E>Z^YJBHH8xk^rp`Qt7lChoNbFHVP@;HMP?OJ z?|i8Nf`7#lq}gN{fq7VlN7}e9kC4no(ocSDd^s-G29q_*Q1`X1fI@nk)*us2_v!eC zQ@+~LJq(r!#0hErBDE)DJNQ_u;t(}nC`R&RkPn=-SUXtXaFQYTKpHbUEF52X0u z%Es;fFE)a7y@|x@C^ve6GA;<{i1l_cJjRw)q-+~ zm8y2e<=x^G>|AdYeX%R>ceb`*0c6YBMAt6C`VMr2_Y@qrQgirIB$}nU+sVnNCaaWs z(L7)b6ij88VyplHOhJM;Gv>8w3=~DPuMfw-lS@Htd0A>GJ1>3XQxxr{#Fk?)B=peq z*nsp|7G+jmLeDJTWei$M`&sINKCO~dw;FfT7J*xAV1s8aNP_@}~`zp(cKR4xN!2*xBT z*ly+rHlbRmw>DNdNGF9%daD*uks*N33w$4#2aXp|%BUvW*B}6{Ay(`nU9H6QI17xc z?F={jRpg|?C*3?gnoCV|chy@tNcTP@ol+d^fQ?IzJ(Ki2PwYLb9c9*`GwNY zsy?2}E>+HOXMpry;#&Lrm9Ec!^zf@ImX%F+9&!q;M~0Yme=T!4(k<4|Pjw@L$%v%+ zLp_O=$gBbF_TL&Hdgt_N`=>&zK?u3H=IKyLh_(c7&?-#flKYoc|9Cjg;U`B(5IElsGX7S<{;XtP3{e4^H1+Ao!fw@GMc z@nf%#x|$D1hmbRZ{i-$fE&98>Jk>$z=K*NSy>ywTx}VtUE|@BkM;RNAJwzq?cuIq& zrth4fzQrE6G}e?RmAWoTFlg43;}xNO^n!dVNVF{qa4Z zP#Av#r*oTCWyTT4e0&vwoU{UXGI3;SBNGTyo}W6w71LwQKCQA$;+o8K%9)VqJ1Ybi ze!m_E4If#F8(k;9b>iG99%tsFk1CBnuvtpE>$XPp^_GGocSz2Cv;2#?*`34Ys>dCt zS*c~znd?Md?a{y%`fsKaeOk-hU{|Z>1bl}`Plr-27{8v}97Nw`Y&xP^=HyA6F((xS zd9W@7Wzk=nxWPJpmovRioxjvu#rZuW)6>U#puxkZB!!XohDQwa0I$wU_G?^o$dTID zY}(G09cw_vrZs>>!!~q$uCBR#w`h8FYMn~_wt&%-70b>$s4h4ku~(fvB>rrogsOwX z3ZQ*?;yHLCR@;h>FV8!!O8eOyiKT>>oWS+#EX$8lH_#$LRDswRM#e{R0UyY03$4es zG*9n#&JorwRfW|kUX1!UmH-$t0b!1mF~@?>+PEHH((5kxoutpNMxNu|S_NWL_YwdN z2#eog`BdEGZ_gi2*-@HOoQ?+HbtyA2Rh$zLP%Zrr(RDy0sroos!XM{&sP?K~B3}by z2|$2zcR~<19D+Z3Ny0y)6U>gU@UD>O(0`_S@7sIMDG!2u^tf~XHqYpb7}*7bC^6q_ zNa*7?{`(-@mvZtvb-_<##cuhZ#e#g!e-bZL?en|5btwB3KQL4BEa~Z4(vw3`@ma#c zvxJ3b2@B5>g1_6lezU86W{_tFd6pslOm^bQ6TW9U9N*KUeil9bAC8_b4cu7Sn4IF+ zt;t47N_h{&k7b|6L82+7M;d9)V~NTP1NL@Aqw(OEa#a6mT#jQabi*ObP6DX(AGzO1 zzdK-J>^)cUrtkJ~aWnTt!9sNhF4U6-gyMnN`$Q?#v}`lH?p}H-$X zwV0ElS*j2HYcMOI%><<5zL9{B6MlpKrn&0P85*IzwBqQQWB>k11MR(;-v@t zgR~o*^#IWY3O+!Q-yM0?Rq)ppKxWUO)dgT?caf=XyWiWMv^O~C?~s03!b|!<5g8F1b^A?Q1u&SI7!fg?P}5y z30@6A!?ej8+n3!wios1jp_wjWbsq+!B>+b-pd+-jT;6dC625VC>0aVV&qmM_@ z*5THm*Q0s*$*D*;m~|eYyHm9R$t+3c!Dyc$k8q}E&qEWyHOg9H^ycNE_Z{ePX-Pg&-HHx(?-BK+T83{qO9wfsfhAq{M*R`a zx~W{&SHjwhFG)m({jH`t;%3xeb!7k@aCi= z=?o-11^Kyc>h`5>4EVTg4zSwaAngdfb){3xDV&j4}Ipoa+(dK>DCY7 z!_>i;p(N@7X-CdmEPfV0wvDS!*0lQ^k`ffjQ!lADNrMJgqg@LiO6vHM@-yYx#m9k(id{BD5iaVZ*CW$ zu=X3{a_CUrX#0ybn@;4Xzu^0Ie=cjhZg;M3temNmCD;i(=%H|+fS#z!5F)6j*?U!K ziLVu-X_iBz^a-@aH@T!y!vE`6_3dld{=J(6@?mALN?a}Yw7aPLWVW>9)!qVf&Gc&8 z_`@kyJ@^NeJnc*H%r}M;$%bSDJK2vPMZGkkCb&pDN_PqoE3@c{sT(!bYq7cLsGO97?jH1Zzt$DlhZszgY)kZIc()f0I#e;#Jt1XX#(0V?A|?)gsmHxn z6q=OQ;1b%BEwYzZMNv?k!Z&?$btfGHh&pv*!YR+lNd5Udb-qIhv0nWF6QvOsd?Gwt z;5J>q+ugtaD;-ufMDg1}IjZb)JxBe;*8(bxq7CxJ5Z8(^N>Nc}ybb zjPPZ6yx89ME6pjqDKG7|95YqCAznRJjH7Q8zOQqOk_QUUr;h3JaNf7}l0P(zy>AHW zGI9L9PNcre*|*I;nMS!7r%G*L;8*FhJ*qhRj`znhZX}J1U+~S-od@Rz4)3Aq7+f*p z_>S^4F*BL0>b2RV1|w#+pH0^mv7u}yR{vj|3i5!ESq}*_V>0?rbtx=CSQ>uYP;oTg z=+@iCtuotyb2{GkLLW}N^bn_ACZCe&AK=}Kor#s&IImm&Lj@N|s>B8r&KKR6vPyTa`V7CW=a0W<)H!@PF$$CEH1cU_ar#g9Fw4WQo1E?`6;Bl0IK;viA-yl*@1x{O26RI44NxEw#8} zt>lLTxV5t%m16O8TzJW~iH&ebjJwWBVjqEIm6c&+ur|$YkwAHrZ%UuAZ-5#K?Ra(G zRXGNnlxa55Lm~z3QkvoD@8>cWRX9K)Zgbwt#eU%^uF~AZ)7MQ}xqx!)8LS2@HBeQ9 z6yzvP5DrSJIH(VxqzYiTw1*eo79}}Ssa62zJu4BVe2)w;-FGm|iU=?ffd1u3=x+xf zj;`OkZ=uQ|N*;00$}KhM!4mn&Tr{9EQQ!Ip2q? zCO(1_aM~0#_<>Re$9nM&iTLAzFag_z5K?$1(VHhp>biyih@u&!vkL z%30*PBkyl9mGmEYwx=v+@sFeX1$$?);v9>V2>LFQbbgs2Ag;KWPP~IU{bSsHj(#-% z&VZ!1V1N9S)sGyV2iBYg>!&Ox#s0L{0l$Ss8|6IZaC1D_VtU~JGkg0xvJh}YPcQ_Z zR#*OMzwclmMyDTGL~H*$g3)|e;MnRcV_(F3Eaq(-?6R3a z);Qi+5^TI52UdyIQ5_2X#b8Y zeoD(MX0gSt|C_G+-><3GnEn3;&>8IyUT;FVt9Xx+*FEYF5lo}Qo){9J@ zpR{qu;*dV&xya)1!(H^WwPqaA*pE}JVvZ7geSSqkFlNIG6Bb-e!He?sL;u5yZY=g5 zi-b*2H@}`W{(nB6`@dpyuwVUwNB=^xgSu*nJG%+Vy1>)*$ueKVb|Q!;u2C+m2w0k>|42X$6)_PD(9Nv z(^!PtKI;laK&gRU5UzfW0)%+xQd^X@vC>`L2Qfn-Nq&GC^y%IJmf}+QenDVEcwxce zUhUzmQrnbol-fzK?}IhpRy}o)jUqbd$VQaAHyl~4X5F$9Ti{g(kbFA^aYwgY? zPaW)TEpVa{X9A8s-e;W#C3LrZC4R#;_w8k@0K#e3r5NbTFfz{Y(O&%itdOLxQIF8+ z)WBOWN}^p^!;>FXT{Fl?G)jLkp8xzlHfx99`JG&W4}HfbP&US8&iZpGIWC^dN?+$7 zQ8}=M&vtUfeJ>Ng1hnaX(?MTy)-T&my{jfoSUgc6TaH%P9oX%IL*)CXh!Qss1+h?C zO5*rOX~U-QTYx-v!+$qf^?aB$bB=}vke@3-@bnTUtF@DhJ!QTHlFRXe)yb94P6eE{ zf*eMLCny3OsV|}(LF?mi-mMN8S6GL(wGsgs45fYY&IaCNbR@%*54nxR39FU|2Jm-z zq{%ryW!PF!C$!LS_%+wQ%R?O8&IG-S-;y? zyxa{`aPjqTQZ^=j2yOE-|1DzskZ?sZ^s%gLi{c(A;t|^Nat~vMf-lg~W>ofMMU8*h= zocwfJSes{fAt!umq;XK0)*UU<-@wB{|m52UV#7r literal 0 HcmV?d00001 diff --git a/mysite/frontend/src/pages/Rules.js b/mysite/frontend/src/pages/Rules.js index ac0faa2..2b8fe09 100644 --- a/mysite/frontend/src/pages/Rules.js +++ b/mysite/frontend/src/pages/Rules.js @@ -1,6 +1,7 @@ import React from 'react'; -import { Card, Image, Row, Col, Figure } from 'react-bootstrap'; +import { Card, Image, Row, Col, Figure, Table } from 'react-bootstrap'; import { Helmet } from 'react-helmet'; +import board from '../images/rules/board.png'; import card_ban1 from '../images/card/card_ban1.png'; import card_ban2 from '../images/card/card_ban2.png'; import card_ban3 from '../images/card/card_ban3.png'; @@ -27,6 +28,193 @@ function Rules() { {'規則解說'} +
遊戲規則解說
+ + + 遊戲起始配置 + + + +

+ 根據遊戲人數決定【好矮人】及【壞矮人】的數量，每回合的角色數為遊戲人數 +1 + ，也就是說大家不會知道這回合實際的【好矮人】及【壞矮人】的數量，因此也有可能會出現整場遊戲全為【好矮人】的情況。 +

+

自己的身份為隱藏資訊，不可讓他人知道，也是遊戲勝利的關鍵。

+ + + + + {Array.from({ length: 8 }).map((_, index) => ( + + ))} + + + + + + {Array.from({ length: 8 }).map((_, index) => { + let amount; + switch (index + 3) { + case 3: + amount = 3; + break; + case 4: + case 5: + amount = 4; + break; + case 6: + case 7: + amount = 5; + break; + case 8: + amount = 6; + break; + case 9: + case 10: + amount = 7; + break; + default: + amount = 0; + } + return ; + })} + + + + {Array.from({ length: 8 }).map((_, index) => { + let amount; + switch (index + 3) { + case 3: + case 4: + amount = 1; + break; + case 5: + case 6: + amount = 2; + break; + case 7: + case 8: + case 9: + amount = 3; + break; + case 10: + amount = 4; + break; + default: + amount = 0; + } + return ; + })} + + + + {Array.from({ length: 8 }).map((_, index) => { + let amount; + switch (index + 3) { + case 3: + case 4: + case 5: + amount = 6; + break; + case 6: + case 7: + amount = 5; + break; + case 8: + case 9: + case 10: + amount = 4; + break; + default: + amount = 0; + } + return ; + })} + + +
人數{`${index + 3} 人`}
好矮人{`${amount} 個`}
壞矮人{`${amount} 個`}
手牌{`${amount} 張`}
+ + + + + + + 遊戲流程 + + + + + +

如圖所示，一開始會看到左邊的【起始牌】和右邊的三張【終點牌】：金礦卡 x1、石頭卡 x2。

+

玩家輪流出牌，在以下三種情況中，選擇一種來執行後，會再得到新的手牌：

+
    +
  • 出一張【一般道路牌】
    • +
  • 出一張【行動牌】
    • +
  • 棄一張牌
    • +
+

+ 詳細說明可以參考最下方的卡牌規則解說以及 + 新手教學。 +

+ + + + + + + 遊戲目標 + + +

如果玩家將道路從【起始牌】連通至【終點牌】，就可以打開【終點牌】查看：

+
    +
  • 若【終點牌】上出現的是石頭，繼續進行遊戲。
    • +
  • 若【終點牌】上出現的是金礦，【好矮人】勝利，該回合結束。】
    • +
+

回合勝利條件：

+
    +
  • 好矮人：將道路連接到金礦
    • +
  • 壞矮人：若所有玩家皆沒有手牌可出，且尚未找到金礦
    • +
+ + + + + + + 回合結束計分 + + +

好矮人獲勝：

+

+ 隨機抽取等同於玩家人數的【分數】（1 / 2 / 3 + 分），並依序從最後完成連接道路至金礦的好矮人開始按照出牌順序分發，分發的【分數】由高分發到低分。 +

+

+ + 若最後完成連接道路至金礦者為壞矮人，一樣按照出牌順序將【分數】分發給好矮人，該壞矮人並不會得到分數。 + +

+

壞矮人獲勝：

+

依本次遊戲的壞矮人人數得到相對應的分數：

+
    +
  • 1 位壞矮人：4 分。
    • +
  • 2-3 位壞矮人：3 分。
    • +
  • 4 位壞矮人：2 分。
    • +
+ + + + + + + 結束遊戲 + + + 其中一方獲勝並計分後，會開始新回合並重新分配玩家身分，第三回合結束後，分數最高的玩家獲勝。 + + + +
卡牌規則解說
道路牌 @@ -36,16 +224,14 @@ function Rules() { 起始牌 - - - - - - - 遊戲開始就會放置於桌面上 - - - + + + + + + 遊戲開始就會放置於桌面上 + + @@ -53,21 +239,19 @@ function Rules() { 終點牌 - - - - - 金礦卡x1 - - - - 石頭卡x2 - - - 遊戲開始就會以卡牌背面放置於桌面上 - - - + + + + 金礦卡x1 + + + + 石頭卡x2 + + + 遊戲開始就會以卡牌背面放置於桌面上 + + @@ -75,57 +259,55 @@ function Rules() { 一般道路牌：手牌 - - - - - - - - - - - - - - - 出【一般道路牌】必須符合： -
- 1. 道路要和道路相接，不可連到石壁 -
- 2. 新加入的【一般道路牌】，路徑要能夠連回到【起始牌】 -
- - - - - - - - - - - - - - 正確示範，道路可以連回【起始牌】 - - - - - - - - - - - - - - 錯誤示範，道路不可連到石壁 - - - + + + + + + + + + + + + + + 出【一般道路牌】必須符合： +
+ 1. 道路要和道路相接，不可連到石壁 +
+ 2. 新加入的【一般道路牌】，路徑要能夠連回到【起始牌】 +
+ + + + + + + + + + + + + + 正確示範，道路可以連回【起始牌】 + + + + + + + + + + + + + + 錯誤示範，道路不可連到石壁 + + @@ -140,27 +322,25 @@ function Rules() { 破壞工具 - - - - - 破壞油燈 - - - - 破壞推車 - - - - 破壞鏟子 - - - - - 把破壞工具放在任意一位玩家前面，被放置破壞工具的玩家就無法再出【道路牌】，只能選擇出【行動牌】或棄牌 - - - + + + + 破壞油燈 + + + + 破壞推車 + + + + 破壞鏟子 + + + + + 把破壞工具放在任意一位玩家前面，被放置破壞工具的玩家就無法再出【道路牌】，只能選擇出【行動牌】或棄牌 + + @@ -168,27 +348,23 @@ function Rules() { 修理工具 - - - - - 修理油燈 - - - - 修理推車 - - - - 修理鏟子 - - - - - 修理工具可以將任意玩家面前的破壞工具修理，但只能修理相對應種類的工具 - - - + + + + 修理油燈 + + + + 修理推車 + + + + 修理鏟子 + + + + 修理工具可以將任意玩家面前的破壞工具修理，但只能修理相對應種類的工具 + @@ -196,25 +372,23 @@ function Rules() { 高級版修理工具 - - - - - - - - - - - - - - - 卡牌上一次有兩種符號，代表可以修理符合的破壞工具，但是 - 一次只能修理一個破壞工具 - - - + + + + + + + + + + + + + + 卡牌上一次有兩種符號，代表可以修理符合的破壞工具，但是 + 一次只能修理一個破壞工具 + + @@ -222,16 +396,14 @@ function Rules() { 落石 - - - - - - - 打出此牌，可以將一張已經擺好的【一般道路牌】移出到棄牌堆 - - - + + + + + + 打出此牌，可以將一張已經擺好的【一般道路牌】移出到棄牌堆 + + @@ -239,16 +411,14 @@ function Rules() { 地圖 - - - - - - - 打出此牌，秘密地看1張【終點牌】的背面為金礦或者石頭 - - - + + + + + + 打出此牌，秘密地看一張【終點牌】的背面為金礦或者石頭 + + From b8fdfb7acbbf7462cee0aa0e0df09a790b5cdec8 Mon Sep 17 00:00:00 2001 From: Jeffery Ho Date: Fri, 28 May 2021 22:53:17 +0800 Subject: [PATCH 2/3] fix(frontend): add text-wrap on player button for long username --- mysite/frontend/src/components/game/GamePlaying.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/mysite/frontend/src/components/game/GamePlaying.js b/mysite/frontend/src/components/game/GamePlaying.js index 409739f..89815d5 100644 --- a/mysite/frontend/src/components/game/GamePlaying.js +++ b/mysite/frontend/src/components/game/GamePlaying.js @@ -255,6 +255,7 @@ function OtherGamePlayer(props) { return (