MediaWiki:ScmcChemistry.js
Страница интерфейса MediaWiki
Дополнительные действия
Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/**
* Интерактивный каталог химии SSMC.
* Страница: MC:Химия
* Данные: MediaWiki:ScmcChemCatalog.js
*/
(function (mw, $) {
'use strict';
var ROOT_ID = 'scmc-chemistry-app';
var CATALOG_PAGE = 'MediaWiki:ScmcChemCatalog.js';
var STYLE_PAGE = 'MediaWiki:ScmcChemistry.css';
var NUMBER = new Intl.NumberFormat('ru-RU', { maximumFractionDigits: 3 });
var TABS = [
{ id: 'ordnance', label: 'Боевая химия' },
{ id: 'medicine', label: 'Медицина' },
{ id: 'drinks', label: 'Напитки' },
{ id: 'elements', label: 'Элементы' },
{ id: 'other', label: 'Другие вещества' }
];
var ORIGIN_LABELS = {
rmc14: 'RMC14',
stories: 'Stories',
'upstream-reference': 'Upstream'
};
var METABOLISM_LABELS = {
Alcohol: 'Алкоголь',
Drink: 'Напиток',
Food: 'Пища',
Medicine: 'Лекарство',
Narcotic: 'Наркотик',
Poison: 'Яд'
};
var EFFECT_LABELS = {
AdjustReagent: 'Изменяет количество реагента',
AdjustTemperature: 'Изменяет температуру',
AreaReactionEffect: 'Создаёт эффект в области',
CauseStatusEffect: 'Вызывает статусный эффект',
ChemVomit: 'Вызывает рвоту',
CureDisease: 'Лечит заболевание',
Drunk: 'Вызывает опьянение',
Electrocute: 'Поражает электричеством',
Emote: 'Вызывает эмоцию',
ExplosionReactionEffect: 'Вызывает взрыв',
GenericStatusEffect: 'Накладывает статусный эффект',
HealthChange: 'Изменяет здоровье',
Ignite: 'Поджигает',
ModifyBloodLevel: 'Изменяет уровень крови',
MovespeedModifier: 'Изменяет скорость движения',
Polymorph: 'Изменяет форму',
PopupMessage: 'Показывает сообщение',
ResetNarcolepsy: 'Снимает приступ нарколепсии',
SatiateHunger: 'Утоляет голод',
SatiateThirst: 'Утоляет жажду',
SensitiveReactionExplosionEffect: 'Может вызвать взрыв',
SetSolutionTemperature: 'Задаёт температуру раствора',
Sleep: 'Усыпляет'
};
var state = {
data: null,
activeTab: 'ordnance',
query: '',
productReactions: Object.create(null)
};
function el(tag, className, text) {
var node = document.createElement(tag);
if (className) {
node.className = className;
}
if (text !== undefined && text !== null) {
node.textContent = String(text);
}
return node;
}
function add(parent) {
Array.prototype.slice.call(arguments, 1).forEach(function (child) {
if (child) {
parent.appendChild(child);
}
});
return parent;
}
function formatNumber(value) {
return typeof value === 'number' ? NUMBER.format(value) : String(value);
}
function formatAmount(value) {
return formatNumber(value) + ' ед.';
}
function normalize(value) {
return String(value || '').toLocaleLowerCase('ru-RU').replace(/ё/g, 'е').trim();
}
function slug(value) {
return String(value || 'section')
.toLocaleLowerCase('ru-RU')
.replace(/[^a-zа-яё0-9]+/gi, '-')
.replace(/^-+|-+$/g, '');
}
function safeColor(value) {
var probe = document.createElement('span').style;
probe.color = '';
probe.color = String(value || '');
return probe.color ? value : '#7f8c98';
}
function getReagent(id) {
return state.data.reagents[id] || state.data.dependencies[id] || null;
}
function getName(id) {
var reagent = getReagent(id);
return reagent && reagent.name ? reagent.name : id;
}
function getColor(id) {
var reagent = getReagent(id);
return safeColor(reagent && reagent.properties && reagent.properties.color);
}
function indexReactions() {
state.productReactions = Object.create(null);
Object.keys(state.data.reactions || {}).forEach(function (reactionId) {
var reaction = state.data.reactions[reactionId];
(reaction.products || []).forEach(function (product) {
if (!state.productReactions[product.id]) {
state.productReactions[product.id] = [];
}
state.productReactions[product.id].push(reaction);
});
});
}
function validateCatalog(data) {
return data && data.schemaVersion === 1 && data.catalogSections &&
data.reagents && data.dependencies && data.reactions &&
TABS.every(function (tab) {
return Array.isArray(data.catalogSections[tab.id]);
});
}
function loadStyle() {
mw.loader.load(mw.util.getUrl(STYLE_PAGE, {
action: 'raw',
ctype: 'text/css'
}), 'text/css');
}
function loadCatalog() {
window.ScmcChemCatalog = null;
return mw.loader.getScript(mw.util.getUrl(CATALOG_PAGE, {
action: 'raw',
ctype: 'text/javascript'
})).then(function () {
if (!validateCatalog(window.ScmcChemCatalog)) {
throw new Error('MediaWiki:ScmcChemCatalog.js не содержит поддерживаемый каталог');
}
return window.ScmcChemCatalog;
});
}
function renderLoading(root) {
root.textContent = '';
add(root, add(el('div', 'scmc-chem__status scmc-chem__status--loading'),
el('span', 'scmc-chem__spinner'),
el('span', '', 'Загружаю химический каталог…')
));
}
function renderError(root, error) {
root.textContent = '';
var block = add(el('div', 'scmc-chem__status scmc-chem__status--error'),
el('strong', '', 'Каталог не загрузился.'),
el('span', '', ' Проверьте MediaWiki:ScmcChemCatalog.js.')
);
var retry = el('button', 'scmc-chem__retry', 'Повторить');
retry.type = 'button';
retry.addEventListener('click', function () { start(root); });
add(block, retry);
add(root, block);
if (window.console && console.error) {
console.error('[ScmcChemistry]', error);
}
}
function createHero() {
var count = TABS.reduce(function (total, tab) {
return total + state.data.catalogSections[tab.id].length;
}, 0);
return add(el('header', 'scmc-chem__hero'),
add(el('div', 'scmc-chem__hero-copy'),
el('p', 'scmc-chem__eyebrow', 'SSMC · справочник'),
el('h1', 'scmc-chem__title', 'Химия'),
el('p', 'scmc-chem__lead', 'Реагенты, рецепты, дозировки и эффекты. Данные хранятся прямо на вики.')
),
add(el('div', 'scmc-chem__stats'),
el('span', 'scmc-chem__stat', count + ' записей'),
el('span', 'scmc-chem__stat', Object.keys(state.data.reactions).length + ' реакций')
)
);
}
function renderTabs(root) {
var tabs = root.querySelector('.scmc-chem__tabs');
tabs.textContent = '';
TABS.forEach(function (tab) {
var button = el('button', 'scmc-chem__tab');
button.type = 'button';
button.setAttribute('role', 'tab');
button.setAttribute('aria-selected', String(tab.id === state.activeTab));
add(button,
el('span', '', tab.label),
el('span', 'scmc-chem__tab-count', state.data.catalogSections[tab.id].length)
);
button.addEventListener('click', function () {
state.activeTab = tab.id;
renderTabs(root);
renderResults(root);
});
add(tabs, button);
});
}
function groupEntries(entries) {
var groups = Object.create(null);
entries.forEach(function (entry) {
var path = Array.isArray(entry.sectionPath) && entry.sectionPath.length ? entry.sectionPath : ['Без раздела'];
var key = path.join(' › ');
if (!groups[key]) {
groups[key] = { title: path[path.length - 1], path: path, entries: [] };
}
groups[key].entries.push(entry);
});
return Object.keys(groups).map(function (key) { return groups[key]; });
}
function entryMatches(entry) {
if (!state.query) {
return true;
}
var reagent = getReagent(entry.id) || {};
var haystack = [entry.id, entry.name, reagent.name, reagent.description]
.concat(entry.sectionPath || []).join(' ');
return normalize(haystack).indexOf(state.query) !== -1;
}
function renderSectionNav(root, groups) {
var nav = root.querySelector('.scmc-chem__section-nav');
nav.textContent = '';
nav.hidden = groups.length < 2;
groups.forEach(function (group, index) {
var link = el('a', 'scmc-chem__section-link');
link.href = '#scmc-chem-section-' + index + '-' + slug(group.title);
add(link,
el('span', '', group.title),
el('span', 'scmc-chem__section-link-count', group.entries.length)
);
add(nav, link);
});
}
function renderMixture(items, className) {
var list = el('div', className);
(items || []).forEach(function (item) {
add(list, add(el('div', 'scmc-chem__mixture-item'),
el('span', 'scmc-chem__mixture-dot'),
el('span', 'scmc-chem__mixture-name', item.name || getName(item.id)),
el('span', 'scmc-chem__mixture-amount', formatAmount(item.amount))
));
list.lastChild.firstChild.style.backgroundColor = getColor(item.id);
});
return list;
}
function renderReaction(reaction) {
var box = el('div', 'scmc-chem__reaction');
var equation = add(el('div', 'scmc-chem__equation'),
renderMixture(reaction.reactants, 'scmc-chem__reactants'),
el('span', 'scmc-chem__arrow', '→'),
renderMixture(reaction.products, 'scmc-chem__products')
);
add(box, el('div', 'scmc-chem__reaction-label', 'Рецепт'), equation);
if (!reaction.products || !reaction.products.length) {
add(box, el('div', 'scmc-chem__reaction-warning', 'Реакция не создаёт реагент и может иметь опасный эффект.'));
}
return box;
}
function effectType(effect) {
return String(effect && effect.yamlTag || '').replace(/^!type:/, '') || 'Эффект';
}
function describeValue(value) {
if (value === null || value === undefined || value === '') {
return '';
}
if (typeof value !== 'object') {
return String(value);
}
return Object.keys(value).filter(function (key) {
return !['conditions', 'showInGuidebook', 'showInChat'].includes(key);
}).map(function (key) {
var item = value[key];
if (item && typeof item === 'object') {
return key + ': ' + JSON.stringify(item);
}
return key + ': ' + item;
}).join(' · ');
}
function renderEffects(effects) {
var list = el('div', 'scmc-chem__effect-list');
if (!effects || !effects.length) {
add(list, el('p', 'scmc-chem__empty', 'Эффекты не указаны.'));
return list;
}
effects.forEach(function (effect) {
var type = effectType(effect);
var value = effect.value || {};
var harmful = /Damage|Ignite|Explosion|Electrocute|Vomit|Poison/i.test(type);
var card = el('div', 'scmc-chem__effect' + (harmful ? ' scmc-chem__effect--harmful' : ''));
add(card, el('div', 'scmc-chem__effect-name', EFFECT_LABELS[type] || type));
var details = describeValue(value);
if (details) {
add(card, el('div', 'scmc-chem__effect-details', details));
}
add(list, card);
});
return list;
}
function renderMetabolisms(reagent) {
var wrapper = el('div', 'scmc-chem__card-section');
add(wrapper, el('h4', 'scmc-chem__card-subtitle', 'Воздействие'));
var metabolisms = reagent.properties && reagent.properties.metabolisms;
var keys = Object.keys(metabolisms || {});
if (!keys.length) {
add(wrapper, el('p', 'scmc-chem__empty', 'Метаболические эффекты не указаны.'));
return wrapper;
}
keys.forEach(function (key) {
var metabolism = metabolisms[key] || {};
var block = el('div', 'scmc-chem__metabolism');
var title = METABOLISM_LABELS[key] || key;
if (metabolism.metabolismRate !== undefined) {
title += ' · ' + formatAmount(metabolism.metabolismRate) + '/с';
}
add(block, el('div', 'scmc-chem__metabolism-title', title), renderEffects(metabolism.effects));
add(wrapper, block);
});
return wrapper;
}
function renderCard(entry) {
var reagent = getReagent(entry.id) || {
id: entry.id,
name: entry.name,
origin: entry.origin,
properties: {}
};
var color = safeColor(reagent.properties && reagent.properties.color);
var details = el('details', 'scmc-chem__card');
details.style.setProperty('--scmc-chem-color', color);
var summary = el('summary', 'scmc-chem__card-summary');
var heading = add(el('span', 'scmc-chem__card-heading'),
el('span', 'scmc-chem__card-name', reagent.name || entry.name || entry.id),
el('code', 'scmc-chem__card-id', entry.id)
);
add(summary,
el('span', 'scmc-chem__color'),
heading,
el('span', 'scmc-chem__origin scmc-chem__origin--' + (reagent.origin || entry.origin || 'upstream-reference'), ORIGIN_LABELS[reagent.origin || entry.origin] || reagent.origin || entry.origin),
el('span', 'scmc-chem__chevron')
);
summary.firstChild.style.backgroundColor = color;
var body = el('div', 'scmc-chem__card-body');
add(body, el('p', reagent.description ? 'scmc-chem__description' : 'scmc-chem__empty', reagent.description || 'Описание не указано.'));
var overdose = reagent.properties && reagent.properties.overdose;
var critical = reagent.properties && reagent.properties.criticalOverdose;
if (overdose !== undefined || critical !== undefined) {
var doses = el('div', 'scmc-chem__dose-row');
if (overdose !== undefined) {
add(doses, el('span', 'scmc-chem__dose scmc-chem__dose--warning', 'Передозировка: ' + formatAmount(overdose)));
}
if (critical !== undefined) {
add(doses, el('span', 'scmc-chem__dose scmc-chem__dose--danger', 'Критическая: ' + formatAmount(critical)));
}
add(body, doses);
}
var reactions = state.productReactions[entry.id] || [];
if (reactions.length) {
var recipeSection = el('div', 'scmc-chem__card-section');
add(recipeSection, el('h4', 'scmc-chem__card-subtitle', 'Получение'));
reactions.forEach(function (reaction) { add(recipeSection, renderReaction(reaction)); });
add(body, recipeSection);
}
add(body, renderMetabolisms(reagent));
add(details, summary, body);
return details;
}
function renderResults(root) {
var result = root.querySelector('.scmc-chem__results');
var counter = root.querySelector('.scmc-chem__result-count');
result.textContent = '';
var entries = state.data.catalogSections[state.activeTab].filter(entryMatches);
var groups = groupEntries(entries);
counter.textContent = entries.length + ' найдено';
renderSectionNav(root, groups);
if (!entries.length) {
add(result, el('div', 'scmc-chem__no-results', 'Ничего не найдено. Измените запрос.'));
return;
}
groups.forEach(function (group, index) {
var section = el('section', 'scmc-chem__section');
section.id = 'scmc-chem-section-' + index + '-' + slug(group.title);
var heading = add(el('div', 'scmc-chem__section-heading'),
el('h2', 'scmc-chem__section-title', group.title),
el('span', 'scmc-chem__breadcrumbs', group.path.join(' › ')),
el('span', 'scmc-chem__section-count', group.entries.length)
);
var cards = el('div', 'scmc-chem__cards');
group.entries.forEach(function (entry) { add(cards, renderCard(entry)); });
add(section, heading, cards);
add(result, section);
});
}
function renderApp(root) {
root.textContent = '';
add(root, createHero());
var controls = el('div', 'scmc-chem__controls');
var search = el('label', 'scmc-chem__search');
var input = el('input', 'scmc-chem__search-input');
input.type = 'search';
input.placeholder = 'Название, ID или раздел…';
input.autocomplete = 'off';
input.setAttribute('aria-label', 'Поиск по химическому каталогу');
input.addEventListener('input', function () {
state.query = normalize(input.value);
renderResults(root);
});
add(search, el('span', 'scmc-chem__search-icon', '⌕'), input);
add(controls, search, el('span', 'scmc-chem__result-count'));
add(root, controls, el('div', 'scmc-chem__tabs'));
var nav = el('nav', 'scmc-chem__section-nav');
nav.setAttribute('aria-label', 'Подразделы каталога');
add(root, nav, el('main', 'scmc-chem__results'));
var source = state.data.source || {};
add(root, el('footer', 'scmc-chem__footer', 'Локальный каталог MediaWiki' + (source.commit ? ' · версия ' + String(source.commit).slice(0, 8) : '')));
renderTabs(root);
renderResults(root);
}
function start(root) {
renderLoading(root);
loadCatalog().then(function (data) {
state.data = data;
indexReactions();
renderApp(root);
}).catch(function (error) {
renderError(root, error);
});
}
function init() {
var root = document.getElementById(ROOT_ID);
if (!root) {
return;
}
loadStyle();
start(root);
}
$(init);
}(mediaWiki, jQuery));