{"id":348658,"date":"2023-06-12T15:00:33","date_gmt":"2023-06-12T15:00:33","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=348658"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=348658","title":{"rendered":"<span>BALLSORT \u043d\u0430 $mol. \u0427\u0430\u0441\u0442\u044c 2<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 $mol <a href=\"https:\/\/ballsort.sova.dev\/\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e\u0439<\/a> \u0434\u0435\u043c\u043a\u0438. \u041a\u0442\u043e \u043d\u0435 \u0447\u0438\u0442\u0430\u043b \u043f\u0435\u0440\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0435\u0439 <a href=\"https:\/\/habr.com\/ru\/articles\/741040\" rel=\"noopener noreferrer nofollow\">BALLSORT \u043d\u0430 $mol. \u0427\u0430\u0441\u0442\u044c 1<\/a><\/p>\n<h2>\u041d\u0430\u043f\u043e\u043c\u043d\u044e \u0437\u0430\u0434\u0430\u0447\u0443<\/h2>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/7a6\/f0f\/e7a\/7a6f0fe7a5defe28bd9c776b2b2b3fda.gif\" alt=\"gif\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/7a6\/f0f\/e7a\/7a6f0fe7a5defe28bd9c776b2b2b3fda.gif\"\/><\/p>\n<div><figcaption>gif<\/figcaption><\/div>\n<\/figure>\n<h3>\u042d\u043a\u0440\u0430\u043d\u044b<\/h3>\n<ul>\n<li>\n<p>Start &#8212; \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438\u0433\u0440\u044b, \u0438 \u043f\u043e\u0434\u0432\u0430\u043b \u0441 c\u0441\u044b\u043b\u043a\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>Game &#8212; \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0440\u0430\u043d \u0441 \u0438\u0433\u0440\u043e\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0440\u0438\u043a\u0438. \u0412 \u0445\u0435\u0434\u0435\u0440\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0438 \u0440\u0435\u0441\u0442\u0430\u0440\u0442\u0430 \u0438\u0433\u0440\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0447\u0438\u0441\u043b\u0430 \u0441\u0434\u0435\u043b\u0430y\u043d\u044b\u0445 \u0448\u0430\u0433\u043e\u0432. \u0412 \u0446\u0435\u043d\u0442\u0440\u0435 \u0442\u0440\u0443\u0431\u043a\u0438 \u0441 \u0448\u0430\u0440\u0430\u043c\u0438. \u0412 \u043f\u043e\u0434\u0432\u0430\u043b\u0435 \u0442\u0435 \u0436\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0447\u0442\u043e \u0438 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<\/li>\n<li>\n<p>Finish &#8212; \u043a\u043e\u0433\u0434\u0430 \u0448\u0430\u0440\u0438\u043a\u0438 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u043f\u043e\u0432\u0435\u0440\u0445 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0435\u0442\u0438\u0439 \u044d\u043a\u0440\u0430\u043d. \u041d\u0430 \u043d\u0435\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a &#171;You won!&#187;, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0445 \u0448\u0430\u0433\u043e\u0432, \u0438 \u043a\u043d\u043e\u043f\u043a\u0430 &#171;New game&#187; \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0438\u0433\u0440\u044b<\/h3>\n<ol>\n<li>\n<p>\u0420\u0438\u0441\u0443\u044e\u0442\u0441\u044f 6 \u0442\u0440\u0443\u0431\u043e\u043a, \u0447\u0435\u0442\u044b\u0440\u0435 \u0438 \u043d\u0438\u0445 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0448\u0430\u0440\u0430\u043c\u0438 \u0438 \u0434\u0432\u0435 \u043f\u0443\u0441\u0442\u044b\u0435<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0442\u0440\u0443\u0431\u043a\u0430\u0445 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u043e 4 \u0448\u0430\u0440\u0430, \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043d\u0435\u043f\u0443\u0441\u0442\u0443\u044e \u0442\u0440\u0443\u0431\u043a\u0443, \u043e\u043d\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <\/p>\n<ul>\n<li>\n<p>\u0412 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0448\u0430\u0440 \u0432 \u0442\u0440\u0443\u0431\u043a\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043d\u0430 \u0435\u0435 \u043a\u0440\u044b\u0448\u043a\u0443<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u043a\u043b\u0438\u043a \u043f\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0435 \u0434\u0435\u0437\u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442 \u0435\u0435, \u0448\u0430\u0440 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u043d\u0435\u0435<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0442\u0440\u0443\u0431\u043a\u0438, \u043a\u043b\u0438\u043a \u043f\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442 \u0448\u0430\u0440 \u0441 \u043a\u0440\u044b\u0448\u043a\u0438 \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u0442\u0440\u0443\u0431\u043a\u0443 \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438, \u0447\u0442\u043e \u0434\u0440\u0443\u0433\u0430\u044f \u0442\u0440\u0443\u0431\u043a\u0430 \u043f\u0443\u0441\u0442\u0430 \u0438\u043b\u0438 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0448\u0430\u0440 \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0436\u0435 \u0446\u0432\u0435\u0442\u0430 \u043a\u0430\u043a \u0448\u0430\u0440 \u043d\u0430 \u043a\u0440\u044b\u0448\u043a\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0435<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u0440\u0443\u0431\u043e\u043a \u0432\u0441\u0435 4 \u0448\u0430\u0440\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u043e\u043d\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u0442\u0430\u0442\u0443\u0441 \u0433\u043e\u0442\u043e\u0432\u043e, \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0440\u044b \u0432 \u043d\u0435\u0435\/\u0438\u0437 \u043d\u0435\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0433\u0440\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 4 \u0442\u0440\u0443\u0431\u043a\u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0443\u0442 \u0432 \u0441\u0442\u0430\u0442\u0443\u0441 \u0433\u043e\u0442\u043e\u0432\u043e.<\/p>\n<\/li>\n<\/ol>\n<h2>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0428\u0430\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u0422\u0440\u0443\u0431\u043a\u0438<\/p>\n<\/li>\n<\/ul>\n<p>\u0410 \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0432\u0441\u0435 \u0432 \u043c\u043e\u0434\u0443\u043b\u0435 <code>app<\/code>.<\/p>\n<h3>link<\/h3>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>ballsort\/link<\/code> \u0438 \u0444\u0430\u0439\u043b \u0432 \u043d\u0435\u0439 <code>link.view.tree<\/code>.<\/p>\n<pre><code>$hype_ballsort_link $mol_view dom_name \\a attr * href &lt;= href \\ target &lt;= target \\_self sub \/ &lt;= title \\ <\/code><\/pre>\n<blockquote>\n<p>view.tree &#8212; \u044d\u0442\u043e DSL, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c\u0438 \u0442\u0440\u0443\u0434\u0430\u043c\u0438: <a href=\"https:\/\/mol.hyoo.ru\/#!section=docs\/=rv38hh_h1cjhz\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/a>, <a href=\"https:\/\/mol.hyoo.ru\/#!section=docs\/=vv2nig_s5zr0f\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/a><\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0432\u044b \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u0441 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u043c\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u0432\u044b\u0448\u0435 \u0432\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u043a\u043b\u0430\u0441\u0441 <code>$hype_ballsort_link<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>$mol_view<\/code>. \u0418\u043c\u044f \u0442\u0435\u0433\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u043d\u0430 <code>a<\/code>, \u0443 dom-\u043d\u043e\u0434\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0434\u0432\u0430 \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>href<\/code> \u0438 <code>target<\/code> \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0431\u0438\u043d\u0434\u0435\u043d\u044b \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0431\u0435\u043d\u043a\u0430 dom-\u043d\u043e\u0434\u044b \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>title<\/code>.<\/p>\n<p>\u041e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 <code>http:\/\/127.0.0.1:9080\/hype\/ballsort\/app\/-\/test.html<\/code> &#8212; \u044d\u0442\u043e \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0444\u0430\u0439\u043b <code>index.html<\/code>. \u041d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>\u041e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>app\/app.view.tree<\/code><\/p>\n<pre><code>$hype_ballsort_app $mol_view sub \/ &lt;= Components $mol_list rows \/ &lt;= Link $hype_ballsort_link title \\\u0421\u0441\u044b\u043b\u043a\u0430 href \\example.com target \\_blank <\/code><\/pre>\n<blockquote>\n<p><a href=\"https:\/\/github.com\/hyoo-ru\/mam_mol\/tree\/master\/list\" rel=\"noopener noreferrer nofollow\">$mol_list<\/a> &#8212; \u044d\u0442\u043e view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u043c\u043e\u043b\u0430, \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430, \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0438\u043c.<\/p>\n<\/blockquote>\n<p>\u0417\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440: <\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/5c2\/904\/c9d\/5c2904c9d12b9eaee18cd6a51a294bed.png\" alt=\"\u0441\u0441\u044b\u043b\u043a\u0430\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/5c2\/904\/c9d\/5c2904c9d12b9eaee18cd6a51a294bed.png\"\/><\/p>\n<div><figcaption>\u0441\u0441\u044b\u043b\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0438\u043b\u0435\u0439, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432 <code>link<\/code> \u0444\u0430\u0439\u043b <code>link.view.css.ts<\/code><\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  $mol_style_define( $hype_ballsort_link, {  color: 'lightgray', padding: ['0.25rem', '1rem'],  } )  } <\/code><\/pre>\n<blockquote>\n<p>\u041f\u0440\u043e <code>css.ts<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0442\u0443\u0442: <a href=\"https:\/\/mol.hyoo.ru\/#!section=docs\/=7fbqy9_ojho3i\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/a>, <a href=\"https:\/\/mol.hyoo.ru\/#!section=docs\/=xwq9q5_f966fg\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 CSS-in-TS<\/a>, <a href=\"https:\/\/github.com\/hyoo-ru\/mam_mol\/blob\/master\/style\/readme.md\" rel=\"noopener noreferrer nofollow\">$mol_style readme.md<\/a><\/p>\n<\/blockquote>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0441\u044b\u043b\u043a\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<h3>button<\/h3>\n<p>\u041f\u0440\u043e\u0434\u0435\u043b\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<p>\u0424\u0430\u0439\u043b <code>ballsort\/button\/button.view.tree<\/code>:<\/p>\n<pre><code>$hype_ballsort_button $mol_view dom_name \\button sub \/ &lt;= title \\ event * click? &lt;=> click? null <\/code><\/pre>\n<p>\u0412\u044b\u0432\u043e\u0434\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 <code>app<\/code>:<\/p>\n<pre><code>$hype_ballsort_app $mol_view sub \/ &lt;= Components $mol_list rows \/ &lt;= Link $hypr_ballsort_link title \\\u0421\u0441\u044b\u043b\u043a\u0430 href \\example.com target \\_blank &lt;= Button $hype_ballsort_button title \\\u041a\u043d\u043e\u043f\u043a\u0430 <\/code><\/pre>\n<p>\u0423\u0431\u0435\u0436\u0434\u0430\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u043f\u043e\u0434\u0442\u044f\u043d\u0443\u043b\u0430\u0441\u044c: <\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/b99\/c28\/f62\/b99c28f62a9e01c3b0f209d65e6bd6e7.png\" alt=\"\u041a\u043d\u043e\u043f\u043a\u0430\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/b99\/c28\/f62\/b99c28f62a9e01c3b0f209d65e6bd6e7.png\"\/><\/p>\n<div><figcaption>\u041a\u043d\u043e\u043f\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>button.view.css.ts<\/code>:<\/p>\n<pre><code>namespace $.$$ {  $mol_style_define( $hype_ballsort_button, {  width: 'fit-content', backgroundColor: 'white', color: 'black', padding: ['0.6rem', '1rem'], fontSize: '1.3rem', margin: [0, '0.2rem'], border: { width: '2px', style: 'solid', color: 'lightgray', }, cursor: 'pointer', position: 'relative',  ':hover': { backgroundColor: '#f1f1f1', },  ':focus': { outline: 'none', boxShadow: '0 0 0 4px lightblue', borderColor: 'lightblue', },  } )  } <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/a80\/d67\/71b\/a80d6771ba6c7f4f462a51e2394b1cc8.png\" alt=\"\u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/a80\/d67\/71b\/a80d6771ba6c7f4f462a51e2394b1cc8.png\"\/><\/p>\n<div><figcaption>\u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438<\/figcaption><\/div>\n<\/figure>\n<h3>ball<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0448\u0430\u0440\u0430. \u0418\u043c\u044f <code>$hype_ballsort_ball<\/code> \u0443\u0436\u0435 \u0437\u0430\u043d\u044f\u0442\u043e \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u043c\u043e\u0434\u0435\u043b\u0438, view-\u0448\u043a\u0443 \u0448\u0430\u0440\u0430 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 <code>$hype_ballsort_ball_view<\/code>.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>ballsort\/ball\/view\/view.view.tree<\/code><\/p>\n<blockquote>\n<p>\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0432\u043e view.tree \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441\u043e \u0437\u043d\u0430\u043a\u0430 \u043c\u0438\u043d\u0443\u0441<\/p>\n<\/blockquote>\n<pre><code>$hype_ballsort_ball_view $mol_view - \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0448\u0430\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u0448\u0430\u0440\u0430, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d \u0434\u043e\u0441\u0442\u0430\u0435\u0442 \u0446\u0432\u0435\u0442 ball $hype_ballsort_ball - \u0414\u043b\u044f \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u043a\u0438 \u0448\u0430\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 style * --main-color &lt;= color_main \\ --light-color &lt;= color_light \\ - \u0426\u0432\u0435\u0442\u0430 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u044b \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435, \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u043a\u0430\u043a \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 - \u0412\u0441\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e 12 \u0446\u0432\u0435\u0442\u043e\u0432, \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u043e\u0442 0 \u0434\u043e 11 - \u0446\u0432\u0435\u0442 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 0 - \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 - color_main - \u0446\u0432\u0435\u0442 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 0 + 1 - \u0432\u0442\u043e\u0440\u043e\u0439 \u0446\u0432\u0435\u0442 - color_light colors \/ \\#8F7E22 \\#FFE600 \\#247516 \\#70FF00 \\#466799 \\#00B2FF \\#29777C \\#00FFF0 \\#17206F \\#4A72FF \\#BABABA \\#FFFFFF \\#4C3283 \\#9D50FF \\#8B11C5 \\#FF00F5 \\#9D0D41 \\#FF60B5 \\#4B0000 \\#FF0000 \\#79480F \\#FF7A00 \\#343434 \\#B1B1B1 <\/code><\/pre>\n<p>\u0420\u0438\u0441\u0443\u0435\u043c \u0448\u0430\u0440 \u0432 <code>app<\/code><\/p>\n<pre><code>$hype_ballsort_app $mol_view sub \/ &lt;= Components $mol_list rows \/ &lt;= Link $hype_ballsort_link title \\\u0421\u0441\u044b\u043b\u043a\u0430 href \\example.com target \\_blank &lt;= Button $hype_ballsort_button title \\\u041a\u043d\u043e\u043f\u043a\u0430 &lt;= Ball $hype_ballsort_ball_view <\/code><\/pre>\n<p>\u0418 \u043d\u0435 \u0432\u0438\u0434\u0435\u043c \u0435\u0433\u043e, \u043d\u043e \u043e\u043d \u0435\u0441\u0442\u044c <\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/0c0\/332\/dc5\/0c0332dc5f646aeccd51828afb159ecf.png\" alt=\"\u041d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u0448\u0430\u0440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/0c0\/332\/dc5\/0c0332dc5f646aeccd51828afb159ecf.png\"\/><\/p>\n<div><figcaption>\u041d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u0448\u0430\u0440<\/figcaption><\/div>\n<\/figure>\n<p> \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u043c\u0443 \u0441\u0442\u0438\u043b\u0435\u0439, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>ball\/view\/view.view.css.ts<\/code> <\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  $mol_style_define( $hype_ballsort_ball_view, {  width: '2rem', height: '2rem', boxSizing: 'content-box',  border: { radius: '50%', width: '2px', style: 'solid', color: 'black', },  margin: '1px', position: 'relative', backgroundImage: 'radial-gradient(circle at 65% 15%, white 1px, var(--light-color) 3%, var(--main-color) 60%, var(--light-color) 100%)',  } )  } <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/ea5\/5f7\/220\/ea55f72202bcd5271c58f32c09c0264e.png\" alt=\"\u0427\u0442\u043e-\u0442\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ea5\/5f7\/220\/ea55f72202bcd5271c58f32c09c0264e.png\"\/><\/p>\n<div><figcaption>\u0427\u0442\u043e-\u0442\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c \u0448\u0430\u0440 \u0431\u0440\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043b\u043e\u0433\u0438\u043a\u0438. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>view.view.ts<\/code>.<\/p>\n<pre><code class=\"typescript\">namespace $.$$ { export class $hype_ballsort_ball_view extends $.$hype_ballsort_ball_view {  \/\/ \u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 ball \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u043c\u043e\u0434\u0435\u043b\u0438 \u0448\u0430\u0440\u0430 \/\/ \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043e\u0441\u0442\u0430\u0435\u043c \u0446\u0432\u0435\u0442 `color()` \u0438 \u0443\u043c\u043d\u043e\u0436\u0430\u0435\u043c \u043d\u0430 2 \/\/ \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0434\u0435\u043a\u0441 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0446\u0432\u0435\u0442\u043e\u0432 color_index() { return this.ball().color() * 2 }  \/\/ \u0414\u043e\u0441\u0442\u0430\u0435\u043c \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 \u043f\u043e \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u043e\u043c\u0443 \u0438\u043d\u0434\u0435\u043a\u0441\u0443 \/\/ \u041d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u0435\u043b \u0438\u043d\u0434\u0435\u043a\u0441 \u0432\u044b\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0437\u0430 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 \/\/ \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 color_main() { return this.colors()[ this.color_index() ] ?? 'red' }  \/\/ \u0414\u043e\u0441\u0442\u0430\u0435\u043c \u0432\u0442\u043e\u0440\u043e\u0439 \u0446\u0432\u0435\u0442 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 + 1 \/\/ \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e color_light() { return this.colors()[ this.color_index() + 1 ] ?? 'white' }  } }  <\/code><\/pre>\n<p>\u0418 \u0442.\u043a. \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0441\u0442\u043e\u0438\u0442 \u0446\u0432\u0435\u0442 0, \u0432\u0438\u0434\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/f20\/365\/7d0\/f203657d096a1a988b1647a51d349bae.png\" alt=\"\u0436\u0435\u043b\u0442\u044b\u0439\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/f20\/365\/7d0\/f203657d096a1a988b1647a51d349bae.png\"\/><\/p>\n<div><figcaption>\u0436\u0435\u043b\u0442\u044b\u0439<\/figcaption><\/div>\n<\/figure>\n<h3>tube<\/h3>\n<p>\u041d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0442\u0440\u0443\u0431\u043a\u0438. \u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u0448\u0430\u0440\u043e\u043c, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>tube\/view\/view.view.tree<\/code><\/p>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0433\u043e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <code>$mol_list<\/code>, \u0442.\u043a. \u043e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439<\/p>\n<ul>\n<li>\n<p>\u043a\u0440\u044b\u0448\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u0441\u0430\u043c\u0430 \u0442\u0440\u0443\u0431\u043a\u0430 \u0441 \u0448\u0430\u0440\u0438\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u043e\u0436\u0435 \u043d\u0430 <code>$mol_list<\/code><\/p>\n<\/li>\n<\/ul>\n<pre><code>$hype_ballsort_tube_view $mol_list tube $hype_ballsort_tube active false event * click? &lt;=> click? null rows \/ &lt;= Roof $mol_view sub \/ &lt;= roof null &lt;= Balls $mol_list style * min-height \\10rem attr * data-complete &lt;= complete false rows &lt;= balls \/ &lt;= Ball*0 $hype_ballsort_ball_view ball &lt;= ball* $hype_ballsort_ball  <\/code><\/pre>\n<ul>\n<li>\n<p><code>tube $hype_ballsort_tube<\/code> &#8212; \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0448\u0430\u0440\u0430, \u0443 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0442\u0440\u0443\u0431\u043a\u0438<\/p>\n<\/li>\n<li>\n<p><code>active false<\/code> &#8212; \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441 \u0442\u0438\u043f\u043e\u043c <code>boolean<\/code> \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p><code>event * click? &lt;=> click? null<\/code> &#8212; \u0431\u0438\u043d\u0434\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>click<\/code> \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><code>rows \/<\/code> &#8212; \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0435\u0442\u0435\u0439 \u0443 <code>$mol_list<\/code> \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>rows<\/code>, \u0430 \u043d\u0435 <code>sub<\/code> \u043a\u0430\u043a \u0443 <code>$mol_view<\/code><\/p>\n<\/li>\n<li>\n<p><code>&lt;= Roof $mol_view sub \/ &lt;= roof null<\/code> &#8212; \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>Roof<\/code> \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>$mol_view<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>roof<\/code> &#8212; \u043e\u043d\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>null<\/code>. \u041d\u043e \u043f\u0440\u0438 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0442\u0440\u0443\u0431\u043a\u0438 <code>roof<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c view-\u043a\u0443 \u0448\u0430\u0440\u0430<\/p>\n<\/li>\n<li>\n<p><code>&lt;= Balls $mol_list<\/code> &#8212; \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>Balls<\/code> \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <code>$mol_list<\/code> \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0448\u0430\u0440\u044b \u0432 \u0442\u0440\u0443\u0431\u043a\u0435<\/p>\n<\/li>\n<li>\n<p><code>style * min-height \\10rem<\/code> &#8212; \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 <code>style<\/code><\/p>\n<\/li>\n<li>\n<p><code>attr * data-complete &lt;= complete false<\/code> &#8212; \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c data-\u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442<\/p>\n<\/li>\n<li>\n<p><code>rows &lt;= balls \/<\/code> &#8212; \u0443 \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Balls<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>rows<\/code> \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430 \u043d\u0430\u0448\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>balls<\/code> \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 view-\u0448\u0435\u043a \u0448\u0430\u0440\u043e\u0432<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0447\u0430\u0441\u0442\u044c \u0441\u043a\u0430\u0436\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<pre><code>&lt;= Ball*0 $hype_ballsort_ball_view ball &lt;= ball* $hype_ballsort_ball <\/code><\/pre>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>Ball<\/code> &#8212; \u044d\u0442\u043e \u0444\u0430\u0431\u0440\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435 \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c\u0441\u044f \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u043c <code>$mol_mem_key<\/code>. \u0422.\u0435. \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u044b view-\u0448\u0435\u043a \u0448\u0430\u0440\u043e\u0432 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u044d\u0442\u043e \u0440\u0443\u043a\u0430\u043c\u0438 \u0432 <code>$hype_ballsort_game<\/code>. \u041f\u043b\u044e\u0441 \u043a \u044d\u0442\u043e\u043c\u0443, \u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0430\u0441\u0442\u0430\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043c\u0435\u043d\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>ball<\/code> \u043d\u0430 \u043d\u0430\u0448\u0435.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438:<\/p>\n<pre><code class=\"typescript\">@$mol_mem_key Tube( index: number ) { const obj = new $hype_ballsort_tube obj.size = () => this.tube_size() return obj } <\/code><\/pre>\n<p>\u0410 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438\u0437 <code>view.tree<\/code> \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"typescript\">@ $mol_mem_key Ball(id: any) { const obj = new this.$.$hype_ballsort_ball_view()  obj.ball = () => this.ball(id)  return obj } <\/code><\/pre>\n<p>\u0412\u044b\u0432\u0435\u0434\u0438\u043c \u0442\u0440\u0443\u0431\u043a\u0443 \u0432 <code>app<\/code>:<\/p>\n<pre><code>$hype_ballsort_app $mol_view sub \/ &lt;= Components $mol_list rows \/ &lt;= Link $hype_ballsort_link title \\\u0421\u0441\u044b\u043b\u043a\u0430 href \\example.com target \\_blank &lt;= Button $hype_ballsort_button title \\\u041a\u043d\u043e\u043f\u043a\u0430 &lt;= Ball $hype_ballsort_ball_view &lt;= Tube $hype_ballsort_tube_view balls \/ &lt;= Ball1 $hype_ballsort_ball_view color_index 2 &lt;= Ball2 $hype_ballsort_ball_view color_index 4 &lt;= Ball3 $hype_ballsort_ball_view color_index 6 <\/code><\/pre>\n<p>\u0418 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0443 \u043d\u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>balls<\/code> \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0440\u043e\u0432. \u0410 \u0447\u0442\u043e\u0431\u044b \u0443 \u0448\u0430\u0440\u043e\u0432 \u0431\u044b\u043b\u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0448\u0430\u0440\u0430 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>color_index<\/code>. <\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/17f\/d0c\/7a0\/17fd0c7a08faef375a951e92225a75ae.png\" alt=\"\u041d\u0430 \u0442\u0440\u0443\u0431\u043a\u0443 \u043d\u0435 \u043f\u043e\u0445\u043e\u0436\u0435\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/17f\/d0c\/7a0\/17fd0c7a08faef375a951e92225a75ae.png\"\/><\/p>\n<div><figcaption>\u041d\u0430 \u0442\u0440\u0443\u0431\u043a\u0443 \u043d\u0435 \u043f\u043e\u0445\u043e\u0436\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>tube\/view\/view.view.css.ts<\/code><\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  $mol_style_define( $hype_ballsort_tube_view, {  \/\/ \u0412 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 box-sizing = content-box \/\/ \u0430 \u0443 $mol_view \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0441\u0442\u043e\u0438\u0442 border-box \/\/ \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u0435\u043d\u044f\u0435\u043c boxSizing: 'content-box', width: 'fit-content',  Roof: { boxSizing: 'content-box', height: '3rem', alignItems: 'center', justifyContent: 'center', border: { bottom: { style: 'solid', color: 'lightgray', }, }, },  Balls: { boxSizing: 'content-box', width: '3rem', flex: { direction: 'column-reverse', }, justifyContent: 'flex-start', alignItems: 'center',  border: { width: '2px', style: 'solid', color: 'lightgray', },  padding: { bottom: '0.4rem', top: '0.4rem', },  borderRadius: '0 0 2.4rem 2.4rem',  '@': { 'data-complete': { true: { \/\/ \u041a\u043e\u0433\u0434\u0430 data-complete=true backgroundColor: 'lightgray', }, }, }, },  } )  } <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/154\/e1e\/ce4\/154e1ece4fade77c94b420fa786ae098.png\" alt=\"\u0422\u0435\u043f\u0435\u0440\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/154\/e1e\/ce4\/154e1ece4fade77c94b420fa786ae098.png\"\/><\/p>\n<div><figcaption>\u0422\u0435\u043f\u0435\u0440\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 $hype_ballsort_app \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0440\u0443\u0431\u043a\u0435 \u0448\u0430\u0440 \u043d\u0430 \u043a\u0440\u044b\u0448\u043a\u0443:<\/p>\n<pre><code>- ... &lt;= Tube $hype_ballsort_tube_view balls \/ &lt;= Ball1 $hype_ballsort_ball_view color_index 2 &lt;= Ball2 $hype_ballsort_ball_view color_index 4 &lt;= Ball3 $hype_ballsort_ball_view color_index 6 roof &lt;= Ball4 $hype_ballsort_ball_view color_index 8 <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/09d\/96d\/50c\/09d96d50c8d11e715a8d4bed32242889.png\" alt=\"\u0428\u0430\u0440 \u043d\u0430 \u043a\u0440\u044b\u0448\u043a\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/09d\/96d\/50c\/09d96d50c8d11e715a8d4bed32242889.png\"\/><\/p>\n<div><figcaption>\u0428\u0430\u0440 \u043d\u0430 \u043a\u0440\u044b\u0448\u043a\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>tube\/view\/view.view.ts<\/code><\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  export class $hype_ballsort_tube_view extends $.$hype_ballsort_tube_view {  \/\/ \u0428\u0430\u0440 \u043d\u0430 \u043a\u0440\u044b\u0448\u043a\u0435 @ $mol_mem roof() { \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0448\u0430\u0440\u0430, \u043d\u0430\u043f\u043e\u043c\u043d\u044e \u0447\u0442\u043e this.tube() \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u0442\u0440\u0443\u0431\u043a\u0438 \/\/ \u0427\u0435\u0440\u0435\u0437 \u0444\u0430\u0431\u0440\u0438\u043a\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0448\u0430\u0440\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \/\/ \u0418\u043b\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c null const index = this.tube().balls().length - 1 return this.active() ? this.Ball( index ) : null }  \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0448\u0430\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0440\u0443\u0431\u043a\u0435 @ $mol_mem balls() { \/\/ \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0442\u0440\u0443\u0431\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0448\u0430\u0440\u043e\u0432 const last_ball = this.tube().balls().at(-1) const list = this.active() ? [last_ball] : this.tube().balls()  \/\/ \u041f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0448\u0430\u0440\u043e\u0432 return list.map((_, index) => this.Ball(index)) }  \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0448\u0430\u0440\u0430 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 ball(index: number) { return this.tube().balls()[index] }  \/\/ \u0412\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c \u0438\u0437 \u0442\u0440\u0443\u0431\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0433\u043e\u0442\u043e\u0432\u043e complete() { return this.tube().complete() }  }  } <\/code><\/pre>\n<h3>title<\/h3>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430. <\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/17a\/2e8\/764\/17a2e8764f7bceb62fb219d744e6aa0a.png\" alt=\"\u0421\u0430\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/17a\/2e8\/764\/17a2e8764f7bceb62fb219d744e6aa0a.png\"\/><\/p>\n<div><figcaption>\u0421\u0430\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u043a\u0430\u043a \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 <code>app.view.tree<\/code><\/p>\n<pre><code>$hype_ballsort_app $mol_view sub \/ &lt;= Components $mol_list rows \/ - ... &lt;= Title $mol_view dom_name \\h2 sub \/ &lt;= Title_begin $mol_view sub \/ \\BALL &lt;= Title_end $mol_view sub \/ \\SORT  <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/3b9\/51a\/b7f\/3b951ab7fcb9d518bf2960d00185ae71.png\" alt=\"\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/3b9\/51a\/b7f\/3b951ab7fcb9d518bf2960d00185ae71.png\"\/><\/p>\n<div><figcaption>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u043c\u0443 \u0441\u0442\u0438\u043b\u0435\u0439, \u0441\u043e\u0437\u0434\u0430\u0442\u0439\u0435 \u0444\u0430\u0439\u043b <code>app.view.css.ts<\/code><\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  $mol_style_define( $hype_ballsort_app, {  Title: { font: { size: '3rem', weight: 300, }, },  Title_begin: { textDecoration: 'underline', },  } )  }  <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/1cc\/263\/6e7\/1cc2636e7237388b8950dd64dd352bd5.png\" alt=\"\u0423\u0436\u0435 \u043f\u043e\u0445\u043e\u0436\u0435\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/1cc\/263\/6e7\/1cc2636e7237388b8950dd64dd352bd5.png\"\/><\/p>\n<div><figcaption>\u0423\u0436\u0435 \u043f\u043e\u0445\u043e\u0436\u0435<\/figcaption><\/div>\n<\/figure>\n<h3>app<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u044b, \u0443\u0434\u0430\u043b\u0438\u043c \u043b\u0438\u0448\u043d\u0435\u0435 \u0438\u0437 <code>app.view.tree<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n<pre><code>$hype_ballsort_app $mol_view game $hype_ballsort_game title \\BALL SORT Title $mol_view dom_name \\h2 sub \/ &lt;= Title_begin $mol_view sub \/ \\BALL &lt;= Title_end $mol_view sub \/ \\SORT sub \/ &lt;= Start_page $mol_list &lt;= Game_page $mol_list &lt;= Finish_page $mol_list <\/code><\/pre>\n<ul>\n<li>\n<p><code>game $hype_ballsort_game<\/code> &#8212; \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>game<\/code> \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0438\u0433\u0440\u044b<\/p>\n<\/li>\n<li>\n<p><code>title \\BALL SORT<\/code> &#8212; \u0442\u043e \u0447\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438<\/p>\n<\/li>\n<li>\n<p><code>Start_page<\/code>, <code>Game_page<\/code>, <code>Finish_page<\/code> \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446<\/p>\n<\/li>\n<\/ul>\n<h4>Start_page<\/h4>\n<p>\u0418 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u043e\u0444\u043e\u0440\u043c\u0438\u043c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d:<\/p>\n<pre><code>- ... sub \/ &lt;= Start_page $mol_list rows \/ &lt;= Title &lt;= Start $hype_ballsort_button title \\Start game click? &lt;=> start? null &lt;= Links $mol_view sub \/ &lt;= Sources $hype_ballsort_link title \\Source Code href \\https:\/\/github.com\/PavelZubkov\/ballsort target \\_blank &lt;= Game_page $mol_list &lt;= Finish_page $mol_list <\/code><\/pre>\n<ul>\n<li>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0443 \u043d\u0430\u0441 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f <code>Title<\/code><\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0442\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0430 \u0441\u0442\u0430\u0440\u0442\u0430 \u0438\u0433\u0440\u044b <code>Start<\/code>, \u043a\u043b\u0438\u043a \u043f\u043e \u043d\u0435\u0439 \u0431\u0438\u043d\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>start<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0436\u0435<\/p>\n<\/li>\n<li>\n<p>\u0418 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0431\u043b\u043e\u043a \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>Links<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 <\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/3df\/ec4\/43b\/3dfec443b4d3c0e4512808576963ed41.png\" alt=\"\u041f\u043e\u0447\u0442\u0438 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/3df\/ec4\/43b\/3dfec443b4d3c0e4512808576963ed41.png\"\/><\/p>\n<div><figcaption>\u041f\u043e\u0447\u0442\u0438 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432 <code>app.view.css.ts<\/code>, \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u0449\u0443 \u0438\u0445 \u0438\u0437 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  $mol_style_define( $hype_ballsort_app, {  fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol', color: '#e1e1e1', lineHeight: 'normal',  padding: { top: '1rem', },  justifyContent: 'center',  background: { color: '#101526', },  \/\/ Title, Title_begin ...  Links: { padding: { top: '1rem', }, justifyContent: 'center', flex: { wrap: 'wrap', }, },  Start_page: { alignItems: 'center', },  } )  } <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/5f8\/a52\/f3d\/5f8a52f3de6101ab34b8ab8762e52448.png\" alt=\"\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/5f8\/a52\/f3d\/5f8a52f3de6101ab34b8ab8762e52448.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/figcaption><\/div>\n<\/figure>\n<h4>Game_page<\/h4>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u0433\u0440\u044b. \u041e\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0442\u0440\u0435\u0445 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432<\/p>\n<ul>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f + \u0432\u044b\u0432\u043e\u0434 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0448\u0430\u0433\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0422\u0440\u0443\u0431\u043a\u0438 \u0441 \u0448\u0430\u0440\u0438\u043a\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435 \u0436\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0447\u0442\u043e \u0438 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0442\u0430\u043a\u043e\u0435:<\/p>\n<pre><code>Game_page Control Home - \u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d Restart - \u043a\u043d\u043e\u043f\u043a\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438\u0433\u0440\u044b Move - \u0447\u0438\u0441\u043b\u043e \u0441 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0448\u0430\u0433\u043e\u0432 Tubes - \u0442\u0440\u0443\u0431\u043a\u0438 \u0441 \u0448\u0430\u0440\u0438\u043a\u0430\u043c\u0438 Links - \u0441\u0441\u044b\u043b\u043a\u0430 <\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u0442\u043e \u0432 <code>app.view.tree<\/code><\/p>\n<pre><code>$hype_ballsort_app $mol_view - ... sub \/ &lt;= Start_page $mol_list - ... &lt;= Game_page $mol_list rows \/ &lt;= Control $mol_view sub \/ &lt;= Home $hype_ballsort_button title \\\u2190 click? &lt;=> home? null &lt;= Restart $hype_ballsort_button title \\Restart  click? &lt;=> start? &lt;= Tubes $mol_view &lt;= Links &lt;= Finish_page $mol_list <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/002\/c12\/895\/002c128958db363aa6e223436dea60a1.png\" alt=\"\u0414\u0432\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u043e\u0434\u043d\u043e\u043c\u0435\u0440\u0432\u0435\u043d\u043d\u043e\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/002\/c12\/895\/002c128958db363aa6e223436dea60a1.png\"\/><\/p>\n<div><figcaption>\u0414\u0432\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u043e\u0434\u043d\u043e\u043c\u0435\u0440\u0432\u0435\u043d\u043d\u043e<\/figcaption><\/div>\n<\/figure>\n<h3>\u041a\u0430\u043a \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430 \u0438\u0433\u0440\u0430 \u0438\u043b\u0438 \u043d\u0435\u0442?<\/h3>\n<p>\u0412\u043e view.tree \u0443 \u043d\u0430\u0441 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e game, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0438\u0433\u0440\u044b. \u0412\u043e view.ts \u043c\u044b \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c <code>null<\/code>. \u041b\u043e\u0433\u0438\u043a\u0430 \u0442\u0430\u043a\u0430\u044f:<\/p>\n<ul>\n<li>\n<p><code>game<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c <code>null<\/code> &#8212; \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d<\/p>\n<\/li>\n<li>\n<p><code>game<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0438\u0433\u0440\u044b &#8212; \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u043a\u0440\u0430\u043d \u0438\u0433\u0440\u044b<\/p>\n<\/li>\n<li>\n<p>\u041a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0430\u043c \u0441\u0442\u0430\u0440\u0442 \u0438 \u0440\u0435\u0441\u0442\u0430\u0440\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>game<\/code> \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0438\u0433\u0440\u044b<\/p>\n<\/li>\n<li>\n<p>\u041a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u043d\u0430\u0437\u0430\u0434 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c <code>null<\/code> \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>game<\/code><\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0447\u0442\u043e \u0438\u0433\u0440\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430, \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u0438\u0433\u0440\u044b \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>finish<\/code> \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u0430\u043a \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u044b?<\/h3>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435 \u0442\u0440\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u044b \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>sub<\/code>. \u0412\u043e view.ts \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>sub<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0432 \u043e\u0434\u0438\u043d \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d, \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>app.view.ts<\/code>, \u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043f\u0440\u043e \u0441\u043d\u0438\u043f\u0435\u0442\u044b \u0432 VSCode, \u0442\u0443\u0442 \u043d\u0443\u0436\u0435\u043d \u0441\u043d\u0438\u043f\u0435\u0442 <code>logic<\/code>.<\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  export class $hype_ballsort_app extends $.$hype_ballsort_app {  \/\/ \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e game \/\/ \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0435 \u0438 nullable @ $mol_mem game(next?: $hype_ballsort_game | null) { return next ?? null! }  \/\/ \u041a\u043d\u043e\u043f\u043a\u0438 start \u0438 restart \u0437\u0430\u0431\u0438\u043d\u0434\u0435\u043d\u044b \u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e start \/\/ \u0422\u0443\u0442 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0438\u0433\u0440\u044b \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e game @ $mol_action start() { this.game( new $hype_ballsort_game ) }  \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u0437\u0430\u0431\u0438\u043d\u0434\u0435\u043d\u0430 \u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e `home` \/\/ \u0422\u0443\u0442 \u043c\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c null \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e game  @ $mol_action home() { this.game(null) }  \/\/ \u0414\u0435\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 $mol_view \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 sub \/\/ \u0422\u0443\u0442 \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0433\u0440\u044b @ $mol_mem sub() { if (!this.game()) return [ this.Start_page() ] return [ this.game().finished() === false ? this.Game_page() : this.Finish_page() ] }  }  } <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/a45\/45a\/adc\/a4545aadcadc4d43ad57973f8c8a5243.gif\" alt=\"\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/a45\/45a\/adc\/a4545aadcadc4d43ad57973f8c8a5243.gif\"\/><\/p>\n<div><figcaption>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438<\/figcaption><\/div>\n<\/figure>\n<h3>\u0422\u0440\u0443\u0431\u043a\u0438 \u0438 \u0448\u0430\u0440\u044b<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0448\u043b\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0440\u0443\u0431\u043a\u0438 \u0441 \u0448\u0430\u0440\u0430\u043c\u0438. \u041d\u0430\u043c \u043d\u0430\u0434\u043e \u0432\u0437\u044f\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0440\u0443\u0431\u043e\u043a \u0438\u0437 \u0438\u0433\u0440\u044b \u0438 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0435\u0433\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0432 \u043a\u0430\u0436\u0434\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0442\u0440\u0443\u0431\u043a\u0438 \u0432\u043e view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c <code>app.view.tree<\/code><\/p>\n<pre><code>$hype_ballsort_app $mol_view - ... sub \/ &lt;= Start_page $mol_list - ... &lt;= Game_page $mol_list rows \/ &lt;= Control $mol_view - ... &lt;= Tubes $mol_view sub &lt;= tubes \/ &lt;= Tube*0 $hype_ballsort_tube_view tube &lt;= tube* $hype_ballsort_tube click? &lt;=> tube_click*? null active &lt;= tube_active* false &lt;= Links &lt;= Finish_page $mol_list <\/code><\/pre>\n<p>\u0427\u0442\u043e \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442:<\/p>\n<ul>\n<li>\n<p><code>&lt;= Tubes $mol_view<\/code> &#8212; \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Tubes<\/code> \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>$mol_view<\/code> \u0438 \u043a\u043b\u0430\u0434\u0435\u043c \u0435\u0433\u043e \u0432 <code>rows \/<\/code> \u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>Game_page<\/code><\/p>\n<\/li>\n<li>\n<p><code>sub &lt;= tubes \/<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>sub<\/code> \u0443 <code>Tubes<\/code> \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>tubes<\/code> \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0435\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/p>\n<\/li>\n<li>\n<p>\u0410 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e-\u0444\u0430\u0431\u0440\u0438\u043a\u0443 <code>Tube<\/code> \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0440\u0443\u0431\u043a\u0438, \u0438 \u0442\u0443\u0442 \u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>tube<\/code>, <code>click<\/code>, <code>active<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u043e\u0434 \u0432\u044b\u0448\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0442\u0430\u043a\u043e\u0439 ts-\u043a\u043e\u0434:<\/p>\n<pre><code class=\"typescript\">@ $mol_mem Tubes() { const obj = new this.$.$mol_view() obj.sub = () => this.tubes() return obj }  tubes() { return [ this.Tube(\"0\") ] as readonly any[] } <\/code><\/pre>\n<p>\u041d\u0430\u043c \u043d\u0430\u0434\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c <code>tubes<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0431\u0440\u0430\u043b\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0440\u0443\u0431\u043e\u043a \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438\u0433\u0440\u044b \u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043b\u043e \u0432\u043e view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0440\u0443\u0431\u043a\u0438. \u0418\u0437\u043c\u0435\u043d\u0438\u043c <code>app.view.ts<\/code><\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  export class $hype_ballsort_app extends $.$hype_ballsort_app {  \/\/ ...  @ $mol_mem tubes() { return this.game().tubes().map( ( _, index ) => this.Tube( index ) ) }  }  } <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/922\/54f\/a0f\/92254fa0f6b0215f459e5b5cfa80ccb0.png\" alt=\"\u041a\u043b\u0438\u043a\u043d\u0443\u0432 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b\u0435 \u0442\u0440\u0443\u0431\u043a\u0438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/922\/54f\/a0f\/92254fa0f6b0215f459e5b5cfa80ccb0.png\"\/><\/p>\n<div><figcaption>\u041a\u043b\u0438\u043a\u043d\u0443\u0432 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b\u0435 \u0442\u0440\u0443\u0431\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <code>tube<\/code>, <code>tube_click<\/code>, <code>tube_active<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0432\u043e view.tree<\/p>\n<pre><code>tube &lt;= tube* $hype_ballsort_tube click? &lt;=> tube_click*? null active &lt;= tube_active* false <\/code><\/pre>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c <code>app.view.ts<\/code> \u0435\u0449\u0435 \u0440\u0430\u0437:<\/p>\n<pre><code>namespace $.$$ {  export class $hype_ballsort_app extends $.$hype_ballsort_app {  \/\/ ...  @ $mol_mem tubes() { return this.game().tubes().map( ( _, index ) => this.Tube( index ) ) }  \/\/ \u041f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 \u0434\u043e\u0441\u0442\u0430\u0435\u043c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u043c\u043e\u0434\u0435\u043b\u0438 \u0442\u0440\u0443\u0431\u043a\u0438 \u0438\u0437 \u0438\u0433\u0440\u044b \/\/ \u0434\u0435\u043a\u0440\u043e\u0442\u0430\u0440 \u0442\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c tube( index: number ) { return this.game().Tube(index) }  \/\/ \u041f\u043e \u043a\u043b\u0438\u043a\u0443 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c tube_click \u0432 \u0438\u0433\u0440\u0435 \/\/ \u041f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0442\u0443\u0434\u0430 \u0442\u0440\u0443\u0431\u043a\u0443 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043a\u043b\u0438\u043a\u043d\u0443\u043b\u0438 @ $mol_action tube_click( index: number ) { this.game().tube_click( this.tube(index) ) }  \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0430\u043a\u0442\u0438\u0432\u043d\u0430 \u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0442\u0440\u0443\u0431\u043a\u0430 @ $mol_mem_key tube_active( index: number ) { return this.game().tube_active() === this.tube(index)  } }  } <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/8c3\/1d2\/9d0\/8c31d29d00859ada1ea726a0c093200e.gif\" alt=\"\u0423\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0433\u0440\u0430\u0442\u044c\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/8c3\/1d2\/9d0\/8c31d29d00859ada1ea726a0c093200e.gif\"\/><\/p>\n<div><figcaption>\u0423\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0433\u0440\u0430\u0442\u044c<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0448\u0430\u0433\u043e\u0432. \u0418\u0437\u043c\u0435\u043d\u0438\u043c <code>app.view.tree<\/code><\/p>\n<pre><code>$hype_ballsort_app $mol_view - ... sub \/ &lt;= Start_page $mol_list - ... &lt;= Game_page $mol_list rows \/ &lt;= Control $mol_view sub \/ &lt;= Home $hype_ballsort_button title \\\u2190 click? &lt;=> home? null &lt;= Restart $hype_ballsort_button title \\Restart  click? &lt;=> start? - \u0422\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u043c Moves &lt;= Moves $mol_view sub \/ &lt;= moves \\Moves: {count} - ... &lt;= Finish_page $mol_list <\/code><\/pre>\n<p>\u0410 \u0432\u043e view.ts \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>moves<\/code> &#8212; <code>moves \\Moves: {count}<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u043b\u043e <code>{count}<\/code> \u043d\u0430 \u0447\u0438\u0441\u043b\u043e \u0448\u0430\u0433\u043e\u0432<\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  export class $hype_ballsort_app extends $.$hype_ballsort_app {  \/\/ ...  @ $mol_mem moves() { return super.moves().replace( '{count}', `${ this.game().moves() }` ) } }  } <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/573\/b10\/c44\/573b10c443d0cdbdddef35263eb4bcaf.png\" alt=\"\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0448\u0430\u0433\u043e\u0432\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/573\/b10\/c44\/573b10c443d0cdbdddef35263eb4bcaf.png\"\/><\/p>\n<div><figcaption>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0448\u0430\u0433\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<p>\u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 <code>app.view.css.ts<\/code><\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  $mol_style_define( $hype_ballsort_app, {  \/\/ ...  Moves: { padding: ['0.6rem', '0.4rem'], fontSize: '1.3rem', },  Tubes: { justifyContent: 'center', },  Control: { justifyContent: 'center', },  Tube: { margin: '1rem', },  } )  } <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/39b\/afd\/0fb\/39bafd0fb0e660d39190ccbce8495701.png\" alt=\"\u042d\u043a\u0440\u0430\u043d \u0438\u0433\u0440\u044b\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/39b\/afd\/0fb\/39bafd0fb0e660d39190ccbce8495701.png\"\/><\/p>\n<div><figcaption>\u042d\u043a\u0440\u0430\u043d \u0438\u0433\u0440\u044b<\/figcaption><\/div>\n<\/figure>\n<h4>Finish_page<\/h4>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u043a\u0440\u0430\u043d \u0444\u0438\u043d\u0438\u0448\u0430. \u0418\u0437\u043c\u0435\u043d\u0438\u043c <code>app.view.tree<\/code>:<\/p>\n<pre><code>$hype_ballsort_app $mol_view - ... sub \/ - ... &lt;= Finish_page $mol_list rows \/ &lt;= Control &lt;= Tubes &lt;= Links &lt;= Finish $mol_list rows \/ &lt;= Finish_title $mol_view dom_name \\h1 sub \/ \\You won! &lt;= Finish_moves $mol_view dom_name \\h2 sub \/ \\In 16 moves &lt;= Finish_home $hype_ballsort_button title \\New game click? &lt;=> home? <\/code><\/pre>\n<p>\u0424\u0438\u043d\u0438\u0448\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438\u0433\u0440\u044b. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u043c <code>Control<\/code>, <code>Tubes<\/code>, <code>Links<\/code> \u0438 \u043f\u043e\u0441\u043b\u0435 \u0444\u0438\u043d\u0438\u0448\u043d\u044b\u0435 \u043d\u0430\u0434\u043f\u0438\u0441\u0438 \u0438 \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0432 <code>app.view.css.ts<\/code><\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  $mol_style_define( $hype_ballsort_app, {  Finish: { position: 'fixed', bottom: 0, top: 0, left: 0, right: 0, background: { color: $mol_style_func.rgba(255, 255, 255, 0.6), }, backdropFilter: $mol_style_func.blur('6px'), alignItems: 'center', paddingTop: '5rem', },  Finish_title: { color: 'black', textShadow: '0 0 2px white', },  Finish_moves: { color: 'black', textShadow: '0 0 2px white', margin: { top: '1rem', }, },  Finish_home: { margin: { top: '1rem', }, },  } )  }  <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/213\/d96\/542\/213d965422b6bb93f126a312ec9ff452.png\" alt=\"\u042d\u043a\u0440\u0430\u043d \u0444\u0438\u043d\u0438\u0448\u0430\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/213\/d96\/542\/213d965422b6bb93f126a312ec9ff452.png\"\/><\/p>\n<div><figcaption>\u042d\u043a\u0440\u0430\u043d \u0444\u0438\u043d\u0438\u0448\u0430<\/figcaption><\/div>\n<\/figure>\n<h3>\u0422\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0442\u0435\u0441\u0442, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u0441\u044f, \u0447\u0442\u043e \u044d\u043a\u0440\u0430\u043d\u044b \u0443 \u043d\u0430\u0441 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>app.view.test.ts<\/code><\/p>\n<pre><code class=\"typescript\">namespace $.$$ { $mol_test({  \"Screan changing\"() { const app = new $hype_ballsort_app  \/\/ \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d $mol_assert_like(app.sub(), [app.Start_page()])  \/\/ \u041a\u043b\u0438\u043a\u0430\u0435\u043c \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u0441\u0442\u0430\u0440\u0442\u0430 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0440\u0430\u043d \u0438\u0433\u0440\u044b app.start() $mol_assert_like(app.sub(), [app.Game_page()])  \/\/ \u0412\u044b\u0438\u0433\u0440\u0430\u0435\u043c \u0438\u0433\u0440\u0443, \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432\u0441\u0435\u043c \u0448\u0430\u0440\u0430\u043c \u043e\u0434\u0438\u043d \u0446\u0432\u0435\u0442 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u044d\u043a\u0440\u0430\u043d app.game().balls().forEach(obj => obj.color(0)) $mol_assert_like(app.sub(), [app.Finish_page()]) },  }) } <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/352\/daa\/e6c\/352daae6c28e4d66e63b38e1daf6af56.png\" alt=\"\u0421\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0432 \u043f\u043e\u0438\u0441\u043a\u0435 \u0443\u043f\u0430\u0432\u0448\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/352\/daa\/e6c\/352daae6c28e4d66e63b38e1daf6af56.png\"\/><\/p>\n<div><figcaption>\u0421\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0432 \u043f\u043e\u0438\u0441\u043a\u0435 \u0443\u043f\u0430\u0432\u0448\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0442\u0435\u0441\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0441\u043b\u043e\u043c\u0430\u0432 \u0435\u0433\u043e, \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 <code>Finish_page<\/code> \u043d\u0430 <code>Game_page<\/code> \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0430\u0441\u0441\u0435\u0440\u0442\u0435.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/6d6\/264\/14f\/6d626414fecd3c28929298fa02064ac3.png\" alt=\"\u0422\u0435\u0441\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/6d6\/264\/14f\/6d626414fecd3c28929298fa02064ac3.png\"\/><\/p>\n<div><figcaption>\u0422\u0435\u0441\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p>\u041f\u043e\u043b\u043d\u044b\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/github.com\/PavelZubkov\/ballsort\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a><\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <a href=\"https:\/\/pavelzubkov.github.io\/ballsort\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e \u0432\u0441\u0435\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0434\u0442\u0438 <a href=\"https:\/\/t.me\/h_y_o_o\/2\" rel=\"noopener noreferrer nofollow\">\u0441\u044e\u0434\u0430<\/a>.<\/p>\n<p><a href=\"https:\/\/page.hyoo.ru\/#!=z7q5o6_3k0ago\" rel=\"noopener noreferrer nofollow\">\u0410\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u043d\u0430 $hyoo_page<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/741256\/\"> https:\/\/habr.com\/ru\/articles\/741256\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 $mol <a href=\"https:\/\/ballsort.sova.dev\/\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e\u0439<\/a> \u0434\u0435\u043c\u043a\u0438. \u041a\u0442\u043e \u043d\u0435 \u0447\u0438\u0442\u0430\u043b \u043f\u0435\u0440\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0435\u0439 <a href=\"https:\/\/habr.com\/ru\/articles\/741040\" rel=\"noopener noreferrer nofollow\">BALLSORT \u043d\u0430 $mol. \u0427\u0430\u0441\u0442\u044c 1<\/a><\/p>\n<h2>\u041d\u0430\u043f\u043e\u043c\u043d\u044e \u0437\u0430\u0434\u0430\u0447\u0443<\/h2>\n<figure class=\"\">\n<div><figcaption>gif<\/figcaption><\/div>\n<\/figure>\n<h3>\u042d\u043a\u0440\u0430\u043d\u044b<\/h3>\n<ul>\n<li>\n<p>Start &#8212; \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438\u0433\u0440\u044b, \u0438 \u043f\u043e\u0434\u0432\u0430\u043b \u0441 c\u0441\u044b\u043b\u043a\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>Game &#8212; \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0440\u0430\u043d \u0441 \u0438\u0433\u0440\u043e\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0440\u0438\u043a\u0438. \u0412 \u0445\u0435\u0434\u0435\u0440\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0438 \u0440\u0435\u0441\u0442\u0430\u0440\u0442\u0430 \u0438\u0433\u0440\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0447\u0438\u0441\u043b\u0430 \u0441\u0434\u0435\u043b\u0430y\u043d\u044b\u0445 \u0448\u0430\u0433\u043e\u0432. \u0412 \u0446\u0435\u043d\u0442\u0440\u0435 \u0442\u0440\u0443\u0431\u043a\u0438 \u0441 \u0448\u0430\u0440\u0430\u043c\u0438. \u0412 \u043f\u043e\u0434\u0432\u0430\u043b\u0435 \u0442\u0435 \u0436\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0447\u0442\u043e \u0438 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<\/li>\n<li>\n<p>Finish &#8212; \u043a\u043e\u0433\u0434\u0430 \u0448\u0430\u0440\u0438\u043a\u0438 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u043f\u043e\u0432\u0435\u0440\u0445 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0435\u0442\u0438\u0439 \u044d\u043a\u0440\u0430\u043d. \u041d\u0430 \u043d\u0435\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a &#171;You won!&#187;, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0445 \u0448\u0430\u0433\u043e\u0432, \u0438 \u043a\u043d\u043e\u043f\u043a\u0430 &#171;New game&#187; \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0438\u0433\u0440\u044b<\/h3>\n<ol>\n<li>\n<p>\u0420\u0438\u0441\u0443\u044e\u0442\u0441\u044f 6 \u0442\u0440\u0443\u0431\u043e\u043a, \u0447\u0435\u0442\u044b\u0440\u0435 \u0438 \u043d\u0438\u0445 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0448\u0430\u0440\u0430\u043c\u0438 \u0438 \u0434\u0432\u0435 \u043f\u0443\u0441\u0442\u044b\u0435<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0442\u0440\u0443\u0431\u043a\u0430\u0445 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u043e 4 \u0448\u0430\u0440\u0430, \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043d\u0435\u043f\u0443\u0441\u0442\u0443\u044e \u0442\u0440\u0443\u0431\u043a\u0443, \u043e\u043d\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <\/p>\n<ul>\n<li>\n<p>\u0412 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0448\u0430\u0440 \u0432 \u0442\u0440\u0443\u0431\u043a\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043d\u0430 \u0435\u0435 \u043a\u0440\u044b\u0448\u043a\u0443<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u043a\u043b\u0438\u043a \u043f\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0435 \u0434\u0435\u0437\u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442 \u0435\u0435, \u0448\u0430\u0440 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u043d\u0435\u0435<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0442\u0440\u0443\u0431\u043a\u0438, \u043a\u043b\u0438\u043a \u043f\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442 \u0448\u0430\u0440 \u0441 \u043a\u0440\u044b\u0448\u043a\u0438 \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u0442\u0440\u0443\u0431\u043a\u0443 \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438, \u0447\u0442\u043e \u0434\u0440\u0443\u0433\u0430\u044f \u0442\u0440\u0443\u0431\u043a\u0430 \u043f\u0443\u0441\u0442\u0430 \u0438\u043b\u0438 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0448\u0430\u0440 \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0436\u0435 \u0446\u0432\u0435\u0442\u0430 \u043a\u0430\u043a \u0448\u0430\u0440 \u043d\u0430 \u043a\u0440\u044b\u0448\u043a\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0435<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u0440\u0443\u0431\u043e\u043a \u0432\u0441\u0435 4 \u0448\u0430\u0440\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u043e\u043d\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u0442\u0430\u0442\u0443\u0441 \u0433\u043e\u0442\u043e\u0432\u043e, \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0440\u044b \u0432 \u043d\u0435\u0435\/\u0438\u0437 \u043d\u0435\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0433\u0440\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 4 \u0442\u0440\u0443\u0431\u043a\u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0443\u0442 \u0432 \u0441\u0442\u0430\u0442\u0443\u0441 \u0433\u043e\u0442\u043e\u0432\u043e.<\/p>\n<\/li>\n<\/ol>\n<h2>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0428\u0430\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u0422\u0440\u0443\u0431\u043a\u0438<\/p>\n<\/li>\n<\/ul>\n<p>\u0410 \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0432\u0441\u0435 \u0432 \u043c\u043e\u0434\u0443\u043b\u0435 <code>app<\/code>.<\/p>\n<h3>link<\/h3>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>ballsort\/link<\/code> \u0438 \u0444\u0430\u0439\u043b \u0432 \u043d\u0435\u0439 <code>link.view.tree<\/code>.<\/p>\n<pre><code>$hype_ballsort_link $mol_view dom_name \\a attr * href &lt;= href \\ target &lt;= target \\_self sub \/ &lt;= title \\ <\/code><\/pre>\n<blockquote>\n<p>view.tree &#8212; \u044d\u0442\u043e DSL, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c\u0438 \u0442\u0440\u0443\u0434\u0430\u043c\u0438: <a href=\"https:\/\/mol.hyoo.ru\/#!section=docs\/=rv38hh_h1cjhz\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/a>, <a href=\"https:\/\/mol.hyoo.ru\/#!section=docs\/=vv2nig_s5zr0f\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/a><\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0432\u044b \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u0441 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u043c\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u0432\u044b\u0448\u0435 \u0432\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u043a\u043b\u0430\u0441\u0441 <code>$hype_ballsort_link<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>$mol_view<\/code>. \u0418\u043c\u044f \u0442\u0435\u0433\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u043d\u0430 <code>a<\/code>, \u0443 dom-\u043d\u043e\u0434\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0434\u0432\u0430 \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>href<\/code> \u0438 <code>target<\/code> \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0431\u0438\u043d\u0434\u0435\u043d\u044b \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0431\u0435\u043d\u043a\u0430 dom-\u043d\u043e\u0434\u044b \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>title<\/code>.<\/p>\n<p>\u041e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 <code>http:\/\/127.0.0.1:9080\/hype\/ballsort\/app\/-\/test.html<\/code> &#8212; \u044d\u0442\u043e \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0444\u0430\u0439\u043b <code>index.html<\/code>. \u041d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>\u041e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>app\/app.view.tree<\/code><\/p>\n<pre><code>$hype_ballsort_app $mol_view sub \/ &lt;= Components $mol_list rows \/ &lt;= Link $hype_ballsort_link title \\\u0421\u0441\u044b\u043b\u043a\u0430 href \\example.com target \\_blank <\/code><\/pre>\n<blockquote>\n<p><a href=\"https:\/\/github.com\/hyoo-ru\/mam_mol\/tree\/master\/list\" rel=\"noopener noreferrer nofollow\">$mol_list<\/a> &#8212; \u044d\u0442\u043e view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u043c\u043e\u043b\u0430, \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430, \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0438\u043c.<\/p>\n<\/blockquote>\n<p>\u0417\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440: <\/p>\n<figure class=\"\">\n<div><figcaption>\u0441\u0441\u044b\u043b\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0438\u043b\u0435\u0439, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432 <code>link<\/code> \u0444\u0430\u0439\u043b <code>link.view.css.ts<\/code><\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  $mol_style_define( $hype_ballsort_link, {  color: 'lightgray', padding: ['0.25rem', '1rem'],  } )  } <\/code><\/pre>\n<blockquote>\n<p>\u041f\u0440\u043e <code>css.ts<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0442\u0443\u0442: <a href=\"https:\/\/mol.hyoo.ru\/#!section=docs\/=7fbqy9_ojho3i\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/a>, <a href=\"https:\/\/mol.hyoo.ru\/#!section=docs\/=xwq9q5_f966fg\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 CSS-in-TS<\/a>, <a href=\"https:\/\/github.com\/hyoo-ru\/mam_mol\/blob\/master\/style\/readme.md\" rel=\"noopener noreferrer nofollow\">$mol_style readme.md<\/a><\/p>\n<\/blockquote>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0441\u044b\u043b\u043a\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<h3>button<\/h3>\n<p>\u041f\u0440\u043e\u0434\u0435\u043b\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<p>\u0424\u0430\u0439\u043b <code>ballsort\/button\/button.view.tree<\/code>:<\/p>\n<pre><code>$hype_ballsort_button $mol_view dom_name \\button sub \/ &lt;= title \\ event * click? &lt;=> click? null <\/code><\/pre>\n<p>\u0412\u044b\u0432\u043e\u0434\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 <code>app<\/code>:<\/p>\n<pre><code>$hype_ballsort_app $mol_view sub \/ &lt;= Components $mol_list rows \/ &lt;= Link $hypr_ballsort_link title \\\u0421\u0441\u044b\u043b\u043a\u0430 href \\example.com target \\_blank &lt;= Button $hype_ballsort_button title \\\u041a\u043d\u043e\u043f\u043a\u0430 <\/code><\/pre>\n<p>\u0423\u0431\u0435\u0436\u0434\u0430\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u043f\u043e\u0434\u0442\u044f\u043d\u0443\u043b\u0430\u0441\u044c: <\/p>\n<figure class=\"\">\n<div><figcaption>\u041a\u043d\u043e\u043f\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>button.view.css.ts<\/code>:<\/p>\n<pre><code>namespace $.$$ {  $mol_style_define( $hype_ballsort_button, {  width: 'fit-content', backgroundColor: 'white', color: 'black', padding: ['0.6rem', '1rem'], fontSize: '1.3rem', margin: [0, '0.2rem'], border: { width: '2px', style: 'solid', color: 'lightgray', }, cursor: 'pointer', position: 'relative',  ':hover': { backgroundColor: '#f1f1f1', },  ':focus': { outline: 'none', boxShadow: '0 0 0 4px lightblue', borderColor: 'lightblue', },  } )  } <\/code><\/pre>\n<figure class=\"\">\n<div><figcaption>\u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438<\/figcaption><\/div>\n<\/figure>\n<h3>ball<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0448\u0430\u0440\u0430. \u0418\u043c\u044f <code>$hype_ballsort_ball<\/code> \u0443\u0436\u0435 \u0437\u0430\u043d\u044f\u0442\u043e \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u043c\u043e\u0434\u0435\u043b\u0438, view-\u0448\u043a\u0443 \u0448\u0430\u0440\u0430 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 <code>$hype_ballsort_ball_view<\/code>.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>ballsort\/ball\/view\/view.view.tree<\/code><\/p>\n<blockquote>\n<p>\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0432\u043e view.tree \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441\u043e \u0437\u043d\u0430\u043a\u0430 \u043c\u0438\u043d\u0443\u0441<\/p>\n<\/blockquote>\n<pre><code>$hype_ballsort_ball_view $mol_view - \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0448\u0430\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u0448\u0430\u0440\u0430, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d \u0434\u043e\u0441\u0442\u0430\u0435\u0442 \u0446\u0432\u0435\u0442 ball $hype_ballsort_ball - \u0414\u043b\u044f \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u043a\u0438 \u0448\u0430\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 style * --main-color &lt;= color_main \\ --light-color &lt;= color_light \\ - \u0426\u0432\u0435\u0442\u0430 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u044b \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435, \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u043a\u0430\u043a \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 - \u0412\u0441\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e 12 \u0446\u0432\u0435\u0442\u043e\u0432, \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u043e\u0442 0 \u0434\u043e 11 - \u0446\u0432\u0435\u0442 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 0 - \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 - color_main - \u0446\u0432\u0435\u0442 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 0 + 1 - \u0432\u0442\u043e\u0440\u043e\u0439 \u0446\u0432\u0435\u0442 - color_light colors \/ \\#8F7E22 \\#FFE600 \\#247516 \\#70FF00 \\#466799 \\#00B2FF \\#29777C \\#00FFF0 \\#17206F \\#4A72FF \\#BABABA \\#FFFFFF \\#4C3283 \\#9D50FF \\#8B11C5 \\#FF00F5 \\#9D0D41 \\#FF60B5 \\#4B0000 \\#FF0000 \\#79480F \\#FF7A00 \\#343434 \\#B1B1B1 <\/code><\/pre>\n<p>\u0420\u0438\u0441\u0443\u0435\u043c \u0448\u0430\u0440 \u0432 <code>app<\/code><\/p>\n<pre><code>$hype_ballsort_app $mol_view sub \/ &lt;= Components $mol_list rows \/ &lt;= Link $hype_ballsort_link title \\\u0421\u0441\u044b\u043b\u043a\u0430 href \\example.com target \\_blank &lt;= Button $hype_ballsort_button title \\\u041a\u043d\u043e\u043f\u043a\u0430 &lt;= Ball $hype_ballsort_ball_view <\/code><\/pre>\n<p>\u0418 \u043d\u0435 \u0432\u0438\u0434\u0435\u043c \u0435\u0433\u043e, \u043d\u043e \u043e\u043d \u0435\u0441\u0442\u044c <\/p>\n<figure class=\"\">\n<div><figcaption>\u041d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u0448\u0430\u0440<\/figcaption><\/div>\n<\/figure>\n<p> \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u043c\u0443 \u0441\u0442\u0438\u043b\u0435\u0439, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>ball\/view\/view.view.css.ts<\/code> <\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  $mol_style_define( $hype_ballsort_ball_view, {  width: '2rem', height: '2rem', boxSizing: 'content-box',  border: { radius: '50%', width: '2px', style: 'solid', color: 'black', },  margin: '1px', position: 'relative', backgroundImage: 'radial-gradient(circle at 65% 15%, white 1px, var(--light-color) 3%, var(--main-color) 60%, var(--light-color) 100%)',  } )  } <\/code><\/pre>\n<figure class=\"\">\n<div><figcaption>\u0427\u0442\u043e-\u0442\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c \u0448\u0430\u0440 \u0431\u0440\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043b\u043e\u0433\u0438\u043a\u0438. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>view.view.ts<\/code>.<\/p>\n<pre><code class=\"typescript\">namespace $.$$ { export class $hype_ballsort_ball_view extends $.$hype_ballsort_ball_view {  \/\/ \u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 ball \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u043c\u043e\u0434\u0435\u043b\u0438 \u0448\u0430\u0440\u0430 \/\/ \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043e\u0441\u0442\u0430\u0435\u043c \u0446\u0432\u0435\u0442 `color()` \u0438 \u0443\u043c\u043d\u043e\u0436\u0430\u0435\u043c \u043d\u0430 2 \/\/ \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0434\u0435\u043a\u0441 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0446\u0432\u0435\u0442\u043e\u0432 color_index() { return this.ball().color() * 2 }  \/\/ \u0414\u043e\u0441\u0442\u0430\u0435\u043c \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 \u043f\u043e \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u043e\u043c\u0443 \u0438\u043d\u0434\u0435\u043a\u0441\u0443 \/\/ \u041d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u0435\u043b \u0438\u043d\u0434\u0435\u043a\u0441 \u0432\u044b\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0437\u0430 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 \/\/ \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 color_main() { return this.colors()[ this.color_index() ] ?? 'red' }  \/\/ \u0414\u043e\u0441\u0442\u0430\u0435\u043c \u0432\u0442\u043e\u0440\u043e\u0439 \u0446\u0432\u0435\u0442 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 + 1 \/\/ \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e color_light() { return this.colors()[ this.color_index() + 1 ] ?? 'white' }  } }  <\/code><\/pre>\n<p>\u0418 \u0442.\u043a. \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0441\u0442\u043e\u0438\u0442 \u0446\u0432\u0435\u0442 0, \u0432\u0438\u0434\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <\/p>\n<figure class=\"\">\n<div><figcaption>\u0436\u0435\u043b\u0442\u044b\u0439<\/figcaption><\/div>\n<\/figure>\n<h3>tube<\/h3>\n<p>\u041d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0442\u0440\u0443\u0431\u043a\u0438. \u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u0448\u0430\u0440\u043e\u043c, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>tube\/view\/view.view.tree<\/code><\/p>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0433\u043e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <code>$mol_list<\/code>, \u0442.\u043a. \u043e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439<\/p>\n<ul>\n<li>\n<p>\u043a\u0440\u044b\u0448\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u0441\u0430\u043c\u0430 \u0442\u0440\u0443\u0431\u043a\u0430 \u0441 \u0448\u0430\u0440\u0438\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u043e\u0436\u0435 \u043d\u0430 <code>$mol_list<\/code><\/p>\n<\/li>\n<\/ul>\n<pre><code>$hype_ballsort_tube_view $mol_list tube $hype_ballsort_tube active false event * click? &lt;=> click? null rows \/ &lt;= Roof $mol_view sub \/ &lt;= roof null &lt;= Balls $mol_list style * min-height \\10rem attr * data-complete &lt;= complete false rows &lt;= balls \/ &lt;= Ball*0 $hype_ballsort_ball_view ball &lt;= ball* $hype_ballsort_ball  <\/code><\/pre>\n<ul>\n<li>\n<p><code>tube $hype_ballsort_tube<\/code> &#8212; \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0448\u0430\u0440\u0430, \u0443 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0442\u0440\u0443\u0431\u043a\u0438<\/p>\n<\/li>\n<li>\n<p><code>active false<\/code> &#8212; \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441 \u0442\u0438\u043f\u043e\u043c <code>boolean<\/code> \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p><code>event * click? &lt;=> click? null<\/code> &#8212; \u0431\u0438\u043d\u0434\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>click<\/code> \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><code>rows \/<\/code> &#8212; \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0435\u0442\u0435\u0439 \u0443 <code>$mol_list<\/code> \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>rows<\/code>, \u0430 \u043d\u0435 <code>sub<\/code> \u043a\u0430\u043a \u0443 <code>$mol_view<\/code><\/p>\n<\/li>\n<li>\n<p><code>&lt;= Roof $mol_view sub \/ &lt;= roof null<\/code> &#8212; \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>Roof<\/code> \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>$mol_view<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>roof<\/code> &#8212; \u043e\u043d\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>null<\/code>. \u041d\u043e \u043f\u0440\u0438 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0442\u0440\u0443\u0431\u043a\u0438 <code>roof<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c view-\u043a\u0443 \u0448\u0430\u0440\u0430<\/p>\n<\/li>\n<li>\n<p><code>&lt;= Balls $mol_list<\/code> &#8212; \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>Balls<\/code> \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <code>$mol_list<\/code> \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0448\u0430\u0440\u044b \u0432 \u0442\u0440\u0443\u0431\u043a\u0435<\/p>\n<\/li>\n<li>\n<p><code>style * min-height \\10rem<\/code> &#8212; \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 <code>style<\/code><\/p>\n<\/li>\n<li>\n<p><code>attr * data-complete &lt;= complete false<\/code> &#8212; \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c data-\u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442<\/p>\n<\/li>\n<li>\n<p><code>rows &lt;= balls \/<\/code> &#8212; \u0443 \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Balls<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>rows<\/code> \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430 \u043d\u0430\u0448\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>balls<\/code> \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 view-\u0448\u0435\u043a \u0448\u0430\u0440\u043e\u0432<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0447\u0430\u0441\u0442\u044c \u0441\u043a\u0430\u0436\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<pre><code>&lt;= Ball*0 $hype_ballsort_ball_view ball &lt;= ball* $hype_ballsort_ball <\/code><\/pre>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>Ball<\/code> &#8212; \u044d\u0442\u043e \u0444\u0430\u0431\u0440\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435 \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c\u0441\u044f \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u043c <code>$mol_mem_key<\/code>. \u0422.\u0435. \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u044b view-\u0448\u0435\u043a \u0448\u0430\u0440\u043e\u0432 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u044d\u0442\u043e \u0440\u0443\u043a\u0430\u043c\u0438 \u0432 <code>$hype_ballsort_game<\/code>. \u041f\u043b\u044e\u0441 \u043a \u044d\u0442\u043e\u043c\u0443, \u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0430\u0441\u0442\u0430\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043c\u0435\u043d\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>ball<\/code> \u043d\u0430 \u043d\u0430\u0448\u0435.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438:<\/p>\n<pre><code class=\"typescript\">@$mol_mem_key Tube( index: number ) { const obj = new $hype_ballsort_tube obj.size = () => this.tube_size() return obj } <\/code><\/pre>\n<p>\u0410 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438\u0437 <code>view.tree<\/code> \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"typescript\">@ $mol_mem_key Ball(id: any) { const obj = new this.$.$hype_ballsort_ball_view()  obj.ball = () => this.ball(id)  return obj } <\/code><\/pre>\n<p>\u0412\u044b\u0432\u0435\u0434\u0438\u043c \u0442\u0440\u0443\u0431\u043a\u0443 \u0432 <code>app<\/code>:<\/p>\n<pre><code>$hype_ballsort_app $mol_view sub \/ &lt;= Components $mol_list rows \/ &lt;= Link $hype_ballsort_link title \\\u0421\u0441\u044b\u043b\u043a\u0430 href \\example.com target \\_blank &lt;= Button $hype_ballsort_button title \\\u041a\u043d\u043e\u043f\u043a\u0430 &lt;= Ball $hype_ballsort_ball_view &lt;= Tube $hype_ballsort_tube_view balls \/ &lt;= Ball1 $hype_ballsort_ball_view color_index 2 &lt;= Ball2 $hype_ballsort_ball_view color_index 4 &lt;= Ball3 $hype_ballsort_ball_view color_index 6 <\/code><\/pre>\n<p>\u0418 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0443 \u043d\u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>balls<\/code> \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0440\u043e\u0432. \u0410 \u0447\u0442\u043e\u0431\u044b \u0443 \u0448\u0430\u0440\u043e\u0432 \u0431\u044b\u043b\u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0448\u0430\u0440\u0430 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>color_index<\/code>. <\/p>\n<figure class=\"\">\n<div><figcaption>\u041d\u0430 \u0442\u0440\u0443\u0431\u043a\u0443 \u043d\u0435 \u043f\u043e\u0445\u043e\u0436\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>tube\/view\/view.view.css.ts<\/code><\/p>\n<pre><code class=\"typescript\">namespace $.$$ {  $mol_style_define( $hype_ballsort_tube_view, {  \/\/ \u0412 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 box-sizing = content-box \/\/ \u0430 \u0443 $mol_view \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0441\u0442\u043e\u0438\u0442 border-box \/\/ \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u0435\u043d\u044f\u0435\u043c boxSizing: 'content-box', width: 'fit-content',  Roof: { boxSizing: 'content-box', height: '3rem', alignItems: 'center', justifyContent: 'center', border: { bottom: { style: 'solid', color: 'lightgray', }, },<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-348658","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/348658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=348658"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/348658\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=348658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=348658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=348658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}