Skip to content

Instantly share code, notes, and snippets.

@park-brian

park-brian/index.html

Last active August 11, 2021 19:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save park-brian/39ddc658b556a237d7b66a4cf6c092e2 to your computer and use it in GitHub Desktop.
Save park-brian/39ddc658b556a237d7b66a4cf6c092e2 to your computer and use it in GitHub Desktop.
Download ZIP
RWS Editor Test Latest
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input id="height" placeholder="Height">
<input id="width" placeholder="Width">
<button id="load">Load</button>
<button id="save">Save</button>
<textarea id="input" style="width: 100%" rows="20">7d09juQ2FgBgYIMJ9hpOHUy68Al8BV9hw4mcTeRNfIYBjD2DTzOAj+BwQ2MhEA/8ef8/FKvGWsKz3dXVEvk+PoqiVOovH3/8q5ff
fvGVLx+p8uGXsczft3f88edV/vXvVr58hK96sdbnehf+bWuZ98K3obrQcRtjIxW7VX/fqJwR18ypCI4tu7Qv7/YvJbJXHO/hPcyb
uk18Ncf6leZSu6jiV8+KU9u/x/zDtJ8xBtd/NeK8+dVu33hhMfd68+57xakW36XO5f1VM83c6jO28HIGee8xQjfPFk2llZw3P4qs
49X97rq5R330H4t3S5w57rUZdalG2Rw/aU5vf0eerzFb1WvyvMa8tVyaZ+wZ19c21WvTM9setVa7qiznzeejfda8Qry1njJvtc2f
o9lbtSPDuW3r5hXi44i/x5zu43zr+2u4fvPYlMnzE+aa+F7zHsExfyrMLe2S39fO10Gd66v1Z2m71D3x2Tu24zieNB9/frV5znTo
nescZJ955VHdHp/Wcs08PoerMdfV9QjMP+8qYE6XSy1nbs90ybLOHFq93zyz8mpx5yPAxWiU6efqXbom0/UWyzXVxzObOfxub6l8
fl45snPb+vT50+eM+RiRNT50rGabdW3urrGdz3Rra/l39nEMvwrlLnO8vUu8Rp3uA1qeU9dfqvJcj41dUerhnLnURsk8Kw7m17ao
9VereXQVVhOXc719tT/PPTkO77d6c+r7sxz20rcJ2lbzKnWb1/6j+Wrua5M9x7l+3Y3rZ29tu2s0e/n0uX+1Q90v3uoZ926/v6sP
a+a8+moOca/K8m56bYuL5vguz972m2fF38mcutbtt++9B5vj6MA+PXuIid9nHm8Dnm/3ltjMreqgTAl4zecjhCTe+9y1R+tx3aqu
z9l3aNujxWnF89/uPdZ1PKea73qx6q+zAtv+r3dS8zlrL3gNc//aEy0m9ePKDB9917VnyHzbPYPeLF/N1xKLHrdqtVfc403VXBav
yfJ1pQTPqz1zunUeaDdv8/aMutV8n3r2GqQlz+ViO9tYRyNsNs/kpXbRv2uNFy9uP8q/rzm1GiD74n5uWT2k1kM1c7ne1G9Ze967
m2fPbfktc+JYfe4/aw+g178lcUuex8xB/MvHOnVefI96ds1SHpWxNdXqdYtz3o/fz+/kxeXVOepI7jOHVkXEoc2WLN9h3mLiOdP0
iPc9+LcL5tTMHN5jMcdjgzQ+eM1pd13cPoerVq+4KrFnL3hGPmY97Fk3X9drtH5iM1/FLCO8PMe5w7ziuqPVPHL2v87n5nXvvmeP
upzhdnPKjD+yU3NWn3iFevYI7jf39zRuDr/O8C3m6/p83FyWa/ZjH9DfbzXPqkuR960i+z8/Yc14zRy+t5nbS9Yc61eZZ9TlmO82
t8lLZ+rrefxd5h5vbzlp7j/D3HN3hr42M77y/uZw7XGPOxfn2LpC/tOQ1BUw23rcveb0zK3S3Jr1VebR1aQKc3zWrY/s+zKdj9le
cz77K8x1a7t7xaeeu6T1aE69I69MmY/1OmFO60fFde1XNO/rMTXmnlq9jrnn7pL+iVOruKYuH3m95uMKq9Rn+XdUOM/7Gstjrh97
feaecV3ea1y8fyqAmvWczfTx8yCeyNaKW+LvF/fN2bXi8b4K/7nU+UrYHQX3NDC3uM/tqDOvGd/xdZT5p+s7c3vTzLlyf17L+9Vj
Ota+0txnQL1X0oZX52fonDG/X13bq68dlVlujeYPP11qP/y0Xi+TxVvhzaUR4t3N5aMJ3wb7uttu81Goy/ezL6re613slK18ZNht
zj0pYn9/8Irb3HXxyHW1lu/06ltX6z/D74Gfr23cba7foVxt7s1z2VtX3yFOfdKTVudqT/3+eA6n773OnFoZjdnC6tr6ejuuta9s
5ha17tut94zrcERvY/s1uvdMXrdHny1xPWDtD2Pfal/jXiSv+ljMuWsgXut+3k2p2/PcFjHe31IiI+klDdr8uG6/n4bqG+v9b/z1
2vksUN+znuWRTF/X0b3mML/1e3tLxBvM5/vVqRmY3TzbCqoeNvM2f4P8rDH3/i7ov6Z4z3OpcObc3fFV9uB/PRHbbk4dU/3qc57j
7etbmPtpf73SOzY/vvK7qcvbpTKtsv4W+f6dJE7Po3zq+Bqp3VzvD7XmsbH9+lff8knzNc97bSgtucU+8Xklnf7a3pdq/f3i1ywd
jubRzzyfNG9Hez3D6Zy3Pb15fh9IW/vOa5mDditX9K7/j5pXjlc28z76+MV95tK2z4p7z9GaNDhf//avbNq91jX1183XTMdR94xy
3ix/VXOfOqzCdGdPpu9og9a61TzqHTGn9nOvOV4l9ZrDKlhkTO/mq/5e83VdJy7Oe1lWcnzq0tbi5tHzNMj4mPrqv1O99dFVPWfO
qYGP9mxMn3fWfDxnzmiDeduqd2Sn1XeZt1GJPjOPtNoi5iuUbJV5hXP3hmO6L9dxfffmOpiPUcibr/LYReohvC8tTrlbxWu0V/Wc
SXzM8pjDNdV1b5n2z2pYljOnFPeY77nrLLsuTo919FNpMub0fnLq/DblPKcV51fz4vk+vUtdjluF+j5zWd3WM2h1Lct9kTyv3mtt
iUONuRTnXNstcbarS/ZabO4U95mPtbVFYKf5Fcts6+VIe7196los93h7zcd5+13mO8WbK31XYPsZXtuPulMxad9x23gdc5z30Mod
5lJca6OA1zbnNcCsOyVObbe/+1XMeZHMeaiU51D2ZgFvbu2BFebj+/eJ183cPbNUnzm14lkfhX5lflbnW671AvlsTfuN1xeX/pZf
bg/0EX1HJMbPbOjmdBR4Q8+4sM87bg6xuMOcjs5Oc594zFz+DM5ec+2TIpw4vlvFeiaKI+aP557ejz+NYc0Ii7mc63dpt5ZmzKma
Uy3y70OK5q44rJ/pyNfVat5+9vrm12/z/XafOdeSMa6ROKwlX1v/kfwO70jL9Ba0re8x18QhwlHz+bt4be2ztzuP4/NaQ715l69a
AbCZR9Wxf6a2fvPd3iBuz8U17vxdQvN+mnlc3Rod+riZU99vftcRvLdprYG1PViVz8P2WoX5Oh+ao0XPlnIxitfWnuX3ePP7t8ef
256854g5lqbUqZ/lo+pV94/sp8UrMv1uc6m8vvk94jlzuP9wjstrmF/bp9Tj3tkzdE58/OTbeXHafb6mzNXW0pZ95pR4NtN3nse+
lvjo3r6Gs1bZ3BZFf+5YxeljemwuF1+T0dTvFvfd6UMfvfM132H++/e8uj/amTPLVzP3iHN1zdfbG9Hu+vv3tPdVdHN71HeZ3+1d
9ZfQ4btMG/Lm/eum3dzpPsF/WkEy3zGy32/Otd9nPurHzbWY9nnkj3+N2dylcYFWcqszXoFq9d9uW2+bxeUo3NVDpdXsca9t5mgT
B3Pc1jbH87Yrv/YK0r1EP4k0zlOj4plnn95p3vZGC3PFOrrD9qW/M5M3n0etjPjYf/Vy7bvKHMcl1g64a/xOc9tnVvATjWvMr/9i
0aJGLV28ytz6nHe99LsMo+a//vzrz/T47snztWX5uyZo8/Z1JFJ0H56FKXFw51q8Pq3Dlun9jkHPfA7eOcZ1jK7HfFWX4mTp0dl7
ZNb6U62pEOf7wLw/SRzkbOdzs7j3OW3w/Fv+npR1f5L5qA5RqlCPio/1p9qyy5xuo/wJuXGEtkYG2ug3n9fvtT5kzXPtLF3vAVlt
us9m3HeYd7d5X631kjrXTv/41TOdjppl5nZtQ5vH6eoV5rq3J0Zec3086zlOm/PtWFuKr7BaCjU7wHtcDWlzfe6uR2e3uTc+ldZr
jtN/b8tnnrve1kcWvD/cuugZmxyn1o595vNTgqvNLeJ2c/m3u3lEfc10nHncdbU+S680zxdb7C3e9eajOJ5T8bNoqp3we7GncI7q
2BzW2+lcz4njWL2KuacFWXP8qR2cd5J61JyvJ23OHcmz5ll1m/irmbfXOHF+luMzH6W7Pl1k8WrznPqnzxXqXC/PmdPi9DnYKE+b
+1dgrZG59i7nuX0OR78uRSeb65KFZj7L6/3Zbg6j8vgX0NYWtFZcx1ouz/0juxyJuY9FzD19QYuQL8/x/c54bcQyro/m8VZwLRpn
btR5cp9ZjRp4C5b2aFk+/7z1sag5Ne5HopU1x3ux5QXXyliey3k6H81b3LWxot/pbGmTZt5ros3bZfHVPDoq2typJ6hRe7GOhR7z
SAvmle9ed/iZtBV8dabKfBzrdplbxHl3+h2SuVV8nzl1BZy+kwHL8+Zy27Ta2cxldfjdmiynzel3XH/rlDL3f6bGam6vOVjbzOlW
jiO7Rc9mvv6eXbxdaZt/u858zmNefW7BuCePOGfubwEey7G4tOaMtwh9xuZnM59/K5rllmN5xJwaw7U2t3afNF/nbBlzr6D13Dxj
Ts3ZOXOIGY4dF1M9Gj5bqWjm1n6Kz6fnHgB/b92jrt1dVW9us9fF6QhKcdV7f5253HNtkRyF+vF83gt4Y3d6FF/vmtHum6k1t6nb
zPXRX/aGn1SaS3f/eMy7FD1v583bz6ntrGMBvAu3wSfuvd5Qb46fwc2J4xlcnXleHOpI3ZfWrK9/V3PKbF6px3e13W1OuefEqeeu
y+atBVX6deJQz0t2zPjr1ebdzjO7e9eYdfB1mn4MoNrgE+9/vTyufo/5FSu5JdEi18lbmi1t3t9BPScMt6lfhQFzrg0+8/EnEfWs
uHQ3jacdlea4RjZvOGY3dfgKspu/EgwOlGXPeqnNvkjNP/Wq58XlO6j2i2N1ujZ29e4+q8f7r3Zl1btl6n0VkhFxT55XmlNPuWzn
X/1sqc2lbOrYXFM/b36nPZ0punn930Bc64PPvWzqfcY2lr7KyLeFtqXO/rLm/PXc8RnYsXKN/vKxn8uV+47no7q8dWuuU/ZUT4YR
gPfkzvh58zWq3Fb/+LOfD/L2EXF9hs/F60yma7Gi7h62qY/j1ziDv34itUQ3p6WkvLjEryL//aN4nsvqUry0Vbm6v1m+mmtXbCLm
lDq8yq3Zzup+c6kfreYxcUpVy3NNXFqV6zOrCnMtN+aYxdVhRa5neVeXjOz9r8dW2p6m7s9pKsftWS7P3vta9XgdIuc9R8/yO9KR
kDMf5deiqfM/4/fN/UaL2GXOfb4mNorr6/J6jkvq81WIikz3iDeHa90FZK3mrf59bB/Vc/W2ioO51H/z4vTvWMXpbBqvPVSae8TH
tbZxXsarjz3Ek+dyLehjjWSOPyntG9uj11rt5pT7eN2pZh7Hx4m7Qrqqc2sw62vU+z31p6++2M3pVQC7eVTcaw7uUDfu2lPOnIqU
tH2bec9taCHWt9V9PFcZez0dSanPVJjTT5rym/PiTX2+2tBXyPLqXJT4mWITgJmZRV7qCTbzfq4y1uqcOa1uFdefSNDrOn+VP2uT
orSazxHr84qIuVVpFV/j4lOnj1NW8y6LnzTlXX3TxCnRqtFdjxDsn4oXd/5VZ95XbTj1nDnuM7bjuSfTvTnOHU3XkT1jzkdnvr6G
72yWcj2rvh69oR7aeY3Ug1rEo+JUpmN7SbyNKhZzWa1q9k5tF8cajy/wHrzqklGn97HOcbwjB/eTrPmoLme41B6reMYct596rh41
7ugeujkVF9wqKTrefsR/uk8yHyXHfNbzPCK+15zKLT3W2Jx6t5zn/BGPyvOM+LxN7uqhnOWjpWauHcdrsnyMUDbLLdllEZfMuVHT
r+43n309WU4XWXw11+YmPbpWQa85Jd7OzrQst+bhai4fKSFGnv5nEcdPKMfqUfN5bUYSb7XtMZbNrZZ+c24rfJzxmW2/XqaZ6OKc
us2cHk3bq/AkHf36v9fcMl/vdbVly6rOycbFx+1bjuTY3GJiEx9zEkZDfuu2vy0pH2E1c7u4ZE6PX5p5Pxsfs208pvrE18+MYPG1
Rng/sCKzw7wfAemtruKUOXwfNaeO3XbzebvUWKrP5cb34e884rBnqt/AFrla9N9sWZ41X2M190vLc1fm7Wt79GQ5PV/r9msP4PeE
x2TdHK6USznoFQfjtRdBbeT5hV5j/WhOxWo1t37Wo8JcHtfXNRht/Y037+N15snP/jyn+trqzj+l0VZbm/gcL6jfHDVrlrff6v9G
zfmzMl5d2hMV/zmfd5tzrthcUr++ts3faHVsPtbRNhbLOe0zl8Qj5vNnRCTzu/Icn5Wt2tz4bR2RfCMnPov2qFeYw1bs2pq59By3
PrpH9ePXVyjzmt5oU+HN7ep2ca+55k2b45pzkbcfJyvN8UivX2WxmtvP1bi6cVLzazXmuB9axFfzueay+XyudKc5d/eFfFT3Z7vX
m4rdvKWIOf1XWjLmoA6fFYAybpuPuiW3uJ9nr55T87e8+BjdiPiY6+DsEabM176Iaxcxp2qtqbeCPz2HxfeYY/WctG5ur1lOmTLX
5gSxPB+LxfvLR+rzkrMqf8yvE4+eLermc1x9tas2184qLJneatbNx1bN2+bEofDq8znUuJLT59qZT6ZXW+PYnhf/wNSMX3XV1Oc5
XK+xrr72Ok58zkv8atScWp2pFu9x9dfvbnM909ez+Lllmjk+tlBPwGwj//VpyvEax2jOPzfPa143wq8tj/bJHebWtWHdu4t/IJ90
iFV6PFb1sWZgDp+hxSso4186GfdrVx9HlFrvmHS9OG3OvZdWh1f5msG1ajnPcd+AZ56Mr0ChxNeZotzPJPMq9dc3hzpq5qP6eOzG
1vAV12oYqWmt66er2yhOXT+ljhLWuOOjiU93fPr8ap4TrzJv27KO7HSmS2vrqzktDubUOAzikNtz9oMLZe79dO6sPn6y3ZPNnHlM
eV1/rxLv5nN09Eynj97UHvrYTqmvXuN3fSSfzfu5HHVOHs1y3t5uPpfY3zCfje8yl3+TFp/L2tZIy1dxUO/j/T5zkPces2fxzFoB
xHq9YpEX947tqzllnTt+wXhPiTf1+Rh/2nzdR434+PdimladeMScvoerifeoZ8S1Imu2V/ATUiLm1Igtic/POIuLj+YV4nlzfavR
YvFuczj+PAhiX5PnXnM4n8iZz+NpXrzSvNfQ5xk3H8/Nd5qPmYvzmH9K5Vi3jPhrmntagd0qzLnIVhzPuW3IeT5vISMeK7iHUPdc
ZXM84s2re8xhpMdb4rw8Cro43m7Ns6Zz4vS4gM0j4jZz2S4m3sz57YBBNtMl9/H/a58qnvX+e5jbtfwCXKaPf9X0vDe9ZtK/W/cT
+axszjzaQ6w9h1t5rTGnruycM6fXRWlpulW+/dnaYfWOmlPi3mc0W9Wpz6WeVb/bvOaMfCx5c3wsz9ZpFa9u81gyeX5d7+pXvvq9
anKb/HusbnOF+DqyZ+s0jur1ynPJ5Dh3f6Lcpqi5bdyuMbaY54/iJ8zjGR4394s3dfvRul583CPtXTGr7nO3feL++GviunmFuM/8
HvGaM6l+ZrbPPPYXa7U7z2v21kqLpjbW7hKHuynuM489e84jfsq8vcIZr0U/vu4yx/vaaw6ZnrlKrBt43DVxzXwWx+Z0LHWHO813
Hs/Xre8x98yl9SyXzamiedPj+r3mWuRqdc6Yc/74TtSsuPZsA6/FHnP9ato+lXvMpbyfV2Ks62+6eUT8WzXfm+l8nmvmo31GnIqf
VfxOc/mIXu3i/RxULtptXOeP7rR5dS0s3ifN92b5uId9W6aK5Yiez3GuFq9h/vXruq+vX3ut75DZt2W/eXPfU4/4iEuXmPb4P/zK
WPd6l34FRyv/+S9VYuK6eX0L/eIW+cj2/vfPVi5d+Lq/sqrvKba+5DWPqO83j6nn7m3F5v/47h/fgXn7ur9yj7mt3Gu+Sz2mRLnH
tzPn9pk8B9Nq8/5sfqv6LvOMNHbPbgPn9qk832XePm8Fn7E+YV4nXlNwbr9qnkfeCebj/XYW88p2nRbG5avhf/eajznM5TP3Hvz+
dk7A3WNJm89Hzjlej/ld5vi9HvN2XgBZzpn/8ef1n6W8u7m/JfvvWcTHbvmnXOnu1B27d8Tq2xC/p8hj++yqHwvwSt890Tpt+k7i
tHmX9JrvkHhn7VcU13tE5rf3R+205zuK08fmyPn5Xo/39H5F8Z3mu6N3WvNbEtfn5vd74xie1nw38a7H2WbM74nkac/3Ep/138+8
5trH39N7Vzkd70f5EX/EH/PH/BF/zB/vx/wRf8wf8cf88b7KaYPH++5yWuERv7+cdnjE7y+nJR7x+8tpi8f7/nLa4xE/UU6bPOIn
ymmXR/xEOW3ziN9fTus84veX0z6P+Ily2ugxv7+cNnrET5TTTo/5iXJa6hE/UU5rPeZnymmxR/xEOa32mJ8op90e8fvLablH/EQ5
rfeInyinBR/vE+W04yN+qpz2fLzPlNOuj/nZctr4ET9TTks/4ifKae1H/ESpkXrE36tUST3e71TqrCy/82i/Rnmy8+9XHtO/Y3nE
n/KUpzzlKU95ylOe8m2W/wM=</textarea>
<fieldset>
<legend>Roofs</legend>
<label><input type="radio" name="cellType" onchange="window.cellType = event.target.value" value="0">NONE</input></label>
<label><input type="radio" name="cellType" onchange="window.cellType = event.target.value" value="5133">CONSTRUCTED_ROOF</input></label>
<label><input type="radio" name="cellType" onchange="window.cellType = event.target.value" value="6699">THIN_ROCK_ROOF</input></label>
<label><input type="radio" name="cellType" onchange="window.cellType = event.target.value" value="10820">MOUNTAIN_ROOF</input></label>
</fieldset>
<fieldset>
<legend>Terrains</legend>
<label><input type="radio" name="cellType" onchange="window.cellType = event.target.value" value="37631">NONE</input></label>
<label><input type="radio" name="cellType" onchange="window.cellType = event.target.value" value="27449">MARBLE</input></label>
<label><input type="radio" name="cellType" onchange="window.cellType = event.target.value" value="56931">SANDSTONE</input></label>
<label><input type="radio" name="cellType" onchange="window.cellType = event.target.value" value="61150">GRANITE</input></label>
<label><input type="radio" name="cellType" onchange="window.cellType = event.target.value" value="34310">MARSH</input></label>
<label><input type="radio" name="cellType" onchange="window.cellType = event.target.value" value="11445">SHALLOW_WATER</input></label>
<label><input type="radio" name="cellType" onchange="window.cellType = event.target.value" value="31116">DEEP_WATER</input></label>
</fieldset>
<canvas id="edit" width="400" height="400"></canvas>
<textarea id="output" style="width: 100%" rows="20" readonly></textarea>
<script src="https://cdn.jsdelivr.net/npm/pako@1.0.10/dist/pako.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
var heightInput = document.querySelector('#height');
var widthInput = document.querySelector('#width');
var loadButton = document.querySelector('#load');
var saveButton = document.querySelector('#save');
var inputTextArea = document.querySelector('#input');
var editCanvas = document.querySelector('#edit');
var outputTextArea = document.querySelector('#output');
var brushActive = false;
var cellType = 0;
/**
* Inflates a deflated base64 string as an ArrayBuffer
* @param {string} base64 - A base64 string
* @returns {ArrayBuffer} - Inflated data
*/
function loadDeflatedBase64(base64) {
base64 = base64.replace(/\n/g, '');
return pako.inflateRaw(atob(base64)).buffer;
}
/**
* Deflates an ArrayBuffer as a base64 string
* Returns base64 encoded lines, suitable for saving
*/
function saveAsDeflatedBase64(arrayBuffer, lineWidth) {
var uInt8Array = new Uint8Array(arrayBuffer);
var data = btoa(pako.deflateRaw(uInt8Array, {to: 'string'}));
return chunk(data, lineWidth || 100).join('\n');
}
/**
* Splits an array-like object (eg: strings, buffers)
* into chunks of the specified length
*/
function chunk(array, size) {
var parts = [];
for (var i = 0; i < array.length; i += size)
parts.push(array.slice(i, i + size))
return parts;
}
function drawEditor(arrayBuffer, width, height) {
console.log(arrayBuffer, new Array(arrayBuffer))
// var cells = new Array(arrayBuffer);
var cells = new Uint16Array(arrayBuffer);
var ctx = editCanvas.getContext('2d');
// do not proceed if the data does not match the dimensions provided
if (cells.length != (width * height)) return;
var cellSize = 8;
var cellDefs = {
0: {
type: 'NONE',
color: '#fff',
},
5133: {
type: 'CONSTRUCTED_ROOF',
color: '#ddd',
},
6699: {
type: 'THIN_ROCK_ROOF',
color: '#666',
},
10820: {
type: 'MOUNTAIN_ROOF',
color: '#222',
},
37631: {
type: 'NONE',
color: '#fff',
},
27449: {
type: 'MARBLE',
color: '#eee',
},
56931: {
type: 'SANDSTONE',
color: '#ddd',
},
61150: {
type: 'GRANITE',
color: '#888',
},
34310: {
type: 'MARSH',
color: 'rgb(20, 180, 140)',
},
11445: {
type: 'SHALLOW_WATER',
color: 'rgb(80, 120, 240)',
},
31116: {
type: 'DEEP_WATER',
color: 'rgb(10, 100, 200)',
},
};
renderCells(cells, width, height);
editCanvas.onmousedown = function() {
brushActive = true;
}
editCanvas.onmouseup = function() {
brushActive = false;
}
editCanvas.onmouseleave = function() {
brushActive = false;
}
editCanvas.onmousemove = function(event) {
var canvas = event.target;
var x = Math.floor((event.pageX - canvas.offsetLeft) / cellSize);
var y = height - Math.floor((event.pageY - canvas.offsetTop) / cellSize);
var index = y * width + x;
console.log(x, y, cells[index], getColor(cells[index]));
if (!brushActive) return false;
var cell = cells[index];
var cellTypes = Object.keys(cellDefs);
cells[index] = cellType;
renderCell(cells, width, height, x, y);
}
function renderCells(cells, width, height) {
editCanvas.width = cellSize * width;
editCanvas.height = cellSize * height;
for (var y = 0; y < height; y ++) {
for (var x = 0; x < width; x ++) {
renderCell(cells, width, height, x, y)
}
}
}
function renderCell(cells, width, height, x, y) {
// ctx.fillStyle = cellDefs[cells[y * width + x]].color;
var value = cells[y * width + x];
var color = getColor(value);
ctx.fillStyle = color;
ctx.fillRect(x * cellSize, (height - y) * cellSize, cellSize, cellSize);
}
function getColor(value) {
this.colors = this.colors || {};
var randomValue = Math.floor(Math.random() * 255);
if (cellDefs[value])
this.colors[value] = cellDefs[value].color;
if (!this.colors[value]) {
this.colors[value] = `rgb(${randomValue}, ${randomValue}, ${randomValue})`;
console.log(value, this.colors[value])
}
return this.colors[value]
}
}
loadButton.onclick = function() {
var height = +heightInput.value || 250;
var width = +widthInput.value || 250;
var arrayBuffer = loadDeflatedBase64(inputTextArea.value);
var fogGridArrayBuffer = new Uint8Array(Math.ceil(width * height / 8))
fogGridArrayBuffer.fill(255);
console.log(saveAsDeflatedBase64(fogGridArrayBuffer))
drawEditor(arrayBuffer, width, height);
saveButton.onclick = function() {
var output = saveAsDeflatedBase64(arrayBuffer);
outputTextArea.value = output;
}
}
Raw
styles.css
canvas {
border: 1px solid #ddd;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment