Yandex (फ्रंट-एंड डेवलपमेंट) 2019 से प्रोग्रामिंग चैम्पियनशिप से हल की गई समस्याओं का विश्लेषण

प्रोग्रामिंग चैम्पियनशिप में मेरी भागीदारी समाप्त हो गई। मैंने एक अच्छा काम किया, जिसमें 6 में से 4 समस्याओं को हल किया और 20 वें स्थान पर था, इसलिए उम्मीदें थीं कि शीर्ष 20 भी फाइनल में होंगे।
लेकिन दुर्भाग्य से टॉप 100 में भी नहीं आ पाया। लड़ाई के बाद, वे अपनी मुट्ठी नहीं हिलाते, लेकिन मैं कई अन्य कार्यों को पूरा करने में सक्षम था। आपके द्वारा हल किए गए सभी कार्यों को मैं आपके ध्यान में लाता हूं।

समाधान में मदद के लिए विशेष धन्यवाद:
चमत्कार toster.ru/user/miraage
profesor08 toster.ru/user/profesor08
SmthTo toster.ru/user/SmthTo
RAX7 toster.ru/user/RAX7
dimoff66 toster.ru/user/dimoff66
vk.com/vladilen.minin

फाइनल राउंड

A. समांतर ब्रह्मांड से अतुल्यकालिक एपीआई। (15 अंक)
स्थिति।

आपके साथी समानांतर ब्रह्मांड डेवलपर ने आपको अपना नया अंतरिक्ष यान नियंत्रण पुस्तकालय भेजा है। क्योंकि एक अंतरिक्ष यान एक जटिल चीज है, फिर लाइब्रेरी का एपीआई "वजनदार" है, तरीकों की सटीक संख्या अज्ञात है, निश्चित रूप से, कोई प्रलेखन नहीं। लेकिन यह ज्ञात है कि एक समानांतर ब्रह्मांड में, लोग छत पर चलते हैं, दिन में सोते हैं, रात में काम करते हैं, और केवल अतुल्यकालिक कार्यों का भी उपयोग करते हैं और हमेशा पहले तर्क के रूप में कॉलबैक पास करते हैं। अजीब लोग! यहां पृथ्वी पर, लंबे समय तक, हर कोई वादों पर लिखता है। हालांकि, पुस्तकालय को परियोजना में एकीकृत करने की आवश्यकता है। इसलिए, आपको एक रैपर लिखने का कार्य प्राप्त हुआ जो समान एपीआई प्रदान करेगा, लेकिन वादों पर।

इनपुट प्रारूप

उदाहरण स्रोत API:

const api = { a: { b: { c: callback => setTimeout(() => callback(null, 'hello'), 100) } }, aa: { bb: (callback, x, y) => setTimeout(() => callback(null, x + y), 200) } }; 

आउटपुट स्वरूप

अपना समाधान इस प्रकार प्रस्तुत करें:

 /** * @param {Object} api -  API * @returns {Object} */ module.exports = function promisify(api) { // ... return promisedApi; }; 

उपयोग उदाहरण:

 const promisedApi = promisify(api); promisedApi.abc() .then(res => console.log(res)); // => 'hello' 

नोट

स्रोत एपीआई को कॉल करते समय त्रुटि के मामले में रैपर को एक खारिज कर दिया वादा वापस करना चाहिए, कॉलबैक हमेशा पहले तर्क के साथ त्रुटि को स्वीकार करता है:

 callback(error, data) 

मूल API में, स्थिरांक (संख्याएँ, तार और बूलियन) हो सकते हैं, उन्हें निम्न प्रकार से लौटाना होगा:

 api.foo.myConst = 1; promisedApi.foo.myConst === 1; 

आवरण के आरंभीकरण को "आलसी" होना चाहिए: स्रोत एपीआई में बड़ी संख्या में नाम स्थान हो सकते हैं, और जैसे ही आप उनका उपयोग करते हैं, आपको उन्हें एक्सेस करने की आवश्यकता होती है।

निर्णय

प्रतियोगिता में मैंने इस समस्या को पूरी तरह से हल नहीं किया और समाधान के लिए 15 में से 12.86 अंक प्राप्त किए। मैंने पुनरावृत्ति का उपयोग सभी संपत्तियों को बायपास करने के लिए किया है और यदि यह एक फ़ंक्शन है, तो इसे हटा दें।
और परीक्षण के अंत के बाद, मैंने प्रॉक्सी ऑब्जेक्ट का उपयोग करके समाधान को अंतिम रूप दिया। केवल इस तरह के एक विकल्प ने सभी परीक्षणों को पारित किया। नीचे एक समाधान है, खाते में सुधार ले रहा है।

 function promisify (obj) { const cache = {} return new Proxy(obj, { get (target, prop) { const value = target[prop] const type = Object.prototype.toString.call(value) if (type === '[object Object]') { cache[prop] = promisify(value) //  ,   -  return cache[prop] } else if (type === '[object Function]') { cache[prop] = function (...args) { //    return new Promise((resolve, reject) => { const callback = (err, result) => { if (err) { reject(err) } else { resolve(result) } } value.call(this, callback, ...args) }) } return cache[prop] } return value } }) } 

ध्यान दें कि नोड js में पहले से ही इस तरह की उपयोगिता है नोडज्स.org / dist / latest-v8.x / docs / api / util.html#util_util_promisify_original , केवल यह एक फ़ंक्शन को स्वीकार करता है जिसका कॉलबैक अंतिम तर्क है, और पहला नहीं है।

सभी प्रॉक्सी के बारे में:

learn.javascript.ru/proxy
www.youtube.com/watch?v=np08WdS9OXg

B. साप्ताहिक इंटर्न (15 अंक)
स्थिति।

यांडेक्स टीम में एक प्रशिक्षु स्टीफन है। समय पहले ही समाप्त हो रहा है, लेकिन उसके पास पेज लेआउट के साथ समय नहीं है। स्टीफन इस कार्य के लेआउट के अनुसार उनमें से एक बनाने में मदद करें।

पृष्ठ के बाएं और ऊपरी किनारों से लेआउट पर कोई इंडेंटेशन नहीं होना चाहिए। इसके अलावा, छवियों का उपयोग नहीं किया जा सकता है। यहाँ लेआउट है:



जैसा कि आप देख सकते हैं, लेआउट में दो आकार की टाइलें हैं: मानक और डबल। मानक टाइल स्क्रीन चौड़ाई के 1/3 पर कब्जा कर लेती है, डबल - 2/3। निश्चित टाइल की ऊँचाई - 200px। टाइल्स के बीच की दूरी 20 पिक्सेल है।

मानक टाइल की पृष्ठभूमि का रंग # 8a2be2 है, दोहरे का रंग # 000 है।

नतीजतन, आपको लेआउट के लिए लेआउट के साथ एक HTML पृष्ठ मिलना चाहिए। पृष्ठ का आकार 10 केबी से अधिक नहीं होना चाहिए।

कृपया ध्यान दें:

केवल टेम्प्लेट और शैलियों को टेम्प्लेट में लिखा जा सकता है - जावास्क्रिप्ट और छवियों का उपयोग नहीं किया जा सकता है;

प्रारंभ में, निम्नलिखित HTML फ़ाइल प्रस्तावित की गई थी:

github.com/vito2005/YandexCompetition/blob/master/final-2019/B/original.html

निर्णय

सिद्धांत रूप में, आप स्रोत फ़ाइल के बिना कर सकते हैं। लेकिन मैंने फिर भी इसे एक आधार के रूप में लिया।
फ़ाइल वजन कम करने के लिए मार्कअप से फोंट और स्क्रिप्ट को हटा दिया गया।

फिर उसने 6 डिव जोड़े और उन्हें एक रैपर में लपेट दिया।

प्रदर्शन के माध्यम से मेकअप: ग्रिड

परिणाम निम्नलिखित है:

 <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <style> body { margin: 0; padding: 0; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } .banner1, .banner2, .banner3, .banner4, .banner7 { background: #8a2be2; height: 200px; } .banner5 { background: #000; grid-column: 2 / 4; } .banner6 { background: #000; grid-column: 1 / 3; } </style> </head> <body> <div class="wrapper"> <div class="banner1"></div> <div class="banner2"></div> <div class="banner3"></div> <div class="banner4"></div> <div class="banner5"></div> <div class="banner6"></div> <div class="banner7"></div> </div> </body> </html> 

C. सही आयत (40 अंक)
स्थिति।

बॉब एक ​​अभिव्यक्तिवादी कलाकार हैं। उनके सभी काम एक सफेद पृष्ठभूमि पर सख्ती से ऊर्ध्वाधर आयतों के रंग के हैं।

हाल ही में, उनका काम प्रसिद्ध पत्रिका टॉप आर्ट की वेबसाइट पर प्रकाशित हुआ। बॉब ने अपने कैनवस पर करीब से नज़र डालने का फैसला किया, पृष्ठ पर ज़ूम किया और अपने सही आयतों के धुंधले कोनों और फ़ज़ी किनारों से भयभीत था।

एक पूरी तरह से आदमी होने के नाते, उन्होंने समस्या का अध्ययन किया और अपनी उत्कृष्ट कृतियों को HTML में बदलने का फैसला किया ताकि लाइनें किसी भी कोण और किसी भी पैमाने पर परिपूर्ण रहें। अपनी योजना को पूरा करने के लिए, उन्होंने आपको चुना।

उसके लिए ऐसी सेवा लिखें जो चित्रों से html उत्पन्न कर सके।

इनपुट प्रारूप

इनपुट एक स्ट्रिंग है जिसमें बेस 64 में एक चित्र होता है

आउटपुट स्वरूप

ट्रेसइमेज फ़ंक्शन लौटाएं, जो इनपुट के रूप में चित्र के लिंक को स्वीकार करता है, और एक वादा देता है जो स्ट्रिंग को हल करता है। लाइन में एक लेआउट होना चाहिए जो इस तस्वीर को दोहराता है।

अपना समाधान इस प्रकार प्रस्तुत करें:

 /** * * @param {String} imageSrc - base64 ,  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...' * @returns {Promise} */ function traceImage(imageSrc) { //   } 

नोट

चित्र किसी भी आकार का हो सकता है
तस्वीर पारदर्शी नहीं है
खाली पिक्सेल रंग - सफेद (आर, जी, बी): (255, 255, 255)
छवि 1 रंगीन अपारदर्शी आयत दिखाती है
सभी लाइनें क्षैतिज या ऊर्ध्वाधर हैं।
कोड ब्राउज़र में चलता है

उदाहरण

चित्र को बेस 64 में एक स्ट्रिंग के रूप में दिया गया है (जिस रूप में इसे फ़ंक्शन में पास किया जाएगा):

gist.github.com/senaev/50460323558db543256cb7f196e7d81d



ऐसी तस्वीर के लिए, आप एक लाइन बना सकते हैं:

 <div> <div style=" position: absolute; width: 11px; height: 15px; top: 135px; left: 109px; background-color: rgb(255, 255, 0); "></div> </div> 

निर्णय

समाधान का सार छवि को फिट करने के लिए एक कैनवास बनाने के लिए है, वहां एक चित्र बनाएं और प्रत्येक पिक्सेल के रंग के बारे में जानकारी प्राप्त करने के लिए getImageData का उपयोग करना शुरू करें, फिर यह ऊपरी बाएँ किनारे से पिक्सेल पर पुनरावृति करने के लिए रहता है जब तक आपको एक सफेद पिक्सेल नहीं मिलता। अगला, क्षैतिज और ऊर्ध्वाधर कुल्हाड़ियों के साथ पिक्सेल के माध्यम से सॉर्ट करना जारी रखें जब तक कि हम फिर से एक सफेद पिक्सेल का सामना न करें, इसलिए हमें आयत की चौड़ाई और ऊंचाई मिलती है।

यह आलेख कैनवास के साथ काम करने और getImageData का उपयोग करने का विवरण देता है।
code.tutsplus.com/ru/tutorials/canvas-from-scratch-pixel-manipulation--net-20573
दुर्भाग्य से, मेरे कोड ने सभी परीक्षणों को पास नहीं किया और 40 में से 30 अंक हासिल किए, और मैं अभी भी त्रुटियों को नहीं समझ सका, यदि आप कमियों को इंगित करते हैं तो मैं आभारी रहूंगा:

 function traceImage (imgSrc) { function loadImg (src) { return new Promise((resolve, reject) => { if (typeof src !== 'string') reject('wrong data') const img = new Image() img.addEventListener('load', () => resolve(img)) img.addEventListener('error', err => reject(err)) img.src = src }) } function calcElementFromImage (img) { const TRANSPARENT_COLOR = [255, 255, 255, 1] const colorFromData = (data, i) => { return [data[i], data[i + 1], data[i + 2], data[i + 3] / 255] } const w = img.naturalWidth const h = img.naturalHeight const canvas = document.createElement('canvas') canvas.width = w canvas.height = h const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, w, h) const data = ctx.getImageData(0, 0, w, h).data let top, left, bgColor let lastIndex = 0 for (let i = lastIndex; i < data.length; i += 4) { const color = colorFromData(data, i) if (!color.every((c, i) => c === TRANSPARENT_COLOR[i])) { const px = i / 4 left = px % w top = px / w | 0 bgColor = color lastIndex = i break } } let width const maxLeftIndex = (w - left) * 4 + lastIndex for (let i = lastIndex; i < maxLeftIndex; i += 4) { const color = colorFromData(data, i) if (color.every((c, i) => c === TRANSPARENT_COLOR[i])) { const x = i / 4 % w width = x - left break } } let height const maxTopIndex = (h - top - 1) * w * 4 + lastIndex const hStep = w * 4 for (let i = lastIndex; i < maxTopIndex; i += hStep) { const color = colorFromData(data, i) if (color.every((c, i) => c === TRANSPARENT_COLOR[i])) { const y = i / 4 / w | 0 height = y - top break } } bgColor = Object.values(bgColor).join(',') return { parentWidth: w, parentHeight: h, top, left, width, height, bgColor } } return loadImg(imgSrc).then(img => { const data = calcElementFromImage(img) const { parentWidth, parentHeight, top, left, width, height, bgColor } = data const div = `<div style=" position: relative; width: ${parentWidth}px; height: ${parentHeight}px;"> <div style=" position: absolute; top: ${top}px; left: ${left}px; width: ${width}px; height: ${height}px; background-color: rgba(${bgColor})"></div> </div>` return Promise.resolve(div) }) } 

डी। हॉर्सबैक राइडिंग (40 अंक)।
स्थिति।

गेन्नेडी एक बुद्धिजीवी हैं। उसे दिलचस्प लोगों से मिलना पसंद है। लेकिन एक विवेकपूर्ण और अविश्वसनीय व्यक्ति होने के नाते, वह केवल इंटरनेट पर ऐसा करता है। हाल ही में, Gennady ने पाया कि IQ में तुलनीय इंटरकोक्यूटर्स शतरंज मंच पर पाए जा सकते हैं, लेकिन परेशानी यह है कि Gennady शतरंज खेलने में सक्षम नहीं है, और सभी शिक्षक जावास्क्रिप्ट पर आधारित हैं, जो Gennady वायरस को लेने की संभावना से बचने के लिए विनम्रतापूर्वक अक्षम करता है।

गेन्नेडी की मदद करने के लिए, हम सुझाव देते हैं कि बिना जावास्क्रिप्ट के शतरंज खेलने के लिए एक ट्यूटोरियल बनाया जाए, जिसमें दिखाया जाएगा कि घोड़ा कैसे चलता है। शिक्षक को शतरंज की बिसात दिखनी चाहिए। आप पिंजरे पर क्लिक करें - वे आपको दिखाते हैं कि घोड़ा इस पिंजरे से कहाँ जा सकता है।

इनपुट प्रारूप

html- डॉक्यूमेंट जब लोड हो रहा है जो एक शतरंज की बिसात है

आउटपुट स्वरूप

कार्य का परीक्षण एक वास्तविक ब्राउज़र (Chrome 77) में किया जाएगा।
आपका html दस्तावेज़ ब्राउज़र में लोड हो जाएगा। रोबोट शतरंज क्षेत्र की विभिन्न कोशिकाओं में क्लिक करता है और क्लिक के बाद स्क्रीनशॉट लेता है।
स्क्रीनशॉट को संदर्भ का अनुपालन करना चाहिए

उदाहरण



नोट

• सीएसएस और HTML कार्यान्वयन। जावास्क्रिप्ट का उपयोग नहीं किया जा सकता है।
• पूरे लेआउट को चौकोर होना चाहिए, बिना छाया, ग्रेडिएंट्स, फ़िलेलेट्स आदि।
• सेल चौड़ाई और ऊँचाई - 30 पिक्सेल
• शतरंज क्षेत्र पृष्ठ पर बाईं ओर शीर्ष पर है, बिना इंडेंटेशन के
• चयनित सेल रंग # .0000
• सेल का रंग जो # 0000ff का आंकड़ा देता है वह जा सकता है
• लाइट सेल कलर # f4cd8d
• डार्क सेल रंग। # 745853
• ऊपरी सेल प्रकाश छोड़ दिया
• प्रारंभ में कोई सेल चयनित नहीं है

चयन एक विशिष्ट सेल पर क्लिक करके होता है और अगले क्लिक तक रहता है

निर्णय

दुर्भाग्य से आवंटित 4 घंटे के लिए मैं पूरी तरह से एक समाधान प्रदान करने में सक्षम नहीं था, मैं लेआउट बनाने और सेल पर क्लिक करने में कामयाब रहा, और टूर्नामेंट समाप्त होने के बाद ही, मंचों से सहयोगियों की मदद के बिना, मैंने फिर भी इस कार्य को पूरा नहीं किया।

तो, पहली बात यह है कि प्रत्येक सेल के लिए इनपुट प्रकार = रेडियो को जगह दी गई थी, उन्हें एक लेबल बांधें, लेआउट को प्रदर्शन के माध्यम से सेट करें: ग्रिड और ग्रिड-टेम्पलेट-कॉलम के माध्यम से इसे 8 कॉलम में तोड़ना: दोहराना (8, 30 पीएक्स)। मैंने संभावित घोड़े की चाल के लिए लेआउट के साथ बहुत समय बिताया।

कठिनाई यह थी कि सीएसएस में आप पिछले तत्वों को स्टाइल नहीं कर सकते।

और यह इस मामले में हल नहीं है (जब स्टाइल को पिछले और बाद दोनों की आवश्यकता होती है)।
इसलिए, मार्कअप को प्रदूषित नहीं करने के लिए, मैंने छद्म तत्वों को जोड़ने का फैसला किया जो कि पूर्ण और पोस्ट के माध्यम से एक रैखिक ढाल द्वारा वर्गों में चित्रित किए गए हैं। मुझे बहुत समय लग गया और यह काम नहीं कर रहा था, लेकिन मुझे एक उत्कृष्ट समाधान की सलाह दी गई थी: चयनित सेल के लिए नीले रंग के 8 शेड सेट करें और इसे उसी रूप में व्यवस्थित करें।

परिणाम निम्नलिखित है:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>.white { background: #f4cd8d; } .black { background: #746864; } body { margin: 0; display: flex } div { display: grid; grid-template-columns: repeat(8, 30px); overflow: hidden; } input { display: none; } label { width: 30px; height: 30px; background: #f4cd8d; display: block; position: relative; } input[type="radio"]:checked + label { background: #FF0000; box-shadow: -30px -60px 0 0 #0000FF, -60px -30px 0 0 #0000FF, 30px -60px 0 0 #0000FF, 60px -30px 0 0 #0000FF, -30px 60px 0 0 #0000FF, -60px 30px 0 0 #0000FF, 30px 60px 0 0 #0000FF, 60px 30px 0 0 #0000FF; z-index: 100; position: relative; } </style> </head> <body> <div> <input type="radio" name="tag" id="a1"> <label class="white a1" for="a1"></label> <input type="radio" name="tag" id="b1"> <label class="black b1" for="b1"></label> <input type="radio" name="tag" id="c1"> <label class="white c1" for="c1"></label> <input type="radio" name="tag" id="d1"> <label class="black d1" for="d1"></label> <input type="radio" name="tag" id="e1"> <label class="white e1" for="e1"></label> <input type="radio" name="tag" id="f1"> <label class="black f1" for="f1"></label> <input type="radio" name="tag" id="g1"> <label class="white g1" for="g1"></label> <input type="radio" name="tag" id="h1"> <label class="black h1" for="h1"></label> ........... ........... <input type="radio" name="tag" id="a8"> <label class="black a8" for="a8"></label> <input type="radio" name="tag" id="b8"> <label class="white b8" for="b8"></label> <input type="radio" name="tag" id="c8"> <label class="black c8" for="c8"></label> <input type="radio" name="tag" id="d8"> <label class="white d8" for="d8"></label> <input type="radio" name="tag" id="e8"> <label class="black e8" for="e8"></label> <input type="radio" name="tag" id="f8"> <label class="white f8" for="f8"></label> <input type="radio" name="tag" id="g8"> <label class="black g8" for="g8"></label> <input type="radio" name="tag" id="h8"> <label class="white h8" for="h8"></label> </div> </body> </html> 

काम कर रहे संस्करण के लिए लिंक

जारी रखने के लिए ...