Partisipasi saya dalam kejuaraan pemrograman berakhir. Saya melakukan kualifikasi pekerjaan yang baik, setelah menyelesaikan 4 dari 6 masalah dan berada di posisi ke-20, jadi ada harapan bahwa 20 besar akan berada di final juga.
Namun sayangnya bahkan tidak masuk ke 100 besar. Setelah pertarungan, mereka tidak melambaikan tangan mereka, tetapi saya dapat menyelesaikan beberapa tugas lagi untuk diselesaikan. Saya memperhatikan semua tugas yang telah saya selesaikan.
Terima kasih khusus atas bantuan dalam solusi:
miraage toster.ru/user/miraageprofesor08 toster.ru/user/profesor08SmthTo toster.ru/user/SmthToRAX7 toster.ru/user/RAX7dimoff66 toster.ru/user/dimoff66vk.com/vladilen.mininBabak final
A. API Asinkron dari alam semesta paralel. (15 poin)
KetentuanSesama pengembang semesta paralel Anda telah mengirimkan pustaka kendali pesawat ruang angkasa baru kepada Anda. Karena sebuah pesawat ruang angkasa adalah hal yang rumit, maka API perpustakaan agak "berat", jumlah metode yang tepat tidak diketahui, tentu saja, tidak ada dokumentasi. Tetapi diketahui bahwa di alam semesta paralel, orang berjalan di langit-langit, tidur di siang hari, bekerja di malam hari, dan juga hanya menggunakan fungsi tidak sinkron dan selalu melewati panggilan balik sebagai argumen pertama. Orang-orang aneh! Di Bumi ini, untuk waktu yang lama, semua orang menulis tentang janji. Namun, perpustakaan perlu diintegrasikan ke dalam proyek. Karena itu, Anda menerima tugas untuk menulis pembungkus yang akan menyediakan API yang sama, tetapi dengan janji.
Format input
API sumber contoh:
const api = { a: { b: { c: callback => setTimeout(() => callback(null, 'hello'), 100) } }, aa: { bb: (callback, x, y) => setTimeout(() => callback(null, x + y), 200) } };
Format output
Kirimkan solusi Anda sebagai:
module.exports = function promisify(api) {
Contoh penggunaan:
const promisedApi = promisify(api); promisedApi.abc() .then(res => console.log(res));
Catatan
pembungkus harus mengembalikan janji yang ditolak jika terjadi kesalahan saat memanggil sumber API, panggilan balik selalu menerima kesalahan dengan argumen pertama:
callback(error, data)
di API asli, mungkin ada konstanta (angka, string dan Boolean), mereka harus dikembalikan seperti:
api.foo.myConst = 1; promisedApi.foo.myConst === 1;
inisialisasi wrapper harus "malas": API sumber dapat memiliki banyak ruang nama, dan Anda harus mengaksesnya saat Anda menggunakannya.
SolusiDalam kontes saya tidak menyelesaikan masalah ini sepenuhnya dan mendapatkan 12,86 poin dari 15 kemungkinan solusi. Saya menggunakan rekursi untuk mem-bypass semua properti dan promiscurate jika itu adalah fungsi.
Dan setelah akhir tes, saya menyelesaikan solusi dengan menggunakan objek Proxy. Hanya opsi seperti itu yang lulus semua tes. Di bawah ini adalah solusinya, dengan mempertimbangkan peningkatan akun.
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)
Perhatikan bahwa simpul js sudah memiliki utilitas seperti
simpuljs.org/dist/latest-v8.x/docs/api/util.html#util_util_promisify_original , hanya saja ia menerima fungsi yang panggilan baliknya adalah argumen terakhir, dan bukan yang pertama.
Semua Tentang Proksi:
pelajari.javascript.ru/proxywww.youtube.com/watch?v=np08WdS9OXgB. Magang hari kerja (15 poin)
KetentuanTim Yandex memiliki Stepan peserta pelatihan. Waktu sudah habis, tetapi dia tidak punya waktu dengan tata letak halaman. Bantu Stepan membuat salah satu dari mereka sesuai dengan tata letak tugas ini.
Seharusnya tidak ada lekukan pada tata letak dari tepi kiri dan atas halaman. Selain itu, gambar tidak dapat digunakan. Berikut tata letaknya:
Seperti yang Anda lihat, tata letak terdiri dari dua ukuran ubin: standar dan ganda. Ubin standar menempati 1/3 dari lebar layar, dua kali lipat - 2/3. Tinggi ubin tetap - 200px. Jarak antara ubin adalah 20 piksel.
Warna latar belakang ubin standar adalah # 8a2be2, warna ganda adalah # 000.
Akibatnya, Anda harus mendapatkan halaman HTML dengan tata letak untuk tata letak. Ukuran halaman tidak boleh lebih dari 10 KB.
Harap dicatat:
hanya templat dan gaya yang dapat ditulis dalam templat - JavaScript dan gambar tidak dapat digunakan;
Awalnya, file html berikut diusulkan:
github.com/vito2005/YandexCompetition/blob/master/final-2019/B/original.htmlSolusiPada prinsipnya, Anda bisa melakukannya tanpa file sumber. Tapi saya masih menganggapnya sebagai dasar.
Font dan skrip yang dihapus dari markup untuk mengurangi berat file.
Kemudian dia menambahkan 6 div dan membungkusnya dalam pembungkus.
Tampilan make-up through: grid
Hasilnya adalah sebagai berikut:
<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. Perfect Rectangles (40 poin)
KetentuanBob adalah seniman ekspresionis. Semua karyanya berwarna persegi panjang vertikal ketat dengan latar belakang putih.
Baru-baru ini, karyanya diterbitkan di situs majalah Top Art yang terkenal. Bob memutuskan untuk melihat lebih dekat pada kanvasnya, memperbesar halaman dan ngeri oleh sudut-sudut buram dan tepi kabur dari persegi panjangnya yang sempurna.
Menjadi seorang yang teliti, ia mempelajari masalahnya dan memutuskan untuk mengubah karya agungnya menjadi HTML sehingga garis-garisnya tetap sempurna di setiap sudut dan pada skala apa pun. Untuk memenuhi rencananya, dia memilihmu.
Tuliskan padanya layanan yang dapat menghasilkan html dari gambar.
Format input
Input adalah string yang berisi gambar di base64
Format output
Kembalikan fungsi traceImage, yang menerima tautan ke gambar sebagai input, dan mengembalikan janji yang diselesaikan ke string. Garis harus memiliki tata letak yang mengulangi gambar ini.
Kirimkan solusi Anda sebagai:
function traceImage(imageSrc) {
Catatan
Gambar bisa berapapun ukurannya
Gambar tidak transparan
Warna Piksel Kosong - Putih (r, g, b): (255, 255, 255)
Gambar menunjukkan 1 persegi panjang buram berwarna
Semua garis horizontal atau vertikal.
Kode berjalan di browser
Contoh
Gambar diberikan sebagai string di base64 (dalam bentuk di mana ia akan diteruskan ke fungsi):
gist.github.com/senaev/50460323558db543256cb7f196e7d81d
Untuk gambar seperti itu, Anda dapat membuat garis:
<div> <div style=" position: absolute; width: 11px; height: 15px; top: 135px; left: 109px; background-color: rgb(255, 255, 0); "></div> </div>
SolusiInti dari solusinya adalah membuat kanvas agar sesuai dengan gambar, menggambar di sana dan mulai menggunakan getImageData untuk mendapatkan informasi tentang warna masing-masing piksel, kemudian tetap beralih di antara piksel dari tepi kiri atas hingga Anda mendapatkan piksel putih. Selanjutnya, terus memilah-milah piksel sepanjang sumbu horizontal dan vertikal sampai kita kembali menemukan piksel putih, sehingga kita mendapatkan lebar dan tinggi persegi panjang.
Rincian artikel ini bekerja dengan kanvas dan menggunakan getImageData.
code.tutsplus.com/en/tutorials/canvas-from-scratch-pixel-manipulation--net-20573Sayangnya, kode saya tidak lulus semua tes dan mencetak 30 dari 40 poin, dan saya masih tidak bisa mengerti kesalahannya, saya akan berterima kasih jika Anda menunjukkan kekurangannya:
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. Menunggang Kuda (40 poin).
KetentuanGennady adalah seorang intelektual. Dia suka bertemu orang yang menarik. Tetapi sebagai orang yang bijaksana dan tidak percaya, ia melakukan ini hanya di Internet. Baru-baru ini, Gennady menemukan bahwa lawan bicara yang sebanding dalam IQ dapat ditemukan di forum catur, tetapi masalahnya adalah Gennady tidak dapat bermain catur, dan semua guru didasarkan pada javascript, yang Gennady dengan hati-hati nonaktifkan untuk menghindari kemungkinan mengambil virus.
Untuk membantu Gennady, kami menyarankan untuk membuat tutorial bermain catur tanpa javascript, yang akan menunjukkan bagaimana kuda berjalan. Guru harus terlihat seperti papan catur. Anda klik pada sangkar - mereka menunjukkan di mana kuda bisa pergi dari sangkar ini.
Format input
html-dokumen saat memuat yang papan catur ditarik
Format output
Tugas akan diuji di browser nyata (Chrome 77).
Dokumen html Anda akan dimuat di browser. Robot mengklik ke berbagai sel bidang catur dan mengambil tangkapan layar setelah klik.
Tangkapan layar harus mematuhi referensi
Contoh
Catatan
- Implementasi CSS dan HTML. Javascript tidak dapat digunakan.
- Seluruh tata letak harus persegi, tanpa bayangan, gradien, fillet, dll.
- Lebar dan Tinggi Sel - 30 piksel
- Bidang catur ada di halaman di kiri atas, tanpa lekukan
- Warna sel yang dipilih # ff0000
- Warna sel yang angka # 0000ff dapat pergi ke
- Warna Sel Cahaya # f4cd8d
- Warna sel gelap. # 745853
- Lampu sel atas kiri
- Awalnya tidak ada sel yang dipilih
Seleksi berlangsung dengan mengklik pada sel tertentu dan tetap sampai klik berikutnya
SolusiSayangnya untuk 4 jam yang dialokasikan saya tidak dapat sepenuhnya memberikan solusi, saya berhasil membuat tata letak dan mengklik sel, dan hanya setelah turnamen berakhir, bukan tanpa bantuan rekan-rekan dari forum, saya tetap menyelesaikan tugas ini.
Jadi, hal pertama yang harus dilakukan adalah menempatkan tipe input = radio untuk setiap sel, mengikat label pada mereka, mengatur tata letak melalui tampilan: kisi dan memecahnya menjadi 8 kolom melalui kisi-kisi-templat: ulangi (8, 30px). Saya menghabiskan banyak waktu dengan tata letak untuk kemungkinan gerakan kuda.
Kesulitannya adalah bahwa di css Anda tidak dapat mendesain elemen sebelumnya.
Dan hal ini tidak dapat dipecahkan dalam hal ini (ketika penataan membutuhkan baik sebelumnya dan selanjutnya).
Oleh karena itu, agar tidak mencemari markup, saya memutuskan untuk menambahkan elemen semu yang diposisikan oleh absolut dan melalui latar belakang yang dilukis oleh gradien linier ke dalam kotak. Butuh banyak waktu dan tidak berhasil, tetapi saya disarankan solusi yang sangat baik: menetapkan 8 warna biru untuk sel yang dipilih dan mengaturnya sebagaimana mestinya.
Hasilnya adalah sebagai berikut:
<!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>
Tautan ke versi yang berfungsiDilanjutkan ...