{"id":494494,"date":"2026-09-13T09:42:06","date_gmt":"2026-09-13T09:42:06","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=494494"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=494494","title":{"rendered":"\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 Minecraft"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0418\u0434\u0435\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c <em>Angular<\/em>-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 <em>Minecraft<\/em>. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 \u0438\u0437 \u0440\u0435\u0434\u0441\u0442\u043e\u0443\u043d\u0430, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c <em>Node.js<\/em>, \u043c\u043e\u0433\u043b\u043e \u0431\u044b \u0437\u0430\u043d\u044f\u0442\u044c \u043f\u043e\u043b\u0436\u0438\u0437\u043d\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 <em>Node.js<\/em> \u0441\u043d\u0430\u0440\u0443\u0436\u0438, \u0430 <em>Minecraft <\/em>\u0441\u043b\u0443\u0436\u0438\u0442 \u0435\u043c\u0443 \u044d\u043a\u0440\u0430\u043d\u043e\u043c.<\/p>\n<p>\u0412 \u0445\u043e\u0434\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0433\u043e\u0434\u044b \u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0438\u0437 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043c\u0438\u0440\u0430. \u0417\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0441\u0442\u043e\u044f\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 <em>Angular<\/em>-\u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0442\u0440\u0438 \u0432\u0435\u0449\u0438: \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 <em>Angular <\/em>\u043d\u0430\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0440\u0430\u0441\u0447\u0451\u0442 \u0438\u0445 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b <em>Minecraft<\/em>. \u0412\u044b\u0431\u0435\u0440\u0435\u043c \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438.<\/p>\n<h3>\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0432 Minecraft \u0447\u0435\u0440\u0435\u0437 RCON \u0438 block_display<\/h3>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <em>RCON<\/em>, \u043e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043c\u0438\u0440 \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c. \u0414\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0441\u043a\u0430\u0447\u0430\u0432 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435. <em>RCON <\/em>&#8212; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434. \u0427\u0435\u0440\u0435\u0437 <em>npm<\/em>-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443<em> rcon-client<\/em> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438\u0437 <em>Node.js <\/em>\u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043c\u0438\u0440.\u041f\u0435\u0440\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043e\u0447\u0435\u0432\u0438\u0434\u0435\u043d: \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u043b\u043e\u043a \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u043c. \u041a\u043e\u043c\u0430\u043d\u0434\u0430 <code>setblock<\/code> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0431\u043b\u043e\u043a, \u0430 <code>fill<\/code> \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c. \u0422\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u044d\u043a\u0440\u0430\u043d, \u0438 \u044d\u0442\u043e\u0442 \u0440\u0435\u0436\u0438\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c.  \u0412\u043e\u0437\u044c\u043c\u0435\u043c \u044d\u043a\u0440\u0430\u043d 200 \u043d\u0430 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043d\u043e \u0443\u0436\u0435 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f 20 000 \u043f\u043e\u0437\u0438\u0446\u0438\u0439 \u0431\u043b\u043e\u043a\u043e\u0432. \u041f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u043d\u044f\u0442\u044c \u0443\u0447\u0430\u0441\u0442\u043a\u0438 \u043c\u0438\u0440\u0430, \u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430. \u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u044f\u0436\u0435\u043b\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0438 \u0434\u0430\u0436\u0435 \u0442\u0430\u043a, \u044d\u043a\u0440\u0430\u043d \u0442\u0430\u043a\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u043e\u043d \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0430\u043b.  \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <code>block_display<\/code>. <\/p>\n<p>\u042d\u0442\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u0431\u043b\u043e\u043a\u0430 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0451 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0422\u0430\u043a\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441<em> Minecraft Java Edition 1.19.4<\/em>. \u042d\u0442\u043e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0434\u0435\u043d \u0432 \u043c\u0438\u0440\u0435, \u043d\u043e \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u0445 \u0432 \u043c\u0438\u0440\u0435.  \u0418\u0437 \u043c\u043e\u0434\u0435\u043b\u0438 \u0431\u043b\u043e\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u043d\u043a\u0438\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0438 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u044d\u043a\u0440\u0430\u043d\u0430. \u0412 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f <code>pixelsPerBlock: 4<\/code> \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438 \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u043d\u0430 \u043f\u043b\u043e\u0449\u0430\u0434\u0438 \u043e\u0434\u043d\u043e\u0439 \u0433\u0440\u0430\u043d\u0438 \u0431\u043b\u043e\u043a\u0430. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0434\u043d\u043e\u0433\u043e. \u042d\u043a\u0440\u0430\u043d 880 \u043d\u0430 550 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 220 \u043d\u0430 137,5 \u0431\u043b\u043e\u043a\u0430. \u0422\u0430\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0432\u043f\u043e\u043b\u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0440\u0438\u043d\u0433\u0430.<\/p>\n<h3>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 Angular \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b<\/h3>\n<p>\u0412 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 <em>Angular<\/em>-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 <em>Angular<\/em>. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0443\u0437\u043b\u044b, \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0442 \u0438\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439.\u041a\u043e\u0433\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, <em>Angular <\/em>\u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043e\u043a \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0442\u0435, \u0447\u044c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u044b \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u0443\u0437\u043b\u0435. \u041f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0434 \u0443\u0437\u043b\u0430\u043c\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440. \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 <em>DOM<\/em>, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0438\u0441\u0443\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. <em>Angular <\/em>\u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430\u043c\u0438, \u0430 \u0440\u0430\u0441\u0447\u0451\u0442 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.\u0414\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 <em>Minecraft <\/em>\u044d\u0442\u043e\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0443\u0447\u0430\u0441\u0442\u043e\u043a \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c: \u0432\u043c\u0435\u0441\u0442\u043e <em>DOM <\/em>\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0443\u0437\u043b\u044b, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 <em>Yoga <\/em>\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043c\u0438\u0440\u0435.<\/p>\n<p><em>Angular <\/em>\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430. \u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043d\u0443\u0436\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u044b, \u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0441\u0442\u0438\u043b\u044f.<\/p>\n<p>\u041d\u0430\u0437\u043e\u0432\u0435\u043c \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 <em>platformMinecraft<\/em>. \u041e\u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>createPlatformFactory <\/code>\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <em>platformCore<\/em>. \u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 <em>RCON<\/em>, \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432: <\/p>\n<pre><code class=\"typescript\">platformMinecraft([  { provide: MC_RCON, useValue: rcon },  { provide: MC_SCREEN, useValue: screen },  { provide: MC_FONT, useValue: font },]).bootstrapModule(AppModule);<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f <em>MinecraftRendererFactory<\/em>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0434\u043b\u044f <em>Minecraft<\/em>. \u041e\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 <code>Renderer2: createElement, createText, appendChild, setStyle, setValue<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 <em>Angular <\/em>\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0443\u0437\u043b\u0430\u043c\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<code> <\/code><\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430: <\/p>\n<pre><code class=\"xml\">&lt;div style=\"background: black_concrete; color: white_wool\"&gt;  {{ temperature() }}&lt;\/div&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p> \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0442\u0435\u043a\u0441\u0442\u0430, \u0438\u0445 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u041a\u043e\u0433\u0434\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 temperature() \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, Angular \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 \u0447\u0435\u0440\u0435\u0437 setValue. \u0420\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0434\u043b\u044f Minecraft \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u044d\u0442\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 McNode. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u0435\u0441\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c, \u0434\u0435\u0442\u0438, \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 \u0441\u0442\u0438\u043b\u0438. \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0443\u0437\u043b\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0441\u0442\u0440\u043e\u043a\u0443, \u0443\u0437\u043b\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. Angular \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430, \u0430 \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u044d\u0442\u043e \u0434\u0435\u0440\u0435\u0432\u043e.  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0443\u0437\u043b\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">appendChild(parent: McNode, child: McNode): void {  if (!parent || !child) return;  this.detach(child);  child.parent = parent;  parent.children.push(child);  parent.yogaNode.insertChild(    child.yogaNode,    parent.yogaNode.getChildCount(),  );  this.markDirty();}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0440\u0435\u0431\u0451\u043d\u043e\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u0432 \u0434\u0432\u0430 \u0434\u0435\u0440\u0435\u0432\u0430: \u0434\u0435\u0440\u0435\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <em>McNode <\/em>\u0438 \u0434\u0435\u0440\u0435\u0432\u043e <em>Yoga<\/em>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412 \u043a\u043e\u043d\u0446\u0435 \u0441\u0446\u0435\u043d\u0430 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0430\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<h3>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f Yoga \u0438 \u0440\u0430\u0441\u0447\u0451\u0442 layout<\/h3>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u041d\u0443\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c, \u0433\u0434\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u0442\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043a\u0443\u0434\u0430 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u043e\u0441\u043b\u0435 \u0442\u0435\u043a\u0441\u0442\u0430. \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u044d\u0442\u0438\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0438\u0436\u043e\u043a <em>layout<\/em>. \u0412 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 <em>Minecraft <\/em>\u044d\u0442\u0443 \u0440\u0430\u0431\u043e\u0442\u0443 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c <em>Yoga<\/em>. <\/p>\n<p>Yoga \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u043f\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0430 <em>Flexbox<\/em>. \u0421\u0430\u043c \u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0438\u0441\u0443\u0435\u0442. \u041d\u0430 \u0432\u0445\u043e\u0434 \u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0440\u0430\u0441\u0447\u0451\u0442\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0438 \u0440\u0430\u0437\u043c\u0435\u0440, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b <code>{ x, y, w, h }<\/code> \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438.\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 400 \u0438 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 120 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0443. \u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0441\u043e \u0432\u0441\u0435\u0445 \u0441\u0442\u043e\u0440\u043e\u043d, \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u0430\u0432\u0435\u043d 12 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c. \u0423 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u0430\u0434\u0430\u043d\u044b \u0448\u0438\u0440\u0438\u043d\u0430 120 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 80 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0412\u0442\u043e\u0440\u043e\u0439 \u0438\u043c\u0435\u0435\u0442 <code>flex: 1<\/code> \u0438 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 \u0447\u0435\u0440\u0435\u0437 <code>align-items: stretch<\/code> \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f.\u041f\u043e\u0441\u043b\u0435 <code>calculateLayout()<\/code> \u0432\u044b\u0437\u043e\u0432 <code>getComputedLayout()<\/code> \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0443\u0437\u043b\u0430 \u0434\u0430\u0451\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u043e\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438: <\/p>\n<pre><code class=\"typescript\">\/\/ \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442{ left: 16, top: 16, width: 120, height: 80 }\/\/ \u0412\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442{ left: 148, top: 16, width: 236, height: 88 }<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p> \u0412\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043b\u0435\u0432\u043e\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430, \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0430: 16 + 120 + 12 = 148. \u0415\u0433\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0441\u0442\u0430\u0442\u043e\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430: 400 &#8212; 16 &#8212; 16 &#8212; 120 &#8212; 12 = 236. \u0412\u044b\u0441\u043e\u0442\u0430 \u0440\u0430\u0432\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u0435 \u043c\u0435\u0436\u0434\u0443 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438: 120 &#8212; 16 &#8212; 16 = 88.  \u0415\u0441\u043b\u0438 \u0441\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0432 \u0442\u043e\u0447\u043a\u0435<code> { x: 32, y: 24 }<\/code>, \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u0442\u043e \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442:<\/p>\n<pre><code class=\"typescript\">\/\/ \u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 \u044d\u043a\u0440\u0430\u043d\u0430 \/\/ [{ x: 48, y: 40, w: 120, h: 80 },   { x: 180, y: 40, w: 236, h: 88 }] <\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u042d\u0442\u043e \u0435\u0449\u0451 \u043d\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0431\u043b\u043e\u043a\u043e\u0432 <em>Minecraft<\/em>. <em>Yoga <\/em>\u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 <em>layout <\/em>\u0432 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0437\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0438. \u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u0432 \u043c\u0438\u0440\u043e\u0432\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440.<\/p>\n<h4>\u0421\u0432\u044f\u0437\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430 \u0441 \u0443\u0437\u043b\u0430\u043c\u0438 Yoga<\/h4>\n<p><em>Yoga <\/em>\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0443. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e <code>McNode<\/code> \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0443\u0437\u0435\u043b <em>Yoga<\/em>:<\/p>\n<pre><code class=\"typescript\">import Yoga from 'yoga-layout';function createNode(type: McNode['type'], tag?: string): McNode {  return {    type,    tag,    children: [],    attrs: {},    parent: null,    yogaNode: Yoga.Node.create(),    style: {},  };}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041c\u0435\u0442\u043e\u0434\u044b <code>createElement <\/code>\u0438 <code>createText <\/code>\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u041f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0440\u0435\u0431\u0451\u043d\u043a\u0430 <code>appendChild<\/code>, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 <code>parent.yogaNode.insertChild(...)<\/code>. \u041f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>removeChild <\/code>\u0443 \u0443\u0437\u043b\u0430 <em>Yoga<\/em>. \u0422\u0430\u043a \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 <em>layout <\/em>\u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441 \u0434\u0435\u0440\u0435\u0432\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 <em>Angular<\/em>.<\/p>\n<h4>\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b Yoga<\/h4>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0448\u0430\u0431\u043b\u043e\u043d \u0437\u0430\u0434\u0430\u0451\u0442 \u0442\u0430\u043a\u0443\u044e \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0443: <\/p>\n<pre><code class=\"xml\">&lt;div style=\"flex-direction: row; padding: 16px; gap: 12px\"&gt;  &lt;div style=\"width: 120px; height: 80px; background: blue_concrete\"&gt;&lt;\/div&gt;  &lt;div style=\"flex: 1; background: gray_concrete\"&gt;&lt;\/div&gt;&lt;\/div&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p> \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 120 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0412\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043c\u0435\u0441\u0442\u043e. Yoga \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u0437 style \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u0432 \u0432\u044b\u0437\u043e\u0432\u044b \u0432\u0440\u043e\u0434\u0435 setWidth, setPadding \u0438 setFlex.  \u0414\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 Angular \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 setStyle. \u0412 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0435 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 applyStyle \u0438 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u0441\u0446\u0435\u043d\u0443 \u043a\u0430\u043a \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0443\u044e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"typescript\">setStyle(  el: McNode,  style: string,  value: any,  flags?: RendererStyleFlags2,): void {  applyStyle(el, style, value);  this.markDirty();}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 <code>applyStyle <\/code>\u0438\u043c\u0435\u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043a <em>camelCase<\/em>, \u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <em>toLen<\/em>. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:  <\/p>\n<pre><code class=\"typescript\">const y = el.yogaNode;switch (name) {  case 'width': return y.setWidth(toLen(str));  case 'height': return y.setHeight(toLen(str));  case 'flex': return y.setFlex(toLen(str) as number | undefined);  case 'gap': return void y.setGap(Gutter.All, toLen(str));}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>style=\"...\"<\/code> \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 <code>setAttribute<\/code>. \u0415\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0432 <code>applyStyle<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 <code>[style.width]<\/code> \u0432 \u0438\u0442\u043e\u0433\u0435 \u043c\u0435\u043d\u044f\u044e\u0442 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0443\u0437\u0435\u043b <em>Yoga<\/em>. \u0426\u0432\u0435\u0442\u0430 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e: <em>background <\/em>\u0438 <em>color <\/em>\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 <em>McNode<\/em> \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438 \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u0432 \u0440\u0430\u0441\u0447\u0451\u0442\u0435 <em>layout<\/em>.<\/p>\n<h4>\u041f\u0435\u0440\u0435\u0441\u0447\u0451\u0442 layout \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/h4>\n<p>\u0412 \u0444\u0430\u0431\u0440\u0438\u043a\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u0443\u0437\u043b\u0443 <em>Yoga <\/em>\u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430. Callback <code>markDirty<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0432 <code>MinecraftRenderer<\/code>, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0444\u043b\u0430\u0433 <code>dirty<\/code> \u0443 \u0444\u0430\u0431\u0440\u0438\u043a\u0438. \u042d\u0442\u043e\u0442 \u0444\u043b\u0430\u0433 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u0446\u0435\u043d\u0443 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c.\u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 <em>Angular <\/em>\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 <code>RendererFactory2.end()<\/code>. \u0412 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <em>Minecraft <\/em>\u0437\u0434\u0435\u0441\u044c \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0441\u0447\u0451\u0442:<\/p>\n<pre><code class=\"typescript\">end(): void {  if (!this.dirty || this.scheduled) return;  this.scheduled = true;  setTimeout(() =&gt; {    this.scheduled = false;    this.dirty = false;    this.flush();  }, 0);}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u0430\u043a \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u0438\u043d \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432<code> flush()<\/code>. \u0412 \u0435\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0441\u0447\u0451\u0442 <em>Yoga<\/em>:<\/p>\n<pre><code class=\"typescript\">this.root.yogaNode.calculateLayout(  this.screen.width,  this.screen.height,  Direction.LTR,);<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c <code>collectPaint <\/code>\u043e\u0431\u0445\u043e\u0434\u0438\u0442 \u0434\u0435\u0440\u0435\u0432\u043e \u0438 \u0447\u0438\u0442\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0441\u0447\u0451\u0442\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u0443\u0437\u043b\u0430. \u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b <em>Yoga <\/em>\u0437\u0430\u0434\u0430\u043d\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a \u043d\u0438\u043c \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f: <\/p>\n<pre><code class=\"typescript\">const l = node.yogaNode.getComputedLayout();const x = offX + l.left;const y = offY + l.top;const w = Math.round(l.width);const h = Math.round(l.height);<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e \u044d\u0442\u0438\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0432 <em>MinecraftPainter<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f <em>Minecraft<\/em>.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ff3\/e71\/232\/ff3e7123284108b5dc80697dd7938c86.png\" alt=\"\u0420\u0438\u0441. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 layout-\u0430\" title=\"\u0420\u0438\u0441. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 layout-\u0430\" width=\"2171\" height=\"1251\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/ff3\/e71\/232\/ff3e7123284108b5dc80697dd7938c86.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ff3\/e71\/232\/ff3e7123284108b5dc80697dd7938c86.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 layout-\u0430<\/figcaption><\/div>\n<\/figure>\n<h3>\u0418\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h3>\n<p>\u0421 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u0435\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430. <em>Yoga <\/em>\u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u0442\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c \u0438\u043b\u0438 \u043a\u0430\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 <em>PNG<\/em>. \u0414\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f [\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f](<a href=\"https:\/\/www.yogalayout.dev\/docs\/advanced\/external-layout-systems\" rel=\"noopener nofollow\">https:\/\/www.yogalayout.dev\/docs\/advanced\/external-layout-systems<\/a>). \u0414\u0432\u0438\u0436\u043e\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0435\u0439 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u0430 \u043e\u043d\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e.\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0435\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0438\u0440\u0438\u043d\u0430, \u0432\u044b\u0441\u043e\u0442\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0437 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0438 \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044b. \u0415\u0441\u043b\u0438 \u043d\u0430\u0434\u043f\u0438\u0441\u044c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0434\u043b\u0438\u043d\u043d\u0435\u0435, \u0435\u0451 \u0432\u044b\u0441\u043e\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u0438 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0438\u0436\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0435\u0433\u043e \u0443\u0437\u0435\u043b <em>Yoga <\/em>\u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>markDirty()<\/code>, \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0441\u0447\u0451\u0442\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.\u0417\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439: \u0444\u043b\u0430\u0433 <code>dirty<\/code> \u0444\u0430\u0431\u0440\u0438\u043a\u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u0430 <code>yogaNode.markDirty()<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 Yoga, \u0447\u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f. \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u0430: <\/p>\n<pre><code class=\"typescript\">setValue(node: McNode, value: string): void {  node.value = value;  if (node.type === 'text') node.yogaNode.markDirty();  this.markDirty();}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 <em>layout <\/em>\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0417\u0430\u043b\u0438\u0442\u044c \u0444\u043e\u043d \u0443\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c.<\/p>\n<h3>\u0420\u0430\u0441\u0442\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430<\/h3>\n<p>\u041c\u043e\u0436\u043d\u043e \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 <em>canvas<\/em>, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0438 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 <em>Minecraft<\/em>. \u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>opentype.js<\/code>, \u0431\u0435\u0437 canvas.<\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0447\u0438\u0442\u0430\u0435\u0442 <em>TTF<\/em>&#8212; \u0438 <em>OTF<\/em>-\u0444\u0430\u0439\u043b\u044b \u0438 \u0434\u0430\u0451\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043d\u0442\u0443\u0440\u0430\u043c \u0433\u043b\u0438\u0444\u043e\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u043e\u0440\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u0420\u0430\u0441\u0442\u0435\u0440\u0438\u0437\u0430\u0442\u043e\u0440 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0451\u043d\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442 \u043a\u0440\u0438\u0432\u044b\u0435 \u043a\u043e\u043d\u0442\u0443\u0440\u0430 \u043d\u0430 \u043e\u0442\u0440\u0435\u0437\u043a\u0438 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432\u043d\u0443\u0442\u0440\u044c \u0431\u0443\u043a\u0432\u044b.<\/p>\n<p>\u041e\u0434\u043d\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u043d\u043a\u0438\u0445 \u0448\u0442\u0440\u0438\u0445\u043e\u0432: \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0443\u0440 \u043b\u043e\u0436\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0442\u043a\u0443. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0434\u0435\u0432\u044f\u0442\u044c \u0442\u043e\u0447\u0435\u043a, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0441\u0435\u0442\u043a\u043e\u0439 3 \u043d\u0430 3. \u0415\u0441\u043b\u0438 \u0434\u043e\u043b\u044f \u0442\u043e\u0447\u0435\u043a \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0443\u0440\u0430 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 \u043f\u043e\u0440\u043e\u0433\u0430, \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>\u042d\u0442\u043e \u0441\u0443\u043f\u0435\u0440\u0441\u044d\u043c\u043f\u043b\u0438\u043d\u0433. \u0417\u0434\u0435\u0441\u044c \u043e\u043d \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u0431\u0443\u043a\u0432\u044b \u043d\u0430 \u0433\u0440\u0443\u0431\u043e\u0439 \u0441\u0435\u0442\u043a\u0435. \u0421\u0430\u043c \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043b\u0438\u0431\u043e \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d, \u043b\u0438\u0431\u043e \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d; \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0433\u043e \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442.<\/p>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0438 \u043f\u0440\u0438 \u0440\u0430\u0441\u0447\u0451\u0442\u0435 <em>layout<\/em>. \u0421\u0442\u0440\u043e\u043a\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043f\u043e \u0441\u043b\u043e\u0432\u0430\u043c, \u0430 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c. \u041a\u043e\u043d\u0442\u0443\u0440\u044b \u0438 \u0440\u0430\u0441\u0442\u0435\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0433\u043b\u0438\u0444\u044b \u043a\u044d\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u0431\u0443\u043a\u0432\u0443 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n<p>\u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0418\u0445 \u0446\u0432\u0435\u0442 \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>color<\/code>, \u0430 \u0444\u0430\u0439\u043b \u0448\u0440\u0438\u0444\u0442\u0430 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>font-family<\/code> \u0438\u0437 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/466\/df2\/901\/466df2901ac6b49ec340d64bdfd025d8.png\" alt=\"\u0420\u0438\u0441. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430\" title=\"\u0420\u0438\u0441. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430\" width=\"1604\" height=\"898\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/466\/df2\/901\/466df2901ac6b49ec340d64bdfd025d8.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/466\/df2\/901\/466df2901ac6b49ec340d64bdfd025d8.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<h3>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043f\u043e\u0434\u0431\u043e\u0440 \u0446\u0432\u0435\u0442\u043e\u0432<\/h3>\n<p>\u0421 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u043f\u0440\u043e\u0449\u0435: \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432 \u0444\u0430\u0439\u043b\u0435. <em>PNG <\/em>\u0438 <em>JPEG <\/em>\u0434\u0435\u043a\u043e\u0434\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>pngjs<\/code> \u0438 <code>jpeg-js<\/code>, \u0437\u0430\u0442\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0440\u0430\u0437\u043c\u0435\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 <em>Yoga<\/em>.\u041f\u0440\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u0443\u0441\u0440\u0435\u0434\u043d\u044f\u044e\u0442\u0441\u044f \u0446\u0432\u0435\u0442\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438, \u043f\u0440\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043f\u0438\u043a\u0441\u0435\u043b\u044c. \u041f\u0438\u043a\u0441\u0435\u043b\u0438 \u0441 \u0430\u043b\u044c\u0444\u043e\u0439 \u043d\u0438\u0436\u0435 \u043f\u043e\u0440\u043e\u0433\u0430 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f. \u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f.\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u0442\u044c \u0431\u043b\u043e\u043a \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430. \u0412 \u043f\u0430\u043b\u0438\u0442\u0440\u0435 \u0435\u0441\u0442\u044c \u0431\u0435\u0442\u043e\u043d, \u0448\u0435\u0440\u0441\u0442\u044c \u0438 \u0442\u0435\u0440\u0440\u0430\u043a\u043e\u0442\u0430. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u0437\u0430\u043f\u0438\u0441\u0430\u043d \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0440\u0435\u0434\u043d\u0438\u0439 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b. \u0420\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0441 \u043d\u0443\u0436\u043d\u044b\u043c <em>RGB <\/em>\u043f\u043e \u0432\u0437\u0432\u0435\u0448\u0435\u043d\u043d\u043e\u043c\u0443 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044e <code>redmean<\/code> \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442.\u0422\u0430\u043a \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0438 \u0446\u0432\u0435\u0442\u0430 \u0432\u0440\u043e\u0434\u0435 <code>#a144ff<\/code> \u0432 \u0441\u0442\u0438\u043b\u044f\u0445. \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u0435\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e <code>background: black_concrete<\/code> \u0438\u043b\u0438 <code>color: white_wool<\/code>.\u0422\u043e\u0447\u043d\u043e\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0435 \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f: \u043d\u0430\u0431\u043e\u0440 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d, \u0430 \u0443 \u0431\u043b\u043e\u043a\u043e\u0432 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b. \u0417\u0430\u0442\u043e \u0434\u0430\u0436\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f <em>Angular <\/em>\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0438\u0437 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 <em>Minecraft<\/em>.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f8b\/d53\/de7\/f8bd53de7ea3a952053a460115e708de.png\" alt=\"\u0420\u0438\u0441. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a\" title=\"\u0420\u0438\u0441. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a\" width=\"2438\" height=\"1291\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/f8b\/d53\/de7\/f8bd53de7ea3a952053a460115e708de.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f8b\/d53\/de7\/f8bd53de7ea3a952053a460115e708de.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a<\/figcaption><\/div>\n<\/figure>\n<h3>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439<\/h3>\n<p>\u041a \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0437\u043d\u0430\u0435\u0442 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0444\u043e\u043d\u043e\u0432 \u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u0415\u0441\u043b\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439, \u0442\u0430\u043a\u043e\u0439 \u044d\u043a\u0440\u0430\u043d \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0444\u043e\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441\u0440\u0430\u0437\u0443 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c. \u041f\u0438\u043a\u0441\u0435\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u043e\u0441\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u043e\u0441\u044b \u043d\u0430 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442 \u043f\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0448\u0438\u0440\u0438\u043d\u0435 \u0438 \u0433\u043b\u0443\u0431\u0438\u043d\u0435, \u043e\u043d\u0438 \u0441\u043a\u043b\u0435\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438.\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043f\u043b\u043e\u0448\u043d\u043e\u0439 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0448\u0442\u0440\u0438\u0445 \u0431\u0443\u043a\u0432\u044b \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0439 \u0432\u044b\u0442\u044f\u043d\u0443\u0442\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c\u044e. \u0414\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>summon minecraft:block_display<\/code> \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u043c, \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u043c \u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c.\u0427\u0442\u043e\u0431\u044b \u0442\u0435\u043a\u0441\u0442 \u0431\u044b\u043b \u0432\u0438\u0434\u0435\u043d \u043f\u043e\u0432\u0435\u0440\u0445 \u0444\u043e\u043d\u0430, \u0441\u043b\u043e\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u0435\u0441\u0435\u043d\u044b \u043f\u043e \u0433\u043b\u0443\u0431\u0438\u043d\u0435. \u0427\u0435\u043c \u0433\u043b\u0443\u0431\u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u043b\u043e\u0436\u0435\u043d \u0432 \u0434\u0435\u0440\u0435\u0432\u043e, \u0442\u0435\u043c \u0431\u043b\u0438\u0436\u0435 \u043a \u0437\u0440\u0438\u0442\u0435\u043b\u044e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439. \u0420\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0445\u0440\u0430\u043d\u0438\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0441 \u043d\u043e\u0432\u044b\u043c. \u0421\u043e\u0432\u043f\u0430\u0432\u0448\u0438\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043c\u0435\u0441\u0442\u0435, \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>summon<\/code>, \u0438\u0441\u0447\u0435\u0437\u043d\u0443\u0432\u0448\u0438\u0435 \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>kill<\/code>. \u041f\u0440\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0438 \u0433\u043b\u0443\u0431\u0438\u043d\u0430.\u0415\u0441\u043b\u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u0430, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043d\u043e\u0432\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u043e\u043d \u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u0447\u0430\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u0415\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0435\u0436\u043d\u0438\u043c, \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f.\u041f\u0435\u0440\u0435\u0441\u0447\u0451\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043e\u0442 <em>Angular <\/em>\u0447\u0435\u0440\u0435\u0437 <code>RendererFactory2.end()<\/code>: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 <em>Yoga <\/em>\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e, \u0437\u0430\u0442\u0435\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u0432 <em>Minecraft<\/em>.<\/p>\n<h3>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/h3>\n<p>\u0414\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0443 <code>Renderer2<\/code> \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>listen()<\/code>. \u0427\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e <em>Angular <\/em>\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0438\u0433\u0440\u043e\u043a\u0430.  \u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u0438\u0438 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443. \u0420\u0430\u0437 \u0432 500 \u043c\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 <em>RCON<\/em><\/p>\n<p>\u041f\u043e\u0437\u0438\u0446\u0438\u044f \u0441 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0432\u044b\u0441\u043e\u0442\u0443 \u0433\u043b\u0430\u0437 \u043f\u0440\u043e\u0435\u0446\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430. \u0417\u0430\u0442\u0435\u043c \u043f\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u043c <em>Yoga<\/em>, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0434 \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439.  \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043b\u0438\u0437\u043a\u043e \u0438 \u0432\u0445\u043e\u0434\u0438\u0442 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f mouseenter \u0438 <code>click<\/code>. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b\u0445\u043e\u0434\u0438\u0442, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f mouseleave. \u0414\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u0442\u043e\u0439 \u0436\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0439\u0442\u0438 \u0438\u0437 \u0435\u0451 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f.\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0437\u0433\u043b\u044f\u0434\u0430 \u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438 \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f. \u0412 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u044d\u043a\u0440\u0430\u043d\u0430 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u0432 40 \u0431\u043b\u043e\u043a\u043e\u0432. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c \u0438\u0433\u0440\u043e\u043a\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b.\u0414\u043b\u044f <code>click <\/code>\u0435\u0441\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0442\u0438\u0435 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 \u0438 <code>stopPropagation().<\/code> \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 Angular zone, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u0441\u0451 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e:<code> (mouseenter)<\/code> \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443, <code>(mouseleave)<\/code> \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0435\u0451, <code>(click)<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. \u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044e \u043e \u043d\u0430\u0436\u0430\u0442\u0438\u0438, \u0442\u043e\u0442 \u043c\u0435\u043d\u044f\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0434\u0435\u043d\u044c, <em>Angular <\/em>\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 \u0438 \u0441\u0442\u0438\u043b\u0438. \u0412 <em>Minecraft <\/em>\u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0433\u043d\u043e\u0437. <\/p>\n<h3>\u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0435\u043a\u0441\u0442\u0430<\/h3>\n<p>\u041f\u0440\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430 \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u0430\u0441\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c <em>PNG<\/em>-\u043f\u0440\u0435\u0432\u044c\u044e \u0442\u0435\u043a\u0441\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u0440\u043e\u0432\u043d\u044b\u043c, \u0430 \u0432 <em>Minecraft <\/em>\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043c\u0435\u043b\u043a\u0438\u0445 \u0431\u0443\u043a\u0432 \u0431\u044b\u043b\u0438 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044b. \u0428\u0442\u0440\u0438\u0445\u0438 \u043d\u0435 \u0441\u0442\u044b\u043a\u043e\u0432\u0430\u043b\u0438\u0441\u044c.\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u0432 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u0446\u0435\u043d\u0442\u0440\u0435 \u0441 \u0434\u0440\u043e\u0431\u043d\u044b\u043c\u0438 \u043c\u0438\u0440\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438. \u0421\u0430\u043c\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u0441\u043c\u0435\u0449\u0430\u043b\u0430\u0441\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043d\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u041f\u043e \u0440\u0430\u0441\u0447\u0451\u0442\u0430\u043c \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u043b\u0438, \u043d\u043e \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f.\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u0439 \u0446\u0435\u043b\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u0432\u043e\u0437\u043b\u0435 \u0435\u0433\u043e \u0446\u0435\u043d\u0442\u0440\u0430. \u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u0434\u0432\u0438\u0433\u043e\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u044d\u0442\u043e\u0439 \u043e\u0431\u0449\u0435\u0439 \u0442\u043e\u0447\u043a\u0438.\u042d\u043a\u0440\u0430\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0430\u043b\u0435\u043a\u043e \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u0438\u0440\u0430, \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0443<em> X = -24535<\/em>. \u041f\u0440\u0438 \u0440\u0430\u0437\u0431\u043e\u0440\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u043e\u0431\u0449\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u043e\u0442\u0441\u0447\u0451\u0442\u0430 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0438\u0441\u0447\u0435\u0437\u043b\u0438, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043e \u0432 \u0438\u0433\u0440\u0435.<\/p>\n<h3>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430<\/h3>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 <em>Flexbox <\/em>\u0447\u0435\u0440\u0435\u0437 <em>Yoga<\/em>, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u043b\u0438\u0432\u043a\u0438, \u0442\u0435\u043a\u0441\u0442, <em>PNG\/JPEG<\/em> \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430. \u042d\u0442\u043e\u0433\u043e \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u043f\u043e\u0433\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<em>CSS<\/em>-\u043a\u043b\u0430\u0441\u0441\u044b \u043d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u0438\u043b\u0438 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f <em>inline <\/em>\u0438 \u0447\u0435\u0440\u0435\u0437 <em>Angular<\/em>-\u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438. \u041d\u0435\u0442 \u0442\u0435\u043d\u0435\u0439, \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0439 \u0438 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u0430\u0432\u0438\u043b <em>layout<\/em>. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043e\u0431\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u043a <em>DOM<\/em>, \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438.\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0445\u0441\u044f \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432, \u043e\u0431\u043c\u0435\u043d\u0430 \u043f\u043e <em>RCON <\/em>\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c. \u0411\u0435\u0437 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043c\u0435\u0440\u043e\u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u043c\u0438 \u0431\u043b\u043e\u043a\u0430\u043c\u0438.\u041f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 <em>Angular<\/em>-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043f\u043e\u0433\u043e\u0434\u0443, \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043c\u0438\u0440\u0435. \u0427\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0433\u043d\u043e\u0437 \u043d\u0430 \u0437\u0430\u0432\u0442\u0440\u0430, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u043a \u043a\u043d\u043e\u043f\u043a\u0435 &#171;\u0414\u0430\u043b\u0435\u0435&#187;.<\/p>\n<h3>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u0435\u0440\u0435\u0441\u0431\u043e\u0440\u043a\u0430 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0436\u0438\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f:  <\/p>\n<pre><code class=\"bash\">npm run dev<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0421\u043a\u0440\u0438\u043f\u0442 <em>dev.mjs<\/em> \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0432 <em>src<\/em>. \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0438\u043b\u0438 <em>TypeScript<\/em>-\u0444\u0430\u0439\u043b\u0430 \u043e\u043d \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0441\u0431\u043e\u0440\u043a\u0443, \u0430 \u043f\u0440\u0438 \u0435\u0451 \u0443\u0441\u043f\u0435\u0445\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u0441\u0442\u0430\u0440\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e. \u0412\u0440\u0443\u0447\u043d\u0443\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u0438\u043b\u0438 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 <em>Minecraft <\/em>\u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c<code> font-size: 28px<\/code> \u043d\u0430 <code>font-size: 36px<\/code> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u0433\u043e\u0434\u044b \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0444\u0430\u0439\u043b. \u041f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430 <em>Yoga <\/em>\u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0430 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0440\u0443\u043f\u043d\u0435\u0435. \u0422\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0446\u0432\u0435\u0442\u0430 \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 <em>Minecraft<\/em>.  \u041f\u043e \u0440\u0430\u0431\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0443 \u044d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 <em>hot reload<\/em>, \u043d\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0441\u0431\u043e\u0440\u043a\u0430 \u0438 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 <em>Node.js<\/em>. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f: \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0434\u0435\u043d\u044c \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0430 \u043f\u0440\u043e\u0433\u043d\u043e\u0437 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438, \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438. \u0415\u0441\u043b\u0438 \u0441\u0431\u043e\u0440\u043a\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. <\/p>\n<h3>\u041e\u0431\u0449\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b<\/h3>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bed\/b0c\/1b8\/bedb0c1b8ec1c84c407317991f213e04.png\" width=\"1512\" height=\"985\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/bed\/b0c\/1b8\/bedb0c1b8ec1c84c407317991f213e04.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bed\/b0c\/1b8\/bedb0c1b8ec1c84c407317991f213e04.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 <em>Node.js<\/em> \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 <code>platformMinecraft<\/code>. Angular \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 <code>Renderer2<\/code>. \u0420\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0435\u0440\u0435\u0432\u043e <code>McNode<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438 \u0441\u0442\u0438\u043b\u0438 \u0432 Yoga \u0438 \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0440\u0430\u0441\u0447\u0451\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442.<\/p>\n<p>\u041f\u043e \u044d\u0442\u043e\u0439 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: \u0444\u043e\u043d\u044b \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438, \u0442\u0435\u043a\u0441\u0442 \u0440\u0430\u0441\u0442\u0435\u0440\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0438\u0437 \u043a\u043e\u043d\u0442\u0443\u0440\u043e\u0432 \u0448\u0440\u0438\u0444\u0442\u0430, <em>PNG <\/em>\u0438 <em>JPEG <\/em>\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0434\u043e \u043d\u0443\u0436\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432. \u0426\u0432\u0435\u0442\u0430 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u043c\u0438 Minecraft. \u041e\u0434\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f, \u043d\u043e\u0432\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c, \u0438 \u0447\u0435\u0440\u0435\u0437 <em>RCON <\/em>\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0445\u0441\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432. \u0412 \u043c\u0438\u0440\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 <code>block_display<\/code> \u0441 \u0434\u0440\u043e\u0431\u043d\u044b\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u043c \u0438 \u043e\u0431\u0449\u0435\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u043e\u0442\u0441\u0447\u0451\u0442\u0430.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043e\u043f\u0440\u043e\u0441\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438\u0433\u0440\u043e\u043a\u043e\u0432. <code>MinecraftInput<\/code> \u043f\u0440\u043e\u0435\u0446\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0435 \u0432 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 <code>listen()<\/code>. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <em>Angular<\/em>, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f \u0446\u0438\u043a\u043b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u0438 \u043d\u0430 \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0433\u043e\u0434\u044b, \u0438 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430.<\/p>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. <em>Yoga <\/em>\u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 <em>layout<\/em>, \u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0432\u0432\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<h2>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0430 \u043f\u043e\u0433\u043e\u0434\u044b<\/h2>\n<p>\u041d\u0430 \u044d\u0442\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0430 \u043f\u043e\u0433\u043e\u0434\u044b \u0434\u043b\u044f \u0414\u0443\u0431\u043d\u044b \u043d\u0430 \u0441\u0435\u043c\u044c \u0434\u043d\u0435\u0439. \u041d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 880 \u043d\u0430 550 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0435\u0441\u0442\u044c \u0434\u0430\u0442\u0430, \u043f\u043e\u0433\u043e\u0434\u043d\u0430\u044f \u0438\u043a\u043e\u043d\u043a\u0430, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043d\u044f, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0442\u0435\u0440 \u0438 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u043e\u0441\u0430\u0434\u043a\u043e\u0432. \u0412\u043d\u0438\u0437\u0443 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0434\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0434\u043d\u0435\u0439.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0442\u043a\u0440\u044b\u0442 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u043f\u0440\u043e\u0433\u043d\u043e\u0437. \u0418\u0433\u0440\u043e\u043a \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0432\u043f\u0435\u0440\u0451\u0434, \u043e\u043d\u0430 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0437\u0430\u0432\u0442\u0440\u0430. \u041d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u0430\u0442\u0430, \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0438 \u043f\u043e\u0433\u043e\u0434\u043d\u0430\u044f \u0438\u043a\u043e\u043d\u043a\u0430. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0439\u0442\u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043e \u0434\u043d\u044f\u043c \u0438\u043b\u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430\u0437\u0430\u0434. \u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0434\u043d\u044f\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0438 \u043c\u0435\u043d\u044f\u0435\u0442 \u0446\u0432\u0435\u0442.<\/p>\n<p>\u0422\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c: \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0433\u0440\u043e\u043a\u0430 \u0432 <em>Minecraft <\/em>\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c \u0434\u043b\u044f <em>Angular<\/em>. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043c\u0438\u0440. \u041a\u043b\u0438\u043a \u0437\u0434\u0435\u0441\u044c \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438 \u0432\u0445\u043e\u0434\u0435 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438; \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b\u0448\u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u0442\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043e\u043f\u0438\u0441\u0430\u043d \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043e\u0431 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438\u0433\u0440\u043e\u043a\u0430.<\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0438\u0437 <em>Open-Meteo<\/em> \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0435 15 \u043c\u0438\u043d\u0443\u0442. \u041f\u043e\u043a\u0430 \u0438\u0434\u0451\u0442 \u043f\u0435\u0440\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0415\u0441\u043b\u0438 \u0441\u0432\u044f\u0437\u044c \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043f\u0440\u043e\u0433\u043d\u043e\u0437 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043c\u0435\u0442\u043a\u0443 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0447\u0435\u0440\u0435\u0437 \u043c\u0438\u043d\u0443\u0442\u0443.<\/p>\n<p>\u0412 \u043a\u043e\u0434\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b: \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0441\u0432\u043e\u0434\u043a\u0430 \u043f\u043e\u0433\u043e\u0434\u044b, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f. \u0421\u0435\u0440\u0432\u0438\u0441 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044e. \u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u0442\u0435\u043a\u0441\u0442\u0430 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043e\u043a, \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0438\u0433\u0440\u043e\u043a\u043e\u043c.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440\u044b Angular-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h4>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u0433\u043e\u0434\u044b \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0441 \u0434\u0432\u0443\u043c\u044f \u0432\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438. \u041d\u0438 \u043a\u043e\u043c\u0430\u043d\u0434 <em>Minecraft<\/em>, \u043d\u0438 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 <em>Yoga <\/em>\u0432 \u043d\u0451\u043c \u043d\u0435\u0442:<\/p>\n<pre><code class=\"typescript\">import { Component, Input } from '@angular\/core';@Component({  selector: 'weather-metric',  host: { style: 'flex: 1; gap: 6px; justify-content: center' },  template: `    &lt;div style=\"font-size: 16px; color: white_concrete\"&gt;{{ label }}&lt;\/div&gt;    &lt;div style=\"font-size: 28px; color: white_wool\"&gt;{{ value }}&lt;\/div&gt;  `,})export class WeatherMetricComponent {  @Input() label = '';  @Input() value = '';}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u044c \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0438\u0445 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u044d\u0442\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0432\u0438\u0434\u043d\u0430 \u0432 \u0441\u0442\u0438\u043b\u044f\u0445: \u0432\u043c\u0435\u0441\u0442\u043e CSS-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 inline-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0430 \u0446\u0432\u0435\u0442 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u0435\u043c \u0431\u043b\u043e\u043a\u0430.<\/p>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0441\u0432\u043e\u0434\u043a\u0430 \u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a. \u042d\u0442\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0435\u0437 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438:<\/p>\n<pre><code class=\"xml\">@if (day(); as forecast) {  &lt;weather-summary [day]=\"forecast\"&gt;&lt;\/weather-summary&gt;}&lt;weather-day-navigation  [index]=\"index()\"  [count]=\"weather.days().length\"  (step)=\"move($event)\"&gt;&lt;\/weather-day-navigation&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043d\u043e\u043c\u0435\u0440 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043d\u044f \u0438 \u0434\u043b\u0438\u043d\u0443 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0430. \u041a\u043d\u043e\u043f\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0451 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 <code>step.emit(-1)<\/code> \u0438\u043b\u0438 <code>step.emit(1)<\/code>. \u0412 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434:<\/p>\n<pre><code class=\"typescript\">move(delta: number): void {  const next = this.weather.days()[this.index() + delta];  if (next) this.selectedDate.set(next.date);}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code>selectedDate<\/code> \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 signal, \u0430 <code>index<\/code> \u0438 <code>day<\/code> \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>computed<\/code>. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0434\u0430\u0442\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u0432\u043e\u0434\u043a\u0443, \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043e\u043a \u0432 \u0435\u0451 \u0448\u0430\u0431\u043b\u043e\u043d\u0435.<\/p>\n<p>\u0421\u0430\u043c\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u0442\u043e\u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <em>Angular<\/em>-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u041d\u0438\u0436\u0435 \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f <code>McButtonComponent<\/code> \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n<pre><code class=\"typescript\">import { Component, EventEmitter, Input, Output, signal } from '@angular\/core';import { MinecraftUiEvent } from '..\/minecraft\/minecraft-platform';@Component({  selector: 'mc-button',  template: '&lt;ng-content&gt;&lt;\/ng-content&gt;',  host: {    'style': 'padding: 10px 18px; font-size: 18px',    '[style.background]':      'disabled ? \"gray_concrete\" : hovered() ? \"cyan_concrete\" : \"black_concrete\"',    '[style.color]': 'disabled ? \"light_gray_wool\" : \"white_wool\"',    '(click)': 'onClick($any($event))',    '(mouseenter)': 'hovered.set(true)',    '(mouseleave)': 'hovered.set(false)',  },})export class McButtonComponent {  @Input() disabled = false;  @Output() pressed = new EventEmitter&lt;MinecraftUiEvent&gt;();  hovered = signal(false);  onClick(event: MinecraftUiEvent): void {    event.stopPropagation();    if (this.disabled) return;    this.pressed.emit(event);  }}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u0438 \u0432\u0445\u043e\u0434\u0435 \u0438\u0433\u0440\u043e\u043a\u0430 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f <code>hovered<\/code>, \u0447\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443. \u0421\u043e\u0431\u044b\u0442\u0438\u0435 <code>click<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 <code>onClick<\/code>, \u0430 <code>pressed<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044e. \u041e\u0442\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>pressed<\/code> \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442. \u0412\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0438\u0433\u0440\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432 <code>MinecraftInput<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438.<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <code>Renderer2<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c <em>Angular<\/em>-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 <em>Minecraft<\/em>, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 <em>Node.js<\/em>, Yoga \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043f\u0440\u0435\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f <code>block_display<\/code>.<\/p>\n<p>\u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0430 \u043f\u043e\u0433\u043e\u0434\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043f\u043e\u043b\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f: \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435, \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0438\u0433\u0440\u043e\u043a\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a, \u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <em>Angular <\/em>\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u0435\u0440\u0435\u0441\u0431\u043e\u0440\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 <em>Minecraft<\/em>.<\/p>\n<p>\u0414\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0440\u0430\u0441\u0447\u0451\u0442 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438, \u0440\u0430\u0441\u0442\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u0432\u0432\u043e\u0434. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e\u0433\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 <em>Angular<\/em>-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b <em>Minecraft <\/em>\u0438\u043b\u0438 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043c\u0438\u0440\u043e\u0432\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c2f\/2c4\/753\/c2f2c4753797082b1b547343f9436690.png\" width=\"1985\" height=\"1229\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/c2f\/2c4\/753\/c2f2c4753797082b1b547343f9436690.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c2f\/2c4\/753\/c2f2c4753797082b1b547343f9436690.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041e\u0447\u0435\u043d\u044c \u0440\u0430\u0434 \u0447\u0442\u043e \u0432\u0441\u0451 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c! \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043e Minecraft \u0438 \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442! <\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a8d\/261\/706\/a8d261706c68315c5ba5236c846efa96.png\" width=\"667\" height=\"936\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a8d\/261\/706\/a8d261706c68315c5ba5236c846efa96.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a8d\/261\/706\/a8d261706c68315c5ba5236c846efa96.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0430 \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043c\u0438\u0440\u0435 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/youtu.be\/Ft3ESg_3pL8\" rel=\"noopener nofollow\">\u0432 \u0432\u0438\u0434\u0435\u043e \u043d\u0430 YouTube<\/a>.<\/p>\n<\/div>\n<p>\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\/1081682\/\">https:\/\/habr.com\/ru\/articles\/1081682\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0418\u0434\u0435\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 Minecraft. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 \u0438\u0437 \u0440\u0435\u0434\u0441\u0442\u043e\u0443\u043d\u0430, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c Node.js, \u043c\u043e\u0433\u043b\u043e \u0431\u044b \u0437\u0430\u043d\u044f\u0442\u044c \u043f\u043e\u043b\u0436\u0438\u0437\u043d\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Node.js \u0441\u043d\u0430\u0440\u0443\u0436\u0438, \u0430 Minecraft \u0441\u043b\u0443\u0436\u0438\u0442 \u0435\u043c\u0443 \u044d\u043a\u0440\u0430\u043d\u043e\u043c.\u0412 \u0445\u043e\u0434\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0433\u043e\u0434\u044b \u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0438\u0437 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043c\u0438\u0440\u0430. \u0417\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0441\u0442\u043e\u044f\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 Angular-\u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438.\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0442\u0440\u0438 \u0432\u0435\u0449\u0438: \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 Angular \u043d\u0430\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0440\u0430\u0441\u0447\u0451\u0442 \u0438\u0445 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b Minecraft. \u0412\u044b\u0431\u0435\u0440\u0435\u043c \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438.\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0432 Minecraft \u0447\u0435\u0440\u0435\u0437 RCON \u0438 block_display\u0414\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c RCON, \u043e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043c\u0438\u0440 \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c. \u0414\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0441\u043a\u0430\u0447\u0430\u0432 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435. RCON &#8212; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434. \u0427\u0435\u0440\u0435\u0437 npm-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 rcon-client \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438\u0437 Node.js \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043c\u0438\u0440.\u041f\u0435\u0440\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043e\u0447\u0435\u0432\u0438\u0434\u0435\u043d: \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u043b\u043e\u043a \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u043c. \u041a\u043e\u043c\u0430\u043d\u0434\u0430 setblock \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0431\u043b\u043e\u043a, \u0430 fill \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c. \u0422\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u044d\u043a\u0440\u0430\u043d, \u0438 \u044d\u0442\u043e\u0442 \u0440\u0435\u0436\u0438\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c.  \u0412\u043e\u0437\u044c\u043c\u0435\u043c \u044d\u043a\u0440\u0430\u043d 200 \u043d\u0430 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043d\u043e \u0443\u0436\u0435 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f 20 000 \u043f\u043e\u0437\u0438\u0446\u0438\u0439 \u0431\u043b\u043e\u043a\u043e\u0432. \u041f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u043d\u044f\u0442\u044c \u0443\u0447\u0430\u0441\u0442\u043a\u0438 \u043c\u0438\u0440\u0430, \u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430. \u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u044f\u0436\u0435\u043b\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0438 \u0434\u0430\u0436\u0435 \u0442\u0430\u043a, \u044d\u043a\u0440\u0430\u043d \u0442\u0430\u043a\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u043e\u043d \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0430\u043b.  \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f block_display. \u042d\u0442\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u0431\u043b\u043e\u043a\u0430 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0451 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0422\u0430\u043a\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 Minecraft Java Edition 1.19.4. \u042d\u0442\u043e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0434\u0435\u043d \u0432 \u043c\u0438\u0440\u0435, \u043d\u043e \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u0445 \u0432 \u043c\u0438\u0440\u0435.  \u0418\u0437 \u043c\u043e\u0434\u0435\u043b\u0438 \u0431\u043b\u043e\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u043d\u043a\u0438\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0438 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u044d\u043a\u0440\u0430\u043d\u0430. \u0412 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f pixelsPerBlock: 4 \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438 \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u043d\u0430 \u043f\u043b\u043e\u0449\u0430\u0434\u0438 \u043e\u0434\u043d\u043e\u0439 \u0433\u0440\u0430\u043d\u0438 \u0431\u043b\u043e\u043a\u0430. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0434\u043d\u043e\u0433\u043e. \u042d\u043a\u0440\u0430\u043d 880 \u043d\u0430 550 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 220 \u043d\u0430 137,5 \u0431\u043b\u043e\u043a\u0430. \u0422\u0430\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0432\u043f\u043e\u043b\u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0440\u0438\u043d\u0433\u0430.\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 Angular \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b\u0412 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 Angular-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 Angular. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0443\u0437\u043b\u044b, \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0442 \u0438\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439.\u041a\u043e\u0433\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, Angular \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043e\u043a \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0442\u0435, \u0447\u044c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u044b \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u0443\u0437\u043b\u0435. \u041f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0434 \u0443\u0437\u043b\u0430\u043c\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440. \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 DOM, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0438\u0441\u0443\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. Angular \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430\u043c\u0438, \u0430 \u0440\u0430\u0441\u0447\u0451\u0442 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.\u0414\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 Minecraft \u044d\u0442\u043e\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0443\u0447\u0430\u0441\u0442\u043e\u043a \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c: \u0432\u043c\u0435\u0441\u0442\u043e DOM \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0443\u0437\u043b\u044b, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 Yoga \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043c\u0438\u0440\u0435.Angular \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430. \u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043d\u0443\u0436\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u044b, \u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0441\u0442\u0438\u043b\u044f.\u041d\u0430\u0437\u043e\u0432\u0435\u043c \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 platformMinecraft. \u041e\u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 createPlatformFactory \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 platformCore. \u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 RCON, \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432: platformMinecraft([  { provide: MC_RCON, useValue: rcon },  { provide: MC_SCREEN, useValue: screen },  { provide: MC_FONT, useValue: font },]).bootstrapModule(AppModule);\u0412\u043d\u0443\u0442\u0440\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f MinecraftRendererFactory, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0434\u043b\u044f Minecraft. \u041e\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 Renderer2: createElement, createText, appendChild, setStyle, setValue \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 Angular \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0443\u0437\u043b\u0430\u043c\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430: &lt;div style=&#187;background: black_concrete; color: white_wool&#187;&gt;  {{ temperature() }}&lt;\/div&gt; \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0442\u0435\u043a\u0441\u0442\u0430, \u0438\u0445 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u041a\u043e\u0433\u0434\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 temperature() \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, Angular \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 \u0447\u0435\u0440\u0435\u0437 setValue. \u0420\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0434\u043b\u044f Minecraft \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u044d\u0442\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 McNode. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u0435\u0441\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c, \u0434\u0435\u0442\u0438, \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 \u0441\u0442\u0438\u043b\u0438. \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0443\u0437\u043b\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0441\u0442\u0440\u043e\u043a\u0443, \u0443\u0437\u043b\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. Angular \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430, \u0430 \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u044d\u0442\u043e \u0434\u0435\u0440\u0435\u0432\u043e.  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0443\u0437\u043b\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:appendChild(parent: McNode, child: McNode): void {  if (!parent || !child) return;  this.detach(child);  child.parent = parent;  parent.children.push(child);  parent.yogaNode.insertChild(    child.yogaNode,    parent.yogaNode.getChildCount(),  );  this.markDirty();}\u0417\u0434\u0435\u0441\u044c \u0440\u0435\u0431\u0451\u043d\u043e\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u0432 \u0434\u0432\u0430 \u0434\u0435\u0440\u0435\u0432\u0430: \u0434\u0435\u0440\u0435\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 McNode \u0438 \u0434\u0435\u0440\u0435\u0432\u043e Yoga, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412 \u043a\u043e\u043d\u0446\u0435 \u0441\u0446\u0435\u043d\u0430 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0430\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f Yoga \u0438 \u0440\u0430\u0441\u0447\u0451\u0442 layout\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u041d\u0443\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c, \u0433\u0434\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u0442\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043a\u0443\u0434\u0430 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u043e\u0441\u043b\u0435 \u0442\u0435\u043a\u0441\u0442\u0430. \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u044d\u0442\u0438\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0438\u0436\u043e\u043a layout. \u0412 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 Minecraft \u044d\u0442\u0443 \u0440\u0430\u0431\u043e\u0442\u0443 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c Yoga. Yoga \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u043f\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0430 Flexbox. \u0421\u0430\u043c \u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0438\u0441\u0443\u0435\u0442. \u041d\u0430 \u0432\u0445\u043e\u0434 \u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0440\u0430\u0441\u0447\u0451\u0442\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0438 \u0440\u0430\u0437\u043c\u0435\u0440, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b { x, y, w, h } \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438.\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 400 \u0438 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 120 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0443. \u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0441\u043e \u0432\u0441\u0435\u0445 \u0441\u0442\u043e\u0440\u043e\u043d, \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u0430\u0432\u0435\u043d 12 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c. \u0423 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u0430\u0434\u0430\u043d\u044b \u0448\u0438\u0440\u0438\u043d\u0430 120 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 80 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0412\u0442\u043e\u0440\u043e\u0439 \u0438\u043c\u0435\u0435\u0442 flex: 1 \u0438 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 \u0447\u0435\u0440\u0435\u0437 align-items: stretch \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f.\u041f\u043e\u0441\u043b\u0435 calculateLayout() \u0432\u044b\u0437\u043e\u0432 getComputedLayout() \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0443\u0437\u043b\u0430 \u0434\u0430\u0451\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u043e\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438: \/\/ \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442{ left: 16, top: 16, width: 120, height: 80 }\/\/ \u0412\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442{ left: 148, top: 16, width: 236, height: 88 } \u0412\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043b\u0435\u0432\u043e\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430, \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0430: 16 + 120 + 12 = 148. \u0415\u0433\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0441\u0442\u0430\u0442\u043e\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430: 400 &#8212; 16 &#8212; 16 &#8212; 120 &#8212; 12 = 236. \u0412\u044b\u0441\u043e\u0442\u0430 \u0440\u0430\u0432\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u0435 \u043c\u0435\u0436\u0434\u0443 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438: 120 &#8212; 16 &#8212; 16 = 88.  \u0415\u0441\u043b\u0438 \u0441\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0432 \u0442\u043e\u0447\u043a\u0435 { x: 32, y: 24 }, \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u0442\u043e \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442:\/\/ \u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 \u044d\u043a\u0440\u0430\u043d\u0430 \/\/ [{ x: 48, y: 40, w: 120, h: 80 },   { x: 180, y: 40, w: 236, h: 88 }] \u042d\u0442\u043e \u0435\u0449\u0451 \u043d\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0431\u043b\u043e\u043a\u043e\u0432 Minecraft. Yoga \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 layout \u0432 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0437\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0438. \u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u0432 \u043c\u0438\u0440\u043e\u0432\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440.\u0421\u0432\u044f\u0437\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430 \u0441 \u0443\u0437\u043b\u0430\u043c\u0438 YogaYoga \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0443. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e McNode \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0443\u0437\u0435\u043b Yoga:import Yoga from &#8216;yoga-layout&#8217;;function createNode(type: McNode[&#8216;type&#8217;], tag?: string): McNode {  return {    type,    tag,    children: [],    attrs: {},    parent: null,    yogaNode: Yoga.Node.create(),    style: {},  };}\u041c\u0435\u0442\u043e\u0434\u044b createElement \u0438 createText \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u041f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0440\u0435\u0431\u0451\u043d\u043a\u0430 appendChild, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 parent.yogaNode.insertChild(&#8230;). \u041f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f removeChild \u0443 \u0443\u0437\u043b\u0430 Yoga. \u0422\u0430\u043a \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 layout \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441 \u0434\u0435\u0440\u0435\u0432\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 Angular.\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b Yoga\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0448\u0430\u0431\u043b\u043e\u043d \u0437\u0430\u0434\u0430\u0451\u0442 \u0442\u0430\u043a\u0443\u044e \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0443: &lt;div style=&#187;flex-direction: row; padding: 16px; gap: 12px&#187;&gt;  &lt;div style=&#187;width: 120px; height: 80px; background: blue_concrete&#187;&gt;&lt;\/div&gt;  &lt;div style=&#187;flex: 1; background: gray_concrete&#187;&gt;&lt;\/div&gt;&lt;\/div&gt; \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 120 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0412\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043c\u0435\u0441\u0442\u043e. Yoga \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u0437 style \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u0432 \u0432\u044b\u0437\u043e\u0432\u044b \u0432\u0440\u043e\u0434\u0435 setWidth, setPadding \u0438 setFlex.  \u0414\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 Angular \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 setStyle. \u0412 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0435 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 applyStyle \u0438 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u0441\u0446\u0435\u043d\u0443 \u043a\u0430\u043a \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0443\u044e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f:setStyle(  el: McNode,  style: string,  value: any,  flags?: RendererStyleFlags2,): void {  applyStyle(el, style, value);  this.markDirty();}\u0412\u043d\u0443\u0442\u0440\u0438 applyStyle \u0438\u043c\u0435\u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043a camelCase, \u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 toLen. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:  const y = el.yogaNode;switch (name) {  case &#8216;width&#8217;: return y.setWidth(toLen(str));  case &#8216;height&#8217;: return y.setHeight(toLen(str));  case &#8216;flex&#8217;: return y.setFlex(toLen(str) as number | undefined);  case &#8216;gap&#8217;: return void y.setGap(Gutter.All, toLen(str));}\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 style=&#187;&#8230;&#187; \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 setAttribute. \u0415\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0432 applyStyle. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 [style.width] \u0432 \u0438\u0442\u043e\u0433\u0435 \u043c\u0435\u043d\u044f\u044e\u0442 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0443\u0437\u0435\u043b Yoga. \u0426\u0432\u0435\u0442\u0430 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e: background \u0438 color \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 McNode \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438 \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u0432 \u0440\u0430\u0441\u0447\u0451\u0442\u0435 layout.\u041f\u0435\u0440\u0435\u0441\u0447\u0451\u0442 layout \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0412 \u0444\u0430\u0431\u0440\u0438\u043a\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u0443\u0437\u043b\u0443 Yoga \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430. Callback markDirty, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0432 MinecraftRenderer, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0444\u043b\u0430\u0433 dirty \u0443 \u0444\u0430\u0431\u0440\u0438\u043a\u0438. \u042d\u0442\u043e\u0442 \u0444\u043b\u0430\u0433 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u0446\u0435\u043d\u0443 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c.\u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 Angular \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 RendererFactory2.end(). \u0412 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Minecraft \u0437\u0434\u0435\u0441\u044c \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0441\u0447\u0451\u0442:end(): void {  if (!this.dirty || this.scheduled) return;  this.scheduled = true;  setTimeout(()&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-494494","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/494494","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=494494"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/494494\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=494494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=494494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=494494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}