From eaa3bf6965e9bb1e93426008962bd70c98af35c2 Mon Sep 17 00:00:00 2001 From: "Eevee (Evelyn Woods)" Date: Wed, 17 Apr 2024 01:09:55 -0600 Subject: [PATCH] Spruce up the editor toolbar Ditch the textured backgrounds (hard to read), add some icons for the controls, and recolor the icons themselves to the new tentative palette. --- icons/editor-icons.aseprite | Bin 3502 -> 2921 bytes icons/tool-adjust.png | Bin 299 -> 440 bytes icons/tool-connect.png | Bin 276 -> 440 bytes icons/tool-fill.png | Bin 207 -> 407 bytes icons/tool-force-floors.png | Bin 226 -> 381 bytes icons/tool-pencil.png | Bin 184 -> 368 bytes icons/tool-select-box.png | Bin 147 -> 313 bytes icons/tool-tracks.png | Bin 185 -> 385 bytes icons/tool-wire.png | Bin 259 -> 419 bytes index.html | 21 +++++++++++++++++---- js/editor/editordefs.js | 17 ++++++++--------- js/editor/main.js | 36 +++++++++++++++++++++++++----------- js/editor/mouseops.js | 3 ++- style.css | 32 +++++++++++++++++++++++++++++--- 14 files changed, 81 insertions(+), 28 deletions(-) diff --git a/icons/editor-icons.aseprite b/icons/editor-icons.aseprite index 320cf97c8447a35104c0b7adae942da5feffb039..b783bbecebd0e728ebb1b5db155cb85a9ff7f36d 100644 GIT binary patch delta 2105 zcmZXUdpJ~iAHdHrV~oL?Fv^5Mq(bhOb&1y{m+U((Eo!wTR&FaLgc{6-Y)oUQAz3T8 z$o-PCnHh4KX_e8+C6`{yQ=+x0v|h{X_xQ{Eyyra6XU;j#Jm>sApWpeNdddP>E}V!U zuPQJI6?SQs+VzIoxu9H4 z2EGwz0Xx^+foY4nz<@qwpi({oh!4{iBXk5~uK_1VCNqJ1xd}jpk`y5JyKo>&%mvb3 zkD%8ZMuCLmJYZB=70^BQGSI-$7pSU(4vt8W0a_Yb0zK?efslY;U}nk>!29)RgPEym zpcpnGJRiX#7z6=}1egKH5A7j5REOly8)8H0g;FszhQLr4(n42=iWY^O^R3Vk zB0@pP2kjsnRD)#D3u2+AAQLo#K+2D+pzy6Qp_=m9Yx1XO?o;1BX(4%*-h!e9%k z;0cmo2zuZKVqgVI;M0Pa%)zkZu{+q6*c4wMc&Ttyu!2o2vGoH$U%bTPcfuwTVkFzm zdmxc0ZVT?r#GLb9FAK)Gl80##pPfEfof-bTyu6-vb@4`mo2}EFx}j$J62_ceilfk5 z+Iqf-ih7^!y@u|5eWu2k1oDN{M@%@}9!JF@1O&J3f%1q7Jg{x3iNvGII(gTfeBNQ< znbkc`zek&Mm=w8Ab$&a}v&;*)^T2m#GEwnKkdJ-nfzahZ8!w%Mf7$f1v}XO5OfyeL zyg8&a^l!{T73@XjH(u-*DT+xnlaE0husut|n$6VKS+z$xdMoqQ@)Hse(8kf=GONhd>)MobhRAJ@1l zE8pe&lY)m{ucVOD$2<6+C8DS<#xYLQuT6t#(pWfAka?2i@9QGu{Ht!(Os}WaQ%UP| zQ4oKMA1~U~w7jP%7vJOeT1;Atlbkap$1>Q@@DzH1h)>`-NIQGqB9VxkO`9hJMGDFi zg-^O|qUVh8yoE1eA)+cep5$p?~|9Fgk_XCy|WM$zWU{^4#$QRTfKY z=N*-O*(DyVJe2jYxLw#>LUKAY=$O~v&M2W7#b#4Aelfb|KO3>qXyI3oZ|rKR&D~QO zUtopnzN<^CRp^atOl`~loQ&%iP9!X17g=;aO1)l*;LoZkvxnITN#EO z#PZw$6Xo=PaUg`FKd1C1Ykfx8TAebC>$#QZK+trMscr0!K5iVpuWuJaa8}Dz+lW~8 z>m4_ZzCr!>tJ9dyiFlqn<8+nX&I57JP57?Dzn#sRcW>T$W!^6_Lew59sn4EqEOU)L z(RDd|UV-R3|1mhm+;h<-l$(3|Ue)Ztnt?&|M!kI%-pX7nDbwohl2Zu-jf~6$CBS#u5==Sk7vXehoefQxVnt4poi~m@+vu3rjrG+@?feqY6}cFp$`0Kt@#I2DgVD<#|+CCNZJqUYi>+N6UR& z0t*T*@~x^Xu9bzj2!FeFmvG1DVas^m_i3!8{RtVPsU2Ll!;!u*L0V-ZHRxjPjQmaV z<9zxBxrnNQv1@0Hs}d=_BYR)u4|2}hw7wW;Jo(K+V}!x^qk%uMHvdi6V@WpSP-rY$ zMvijy_ESe0_{=$rtiSp?E$_nf^_iLljz{{`7(V;*9%-zdY9&6#_K_ex!pkB*#8)?x qvs$d?t50&XAMnax?$I$WE5Go!I#>1S$F~V9pXf(AFrksA8UFyDBzzeF literal 3502 zcmb`IdpuO>AIFc&n92;2TduQ`%`3)bG{wehwOM|o8?AJ~m?=y%nPFL%Ns&^lP301z zV&hkvbx*mCiph>~8@F;YU= zaFQP>1VMb^_wU0FkrH2&jQ)M~|96Im`m^J!Bvn_zvTE>)#z{&pDsmAnti;*9zw-5> z5d;w-ej)_voE8CdhQ&NkJpsh$j{$XAZ9oOvV?YBV3eb6D2{6v;@hpDk z9I%-o1m1LP1g30`0T#Q^fL&hkz}cu`ps?TpP}JEg=8Fd4vF%{|X!xFaEI()h zbO7{&dk_!SK{@ya*g`ot3C!??C&T;{L&@UQp^ z5=5s{b;V~;_n)iFAxFqGk{|Wm%#TN95vm`Jto6y6GKdd7^mEfFepIT#C#PW$3Y|eB z<0w=*ox%LvO?mtJ2Q!28KDh!KA<=0x@bS6gA$|<<=N1lPc#{I&m;KnZ+*zLa5$9k{KTw@K4FIh<9)h{au=mi=q){@kE??B&>_Vz3aS4 z+z82mLvToF#w%VSHfr0FZ(DyADq-p@siZ4Uyw|Y4Y1whP;{NYzo88>j7oXL6D$svy z-JPYcEevs)_B*R#7hOcwX9#2$I|W)ox3XrU8-fOl_b2FVMD$;rtP-Zfj^I2bm1_@Ye1y%ALYj~Z%< z?sN)8uKwQ0iDz?d%3Dh^IbmKJ_rAQ3_j!}>aGk%ptxa}`(@*<2ewlkCbB0{LXBoIF z7TGEpmd@i!x$q^DMB3o#BdLsno-JEcSp~sJDrakd=jga_?YQ}o;_AM`Tb^RzQ@4zV)O?D#$?v^gk*n zODaSmMn?G}%r0r%;tHo+73u}mrY3_1B&txq>&EuiTbi`iDb{#&H!3rJmzpe+?aR!O z_D>GxQ0lsol?L_>sgf#aFetaEiUOhnRjS%yPvDeL+lIZ&OoElymIr>}8Ddt#NsEY1 zIf_&Jd0u*~Mp}k9E~rXWCQ&akb;e4%FX7jllwBhYpILY^G-vKyKrlg0(1l6ID2yxJ@lyIas7~c73LKW@&3D?OC6XdpgOzG4h2+ z08LPR@IYzBh491xK|iUC(L6B0sdzIabor&4Q`OZmlW;^dInepT`3FB3p}*XF)=ozS z9xN12yc0ih#~p>(Iy(%ig&T-fM#;BWNWZK#TN1ZCRfg!bVi_@8u3~y{psU=}O4V2 zPu^DxyB%VfDH}w?&%cTf4jesX!xx0acJ)@ci8iE!@94@9se6vhy{wA*eegL4pYEo^ z=P|ri99wzy&2Z1I9-bgAj}U3;nRzDdg>(PfJw@cG_~JD5|#$Xh)e4FkEPyA%Z@3hD0jmIb7 zFe2qx(#OV^XIZ$O4^MP$K05X$E;K0ls;$kG&GU9o`%2qz|5L-S$29BqKIpWZz$a7& zu2)sw5qClo3ImZAzb4d>h)EziUfIzF4x&NkYUC(R@zdg?vbI5u|UVPE=0Rz?6NI8a>X*jp((efB74%og?ZAS zCDY31(K*5^1~r4y$mGtJk#}DqSh$77H=!bVSDi~rnl(k;6BYDHk@7dypBxMkG^uz8 zG4si~n4SK*w?+Bn{zKCVu>*&uu?v4{jW9IS^^jtxt>iXIG6hH`z32s~hG;^vK0X^; zi(7(f;SJ&x260=T@X8EU&zLVc^>&A{Yp&_8>@Kpy(Ymu`+6xJ$z31Bk)BDa52c+)Y zDI0p#ovdDHRB-;WMHOC9()m+*se8vMmgrDxq}S%z)fLk$UsFnz-oB=n_M!d)?WUam zKhm0>Kc5nI?91GqPoFow?P~cn)L4DW$NkA6r<8&a&E;(LlUZ-^AqBU(B~6PT6w zhnMyrBIs8n`^}7my(o!znci?mYFwD@n=47A^w9=XdH*ZDOxYys^U&S_7 Ss;8(~X{3AL5XAlxoBBU2@gHUY diff --git a/icons/tool-adjust.png b/icons/tool-adjust.png index 55e355141e89f602062274502ebcd8c6f4d6e13c..df3bdacc6389d6567382c163d255f8269a71bee1 100644 GIT binary patch delta 426 zcmV;b0agC10=NT^7=H)@0000)q>9D>0004VQb$4nuFf3k0001}P)t-s{{U&l`TvpY z|4_*FF0Jn&f#VW2j}sbgGAg%nKIO7=|LMd3>7f7OYxl}Y$DS;ZuO(6KS&;gGv;MEi z|JL09<+T2!Zunnk<(YHRabChuNU1zLjxaoLA~;PGDmV)*?0+&q|9wFJv_t>hMgR7D z=>Lej`ALE6CRoN56qE@EXCnbVA57ebC%<ZPn2QLOaeGgz zs-zjzvhChSStUJNEZavGB}plObw^N=Qkj{r?00~vCnFa}SAgKPbGQ4tZS7C#4-ZN- U+!e%FcmMzZ07*qoM6N<$g6FBj`v3p{ delta 284 zcmV+%0ptF-1FHg%7=Hu<0001iRAB#FboCI z?;GSpLuU{dK$h4+=>Z}&2S7+Lcfr^1(3*DZ)NFpTE!zS9_kTzRNH}9r)gfHpAS9{d zIP4Ckl&rdL4!ER}*^D2MbjuKK=1`@Sfo3;)Nq@-@Gpk-H(#^~ek|*?m08n)f?Yq|x zpv(>}$$-fI1TzbW(>(d^b}T?lsrAuqV?ey8bC+XV7sisN4~(j@l;Q_D>Q$8_9UfAv i>eodBgybLp@D&LR1|cUq{&C0v00009D>0004VQb$4nuFf3k0002MP)t-s{{U&l`TvpY z|4_*FF0Jn&f#VW2j}sbgGAg%nKIO7=|LMd3>7f7OYxl}Y$DS;ZuO(6KS&;gGv;MEi z|JL09<+T2!Zunnk<(YHRabChuNU1zLjxaoLA~;PGDmV)*?0+&q|9wFJv_t>hMgR7D z=>Lej`ALE6CRoN56qE@EXCnbVA57ebC%<U}oXkrgMU^mK6y(Kw%+us~Em z#O0}R+8QATK>_d687_eVv!;plt!de)qH{GiK%iFfh{fHbOM@C31sA#$Jv-Csz~#y5 zvX^02vcyGM^@j6ndoujkrH`LD(UByxc*~Y83Y!|XR8&@OWtb%P(Mi$yqm#;XQ7#Ti zqb_C3Z3T-bEPPO=vb{q*@79jJ0yi}soVi&8WYskeIG8gqT!|4q^Sn>n2k1HmPgg&e IbxsLQ0NKD|vH$=8 diff --git a/icons/tool-fill.png b/icons/tool-fill.png index 5ab1f3a5ff695fae089e84b89f5641cc132776d2..c33328c654bfcfc1a15c48c5b8eb61c385b28c59 100644 GIT binary patch delta 393 zcmV;40e1e+0ha@i7=H)@0000)q>9D>0004VQb$4nuFf3k0002MP)t-s{{U&l`TvpY z|4_*FF0Jn&f#VW2j}sbgGAg%nKIO7=|LMd3>7f7OYxl}Y$DS;ZuO(6KS&;gGv;MEi z|JL09<+T2!Zunnk<(YHRabChuNU1zLjxaoLA~;PGDmV)*?0+&q|9wFJv_t>hMgR7D z=>Lej`ALE6CRoN56qE@EXCnbVA57ebC%<(U4eim_YMoe!20000U}oXkrgM<~E2#1%+ONl85ni~rIR{%v)_ zw;OdkR%%WGDJ==|3ubV5b|VeQiSu-E4AD5h_u@g`1_hDk#CvQU!Vzi>_j!ASSNvZ8 zXzKIE7H-=*PkvwL2+3~y6QyE2k5p1tIBz)g*vf+Q-sY+u@A!NQ?&w-Eu(Jm6H(hh| on6#yxF=A4g`LS)f>uTOG`$qHLW)R*G4z!BF)78&qol`;+0NpJ`e*gdg diff --git a/icons/tool-force-floors.png b/icons/tool-force-floors.png index 50860608284e70260233ddd9f9566a24a57ff19b..e4ebe698925c0b6d7e37f431d4045c5c144f8893 100644 GIT binary patch delta 366 zcmV-!0g?XV0sR7y7=H)@0000)q>9D>0004VQb$4nuFf3k0001}P)t-s{{U&l`TvpY z|4_*FF0Jn&f#VW2j}sbgGAg%nKIO7=|LMd3>7f7OYxl}Y$DS;ZuO(6KS&;gGv;MEi z|JL09<+T2!Zunnk<(YHRabChuNU1zLjxaoLA~;PGDmV)*?0+&q|9wFJv_t>hMgR7D z=>Lej`ALE6CRoN56qE@EXCnbVA57ebC%<iW{ejlN$Om-iU=i%DS#3i07;?&kZ8aF;06r10ok^4%>qck*7wxb zN;HYRm3R_+D+}0LS*|#=lIfABR;C}`ZKVL&YT)s9jF5HydxifkA67XoSLPj4ZvX%Q M07*qoM6N<$f{8t)%>V!Z delta 210 zcmey%^oVhSL_G^L0|P^2NcwRg#aJBV?!>U}oXkrghd;n4#1%+ONlB@-$hSQ+{{R2~ z`=##NLF!6^{DK)Ap4~_Ta!Nd1978nDZ=GRyw9HrP;1LSbdlR)nY1y#{8%`ZKE2-msPvXGOb!$8r8XA{gndX&iRpN4X z;j>`(p!Gg;8JC@t*jZ8(U-i<%zH0elhlL;SMmueL`|$exrz}U-3N!yL(((p6fWgz% K&t;ucLK6TM>Q&MJ diff --git a/icons/tool-pencil.png b/icons/tool-pencil.png index d8f512e61967201ddb7d3fd0f7320342f56f43e8..a617abf285944281fefb6dbc92832fdb471399b2 100644 GIT binary patch delta 353 zcmV-n0iOQ20q_El7=H)@0000)q>9D>0004VQb$4nuFf3k0002JP)t-s{{U&l`TvpY z|4_*FF0Jn&f#VW2j}sbgGAg%nKIO7=|LMd3>7f7OYxl}Y$DS;ZuO(6KS&;gGv;MEi z|JL09<+T2!Zunnk<(YHRabChuNU1zLjxaoLA~;PGDmV)*?0+&q|9wFJv_t>hMgR7D z=>Lej`ALE6CRoN56qE@EXCnbVA57ebC%<4ZuJM16o-D(on+^rXc%|l?`m^n<$Fgv#vU`Zw>(G9s$m;aGW2o5nNFBIulfP zEfsWE;h6tIkV=r5@{qKY;oLAIS`^$w%Wv)hRh<>+saSM600000NkvXXu0mjfhUK7K delta 168 zcmeysw1aViL_G^L0|P^2NcwRg#aJBV?!>U}oXkrgM<~E2#1%+ONlBTRncdqo=V4g< zmzHp~(?=JAl$Hef1v5B2yO9RuxO=)dhG?8mPFSERAmZ@USW0>kSBHe=Vl6>VGdID6 z65i631KJ8gQc4Zs2@@m|yYgB#YVKlKbzM?os^Ueb?m$jk8`ezedLD*a4?gveZ$lpg P&1CR&^>bP0l+XkK#r`yK diff --git a/icons/tool-select-box.png b/icons/tool-select-box.png index 0d3863243c4cb21c825cca4de091fb785000515d..b8bb19221269183ff19c49f9935bd8bafde91ff8 100644 GIT binary patch delta 298 zcmV+_0oDGK0l5N@7=H)@0000)q>9D>0004VQb$4nuFf3k0001}P)t-s{{U&l`TvpY z|4_*FF0Jn&f#VW2j}sbgGAg%nKIO7=|LMd3>7f7OYxl}Y$DS;ZuO(6KS&;gGv;MEi z|JL09<+T2!Zunnk<(YHRabChuNU1zLjxaoLA~;PGDmV)*?0+&q|9wFJv_t>hMgR7D z=>Lej`ALE6CRoN56qE@EXCnbVA57ebC%<*w02qP#Mb;DqC17?yTO~DWc09OYT3Gvo0bN~PV07*qoM6N<$f>>sPk^lez delta 130 zcmdnVG?{UNL^TsL0|Nt}$fR^2#aJBV?!>U}oXkrghbO=%#1%+ONlCpcZ~lMnPK<0@ zCP-09kY6x^!?PP{K#qo|i(`mHcyfXQ|Aso&CjJvV|3V!E8qOrJ8rmrszgVRv$H6o~ c@(BaOhhI*apGC8pfO;4_UHx3vIVCg!06n2600000 diff --git a/icons/tool-tracks.png b/icons/tool-tracks.png index fa1be88fa13cb232ca690e1ae123821201effd3c..668cb8cec2d156e852e09015309accb484dcbfd1 100644 GIT binary patch delta 370 zcmV-&0ge8-0f7UM7=H)@0000)q>9D>0004VQb$4nuFf3k0002GP)t-s{{U&l`TvpY z|4_*FF0Jn&f#VW2j}sbgGAg%nKIO7=|LMd3>7f7OYxl}Y$DS;ZuO(6KS&;gGv;MEi z|JL09<+T2!Zunnk<(YHRabChuNU1zLjxaoLA~;PGDmV)*?0+&q|9wFJv_t>hMgR7D z=>Lej`ALE6CRoN56qE@EXCnbVA57ebC%<}FA|vqtW|Ip7rOSF zz_x_4zy*?kVv;HVi1rHtxOqJllgV!c<}BFYlBjWbT(ak>cz8|Q5}5cS4)1|AsJcNh QApigX07*qoM6N<$f)%HxRR910 delta 169 zcmZo<-pM#YqMn7Bfq|hhB>gy$Vk{1FcVbv~PUa<$!yn)i;tHfg)GP~i9eR3tHgDU0 zu{1y$q^=~$FPOpM*^M+H$J^7zF+^ixa>4@p0EfrMRtt(mV|W(uaHJF(iZO6+*x}Hy z*--fiPg*jEfk*?F0hhxW8q^$Gl)NP`#BhC9y|R?28E7>BO+oY2z{Tf) P<}!G?`njxgN@xNAWcD)z diff --git a/icons/tool-wire.png b/icons/tool-wire.png index d4361c96e75cbf5c2d35a21e9bc639a5a88cb870..b79d7d50cb84d20da1e23fab59ea7d3880d6c9c9 100644 GIT binary patch delta 405 zcmV;G0c!q(0;29D>0004VQb$4nuFf3k0002GP)t-s{{U&l`TvpY z|4_*FF0Jn&f#VW2j}sbgGAg%nKIO7=|LMd3>7f7OYxl}Y$DS;ZuO(6KS&;gGv;MEi z|JL09<+T2!Zunnk<(YHRabChuNU1zLjxaoLA~;PGDmV)*?0+&q|9wFJv_t>hMgR7D z=>Lej`ALE6CRoN56qE@EXCnbVA57ebC%<sGc4QsYu9zPcEJKq&3rhU&XT!PBZ7Q8=Q0EICD4{!S|MCm{-2WSiKqM tmSz~RsxjH)R-) + + + + + + +
@@ -203,8 +216,8 @@
- - + +
    @@ -214,8 +227,8 @@

    Create

    - - + +
    diff --git a/js/editor/editordefs.js b/js/editor/editordefs.js index b78c6b4..cd6ac1e 100644 --- a/js/editor/editordefs.js +++ b/js/editor/editordefs.js @@ -7,7 +7,7 @@ export const TOOLS = { pencil: { icon: 'icons/tool-pencil.png', name: "Pencil", - desc: "Place, erase, and select tiles.\nLeft click: draw\nCtrl: erase\nShift: replace all layers\nRight click: pick foreground tile\nCtrl-right click: pick background tile", + desc: "Place, erase, and select tiles.\n\n[mouse1] Draw\n[ctrl] [mouse1] Erase\n[shift] [mouse1] Draw, replacing everything\n\n[mouse2] Pick foreground tile\n[ctrl] [mouse2] Pick background tile", uses_palette: true, op1: mouseops.PencilOperation, op2: mouseops.EyedropOperation, @@ -32,7 +32,7 @@ export const TOOLS = { fill: { icon: 'icons/tool-fill.png', name: "Fill", - desc: "Flood-fill an area with tiles", + desc: "Flood-fill an area with tiles.", uses_palette: true, op1: mouseops.FillOperation, op2: mouseops.EyedropOperation, @@ -41,7 +41,7 @@ export const TOOLS = { select_box: { icon: 'icons/tool-select-box.png', name: "Box select", - desc: "Select and manipulate rectangles.", + desc: "Select and manipulate rectangles.\n\n[mouse1] Select rectangle\n[shift] [mouse1] Add to selection\n\n[mouse1] Move selection\n[ctrl] [mouse1] Clone selection", affects_selection: true, op1: mouseops.SelectOperation, shortcut: 'm', @@ -55,14 +55,14 @@ export const TOOLS = { tracks: { icon: 'icons/tool-tracks.png', name: "Tracks", - desc: "Draw tracks following the cursor.\nLeft click: Lay tracks\nCtrl-click: Erase tracks\nRight click: Toggle track switch", + desc: "Draw tracks following the cursor.\n\n[mouse1] Lay tracks\n[ctrl] [mouse1] Erase tracks\n[mouse2] Toggle track switch", op1: mouseops.TrackOperation, op2: mouseops.TrackOperation, }, adjust: { icon: 'icons/tool-adjust.png', name: "Adjust", - desc: "Edit existing tiles.\nLeft click: rotate actor or toggle terrain\nRight click: rotate or toggle in reverse\nShift: always target terrain\nCtrl-click: edit properties of complex tiles\n(wires, railroads, hints, etc.)", + desc: "Edit existing tiles.\n\n[mouse1] Rotate actor / toggle terrain\n[mouse2] Rotate/toggle in the other direction\n[shift] Affect terrain\n\n[ctrl] [mouse1] Edit properties of complex tiles\n(wires, railroads, hints, etc.)", op1: mouseops.AdjustOperation, op2: mouseops.AdjustOperation, shortcut: 'a', @@ -78,7 +78,7 @@ export const TOOLS = { // shift-drag: create a new connection (arbitrary cells) // right drag: move a connection endpoint // ctrl-right drag: move the other endpoint (if a cell is both source and dest) - desc: "Set up CC1-style clone and trap connections.\n(WIP)\nNOTE: Not supported in CC2!\nRight click: auto link using Lynx rules", + desc: "Set up CC1-style clone and trap connections.\n(WIP)\nNOTE: Not supported in the real CC2!\n\n[mouse2] Auto link using Lynx/CC2 rules", //desc: "Set up CC1-style clone and trap connections.\nNOTE: Not supported in CC2!\nLeft drag: link button with valid target\nCtrl-click: erase link\nRight click: auto link using Lynx rules", op1: mouseops.ConnectOperation, op2: mouseops.ConnectOperation, @@ -86,15 +86,14 @@ export const TOOLS = { wire: { icon: 'icons/tool-wire.png', name: "Wire", - desc: "Edit CC2 wiring.\nLeft click: draw wires\nCtrl-click: erase wires\nRight click: toggle tunnels (floor only)", + desc: "Edit CC2 wiring.\n\n[mouse1] Draw wire\n[ctrl] [mouse1] Erase wire\n\n[mouse2] Toggle tunnels (floor only)", op1: mouseops.WireOperation, op2: mouseops.WireOperation, }, camera: { icon: 'icons/tool-camera.png', name: "Camera", - desc: "Draw and edit custom camera regions", - help: "Draw and edit camera regions.\n(LL only. When the player is within a camera region,\nthe camera stays locked inside it.)\nLeft click: create or edit a region\nRight click: erase a region", + desc: "Draw and edit camera regions.\n(LL only. When the player is within a camera region,\nthe camera stays locked inside it.)\n\n[mouse1] Create or edit a region\n[mouse2] Delete a region", op1: mouseops.CameraOperation, op2: mouseops.CameraEraseOperation, }, diff --git a/js/editor/main.js b/js/editor/main.js index 35444c6..5a47e6a 100644 --- a/js/editor/main.js +++ b/js/editor/main.js @@ -134,8 +134,7 @@ export class Editor extends PrimaryView { this.statusbar_cursor = mk('div.-mouse', "—"); statusbar.append( mk('div.-zoom', - mk_svg('svg.svg-icon', {viewBox: '0 0 16 16'}, - mk_svg('use', {href: `#svg-icon-zoom`})), + this.svg_icon('svg-icon-zoom'), this.statusbar_zoom_input, this.statusbar_zoom, ), @@ -400,6 +399,7 @@ export class Editor extends PrimaryView { } header_text += ` (${shortcut})`; } + let tooltip = mk('div.-help.editor-big-tooltip', mk('h3', header_text)); let button = mk( 'button', { type: 'button', @@ -409,8 +409,23 @@ export class Editor extends PrimaryView { src: tooldef.icon, alt: tooldef.name, }), - mk('div.-help.editor-big-tooltip', mk('h3', header_text), tooldef.desc), + tooltip, ); + + // Replace the [key] elements in the tooltip + for (let [_, literal, key] of tooldef.desc.matchAll(/(.*?)(?:\[(.+?)\]|$)/gs)) { + tooltip.append(literal); + if (key === 'mouse1') { + tooltip.append(this.svg_icon('svg-icon-mouse1')); + } + else if (key === 'mouse2') { + tooltip.append(this.svg_icon('svg-icon-mouse2')); + } + else if (key) { + tooltip.append(mk('kbd', key)); + } + } + this.tool_button_els[toolname] = button; toolbox.append(button); } @@ -462,10 +477,7 @@ export class Editor extends PrimaryView { let edit_menu_button = _make_button("Edit ", ev => { this.edit_menu.open(ev.currentTarget); }); - edit_menu_button.append( - mk_svg('svg.svg-icon', {viewBox: '0 0 16 16'}, - mk_svg('use', {href: `#svg-icon-menu-chevron`})), - ); + edit_menu_button.append(this.svg_icon('svg-icon-menu-chevron')); _make_button("Pack properties...", () => { new dialogs.EditorPackMetaOverlay(this.conductor, this.conductor.stored_game).open(); }); @@ -563,10 +575,7 @@ export class Editor extends PrimaryView { let export_menu_button = _make_button("Export ", ev => { this.export_menu.open(ev.currentTarget); }); - export_menu_button.append( - mk_svg('svg.svg-icon', {viewBox: '0 0 16 16'}, - mk_svg('use', {href: `#svg-icon-menu-chevron`})), - ); + export_menu_button.append(this.svg_icon('svg-icon-menu-chevron')); //_make_button("Toggle green objects"); // Tile palette @@ -1854,6 +1863,11 @@ export class Editor extends PrimaryView { // ------------------------------------------------------------------------------------------------ // Misc UI stuff + svg_icon(id) { + return mk_svg('svg.svg-icon', {viewBox: '0 0 16 16'}, + mk_svg('use', {href: `#${id}`})); + } + open_tile_prop_overlay(tile, cell, rect) { this.cancel_mouse_drag(); // FIXME keep these around, don't recreate them constantly diff --git a/js/editor/mouseops.js b/js/editor/mouseops.js index 27d93f8..09099b0 100644 --- a/js/editor/mouseops.js +++ b/js/editor/mouseops.js @@ -524,7 +524,8 @@ export class FillOperation extends MouseOperation { // TODO also, delete -// TODO also, better marching ants, hard to see on gravel +// FIXME i broke transforms +// FIXME need to subtract from selection too export class SelectOperation extends MouseOperation { handle_press() { if (this.shift) { diff --git a/style.css b/style.css index 9546f5a..fa21a82 100644 --- a/style.css +++ b/style.css @@ -2317,6 +2317,28 @@ svg.level-editor-overlay text.overlay-edit-tip { border-bottom: 1px solid currentColor; color: white; } +.editor-big-tooltip kbd { + font-size: 0.75em; + display: inline-block; + margin-right: 0.25rem; + padding: 1px 2px; + border: 1px solid #d8d8d8; + border-bottom-width: 2px; + border-radius: 2px; + line-height: 1; + vertical-align: 0.25em; + background: #d8d8d8; + box-shadow: 0 2px #999; + color: hsl(var(--main-hue), 10%, 20%); + letter-spacing: -1px; + text-transform: lowercase; +} +.editor-big-tooltip svg { + width: 1.5em; + height: 1.5em; + margin: 0 -0.25em; /* these are mouse buttons; shave off some of the extra space */ + vertical-align: -0.375em; +} #editor .controls { /* TODO with the hint area gone i don't think this needs to be a grid? could just flex */ grid-area: controls; @@ -2359,6 +2381,10 @@ svg.level-editor-overlay text.overlay-edit-tip { .icon-button-set { display: flex; flex-wrap: wrap; + padding: 2px; + border-radius: 4px; + background: hsl(var(--selected-hue), 10%, 10%); + border: 1px solid hsl(var(--selected-hue), 10%, 20%); } .icon-button-set button { width: auto; @@ -2366,13 +2392,13 @@ svg.level-editor-overlay text.overlay-edit-tip { padding: 0; margin: 0; line-height: 1; - background: url(icons/tool-bg-unselected.png) no-repeat; + background: none; border: none; - border-radius: 0; + border-radius: 2px; box-shadow: none; } .icon-button-set button.-selected { - background-image: url(icons/tool-bg-selected.png); + background: hsl(var(--selected-hue), 90%, 70%); } .icon-button-set button img { display: block;