{"id":348602,"date":"2023-06-10T03:01:16","date_gmt":"2023-06-10T03:01:16","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=348602"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=348602","title":{"rendered":"<span>BALLSORT \u043d\u0430 $mol<\/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\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u043d\u0430 $mol <a href=\"https:\/\/ballsort.sova.dev\/\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u0443<\/a> \u0434\u0435\u043c\u043a\u0443 \u043f\u043e\u0447\u0442\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0441\u0442\u043e\u0432.<\/p>\n<p>\u0414\u0435\u043c\u043a\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0438\u0433\u0440\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0448\u0430\u0440\u0438\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u0442\u0440\u0443\u0431\u043a\u0430\u043c\u0438, \u0446\u0435\u043b\u044c \u0438\u0433\u0440\u044b &#8212; \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0440\u0438\u043a\u0438 \u043f\u043e \u0446\u0432\u0435\u0442\u0430\u043c \u0437\u0430 \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0448\u0430\u0433\u043e\u0432.<\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043e\u043d\u0430 \u0431\u044b\u043b\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 <a href=\"https:\/\/ballsort.sova.dev\" rel=\"noopener noreferrer nofollow\">\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0440\u0435 + react<\/a>, \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0435\u0435<\/p>\n<ul>\n<li>\n<p>\u043d\u0430 <a href=\"https:\/\/ballsort.vercel.app\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0430\u0442\u043e\u043c\u0435 + react<\/a> <a href=\"https:\/\/github.com\/faustienf\/ballsort\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a>,<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430 <a href=\"https:\/\/sdju.github.io\/ballsort-example-vue\" rel=\"noopener noreferrer nofollow\">vue<\/a> <a href=\"https:\/\/github.com\/Sdju\/ballsort-example-vue\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a><\/p>\n<\/li>\n<li>\n<p>\u0438 \u0434\u0432\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0430 \u043c\u043e\u043b\u0435 <\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/lyumih.github.io\/milis\/ballsort\/-\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u0430\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/pavelzubkov.github.io\/ballsort\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u044f<\/a>, \u043e \u043d\u0435\u0439 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0422\u0430\u043c \u0433\u0434\u0435 \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u043e\u043d\u0430 \u0435\u0441\u0442\u044c \u0432 \u0441\u0430\u043c\u043e\u0439 \u0434\u0435\u043c\u043a\u0435<\/p>\n<\/blockquote>\n<h2>\u041f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0434\u0430\u0447\u0438<\/h2>\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>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0441 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u043b\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043f\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 MAM-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/gitpod.io\/#https:\/\/github.com\/hyoo-ru\/mam\" rel=\"noopener noreferrer nofollow\">gitpod.io<\/a>, \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b. \u0418\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 NodeJS \u0434\u043e LTS \u0432\u0435\u0440\u0441\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 MAM<\/p>\n<\/li>\n<\/ol>\n<pre><code>git clone https:\/\/github.com\/hyoo-ru\/mam.git .\/mam &amp;&amp; cd mam <\/code><\/pre>\n<ol start=\"3\">\n<li>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0432\u0430\u0448\u0438\u043c \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u043c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u043c<\/p>\n<\/li>\n<\/ol>\n<pre><code>npm install <\/code><\/pre>\n<ol start=\"4\">\n<li>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f VSCode <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=EditorConfig.EditorConfig\" rel=\"noopener noreferrer nofollow\">EditorConfig<\/a> <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=nin-jin.vscode-language-tree\" rel=\"noopener noreferrer nofollow\">vscode-language-tree<\/a><\/p>\n<\/li>\n<\/ol>\n<p>MAM-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432!<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/h3>\n<ol>\n<li>\n<p>\u0418\u0434\u0435\u043c <a href=\"https:\/\/github.com\/hyoo-ru\/template\" rel=\"noopener noreferrer nofollow\">\u0441\u044e\u0434\u0430<\/a> \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;Use this template&#187; => &#171;Create a new repository&#187;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0430, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u043c\u044f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f &#171;ballsort&#187;, \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0442\u0438\u043f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u043c \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;Create repository from template&#187;<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043d\u0430\u0436\u0430\u0432 \u043d\u0430 &#171;Settings&#187;<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043b\u0435\u0432\u043e\u043c \u043c\u0435\u043d\u044e \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 &#171;Actions&#187; => &#171;General&#187;, \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;Workflow permissions&#187; \u043e\u0442\u043c\u0435\u0442\u044c\u0442\u0435 \u0447\u0435\u043a\u0431\u043e\u043a\u0441 &#171;Read and Write permissions&#187; \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 &#171;Save&#187;. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u043a\u0448\u0435\u043d \u0434\u0435\u043f\u043b\u043e\u044f \u043d\u0430 &#171;github pages&#187; \u043c\u043e\u0433 \u0437\u0430\u0434\u0435\u043f\u043b\u043e\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ol>\n<blockquote>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u044f &#171;hype&#187; \u0438 \u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043f\u043e\u0434 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441.<\/p>\n<\/blockquote>\n<ol start=\"5\">\n<li>\n<p>\u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0438 \u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>mam\/hype\/ballsort<\/code><\/p>\n<\/li>\n<\/ol>\n<pre><code>cd mam # \u0422\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0432\u0430\u0448\u0443 \u0441\u0441\u044b\u043b\u043a\u0443 git clone https:\/\/github.com\/PavelZubkov\/ballsort.git hype\/ballsort <\/code><\/pre>\n<h3>\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<ol>\n<li>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0434\u0435\u0432-\u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439<\/p>\n<\/li>\n<\/ol>\n<pre><code>yarn start <\/code><\/pre>\n<ol start=\"2\">\n<li>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 <code>http:\/\/127.0.0.1:9080<\/code><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u043f\u0438\u0441\u043e\u043a \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>mam<\/code>. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 &#171;hyoo&#187;, \u0437\u0430\u0442\u0435\u043c \u043d\u0430 &#171;ballsort&#187;, \u0437\u0430\u0442\u0435\u043c \u043d\u0430 &#171;app&#187; &#8212; \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0431\u0435\u043b\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u044d\u0442\u043e \u043e\u043a \u0442.\u043a. \u0432 <code>app<\/code> \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b <code>index.html<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>hype\/ballsort\/app\/index.html<\/code> \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0438\u043c\u044f \u043c\u043e\u0434\u0443\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>mol_view_root<\/code><\/p>\n<\/li>\n<\/ol>\n<pre><code>&lt;div mol_view_root=\"$hype_ballsort_app\">&lt;\/div> <\/code><\/pre>\n<ol start=\"5\">\n<li>\n<p>\u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code> \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>app.view.tree<\/code> \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u043d\u0438\u0436\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0435\u0433\u043e.<\/p>\n<\/li>\n<\/ol>\n<pre><code>$hype_ballsort_app $mol_view sub \/ \\Hello <\/code><\/pre>\n<ol start=\"6\">\n<li>\n<p>\u0412\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u0432\u0435\u0440\u043d\u043e \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435<\/p>\n<\/li>\n<\/ol>\n<h3>\u0414\u0435\u043f\u043b\u043e\u0439 \u043d\u0430 github<\/h3>\n<blockquote>\n<p>\u0412 <a href=\"http:\/\/readme.md\" rel=\"noopener noreferrer nofollow\">readme.md<\/a> \u0435\u0441\u0442\u044c \u0447\u0435\u043a \u043b\u0438\u0441\u0442 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/p>\n<\/blockquote>\n<ol>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>hype\/ballsort\/hyoo_template_app.yml<\/code> \u0432 <code>hype\/ballsort\/hype_ballsort_app.yml<\/code> \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0435\u0433\u043e<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0438\u043c\u044f \u043d\u0430 3 \u0441\u0442\u0440\u043e\u043a\u0435<\/p>\n<\/li>\n<\/ol>\n<pre><code>name: $hype_ballsort_app <\/code><\/pre>\n<ol start=\"3\">\n<li>\n<p>\u041d\u0430 19 \u0441\u0442\u0440\u043e\u043a\u0435 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043a\u0430\u043a\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f<\/p>\n<\/li>\n<\/ol>\n<pre><code>- uses: hyoo-ru\/mam_build@master2 with: package: 'hype\/ballsort' modules: 'app' <\/code><\/pre>\n<ol start=\"4\">\n<li>\n<p>\u0423\u0434\u0430\u043b\u0438\u0442\u0435 \u0431\u043b\u043e\u043a \u0434\u0435\u043f\u043b\u043e\u044f \u0432 NPM, \u043e\u043d \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0430 26 \u0441\u0442\u0440\u043e\u043a\u0435 \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 30 \u0441\u0442\u0440\u043e\u043a\u0435<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0431\u043b\u043e\u043a\u0435 \u0434\u0435\u043f\u043b\u043e\u044f \u043d\u0430 Github Pages \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u043f\u0443\u0442\u044c \u0434\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441 \u0431\u0430\u043d\u0434\u043b\u0430\u043c\u0438<\/p>\n<\/li>\n<\/ol>\n<pre><code>- uses: hyoo-ru\/gh-deploy@v4.4.1 if: github.ref == 'refs\/heads\/master' with: folder: 'hype\/ballsort\/app\/-' <\/code><\/pre>\n<ol start=\"6\">\n<li>\n<p>\u0421\u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u043a\u043e\u043c\u043c\u0438\u0442 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u044c\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430 github<\/p>\n<\/li>\n<li>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u0432 \u0433\u0438\u0442\u0445\u0430\u0431, \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;Actions&#187; \u0436\u0434\u0435\u043c \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c\u0441\u044f action &#171;$hyoo_ballsort_app&#187;, \u0438 \u043f\u043e\u0441\u043b\u0435 \u043d\u0435\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u044d\u043a\u0448\u0435\u043d &#171;pages build and deployment&#187;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043a\u0448\u0435\u043d \u0443\u043f\u0430\u0434\u0435\u0442, \u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c &#171;Settings&#187; => &#171;Pages&#187;, \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;Branch&#187; \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u0435\u0442\u043a\u0443 \u0434\u043b\u044f \u0434\u0435\u043f\u043b\u043e\u044f &#171;gh-pages&#187; \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;Save&#187;. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043a\u0448\u0435\u043d \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e, \u0430 \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a &#171;Pages&#187; \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c <a href=\"https:\/\/t.me\/h_y_o_o\/2\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a><\/p>\n<\/li>\n<\/ol>\n<h2>\u041c\u043e\u0434\u0435\u043b\u044c<\/h2>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0438\u0433\u0440\u044b \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0435\u0435 view-\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0430 \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u0435\u0435.<\/p>\n<p>\u042f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u0438\u0433\u0440\u0443 \u043d\u0430 \u0442\u0440\u0438 \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<ul>\n<li>\n<p>game &#8212; \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>ball &#8212; \u0448\u0430\u0440, \u0442\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0448\u0430\u0440\u043e\u043c<\/p>\n<\/li>\n<li>\n<p>tube &#8212; \u043b\u043e\u0433\u0438\u043a\u0430 \u0442\u0440\u0443\u0431\u044b<\/p>\n<\/li>\n<\/ul>\n<h3>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 ball<\/h3>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e ball \u0438 ts-\u0444\u0430\u0439\u043b \u0432 \u043d\u0435\u0439 <code>mam\/hype\/ballsort\/ball\/ball.ts<\/code><\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f VSCode \u0432 MAM-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 <\/p>\n<ul>\n<li>\n<p>class &#8212; \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u0430 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c<\/p>\n<\/li>\n<li>\n<p>logic &#8212; \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0434\u043b\u044f view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>styles &#8212; \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f css.ts-\u0444\u0430\u0439\u043b\u0430 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>tests &#8212; \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u0430 \u0441 \u0442\u0435\u0441\u0442\u0430\u043c\u0438<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u043b\u043e\u0432\u043e <code>class<\/code>, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 &#171;MAM class definition&#187; \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 TAB \u0438\u043b\u0438 ENTER<\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430 $hype_ballsort_ball \u0438 \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 $mol_object<\/p>\n<\/li>\n<\/ol>\n<blockquote>\n<p>$mol_object &#8212; \u044d\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0441 \u043e\u0431\u0449\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0435\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u0422.\u043a. \u0438\u043c\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435, \u0442\u043e \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0431\u0435\u0437 \u0442\u0440\u0443\u0434\u0430 \u043d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e. \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 mol \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f \u0432 MAM-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0436\u0430\u0442\u044c CTRL+P, \u0432\u0432\u0435\u0441\u0442\u0438 mol\/object \u0438 \u043d\u0430\u0436\u0430\u0442\u044c ENTER.<\/p>\n<\/blockquote>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u043a\u043b\u0430\u0441\u0441:<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hoop_ballsort_ball extends $mol_object {  } } <\/code><\/pre>\n<p>ball \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u0434\u043d\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 &#8212; \u0446\u0432\u0435\u0442 \u0448\u0430\u0440\u0430, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u043d\u0435\u0433\u043e<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_ball extends $mol_object {  @ $mol_mem color(next?: number) { return next ?? 0 }  } } <\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0446\u0435\u043b\u044b\u0435 \u0447\u0438\u0441\u043b\u0430 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0441 0 \u0438 \u0434\u0430\u043b\u0435\u0435. \u0410 \u043f\u0440\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0430\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442 \u0434\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043a\u0430\u043a\u043e\u0439 \u0446\u0432\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<h4>\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/h4>\n<p>\u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 \u0431\u0435\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0433\u0435\u0442\u0442\u0435\u0440. \u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0441 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043a\u0430\u043a \u0441\u0435\u0442\u0442\u0435\u0440.<\/p>\n<p>\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435, \u0430 \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0443\u0436\u0435 \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u043a\u0435\u0448\u0430.<\/p>\n<p>\u0412\u043d\u043e\u0432\u044c \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445:<\/p>\n<ul>\n<li>\n<p>\u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0432 \u043d\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u0435\u0441\u043b\u0438 \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0441 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u043c, \u0442\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u043f\u043e\u0439\u043c\u0435\u0442, \u0447\u0442\u043e \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u0436\u0435 \u043d\u0435\u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0438 \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0432\u044b\u0437\u043e\u0432\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"typescript\">const obj = new $hype_ballsort_ball obj.color() \/\/ 0 obj.color(1) \/\/ 1 obj.color() \/\/ 1 <\/code><\/pre>\n<h3>tube<\/h3>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e tube \u0438 ts-\u0444\u0430\u0439\u043b \u0432 \u043d\u0435\u0439 <code>mam\/hype\/ballsort\/tube\/tube.ts<\/code><\/p>\n<p>\u0417\u0430 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0442\u0440\u0443\u0431\u043a\u0430<\/p>\n<ul>\n<li>\n<p>\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0448\u0430\u0440\u043e\u0432 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u043d\u044b\u0445 \u0432 \u043d\u0435\u0435<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438 \u043e\u043d\u0430 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0433\u043e\u0442\u043e\u0432\u043e<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u043c \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0448\u0430\u0440<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0442 \u043d\u0430\u0441 \u0448\u0430\u0440 \u0438 \u043a\u043b\u0430\u0441\u0442\u044c \u043d\u0430\u0432\u0435\u0440\u0445<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043a\u043b\u0430\u0441\u0441, \u043d\u0430\u0437\u043e\u0432\u0438\u0442\u0435 \u0435\u0433\u043e $hype_ballsort_tube \u0438 \u043e\u0442\u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u043e\u0442 $mol_object.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_tube extends $mol_object {  } } <\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0448\u0430\u0440\u043e\u0432. \u0422\u0443\u0442 \u0432\u0441\u0435 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>color<\/code> \u0443 \u0448\u0430\u0440\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b &#8212; \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u044b \u043a\u043b\u0430\u0441\u0441\u0430 $hype_ballsort_ball. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_tube extends $mol_object {  @ $mol_mem balls( next?: $hype_ballsort_ball[] ) { return next ?? [] }  } } <\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0443 \u043c\u0435\u043d\u044f, \u043d\u0430\u0436\u043c\u0438\u0442\u0435 CTRL+SHIFT+P, \u0432\u0432\u0435\u0434\u0438\u0442\u0435 &#171;Format&#187; \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 &#171;Format document&#187; \ud83d\ude42<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0433\u043e\u0442\u043e\u0432\u043e. \u0415\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0440\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432 \u0442\u0440\u0443\u0431\u043a\u0435 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0432 \u0433\u043e\u0442\u043e\u0432\u043e, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>size<\/code>, \u0431\u0435\u0437 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430, \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_tube extends $mol_object { \/\/...  size() { return 0 }  @ $mol_mem complete() { const [ ball, ...balls ] = this.balls() return this.balls().length === this.size() &amp;&amp; balls.every( obj => obj.color() === ball.color() ) }  } } <\/code><\/pre>\n<p>\u0422\u0443\u0442 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0440 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445, \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0447\u0442\u043e \u0446\u0432\u0435\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0448\u0430\u0440\u0430 \u0440\u0430\u0432\u0435\u043d \u0446\u0432\u0435\u0442\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0448\u0430\u0440\u043e\u0432. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0447\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0448\u0430\u0440\u043e\u0432 \u0440\u0430\u0432\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0435.<\/p>\n<p>\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u0442\u0443\u0442 \u0442\u043e\u0436\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u043e \u0441\u0430\u043c\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e read-only, \u0442.\u043a. \u0432 \u043d\u0435\u043c \u043d\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435. \u041e\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>balls<\/code> \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <code>color<\/code> \u0443 \u0448\u0430\u0440\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f, \u043e\u043d\u043e \u0441\u0431\u0440\u043e\u0441\u0438\u0442 \u043a\u0435\u0448 \u0438 \u0432\u0435\u0440\u043d\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0418 \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0448\u0430\u0440\u0430 \u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0448\u0430\u0440 \u043d\u0430\u0432\u0435\u0440\u0445.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_tube extends $mol_object { \/\/...  @ $mol_action take() { const next = this.balls().slice() const ball = next.pop() this.balls( [ ...next ] ) return ball }  @ $mol_action put( obj: $hype_ballsort_ball ) { this.balls( [ ...this.balls(), obj ] ) }  } } <\/code><\/pre>\n<ul>\n<li>\n<p>take <\/p>\n<ul>\n<li>\n<p>\u0431\u0435\u0440\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>balls<\/code><\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0435\u0433\u043e \u043a\u043e\u043f\u0438\u044e. \u041d\u0435\u043b\u044c\u0437\u044f \u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0435!<\/p>\n<\/li>\n<li>\n<p>\u0438\u0437 \u043a\u043e\u043f\u0438\u0438 \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0448\u0430\u0440<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 <code>balls<\/code> \u043c\u0430\u0441\u0441\u0438\u0432 \u0431\u0435\u0437 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0448\u0430\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0448\u0430\u0440<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>put <\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0448\u0430\u0440 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>balls<\/code> \u043d\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u043f\u043b\u044e\u0441 \u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0439 \u0448\u0430\u0440<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>game<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0435 \u0438\u0433\u0440\u044b.<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e game \u0438 ts-\u0444\u0430\u0439\u043b \u0432 \u043d\u0435\u0439 <code>mam\/hype\/ballsort\/game\/game.ts<\/code><\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043a\u043b\u0430\u0441\u0441, \u043d\u0430\u0437\u043e\u0432\u0438\u0442\u0435 \u0435\u0433\u043e $hype_ballsort_game \u0438 \u043e\u0442\u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u043e\u0442 $mol_object<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_game extends $mol_object {  } } <\/code><\/pre>\n<p>\u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0445\u0430\u0440\u0434\u043a\u043e\u0434\u0438\u0442\u044c \u0441\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u0445, \u0447\u0442\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0442\u0440\u0443\u0431\u043e\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0442\u044b\u0440\u0435, \u0447\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u0447\u0435\u0442\u044b\u0440\u0435 \u0446\u0432\u0435\u0442\u0430 \u0443 \u0448\u0430\u0440\u043e\u0432 \u0438 \u0442.\u0434. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_game extends $mol_object {  color_count() { return 4 } \/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0446\u0432\u0435\u0442\u043e\u0432  \/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0448\u0430\u0440\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \/\/ \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0434\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432 \u0442\u0440\u0443\u0431\u043a\u0435 \/\/ \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0433\u043e\u0442\u043e\u0432\u043e tube_size() { return 4 }  \/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0443\u0441\u0442\u044b\u0445 \u0442\u0440\u0443\u0431\u043e\u043a tube_empty_count() { return 2 }  \/\/ \u041e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0440\u0443\u0431\u043e\u043a tube_count() { return this.color_count() + this.tube_empty_count() }  \/\/ \u041e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0448\u0430\u0440\u043e\u0432 ball_count() { return this.tube_size() * this.color_count() }  } } <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0438\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0440\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0448\u0430\u0440\u043e\u0432.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_game extends $mol_object { \/\/...  @ $mol_mem_key Ball( index: number ) { return new $hype_ballsort_ball }  } } <\/code><\/pre>\n<h4>\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 2?<\/h4>\n<p>\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>$mol_mem_key<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>$mol_mem<\/code>, \u0437\u0430 \u043e\u0434\u043d\u0438\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c &#8212; \u043f\u0435\u0440\u0432\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043e\u043d \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043b\u044e\u0447. \u041a\u043b\u044e\u0447 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0438\u0437 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u043e \u043a\u043b\u044e\u0447\u0443.<\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>Ball<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f read-only \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c, \u0442.\u043a. \u0443 \u043d\u0435\u0433\u043e \u043d\u0435\u0442 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>next<\/code>. \u041e\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u043a\u043b\u0430\u0441\u0441, \u0442.\u0435. \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e-\u0444\u0430\u0431\u0440\u0438\u043a\u0430. \u0410 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0435\u0439 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u0438 \u0443 \u0448\u0430\u0440\u043e\u0432 \u0438 \u0443 \u0442\u0440\u0443\u0431\u043e\u043a, \u043d\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<p>\u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0441 \u043b\u044e\u0431\u044b\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u043c, \u043e\u043d\u043e \u0432\u0435\u0440\u043d\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442 \u0435\u0433\u043e \u043f\u043e\u0434 \u044d\u0442\u0438\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u043c, \u0438 \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f\u0445 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0437 \u043a\u0435\u0448\u0430.<\/p>\n<p>\u0412\u0430\u0436\u043d\u043e: \u0438\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430-\u0444\u0430\u0431\u0440\u0438\u043a\u0438!<\/p>\n<pre><code class=\"typescript\">const obj = new $hype_ballsort_game const ball1 = obj.Ball(0) \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 - \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0448\u0430\u0440\u0430 const ball2 = obj.Ball(1) ball1 === ball2 \/\/ false - \u044d\u0442\u043e \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430 <\/code><\/pre>\n<h4>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0449\u0435\u0435 \u0448\u0430\u0440\u044b<\/h4>\n<pre><code class=\"typescript\">namespace $ { export class $hoop_ballsort_game extends $mol_object { \/\/...  @$mol_mem_key Ball( index: number ) { return new $hype_ballsort_ball }  @$mol_mem balls() { return Array.from( { length: this.ball_count() } ).map( ( _, index ) => { const obj = this.Ball( index ) obj.color( index % this.tube_size() ) return obj } ) }  } } <\/code><\/pre>\n<ul>\n<li>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>balls<\/code> \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0448\u0430\u0440\u0430\u043c\u0438 \u0438 \u0432\u0435\u0440\u043d\u0435\u0442 \u0435\u0433\u043e, \u0430 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u043e\u0442 \u043c\u0430\u0441\u0441\u0438\u0432. \u041f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u044b\u0437\u043e\u0432\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u043a\u0435\u0448\u0430. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a:<\/p>\n<\/li>\n<\/ul>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0447\u0435\u0440\u0435\u0437 <code>Array.from<\/code> \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>ball_count()<\/code><\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0448\u0430\u0440 \u0447\u0435\u0440\u0435\u0437 <code>Ball<\/code> \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u044d\u0442\u043e\u043c\u0443 \u0448\u0430\u0440\u0443 \u0446\u0432\u0435\u0442<\/p>\n<\/li>\n<li>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/p>\n<\/li>\n<\/ol>\n<h4>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0440\u0443\u0431\u043a\u0438<\/h4>\n<p>\u0422\u0440\u0443\u0431\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hoop_ballsort_game extends $mol_object { \/\/...  @ $mol_mem_key Tube( index: number ) { const obj = new $hype_ballsort_tube obj.size = () => this.tube_size() return obj }  @ $mol_mem tubes() { const balls = $mol_array_shuffle( this.balls() ) const size = this.tube_size()  return Array.from( { length: this.tube_count() } ).map( ( _, index ) => { const obj = this.Tube( index ) const list = index &lt; this.color_count() ? balls.slice( index * size, index * size + size ) : [] obj.balls( list ) return obj } ) }  } } <\/code><\/pre>\n<ul>\n<li>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e-\u0444\u0430\u0431\u0440\u0438\u043a\u0430 <code>Tube<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u0430\u043a \u0438 <code>Ball<\/code>, \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0435\u043c\u0443 <code>size<\/code>, \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043f\u0440\u043e \u044d\u0442\u043e \u0432\u044b\u0448\u0435 &#8212; \u043e\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0442\u0440\u0443\u0431\u043a\u0435 \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>tubes<\/code> <\/p>\n<ol>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0448\u0430\u0440\u044b \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0448\u0438\u0432\u0430\u0435\u0442 \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 <code>$mol_array_shuffle<\/code><\/p>\n<\/li>\n<li>\n<p>\u041a\u043b\u0430\u0434\u0435\u0442 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>size<\/code>, \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>\u0427\u0435\u0440\u0435\u0437  <code>Array.from<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432, \u0434\u043b\u0438\u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u0440\u0430\u0437\u0443 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0438 \u043f\u0443\u0441\u0442\u044b\u0435 \u0442\u0440\u0443\u0431\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0440\u0443\u0431\u043a\u0443<\/p>\n<\/li>\n<li>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0430\u0440\u044b \u0434\u043b\u044f \u043d\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0435 \u0438\u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0435\u0441\u043b\u0438 \u0442\u0440\u0443\u0431\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439<\/p>\n<\/li>\n<li>\n<p>\u0418 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u0440\u0443\u0431\u043e\u043a<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<h4>\u0414\u0435\u043b\u043e \u0437\u0430 \u043c\u0430\u043b\u044b\u043c<\/h4>\n<p>\u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>moves<\/code> \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u0448\u0430\u0433\u043e\u0432 \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0445\u043e\u0434\u043e\u043c.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hoop_ballsort_game extends $mol_object { \/\/...  @$mol_mem moves( next?: number ) { return next ?? 0 }  } } <\/code><\/pre>\n<p>\u041d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0438. \u041d\u0430\u043f\u043e\u043c\u043d\u044e: \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e \u0442\u0440\u0443\u0431\u043a\u0435, \u043e\u043d\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hoop_ballsort_game extends $mol_object { \/\/...  @ $mol_mem tube_active( next?: $hype_ballsort_tube | null ) { if (next?.balls().length === 0) return null if (next?.complete()) return null return next ?? null }  } } <\/code><\/pre>\n<p>\u042d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e &#8212; \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>next<\/code>, \u0445\u0440\u0430\u043d\u0438\u0442 \u043e\u043d\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0438. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043e\u043d\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>null<\/code>, \u043e\u043d\u043e \u0442\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u0435\u0437\u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0440\u0443\u0431\u043a\u0443.<\/p>\n<p>\u0410 \u0442\u0430\u043a\u0436\u0435<\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u0442\u0440\u0443\u0431\u043a\u0435 \u0448\u0430\u0440\u043e\u0432 \u043d\u0435\u0442 &#8212; \u0442\u043e \u0435\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0440\u0443\u0431\u043a\u0430 \u0443\u0436\u0435 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0433\u043e\u0442\u043e\u0432\u043e &#8212; \u0435\u0435 \u0442\u043e\u0436\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u0448\u0430\u0440 \u0438\u0437 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0438 <code>from<\/code>, \u0432 \u043d\u0443\u0436\u043d\u0443\u044e <code>to<\/code>.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hoop_ballsort_game extends $mol_object { \/\/...  @ $mol_action ball_move( to: $hype_ballsort_tube ) { const from = this.tube_active()  if (to === from || !from) return this.tube_active(null)  const from_color = from?.balls().at(-1)?.color() const to_color = to.balls().at(-1)?.color() if (to.balls().length &amp;&amp; from_color !== to_color) return  const ball = from.take()! to.put( ball )  this.moves( this.moves() + 1 ) this.tube_active( null ) }  } } <\/code><\/pre>\n<ol>\n<li>\n<p>\u041d\u0430 \u0432\u0445\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0442\u0440\u0443\u0431\u043a\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u0448\u0430\u0440 \u0438\u0437 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0438 \u043d\u0435\u0442 \u0438\u043b\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0442\u0440\u0443\u0431\u043a\u0430 \u0438 \u0442\u0440\u0443\u0431\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0442\u0440\u0443\u0431\u043a\u0430 &#8212; \u0441\u043d\u0438\u043c\u0430\u0435\u043c \u0441 \u0442\u0440\u0443\u0431\u043a\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0438 \u0432\u044b\u0445\u043e\u0434\u0438\u043c<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0447\u0442\u043e \u0446\u0432\u0435\u0442\u0430 \u0432\u0435\u0440\u0445\u043d\u0438\u0445 \u0448\u0430\u0440\u043e\u0432 \u0432 \u043e\u0431\u043e\u0438\u0445 \u0442\u0440\u0443\u0431\u043a\u0430\u0445 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442, \u0442.\u043a. \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u043c\u043e\u0436\u043d\u043e \u043a\u043b\u0430\u0441\u0442\u044c \u0448\u0430\u0440\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043e\u043a, \u0442\u043e \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 <code>take<\/code> \u0438 <code>put<\/code> \u0434\u043e\u0441\u0442\u0430\u0435\u043c \u0448\u0430\u0440 \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0438 \u043a\u043b\u0430\u0434\u0435\u043c \u0432 \u0434\u0440\u0443\u0433\u0443\u044e<\/p>\n<\/li>\n<li>\n<p>\u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0448\u0430\u0433\u043e\u0432 <code>moves<\/code><\/p>\n<\/li>\n<li>\n<p>\u0414\u0435\u0437\u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u0442\u0440\u0443\u0431\u043a\u0443<\/p>\n<\/li>\n<\/ol>\n<h4>\u041f\u0440\u0435\u0434\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0448\u0442\u0440\u0438\u0445<\/h4>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0441\u0432\u0430\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0430 view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u043d\u0438\u044f <code>tube_active<\/code> \u0438 <code>ball_move<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>tube_click<\/code>.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hoop_ballsort_game extends $mol_object { \/\/...  @ $mol_action tube_click( tube: $hype_ballsort_tube ) { const tube_active = this.tube_active()  tube_active === null ? this.tube_active( tube ) : this.ball_move( tube ) }  } } <\/code><\/pre>\n<p>View-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043f\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 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<br \/> \u041b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0438 \u043d\u0435\u0442, \u0442\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0443\u044e \u0442\u0440\u0443\u0431\u043a\u0443<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0442\u0440\u0443\u0431\u043a\u0430 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c, \u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <code>ball_move<\/code>, \u0447\u0442\u043e \u0431\u044b \u0448\u0430\u0440 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043b\u0441\u044f \u0438\u0437 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0443\u044e \u0442\u0440\u0443\u0431\u043a\u0443<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0448\u0442\u0440\u0438\u0445<\/h4>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u0433\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0433\u0440\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hoop_ballsort_game extends $mol_object { \/\/...  @ $mol_mem finished() { return this.tubes().every( tube => tube.complete() || tube.balls().length === 0 ) }  } } <\/code><\/pre>\n<p>\u0418\u0433\u0440\u0430 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043a\u0430\u0436\u0434\u0430\u044f \u0442\u0440\u0443\u0431\u043a\u0430 \u0432 \u0441\u0442\u0430\u0442\u0443\u0441\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u0438\u043b\u0438 \u0443 \u043d\u0435\u0435 \u043d\u0435\u0442 \u0448\u0430\u0440\u043e\u0432.<\/p>\n<p>\u041c\u044b \u0442\u0443\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0442\u0440\u0443\u0431\u044b \u043d\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430 \u0442\u043e \u0447\u0442\u043e \u0438\u0433\u0440\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430, \u0442.\u043a. \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c \u0447\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u043a\u0438 \u043d\u0430 \u0442\u0440\u0443\u0431\u043a\u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u044b.<\/p>\n<h3>\u0412\u0440\u0435\u043c\u044f \u0442\u0435\u0441\u0442\u043e\u0432<\/h3>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>game.test.ts<\/code> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>hype\/ballsort\/game<\/code>, \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u043d\u0438\u043f\u043f\u0435\u0442 <code>tests<\/code>.<\/p>\n<pre><code class=\"typescript\">namespace $.$$ { $mol_test({  \"\"( $ ) {  },  }) } <\/code><\/pre>\n<h4>\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 3?<\/h4>\n<p>\u0414\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>$mol_test<\/code>, \u043e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0442\u0435\u0441\u0442\u0430\u043c\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u0442\u0435\u0441\u0442 &#8212; \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434 \u043d\u0430 \u044d\u0442\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435. \u0418\u043c\u044f \u043c\u0435\u0442\u043e\u0434\u0430 &#8212; \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u0441\u0442\u0430, \u0430 \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430 &#8212; \u044d\u0442\u043e \u043a\u043e\u0434 \u0442\u0435\u0441\u0442\u0430. \u0422\u0430\u043a \u0436\u0435 \u0432 \u043c\u0435\u0442\u043e\u0434 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u043d\u043e <a href=\"https:\/\/mol.hyoo.ru\/#!section=docs\/=9q9dv3_fgxjsf\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e<\/a> \u0443\u0436\u0435 <a href=\"https:\/\/page.hyoo.ru\/#!=z90h0r_m6qkvl\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0432\u0441\u0435\u043c \u0434\u0440\u0443\u0433\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f<\/a>.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0434\u0435\u043c\u043e-\u0442\u0435\u0441\u0442.<\/p>\n<pre><code class=\"typescript\">namespace $.$$ { $mol_test({  \"Moves initially zero\"() { const obj = new $hype_ballsort_game  $mol_assert_equal(obj.moves(), 0) },  }) } <\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0442\u0435\u0441\u0442\u044b, \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043d\u0430\u0434\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, dev-\u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u0430\u043d\u0434\u043b \u0441 \u0442\u0435\u0441\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435\u0441\u0442\u044b \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 \u0443\u0440\u043b\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b <code>test.html<\/code>, \u0432 \u043d\u0435\u0433\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0431\u0430\u043d\u0434\u043b\u0430 \u0441 \u0442\u0435\u0441\u0442\u0430\u043c\u0438. \u0422\u0435\u0441\u0442\u044b \u043f\u0440\u043e\u0433\u043e\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>\u041d\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043a\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c dev-\u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0434\u0430\u0442\u044c \u043d\u0430\u043c <code>test.html<\/code> \u043c\u043e\u0434\u0443\u043b\u044f <code>game<\/code>, \u043e\u043d \u043f\u043e\u043b\u043e\u0436\u0438\u0442 \u0442\u0443\u0434\u0430 \u0442\u0435\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438.<\/p>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 <code>http:\/\/127.0.0.1:9080\/hoop\/ballsort\/game\/-\/test.html<\/code> &#8212; \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0431\u0435\u043b\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0432 <code>game<\/code> \u043d\u0435\u0442 view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0432 \u0434\u0435\u0432\u0442\u0443\u043b\u0437\u0430\u0445. <\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/d7e\/8b1\/082\/d7e8b1082a8861c7c2675d6407fb1ac2.png\" alt=\"\u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441 \u0440\u0435\u043f\u043e\u0440\u0442\u043e\u043c \u043e \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0438\u0445 \u0442\u0435\u0441\u0442\u0430\u0445\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d7e\/8b1\/082\/d7e8b1082a8861c7c2675d6407fb1ac2.png\"\/><\/p>\n<div><figcaption>\u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441 \u0440\u0435\u043f\u043e\u0440\u0442\u043e\u043c \u043e \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0438\u0445 \u0442\u0435\u0441\u0442\u0430\u0445<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0435\u043b\u0435\u043d\u044c\u043a\u0438\u043c &#171;All test passed&#187; &#8212; \u043d\u0438 \u043e\u0434\u0438\u043d \u0442\u0435\u0441\u0442 \u043d\u0435 \u0443\u043f\u0430\u043b. \u0427\u0438\u0441\u043b\u043e 92 &#8212; \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432, \u044d\u0442\u043e \u0442\u0435\u0441\u0442\u044b \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043d\u0430\u0448 \u043a\u043e\u0434.<\/p>\n<p>\u0421\u043b\u043e\u043c\u0430\u0439\u0442\u0435 \u0442\u0435\u0441\u0442, \u0432\u043c\u0435\u0441\u0442\u043e 0 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0432 1, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0438 \u0437\u0430\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c. \u0422\u0435\u0441\u0442 \u0443\u043f\u0430\u043b: <\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/post_images\/215\/af4\/f01\/215af4f0162214a6b8cc98ee0d13cfa0.png\" alt=\"\u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441 \u0440\u0435\u043f\u043e\u0440\u0442\u043e\u043c \u043e \u0444\u0435\u0439\u043b\u0435 \u0442\u0435\u0441\u0442\u0430\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/215\/af4\/f01\/215af4f0162214a6b8cc98ee0d13cfa0.png\"\/><\/p>\n<div><figcaption>\u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441 \u0440\u0435\u043f\u043e\u0440\u0442\u043e\u043c \u043e \u0444\u0435\u0439\u043b\u0435 \u0442\u0435\u0441\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u043e\u0436\u0435\u0442\u0435 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0434\u0435\u043c\u043e-\u0442\u0435\u0441\u0442.<\/p>\n<h4>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u0442\u0440\u0443\u0431\u043e\u043a \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e<\/h4>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0447\u0442\u043e \u0442\u0440\u0443\u0431\u043a\u0430 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e.<br \/> \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u0433\u0440\u0443<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0441\u0442\u0430\u0442\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0443\u044e \u0442\u0440\u0443\u0431\u043a\u0443<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u0442 \u0442\u0440\u0443\u0431\u043e\u043a \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0433\u043e\u0442\u043e\u0432\u043e<\/p>\n<\/li>\n<li>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432\u0441\u0435\u043c \u0448\u0430\u0440\u0430\u043c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442<\/p>\n<\/li>\n<li>\n<p>\u0423\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0442\u0440\u0443\u0431\u043a\u0430 \u043f\u0435\u0440\u0435\u0448\u043b\u0430 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"typescript\">namespace $ {  $mol_test( {  'tube completing'() {  const game = new $hype_ballsort_game \/\/ 1 const tube = game.tubes().find( obj => obj.balls().length > 0 )! \/\/ 2 $mol_assert_not( tube.complete() ) \/\/ 3  tube.balls().forEach( ball => ball.color( 0 ) ) \/\/ 4  $mol_assert_ok( tube.complete() ) \/\/5  }  } ) } <\/code><\/pre>\n<h4>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0447\u0442\u043e \u0442\u0440\u0443\u0431\u043a\u0430 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0433\u043e\u0442\u043e\u0432\u043e \u043d\u0435 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f<\/h4>\n<pre><code class=\"typescript\">namespace $ {  $mol_test( { \/\/...  'completed tube non activation'() { \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u0433\u0440\u0443 \u0438 \u0431\u0435\u0440\u0435\u043c \u0442\u0440\u0443\u0431\u043a\u0443 \u0441 \u0448\u0430\u0440\u0430\u043c\u0438 const game = new $hype_ballsort_game const tube = game.tubes().find( obj => obj.balls().length > 0 )!  $mol_assert_not(game.tube_active()) \/\/ \u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u043d\u0435\u0442  tube.balls().map(obj => obj.color(0)) \/\/ \u041a\u0440\u0430\u0441\u0438\u043c \u0448\u0430\u0440\u044b   game.tube_click(tube) \/\/ \u041a\u043b\u0438\u043a\u0430\u0435\u043c \u043f\u043e \u0442\u0440\u0443\u0431\u043a\u0435 $mol_assert_not(game.tube_active()) \/\/ \u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0442\u0440\u0443\u0431\u043e\u043a \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0435\u0442 },  } ) } <\/code><\/pre>\n<h4>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0447\u0442\u043e \u043f\u0443\u0441\u0442\u0430\u044f \u0442\u0440\u0443\u0431\u043a\u0430 \u043d\u0435 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f<\/h4>\n<pre><code class=\"typescript\">namespace $ {  $mol_test( { \/\/...  'empty tube non activation'() { const game = new $hype_ballsort_game \/\/ \u0411\u0435\u0440\u0435\u043c \u043f\u0443\u0441\u0442\u0443\u044e \u0442\u0440\u0443\u0431\u043a\u0443 const tube = game.tubes().find( obj => obj.balls().length === 0 )!  $mol_assert_not(game.tube_active())  \/\/ \u041a\u043b\u0438\u043a\u0430\u0435\u043c \u0438 \u0443\u0431\u0435\u0434\u0436\u0430\u0435\u043c\u0441\u044f \u0447\u0442\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0442\u0440\u0443\u0431\u043e\u043a \u043d\u0435\u0442 game.tube_click(tube) $mol_assert_not(game.tube_active()) },  } ) } <\/code><\/pre>\n<h4>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u044e \u0442\u0440\u0443\u0431\u043e\u043a<\/h4>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0430\u0434\u043e:<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0438\u0433\u0440\u044b<\/p>\n<\/li>\n<li>\n<p>\u0412\u0437\u044f\u0442\u044c \u0438\u0437 \u043d\u0435\u0433\u043e \u0442\u0440\u0443\u0431\u043a\u0443 \u0441 \u0448\u0430\u0440\u0438\u043a\u0430\u043c\u0438 \u0438 \u043f\u0443\u0441\u0442\u0443\u044e \u0442\u0440\u0443\u0431\u043a\u0443<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0442\u0440\u0443\u0431\u043e\u043a \u043d\u0435\u0442<\/p>\n<\/li>\n<li>\n<p>\u041a\u043b\u0438\u043a\u043d\u0435\u043c \u043f\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0435, \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0447\u0442\u043e \u043e\u043d\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u0430<\/p>\n<\/li>\n<li>\n<p>\u041a\u043b\u0438\u043a\u043d\u0435\u043c \u043f\u043e \u043f\u0443\u0441\u0442\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0447\u0442\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0442\u0440\u0443\u0431\u043e\u043a \u0441\u043d\u043e\u0432\u0430 \u043d\u0435\u0442<\/p>\n<\/li>\n<li>\n<p>\u041a\u043b\u0438\u043a\u043d\u0435\u043c \u043d\u0430 \u0442\u0440\u0443\u0431\u043a\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438 \u0448\u0430\u0440 \u0438 \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u043e\u043d\u0430 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"typescript\">namespace $ {  $mol_test( { \/\/...  'tube activation'() { const game = new $hype_ballsort_game const tube_filled = game.tubes().find( obj => obj.balls().length > 0 )! const tube_empty = game.tubes().find( obj => obj.balls().length === 0 )!  $mol_assert_not(game.tube_active())  game.tube_click(tube_filled) $mol_assert_equal(tube_filled, game.tube_active())  game.tube_click(tube_empty) $mol_assert_not(game.tube_active())  game.tube_click(tube_empty) $mol_assert_equal(tube_empty, game.tube_active()) },  } ) } <\/code><\/pre>\n<h4>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0448\u0430\u0440<\/h4>\n<pre><code class=\"typescript\">namespace $ {  $mol_test( { \/\/...  'ball moving'() { const game = new $hype_ballsort_game  \/\/ \u0411\u0435\u0440\u0435\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0443\u044e \u0438 \u043f\u0443\u0441\u0442\u0443\u044e \u0442\u0440\u0443\u0431\u043a\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0448\u0430\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f const tube_filled = game.tubes().find( obj => obj.balls().length > 0 )! const tube_empty = game.tubes().find( obj => obj.balls().length === 0 )! const ball_moving = tube_filled.balls().at( -1 )!  \/\/ \u041a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0443\u044e \u0442\u0440\u0443\u0431\u043a\u0443 \u0438 \u043d\u0430 \u043f\u0443\u0441\u0443\u044e game.tube_click( tube_filled ) game.tube_click( tube_empty )  \/\/ \u0423\u0431\u0435\u0436\u0434\u0430\u0435\u043c\u0441\u044f \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0448\u0430\u0440 \u0443\u0431\u044b\u043b \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0442\u0440\u0443\u0431\u043a\u0438 \u0438 \u043f\u0440\u0438\u0431\u044b\u043b \u0432 \u0434\u0440\u0443\u0433\u0443\u044e $mol_assert_equal( tube_filled.balls().length, game.tube_size() - 1 ) $mol_assert_not( tube_filled.balls().includes( ball_moving ) )  $mol_assert_equal( tube_empty.balls().length, 1 ) $mol_assert_ok( tube_empty.balls().includes( ball_moving ) ) },   } ) } <\/code><\/pre>\n<h4>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0447\u0442\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u0448\u0430\u0440\u0430<\/h4>\n<pre><code class=\"typescript\">namespace $ {  $mol_test( { \/\/...  'moves increment'() { const game = new $hype_ballsort_game const tube_filled = game.tubes().find( obj => obj.balls().length > 0 )! const tube_empty = game.tubes().find( obj => obj.balls().length === 0 )!  game.tube_click( tube_filled ) game.tube_click( tube_empty ) $mol_assert_equal( game.moves(), 1 ) },   } ) } <\/code><\/pre>\n<h4>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0447\u0442\u043e \u0438\u0433\u0440\u0430 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/h4>\n<pre><code class=\"typescript\">namespace $ {  $mol_test( { \/\/...  'game finish'() { const game = new $hype_ballsort_game  $mol_assert_not( game.finished() )  game.balls().forEach( ball => ball.color( 0 ) ) $mol_assert_ok( game.finished() ) },   } ) } <\/code><\/pre>\n<h3>\u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/h3>\n<p>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435 \u0441 pixel perfect \u0432\u0435\u0440\u0441\u0442\u043a\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0410 \u043f\u043e\u043a\u0430 \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043c\u043e\u0434\u0435\u043b\u044f\u0445\/view-\u043c\u043e\u0434\u0435\u043b\u044f\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/sergeysova\/ballsort\/blob\/master\/src\/pages\/home\/model.ts\" rel=\"noopener noreferrer nofollow\">Effector<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/faustienf\/ballsort\/blob\/main\/src\/app\/model.ts\" rel=\"noopener noreferrer nofollow\">Reatom<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/Sdju\/ballsort-example-vue\/blob\/main\/src\/components\/TheGame.vue\" rel=\"noopener noreferrer nofollow\">Vue<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/Lyumih\/milis\/blob\/main\/ballsort\/board\/board.ts\" rel=\"noopener noreferrer nofollow\">$mol \u0434\u0440\u0443\u0433\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p>\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432 <a href=\"https:\/\/github.com\/PavelZubkov\/ballsort\/blob\/only_model\/game\/game.ts\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/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<\/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\/741040\/\"> https:\/\/habr.com\/ru\/articles\/741040\/<\/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\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u043d\u0430 $mol <a href=\"https:\/\/ballsort.sova.dev\/\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u0443<\/a> \u0434\u0435\u043c\u043a\u0443 \u043f\u043e\u0447\u0442\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0441\u0442\u043e\u0432.<\/p>\n<p>\u0414\u0435\u043c\u043a\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0438\u0433\u0440\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0448\u0430\u0440\u0438\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u0442\u0440\u0443\u0431\u043a\u0430\u043c\u0438, \u0446\u0435\u043b\u044c \u0438\u0433\u0440\u044b &#8212; \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0440\u0438\u043a\u0438 \u043f\u043e \u0446\u0432\u0435\u0442\u0430\u043c \u0437\u0430 \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0448\u0430\u0433\u043e\u0432.<\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043e\u043d\u0430 \u0431\u044b\u043b\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 <a href=\"https:\/\/ballsort.sova.dev\" rel=\"noopener noreferrer nofollow\">\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0440\u0435 + react<\/a>, \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0435\u0435<\/p>\n<ul>\n<li>\n<p>\u043d\u0430 <a href=\"https:\/\/ballsort.vercel.app\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0430\u0442\u043e\u043c\u0435 + react<\/a> <a href=\"https:\/\/github.com\/faustienf\/ballsort\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a>,<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430 <a href=\"https:\/\/sdju.github.io\/ballsort-example-vue\" rel=\"noopener noreferrer nofollow\">vue<\/a> <a href=\"https:\/\/github.com\/Sdju\/ballsort-example-vue\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a><\/p>\n<\/li>\n<li>\n<p>\u0438 \u0434\u0432\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0430 \u043c\u043e\u043b\u0435 <\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/lyumih.github.io\/milis\/ballsort\/-\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u0430\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/pavelzubkov.github.io\/ballsort\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u044f<\/a>, \u043e \u043d\u0435\u0439 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0422\u0430\u043c \u0433\u0434\u0435 \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u043e\u043d\u0430 \u0435\u0441\u0442\u044c \u0432 \u0441\u0430\u043c\u043e\u0439 \u0434\u0435\u043c\u043a\u0435<\/p>\n<\/blockquote>\n<h2>\u041f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0434\u0430\u0447\u0438<\/h2>\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>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0441 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u043b\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043f\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 MAM-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/gitpod.io\/#https:\/\/github.com\/hyoo-ru\/mam\" rel=\"noopener noreferrer nofollow\">gitpod.io<\/a>, \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b. \u0418\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 NodeJS \u0434\u043e LTS \u0432\u0435\u0440\u0441\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 MAM<\/p>\n<\/li>\n<\/ol>\n<pre><code>git clone https:\/\/github.com\/hyoo-ru\/mam.git .\/mam &amp;&amp; cd mam <\/code><\/pre>\n<ol start=\"3\">\n<li>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0432\u0430\u0448\u0438\u043c \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u043c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u043c<\/p>\n<\/li>\n<\/ol>\n<pre><code>npm install <\/code><\/pre>\n<ol start=\"4\">\n<li>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f VSCode <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=EditorConfig.EditorConfig\" rel=\"noopener noreferrer nofollow\">EditorConfig<\/a> <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=nin-jin.vscode-language-tree\" rel=\"noopener noreferrer nofollow\">vscode-language-tree<\/a><\/p>\n<\/li>\n<\/ol>\n<p>MAM-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432!<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/h3>\n<ol>\n<li>\n<p>\u0418\u0434\u0435\u043c <a href=\"https:\/\/github.com\/hyoo-ru\/template\" rel=\"noopener noreferrer nofollow\">\u0441\u044e\u0434\u0430<\/a> \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;Use this template&#187; => &#171;Create a new repository&#187;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0430, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u043c\u044f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f &#171;ballsort&#187;, \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0442\u0438\u043f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u043c \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;Create repository from template&#187;<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043d\u0430\u0436\u0430\u0432 \u043d\u0430 &#171;Settings&#187;<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043b\u0435\u0432\u043e\u043c \u043c\u0435\u043d\u044e \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 &#171;Actions&#187; => &#171;General&#187;, \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;Workflow permissions&#187; \u043e\u0442\u043c\u0435\u0442\u044c\u0442\u0435 \u0447\u0435\u043a\u0431\u043e\u043a\u0441 &#171;Read and Write permissions&#187; \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 &#171;Save&#187;. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u043a\u0448\u0435\u043d \u0434\u0435\u043f\u043b\u043e\u044f \u043d\u0430 &#171;github pages&#187; \u043c\u043e\u0433 \u0437\u0430\u0434\u0435\u043f\u043b\u043e\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ol>\n<blockquote>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u044f &#171;hype&#187; \u0438 \u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043f\u043e\u0434 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441.<\/p>\n<\/blockquote>\n<ol start=\"5\">\n<li>\n<p>\u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0438 \u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>mam\/hype\/ballsort<\/code><\/p>\n<\/li>\n<\/ol>\n<pre><code>cd mam # \u0422\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0432\u0430\u0448\u0443 \u0441\u0441\u044b\u043b\u043a\u0443 git clone https:\/\/github.com\/PavelZubkov\/ballsort.git hype\/ballsort <\/code><\/pre>\n<h3>\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<ol>\n<li>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0434\u0435\u0432-\u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439<\/p>\n<\/li>\n<\/ol>\n<pre><code>yarn start <\/code><\/pre>\n<ol start=\"2\">\n<li>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 <code>http:\/\/127.0.0.1:9080<\/code><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u043f\u0438\u0441\u043e\u043a \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>mam<\/code>. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 &#171;hyoo&#187;, \u0437\u0430\u0442\u0435\u043c \u043d\u0430 &#171;ballsort&#187;, \u0437\u0430\u0442\u0435\u043c \u043d\u0430 &#171;app&#187; &#8212; \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0431\u0435\u043b\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u044d\u0442\u043e \u043e\u043a \u0442.\u043a. \u0432 <code>app<\/code> \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b <code>index.html<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>hype\/ballsort\/app\/index.html<\/code> \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0438\u043c\u044f \u043c\u043e\u0434\u0443\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>mol_view_root<\/code><\/p>\n<\/li>\n<\/ol>\n<pre><code>&lt;div mol_view_root=\"$hype_ballsort_app\">&lt;\/div> <\/code><\/pre>\n<ol start=\"5\">\n<li>\n<p>\u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code> \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>app.view.tree<\/code> \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u043d\u0438\u0436\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0435\u0433\u043e.<\/p>\n<\/li>\n<\/ol>\n<pre><code>$hype_ballsort_app $mol_view sub \/ \\Hello <\/code><\/pre>\n<ol start=\"6\">\n<li>\n<p>\u0412\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u0432\u0435\u0440\u043d\u043e \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435<\/p>\n<\/li>\n<\/ol>\n<h3>\u0414\u0435\u043f\u043b\u043e\u0439 \u043d\u0430 github<\/h3>\n<blockquote>\n<p>\u0412 <a href=\"http:\/\/readme.md\" rel=\"noopener noreferrer nofollow\">readme.md<\/a> \u0435\u0441\u0442\u044c \u0447\u0435\u043a \u043b\u0438\u0441\u0442 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/p>\n<\/blockquote>\n<ol>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>hype\/ballsort\/hyoo_template_app.yml<\/code> \u0432 <code>hype\/ballsort\/hype_ballsort_app.yml<\/code> \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0435\u0433\u043e<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0438\u043c\u044f \u043d\u0430 3 \u0441\u0442\u0440\u043e\u043a\u0435<\/p>\n<\/li>\n<\/ol>\n<pre><code>name: $hype_ballsort_app <\/code><\/pre>\n<ol start=\"3\">\n<li>\n<p>\u041d\u0430 19 \u0441\u0442\u0440\u043e\u043a\u0435 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043a\u0430\u043a\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f<\/p>\n<\/li>\n<\/ol>\n<pre><code>- uses: hyoo-ru\/mam_build@master2 with: package: 'hype\/ballsort' modules: 'app' <\/code><\/pre>\n<ol start=\"4\">\n<li>\n<p>\u0423\u0434\u0430\u043b\u0438\u0442\u0435 \u0431\u043b\u043e\u043a \u0434\u0435\u043f\u043b\u043e\u044f \u0432 NPM, \u043e\u043d \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0430 26 \u0441\u0442\u0440\u043e\u043a\u0435 \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 30 \u0441\u0442\u0440\u043e\u043a\u0435<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0431\u043b\u043e\u043a\u0435 \u0434\u0435\u043f\u043b\u043e\u044f \u043d\u0430 Github Pages \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u043f\u0443\u0442\u044c \u0434\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441 \u0431\u0430\u043d\u0434\u043b\u0430\u043c\u0438<\/p>\n<\/li>\n<\/ol>\n<pre><code>- uses: hyoo-ru\/gh-deploy@v4.4.1 if: github.ref == 'refs\/heads\/master' with: folder: 'hype\/ballsort\/app\/-' <\/code><\/pre>\n<ol start=\"6\">\n<li>\n<p>\u0421\u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u043a\u043e\u043c\u043c\u0438\u0442 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u044c\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430 github<\/p>\n<\/li>\n<li>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u0432 \u0433\u0438\u0442\u0445\u0430\u0431, \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;Actions&#187; \u0436\u0434\u0435\u043c \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c\u0441\u044f action &#171;$hyoo_ballsort_app&#187;, \u0438 \u043f\u043e\u0441\u043b\u0435 \u043d\u0435\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u044d\u043a\u0448\u0435\u043d &#171;pages build and deployment&#187;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043a\u0448\u0435\u043d \u0443\u043f\u0430\u0434\u0435\u0442, \u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c &#171;Settings&#187; => &#171;Pages&#187;, \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;Branch&#187; \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u0435\u0442\u043a\u0443 \u0434\u043b\u044f \u0434\u0435\u043f\u043b\u043e\u044f &#171;gh-pages&#187; \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;Save&#187;. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043a\u0448\u0435\u043d \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e, \u0430 \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a &#171;Pages&#187; \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c <a href=\"https:\/\/t.me\/h_y_o_o\/2\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a><\/p>\n<\/li>\n<\/ol>\n<h2>\u041c\u043e\u0434\u0435\u043b\u044c<\/h2>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0438\u0433\u0440\u044b \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0435\u0435 view-\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0430 \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u0435\u0435.<\/p>\n<p>\u042f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u0438\u0433\u0440\u0443 \u043d\u0430 \u0442\u0440\u0438 \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<ul>\n<li>\n<p>game &#8212; \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>ball &#8212; \u0448\u0430\u0440, \u0442\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0448\u0430\u0440\u043e\u043c<\/p>\n<\/li>\n<li>\n<p>tube &#8212; \u043b\u043e\u0433\u0438\u043a\u0430 \u0442\u0440\u0443\u0431\u044b<\/p>\n<\/li>\n<\/ul>\n<h3>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 ball<\/h3>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e ball \u0438 ts-\u0444\u0430\u0439\u043b \u0432 \u043d\u0435\u0439 <code>mam\/hype\/ballsort\/ball\/ball.ts<\/code><\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f VSCode \u0432 MAM-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 <\/p>\n<ul>\n<li>\n<p>class &#8212; \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u0430 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c<\/p>\n<\/li>\n<li>\n<p>logic &#8212; \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0434\u043b\u044f view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>styles &#8212; \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f css.ts-\u0444\u0430\u0439\u043b\u0430 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>tests &#8212; \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u0430 \u0441 \u0442\u0435\u0441\u0442\u0430\u043c\u0438<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u043b\u043e\u0432\u043e <code>class<\/code>, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 &#171;MAM class definition&#187; \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 TAB \u0438\u043b\u0438 ENTER<\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430 $hype_ballsort_ball \u0438 \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 $mol_object<\/p>\n<\/li>\n<\/ol>\n<blockquote>\n<p>$mol_object &#8212; \u044d\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0441 \u043e\u0431\u0449\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0435\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u0422.\u043a. \u0438\u043c\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435, \u0442\u043e \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0431\u0435\u0437 \u0442\u0440\u0443\u0434\u0430 \u043d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e. \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 mol \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f \u0432 MAM-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0436\u0430\u0442\u044c CTRL+P, \u0432\u0432\u0435\u0441\u0442\u0438 mol\/object \u0438 \u043d\u0430\u0436\u0430\u0442\u044c ENTER.<\/p>\n<\/blockquote>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u043a\u043b\u0430\u0441\u0441:<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hoop_ballsort_ball extends $mol_object {  } } <\/code><\/pre>\n<p>ball \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u0434\u043d\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 &#8212; \u0446\u0432\u0435\u0442 \u0448\u0430\u0440\u0430, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u043d\u0435\u0433\u043e<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_ball extends $mol_object {  @ $mol_mem color(next?: number) { return next ?? 0 }  } } <\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0446\u0435\u043b\u044b\u0435 \u0447\u0438\u0441\u043b\u0430 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0441 0 \u0438 \u0434\u0430\u043b\u0435\u0435. \u0410 \u043f\u0440\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0430\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442 \u0434\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043a\u0430\u043a\u043e\u0439 \u0446\u0432\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<h4>\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/h4>\n<p>\u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 \u0431\u0435\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0433\u0435\u0442\u0442\u0435\u0440. \u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0441 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043a\u0430\u043a \u0441\u0435\u0442\u0442\u0435\u0440.<\/p>\n<p>\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435, \u0430 \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0443\u0436\u0435 \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u043a\u0435\u0448\u0430.<\/p>\n<p>\u0412\u043d\u043e\u0432\u044c \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445:<\/p>\n<ul>\n<li>\n<p>\u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0432 \u043d\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u0435\u0441\u043b\u0438 \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0441 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u043c, \u0442\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u043f\u043e\u0439\u043c\u0435\u0442, \u0447\u0442\u043e \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u0436\u0435 \u043d\u0435\u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0438 \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0432\u044b\u0437\u043e\u0432\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"typescript\">const obj = new $hype_ballsort_ball obj.color() \/\/ 0 obj.color(1) \/\/ 1 obj.color() \/\/ 1 <\/code><\/pre>\n<h3>tube<\/h3>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e tube \u0438 ts-\u0444\u0430\u0439\u043b \u0432 \u043d\u0435\u0439 <code>mam\/hype\/ballsort\/tube\/tube.ts<\/code><\/p>\n<p>\u0417\u0430 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0442\u0440\u0443\u0431\u043a\u0430<\/p>\n<ul>\n<li>\n<p>\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0448\u0430\u0440\u043e\u0432 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u043d\u044b\u0445 \u0432 \u043d\u0435\u0435<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438 \u043e\u043d\u0430 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0433\u043e\u0442\u043e\u0432\u043e<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u043c \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0448\u0430\u0440<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0442 \u043d\u0430\u0441 \u0448\u0430\u0440 \u0438 \u043a\u043b\u0430\u0441\u0442\u044c \u043d\u0430\u0432\u0435\u0440\u0445<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043a\u043b\u0430\u0441\u0441, \u043d\u0430\u0437\u043e\u0432\u0438\u0442\u0435 \u0435\u0433\u043e $hype_ballsort_tube \u0438 \u043e\u0442\u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u043e\u0442 $mol_object.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_tube extends $mol_object {  } } <\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0448\u0430\u0440\u043e\u0432. \u0422\u0443\u0442 \u0432\u0441\u0435 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>color<\/code> \u0443 \u0448\u0430\u0440\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b &#8212; \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u044b \u043a\u043b\u0430\u0441\u0441\u0430 $hype_ballsort_ball. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_tube extends $mol_object {  @ $mol_mem balls( next?: $hype_ballsort_ball[] ) { return next ?? [] }  } } <\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0443 \u043c\u0435\u043d\u044f, \u043d\u0430\u0436\u043c\u0438\u0442\u0435 CTRL+SHIFT+P, \u0432\u0432\u0435\u0434\u0438\u0442\u0435 &#171;Format&#187; \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 &#171;Format document&#187; \ud83d\ude42<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0433\u043e\u0442\u043e\u0432\u043e. \u0415\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0440\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432 \u0442\u0440\u0443\u0431\u043a\u0435 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0432 \u0433\u043e\u0442\u043e\u0432\u043e, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>size<\/code>, \u0431\u0435\u0437 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430, \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_tube extends $mol_object { \/\/...  size() { return 0 }  @ $mol_mem complete() { const [ ball, ...balls ] = this.balls() return this.balls().length === this.size() &amp;&amp; balls.every( obj => obj.color() === ball.color() ) }  } } <\/code><\/pre>\n<p>\u0422\u0443\u0442 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0440 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445, \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0447\u0442\u043e \u0446\u0432\u0435\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0448\u0430\u0440\u0430 \u0440\u0430\u0432\u0435\u043d \u0446\u0432\u0435\u0442\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0448\u0430\u0440\u043e\u0432. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0447\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0448\u0430\u0440\u043e\u0432 \u0440\u0430\u0432\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0435.<\/p>\n<p>\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u0442\u0443\u0442 \u0442\u043e\u0436\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u043e \u0441\u0430\u043c\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e read-only, \u0442.\u043a. \u0432 \u043d\u0435\u043c \u043d\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435. \u041e\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>balls<\/code> \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <code>color<\/code> \u0443 \u0448\u0430\u0440\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f, \u043e\u043d\u043e \u0441\u0431\u0440\u043e\u0441\u0438\u0442 \u043a\u0435\u0448 \u0438 \u0432\u0435\u0440\u043d\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0418 \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0448\u0430\u0440\u0430 \u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0448\u0430\u0440 \u043d\u0430\u0432\u0435\u0440\u0445.<\/p>\n<pre><code class=\"typescript\">namespace $ { export class $hype_ballsort_tube extends $mol_object { \/\/...  @ $mol_action take() { const next = this.balls().slice() const ball = next.pop() this.balls( [ ...next ] ) return ball }  @ $mol_action put( obj: $hype_ballsort_ball ) { this.balls( [ ...this.balls(), obj ] ) }  } } <\/code><\/pre>\n<ul>\n<li>\n<p>take <\/p>\n<ul>\n<li>\n<p>\u0431\u0435\u0440\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>balls<\/code><\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0435\u0433\u043e \u043a\u043e\u043f\u0438\u044e. \u041d\u0435\u043b\u044c\u0437\u044f \u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0435!<\/p>\n<\/li>\n<li>\n<p>\u0438\u0437 \u043a\u043e\u043f\u0438\u0438 \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0448\u0430\u0440<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 <code>balls<\/code> \u043c\u0430\u0441\u0441\u0438\u0432 \u0431\u0435\u0437 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0448\u0430\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0448\u0430\u0440<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>put <\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0448\u0430\u0440 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>balls<\/code> \u043d\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u043f\u043b\u044e\u0441 \u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0439 \u0448\u0430\u0440<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>game<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0435 \u0438\u0433\u0440\u044b.<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e game \u0438 ts-\u0444\u0430\u0439\u043b \u0432 \u043d\u0435\u0439 <code>mam\/hype\/ballsort\/game\/game.ts<\/code><\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043a\u043b\u0430\u0441\u0441, \u043d\u0430\u0437\u043e\u0432\u0438\u0442\u0435 \u0435\u0433\u043e<\/p>\n<\/li>\n<\/ol>\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-348602","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/348602","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=348602"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/348602\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=348602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=348602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=348602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}