MediaWiki:Common.js: відмінності між версіями

Версія за 08:58, 24 березня 2026

/* ══════════════════════════════════════════════
   MediaWiki:Common.js  —  КНЛУ
══════════════════════════════════════════════ */

/* ── 1. Viewport ── */
(function () {
    var vp = document.querySelector('meta[name="viewport"]');
    if (vp) {
        vp.setAttribute('content', 'width=device-width, initial-scale=1.0');
    } else {
        var m = document.createElement('meta');
        m.name = 'viewport';
        m.content = 'width=device-width, initial-scale=1.0';
        document.head.appendChild(m);
    }
})();

/* ── 2. Клікабельні category-card ── */
$(function () {
    $('.category-card').each(function () {
        var $card = $(this);
        var href = $card.attr('data-href');
        if (!href) return;
        $card.css('cursor', 'pointer');
        $card.on('click', function (e) {
            if ($(e.target).closest('a').length === 0) window.location.href = href;
        });
        $card.hover(
            function () { $card.addClass('card-hover'); },
            function () { $card.removeClass('card-hover'); }
        );
    });
});

/* ══════════════════════════════════════════════
   ЗАГАЛЬНІ ПАРСЕРИ (використовуються і у Vue,
   і у «Випадкових статтях»)
══════════════════════════════════════════════ */

/** Знайти назву зображення у вікітексті */
function extractImageName(wikitext) {
    if (!wikitext) return null;
    var m = wikitext.match(/\|\s*image\s*=\s*([^\|\n\}]+)/i);
    if (m && m[1].trim()) return m[1].trim();
    m = wikitext.match(/\[\[(?:Файл|File|Зображення|Image):([^\|\]]+)/i);
    return m ? m[1].trim() : null;
}

/** Витягнути перший змістовний абзац */
function extractDescription(wikitext) {
    if (!wikitext) return '';
    var text = wikitext;

    /* Прибрати перший {{ }} інфобокс */
    var depth = 0, end = -1;
    for (var i = 0; i < text.length - 1; i++) {
        if (text[i] === '{' && text[i + 1] === '{') { depth++; i++; }
        else if (text[i] === '}' && text[i + 1] === '}') {
            depth--;
            if (depth === 0) { end = i + 2; break; }
            i++;
        }
    }
    if (end > 0) text = text.substring(end);

    text = text
        .replace(/\[\[(?:Файл|File|Зображення|Image):[^\]]*\]\]/gi, '')
        .replace(/\{\|[\s\S]*?\|\}/g, '')
        .replace(/\{\{[^}]*\}\}/g, '')
        .replace(/={2,6}[^=\n]+=+/g, '')
        .replace(/\[\[(?:[^\|\]]*\|)?([^\]]+)\]\]/g, '$1')
        .replace(/\[[^\s\]]+\s+([^\]]+)\]/g, '$1')
        .replace(/\[[^\]]+\]/g, '')
        .replace(/'{2,3}/g, '')
        .replace(/<[^>]+>/g, '')
        .replace(/^[\*#:;].*/gm, '');

    var lines = text.split('\n')
        .map(function (l) { return l.trim(); })
        .filter(function (l) { return l.length > 20; });

    if (!lines.length) return '';
    var result = lines[0].substring(0, 160);
    return lines[0].length > 160 ? result + '…' : result;
}

/* ══════════════════════════════════════════════
   ВИПАДКОВІ СТАТТІ
══════════════════════════════════════════════ */

function loadRandomArticles() {
    var list = document.getElementById('random-articles-list');
    if (!list) return;

    list.innerHTML = '<div class="random-articles-loading">Завантаження...</div>';

    var apiBase = mw.config.get('wgScriptPath') + '/api.php';
    var excludedPages = ['Головна сторінка', 'Структурні підрозділи', 'Викладачі'];

    fetch(apiBase + '?action=query&list=random&rnnamespace=0&rnlimit=10&format=json')
        .then(function (r) { return r.json(); })
        .then(function (data) {
            var pages = data.query.random
                .filter(function (p) { return excludedPages.indexOf(p.title) === -1; })
                .slice(0, 3);
            var titles = pages.map(function (p) { return p.title; }).join('|');
            return fetch(
                apiBase + '?action=query' +
                '&titles=' + encodeURIComponent(titles) +
                '&prop=revisions&rvprop=content&format=json'
            );
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            var pages = Object.values(data.query.pages);
            list.innerHTML = '';

            var promises = pages.map(function (page) {
                var title   = page.title;
                var pageUrl = mw.config.get('wgArticlePath').replace(
                    '$1', encodeURIComponent(title.replace(/ /g, '_'))
                );
                var content = (page.revisions && page.revisions[0])
                    ? (page.revisions[0]['*'] || '') : '';

                var excerpt = extractDescription(content) || 'Немає опису.';
                var imgName = extractImageName(content);

                if (imgName) {
                    var fileTitle = /^(Файл|File|Image|Зображення):/i.test(imgName)
                        ? imgName : 'File:' + imgName;
                    return fetch(
                        apiBase + '?action=query' +
                        '&titles=' + encodeURIComponent(fileTitle) +
                        '&prop=imageinfo&iiprop=url&iiurlwidth=120&format=json'
                    )
                    .then(function (r) { return r.json(); })
                    .then(function (imgData) {
                        var ip = Object.values(imgData.query.pages);
                        var ii = ip[0] && ip[0].imageinfo && ip[0].imageinfo[0];
                        return { title: title, excerpt: excerpt, pageUrl: pageUrl,
                                 imgSrc: ii ? (ii.thumburl || ii.url) : null };
                    })
                    .catch(function () {
                        return { title: title, excerpt: excerpt, pageUrl: pageUrl, imgSrc: null };
                    });
                }
                return Promise.resolve({ title: title, excerpt: excerpt, pageUrl: pageUrl, imgSrc: null });
            });

            return Promise.all(promises);
        })
        .then(function (results) {
            var el = document.getElementById('random-articles-list');
            if (!el) return;
            el.innerHTML = '';
            results.forEach(function (item) {
                var thumbHtml = item.imgSrc
                    ? '<img class="random-article-thumb" src="' + item.imgSrc + '" alt="">'
                    : '<div class="random-article-thumb-placeholder">📄</div>';
                var card = document.createElement('a');
                card.href      = item.pageUrl;
                card.className = 'random-article-card';
                card.innerHTML =
                    thumbHtml +
                    '<div class="random-article-info">' +
                        '<div class="random-article-title">'  + mw.html.escape(item.title)  + '</div>' +
                        '<div class="random-article-excerpt">' + mw.html.escape(item.excerpt) + '</div>' +
                    '</div>';
                el.appendChild(card);
            });
        })
        .catch(function (err) {
            var el = document.getElementById('random-articles-list');
            if (el) el.innerHTML = '<div class="random-articles-loading">Не вдалося завантажити статті.</div>';
            console.error('[RA]', err);
        });
}

mw.hook('wikipage.content').add(function () {
    var panel = document.getElementById('random-articles-panel');
    if (!panel) return;

    loadRandomArticles();

    var btn = document.getElementById('random-articles-refresh');
    if (btn) btn.addEventListener('click', loadRandomArticles);
});

/* ══════════════════════════════════════════════
   VUE — УНІВЕРСАЛЬНИЙ КОМПОНЕНТ КАТЕГОРІЙ
   <div id="vue-category-cards" data-category="Викладачі"></div>
══════════════════════════════════════════════ */

/* Налаштування для кожної категорії */
var VCC_CONFIG = {
    'Викладачі':                { filterFields: ['посада','title','position'],          badgeField: 'посада',       subtitleField: 'occupation', columns: '4' },
    'Факультети і кафедри':     { filterFields: ['тип','type'],                         badgeField: 'тип',          subtitleField: 'факультет',  columns: '3' },
    'Видатні випускники':       { filterFields: ['спеціальність','occupation','галузь'], badgeField: 'спеціальність',subtitleField: 'occupation', columns: '4' },
    'Наукові конференції':      { filterFields: ['рік','year','тип'],                   badgeField: 'рік',          subtitleField: 'тема',       columns: '3' },
    'Історичні постаті':        { filterFields: ['епоха','period','галузь'],            badgeField: 'епоха',        subtitleField: 'occupation', columns: '4' },
    'Керівництво університету': { filterFields: ['посада','title','position'],          badgeField: 'посада',       subtitleField: 'occupation', columns: '3' },
    'Освітні програми':         { filterFields: ['рівень','level','галузь','тип'],      badgeField: 'рівень',       subtitleField: 'галузь',     columns: '3' },
    'Структурні підрозділи':    { filterFields: ['тип','type','напрям'],               badgeField: 'тип',          subtitleField: 'керівник',   columns: '3' },
    '__default__': {
        filterFields:  ['посада','position','title','тип','type','рік','year','галузь','спеціальність'],
        badgeField:    null,
        subtitleField: null,
        columns:       '3',
    },
};

mw.hook('wikipage.content').add(function () {
    var mountEl = document.getElementById('vue-category-cards');
    if (!mountEl) return;

    var categoryName  = mountEl.getAttribute('data-category')     || '';
    var attrFilter    = mountEl.getAttribute('data-filter-field') || null;
    var attrLimit     = mountEl.getAttribute('data-limit')        || null;
    var attrColumns   = mountEl.getAttribute('data-columns')      || null;
    var attrSort      = mountEl.getAttribute('data-sort')         || null;

    if (!categoryName) {
        mountEl.innerHTML = '<p style="color:red">[vue-category-cards] Вкажіть data-category</p>';
        return;
    }

    var cfg           = VCC_CONFIG[categoryName] || VCC_CONFIG['__default__'];
    var filterFields  = attrFilter  ? [attrFilter]       : cfg.filterFields;
    var badgeField    = attrFilter  ? attrFilter         : cfg.badgeField;
    var subtitleField = cfg.subtitleField || null;
    var pageLimit     = parseInt(attrLimit  || '50', 10);
    var columns       = attrColumns || cfg.columns || '3';
    var sortMode      = attrSort    || 'alpha';

    mw.loader.getScript('https://unpkg.com/vue@3/dist/vue.global.prod.js').then(function () {

        var apiBase = mw.config.get('wgScriptPath') + '/api.php';

        /* ── Парсер інфобоксу → { ключ: значення } ── */
        function parseInfobox(wikitext) {
            if (!wikitext) return {};
            var fields = {};
            var depth = 0, boxStart = -1, boxEnd = -1;
            for (var i = 0; i < wikitext.length - 1; i++) {
                if (wikitext[i] === '{' && wikitext[i+1] === '{') {
                    if (depth === 0) boxStart = i;
                    depth++; i++;
                } else if (wikitext[i] === '}' && wikitext[i+1] === '}') {
                    depth--;
                    if (depth === 0) { boxEnd = i + 2; break; }
                    i++;
                }
            }
            var box = (boxStart >= 0 && boxEnd > boxStart)
                ? wikitext.substring(boxStart, boxEnd) : wikitext;

            var re = /\|\s*([\w\u0400-\u04FF]+)\s*=\s*([^\|\n\}]*)/gi, m;
            while ((m = re.exec(box)) !== null) {
                var k = m[1].trim().toLowerCase();
                var v = m[2].trim()
                    .replace(/\[\[(?:[^\|\]]*\|)?([^\]]+)\]\]/g, '$1')
                    .replace(/'{2,3}/g, '')
                    .replace(/<[^>]+>/g, '');
                if (v) fields[k] = v;
            }
            return fields;
        }

        /* ── Перше непусте поле зі списку ── */
        function firstField(fields, keys) {
            for (var i = 0; i < keys.length; i++) {
                var v = fields[keys[i].toLowerCase()];
                if (v) return v;
            }
            return '';
        }

        /* ── Отримати URL зображення через API ── */
        async function fetchImageSrc(imgName) {
            if (!imgName) return null;
            try {
                var fileTitle = /^(Файл|File|Image|Зображення):/i.test(imgName)
                    ? imgName : 'File:' + imgName;
                var r  = await fetch(apiBase + '?action=query&titles=' +
                    encodeURIComponent(fileTitle) +
                    '&prop=imageinfo&iiprop=url&iiurlwidth=220&format=json');
                var d  = await r.json();
                var ip = Object.values((d.query || {}).pages || {});
                var ii = ip[0] && ip[0].imageinfo && ip[0].imageinfo[0];
                return ii ? (ii.thumburl || ii.url) : null;
            } catch (e) { return null; }
        }

        /* ════════════════════════════════════════
           VUE ДОДАТОК
        ════════════════════════════════════════ */
        Vue.createApp({
            data() {
                return {
                    items:        [],
                    loading:      true,
                    error:        null,
                    activeFilter: 'Всі',
                    filters:      ['Всі'],
                    searchQuery:  '',
                    preview:      null,
                    previewX:     0,
                    previewY:     0,
                    previewTimer: null,
                };
            },

            computed: {
                filteredItems() {
                    var vm = this;
                    var q  = vm.searchQuery.trim().toLowerCase();
                    var result = vm.items.filter(function (item) {
                        var mf = vm.activeFilter === 'Всі' || item.badge === vm.activeFilter;
                        var ms = !q || item.title.toLowerCase().includes(q) ||
                            (item.subtitle     && item.subtitle.toLowerCase().includes(q)) ||
                            (item.description  && item.description.toLowerCase().includes(q));
                        return mf && ms;
                    });
                    if (sortMode === 'alpha') {
                        result = result.slice().sort(function (a, b) {
                            return a.title.localeCompare(b.title, 'uk');
                        });
                    }
                    return result;
                },
                gridStyle() {
                    return 'grid-template-columns: repeat(' + columns + ', 1fr);';
                },
            },

            mounted() { this.loadItems(); },

            methods: {
                showPreview(item, e) {
                    var vm   = this;
                    clearTimeout(vm.previewTimer);
                    var rect = (e.currentTarget || e.target).getBoundingClientRect();
                    var sY   = window.scrollY  || window.pageYOffset;
                    var sX   = window.scrollX  || window.pageXOffset;
                    vm.previewTimer = setTimeout(function () {
                        vm.previewX = (window.innerWidth - rect.right) > 290
                            ? rect.right + sX + 10 : rect.left + sX - 280;
                        vm.previewY = rect.top + sY;
                        vm.preview  = item;
                    }, 220);
                },
                hidePreview() {
                    clearTimeout(this.previewTimer);
                    this.previewTimer = setTimeout(() => { this.preview = null; }, 140);
                },
                keepPreview() { clearTimeout(this.previewTimer); },

                async loadItems() {
                    this.loading = true;
                    this.error   = null;
                    try {
                        /* 1. Список статей категорії */
                        var cr = await fetch(
                            apiBase + '?action=query&list=categorymembers' +
                            '&cmtitle=' + encodeURIComponent('Категорія:' + categoryName) +
                            '&cmlimit=' + pageLimit + '&cmnamespace=0&format=json'
                        );
                        var cd      = await cr.json();
                        var members = (cd.query || {}).categorymembers || [];
                        if (!members.length) { this.loading = false; return; }

                        /* 2. Вміст статей (до 50 за раз) */
                        var titles   = members.map(function (m) { return m.title; }).join('|');
                        var pr       = await fetch(
                            apiBase + '?action=query&titles=' + encodeURIComponent(titles) +
                            '&prop=revisions&rvprop=content&format=json'
                        );
                        var pd    = await pr.json();
                        var pages = Object.values((pd.query || {}).pages || {});

                        /* 3. Формуємо елементи */
                        var filterSet = new Set();

                        var promises = pages.map(async function (page) {
                            var content = (page.revisions && page.revisions[0])
                                ? (page.revisions[0]['*'] || '') : '';

                            var fields = parseInfobox(content);

                            /* Badge */
                            var badgeVal = badgeField
                                ? (fields[badgeField.toLowerCase()] || firstField(fields, filterFields))
                                : firstField(fields, filterFields);
                            var badge = badgeVal.length > 14
                                ? badgeVal.split(/[\s,]/)[0] : badgeVal;
                            if (badge) filterSet.add(badge);

                            /* Підзаголовок */
                            var subtitle = subtitleField
                                ? (fields[subtitleField.toLowerCase()] || '')
                                : firstField(fields, ['occupation','спеціальність','тема','напрям','керівник','галузь']);

                            /* Опис */
                            var description = extractDescription(content);

                            /* Зображення */
                            var imgSrc = await fetchImageSrc(extractImageName(content));

                            var pageUrl = mw.config.get('wgArticlePath').replace(
                                '$1', encodeURIComponent(page.title.replace(/ /g, '_'))
                            );

                            return {
                                title:       page.title,
                                badge:       badge || '',
                                subtitle:    subtitle,
                                description: description,
                                imgSrc:      imgSrc,
                                pageUrl:     pageUrl,
                            };
                        });

                        this.items = await Promise.all(promises);

                        /* Фільтри */
                        this.filters = ['Всі'].concat(
                            Array.from(filterSet).sort(function (a, b) {
                                return a.localeCompare(b, 'uk');
                            })
                        );

                    } catch (e) {
                        console.error('[vcc]', e);
                        this.error = 'Не вдалося завантажити дані.';
                    }
                    this.loading = false;
                },
            },

            template: `
<div class="vcc-app">
  <div class="vcc-topbar">
    <input class="vcc-search" type="text" v-model="searchQuery" placeholder="Пошук..."/>
    <span class="vcc-count" v-if="!loading">
      Знайдено: <strong>{{ filteredItems.length }}</strong> з {{ items.length }}
    </span>
  </div>

  <div class="vcc-layout">
    <div class="vcc-main">
      <div class="vcc-loading" v-if="loading">
        <div class="vcc-spinner"></div><span>Завантаження...</span>
      </div>
      <div class="vcc-error" v-else-if="error">{{ error }}</div>
      <div class="vcc-empty" v-else-if="!filteredItems.length">
        <div class="vcc-empty-icon">🔍</div>
        <p>Нічого не знайдено</p>
        <button class="vcc-reset-btn" @click="activeFilter='Всі'; searchQuery=''">Скинути фільтри</button>
      </div>
      <div class="vcc-grid" :style="gridStyle" v-else>
        <a
          v-for="item in filteredItems" :key="item.title"
          :href="item.pageUrl" class="vcc-card"
          @mouseenter="showPreview(item,$event)" @mouseleave="hidePreview"
        >
          <div class="vcc-card-avatar">
            <img v-if="item.imgSrc" :src="item.imgSrc" :alt="item.title" class="vcc-card-img"/>
            <div v-else class="vcc-card-placeholder">{{ item.title.charAt(0) }}</div>
          </div>
          <div class="vcc-card-body">
            <div v-if="item.badge" class="vcc-card-badge">{{ item.badge }}</div>
            <div class="vcc-card-name">{{ item.title }}</div>
            <div v-if="item.subtitle" class="vcc-card-sub">{{ item.subtitle }}</div>
            <div v-else-if="item.description" class="vcc-card-sub">{{ item.description }}</div>
          </div>
        </a>
      </div>
    </div>

    <div class="vcc-sidebar" v-if="filters.length > 2">
      <div class="vcc-sidebar-title">Фільтр</div>
      <div class="vcc-filters">
        <button
          v-for="f in filters" :key="f"
          class="vcc-filter-btn" :class="{ active: activeFilter === f }"
          @click="activeFilter = f"
        >{{ f }}</button>
      </div>
    </div>
  </div>

  <teleport to="body">
    <a v-if="preview" :href="preview.pageUrl" class="vcc-preview"
       :style="{ top: previewY+'px', left: previewX+'px' }"
       @mouseenter="keepPreview" @mouseleave="hidePreview">
      <div class="vcc-preview-top">
        <img v-if="preview.imgSrc" :src="preview.imgSrc" class="vcc-preview-img" :alt="preview.title"/>
        <div v-else class="vcc-preview-placeholder">{{ preview.title.charAt(0) }}</div>
        <div class="vcc-preview-info">
          <div v-if="preview.badge" class="vcc-preview-badge">{{ preview.badge }}</div>
          <div class="vcc-preview-name">{{ preview.title }}</div>
        </div>
      </div>
      <div class="vcc-preview-divider"></div>
      <div v-if="preview.subtitle"    class="vcc-preview-row">
        <span class="vcc-preview-lbl">Деталі</span>
        <span class="vcc-preview-val">{{ preview.subtitle }}</span>
      </div>
      <div v-if="preview.description" class="vcc-preview-desc">{{ preview.description }}</div>
    </a>
  </teleport>
</div>`,
        }).mount('#vue-category-cards');
    });
});

/* ══════════════════════════════════════════════
   ГОЛОВНА СТОРІНКА
══════════════════════════════════════════════ */

/* ── Анімація чисел статистики ── */
function animateNumber(element, target) {
    element.classList.add('animating');
    var current = 0, increment = target / 60;
    var timer = setInterval(function () {
        current += increment;
        if (current >= target) {
            current = target;
            clearInterval(timer);
            setTimeout(function () { element.classList.remove('animating'); }, 100);
        }
        element.textContent = Math.floor(current);
    }, 16);
}

mw.hook('wikipage.content').add(function () {
    if (mw.config.get('wgPageName') !== 'Головна_сторінка') return;
    var statsNumbers = document.querySelectorAll('.stats-panel-number');
    var animated = false;
    function checkAndAnimate() {
        if (animated) return;
        var statsPanel = document.querySelector('.stats-panel');
        if (!statsPanel) return;
        var rect = statsPanel.getBoundingClientRect();
        if (rect.top < window.innerHeight && rect.bottom > 0) {
            animated = true;
            statsNumbers.forEach(function (el) {
                var num = parseInt(el.textContent.trim().replace(/[^\d]/g, ''), 10);
                if (!isNaN(num) && num > 0) {
                    el.textContent = '0';
                    setTimeout(function () { animateNumber(el, num); }, 200);
                }
            });
        }
    }
    window.addEventListener('scroll', checkAndAnimate);
    checkAndAnimate();
});

/* ── Сортування карточок за прізвищем ── */
mw.hook('wikipage.content').add(function () {
    document.querySelectorAll('div[style*="grid-template-columns"]').forEach(function (grid) {
        var cards = Array.from(grid.children);
        if (cards.length < 2) return;
        cards.sort(function (a, b) {
            var aLink = a.querySelector('div[style*="flex-grow"] a');
            var bLink = b.querySelector('div[style*="flex-grow"] a');
            if (!aLink || !bLink) return 0;
            return aLink.textContent.trim().split(' ')[0]
                .localeCompare(bLink.textContent.trim().split(' ')[0], 'uk');
        });
        cards.forEach(function (card) { grid.appendChild(card); });
    });
});

/* ── Прогрес скролла ── */
mw.hook('wikipage.content').add(function () {
    if (mw.config.get('wgPageName') !== 'Головна_сторінка') return;
    var progressBar = document.createElement('div');
    progressBar.className = 'scroll-progress';
    document.body.appendChild(progressBar);
    function updateProgress() {
        var winScroll = document.documentElement.scrollTop || document.body.scrollTop;
        var height    = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        progressBar.style.width = (height > 0 ? (winScroll / height) * 100 : 0) + '%';
    }
    window.addEventListener('scroll', updateProgress);
    updateProgress();
});

/* ── Particles.js canvas фон ── */
mw.hook('wikipage.content').add(function () {
    if (mw.config.get('wgPageName') !== 'Головна_сторінка') return;
    var welcomeWrapper = document.querySelector('.welcome-wrapper');
    if (!welcomeWrapper) return;

    var canvas = document.createElement('canvas');
    canvas.className  = 'particles-canvas';
    canvas.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;';
    var maskVal = 'linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%),' +
                  'linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%)';
    canvas.style.webkitMaskImage   = maskVal;
    canvas.style.maskImage         = maskVal;
    canvas.style.webkitMaskComposite = 'source-in';
    canvas.style.maskComposite     = 'intersect';
    welcomeWrapper.style.position  = 'relative';
    welcomeWrapper.insertBefore(canvas, welcomeWrapper.firstChild);

    var ctx = canvas.getContext('2d');
    canvas.width  = welcomeWrapper.offsetWidth;
    canvas.height = welcomeWrapper.offsetHeight;

    var particles = [], COUNT = 40;

    function Particle() {
        this.x  = Math.random() * canvas.width;
        this.y  = Math.random() * canvas.height;
        this.vx = (Math.random() - 0.5) * 0.5;
        this.vy = (Math.random() - 0.5) * 0.5;
        this.r  = Math.random() * 2 + 1;
    }
    Particle.prototype.update = function () {
        if (this.x > canvas.width  || this.x < 0) this.vx = -this.vx;
        if (this.y > canvas.height || this.y < 0) this.vy = -this.vy;
        this.x += this.vx;
        this.y += this.vy;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(255,215,0,0.6)';
        ctx.fill();
    };

    for (var i = 0; i < COUNT; i++) particles.push(new Particle());

    (function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < particles.length; i++) {
            particles[i].update();
            for (var j = i + 1; j < particles.length; j++) {
                var dx = particles[i].x - particles[j].x;
                var dy = particles[i].y - particles[j].y;
                var d  = Math.sqrt(dx * dx + dy * dy);
                if (d < 120) {
                    ctx.beginPath();
                    ctx.strokeStyle = 'rgba(255,215,0,' + (1 - d / 120) * 0.3 + ')';
                    ctx.lineWidth   = 1;
                    ctx.moveTo(particles[i].x, particles[i].y);
                    ctx.lineTo(particles[j].x, particles[j].y);
                    ctx.stroke();
                }
            }
        }
        requestAnimationFrame(animate);
    })();

    window.addEventListener('resize', function () {
        canvas.width  = welcomeWrapper.offsetWidth;
        canvas.height = welcomeWrapper.offsetHeight;
    });
});