From cef167a6ab105481986f6018da977e9141f2ea53 Mon Sep 17 00:00:00 2001 From: adrien Date: Sun, 27 Oct 2019 02:54:13 +0100 Subject: [PATCH] text, pause --- css/style.css | 19 ++++++-- fonts/ShareTech.woff2 | Bin 0 -> 15144 bytes js/webtris.js | 109 +++++++++++++++++++++++++++++------------- 3 files changed, 92 insertions(+), 36 deletions(-) create mode 100644 fonts/ShareTech.woff2 diff --git a/css/style.css b/css/style.css index d90f4e8..1855b9f 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,15 @@ @font-face { + font-family: 'Share Tech'; + font-style: normal; + font-weight: 400; + src: local('Share Tech Regular'), local('ShareTech-Regular'), url(../fonts/ShareTech.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } + @font-face { font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; - src: local('Share Tech Mono'), local('ShareTechMono-Regular'), url(../fonts/ShareTechMono.woff2) format('woff2'); + src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url(../fonts/ShareTechMono.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @@ -47,13 +54,17 @@ canvas { display: flex; flex-direction: row; margin: 10% 0; - font-family: 'Share Tech Mono'; - font-size: 1.2em; + font-size: 3vw; +} + +.stats-names { + font-family: 'Share Tech'; } .stats-values { text-align: right; - min-width: 100px; + min-width: 15vw; + font-family: 'Share Tech Mono'; } .matrix { diff --git a/fonts/ShareTech.woff2 b/fonts/ShareTech.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..25cc921ddb9f9a78c897e16a59caa074d3db1f7c GIT binary patch literal 15144 zcmV+@JJ-Z_Pew8T0RR9106QoE5dZ)H0HYuP06N0}0RR9100000000000000000000 z0000QMjNGC9D+gyU;u1y7roTNZhixod9y`CU?wCS^G(`M&w%Yf$_Lm<+>DW-8^Hayv z!VP8mhrpHtWn_nC+uXtrTngXVCZ4g=)XQN~uZWe{KO(lec0L2!M*bwHUZP?RtY_~6 zgc49lU{VA+QDI>c;gMv7BZcL|PjCaY%??FWY(%i{KsXZ+u;QpwID{jP5)%XGY(!l+ zSL$?`F4BGNe^D;V?Q0o+ZJ(?7cEW9G6Q7-18{M~m8&>`cl`cprv4X~Iw%5+F8MZ98udWO(DZ=r`0(fYZ)?Gk z1aU=y&*TKo|FW6=-#ugaPhCy|r<*xQC`c9>M(WXy0YOS|-4WOe>Zufw!+raJ~H+*qJZ}ZJtA<(;!q64MJO~o&O|NaMX zW2@GILNcDf%gf88Qi)U|l}aSHyPEypmfRhsv`{j6;$@9uuV@BE|8+bVi67efeV{1C z(!627cNeiQi{%Xb{AbYQtf(pKbk)n^r9cT0&Us1Oghx~qYCsy@gxR|hPpy5WGbVb$ zp)f7KT;T?#uc*Pdfa))ht3^8OA@WB;oiXeLpb+l2bZuPdl63` z=u%W)_kDa{U$Xv}WP$CKVJ4@ofABj-<6GGR-18G&3Rc7zRA-0CSgj6}7k))7f>~v#3=y*K_HUAB*S+wMu_qHXTGQ)~H(xyxP?%_+`hmCfMzqP6unzVaCeVwJHGHpMgSfA1igR4v3}v@x@38;pLoOEz#j)W2mL;H|8wH@nf;K+2f=7?-+i?luZGJ&W9)yk74SeqMg{0Em^TIne;`Nz z4xu2Ka>dA3giS?*2d5)qHAR{x-B3%dq_@^uW}EWa7S0) zPrm_!h721q@!_W5g9t@03%q)Y1<3M};^~Sym z8Dk3i)Gs_G$>Fr%-qx)>$^kiYlB*Vvm^2Dd^`>NwwZz8kht6yIb72bU1Uj;c6RKY|)jJ@JRqDUqs2~OwJax+d@l^n?{DE8z;r6f7n z4Rc$0X(WC64Hz_J*vR<_w9Iy~nK~InoGdcb2`7s>A|V-?EFvQ6REnoOtMf0+7NQ{k z?W%g^c5D}$iB3uqoRfYn=oliRqe=;fGtciTc{Z}mcI*vGP)^%ikgF9Qj^h&z%2JiX z=nx~bvt->5dRWc;JEKD4~>6N{C+ru4&hz(Mi^;qV%o)8XfD_ zMzzygF)k>A8qZSb?}tr012a_^6rqdFp0xnLPAH)8Kzv>*3j2{h(^~7o5(p$}cW&<2 z{9elCi)G=rvyizLuh2~A?laZ%|E6Ip;^G8Kk0)sR0Z!$g-7S(2s@eMp7cA3)(n z70O{v;j&BfPUgl%wnDF+Ye&Drqa(2j8wVEv1c6tjtF8On!+<-vYFFhC)f)6wp+>BE zV6C-f)+bsDjzFTeoH@g@kR=$NeH?6n=*^E{n7WjEr<50vl$R~l8{^=r)UP|Lt%+bx zUH|XkyVjt;88q`$*KC=}gH>e0f)?)L@`gWH{n=nSC0)H;BDo|vQ#+0}kk}LKI5HGU zS?D5%_=}PTtqLEsUf+B2B14GFfoUxB;n_qZYRl{i5Uy(7a8E~E9*BYY-=p3yTHTa# zA+6pF~3d|Vonv9Ar7VILjAu}y5Y$NUCJPqB^ zoi>U<49_;c48xAtEDMc3ds7<(eZ=M%ff3E4tG>unU*y;uiIJXL48+>s>oNUs(Oe?3LhUoCv!ZAeJ8$QjR4UVyq%7JwD7!|WzX3V{JmuP39rm;71;z+_~A>eM!zCz4r4E<~HzTe%Ph)v)C34mz;i(Llf3IK9pl=|-fHfpT0!5T-5 z`^rW;?6lZ%E9|k>h~+jpPGj-G{;O)0x_b(|VZF;$ax9b7tf+v1w7&N*PULykJ^nCrfA$G4{2 z>%38y-E-AhgBG~yg0C%g%YYd^ve2+a*7M2mQjk|O? z%0e6+y8KqGP67<_)3Wjdp;T-JW63Y_7SI)c-raAr(16cH{{P36rXaiy0|Vav1Lx%} z)z?pf+Zztw;tu(BpcLu9CY#c)b>&0|?+G`x-vJUvUlV~FYaz-QxISeUEaq5be?D4z9c!y$JRu?uasmmC!5O@ENZu0|O98+JFkjfr@*o?wyDcH8n9*RIn*Z=V8TYJuWy- z!jv0dPr1sM51+`@|0m6|Tx*HTB*d{xQwwThpqK^C+;NGadEHk532%2Gp+r=LP+UQ9 z&52UCGivX{RH}~>;Cm*TT>rz;eRuCs5e>}PH#^eMksaZ{-xA!3Zl%Fv3=l!7qd0NI zW>w}bHdq;uP)@Cp#M_@=Gb!#^y2=Ixo27?FQdoUcSD^YC^a3Lg4) zW!*LE4~2G3lkj%-=y&36!O49TaJf+2qZd)@>85$FGObehVjaQmPIRuI9OD%nxMbq+ z`Qro2NEQ8$bn`eAk=#t*I~y&IXu~~7VW&*2x7z{`s(m67E<2=}f2jlP6_OV7K-WD6 zG~Ls1%8f@PYJbzC6R5Sf|`6vs?FPZP&7neql4da#|@>i{df6EY2W_$X5GaeP3o5Qx|K1jjay@_ z^=)87b4ePfKcp*-=3|n}%uC91|tIQtKOK0bm3NHfY+{*)Ve?bDEQ- zm`#t)xu`|avq89P%K27CN#E4C1|G?(ZX~1dg27!AC1a_s2I5~yr0X-?FKdkyd!uZD z79(N9gqx1v-bFh!=i8clJRbbez1sZ@MUwNYXl#_g$HbJc^T(BrG$E|qtlHguw^wv_ z<`yL$K#1wVkK;~pCa2EZ+dOxm&4=%moCna*sUq%>C<^`-G3FGL@Kbs?Rk@#1IhC1@ zqHP+HIboF!FC$`3MHVBOkTSL*F>aJH)8?W`k5)&Su}DcCP71dxTy&WBol@hFQYgw{ z)QF8o7*2xN$k z^Iol|iipPT39mwfR>gJF;SQiO{C+i>yw{0cuv}W77M;XAti2Z{8eV#5arsZFu4LP) zOH|evkmsFy3}ZL7fYzEa*YNhF;xAmgjYrbC*^;2kf?8}4UxAC zk-$5fviBuN;(p+i`;k-bCr;VV{6NP20_1)La=!uD?`R-$F{i;|P6w1T0M$&HV7|=) zDcHhy;@F|N0DuJ#^|2}!M$Dpue!08H9CH<%aO)>{;xdWuA zCb<-$wC6%)&t)|b3TVWFv<{HY0kw~%c`(@XV6^AKWY2?H1Y~i5tPZFfO7mg2=fh#o zhtr-9mk7x10C^l(>+Rbwl0EKJ73pPdq4tg^XKi;1{v7ZC5>hv55CHE0Zp+r{xgEK#Af73*I zAjC>^d4d!ULNoCF*aSR{gwiRIFO}i0yOAEWZnQ}Mj*d%-MN3+@C80${hbTM}|W{Xs;6i_=_ zQ3<~$ajt2;k4mwcp~)(5lyod?39671&D59)a-x3{msW1Xc>YvEAGVF)N;T5_!|%d# z@?T9Y`L!aI#CWk%pgEkO2(ZnM@ePCh;)`A0I01vex#CrS^2R?~O*tOa8RYhepc;S< zC8Zj)G!#a*^o67^*bnfX#5Gv77&4Gk>wH%EvbCDF)0<_-M zj>e0W5ULXL7)-2|sM{;Do?PakS_RVb9jdVHq=Y*SC!?wW=le2UR()~_)89L^FmxRw zVp_ifsiBXI1}!(w#XNUyDdu^UW1g3P#*1Ico<@USEDR+^qqYeJjRcHT*y{;%%V!Z- z)*`UtAn0G9t{Q9Rel#Ygv5-+bBCA^`k_3}x(nxwzk0xdqI-6<6u9Pv5u3oAn8B$UV zPbmISrqH5EvnnMuv+HY!KBFS9+^`bR_3Htanm#e&vHhVF+$>WA4COZlqOFNB&qEk& zRcjAGtw+%QV=kh?vrLCm9IG@aMEem|+~PM;YtQvhQ}eCaJ-PMqE7K>9q1g^n@UbTX zO1wdlNGfc|r8OxMiU_G2)76QtOIu3rN}mtHlTT%27|jAk8X1g4)V*6z9UE`~S$&NX z-3U{Z#amzVs)1^}LF^SHPUb1qc+E2_Doh8WkAskObjZpQ4^?Jh2%{UkRdM4?mXhKF zmE&*>459x|UoxoSY&<|T2HW%Rfhi^)>F%6J<27}*&-T2kLFi=0)3jK9OX&x;T~nn) zo}&YF7Be>P2Y;oLP`WcuXJ^Y(UdW8nuh zB0HZ#}BNmB_4FM?87>cgT7RYC@ZIq4hMY|OmD_&y-z;D|M=VV$NB zT;MhQ;vvIgKby6Hwl)#S)MszgNSgb_#!^JhElbpCC}U{Rl3A5<%*!etqNhVeZem&q zRuj{da@zph9jeQ`>fFnmLB~jU=Ty5{oU+#NDl|^)bKxdiMhK>1(i^$HA643H9Nl%G z$m$iR*rgns4H0ygrQ|dWUhr8{7PuWANh_(wUrioD7q@nJz26eEc1qI`qG7Zk4KK|W z0gW{3_wlMGkIrc;^$p&iwv?QoK|UDY!8DS_*t}&AArBIr-f})}>oegKeab`LNh;C& zMlFv%>8eED>8fdxgec4uxU-((BSTE(siTNERy{wGfn#X%R-AzQ90VDIevHW!yCR0# zS(O}ywtQ4M8+v%eyWx7v0eTA|JPny}3EI5bfBgZfJ=7E`Lg|H~?+U`g5t*}75Z7u$ zaZr*(PA5VYvnz=(3MmXH&n3a{;e?T2Ui^N5Zynn^Hf`(yZ|}}c7J&9r9NN>XAuzPc zMAgUeFhuhEGQEF~$-s&eqL3H5_igysUJEM+u#9td_H+?kDgxg!LvaBSL;J}pWrz3% zXMH9i?mVpTc>wz)GAL+>kQq)sj5}6G@+n2!&dDfHr~JP z=k$v<)!pEUP!`MruITLOMy1a=C5XrGW=qvsCBm5fY3^CQ)es)dKTx$6i$(Ho`6|-V zFHcw9t!24fjJMl^A{+XZ9DIOv*q=584`-1Zz6pjDR;Mjs35SBQ&bnrCEe%Qa5{=y7 z|7!`I*f|2|KFcrN(Y$zm$lWEVPQrja30iE|?_=9Ur*<%WNf`z4{9&ahr4V+1MBa%m{}--d}NVw=Z|3%L6cIX`OA)`h+nx!WksH3k1m6)=S|R7g$x`Z8qccW6Z3 zW`#tvZ@&MOaj&&e#}=JQBQb*`zgx*Tb$Zk z>f8CZ!0Nfi!z;fQZQfRzeVE&}j;F*VQ4=T$)TEd!8APGI4FN;m(kKuNa+V1Ha8tea zr%d+`^7)6n`cu7m^NU@6enDQX839z^O{A8NEebl=6Seb(p4S1SD?AOE5J zG3K8~%BTPAN^ncYiZn%~C&#|9>WhroC3Q%g*;cua1=l~S2iLIFz7#jB?f+I-1UCux z*o}mfup733k>n22{kfbg+Ya!syvK8N0`Im61&f`dGF4T z9kG=b8|Iika7c#2%Vw``pppB7GYO|9g6q{%=dyJiYQYX!)j2Y3KDSe)8pM11 z-w+<>EKVY`tn933Wt%l>NK}!axpCxZNAj#8ip*0lUhm|LeGJl762kz~i_BLq>F22i zyCHg!MrV*FPU;Qj*7fRPHEW!l1@TLynYrKtZroBk*G!B0HdJ6sx~6I&;vE2{D?{1S zf&miK9RoT4+J7)@)W6hmU4zFhO%Aui6!q7jR8TCK!#Z9PGtXM4x0S`tQzkUF`E~h~ zk2b8=RXATZzAW2>@16ofa)nLtg}ZVtJJ*!P9F@N~bZNz3hKc4YKd5jEDdG>6%mPn& z@ktY`P|NdF^bO0MB2dR2z-F5DnDJ$hE(*=8Q2oPbZiozt6h(GLD!M3)&`Y zTiw?^+*r1G+HErW`hJo>+IAsf`SA!`pxW~embXkV(($8;iZ$x)_oY$gal_c`l4Qw= zM3{3L$~&Q|ETQXXDE1#ljd>K)W9EHh#KRlBV2e&g9C+;WI*hO7>cEGfj>{3Q{jM74 zwM|%8eoGhD#ND-IPK*y_s?bJX<#8<|gCYpC^e|iHC1MQcs9w|Kr;vRW62)87lZ#aC z*Yvq{V4qWOHOnL9RRP$p@4KERlJ_xh?R;}gYWmId z)GJ7{5QgCYLg`p0sC|Qn|01N6HkC*zLbXJKkLfLy(5QGGK8{7~H!kZny`6{~8Z)B{ zcaa;iU17}v#twR(1e<==aalmTcn%t1-0MFO7CXd4H1rVsP*Z~m#|=`7K*9e$vk`Q{ z2pY~r?~Al*phk!#&m^3OpD@Z+0!JJK^_o!^`3yuy?D&0%C^wH;zV)L8&UUkI7 zpHhO2!#kaY6VBF#_Wk0^lMap$;M?6-T&R76M^Obz+`#%L%t5fs`RaV-Y-~8{5F?$J z9D>U8q%krqN7atah`7z*Fn5Lp$`lB~OVkQbLV-k5{mjhN#Lj01F>C3WlS`5;gA0X-8TAvlU)&pk?**_^@>4{_yCr z_w@B|>>V4cHky}$g44>3!FwYr)Mb@)4D}zKcB36sUREXHcdZvxkQI)LRg-UR&fe2D z?qC;%%LHiw1Ht1v*fIM~e;RGR?3ocVTeoLqT6RHZkgHh*Gv`Iu=9f!;Ej;M&OHbz& zpsvEF*!Qx28$6kH6hJ~BJj!=5A7bqg!n99Uw3dDTxO zQzr)nA8?!1HFtHNsU*>gMHvgOK2amw4wY7Ab7Qk$5nRu5v#KyNxQ3;NS+EdCyuGR@mSOspPHE)_tt1=kPNSs_-h#N2s zRb#;LLakhY1ATn`21gH}pNE58EImwuBc~eOESSZu_1rh?6zT7rg*bTLv<7v@w{Pt? zNa@sSSZ?F$KT{#FDXe9!zZaJy%r_xgl{Bk>8NV^LwQgt|@{*lL-Yu_0%AyZNWrjb9 zC_)Oue~(CtSsi0S%(FY=qG#kMNq9!G1E+f~#zR!)N!u5re0$$x`)lqdP_Af|pNRdw ztuS}0I#;Na0!49l31zWti3n-U!5U`KD8v2y#5h(P|mOZPX>s}KheX_T~G&j$bKKp!T=tf(Gt$*Xi3w_Zd1rFp#iCU9vXj17< zo5v{jCkAU*{u=*8#>nNNV7P|yRuq&j4idd(Xu?61m&=eniT^dBIqMyaaV6sPX^mYU zpTwFO%~*o4>$1y}A1CBa%~^t4{^DuqRhpcQ58=No=-=1Kl@a2psqKu=um@PI@vzM( zQN*{GS}tdowBWL@97cJn(u_&J_{vwgJhEH}*$Q=SL}P|ScU)=;n~rVuYhUgHYCn%G zfxMBm-pC&2NWZbVYE(ID0v~Xvsas=6iwsqwRm?=sv&&l5(-g(@sZV=`dP%X810_-w z>Q#@|=0BM4BEJb=Sn(~tI`t%4G$>0u;Yw=c^13|!esTa$^9YRhg}54W|xF2X)+T7hG(hDl|yYiz8giP^#F;f(lfmfb6TM}8Qi99PgRdY&y%9Xn`|7q^iw!bMm zUl!$MMrX#es=%{o7UoMna(p#+^H4No&@FF>zQp# z%MwHTkRd+hQ7Z%%K9SeTVSW0EE*aohKHu)Pee0)3VGq zsVg0Dmfm~cwOTS@uh3Ly)Pr-52AK}b*!MX6aPCVV&16rc^-F45YiKVqx2n_23|I%Z+~Y#qv&=mX0K zaH=pugS9btAEKj0Rox2?f-f(>oaO33d`QdMDMbS^fD98xnvj~uuhomz5Pca^;zxl2 zf(;s*6JIejGxY;iq=B*V^aKMQV9?rwL~uDCH+$9yW}#(kGQ`O~s7mfYCRrkK7eOB@ z4fk+*Rt*-7M3V1>M6j3!UAPgVo72!ls~Aqo1RE8Zp?kZczC8FW-cAg=I2~nz_$4OBzag8gD?#C3uv))D|J#D z!=GgF;sv@8flK%Hy|PPe1q25GBSutW7;WtPo)g+*Z7kZVOq=;QgAY)ZN#xlwdBN~f zsELCmjV4%Y^h;I z8d571Verg0!h0{)A#znBG!oeffmhVEUWHbcRwk)G^7sA<3k>Qif`LdsJ@t0Rm8T}N zWKE1z7=)t4%~AKV4nz+T(YEvra z7GVu%X?!i{W&=GuXM$yIqrq*1Pd#}aT3aJz>*OSE=sB9i0D^)ye&4e?g~*HQ3m5*x znVMkjEc7W^EOQg>yKQWh2ED@STOB1=8oBP$sr~e~3qbU-Vd_&aYdncS#4z(S*sXNt zM9v0;znVMtTJCK$7t``eN*$%-!yW?ZNBUmGWeHG@%0XR00eQrDvoUnPo|4Kgf&FY2 z21I~yB&cci0DzEZ9GcZvruH!eBtl=c={%5^gj6X*`jNyLX~l;2S9&aNPz%xdCsQ+q z9bhvy={NZ1*GrkiQQ$d)VwPtU1_T?eXiV?R(lmidrhlfP*#nhg`y?Mu zoRT(^1^7rxwKA+QqBzi2($&#*d2xekIH?2UO+x}`md$)LAkTQ*t2}j00ksE;2F@*~ zj$S#$Ig@t3w1u&N6N9csH@T$>dbXjtL)Gg0QQxeNC=Rrh^mX)oKCD5tb`j&Y#X~>S zcGWJ%L+z#KgB4lY34Ld%(lE<{n=X~<5}a()rBCtc8N=Dia)G@A1R#c)>2|v`-R4#L zN_xupzD?1*$-Q(TkZE@MX(mj{kpJcz=?pBT-SK(RLRgdv%edIP!q`pZOYpnf; zz0A9;QCXk;%N&P8o*!-kU9!U^H(d0=T!PafMKTDhM6scQ#7vn&@lv$#vKrbd9PDib!3SjM zMuFxWkXcXiF9S`X!K;ckx7I!FDD8dS zz_VfUY-ewhm=ZD{1^0Pf>@dK{y`ub}(z6k0Zu0vj8Wg#r7mbbrkK&Vyjos6%bRZL@ zPJQR~binwaWnShqjf9aSKtYI7WMEoDOzl}ak3}OKgwRn{D@1+!vk;0YVsQ>h1kU)S zFU{_f45z+QtQH+c+S>nH49n7WV&%uBxgz;0s0~DL*AmgQPyeqmAf-{0>aIjfI09=| zu>`05RIHIGzYDFek&%D8{^;&XER{KDYAg*d^f%eQxwWsBeJz24XAln|A_z6Ii-|0E z`8*Td%jML>27*ssi?zWal8cT__Y;+tXv6Z42=BCM+j3W+h*Ir<6Z4Cvj z`3xEgDyd{JAMs5($dbqh7t8DOmZ)3X91vVaM0X{qfB?8b@J(~rj(yQ~#kvwlI|*Vp zEJ5;2R)@}MQYw`V_U#Ao@Kf*EJ23?JfjG{=u__T%u_-{Y59gtTkw{-I%!Lt! zJ0r>%%jJF^bx7)|qLC*yKh_7iqaJ9xr40$|Ar$hotbOztW} zQn+D}Gr$OG7F#IwqOW+3PB&>Y5`cUW5GNVvuCHhor~!cGFi-3~W{uN?4I65l_K@*> z2Sig6#+u^hHSfer;!?q!jwKB@grWL@8~gO3-50$V0_eLyQ`1;?3AN;!U~F&K=^I; z$w%%2_Uuy`_hpNdiUd6YUB5tIb9DJf2k?PP@;}e6$fr>bt~RgJaNwNN`L+0b(VA@Jn_|a5aDgo{rWlaS;O4lFH-FmeW<&- zT|I${D_&){J&+}|IU;SfP{~#fyq#os@AA9x)P4Opqm@9-ja#{LR~6h@j3*v%F_cng zkzE|G0^LR; zkBcYJVtDVi0C_l--W1|mstE@Zgf>`*HkDb)oKUOmO4!c-}!xLm|{~4 zNiG-5P>albOKYbWudnv&n;?^-kn-+1^oTymTZWXYUf~(jcqG3zPDVHlr)^;HjJ%Wu27FG=^*xA>Q`2DH-J81lBte zxcTqRLsd5PFj`$?^e53?nhH4+vg66l(1ypimEO)m;7>GiaSa-WdXe51=BwZ0;y4<$ z65ayj^co>^ZV|+^edi&Mc1aksQ757`XKbc(Xqr*>13(RR#HMFmuudR*uM*re(^Dfo zW^Urnxqa#zZ+rHJUR~d&dfj>6cl)SFL!>f@K(G*~1Qz94xbLpv-LQhe<~4l z19STf01ad@d{xF0Um_FD_r^l}$KZb4px(^$(@-tE0GxBraBEX4D+ZmmlyJi95L zK9e$62Rg!nFr$Kbw6)xBEnaDIJ9yN0f*0YylZX#iS|%gtN(!w9*;Wk# z#|#c=5=huuq@HJ=H*+^z(_nKL=WIJ5s8Q;y1L%Pn>fE2JseW4cA9-Bt&it8%aJMqn zr}K54vS7E{x{4;Ide;@R`lEZkswUj zr zACZj5VgvcNp_Erjpfq5EGX@e#09%txos7}IF=s!W>|M)j)@r$}06KEoJ@afy!@h2z zFA_k;T>s{e=PQEpe(TNj{1w2f&kLdffY(dE8k~%G^_4VcfL=TR$iF9y0PPI~iQfg1 z_qKO=PeP`*d83>3tBA6CdTJkl$W~ZF1p-8chP%Fp0QgG%eNNyN$;SimfZ#+pGsNa8 zl=UbpwfpFiX(Mvv-Z2C zZFrVI0p7jrA82wNnkW*R=Q8J2H~$8;3+(d+~De{{%=?n^rPk`J%c)Hf`(^* zHg0Gou|)F9yKH?XdVYhA&Usl}jY!DVBd>@%`wG1B1Y(P}%?wM;7HDoOV9-M$7(oFB zKtK*z<&vyd4(1D%`?>Qqjf`{G=6eZI@bWWB*wDs}a72v&)5NARwyisG7k?=-;0f%0LIfSR|BFYSz=gfvPF zTf?aQ7rY40$%kZ?xHwt_(xNCQkpVd622#eAtKn@=3Y*w4z_|eoAA9Sqjwe#<3jkgM zR?jD)JO6wSf$l!vQ5vO!;g5a?hQ|`dkBGJh;R9o!a9Uuu>wdml2aCD`cMnbfALHAI;Mg~@hk#5&QXRSrQ`I|wOITP@;)!^NiJW2x59*3&|% zdH8s#-HFII`yC(!c<{vWrHiV4!r@a(alvZD`%Qvcmwe@GiIOBs@r`d?b_K6uuv+K7 zTvuIF?}lYQvya#_Y0_oLl;x&doNmjOBUhe3AwW@EPZB~uq59X<3%A9t_CL==8 zg;hePRfPXr$CE@Rc>!bIdgr|Wh0YleBgjX{wxbBawv896STs`QDiuKZ@weX>f=LB!_trqBomyUq2fL5roBffx-@lb&{z6SLhHe{i>D*Q@f zkqLJ#CUf5-_gc*+wc5M$SVL;6G<)U{*~N<`awC=eC$+@`T>ASU5((1*> Array(MATRIX_COLUMNS)) this.width = MATRIX_COLUMNS*MINO_SIZE this.height = MATRIX_ROWS*MINO_SIZE + this.centerX = this.width / 2 + this.centerY = this.height / 2 this.piece = null } @@ -346,32 +354,49 @@ class Matrix { draw() { this.context.clearRect(0, 0, this.width, this.height) - // grid - this.context.strokeStyle = "rgba(128, 128, 128, 128)" - this.context.lineWidth = 0.5 - this.context.beginPath() - for (var x = 0; x <= this.width; x += MINO_SIZE) { - this.context.moveTo(x, 0); - this.context.lineTo(x, this.height); - } - for (var y = 0; y <= this.height; y += MINO_SIZE) { - this.context.moveTo(0, y); - this.context.lineTo(this.width, y); - } - this.context.stroke() + if (state != STATE.PAUSED) { + // grid + this.context.strokeStyle = "rgba(128, 128, 128, 128)" + this.context.lineWidth = 0.5 + this.context.beginPath() + for (var x = 0; x <= this.width; x += MINO_SIZE) { + this.context.moveTo(x, 0); + this.context.lineTo(x, this.height); + } + for (var y = 0; y <= this.height; y += MINO_SIZE) { + this.context.moveTo(0, y); + this.context.lineTo(this.width, y); + } + this.context.stroke() - // ghost position - for (var ghost_pos = Array.from(this.piece.pos); this.spaceToMove(this.piece.minoesPos.translate(ghost_pos)); ghost_pos[1]++) {} - ghost_pos[1]-- + // ghost position + for (var ghost_pos = Array.from(this.piece.pos); this.spaceToMove(this.piece.minoesPos.translate(ghost_pos)); ghost_pos[1]++) {} + ghost_pos[1]-- - // locked minoes - this.cells.slice(3).forEach((row, y) => row.forEach((colors, x) => { - if (colors) drawMino(this.context, [x, y], ...colors, ghost_pos) - })) - - // falling piece - if (this.piece) - this.piece.draw(this.context, ghost_pos) + // locked minoes + this.cells.slice(3).forEach((row, y) => row.forEach((colors, x) => { + if (colors) drawMino(this.context, [x, y], ...colors, ghost_pos) + })) + + // falling piece + if (this.piece) + this.piece.draw(this.context, ghost_pos) + } + + // text + if (state == STATE.PLAYING) { + + } + else { + this.context.save() + this.context.shadowColor = "black" + this.context.shadowOffsetX = 1 + this.context.shadowOffsetY = 1 + this.context.shadowBlur = 2 + this.context.fillStyle = "white" + this.context.fillText(state, this.centerX, this.centerY) + this.context.restore() + } } } @@ -386,7 +411,9 @@ class NextQueue { draw() { this.context.clearRect(0, 0, this.width, this.height) - this.pieces.forEach(piece => piece.draw(this.context)) + if (state == STATE.PLAYING) { + this.pieces.forEach(piece => piece.draw(this.context)) + } } } @@ -502,7 +529,6 @@ function gameOver() { state = STATE.GAME_OVER scheduler.clearTimeout(lockPhase) scheduler.clearTimeout(locksDown) - console.log("GAME OVER") } function autorepeat() { @@ -594,13 +620,31 @@ function hold() { } } +function pause() { + if (state == STATE.PLAYING) { + state = STATE.PAUSED + stats.pauseTime = Date.now() - stats.startTime + scheduler.clearTimeout(lockPhase) + scheduler.clearTimeout(locksDown) + scheduler.clearTimeout(autorepeat) + } + else if (state == STATE.PAUSED) { + state = STATE.PLAYING + stats.startTime = Date.now() - stats.pauseTime + scheduler.setTimeout(lockPhase, stats.fallDelay) + if (matrix.piece.locked) + scheduler.setTimeout(locksDown, stats.lockDelay) + requestAnimationFrame(draw) + } +} + function draw() { holdQueue.draw() stats.print() matrix.draw() nextQueue.draw() - if (state != STATE.GAME_OVER) + if (state == STATE.PLAYING) requestAnimationFrame(draw) } @@ -618,7 +662,8 @@ window.onload = function() { " ": hardDrop, "ArrowUp": rotateCW, "z": rotateCCW, - "c": hold + "c": hold, + "Escape": pause } pressedKeys = new Set() actionsToRepeat = []