انتهت مشاركتي في بطولة البرمجة. لقد قمت بعمل جيد في التصفيات ، حيث قمت بحل 4 من أصل 6 مشاكل وكنت في المركز العشرين ، لذلك كانت هناك آمال بأن يكون أفضل 20 لاعب في النهائيات أيضًا.
لكن لسوء الحظ لم تحصل حتى على قائمة أفضل 100 شركة. بعد المعركة ، لم يلوحوا بقبضاتهم ، لكنني تمكنت من حل العديد من المهام الأخرى التي يجب إكمالها. أوجه انتباهكم إلى جميع المهام التي قمت بحلها.
شكر خاص للمساعدة في الحلول:
miraage toster.ru/user/miraageprofesor08 toster.ru/user/profesor08SmthTo toster.ru/user/SmthToRAX7 toster.ru/user/RAX7dimoff66 toster.ru/user/dimoff66vk.com/vladilen.mininالجولة النهائية
أ API غير متزامن من الكون الموازي. (15 نقطة)
الشرط.لقد أرسل لك زميلك في مطور الكون الموازي مكتبة التحكم في المركبة الفضائية الجديدة. لأن المركبة الفضائية شيء معقد ، ثم واجهة برمجة التطبيقات للمكتبة "ثقيلة" ، العدد الدقيق للطرق غير معروف ، بالطبع ، لا توجد وثائق. ولكن من المعروف أنه في عالم مواز ، يمشي الناس على السقف وينامون أثناء النهار ويعملون في الليل ، ويستخدمون أيضًا وظائف غير متزامنة فقط ويمررون دائمًا رد الاتصال كأول وسيطة. الرجال غريب! هنا على الأرض ، لفترة طويلة ، كل شخص يكتب عن الوعود. ومع ذلك ، تحتاج المكتبة إلى دمجها في المشروع. لذلك ، تلقيت مهمة كتابة برنامج تجميع يوفر واجهة برمجة التطبيقات (API) نفسها ، ولكن بالوعود.
تنسيق الإدخال
مثال لمصدر API:
const api = { a: { b: { c: callback => setTimeout(() => callback(null, 'hello'), 100) } }, aa: { bb: (callback, x, y) => setTimeout(() => callback(null, x + y), 200) } };
تنسيق الإخراج
يقدم الحل الخاص بك على النحو التالي:
module.exports = function promisify(api) {
مثال للاستخدام:
const promisedApi = promisify(api); promisedApi.abc() .then(res => console.log(res));
الملاحظات
يجب على المُرجع إرجاع وعد مرفوض في حالة حدوث خطأ عند استدعاء واجهة برمجة تطبيقات المصدر ، يقبل رد الاتصال دائمًا الخطأ باستخدام الوسيطة الأولى:
callback(error, data)
في واجهة برمجة التطبيقات الأصلية ، قد يكون هناك ثوابت (الأرقام والسلاسل والمنطقية) ، يجب إعادتها كما هي:
api.foo.myConst = 1; promisedApi.foo.myConst === 1;
يجب أن تكون تهيئة المجمّع "كسولة": يمكن أن تحتوي واجهة برمجة تطبيقات المصدر على عدد كبير من مساحات الأسماء ، وتحتاج إلى الوصول إليها عند استخدامها.
قرارفي المسابقة لم أحل هذه المشكلة تمامًا وحصلت على 12.86 نقطة من 15 ممكنة للحل. اعتدت العودية لتجاوز جميع الخصائص والاختلاط إذا كانت وظيفة.
وبعد نهاية الاختبار ، انتهيت من الحل باستخدام كائن وكيل. فقط مثل هذا الخيار اجتاز جميع الاختبارات. يوجد أدناه حل ، مع مراعاة التحسينات.
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)
لاحظ أن العقدة js تحتوي بالفعل على مثل هذه الأداة المساعدة
nodejs.org/dist/latest-v8.x/docs/api/util.html#util_util_promisify_original ، وهي تقبل فقط دالة يكون رد الاتصال الخاص بها هو الوسيطة الأخيرة ، وليس الأولى.
كل شيء عن الوكيل:
learn.javascript.ru/proxywww.youtube.com/watch؟v=np08WdS9OXgباء - أيام الأسبوع المتدرب (15 نقطة)
الشرط.فريق ياندكس لديه متدرب ستيبان. الوقت ينفد بالفعل ، لكن ليس لديه وقت في تخطيط الصفحة. مساعدة ستيبان تشكل واحدة منهم وفقا لتخطيط هذه المهمة.
يجب ألا يكون هناك مسافة بادئة في التخطيط من الحواف اليسرى والعلوية للصفحة. أيضا ، لا يمكن استخدام الصور. هنا هو التخطيط:
كما ترون ، يتكون التصميم من حجمين من البلاط: قياسي ومزدوج. يشغل البلاط القياسي 1/3 من عرض الشاشة ، مزدوج - 2/3. ارتفاع البلاط ثابت - 200px. المسافة بين البلاط 20 بكسل.
لون خلفية البلاط القياسي هو # 8a2be2 ، ولون مزدوج هو # 000.
نتيجة لذلك ، يجب أن تحصل على صفحة HTML مع تخطيط للتخطيط. يجب ألا يتجاوز حجم الصفحة 10 كيلو بايت.
يرجى ملاحظة:
يمكن كتابة القوالب والأنماط فقط في القوالب - لا يمكن استخدام JavaScript والصور ؛
في البداية ، تم اقتراح ملف html التالي:
github.com/vito2005/YandexCompetition/blob/master/final-2019/B/original.htmlقرارمن حيث المبدأ ، يمكنك الاستغناء عن الملف المصدر. ولكن ما زلت أخذت ذلك كأساس.
إزالة الخطوط والبرنامج النصي من العلامات لتقليل وزن الملف.
ثم أضاف 6 divs ولفها في غلاف.
الماكياج من خلال العرض: الشبكة
والنتيجة هي ما يلي:
<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 من الصور.
تنسيق الإدخال
الإدخال عبارة عن سلسلة تحتوي على صورة في base64
تنسيق الإخراج
إرجاع دالة traceImage ، التي تقبل ارتباطًا للصورة كمدخلات ، وتُرجع وعدًا يحل إلى السلسلة. يجب أن يحتوي الخط على تخطيط يكرر هذه الصورة.
يقدم الحل الخاص بك على النحو التالي:
function traceImage(imageSrc) {
الملاحظات
الصورة يمكن أن يكون أي حجم
الصورة ليست شفافة
لون بكسل فارغ - أبيض (r ، g ، b): (255 ، 255 ، 255)
تظهر الصورة 1 مستطيل معتم ملون
جميع الخطوط أفقية أو رأسية.
رمز يعمل في المتصفح
مثال
يتم إعطاء الصورة كسلسلة في base64 (في النموذج الذي سيتم تمريره إلى الدالة):
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لسوء الحظ ، لم ينجح الكود في جميع الاختبارات وسجل 30 نقطة من 40 نقطة ، وما زلت لا أستطيع فهم الأخطاء ، وسأكون ممتنًا إذا أشرت إلى أوجه القصور:
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) }) }
D. ركوب الخيل (40 نقطة).
الشرط.جينادي مثقف. يحب أن يجتمع الناس مثيرة للاهتمام. لكن كونه شخصًا حكيماً ومدهشًا ، فإنه يفعل ذلك فقط على الإنترنت. اكتشف جينادي مؤخرًا أنه يمكن العثور على محاورين مماثلين في معدل الذكاء في منتدى الشطرنج ، لكن المشكلة هي أن جينادي غير قادر على لعب الشطرنج ، وكل المعلمين يعتمدون على جافا سكريبت ، والتي يعطلها جينادي بعناية لتجنب احتمال التقاط الفيروس.
لمساعدة Gennady ، نقترح إجراء تعليمي للعب الشطرنج بدون جافا سكريبت ، والذي سيوضح كيف يمشي الحصان. يجب أن يبدو المعلم مثل رقعة الشطرنج. نقرت فوق القفص - إنها تظهر لك أين يمكن أن يذهب الحصان من هذا القفص.
تنسيق الإدخال
أتش تي أم أل وثيقة عند تحميل التي يتم رسمها رقعة الشطرنج
تنسيق الإخراج
سيتم اختبار المهمة في متصفح حقيقي (Chrome 77).
سيتم تحميل مستند html في المتصفح. ينقر الروبوت على خلايا مختلفة من حقل الشطرنج ويلتقط لقطات بعد النقرات.
يجب أن تلتزم لقطات الشاشة بالإشارة
مثال
الملاحظات
- تنفيذ CSS و HTML. لا يمكن استخدام جافا سكريبت.
- يجب أن يكون المخطط بالكامل مربّعًا ، بدون الظلال ، التدرجات ، الشرائح ، إلخ.
- عرض الخلية والارتفاع - 30 بكسل
- حقل الشطرنج موجود في الصفحة في أعلى اليسار ، بدون مسافة بادئة
- لون تحديد الخلية # FF0000
- لون الخلية، والذي قد يذهب الرقم # 0000FF
- لون فاتح الخلية # f4cd8d
- لون الخلية الداكنة
- ضوء الخلية العلوي الأيسر
- في البداية لم يتم تحديد خلية
يتم التحديد عن طريق النقر فوق خلية محددة ويبقى حتى النقر التالي
قرارلسوء الحظ ، خلال الساعات الأربع المخصصة ، لم أتمكن من تقديم حل كامل ، تمكنت من وضع تخطيط والنقر على الخلية ، وفقط بعد انتهاء البطولة ، وبدون مساعدة من زملاء من المنتديات ، أكملت هذه المهمة.
لذا ، فإن أول ما يجب فعله هو وضع نوع الإدخال = راديو لكل خلية ، وربط تسمية بها ، وتحديد التنسيق من خلال العرض: الشبكة ، وتقسيمها إلى 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>
رابط إلى إصدار العملأن تستمر ...