черновики

Поделиться12026-05-25 10:48:15

Автор: Solitude Solitudovich
Администратор
Зарегистрирован: 2026-04-04
Приглашений: 0
Сообщений: 11
Уважение: +0
Позитив: +0
Провел на форуме:
7 часов 31 минуту
Последний визит:
2026-05-31 20:18:12

[html]<div class="fp-wrap garden-wrap" id="garden8march"
data-cols="5" data-rows="4"
style="--field:url('https://upforme.ru/uploads/001c/ae/e6/3/718743.png');">
<div class="fp-bg"></div>

<div class="fp-header">
<div class="fp-tag">Артефакторика · Урок</div>
<div class="fp-title">Artificer's Workshop</div>
<div class="fp-subtitle">собираем артефакт по частям</div>
</div>

<div class="fp-body gd-intro">
<div class="gd-intro__grid">
<div class="gd-intro__text">
<p class="gd-lead">Добро пожаловать на <b>урок артефакторики</b> ✨</p>

<p>На рабочем столе мастерской вы можете собрать артефакт собственными руками — из заготовленных частей. После начала работы предмет появляется на столе, а по клику на ячейку открывается окно с описанием стадии. Параллельно можно работать только над одним артефактом. Сначала выберите предмет, который хотите создать, займите свободную ячейку по порядку (от 1 до 20, нумерация слева направо), затем приносите выполненные задания с подтверждением — амс учтут их в продвижение крафта.</p>

<div class="gd-steps-label">Как собрать артефакт</div>
<div class="gd-steps">
<div class="gd-step">
<div class="gd-step__num">1</div>
<div class="gd-step__text">Купить основу за <b>30 галлеонов</b> или пост</div>
</div>
<div class="gd-step">
<div class="gd-step__num">2</div>
<div class="gd-step__text">Выполнить <b>2 общих</b> + <b>4 специальных</b> задания</div>
</div>
<div class="gd-step">
<div class="gd-step__num">3</div>
<div class="gd-step__text">Получить готовый <b>артефакт</b> в инвентарь</div>
</div>
</div>

<div class="gd-stages-label">Стадии крафта</div>
<div class="gd-stages">
<div class="gd-stage">
<div class="gd-stage__icon seed-icon s-0"></div>
<div class="gd-stage__count">0</div>
<div class="gd-stage__name">пусто</div>
</div>
<div class="gd-stage__arrow">→</div>
<div class="gd-stage">
<div class="gd-stage__icon seed-icon s-1"></div>
<div class="gd-stage__count">1–2</div>
<div class="gd-stage__name">основа</div>
</div>
<div class="gd-stage__arrow">→</div>
<div class="gd-stage">
<div class="gd-stage__icon gd-stage__icon--bud"></div>
<div class="gd-stage__count">3–4</div>
<div class="gd-stage__name">камень</div>
</div>
<div class="gd-stage__arrow">→</div>
<div class="gd-stage">
<div class="gd-stage__icon gd-stage__icon--bloom"></div>
<div class="gd-stage__count">5–6</div>
<div class="gd-stage__name">артефакт</div>
</div>
</div>
</div>

<div class="fp-body gd-seeds">
<div class="fp-section-dark">Артефакты и задания</div>

<div class="gd-general">
<div class="gd-general__label">Общие задания</div>
<div class="gd-tasks">
— общее задание про мастерскую и инструменты<br>
— общее задание на участие во флудовой игре<br>
— общее задание про артефакторику в посте<br>
— общее задание про эстетику персонажа<br>
— общее задание про 10 фактов из мира артефактов<br>
— общее задание про подборку ассоциаций<br>
— общее задание про "хочу видеть"<br>
— общее задание про голосование за пост недели
</div>
</div>

<div class="gd-seed">
<div class="gd-seed__icon seed-icon s-0"></div>
<div class="gd-seed__num">Палатка-шатёр</div>
<div class="gd-tasks">
— специальное задание про палатку №1<br>
— специальное задание про походы и уют<br>
— специальное задание про чары расширения пространства<br>
— специальное задание про мемы<br>
— специальное задание на смену аватарки<br>
— специальное задание в пост<br>
— специальное задание про 10 фактов
</div>
</div>

<div class="gd-seed">
<div class="gd-seed__icon seed-icon s-0"></div>
<div class="gd-seed__num">Магиометр</div>
<div class="gd-tasks">
— специальное задание про термометр №1<br>
— специальное задание про скрытые чары<br>
— специальное задание про детективные истории<br>
— специальное задание про подборку книг<br>
— специальное задание про загадку во флуде<br>
— специальное задание в пост<br>
— специальное задание про 10 фактов
</div>
</div>

<div class="gd-seed">
<div class="gd-seed__icon seed-icon s-0"></div>
<div class="gd-seed__num">Автометла</div>
<div class="gd-tasks">
— специальное задание про метлу №1<br>
— специальное задание про путешествия<br>
— специальное задание про квиддич<br>
— специальное задание про подборку маршрутов<br>
— специальное задание про мемы с метлами<br>
— специальное задание в пост<br>
— специальное задание про 10 фактов
</div>
</div>

<div class="gd-seed">
<div class="gd-seed__icon seed-icon s-0"></div>
<div class="gd-seed__num">Чародневник</div>
<div class="gd-tasks">
— специальное задание про книгу №1<br>
— специальное задание про шпионские истории<br>
— специальное задание про подборку 5 цитат<br>
— специальное задание во флуде<br>
— специальное задание про секреты<br>
— специальное задание в пост<br>
— специальное задание про 10 фактов
</div>
</div>

<div class="gd-seed">
<div class="gd-seed__icon seed-icon s-0"></div>
<div class="gd-seed__num">Волшебночки</div>
<div class="gd-tasks">
— специальное задание про очки №1<br>
— специальное задание про старые языки<br>
— специальное задание про подборку манускриптов<br>
— специальное задание про слово на другом языке<br>
— специальное задание про эстетику учёного<br>
— специальное задание в пост<br>
— специальное задание про 10 фактов
</div>
</div>
</div>
</div>

<div class="gm-block">
<div class="gm-h">Описание</div>
<div class="gm-desc"></div>
</div>

<div class="gm-block">
<div class="gm-h">Магический эффект</div>
<div class="gm-effect"></div>
</div>

<div class="gm-foot">Нажми × или кликни по фону, чтобы закрыть.</div>
</div>
</div>
</div>

var hotgrid = root.querySelector('.garden-hotgrid');
var modal = root.querySelector('.garden-modal');

var mTitle = root.querySelector('.gm-title');
var mOwner = root.querySelector('.gm-owner');
var mStage = root.querySelector('.gm-stage');
var mProg = root.querySelector('.gm-prog');
var mType = root.querySelector('.gm-type');
var mDesc = root.querySelector('.gm-desc');
var mEffect= root.querySelector('.gm-effect');
var mIcon = root.querySelector('.gm-icon');

var COLS = parseInt(root.getAttribute('data-cols') || '5', 10);
var ROWS = parseInt(root.getAttribute('data-rows') || '4', 10);

var field = root.querySelector('.garden-field');
if(field){
field.style.setProperty('--cols', COLS);
field.style.setProperty('--rows', ROWS);
}

var EFFECT_LOCKED_TEXT = "Эффект откроется после полной сборки артефакта (6 из 6 заданий).";

function stageFromTasks(done, total){
var t = Math.max(1, Number(total || 1));
var d = Math.max(0, Math.min(Number(done || 0), t));
var ratio = d / t;
if(ratio <= 0) return 0;
if(ratio < 0.34) return 1;
if(ratio < 0.67) return 2;
return 3;
}

function stageName(n){
return ["пусто","основа","камень","артефакт"][n] || ("стадия " + n);
}

var typeLabel = {
tent: "⛺ палатка-шатёр",
thermometer: "🌡️ магический термометр",
broom: "🧹 метла автопилота",
book: "📖 книга записей",
glasses: "👓 очки чтения"
};

var PLOTS = [
{ pos: 1, owner:"Имя игрока", plant:"Палатка-шатёр", type:"tent", tasksDone:6, tasksTotal:6,
note:"Описание процесса крафта палатки-шатра. Здесь будет рассказ о том, как мастер выбирает ткань, накладывает чары расширения пространства, какие чары особенно сложно сочетать и почему конкретно эта работа требует терпения.",
effect:"Магический эффект готовой палатки. Складывается до спичечного коробка, разворачивается в шикарную палатку с базовыми удобствами." },

{ pos: 2, owner:"Имя игрока", plant:"Магический Термометр", type:"thermometer", tasksDone:6, tasksTotal:6,
note:"Описание процесса крафта магического термометра. Текст про настройку шкалы, выбор камня-индикатора и тонкость работы с чарами обнаружения.",
effect:"Магический эффект готового термометра. Показывает температуру и уровень магической активности в помещении." },

{ pos: 3, owner:"Имя игрока", plant:"Метла Автопилота", type:"broom", tasksDone:6, tasksTotal:6,
note:"Описание процесса крафта метлы-автопилота. Здесь будет про работу с древком, чары навигации, особенности привязки к маршрутам.",
effect:"Магический эффект готовой метлы. Задаёшь пункт назначения — доставляет без управления." },

{ pos: 4, owner:"Имя игрока", plant:"Книга Записей", type:"book", tasksDone:0, tasksTotal:6,
note:"Описание процесса крафта книги записей. Работа с бумагой, чары звукозаписи, наложение защитных рун от подделки страниц.",
effect:"Магический эффект готовой книги. Всё сказанное в радиусе 5 метров записывает на страницы." },

{ pos: 5, owner:"Имя игрока", plant:"Очки Чтения", type:"glasses", tasksDone:6, tasksTotal:6,
note:"Описание процесса крафта очков чтения. Подбор линз, чары перевода и увеличения, тонкая огранка камня-фокусатора.",
effect:"Магический эффект готовых очков. Увеличивают мелкий текст и переводят иностранный язык в современный." },

{ pos: 6, owner:"Имя игрока", plant:"Палатка-шатёр", type:"tent", tasksDone:4, tasksTotal:6,
note:"Описание процесса крафта палатки-шатра. Текст-заглушка для второго экземпляра.",
effect:"Магический эффект готовой палатки." },

{ pos: 7, owner:"Имя игрока", plant:"Магический Термометр", type:"thermometer", tasksDone:6, tasksTotal:6,
note:"Описание процесса крафта магического термометра.",
effect:"Магический эффект готового термометра." },

{ pos: 8, owner:"Имя игрока", plant:"Метла Автопилота", type:"broom", tasksDone:2, tasksTotal:6,
note:"Описание процесса крафта метлы-автопилота.",
effect:"Магический эффект готовой метлы." }
];

var byPos = {};
for(var i=0;i<PLOTS.length;i++){ byPos[PLOTS[i].pos] = PLOTS[i]; }

function openModal(plot, stage){
mTitle.textContent = plot.plant || '—';
mOwner.textContent = '👤 ' + (plot.owner || '—');
mStage.textContent = '🛠 ' + stageName(stage);

var done = Number(plot.tasksDone || 0);
var total = Math.max(1, Number(plot.tasksTotal || 1));
mProg.textContent = '✅ ' + done + '/' + total;

var t = (plot.type || 'tent');
mType.textContent = typeLabel[t] || ('✨ ' + t);

mDesc.textContent = plot.note || '—';

if(done >= total){
mEffect.textContent = plot.effect || '—';
mEffect.classList.remove('is-locked');
}else{
mEffect.textContent = EFFECT_LOCKED_TEXT;
mEffect.classList.add('is-locked');
}

setIcon(mIcon, t, stage);

modal.classList.add('is-open');
modal.setAttribute('aria-hidden','false');
document.addEventListener('keydown', onEsc);
}

function closeModal(){
modal.classList.remove('is-open');
modal.setAttribute('aria-hidden','true');
document.removeEventListener('keydown', onEsc);
}
function onEsc(e){ if(e.key === 'Escape') closeModal(); }

modal.addEventListener('click', function(e){
var t = e.target;
if(t && t.getAttribute && t.getAttribute('data-close') === '1') closeModal();
});

var frag = document.createDocumentFragment();
var cellCount = COLS * ROWS;

for(var k=1;k<=cellCount;k++){
var plot = byPos[k];

var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'gspot';

if(!plot){
btn.classList.add('is-empty');
btn.setAttribute('aria-label', 'Пустая ячейка ' + k);
frag.appendChild(btn);
continue;
}

var st = stageFromTasks(plot.tasksDone, plot.tasksTotal);
btn.setAttribute('aria-label', plot.plant + ' — ' + plot.owner);

var icon = document.createElement('div');
icon.className = 'gplant';
setIcon(icon, plot.type, st);
btn.appendChild(icon);

(function(p, s){
btn.addEventListener('click', function(){ openModal(p, s); });
})(plot, st);

frag.appendChild(btn);
}

hotgrid.innerHTML = '';
hotgrid.appendChild(frag);
})();
</script>[/html][hideprofile]

0