From bb1ced5e0fbf907582946695e51bfcce30c154af Mon Sep 17 00:00:00 2001
From: MasterGordon <gologo.x@gmail.com>
Date: Sun, 18 Mar 2018 17:35:44 +0100
Subject: [PATCH] boom! toolbar!

---
 css/main.css                       |  37 ++++++++++++++++++++-
 images/infobg.png                  | Bin 0 -> 1155 bytes
 images/items/coal.png              | Bin 3367 -> 1528 bytes
 images/tiles/lazer1.png            | Bin 657 -> 568 bytes
 images/ui/build.png                | Bin 0 -> 261 bytes
 images/ui/delete.png               | Bin 0 -> 235 bytes
 images/ui/info.png                 | Bin 0 -> 640 bytes
 images/ui/move.png                 | Bin 0 -> 223 bytes
 images/ui/rocket.png               | Bin 0 -> 540 bytes
 images/ui/rotate.png               | Bin 0 -> 435 bytes
 images/ui/upgrade.png              | Bin 0 -> 318 bytes
 index.html                         |   4 ++-
 js/baseclasses.js                  |   1 -
 js/game.js                         |  51 +++++++++++++++++++++++++----
 js/tiles.js                        |   5 +++
 js/{resize.js => userinterface.js} |   5 +++
 16 files changed, 94 insertions(+), 9 deletions(-)
 create mode 100644 images/infobg.png
 create mode 100644 images/ui/build.png
 create mode 100644 images/ui/delete.png
 create mode 100644 images/ui/info.png
 create mode 100644 images/ui/move.png
 create mode 100644 images/ui/rocket.png
 create mode 100644 images/ui/rotate.png
 create mode 100644 images/ui/upgrade.png
 rename js/{resize.js => userinterface.js} (89%)

diff --git a/css/main.css b/css/main.css
index 7c30dda..e731b86 100644
--- a/css/main.css
+++ b/css/main.css
@@ -23,5 +23,40 @@ body {
   border: 1px, solid , black;
   border: solid;
   border-color: white;
-  background-image: url(../images/fliesen.png);
+  background-image: url(../images/infobg.png);
+}
+
+#buildselect {
+  position: fixed;
+  border: 1px, solid , black;
+  border: solid;
+  border-color: yellow;
+  background-image: url(../images/infobg.png);
+  width: 1200;
+  height: 576;
+  overflow-y: scroll;
+  padding: 4;
+}
+
+.buildtile {
+  width: 48;
+  height: 48;
+  margin: 4;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 24;
+}
+
+::-webkit-scrollbar-track {
+  background: #B0BEC5;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #78909C;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #546E7A;
 }
diff --git a/images/infobg.png b/images/infobg.png
new file mode 100644
index 0000000000000000000000000000000000000000..62e2228a9df3046fd13aafcd5e6ad84e661cf5ce
GIT binary patch
literal 1155
zcmV-}1bq96P)<h;3K|Lk000e1NJLTq001xm001xu0ssI2*kEqZ00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D02y>eSaefwW^{L9
za%BK;VQFr3E^cLXAT%y8E;2FkAZe8V00Z+$L_t(oN3E9GcBC*21@r$uJlQh^CDg*$
z20Ez+jwEZjHl~x8pFiUB^E0g9F%$It{mmGj;g2Eh?d?rXlPZGUcx5K&>+9?N{r%$B
zGmWZ`kB?)OahI?oT2SlBE2HwbCnChVOVV9J2ixNy0a;A~E(ttu-yth$?cp5<k08@+
zbgPJ?lIJs*+NLrQMA~(^Kt9iB1ObyI`~&V7#o>=>nmh!}2i%2L^YfF`otYuX`YSD-
z!?%2FPO!P=4?&|E$W@*Zx&!6R8+`->{X}fOyF(*2w(EYb(hXMfBrqaWKuT`){8E$Z
z4n`+Lu)FmJa@bF|L*-l$&;{n_my?Jv8#0odiiS&qCgk`Wh7R=ccB;zj{8kVkCDjNz
z8kN_%Cx`*pCyjFE$2Jt??Anw@T$lV<u4p=9ld1{3x_v>aaj+3;@@Cvp<2=yKecBnr
zZz2bUAQnUyXhEK-*gUc4-)*#5StM*#O(Cnq^O&{C!60W5WRw~+ECXEIVMtwVa6Hfl
zsCs>U{kLL=$lJ(>)5%fRA_#x<E==t%Raim<P3!|02vU>fk=lcD_Tx5Qve#&&nn)lm
zkNt=z#8a@zheh4leneRhK{&CpQtMf|)mlh{Mcw#6HFLsQ2|-MvEMn`a5Udf>2&Sfp
zZrciHikWphE>oHv4h8uV!`~ps`UJO;*rjG-8>AZ%2G!|(LDpww#UQIxnO3EzV%-W$
z$Me8dlii5KXJ6Gww`r1tc`C>zbO#6HHcfDi__PUBq5WU#BV;$Cvo#8`9XWJIA{YmP
zK!Q02u?cF(()79@Dw#x!@HdD!IQ&(j$;49`cnrp&O03*CA$Jr0#w6|mKouw564?o&
z1%z{%QEOopP=F?WxOpDcn4tX-gcP#bO_O~J`IBupEZ<ZPuCU5q7@pWWL4=O-yDTTU
ziJ)XONh!W2j4Wv&?t8@Ey)vX+RO5CXK%;C|F^wgYyNZ(>ef3gTsC3`Vz;>{9WUSy4
ztkeXmh`6Q7Oi(kR;;?LoF-ZniYXUaqo?N48D2P0-RQMM-l~o~={vK_FRu)05H8Q~+
zOm1RAxgE^Mj)gO<YVwyquFSSkUBf0D!XH4I<!&G^RxIBqPKYkdexjGP>Uge0L);<z
z!mTqGs=A*&JR$CJsVPPct?z2$V7et97+_p)xckb~M2ks1OAOH9shVyHLAD2eN|T<I
z-3cWTTIYqe%@zg-_GliFOh6WP29L=}dxvT&F75I>(gj>>#u%}x)+Pi=$j%t(BjT#m
z!kwUFUN+KA8|oOqutUu`!s>j=?v;gAn0K$(x3<0r`tm)%?o$5}q}){_k2CxE`43T)
V&5>8(bbJ5+002ovPDHLkV1mx}5K#aC

literal 0
HcmV?d00001

diff --git a/images/items/coal.png b/images/items/coal.png
index 705a40c272f2db45516ff100aff10fbcdcc336b1..05847dfc9bbbf75e29d003823e405f1a4083816a 100644
GIT binary patch
delta 1451
zcmV;c1yuT{8u$y4JPN}A01m?e$8V@)kwzzf1$9Y8K~!i%)!4~$6iE;SP_zpzECNYr
z0ilIO%R#sKh&j!l%>Q3%@|7vDoKSSD0dXkI+^RY<tHM3PGb_c5VHhTjGB_oa!6~5(
zP6=i3cX5AzztphSuv(2jC(7VFJdoRa^XARau2+c0So=4utgH-g-@Y9V4i3ia^73+j
z8+!bn=Rz5rhemkw-Me?g_wV0_^Yin;{m#zLu)V!K68`k*({OWhGu++Xjo1DC{b6Zo
zsXbc1?{`rK=Rrl0BH;G+b|m@r>(>$2*Vkjr*u}-gkFnRUUu#c$yng5JpbXA~YJdCo
zZ6pc^BC8v!e|UH}?C$Ok>+9>o$B!R>M^TrTmjlcF2|Ja+Sx`lmVGo2)PELlsy}i*w
z8yg$L>gwuP=>QR*KYt#D5`BDpJPLXB>ecY_<;!uLsF<JgErK#wK>}X>@ZrNK;Qjme
z!`j-~=zW$_b-#N;faK}v>HjQ8jIQX|(b3VcwYBwQe$M+8%3uXASLyJ2SVBjCRGARJ
zb;3R31dHj67<=iO`2-N97~ZKXzapXxf)^oSTWmYe3Sw-diU_E-ImRtg1cUJA=H?jF
z86DFdBG`uIT+O#@SwBR4`SN9qKZ}4ycv%8ORg7K2%c`Xl67?Vi5GBr)Xe2%FH-Uup
z&m*lH-Yu5`WIppy2AhCmgjEKA_%^mg)<L8v9|)3R8yzGDNx#jho+Xl<qBt$T4@b!@
z<8h#ckmPgFVzAi4CVlb%+w`_F&lP!aA9D$e`<QP*>w-L<&AeveaiE0=h}|MQo0Den
zdCbYX5i7-_k8#C_anJ<?vle1k%G@eE4z!R2;d#|ZKztThr6;7Kb`|k|h#`-dt8V!w
zARXg!o}HbIg|lWNp7~`w4m>=F(ACw|_(BJ>S=Ir>GFiWM#aKM+8Zb^kFWi<apD%dW
zG4soK9C&zHTSyxX|7t5C{l_LlMYBL%0E;rVQKW;IF)`f@@$sFpE3vIu=9f_iA0BK1
z+SY$Q?nD-uq{cE-F?N}M072#>919u3jv?4J$hxvD0gJAKG8kwARvP}Xn02D}Y!4Og
z_jY1}yy}K<)~bp?l({;oU?Cv$sZa)cGy%I7oCVFBxzga{<d~qEfCxchk9dXvM0*ht
zL)iR3A;4c?f9rys3AsofK$b{Eqsmcz^Fx4mbR@(^w~$Ag0BeqaEi;!2WiX=&_)Ar0
z9V5cWy#TR(%so*-7|e}%?n8iL*@iQZ3S}@uQubk^uu72c(Z@3}SJhW(U2)&fH%_3<
z;@JgA;ABaF1d>PM3`F|h#Iu7q!hVO1`ni7l-XIS)hRmZv8O&%FS`PudE?G~qhblrJ
z3-W-x>h?zuqMSs39q8<K?&ZilDwM&DCSZ#IFLyTT$yKl`u}yCgKp1)N3XzEVi_I6<
z`(rbRXEK+JGMLc|a43tH&jNC)XfA?LeZ(y2-hv9^y==omxx1N5Mj6bIJOuOyt$9Ea
zITg2X!G}<1Vvd;IEv(tEi9qI(Q3f--2ytzeP-U|{o`TAMBHYKK`ra8^ZO;7^%3uXs
zpF~7hY}Hy&L5ow>5z2PxVT{dGpLJ{$Ro<si1}jLa{c&dZhezxrz%u@tifxcsws1u5
zJs;2wAFWtdIp3lvgR>y9PDreBNcym;AYsVpjyMs7f)geoo(<~}Z%!Q5bFM{E2Irx*
zdc|=<2Z%s_I^d{545A3S58D|hB>wA>V9(n^*(v8)6lL%!@GFn2s-1-eAilWWyftD7
z3A-SzOL4VcbR?enS(L#=AnBrs*@ovWd`A)80|f|6<!2T}8T?aVzlIYQ?7!4`-p`;6
zP6=gjN+^R<LK&PA%HWhx2B(BFI3<+9DWMEb2g8dN{{VthO!o3=OeX*U002ovPDHLk
FV1gd!!Oj2x

delta 3304
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

diff --git a/images/tiles/lazer1.png b/images/tiles/lazer1.png
index 47512cc5f8f0898d20d9330ca582ffb9b06830df..637ec0b567f54f67f7671b4c47c4b976fc3743c0 100644
GIT binary patch
delta 486
zcmV<C0U7?01-Jx|B#|)~3c>&Y4#EKyC`y2lQzw4`wMj%lRA@u(j|+~2Knz1UT5q+-
zXYop|-bSV+)BP|NRUZ>fGO?GBWnE`x+5p>6&*ke;NdsqP`}au~{Wg31@8YZ6Znu?i
z$sX#f_jHNk2sZN;0d!WQuKDfs0chO#o0u{HVSv#vQ5>Nfu)%7YyhQ-dO&LIa4spr=
z&rpBgDFe`?^i&J=+C1kwL~#Tfs3u)AfOK&MNa6^40Z0lU{yjilPSa#BfS4ixzo{0U
zog#qxT&qv-Qw1REa{wc)OBB1j62Rvv14!pdXqt7GD0ZpKX_9BvD!k(;QS4He+iXI;
zKGkdU^^T)Nu?v^eWQDp-d)8-{D0boUYLtIaS8aTU>kd)u!o}6-9yaV*)*YhQg^O*j
z8m`!|XIXcMVizv9xoWs#!y~3i6uUeMz?#@RXGe%)7n-m+8g)(7J7oaBt5-E=M~Gq<
zny98(6ZKvJHlo<2nxN6Q3*dM4T>&<t*yT}x3IkmMHlo;NFM!P^)2un$C5m0D37Ssj
z>DoQ2>ui@OcBv+8*7c(Rs$U_BN3fxvg!dmMihHD`e+~VJZ!abdo(X!r7nL-4My4^E
cSl4y=1PhXl?dr%@)Bpeg07*qoM6N<$f_ygN4gdfE

delta 574
zcmdnNGLdzH3KwH>kh>GZx^prwCn`#F9cEzQJIr`Ie?`hfH}!fZMo$;VkPPRm{f=48
zh5{^qP5%E6mUhX=m^EpSZKJ8Bh}6}bHK$(hTGzkl{`=RrQzkpiyufeg`OQM(y;J|+
z)<1u(7tDDeDEF1~?_ZHA!exbZS<8L{8Aemy6}>B+-&E9;^rB>1@p_P$$Yb@5W&5tz
za-HJrTIiu(UU&UYLwykwtA^3Xx%I1eGCpPD3P_n$efATthI&8)ldaMI)A>;Weip5n
z&o`d{u@)H2HR0a*rQFf7@lesS05n#j_%h46n?IL3-29~JwRv~SbNj|kt#aRQ++DMK
zzOF{}i$eaZZ!Va>&T+iy)Sn*XRJT)Xitf+)3b&uOd*5Hb)3ixdK77KS`JKN_w=c*!
zd0bTGefqg`pMV-aeT<!P|8L2Ckc#gb_n*G0zHbUrVSBFJ^7p;xY(P^sBpGR?-~WB5
z0jMOb$NlG=`xpM{0d+p)`5gRW_7|WbWref;UU_rE-{IyYLAhl&_n(~mhh>Vc<iq+z
z$;w;4AkpO~F6S|wn$~0CI<HJPU|Y%&%}-lq0}WL6o4EWgNNr)4&095~#T~&<GR+xN
zz1=j<oQype9I!2*<&lxm-uFPcg&h5#_geo?<2ohQRp9>F>gD?=p!5m7clZA@Kl)hj
zz;EZeZ$I-=XZwF9H=ishdBMJ4+Oh0!(cU_SllvuC`(0{GW&i?DS3j3^P6<r_<og@t

diff --git a/images/ui/build.png b/images/ui/build.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0a7841308bb1e2d24a4c13b3c6bf30de292c5b6
GIT binary patch
literal 261
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA0wn)(8}b0DGoCJvAr*{oub46&N|0!N_~4AK
zoB5sf-S1yqVJ;A!^EaLUT0fim-TTY?=Fe`o{M3I&|G@?&r#a<SO`m;Ue6CVzYxq>O
zsP%BWkQ`T0liXXeP*cbJzBvnOEEWl?*3Xtume#GGy5V^v)3$=`9Le*-c-?P&HWW78
za{o7jE_31a*~J3FQ$S_`QNO~obfzGs{;TtUlqPY!;QV+0HRm}9THVR_{3^@)>m2_#
z9ud%V@O|;wCFZ2{?ZVatdl(d&K1DHn(9~zBOK`W{HP0!*n}-+ZF9uInKbLh*2~7Z^
CJ8f?O

literal 0
HcmV?d00001

diff --git a/images/ui/delete.png b/images/ui/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bc437298ab7bfbfbf128acdf5849e304b3c6903
GIT binary patch
literal 235
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA0wn)(8}b0DO`a}}Ar*{or)}gqq9DL3|6^j{
z=hBm&C)~N@b{5Sp4w$_m*}geiNBekToKL{TWpQP5xqRwZuPjq53pI^Z3A|FbUaRcY
z{O^J0fmhZ3y?R?;$@JP$iP2W!Cd>8DEZ3V|*s2`1aV~kzx#D@}&nn~61<yHG#mh(7
zE3I3f=I(nvzf0xdSALCyU(F^idwFn~>{Xzi+b(jKntiPo%%5fP`-@uPgu|~7wTA~r
iR9eY#70Eo`TEl2=&Qt5V_=GOd^$eb_elF{r5}E*W<X(IL

literal 0
HcmV?d00001

diff --git a/images/ui/info.png b/images/ui/info.png
new file mode 100644
index 0000000000000000000000000000000000000000..b706f0d06a9a1e5e2f6606c01e84094ee6a99b42
GIT binary patch
literal 640
zcmV-`0)PF9P)<h;3K|Lk000e1NJLTq001xm001xu1ONa4{R=S+0006<Nkl<ZcmeH|
z&q^Cn6vlsvlZde!NtjSu`vyf3BJn|lX3>o#<ONz1^8nhqwMf8rtJpv`Md(`;gR817
ziruJbp-S^-Gu<2x$joJC?$CnZ?=H`G&v$d~{W3goFG#aYi!Mj>88fEO5na|OlO{3G
z*yIPEVO{WsIjnKnVT>2DMzkql!ApMPMO=L<#3I9oI}LubOO+CNvScYxqQ)LKcQkDr
zB9h}Xp02N~GG)+JIYyNnkc)PDZO<QG;e@Cg3{VRkLV2(9W1bU*c}~$mg<h>nzu*#;
zB8R%~1(<R9rKfj^Ls5UlHF=Ee=<EZBqo)jFfuU5ljj7dGy@uEZ(A4NXA&^adn2wb}
zh7+l85I|c0b5_C10BTY{Cxwq?P3;u6Omiz;mhjP%(k@BZmo80wbfr`!33chx!N-x5
zN+h8yU3&QFODPZ5mkh2buJ9olAe+cwQnT>i4Rl0>e>Eb#WLtxfOV(#vvo;8MrfX8#
zOJwj-6b<u_yCG+7@Q7RUpwnDvmMsl*Kxd=~;H`emGFApzzDa$ZK;|?H4J(6|RENxB
zpe>RC^RW#U^^>`Uk%GqUlp=9>%y-#&$qZ(w=qV2=#%SNueJg~}R_Q4VL}5`+@9~aM
z91c`Iph*TZkfp^?^`Dp^0y)$Ij}vN48)8+LhbiruA|j3sO47|fb;`I*GKou>Ivq)^
z4u=V1QQ;ad;<{u73-W9;3T-}Qiy5qW$_D4g=4Y%kOJdS2(WFC<D@KgCqDO}YB~si2
a9{39-;{s}$p1&6W0000<MNUMnLSTYm?ipPG

literal 0
HcmV?d00001

diff --git a/images/ui/move.png b/images/ui/move.png
new file mode 100644
index 0000000000000000000000000000000000000000..c8698fbefdd9d063b6c1e2361ca65beb50e038e4
GIT binary patch
literal 223
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA0wn)(8}b0DWu7jMAr*{Ir|;xrR^U1M<IDHw
zx#{{Zl|Q*iOw8$2K3=I;^yrcOeo;|<jRtX%1I~&M77Ba_;Hc1Gu@Pa4+rgdm{UKKn
z_oaD%bsp4l{pn@sVysvE;V;Pa%6$Ukeu03%n$?`Art;nAUZGH@zkun-UIwoC1@aT?
zPyRDDwVyR#>rcw_<=G1#aHxLXx^7X{o*36Z&#vd)w{?9ZcuJlLNIAyzF#LC@VdT8v
W`+cpG+y|hG89ZJ6T-G@yGywpJT2+hy

literal 0
HcmV?d00001

diff --git a/images/ui/rocket.png b/images/ui/rocket.png
new file mode 100644
index 0000000000000000000000000000000000000000..00476140e64551ef205b954702a1f65bfc1cfe5a
GIT binary patch
literal 540
zcmV+%0^|LOP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00004XF*Lt006O%
z3;baP00009a7bBm000id000id0mpBsWB>pF8FWQhbW?9;ba!ELWdLwtX>N2bZe?^J
zG%heMGBNQWX_Wu~0hvieK~!i%&CUU?gfIw2(OHc9-=hClQwJ}M0=Bj$$5brvKI^(p
z?f)sS->jyQRKPpdkhiH&5!S%Bs4yAU;5VosS=R8LRDh?fCB3NSEm(_sP>U~w`sC$a
z)Y1#=EqJHe{>h6yaOoZP7raw#|K!EixX^<$3f`%<fAV5WTo&P-v;CKsTj8P}j$QT8
z3K#Wq?5l?sxTL3JXFX(a=vz)1<Oi{F7N?BzLt@h`R8AJQBARBwoP{cEMKsQWISXAt
z(=3>?(gifmfElIJ$FeM{c{G{Na{fT`XfoR`-vgRQtGVv%FEo!P1K!zR7%-9y=TROt
zWE6(;D32O60)u(&FASqogYo|<IX~)q2n>{WTj2Z%v*^JPPjGgGS@dF%EY6KEixCWy
z!I=?eF^YjAI4jC5W-yo+=R}#sEQa&oj3~31#c&>+5oH#$7|w$;qRe6z!+CH<lv&JR
zFfY!DGK(1u=D`^mW-)`|?yx`0EJiWh74|-57NZ!_!k$*lVidy?@3&+YGZ?zyogU0$
e)|<h1>*o*ZLAbFPoXQgb0000<MNUMnLSTY@{p)l9

literal 0
HcmV?d00001

diff --git a/images/ui/rotate.png b/images/ui/rotate.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa3099b27cc8670478e75c7572fa7f5e367258f8
GIT binary patch
literal 435
zcmV;k0ZjghP)<h;3K|Lk000e1NJLTq001xm001xu1ONa4{R=S+0004cNkl<ZcmeH{
zPfG$p7>A!UT+;L!h8HD020;*=GyDQc=x6D$P+Ed?)(j7x{3e1CUOM)N>JXOQL|7}f
z%P@ynmT6{=`@GlRJU<-YSt24L6iHK~$Cw#Qe)!~;YieY$LWw>L{D4`|V+$kJX!C_1
zGE4T*rpO&W;d6pEJG>)BJkX#_mIQG&IN*$XGkp=M=aC~~{AGn*v`Hc_hXF~f)0X-R
zuun;D&Hzxy#YKs}y!#~TxcK-g6&d-gs{ht2Rn+8S#x(Q_6+IDaXz3Ly#v)YK(koQV
zL?o-FSEyKuK*C5bE7XJGI3nwr|I}b|B0V+#vx2FJ{K$OWf@z5p9rFhhM4V^U*Y9fR
zp)StMNm=}8Nz%NEg09uiu4E`zw19oMl$YAXI%$SdKfytpePRKdQ|CqM-^ioQDLzk}
zbI2yEIOM3%5{oJHY@6xBXF}fOa=cKvM-vAl3UrwV%I9=#E#^AMTyet(-*`+J(V<ET
dB_bjsegVp*X^F&NCeZ)@002ovPDHLkV1kjI!I1y}

literal 0
HcmV?d00001

diff --git a/images/ui/upgrade.png b/images/ui/upgrade.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b2b92e7f63a0fbbf5b75748360441926a2718f4
GIT binary patch
literal 318
zcmV-E0m1%>P)<h;3K|Lk000e1NJLTq001xm001xu1ONa4{R=S+00036Nkl<ZcmeIw
zv8jSF97XZd+PZ+&zQP4W5M0LEQY@?-Af-5jorsNvh^`=r=mH9&o&PsL9)Sy9c*u9s
z-yaF#OKUM^#f2v?uB@5R=7aTl6WQ6)<6{l}B!W3LH*uiuCiebY%)m`_k?TvuM*sJ3
z1`^RiYD|d42&om35oKVB)P=~2;uD>adJ;KN{6}}BUPMk5=7SqjS0X10^T83RHIWge
z`Cx(6gvf}}d@w|+O^Bz1*j5D2G?D5NZes2xY8>1|oxT4SGdBTUHf{ob7_sEUof}6M
z4C!#z2)$-SR76GmN21{-cHku*;3cNuBocs+NB}+}0r-f7sRlb9O!=~Y0SLLhkIQG1
Q{r~^~07*qoM6N<$f}7ul0ssI2

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 4fa1630..0c69a3a 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
   <script src="js/libs/jquery.js"></script>
   <script src="js/libs/copyCSS.js"></script>
   <!-- Own scripts-->
-  <script src="js/resize.js"></script>
+  <script src="js/userinterface.js"></script>
   <script src="js/util.js"></script>
   <script src="js/baseclasses.js"></script>
   <script src="js/tiles.js"></script>
@@ -22,6 +22,8 @@
   </canvas>
   <canvas id="info">
   </canvas>
+  <div id="buildselect">
+  </div>
 </body>
 
 </html>
diff --git a/js/baseclasses.js b/js/baseclasses.js
index 40ad643..38ba8c4 100644
--- a/js/baseclasses.js
+++ b/js/baseclasses.js
@@ -4,7 +4,6 @@ class Tile {
     this.y = y
     this.direction = "right"
     this.input = new Inventory()
-    this.frames = 1
     this.name = "base"
     this.texture = {
       "0": [],
diff --git a/js/game.js b/js/game.js
index edc930a..b86c130 100644
--- a/js/game.js
+++ b/js/game.js
@@ -7,9 +7,12 @@ var timestep = 1000 / 48
 var delta = 0
 var lastFrameTimeMs = 0
 var ctx = {}
+var infoCtx = {}
 var currentFactory = 0
 var fulltime = 0
 
+var mode = "none"
+
 $(document).ready(function() {
   loadGameData()
   loadItems()
@@ -90,8 +93,8 @@ function render() {
   for (var i = 0; i < tilesToRender.length; i++) {
     var tile = tilesToRender[i]
     var img = new Image
-    var tmp = tile.getTexture(fulltime,0)
-    if (tmp!="0") {
+    var tmp = tile.getTexture(fulltime, 0)
+    if (tmp != "0") {
       img.src = tmp
       drawRotatedImage(img, tile.x * 48 + 24, tile.y * 48 + 24, directions[tile.direction].degree)
     }
@@ -108,18 +111,20 @@ function render() {
   for (var i = 0; i < tilesToRender.length; i++) {
     var tile = tilesToRender[i]
     var img = new Image
-    var tmp = tile.getTexture(fulltime,1)
-    if (tmp!="0") {
+    var tmp = tile.getTexture(fulltime, 1)
+    if (tmp != "0") {
       img.src = tmp
       drawRotatedImage(img, tile.x * 48 + 24, tile.y * 48 + 24, directions[tile.direction].degree)
     }
   }
   //DRAW CURSOR BOX
-  if(isCursorInScreen){
+  if (isCursorInScreen) {
     ctx.globalAlpha = 0.4
-    ctx.fillRect(cursorScreenX*48,cursorScreenY*48,48,48)
+    ctx.fillRect(cursorScreenX * 48, cursorScreenY * 48, 48, 48)
     ctx.globalAlpha = 1
   }
+  //DRAW INFO BAR
+  drawInfoBar()
 }
 
 function getItemFormId(id) {
@@ -141,4 +146,38 @@ function prepairRender() {
   canvas = $('#info')[0];
   canvas.width = 432
   canvas.height = 240
+  infoCtx = canvas.getContext('2d')
+  //tileClasses
+  for(var i=0;i<tileClasses.length;i++){
+    var tmp = new tileClasses[i]()
+    var src = ""
+    if(tmp.texture[1].length>0){
+      src = ' src="images/tiles/'+tmp.texture[1][0]+'.png"'
+    }
+    var style = ''
+    if(tmp.texture[0].length>0){
+      style = ' style="background-image: url(images/tiles/'+tmp.texture[0][0]+'.png)"'
+    }
+    var tag = '<img class="buildtile"'+src+style+'>'
+    console.log(tag)
+    $('#buildselect').append(tag)
+  }
+}
+
+var infoBarIcons = ["build.png", "move.png", "rotate.png", "delete.png", null, "upgrade.png", "info.png", null, "rocket.png"]
+
+function drawInfoBar() {
+  infoCtx.clearRect(0, 0, innerWidth, innerHeight)
+  for (var i = 0; i < infoBarIcons.length; i++) {
+    if (infoBarIcons[i] != null) {
+      var img = new Image;
+      img.src = "images/ui/" + infoBarIcons[i];
+      infoCtx.drawImage(img, i * 48, 0, 48, 48);
+    }
+  }
+}
+
+function buildselect() {
+  $('#buildselect').show()
+  mode = "build"
 }
diff --git a/js/tiles.js b/js/tiles.js
index 1697d45..2f1fc6f 100644
--- a/js/tiles.js
+++ b/js/tiles.js
@@ -1,3 +1,5 @@
+var tileClasses = []
+
 //Hier sind alle im Tiles welche im Spiel präsent sind
 
 class Conveyorbelt extends Tile {
@@ -10,3 +12,6 @@ class Conveyorbelt extends Tile {
     }
   }
 }
+for(var i=0;i<1000;i++){
+tileClasses.push(Conveyorbelt)
+}
diff --git a/js/resize.js b/js/userinterface.js
similarity index 89%
rename from js/resize.js
rename to js/userinterface.js
index 5a01afa..b351c29 100644
--- a/js/resize.js
+++ b/js/userinterface.js
@@ -5,6 +5,9 @@ $(window).resize(function() {
 $(document).ready(function() {
   style();
   document.addEventListener('mousemove', onDocumentMouseMove, false);
+  $('body').on("contextmenu",function(){
+    return false;
+  })
 })
 
 var screenleftpos = 0
@@ -23,6 +26,8 @@ function style() {
 
   $('#screen').css('margin-top', screenMarginTop)
   $('#screen').css('margin-left', screenMarginLeft)
+  $('#buildselect').css('margin-top', screenMarginTop)
+  $('#buildselect').css('margin-left', screenMarginLeft)
   $('#info').css('margin-top', itemCountMarginTop)
   $('#info').css('margin-left', infoMarginLeft)
   $('#itemcount').css('margin-top', itemCountMarginTop)