ただのオセロ・リバーシ

ただのオセロです。本当にただのオセロです。でも盤面は最大100×100マスまで広げられて、CPU対戦もできる、ちょっとだけ欲張ったオセロです。インストール不要・ブラウザでそのまま遊べます。角を取られて泣くのはあなたかCPUか。

技術詳細

ブラウザだけで遊べるオセロを作って、この記事に埋め込もうとしたら思いのほか手こずったので、やったことを残しておきます。

最初はふつうに <script> を記事に貼りました。が、動きません。当ブログは Cloudflare の Rocket Loader を使っていて、これがインラインのスクリプトを勝手に書き換えて遅延読み込みするせいで、Cannot read properties of null みたいなエラーが出て止まります。data-cfasync=”false” を付ければ除外できると聞いてやってみましたが、この環境では効きませんでした。

次に、ゲーム一式を <iframe> の srcdoc に直接書く方法を試しました。iframe の中なら Rocket Loader は届かないので、これでいけると思ったんですが、今度はレイアウトが崩れて ‘> みたいな文字が本文に漏れてきます。

WordPress の自動整形（wptexturize）が、srcdoc=’…’ の閉じのシングルクォートを全角の ‘（‘）に変換していました。

... </body></html>&#8216;></iframe>

これだと属性が閉じられないので、そこから先が全部ぐちゃぐちゃになります。要は、属性の中にナマの HTML を詰め込むと、WordPress が「タグはもう閉じた」と勘違いして中身まで整形してしまう、ということでした。

最終的にうまくいったのが base64 です。ゲームの HTML を丸ごと base64 にエンコードして、こう貼りました。

<iframe src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+...">

base64 の文字列は英数字と + / = だけなので、wptexturize が変換したがるクォートもアンパサンドも、タグと誤認される < > も入っていません。だから WordPress に手を出されず、iframe なので Rocket Loader にも触られず、そのまま動きました。

ひとつだけ難点があって、data: の iframe は親ページと別オリジン扱いになるので、中身に合わせて高さを自動調整するやつ（frameElement を触る）が使えません。なので高さは固定で決め打ちしています。盤面は最大幅 600px の正方形に収めているので、固定でも問題はありませんでした。

もし base64 が嫌なら、ゲームを別の .html ファイルにしてサーバーに置き、<iframe src=”…html”> で読む手もあります。こっちは属性が普通の URL になるので壊れませんし、同じドメインに置けば高さの自動調整も効きます。アップロードの手間はかかりますが、確実です。

まとめると、Rocket Loader を避けるために iframe にして、WordPress の整形を避けるために base64 にした、という二段構えでした。同じような環境で詰まっている人の役に立てば。

<iframe title="Othello" loading="lazy" style="width:100%;max-width:600px;height:840px;border:0;display:block;margin:1.2em auto" src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+PGh0bWwgbGFuZz0iamEiPjxoZWFkPjxtZXRhIGNoYXJzZXQ9InV0Zi04Ij48bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLGluaXRpYWwtc2NhbGU9MSI+IDxzdHlsZT4gaHRtbCxib2R5e21hcmdpbjowO3BhZGRpbmc6MH0gI290aGVsbG8tYXBwey0tcHJpbWFyeTojMmU3ZDMyOy0tcHJpbWFyeS1kOiMxYjVlMjA7LS1ib2FyZDojMzg4ZTNjOy0tbGluZTojMmU3ZDMyOyAtLXN1cmZhY2U6I2ZmZmZmZjstLWluazojMjEyMTIxOy0taW5rMjojNWY2MzY4Oy0tYWNjZW50OiNmZmMxMDc7IC0tZTE6MCAxcHggM3B4IHJnYmEoMCwwLDAsLjEyKSwwIDFweCAycHggcmdiYSgwLDAsMCwuMjQpOyAtLWUyOjAgM3B4IDZweCByZ2JhKDAsMCwwLC4xNiksMCAzcHggNnB4IHJnYmEoMCwwLDAsLjIzKTsgbWFyZ2luOjJweCBhdXRvIDhweDtjb2xvcjp2YXIoLS1pbmspO2JveC1zaXppbmc6Ym9yZGVyLWJveDsgZm9udC1mYW1pbHk6Um9ib3RvLCJOb3RvIFNhbnMgSlAiLHN5c3RlbS11aSwtYXBwbGUtc3lzdGVtLCJTZWdvZSBVSSIsIkhlbHZldGljYSBOZXVlIixzYW5zLXNlcmlmfSAjb3RoZWxsby1hcHAgKntib3gtc2l6aW5nOmJvcmRlci1ib3h9ICNvdGhlbGxvLWFwcCAub3RoLXBhbmVse2Rpc3BsYXk6ZmxleDtmbGV4LXdyYXA6d3JhcDtnYXA6MTRweCAxOHB4O2FsaWduLWl0ZW1zOmZsZXgtZW5kOyBwYWRkaW5nOjE2cHg7YmFja2dyb3VuZDp2YXIoLS1zdXJmYWNlKTtib3JkZXItcmFkaXVzOjhweDtib3gtc2hhZG93OnZhcigtLWUxKX0gI290aGVsbG8tYXBwIC5vdGgtcGFuZWwgbGFiZWx7ZGlzcGxheTpmbGV4O2ZsZXgtZGlyZWN0aW9uOmNvbHVtbjtnYXA6NHB4OyBmb250LXNpemU6MTJweDtmb250LXdlaWdodDo1MDA7Y29sb3I6dmFyKC0taW5rMik7bGV0dGVyLXNwYWNpbmc6LjJweH0gI290aGVsbG8tYXBwIC5vdGgtcGFuZWwgbGFiZWwub3RoLWNoZWNre2ZsZXgtZGlyZWN0aW9uOnJvdzthbGlnbi1pdGVtczpjZW50ZXI7Z2FwOjhweDsgY29sb3I6dmFyKC0taW5rKTtmb250LXNpemU6MTNweH0gI290aGVsbG8tYXBwIC5vdGgtcGFuZWwgaW5wdXRbdHlwZT1udW1iZXJdLCNvdGhlbGxvLWFwcCAub3RoLXBhbmVsIHNlbGVjdHsgcGFkZGluZzo4cHggNnB4O2JvcmRlcjowO2JvcmRlci1ib3R0b206MnB4IHNvbGlkICNiZGJkYmQ7YmFja2dyb3VuZDojZjVmNWY1OyBib3JkZXItcmFkaXVzOjRweCA0cHggMCAwO2ZvbnQtc2l6ZToxNXB4O2NvbG9yOnZhcigtLWluayk7dHJhbnNpdGlvbjpib3JkZXItY29sb3IgLjE1cyxiYWNrZ3JvdW5kIC4xNXN9ICNvdGhlbGxvLWFwcCAub3RoLXBhbmVsIGlucHV0W3R5cGU9bnVtYmVyXTpmb2N1cywjb3RoZWxsby1hcHAgLm90aC1wYW5lbCBzZWxlY3Q6Zm9jdXN7IG91dGxpbmU6MDtib3JkZXItYm90dG9tLWNvbG9yOnZhcigtLXByaW1hcnkpO2JhY2tncm91bmQ6I2VlZjNlZX0gI290aGVsbG8tYXBwIC5vdGgtcGFuZWwgaW5wdXRbdHlwZT1udW1iZXJde3dpZHRoOjg4cHh9ICNvdGhlbGxvLWFwcCAub3RoLXBhbmVsIGlucHV0W3R5cGU9Y2hlY2tib3hde3dpZHRoOjE4cHg7aGVpZ2h0OjE4cHg7YWNjZW50LWNvbG9yOnZhcigtLXByaW1hcnkpfSAjb3RoZWxsby1hcHAgLm90aC1ub3Rle2ZvbnQtd2VpZ2h0OjQwMDtjb2xvcjojOWFhMGE2O2ZvbnQtc2l6ZToxMXB4fSAjb3RoZWxsby1hcHAgYnV0dG9ue3BhZGRpbmc6OXB4IDIwcHg7Ym9yZGVyOjA7Ym9yZGVyLXJhZGl1czo0cHg7YmFja2dyb3VuZDp2YXIoLS1wcmltYXJ5KTsgY29sb3I6I2ZmZjtmb250LXNpemU6MTNweDtmb250LXdlaWdodDo2MDA7bGV0dGVyLXNwYWNpbmc6LjZweDt0ZXh0LXRyYW5zZm9ybTp1cHBlcmNhc2U7IGN1cnNvcjpwb2ludGVyO2JveC1zaGFkb3c6dmFyKC0tZTEpO3RyYW5zaXRpb246Ym94LXNoYWRvdyAuMTVzLGJhY2tncm91bmQgLjE1c30gI290aGVsbG8tYXBwIGJ1dHRvbjpob3ZlcntiYWNrZ3JvdW5kOnZhcigtLXByaW1hcnktZCk7Ym94LXNoYWRvdzp2YXIoLS1lMil9ICNvdGhlbGxvLWFwcCBidXR0b246YWN0aXZle2JveC1zaGFkb3c6dmFyKC0tZTEpfSAjb3RoZWxsby1hcHAgYnV0dG9uOmRpc2FibGVke2JhY2tncm91bmQ6I2UwZTBlMDtjb2xvcjojOWU5ZTllO2JveC1zaGFkb3c6bm9uZTtjdXJzb3I6ZGVmYXVsdH0gI290aGVsbG8tYXBwIC5vdGgtc2NvcmViYXJ7ZGlzcGxheTpmbGV4O2FsaWduLWl0ZW1zOmNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6c3BhY2UtYmV0d2VlbjsgZ2FwOjEwcHg7bWFyZ2luOjE2cHggMnB4IDEwcHh9ICNvdGhlbGxvLWFwcCAub3RoLXNje2Rpc3BsYXk6ZmxleDthbGlnbi1pdGVtczpjZW50ZXI7Z2FwOjhweDtmb250LXNpemU6MjJweDtmb250LXdlaWdodDo3MDA7bWluLXdpZHRoOjcwcHh9ICNvdGhlbGxvLWFwcCAub3RoLXNjLXd7anVzdGlmeS1jb250ZW50OmZsZXgtZW5kfSAjb3RoZWxsby1hcHAgLm90aC1jaGlwe3dpZHRoOjIwcHg7aGVpZ2h0OjIwcHg7Ym9yZGVyLXJhZGl1czo1MCU7ZGlzcGxheTppbmxpbmUtYmxvY2s7Ym94LXNoYWRvdzp2YXIoLS1lMSl9ICNvdGhlbGxvLWFwcCAub3RoLWNoaXAuYntiYWNrZ3JvdW5kOnZhcigtLWluayl9ICNvdGhlbGxvLWFwcCAub3RoLWNoaXAud3tiYWNrZ3JvdW5kOiNmYWZhZmF9ICNvdGhlbGxvLWFwcCAub3RoLXN0YXR1c3tmbGV4OjE7dGV4dC1hbGlnbjpjZW50ZXI7Zm9udC1zaXplOjE0cHg7Zm9udC13ZWlnaHQ6NTAwO2NvbG9yOnZhcigtLWluazIpfSAjb3RoZWxsby1hcHAgLm90aC1ib2FyZHtkaXNwbGF5OmdyaWQ7d2lkdGg6MTAwJTtiYWNrZ3JvdW5kOnZhcigtLWxpbmUpOyBib3JkZXItcmFkaXVzOjhweDtvdmVyZmxvdzpoaWRkZW47Ym94LXNoYWRvdzp2YXIoLS1lMik7dG91Y2gtYWN0aW9uOm1hbmlwdWxhdGlvbn0gI290aGVsbG8tYXBwIC5vdGgtY2VsbHthc3BlY3QtcmF0aW86MTtiYWNrZ3JvdW5kOnZhcigtLWJvYXJkKTsgYm9yZGVyOjFweCBzb2xpZCByZ2JhKDAsMCwwLC4xOCk7cG9zaXRpb246cmVsYXRpdmU7Y3Vyc29yOmRlZmF1bHR9ICNvdGhlbGxvLWFwcCAub3RoLWNlbGw6OmFmdGVye2NvbnRlbnQ6IiI7cG9zaXRpb246YWJzb2x1dGU7aW5zZXQ6MTMlO2JvcmRlci1yYWRpdXM6NTAlOyB0cmFuc2Zvcm06c2NhbGUoMCk7dHJhbnNpdGlvbjp0cmFuc2Zvcm0gLjE2cyBlYXNlfSAjb3RoZWxsby1hcHAgLm90aC1jZWxsLmI6OmFmdGVye2JhY2tncm91bmQ6dmFyKC0taW5rKTt0cmFuc2Zvcm06c2NhbGUoMSk7Ym94LXNoYWRvdzp2YXIoLS1lMSl9ICNvdGhlbGxvLWFwcCAub3RoLWNlbGwudzo6YWZ0ZXJ7YmFja2dyb3VuZDojZmFmYWZhO3RyYW5zZm9ybTpzY2FsZSgxKTtib3gtc2hhZG93OnZhcigtLWUxKX0gI290aGVsbG8tYXBwIC5vdGgtY2VsbC5oaW50e2N1cnNvcjpwb2ludGVyfSAjb3RoZWxsby1hcHAgLm90aC1jZWxsLmhpbnQ6OmFmdGVye2luc2V0OjM1JTtiYWNrZ3JvdW5kOnJnYmEoMCwwLDAsLjIyKTt0cmFuc2Zvcm06c2NhbGUoMSk7Ym94LXNoYWRvdzpub25lfSAjb3RoZWxsby1hcHAgLm90aC1jZWxsLmhpbnQ6aG92ZXI6OmFmdGVye2JhY2tncm91bmQ6cmdiYSgwLDAsMCwuNCl9ICNvdGhlbGxvLWFwcCAub3RoLWNlbGwubGFzdHtib3gtc2hhZG93Omluc2V0IDAgMCAwIDNweCB2YXIoLS1hY2NlbnQpfSAjb3RoZWxsby1hcHAgLm90aC1mb290e2Rpc3BsYXk6ZmxleDthbGlnbi1pdGVtczpjZW50ZXI7anVzdGlmeS1jb250ZW50OnNwYWNlLWJldHdlZW47bWFyZ2luLXRvcDoxNHB4fSAjb3RoZWxsby1hcHAgLm90aC1mb290IGJ1dHRvbntiYWNrZ3JvdW5kOiNmZmY7Y29sb3I6dmFyKC0tcHJpbWFyeSk7Ym94LXNoYWRvdzp2YXIoLS1lMSl9ICNvdGhlbGxvLWFwcCAub3RoLWZvb3QgYnV0dG9uOmhvdmVye2JhY2tncm91bmQ6I2YxZjhmMTtib3gtc2hhZG93OnZhcigtLWUyKX0gI290aGVsbG8tYXBwIC5vdGgtZm9vdCBidXR0b246ZGlzYWJsZWR7YmFja2dyb3VuZDojZjVmNWY1O2NvbG9yOiNiZGJkYmQ7Ym94LXNoYWRvdzpub25lfSBAbWVkaWEobWF4LXdpZHRoOjQ4MHB4KXsjb3RoZWxsby1hcHAgLm90aC1wYW5lbHtnYXA6MTBweCAxMnB4O3BhZGRpbmc6MTJweH19IDwvc3R5bGU+PC9oZWFkPjxib2R5PiA8ZGl2IGlkPSJvdGhlbGxvLWFwcCI+IDxkaXYgY2xhc3M9Im90aC1wYW5lbCI+IDxsYWJlbD7nm6TpnaLjgrXjgqTjgrogPGlucHV0IGlkPSJvdGgtc2l6ZSIgdHlwZT0ibnVtYmVyIiBtaW49IjQiIG1heD0iMTAwIiBzdGVwPSIyIiB2YWx1ZT0iOCI+IDxzcGFuIGNsYXNzPSJvdGgtbm90ZSI+77yI5YG25pWwIDTjgJwxMDDvvIk8L3NwYW4+IDwvbGFiZWw+IDxsYWJlbD7jgYLjgarjgZ/jga7nn7MgPHNlbGVjdCBpZD0ib3RoLWNvbG9yIj4gPG9wdGlvbiB2YWx1ZT0iMSI+4pePIOm7ku+8iOWFiOaJi++8iTwvb3B0aW9uPiA8b3B0aW9uIHZhbHVlPSIyIj7il4sg55m977yI5b6M5omL77yJPC9vcHRpb24+IDwvc2VsZWN0PiA8L2xhYmVsPiA8bGFiZWw+Q1BV44Gu5by344GVIDxzZWxlY3QgaWQ9Im90aC1kaWZmIj4gPG9wdGlvbiB2YWx1ZT0iZWFzeSI+44KE44GV44GX44GEPC9vcHRpb24+IDxvcHRpb24gdmFsdWU9Im5vcm1hbCIgc2VsZWN0ZWQ+44G144Gk44GGPC9vcHRpb24+IDxvcHRpb24gdmFsdWU9ImhhcmQiPuOBpOOCiOOBhDwvb3B0aW9uPiA8L3NlbGVjdD4gPC9sYWJlbD4gPGJ1dHRvbiBpZD0ib3RoLW5ldyIgdHlwZT0iYnV0dG9uIj7jgrLjg7zjg6Dplovlp4s8L2J1dHRvbj4gPC9kaXY+IDxkaXYgY2xhc3M9Im90aC1zY29yZWJhciI+IDxzcGFuIGNsYXNzPSJvdGgtc2Mgb3RoLXNjLWIiPjxpIGNsYXNzPSJvdGgtY2hpcCBiIj48L2k+PGIgaWQ9Im90aC1ibGFjayI+MjwvYj48L3NwYW4+IDxzcGFuIGlkPSJvdGgtc3RhdHVzIiBjbGFzcz0ib3RoLXN0YXR1cyI+44CM44Ky44O844Og6ZaL5aeL44CN44KS5oq844GX44Gm44GP44Gg44GV44GEPC9zcGFuPiA8c3BhbiBjbGFzcz0ib3RoLXNjIG90aC1zYy13Ij48YiBpZD0ib3RoLXdoaXRlIj4yPC9iPjxpIGNsYXNzPSJvdGgtY2hpcCB3Ij48L2k+PC9zcGFuPiA8L2Rpdj4gPGRpdiBpZD0ib3RoLWJvYXJkIiBjbGFzcz0ib3RoLWJvYXJkIiBhcmlhLWxhYmVsPSLjgqrjgrvjg63nm6QiPjwvZGl2PiA8ZGl2IGNsYXNzPSJvdGgtZm9vdCI+IDxidXR0b24gaWQ9Im90aC1wYXNzIiB0eXBlPSJidXR0b24iIGRpc2FibGVkPuODkeOCuTwvYnV0dG9uPiA8L2Rpdj4gPC9kaXY+IDxzY3JpcHQ+IChmdW5jdGlvbigpeyB2YXIgRElSUz1bWy0xLC0xXSxbLTEsMF0sWy0xLDFdLFswLC0xXSxbMCwxXSxbMSwtMV0sWzEsMF0sWzEsMV1dOyB2YXIgQkxBQ0s9MSwgV0hJVEU9MjsgdmFyIHJvb3Q9ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoIm90aGVsbG8tYXBwIik7IHZhciBib2FyZEVsPXJvb3QucXVlcnlTZWxlY3RvcigiI290aC1ib2FyZCIpOyB2YXIgc3RhdHVzRWw9cm9vdC5xdWVyeVNlbGVjdG9yKCIjb3RoLXN0YXR1cyIpOyB2YXIgYmxhY2tFbD1yb290LnF1ZXJ5U2VsZWN0b3IoIiNvdGgtYmxhY2siKTsgdmFyIHdoaXRlRWw9cm9vdC5xdWVyeVNlbGVjdG9yKCIjb3RoLXdoaXRlIik7IHZhciBwYXNzQnRuPXJvb3QucXVlcnlTZWxlY3RvcigiI290aC1wYXNzIik7IHZhciBOLCBib2FyZCwgVywgY2VsbHM9W10sIGNlbGxDbHM9W10sIGN1cnJlbnQsIGh1bWFuLCBkaWZmaWN1bHR5LCBzaG93SGludHMsIGxhc3RJZHgsIGJ1c3ksIG92ZXI7IGZ1bmN0aW9uIG9wcChwKXsgcmV0dXJuIHA9PT1CTEFDSz9XSElURTpCTEFDSzsgfSBmdW5jdGlvbiBpZHgocixjKXsgcmV0dXJuIHIqTitjOyB9IGZ1bmN0aW9uIGZsaXBzRm9yKGJkLCBpLCBwKXsgaWYoYmRbaV0hPT0wKSByZXR1cm4gbnVsbDsgdmFyIG89b3BwKHApLCByPShpL04pfDAsIGM9aSVOLCByZXM9bnVsbDsgZm9yKHZhciBkPTA7IGQ8ODsgZCsrKXsgdmFyIGRyPURJUlNbZF1bMF0sIGRjPURJUlNbZF1bMV0sIHJyPXIrZHIsIGNjPWMrZGMsIGxpbmU9W107IHdoaWxlKHJyPj0wJiZycjxOJiZjYz49MCYmY2M8TiYmYmRbcnIqTitjY109PT1vKXsgbGluZS5wdXNoKHJyKk4rY2MpOyBycis9ZHI7IGNjKz1kYzsgfSBpZihsaW5lLmxlbmd0aCAmJiBycj49MCYmcnI8TiYmY2M+PTAmJmNjPE4mJmJkW3JyKk4rY2NdPT09cCl7IGlmKCFyZXMpIHJlcz1bXTsgZm9yKHZhciBrPTA7azxsaW5lLmxlbmd0aDtrKyspIHJlcy5wdXNoKGxpbmVba10pOyB9IH0gcmV0dXJuIHJlczsgfSBmdW5jdGlvbiBsZWdhbE1vdmVzKGJkLCBwKXsgdmFyIG09W107IGZvcih2YXIgaT0wO2k8YmQubGVuZ3RoO2krKyl7IGlmKGJkW2ldPT09MCAmJiBmbGlwc0ZvcihiZCxpLHApKSBtLnB1c2goaSk7IH0gcmV0dXJuIG07IH0gZnVuY3Rpb24gbWFrZVdlaWdodHMobil7IHZhciB3PW5ldyBGbG9hdDY0QXJyYXkobipuKSwgcixjOyBmb3Iocj0wO3I8bjtyKyspIGZvcihjPTA7YzxuO2MrKyl7IHZhciBlUj0ocj09PTB8fHI9PT1uLTEpLCBlQz0oYz09PTB8fGM9PT1uLTEpLCB2OyBpZihlUiYmZUMpIHY9MTIwOyBlbHNlIGlmKGVSfHxlQykgdj04OyBlbHNlIHY9MTsgd1tyKm4rY109djsgfSB2YXIgY29ybmVycz1bWzAsMF0sWzAsbi0xXSxbbi0xLDBdLFtuLTEsbi0xXV07IGZvcih2YXIgY2k9MDsgY2k8NDsgY2krKyl7IHZhciBjcj1jb3JuZXJzW2NpXVswXSwgY2M9Y29ybmVyc1tjaV1bMV07IGZvcih2YXIgZD0wOyBkPDg7IGQrKyl7IHZhciBycj1jcitESVJTW2RdWzBdLCBjYzI9Y2MrRElSU1tkXVsxXTsgaWYocnI8MHx8cnI+PW58fGNjMjwwfHxjYzI+PW4pIGNvbnRpbnVlOyB2YXIgZGlhZz0oRElSU1tkXVswXSE9PTAgJiYgRElSU1tkXVsxXSE9PTApOyB3W3JyKm4rY2MyXT0gZGlhZyA/IC00MCA6IC0yMDsgfSB9IHJldHVybiB3OyB9IGZ1bmN0aW9uIGV2YWx1YXRlKGJkLCBwKXsgdmFyIG89b3BwKHApLCBwb3M9MCwgcGM9MCwgb2M9MCwgZW1wdD0wLCBpLCB2OyBmb3IoaT0wO2k8YmQubGVuZ3RoO2krKyl7IHY9YmRbaV07IGlmKHY9PT0wKXsgZW1wdCsrOyBjb250aW51ZTsgfSBpZih2PT09cCl7IHBvcys9V1tpXTsgcGMrKzsgfSBlbHNlIHsgcG9zLT1XW2ldOyBvYysrOyB9IH0gdmFyIHRvdGFsPU4qTiwgcGhhc2U9KHRvdGFsLWVtcHQpL3RvdGFsLCBzY29yZT1wb3M7IGlmKHBjK29jPjApIHNjb3JlICs9ICgxMDAqKHBjLW9jKS8ocGMrb2MpKSpwaGFzZSo0OyBpZihOKk48PTE0NCl7IHZhciBwbT1sZWdhbE1vdmVzKGJkLHApLmxlbmd0aCwgb209bGVnYWxNb3ZlcyhiZCxvKS5sZW5ndGg7IGlmKHBtK29tPjApIHNjb3JlICs9ICgxMDAqKHBtLW9tKS8ocG0rb20pKSooMS1waGFzZSkqNDsgfSByZXR1cm4gc2NvcmU7IH0gZnVuY3Rpb24gbmVnYW1heChiZCwgcCwgZGVwdGgsIGEsIGIpeyBpZihkZXB0aD09PTApIHJldHVybiBldmFsdWF0ZShiZCwgcCk7IHZhciBtb3Zlcz1sZWdhbE1vdmVzKGJkLCBwKSwgbz1vcHAocCk7IGlmKG1vdmVzLmxlbmd0aD09PTApeyBpZihsZWdhbE1vdmVzKGJkLG8pLmxlbmd0aD09PTApIHJldHVybiBldmFsdWF0ZShiZCxwKTsgcmV0dXJuIC1uZWdhbWF4KGJkLCBvLCBkZXB0aC0xLCAtYiwgLWEpOyB9IHZhciBiZXN0PS1JbmZpbml0eSwgaSwgajsgZm9yKGk9MDtpPG1vdmVzLmxlbmd0aDtpKyspeyB2YXIgbmI9YmQuc2xpY2UoKSwgZmw9ZmxpcHNGb3IobmIsIG1vdmVzW2ldLCBwKTsgbmJbbW92ZXNbaV1dPXA7IGZvcihqPTA7ajxmbC5sZW5ndGg7aisrKSBuYltmbFtqXV09cDsgdmFyIHM9LW5lZ2FtYXgobmIsIG8sIGRlcHRoLTEsIC1iLCAtYSk7IGlmKHM+YmVzdCkgYmVzdD1zOyBpZihiZXN0PmEpIGE9YmVzdDsgaWYoYT49YikgYnJlYWs7IH0gcmV0dXJuIGJlc3Q7IH0gZnVuY3Rpb24gcGlja0RlcHRoKGNlbGxzTiwgZGlmZil7IHZhciBiYXNlOyBpZihjZWxsc048PTE2KSBiYXNlPTY7IGVsc2UgaWYoY2VsbHNOPD0zNikgYmFzZT01OyBlbHNlIGlmKGNlbGxzTjw9NjQpIGJhc2U9NDsgZWxzZSBpZihjZWxsc048PTE0NCkgYmFzZT0zOyBlbHNlIGlmKGNlbGxzTjw9NDAwKSBiYXNlPTI7IGVsc2UgYmFzZT0xOyBpZihkaWZmPT09ImVhc3kiKSBiYXNlPTE7IGVsc2UgaWYoZGlmZj09PSJub3JtYWwiKSBiYXNlPU1hdGgubWF4KDEsIGJhc2UtMSk7IHJldHVybiBiYXNlOyB9IGZ1bmN0aW9uIGNob29zZU1vdmUocCl7IHZhciBtb3Zlcz1sZWdhbE1vdmVzKGJvYXJkLCBwKTsgaWYobW92ZXMubGVuZ3RoPT09MCkgcmV0dXJuIC0xOyBpZihkaWZmaWN1bHR5PT09ImVhc3kiICYmIE1hdGgucmFuZG9tKCk8MC4zNSkgcmV0dXJuIG1vdmVzWyhNYXRoLnJhbmRvbSgpKm1vdmVzLmxlbmd0aCl8MF07IHZhciBkZXB0aD1waWNrRGVwdGgoTipOLCBkaWZmaWN1bHR5KSwgbz1vcHAocCk7IHZhciBiZXN0PS1JbmZpbml0eSwgdGllcz1bXSwgaSwgajsgZm9yKGk9MDtpPG1vdmVzLmxlbmd0aDtpKyspeyB2YXIgbmI9Ym9hcmQuc2xpY2UoKSwgZmw9ZmxpcHNGb3IobmIsIG1vdmVzW2ldLCBwKTsgbmJbbW92ZXNbaV1dPXA7IGZvcihqPTA7ajxmbC5sZW5ndGg7aisrKSBuYltmbFtqXV09cDsgdmFyIHM9LW5lZ2FtYXgobmIsIG8sIGRlcHRoLTEsIC1JbmZpbml0eSwgSW5maW5pdHkpOyBpZihzPmJlc3QrMWUtOSl7IGJlc3Q9czsgdGllcz1bbW92ZXNbaV1dOyB9IGVsc2UgaWYoTWF0aC5hYnMocy1iZXN0KTwxZS05KSB0aWVzLnB1c2gobW92ZXNbaV0pOyB9IHJldHVybiB0aWVzWyhNYXRoLnJhbmRvbSgpKnRpZXMubGVuZ3RoKXwwXTsgfSBmdW5jdGlvbiBmaXQoKXsgdHJ5eyBpZih3aW5kb3cuZnJhbWVFbGVtZW50KSB3aW5kb3cuZnJhbWVFbGVtZW50LnN0eWxlLmhlaWdodD1kb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc2Nyb2xsSGVpZ2h0KyJweCI7IH1jYXRjaChlKXt9IH0gZnVuY3Rpb24gYnVpbGRCb2FyZCgpeyBib2FyZEVsLnN0eWxlLmdyaWRUZW1wbGF0ZUNvbHVtbnM9InJlcGVhdCgiK04rIiwxZnIpIjsgYm9hcmRFbC5pbm5lckhUTUw9IiI7IGNlbGxzPVtdOyBjZWxsQ2xzPVtdOyB2YXIgZnJhZz1kb2N1bWVudC5jcmVhdGVEb2N1bWVudEZyYWdtZW50KCk7IGZvcih2YXIgaT0wO2k8TipOO2krKyl7IHZhciBkPWRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImRpdiIpOyBkLmNsYXNzTmFtZT0ib3RoLWNlbGwiOyBkLmRhdGFzZXQuaT1pOyBmcmFnLmFwcGVuZENoaWxkKGQpOyBjZWxscy5wdXNoKGQpOyBjZWxsQ2xzLnB1c2goIm90aC1jZWxsIik7IH0gYm9hcmRFbC5hcHBlbmRDaGlsZChmcmFnKTsgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKGZpdCk7IH0gZnVuY3Rpb24gcmVuZGVyKGhpbnRTZXQpeyBmb3IodmFyIGk9MDtpPGJvYXJkLmxlbmd0aDtpKyspeyB2YXIgY2xzPSJvdGgtY2VsbCI7IGlmKGJvYXJkW2ldPT09QkxBQ0spIGNscys9IiBiIjsgZWxzZSBpZihib2FyZFtpXT09PVdISVRFKSBjbHMrPSIgdyI7IGlmKGhpbnRTZXQgJiYgaGludFNldFtpXSkgY2xzKz0iIGhpbnQiOyBpZihpPT09bGFzdElkeCkgY2xzKz0iIGxhc3QiOyBpZihjbHMhPT1jZWxsQ2xzW2ldKXsgY2VsbHNbaV0uY2xhc3NOYW1lPWNsczsgY2VsbENsc1tpXT1jbHM7IH0gfSB2YXIgYj0wLHc9MDsgZm9yKHZhciBrPTA7azxib2FyZC5sZW5ndGg7aysrKXsgaWYoYm9hcmRba109PT1CTEFDSyliKys7IGVsc2UgaWYoYm9hcmRba109PT1XSElURSl3Kys7IH0gYmxhY2tFbC50ZXh0Q29udGVudD1iOyB3aGl0ZUVsLnRleHRDb250ZW50PXc7IH0gZnVuY3Rpb24gc2V0U3RhdHVzKHQpeyBzdGF0dXNFbC50ZXh0Q29udGVudD10OyB9IGZ1bmN0aW9uIGFwcGx5TW92ZShpLCBwKXsgdmFyIGZsPWZsaXBzRm9yKGJvYXJkLCBpLCBwKTsgaWYoIWZsKSByZXR1cm4gZmFsc2U7IGJvYXJkW2ldPXA7IGZvcih2YXIgaz0wO2s8ZmwubGVuZ3RoO2srKykgYm9hcmRbZmxba11dPXA7IGxhc3RJZHg9aTsgcmV0dXJuIHRydWU7IH0gZnVuY3Rpb24gcHJvY2VlZCgpeyB2YXIgYm09bGVnYWxNb3Zlcyhib2FyZCwgQkxBQ0spLmxlbmd0aCwgd209bGVnYWxNb3Zlcyhib2FyZCwgV0hJVEUpLmxlbmd0aDsgaWYoYm09PT0wICYmIHdtPT09MCl7IGVuZEdhbWUoKTsgcmV0dXJuOyB9IHZhciBtaW5lID0gY3VycmVudD09PUJMQUNLID8gYm0gOiB3bTsgaWYobWluZT09PTApeyBzZXRTdGF0dXMoKGN1cnJlbnQ9PT1odW1hbj8i44GC44Gq44GfIjoiQ1BVIikrIuOBr+aJk+OBpuOCi+aJi+OBjOOBquOBhOOBruOBp+ODkeOCuSIpOyBwYXNzQnRuLmRpc2FibGVkPXRydWU7IGN1cnJlbnQ9b3BwKGN1cnJlbnQpOyBidXN5PXRydWU7IHNldFRpbWVvdXQoZnVuY3Rpb24oKXsgYnVzeT1mYWxzZTsgcHJvY2VlZCgpOyB9LCA3MDApOyByZXR1cm47IH0gaWYoY3VycmVudD09PWh1bWFuKXsgYnVzeT1mYWxzZTsgdmFyIGhzPXt9OyBpZihzaG93SGludHMpeyB2YXIgbG09bGVnYWxNb3Zlcyhib2FyZCxjdXJyZW50KTsgZm9yKHZhciBpPTA7aTxsbS5sZW5ndGg7aSsrKSBoc1tsbVtpXV09MTsgfSByZW5kZXIoaHMpOyBwYXNzQnRuLmRpc2FibGVkPWZhbHNlOyBzZXRTdGF0dXMoIuOBguOBquOBn+OBrueVquOBp+OBme+8iCIrKGh1bWFuPT09QkxBQ0s/IuKXjyDpu5IiOiLil4sg55m9IikrIu+8iSIpOyB9ZWxzZXsgYnVzeT10cnVlOyBwYXNzQnRuLmRpc2FibGVkPXRydWU7IHJlbmRlcihudWxsKTsgc2V0U3RhdHVzKCJDUFUg5oCd6ICD5Lit4oCmIik7IHNldFRpbWVvdXQoZnVuY3Rpb24oKXsgdmFyIG12PWNob29zZU1vdmUoY3VycmVudCk7IGlmKG12Pj0wKSBhcHBseU1vdmUobXYsIGN1cnJlbnQpOyBjdXJyZW50PW9wcChjdXJyZW50KTsgYnVzeT1mYWxzZTsgcHJvY2VlZCgpOyB9LCAzMCk7IH0gfSBmdW5jdGlvbiBlbmRHYW1lKCl7IG92ZXI9dHJ1ZTsgYnVzeT1mYWxzZTsgcGFzc0J0bi5kaXNhYmxlZD10cnVlOyByZW5kZXIobnVsbCk7IHZhciBiPStibGFja0VsLnRleHRDb250ZW50LCB3PSt3aGl0ZUVsLnRleHRDb250ZW50LCBtc2c7IHZhciB5b3VCID0gaHVtYW49PT1CTEFDSywgeW91Q250ID0geW91Qj9iOncsIGNwdUNudCA9IHlvdUI/dzpiOyBpZihiPT09dykgbXNnPSLlvJXjgY3liIbjgZHvvIHvvIgiK2IrIiDlr74gIit3KyLvvIkiOyBlbHNlIGlmKHlvdUNudD5jcHVDbnQpIG1zZz0i8J+OiSDjgYLjgarjgZ/jga7li53jgaHvvIHvvIjjgYLjgarjgZ8gIit5b3VDbnQrIiDlr74gQ1BVICIrY3B1Q250KyLvvIkiOyBlbHNlIG1zZz0iQ1BV44Gu5Yud44Gh77yI44GC44Gq44GfICIreW91Q250KyIg5a++IENQVSAiK2NwdUNudCsi77yJIjsgc2V0U3RhdHVzKG1zZyk7IH0gZnVuY3Rpb24gb25DZWxsQ2xpY2soZSl7IGlmKGJ1c3kgfHwgb3ZlcikgcmV0dXJuOyB2YXIgdD1lLnRhcmdldC5jbG9zZXN0KCIub3RoLWNlbGwiKTsgaWYoIXQpIHJldHVybjsgdmFyIGk9K3QuZGF0YXNldC5pOyBpZihjdXJyZW50IT09aHVtYW4pIHJldHVybjsgaWYoIWZsaXBzRm9yKGJvYXJkLCBpLCBodW1hbikpIHJldHVybjsgYXBwbHlNb3ZlKGksIGh1bWFuKTsgY3VycmVudD1vcHAoY3VycmVudCk7IHByb2NlZWQoKTsgfSBmdW5jdGlvbiBuZXdHYW1lKCl7IHZhciBzaXplPXBhcnNlSW50KHJvb3QucXVlcnlTZWxlY3RvcigiI290aC1zaXplIikudmFsdWUsMTApOyBpZihpc05hTihzaXplKSkgc2l6ZT04OyBzaXplPU1hdGgubWF4KDQsIE1hdGgubWluKDEwMCwgc2l6ZSkpOyBpZihzaXplJTIhPT0wKSBzaXplLT0xOyByb290LnF1ZXJ5U2VsZWN0b3IoIiNvdGgtc2l6ZSIpLnZhbHVlPXNpemU7IE49c2l6ZTsgVz1tYWtlV2VpZ2h0cyhOKTsgYm9hcmQ9bmV3IEludDhBcnJheShOKk4pOyB2YXIgbT1OLzI7IGJvYXJkW2lkeChtLTEsbS0xKV09V0hJVEU7IGJvYXJkW2lkeChtLTEsbSldPUJMQUNLOyBib2FyZFtpZHgobSxtLTEpXT1CTEFDSzsgYm9hcmRbaWR4KG0sbSldPVdISVRFOyBodW1hbj1wYXJzZUludChyb290LnF1ZXJ5U2VsZWN0b3IoIiNvdGgtY29sb3IiKS52YWx1ZSwxMCk7IGRpZmZpY3VsdHk9cm9vdC5xdWVyeVNlbGVjdG9yKCIjb3RoLWRpZmYiKS52YWx1ZTsgc2hvd0hpbnRzPXRydWU7IGN1cnJlbnQ9QkxBQ0s7IGxhc3RJZHg9LTE7IGJ1c3k9ZmFsc2U7IG92ZXI9ZmFsc2U7IGJ1aWxkQm9hcmQoKTsgcmVuZGVyKG51bGwpOyBwcm9jZWVkKCk7IH0gYm9hcmRFbC5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIG9uQ2VsbENsaWNrKTsgcm9vdC5xdWVyeVNlbGVjdG9yKCIjb3RoLW5ldyIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgbmV3R2FtZSk7IHBhc3NCdG4uYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbigpeyBpZihidXN5fHxvdmVyfHxjdXJyZW50IT09aHVtYW4pIHJldHVybjsgaWYobGVnYWxNb3Zlcyhib2FyZCxodW1hbikubGVuZ3RoPjApIHJldHVybjsgY3VycmVudD1vcHAoY3VycmVudCk7IHByb2NlZWQoKTsgfSk7IHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCJyZXNpemUiLCBmaXQpOyBuZXdHYW1lKCk7IH0pKCk7IDwvc2NyaXB0PiA8L2JvZHk+PC9odG1sPg=="></iframe>