From 08f1961f5106592ab0686658d6a44dcaa1a00ebb Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Sun, 1 Oct 2017 17:23:59 +0200 Subject: [PATCH] replace spinner with a little game --- .../main/resources/resources/css/invaders.css | 34 +++++ .../resources/img/city_silhouette.png | Bin 0 -> 12525 bytes .../main/resources/resources/js/invaders.js | 130 ++++++++++++++++++ .../src/main/resources/resources/js/search.js | 12 +- pdb-ui/src/main/resources/templates/main.html | 2 + 5 files changed, 174 insertions(+), 4 deletions(-) create mode 100644 pdb-ui/src/main/resources/resources/css/invaders.css create mode 100644 pdb-ui/src/main/resources/resources/img/city_silhouette.png create mode 100644 pdb-ui/src/main/resources/resources/js/invaders.js diff --git a/pdb-ui/src/main/resources/resources/css/invaders.css b/pdb-ui/src/main/resources/resources/css/invaders.css new file mode 100644 index 0000000..1f3c64f --- /dev/null +++ b/pdb-ui/src/main/resources/resources/css/invaders.css @@ -0,0 +1,34 @@ +.invader { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAUCAYAAACTQC2+AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kKGRAxBENShygAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAbUlEQVRIx9WVQQrAMAgEM6X///L2FCihYvRg7F416LCsQdKo0DWKZA4CBGzjev1lRHgezS0lkan3IYr485ZFdo5oJZkbWoRWfSWrJ8p6suvZucsgCS8THsHX+zKiO5uLaO763bpobvoS/e6HfQBzIE0PhAsDxgAAAABJRU5ErkJggg==); + width: 26px; + height: 20px; +} + +#invaders_area { + position:fixed; + display:none; + z-index: 9999; + cursor:crosshair; + background: url("../img/city_silhouette.png"); + background-repeat-y: no-repeat; + background-position-y: bottom; +} + +#invaders_points { + position: absolute; + top: 0; + right: 0; +} + +#invaders_game_over { + display: none; + justify-content: center; + align-items: center; + height: 100%; +} +.invader_notify { + border: solid 2px black; + padding: 1em; + background: #ccc; + z-index: 9999 +} \ No newline at end of file diff --git a/pdb-ui/src/main/resources/resources/img/city_silhouette.png b/pdb-ui/src/main/resources/resources/img/city_silhouette.png new file mode 100644 index 0000000000000000000000000000000000000000..5354da5f7a1cc7e92740c81d8dc6de8e3e9427db GIT binary patch literal 12525 zcmZ8o2RzjO|34#SM`e?&%Ff;)>CBKFqQu$r>_cQElv#G!Nmus1iz~9OjL5n(j*N51 z;fy=}*Y`L6kN^L1cgE-Q{=DDs*LuI!^HT4b8L}|)G6Dbq7U136mH+^K9OduF40M#A z9zUe#D8K03j16xC&i=m2x~sD(SI!6AwGRdWm^lA_r~m~;+yKB80Pwc%{qPy=JSbDZ z7J}Nrtv~YtTg_c>`0n@0;fZ3}H-&f~79I(Ck|^s_?g7s3L8{%$%%Tjc0dZFZqpoB= zj#BK)YXe@rzU`wd$u_EHHTks@YE6Xb+*&+{%K# zfBwl5m8PS4_`f$D*y-T^9hud1g*i^_zc)d;AKDp3f$CC;pR!>x&)twpSN}65)89E3 znjDX20CxX=e1ew_E}eI$21~8M*|VvIt}0&;mHsU7@1-p@_SZF9&m6~k6##y%PH5hM zm|kL3dC--dfA6f;G;+Uq_DmYI$OCAdHB*m^QGa%FfR^~risg`)wS!n=2T#e5)c@Tf z(1AGv@T>RD(%itjst3Yns&muvKh)Gx_9*=hG?G4-9(-pQ+}+vpU&=b<0KcvltWqB0 zzBBrN?x+W_{vYOK0P_CBIZIpNM1dv6I1SFOSuOMvi;FhVIpV|rC0`WSy+u8hG7c~s zOb_t}NSVH-`t+Yivm$>BC&5b14k0YDmDm5@67{@Pnw7kSgioy9{~cfP&D-((AJD{W zp~TQX|J}BzlJhJz8Z=3{x(NN>v3DGUFWt?`vnU0f`$(g*vn2Fy_E-*a1B|ostf8QD zLDzf$QvY0TvIEC$3e%><=%}Q<`^0v4Oi!LdqIBq^((Q4^X?*@a(>iE&u7l~@UiGvH z{d>T_ryO!i?z4Kzb86(E`Y*Mqc*dotO4r5mfG&e3Gaee(X<(rl%<|9Z%g_GB0Fdi5 zcANM#I9psPjqPBvJNUo>4fU1k zEBvgfA2t2^V+)okiN{)%(eP@9N1-YXC$S#muudRKuH&?+P65%`e$D*-S27K=L_r+b z({D|S{hBU24{kdE=->sDR1yH;7)RCWJjJOyMJ(E&CgeP?{Jq1M-0Y;++yEEqmN*Fn z98E+-h}p)|xT*b=M#rF$W2hJw673=L;R$;$F3!=wqASSMxL$s^rq@E1BXEzrZ-J&k zbHOv?mT68mclL-dKo5iPUqL_fzMm!f9jt?`6Tdln^nC5=7&XNNKlrd~z^FRNrrL;0sg-iP`~=<2pOc`Q5?t~ zGR?i8${7t8cfu5B;mGkI*MYO{m#4U3v`f6KQ!#~`kBZHSe25==U+8`7#cyu^UD$G{ z{u#TrFPh-BpVD~Y&Z=}DLuW9YEu}o}j3Iil-+yCv@}{rLkmu#%QRTymwzGMY{!eEN zBo@5Fl0k@UYWy}2I^y`aG(Kuwq2m>#hrUQ6Jm+FLORngh-CnJ^geu(doj5eD+ItLvG?3~?uJs51ZF8VKoYq5qptw1K7I4)O>k|F zsn*#V=z69-P`QhYDE>et2};ZsxIRAr(dRaBqsiRwB)7HE*`+@vn0%^)N2TcEL2hx5 zfY$gJw}+pK{YnGcX!n#qGk#M;U&d<%%Al7KOy#4ThK0V=o9jQ0I^SI@k^TV&7q91k z$QK>cKJIHO657!owcTEBg*(~SQM7M>jtB8jC{fhZ&WZ-zg4;9XdDA*T-~I@$foN}9 zxC$;fqib6>44^RSs-KGnd_Uaj3xcSYXZ^^LuviX%v@{2Yj#0$(^GU3+lw^159ctKvmslzK-Ymrt zGWhPvY*?!MiDB`sr!@Jj6Rshg81>h*U4dB@cUsSNv)gBRNwkbLIhAdtsOfK+{ALlJ zYZfsO8KCN|;0s7{PMi9H^RPFk?b-!@!d|z99vY)z9DS&AIL*>CQ;%^h)#u@0?S*=d zHKLXobJ$dhE55yH&O8>Dd%DddkB_+}MMZ{0c6q=F?7gt&Jv+6boBLTgzU)IPF0O~| zu^PpFD<{XkGqRKernbF{vY8vqaZ1+0iMb(V^J3t*Qqhd6NVdZlcH+Tv{jZ6WPUJfk z>J1^gn^6upDDJ15(jNWqJk1ODRH{=cqP&FXbSsO}X)gYy`rx$vN>V43z75rg_}O=| zeulK(CV(R6N-JRPg@ObP6f2N-KyB~`*n9Y7=Kb818hSMmX@A@d)QWvcIW{u5uFA?) zD`qEo06u_bE12Vu)P^ZyGCBYmDi;&9{Ax_7E$l*VhE%T4pE@UrOPh%Im!{$}Q-gK2 z#WN0_gfnOtM3dSI*HOR5r>av4v|$9r`4Zq+a2EF!C_Bwc!d|!#XJ1mGaH64s#a8Q9 z;;^M-)|2kD^Eq6M&LuzQokxj0deeN3SNr6+-bbAN4MA9@N?KUzfh8`ij-af;gQ?d{ z7buMKdf)WTcj6%k7<{9VhaA{t0Z-ZHyXQvlvbr7u1U&m`r3V$%hpg z^hes6>}ye_lWJ*eY=6(z04!+sM?sFOr0J9N4)!kqJFD@xq+oDT&_%p|oW@6Kprw9> zQyn5LN1GaQTZ$_3R?%!2Op(yS%POG=tlP5`FGb? z9YXZLF*#?Oa>Y-@ibPp9Xag4(m=H{%;)`||ZS#spaLr7MyzXp@->6vU^Z4QVXtbX> zE;+n0YIw)N<9FX5Rm>lhLT)LPV{NR1ajVJ<+dC-+^orv|aE$6)F>}H{=N{FTNNQ9| zbnPBq8>?`&~vlo%&MWNi6cOV}@4- z(l-l-XO;C)1a$(Jp5!R^SASS$^y#Pw@o{bk+=cg4lKo;yS7Eo-==^c?!D< z;&gAk*&EAC!-|chQhgGaN&IvNw~PFJBjA}TW4KCUK-g%o7toUL;B%j|@W!RL2^v=R z=#eX~QAU|jpN}sSo@V@Z>4m-W?5*mUTVZAzrU zAGDcmUPfmE2>aw)v~%Nhb$e!Z|IE=Aj%TN_L-FL4y_XSVaI?B{BvHP8FBFYobZtGnZK{j5>XYGxN7F1(jY zBXxa~R={YRjiW!e5KbX;OiFo}qJwY;<*GeyzV*}CoV+y1W8dHi<{Z)WPl8;b%H14; ztTtY6q6)p^1`Ro9Gw8YiznM_Y>=Hv`qHKGcIpwkRSnhTcDVi9iM7+Dj#gmV~k!c0= z6~A6r&T#vSU+W_E6Bmsew$i8J+==eAmEScS?2ltw{B5+C_mTT;Frobjme8QD;qF!H z+shSdKKXvh>NfUOwdzFZ-)MKNu)}ErBzAFs)^8U)hARpT8=UpZ6zGiq< z!i|spmzo6hPuB268S#^&cn-bGC~*>P4|Pwe#iMXL<&w(pj`dRAbF>gAHJ&zS4SOCU zv0PiW8BQxhyL;ntb4+2$p0Z}$1`F!Mk78*1inVF!&C##nA=GJ*2b&R9d+XQR?7fblhw7+>n zIvik^t@%o)7mq1zOoK;(j$UxL02`b1_^G;RNH4e#RspZ~2+5%Hhzr}ZAC-YDH$54~ zs~D;0jdVj9U(Q(ef;hOSc@k@Yt6D1LH-k4#Jyt&ldAovOOyRo*3Z`tP$?cvG-^xa= zUr6GMrern+{da4BmiDav^5s8nqWG~nC-hx`*ixTO9n5$|=2w(`S=e>h5;Mvsc zI-{v--927*GdSuJQfDCx3dIuD<*K(N8C2P5$7g z`;wlGGx8<-%H8Z;R&I{Bi`Cj^JqnDKt&Na?mV8ns9ClIj8xMWU5%POvCL8?vlcI}a z<66rMZ})-=N}rPK%#5gL-Z3(svJuEDomHbm*LT%vIpXb69XK?33BStO+|hIIp$V%K?$Nu(h1{AqG=)OZppe8Fgl zjglP6sUrIhVpA(eT{w-4{o6Z4L86WPzqRk)Tl#EOkXfGVZj;%1?d0Cj+ss&>KVcb| z&u@!yAV*ZAlTLZTj(i{1B&#CHdzay%;ql;|gU5I5Gj}5zgmriv;U}O7Jt-bCOW+<( zfs$o{Wcq)}h_rO1Pw?)AZ&BvfqCuOX8h3_ve%E{i{%fBYcd}FTjx-k{3Nzj$4r<2!Y(-a$!;`b zC-ko+R3A|)Is+aFJ9U@SXD$a6TuT>AFPX3PHLm9|aEv-VQV3+3J}*2cN1N9a=ZoDy zMJ~3A?mzrnjwp!cP&I4YwPskv#pez-IN1NX(dv!JAfLcJnoFTzJDVG=lDBH+z0k5{H z@Ze13oHtr5@N~xmadQtjc04?!9U#~iN7XQ~t}tE2?nT*^>4qj>RR!K5GJTXvie*aB z0C4o3GzIX5ak9BlF_P?=q#a?ZFGeDE~QNJFZop=mv%y; zLS7(^wkM*JztEs3=~~mlsc*MjerN%-uOzi*humULE(K(cW3AArI78vYM<5vZ-bI7O zC-trqy{Q(1*TXb~iK5X>@JJ{!YGS0q*poLK6kkFe(4(A%dA{H;)D-=;2T(}-C5FIJ+$ zcuC8}m<42QQ|&iyyT*VM%ys6Q4(}i3Q(WrT(XL>`y=4$)C1UI#m1;`uGK?m$fbiw_ zJ-;4DxD(pZ?Pce=B7j*H5+12<*70P)&$P9UX_p5^*HwJrOD~+556?_3Pd`iLzN|wv zS_KQf|5?5G-dccLPSD`I*+93Qr#j98O8(OIUgCr7;W9{jHo95h=jze3ljeSw*r7+? z(g%qVig?yQ!TI7OFuRS09-9`75=vUiwc5@n^HIx^z*;72;jmF0#J6dFaP6ydeuaUO zCu~gdAikXSgFPa65y(a%=9HS|VY&#?o%_KhulA9_^TR3#xEt?irMrq&)r3uJibxoa z({Qtd)~p&@Z6Qdw?Vuepnd$S)PCQDa+csPEf;wBY31eKUSQWB@_`Z+}@d`nVPhQ^~ zU+-Z~$tNU67NtFlEPgqA;r9!o=M2RQrTZ?ZC3D>uBaNIi@xjwCzP8B}Qez)2=jXdr zR5cYSU2MBxVqA??KGQ^PC$Y=XI^XRBXAn0@+hHW+$)MKkgE7+VhL+LA*6xDTHP`au zWNf=ko}a+qP|;$fVR%{B{Z*B4CSZYfp?ImKr9jY|)0pA?QBcHcGU67FIpDe7`v{H} zdAxVRWD{~mG^we3i?i;Urs(Lb=HSjL4?fQB*M8K}*K=#B!9vEC)iD!SbxLM@Uq&o% zy)J$=Gk_9st6l3hbM+KsU#OI#>7FW^dR00#LgMZ4@lYE+Rg&lLy2C%Ybr*eZ9wql+ z?a-N~Wf_=mmzQS^>IRq-^ zo-Qfsje%XwxO^%j?Fe!#UMcFISKr|32!`|$)~D5~BbpX3AMH%|B@FX<^lxothE7_1 zPH17{wP5T}#^K7KuFz}G`PO3zXUlW-UhvbvERnoQcXtd2P>Tnk;^8rm8$_F}jtTSV z*_qCc@-|AIb&?tBSW>)Z6R{jcbStI1lcarcNs8olr$-4-JxE4t6K* zCiiJl_)c%lmw?ucV*^}K=}NRZcoei+EzWcr?sXQ?Q`|sU0P?e%3TGq}Ton;=x5wK4 ziR&}F(;dyvR>X|L7ows2O782cjUbfTV9G+89oV+9xu9ioSzzWiG^q>9wXP7rc9_?Y zvsbB&eQ%+$K@URXHm`M zlm&H1`nANmYKWvj@)hSc9Dh_rj2Jq9L<|^)I~lJ z&6~=1fcDj(0#}&Yz_0uGJ94LXL6us82|p#nCXDsg)H1@Pn6v^4{eKKz&kMILY;|vS z0rHNBHuR)6f2A1c*7tq~FTmE#PQdF4;T>lOZ4t04aIB$Sf2%3ROe*li4SwcW*%fZ+ zAX=A0V1+pz9hH@)udOSD(oX}-6daEJ=<*$cYrJ?%*!8C!;l%Y|3m1y}jIf8!2~ue@ z3zPEq$m;U9i@*KJoDV_aey9N;$*a!%e5(A^=EmDO-3U*vg;n?;j$#_L#SHCHERsg( z8GDb2jYoKLxcn%LUA8I0+Me}B>pq4SlfyxWY_x?w_{{#r#r^iI(jeMx%i(#5Edp zwnFrrDLSF)0d)_){$&$d0wRfMx1_`=arDf}GdmmsUzKXa!g5r-wy}fAgX@OZ!ND)J zy@}ThubO$~1Z+S4?vfd*BcKiuXdY)JrdA&NSNjI#_UZaKXWY-DL|)Rqh1o6HfC--1hZ%uX{7*ot^8o&h78^gWIO`vPs8&Hy1pAJC`QZKC5h= zYS34sju^87u0$mIv+I}XULj_;67wSxS?2gJby?41;nDg?4lIs{qE;IS|`>?hx>N&v&IGk<|OUrsTa(LECoCA z52NwaczO53f`sWR^}EO&`x)FCM$Emf$fbXC?>NYQtE!o+Go6`Fxn_1fNXXYmKg>}g zViX0;$g3ZH8>OYQExPstD~H0FE)Ae+yA44C*icUoRYQDGQ8M_LS;_Zw%8%>T!SRQd z&_aR7k3W_g0MkN-*ZbAJ_df)DaMdo`%&|=zU4DGXjJbwJv1_12YnwZ*ABrRf#D~WZ z8Mw)X7W7f!zYl5?sT-wXveF$agB%s?`cDmGPS>IaZyidrX5QR(=ODoMI)yY6j-#le zfy}`|LE$;RtbQuvSu}IGNwBJVBR>0rC!J#X7g2T%Q>O(tZ$S$3_^;X;N~|f*f@i8t z^jlxKa&|L#KGh{Co=9wzKPC`5lnXiO&U|b^fl>)!QAf{3LC5`z!T`kd$PzN`5 z&8WV_lI4($uoGoj z(gnNNBc0{2qWqb(ru~_)hfFPgR!og1AbuugJ(>Nbnwz&3m!zc7a0B&D_RiCH7pq;wIxs78Q#8MLW3x4;;jHPn`qEZPc}@p zD-uT3J}h~myT&p5JhaGfa&OmEi6`)xj|5S+V)nDaRh<7^vwiTE-sP(6TU7>@or4|=`u@+Yv3>-|8XN=5b zhcJ`0W4gbh%M(JUrQK?xGW*Jd2vM(S=5qyoe?5Y;sqq6`T)WhYW!>Pi%@&S#WMJYM z*C2XQwPYKHMMn3BUC6EX9K$y}1&uOy2UOPfx^_L$F2UiWd;9?yj=?CWUxC#)Lf2Q* zAB251bG(UmvZ-u@+Sb5>G3DkOk@g~(?U<@>(Z)H^avLx=rnksh3N{x+NmWB6LK2Vi zVn>y)8_zjWj-dHh6LQcv|5SlcZ^USqnGB~P&&STeiUY;e6zh9IVmUEr-F#RKRdjBT z_TXZBa{g!Oc0J~Yzpf8S3yEc3*fL#MTt_!*AE+!%ukmbJTT7KBir;# z9AIu~4GPus6NbavHW>z!Q!uNOp5qg~91#fdiTv{jYAEhryH_8&ax&><)5|^CLS}fq)l3>TH-~M*?R*E=C8+D$pGGW*0cANg zunR20r1)tb$FtjAWkuyU$0h5DlU!K6?B1bMs6Edju7@TgnH{3JLVj>HLve<0F#>!N zbsWtS*fiEJoJgKQZnh@RWUXHbRnuCtxTFP99`=PoHDXZywWs7w;ZxlHYnadhF0%V$ zs2lyE{nDRmP7{B>2KT+ISa0X5N8YW-FW^WaQR$@pCi9VUqf$z#bPCIW4kGKwM!s%*3eFI<{IKw)3&>pzb{Kwot&2y zE%vT>_+goTA(zXxOSKu0 ztD5ZC(|wmeVrGTSSBWI>L^SaAvRRcQepVXrYpH}gX(ry|B_O)1ioUqegpCn~sc>&XH2y%Okllp|^Iia-_9$S%mRev5SNGI8 zg_Bw~x0hsMa}zSwgg>Gyd!`d_~v^7&20beRM&k*k}frRV=5b>ouBIJuLbBqJeH;V4%NuKy?Mz~ zNQ_Qwa#>#|;xR$eZS8@xv$bE{kS?~Rr-ZO;6ZtW(Ft1>l!JVFLy!16Llr6P*lU)*O z5>4wkr2x>stPfLt4_3PuOEfoYS_V~|~8I?~phQXcNyG-$Qeba+CA%*XE1y>qk zvu31S1a@Zqx~Uia z)?7547I4t`S3Co=B&L#n=Z_-F z9~LxCUUlaup7pn9DkIIMfCU^H-X8uAx^<$pFn;GK`N2KR&k@<{YryS`s%xxS8w_hS zZsEBacg;H0o6D5r>()1u5sXUKL`m$vUunXFmZQr7@`-pA1V>3fw-i7-|Mc`4_^wgb zf{%uO6~-+YMe*0&DE7XT=8)mqq1;eNNrrL%*qNrNGjlT=>6K#S2t3RcOXWg!CgLlJ zyCC^0`j*{`ez7!n+mTkqUZftNHvF5wn&&$uP9KX9d2MR8@ zX$S7E1DaJ~&ILdZIt>x8dc!1Vch0fq@6Cy2EF7!N)1d2{kgq6cmJZYI5IDsXQxF1` z$RLVil|To(onKdasE~-)^{VS;@u`$MG#A;c+9OK|_Th$t%O03++;w1WvW@vRKj^e}pmc8de(@eW2vWO9L1hTU2Ms2g+V+>ONa9O_RqY^O3Na1A zHC+^~n^j%w5?{N9u_hC}VNrVgYQgHhjgx@zWYq$q6kT^##gT)U^NWzDeUr!_Ig;-& zL`9%go0^hWHHR1X=;%gROf2ukQrh}{zXbi~aAB&N?`2Ti)~DdHOto5ESnA?NGb^rd z?a*Wf~(e|=4_H0d1@ z`CJAjNq1;ZUaOAJ)MLo(AdO^>t!;M7z@V}7SdaPBRk5Ak;;Y40u?raglliGK7!r2E z5q?Rp?PX6a6^RKSrr(w1x2ae`9>FH0g!P0hg>!&tzr|z>UhEx}3wt zA31;2JiuJ%%>lLD~9mx^Th$$%l(CT`C75$qa4sv5x2Icqs`Q~?6mGefXpvltda(7tn4-YFANE9vl|O( zi-8e>>)^5JLtf4X?( zJvH}!vy1y%O>k~hs3pX?uq?znwwy*|VjYs&l`_EswPfpo%L{nqD#nA7aF<(_*d z^9fB&U;VJb@+=y;{p$yIX$L$5RQ@07et>R!?|Y1gyM%=YKgLQq6Ws^#5xmggF{*$C zW!Y+sWkPH1X3k=yGvqs3IJW!6Y2A!33=^6>dpu>33~jx(c26gsXS!?7+_z~K?r#PA z%8RE*z(Bu&AKhN}C86(G7}OSRqdgjAA~Rcd9Ac$TS`*7T?7jT@td)7*JdHqJUiE9)Z3K zEYl;*+By*d1Z{crFcn@44Q3EdE;YYyXbNU>B2Xg3B?9i61}`y=l8c}4vs!3KM?~h5 z!X$J1>rrOvfS%q$ft}7=6blD{CDgq!ksO54knwcha6R4glCQ}|)%`bFn6KD=gPK+>p4i$?m#Cpk>NR<{hi{O3)v zpVOOG(z08|f|`bQ{Hw?OW_;l-F~!sLza#;WR(-zBEA?p-pa`SisDq;LFSDE-uNu+`LzAKG+_JUyX}gzZlgvTbk{`b$t6~L7zOoO z@uXIeY1nf{GWjT<`zpXp49+x&-swkZS3s}JPT(#YfqAvMfm@k8)#l>Kou~^5bFC?4 zdx;dTm2~fX?wXHE52H}R2d-qbZW^@aJ-7Sx2uKsos&u4$A~{>K)d#uswIlcy1^QWK zJ@`}Bmp8Z2+^xiFbU817V_=zOuwjy}zx+3~HaY-6(k$-MGTIEEoumLtZb{~d2*tjh zxs0;N;~l07@GI;x-J;Pj-ukhrSnV?@BTuSNuIZzt@JPDx)*4gpT%EshP1e4&|Z*L-yjf;kY!Uy`R?xEsSFRE3$pAf(~aM$G2%^Y`^iz{DNudi80W zU}p#>0gWwSIezKllzEPwiJ2v{c`3&jd=`;j${Xvk(OJl>WN3PJ1=;w$Abm z%Ia+*IRplnIQZTCyRC377m)b}4h?15ju{FKUPpSLLd6xvLb)das`Q^vSe(oaQ@Or% z>#I%LHN#e;2GhuOBCmtbM&9MHxKv6-%|p$-ipI8O$JEJ5)2+cz?J&N7m`E&taoQ90 zu7!qIRFrN>T^qWuvx+B49u5A=&Jjt^lsSw7%XA-*L$dHi(^Nf1UC)U%h0UU%^B?YI zsHf#IHgl~{d$Ln{aZjZ0*ylLtNwP){pFC}SLW)wHD#Pl z8gdI)@;udnJc+2c%yF`9sYY3O12;bFXNL^KOnK;Z#K0AppZty=DVUn3TQ=7u`vm;g zy~A^7d@`@C{T#WpJj!{ZI-}a##>dUv;PUuK4Bqd9pyLv#Q zrTq8swsbsKaETZ8jya9Mu&mh;UL15%2Qg&;vq{$h_)#9W%RQ<%iquJiG4V>DGD?T!VyZ{nlU z-*v_;9m=H|6+qCGMcmZ-%92dr3YKOm_qEUkW0O(!=EWzW6o*sa??-$&xJ6gwyCpoS}0rbupy(teBRo`p+r<89i O0DuN&w?FDVeEL8AO!Dsl literal 0 HcmV?d00001 diff --git a/pdb-ui/src/main/resources/resources/js/invaders.js b/pdb-ui/src/main/resources/resources/js/invaders.js new file mode 100644 index 0000000..f9fc748 --- /dev/null +++ b/pdb-ui/src/main/resources/resources/js/invaders.js @@ -0,0 +1,130 @@ + +var invaders_game_move; +var invaders_game_new; +var invaders_max = 50; +var invaders_count = 0; +var invaders_stepSize = 5; +var invaders_margin = 30; +var invaders_city_height = 75; +var invaders_pause = true; +var invaders_parentDivId = 'invaders_area'; +var invaders_points_kill = 10; +var invaders_points_lost = -50; +var invaders_game_over = false; + +function initInvaders(parentDivId) { + + // create a copy of the parentDiv + // and set it at the exact same position + var parent = $('#'+parentDivId); + var height = parent.height(); + var width = parent.width(); + $('body').append('
0
Game Over
'); + $('#'+invaders_parentDivId).offset({ top: parent.offset().top, left: parent.offset().left}) + $('#'+invaders_parentDivId).height(parent.height()); + $('#'+invaders_parentDivId).width(parent.width()); +} + +function gameOver() { + invaders_game_over = true; + clearIntervals(); + $('.invader').off(); + $('#invaders_game_over').show().css('display', 'flex'); +} + +function pauseInvaders() { + $('#'+invaders_parentDivId).hide(); + clearIntervals(); +} + +function clearIntervals() { + clearInterval(invaders_game_move); + clearInterval(invaders_game_new); +} + +function startInvaders() { + if (!invaders_game_over) { + if (invaders_count == 0) { + addInvader(invaders_parentDivId); + } + $('#'+invaders_parentDivId).show(); + + invaders_game_move=window.setInterval("moveRandomly('"+invaders_parentDivId+"')",400); + invaders_game_new=window.setInterval("addInvader()", 1000); + } +} + + +function addInvader() +{ + var id = 'invader_' + invaders_count++; + var parent = $('#'+invaders_parentDivId); + var height = parent.height(); + var width = parent.width(); + var top = 10; // start at the top + var left = invaders_margin + random(width-2*invaders_margin); // spread horizontally, but keep margin to left and right + + parent.append('
'); + + $("#"+id).click(function() + { + addPoints(invaders_points_kill); + $(this).remove(); + }); +} + +function addPoints(increment){ + var currentPoints = $('#invaders_points').text(); + var newPoints = parseInt(currentPoints) + increment; + if (newPoints >= 0) { + $('#invaders_points').text(newPoints); + } else { + gameOver(); + } +} + +function moveRandomly(parentDivId) +{ + $('.invader').each(function(index) { + var invader = $(this); + var top = invader.position().top; + var left = invader.position().left; + + var parent = $('#'+parentDivId); + var minTop = parent.position().top; + var maxTop = parent.height(); + var width = parent.width(); + + var newTop = top + invaders_stepSize; + var newLeft = left + moveIncrement(0, width, left); + + if (newTop > (maxTop - invaders_city_height)) { + // reached the city, you are loosing points + addPoints(invaders_points_lost); + $(this).remove(); + } + else { + invader.css({ + "top" : (newTop) + "px", + "left": (newLeft) + "px" + }); + } + }); +} + +function moveIncrement(minValue, maxValue, currentValue) +{ + if (currentValue < minValue+ invaders_margin) { + return invaders_stepSize; + } + if (currentValue + invaders_margin > maxValue) { + return -invaders_stepSize; + } + return random(2) == 0 ? invaders_stepSize : -invaders_stepSize; +} + +function random(modulus) +{ + var value = Math.round(((Math.random() *1000 + Math.random())*1000 + Math.random())*1000 + Math.random() ); + return value % modulus; +} diff --git a/pdb-ui/src/main/resources/resources/js/search.js b/pdb-ui/src/main/resources/resources/js/search.js index d4c384e..1855032 100644 --- a/pdb-ui/src/main/resources/resources/js/search.js +++ b/pdb-ui/src/main/resources/resources/js/search.js @@ -41,6 +41,9 @@ $(document).ready(function(){ return result; } }); + + initInvaders('result-view'); + startInvaders(); }); function zoomIn() @@ -249,7 +252,9 @@ function initSearchGroupBy(selector, response) function showLoadingIcon() { - $('#result-view').html("
"); + //$('#result-view').html("
"); + $('#result-view').html(""); + startInvaders(); } function plot(event){ @@ -273,11 +278,9 @@ function plot(event){ var success = function(response){ - $('#result-view').html(''); }; var error = function(e) { - if (e.status == 404){ $('#result-view').text("No data points found."); } @@ -313,7 +316,8 @@ function postJson(url, requestData, successCallback, errorCallback) { contentType: 'application/json' }) .done(successCallback) - .fail(errorCallback); + .fail(errorCallback) + .always(pauseInvaders); } function getJson(url, requestData, successCallback, errorCallback) { diff --git a/pdb-ui/src/main/resources/templates/main.html b/pdb-ui/src/main/resources/templates/main.html index cdf41a3..50a3c9a 100644 --- a/pdb-ui/src/main/resources/templates/main.html +++ b/pdb-ui/src/main/resources/templates/main.html @@ -5,11 +5,13 @@ + +