Внешность на Нужных можно придержать в соответствующей теме: Занятые внешности
ИЩУ [кого ищете]
имя прототипа внешностиИМЯ | NAME
раса | возраст | род деятельности• Желаемый образ
В этом пункте отображаются все основные пожелания к разыскиваемому персонажу: факты биографии, важные для вас черты характера, внешность и прочее. Возможно связное или тезисное изложение.• Отношения с вашим персонажем
• Для чего разыскиваете, планы на игру
Что хотите играть, также - в каких эпизодах упоминался.• Тип приемки
Полный/упрощенный шаблон и любые дополнительные уточнения для потенциального игрока до приема в игру (где связаться, какой пост хотите увидеть и тд)Пример постаЛюбой ваш пост
Код:[quote][align=center][size=16][font=palatino linotype][b]ИЩУ [кого ищете][/font] [/size][/b][/align] [align=center][img]https://forumupload.ru/uploads/001c/03/d9/2/261373.png[/img] [font=palatino linotype][i][size=10]имя прототипа внешности[/size][/i][/align][/font] [align=center][b][size=18][font=palatino linotype]ИМЯ | NAME [/font][/size][/b] [font=palatino linotype] раса | возраст | род деятельности[/align][/font] [/quote] [quote][font=palatino linotype][size=16][b]• Желаемый образ[/b][/size][/font] В этом пункте отображаются все основные пожелания к разыскиваемому персонажу: факты биографии, важные для вас черты характера, внешность и прочее. Возможно связное или тезисное изложение. [font=palatino linotype][size=16][b]• Отношения с вашим персонажем[/b][/size][/font] [font=palatino linotype][size=16][b]• Для чего разыскиваете, планы на игру[/b][/size][/font] Что хотите играть, также - в каких эпизодах упоминался. [font=palatino linotype][size=16][b]• Тип приемки[/b][/size][/font] Полный/упрощенный шаблон и любые дополнительные уточнения для потенциального игрока до приема в игру (где связаться, какой пост хотите увидеть и тд) [spoiler="Пример поста"]Любой ваш пост[/spoiler] [/quote]
!!! Заявки на нужных Избранных нужно обязательно заранее согласовать с АМС.
СПИСОК НУЖНЫХ
••••••••••••••••••••••••••••••••••••••••••••
[html]<script>
const Tags = {
Gender: {
Male: { id: 'Male', name: 'Мужской' },
Female: { id: 'Female', name: 'Женский' }
},
Activities: {
Politics: { id: 'Politics', name: 'Политики' },
Warrior: { id: 'Warrior', name: 'Воины' },
Gods: { id: 'Gods', name: 'Служители богов' },
Wizard: { id: 'Wizard', name: 'Маги' },
Kale: { id: 'Kale', name: 'Кале' },
Criminal: { id: 'Criminal', name: 'Криминал' },
},
Races: {
Human: { id: 'Human', name: 'Люди' },
Vampire: { id: 'Vampire', name: 'Вампиры' },
Soulless: { id: 'Soulless', name: 'Бездушники' },
Aire: { id: 'Aire', name: 'Айре' },
Werewolf: { id: 'Werewolf', name: 'Перевертыши' },
Beastman: { id: 'Beastman', name: 'Зверолюди' },
},
Aim: {
Family: { id: 'Family', name: 'Семья' },
Love: { id: 'Love', name: 'Пара' },
Friend: { id: 'Friend', name: 'Дружба' },
Enemy: { id: 'Enemy', name: 'Враги' },
Worker: { id: 'Worker', name: 'Подчиненные' },
Plot: { id: 'Plot', name: 'Сюжет' }
}
};
let fullUserlist = [];
const filtersContainer = document.querySelector('.filters');
const resultsContainer = document.querySelector('.resultsContainer');
const filters = {
gender: document.querySelector('.gender.filter'),
activity: document.querySelector('.activity.filter'),
race: document.querySelector('.race.filter'),
};
const dropdown = document.querySelector('.filterDropdown');
function updateFilters() {
const selectedGender = Object.values(Tags.Gender).find(item => item.name === filters.gender.textContent.trim());
const selectedActivity = Object.values(Tags.Activities).find(item => item.name === filters.activity.textContent.trim());
const selectedRace = Object.values(Tags.Races).find(item => item.name === filters.race.textContent.trim());
const filteredUsers = fullUserlist.filter(user => {
const matchesGender = filters.gender.textContent.trim() === 'Все' || user.tags.includes(selectedGender?.id);
const matchesActivity = filters.activity.textContent.trim() === 'Все' || user.tags.includes(selectedActivity?.id);
const matchesRace = filters.race.textContent.trim() === 'Все' || user.tags.includes(selectedRace?.id);
return matchesGender && matchesActivity && matchesRace;
});
displayResults(filteredUsers);
}
function splitUsersByGroups(users) {
const result = Object.values(Tags.Aim).map(aim => {
const groupUsers = users.filter(user => user.tags.includes(aim.id));
return {
users: groupUsers,
aim: aim
};
});
return result;
}
function getGroupContent(group) {
if (Array.isArray(group.users) && group.users.length == 0) {
return '';
}
let result = '';
result += `<span class='groupTitle'>${group.aim.name}</span>`;
if (Array.isArray(group.users) && group.users.length > 0) {
result += `<div class='groupContainer'>` +
group.users.map(user => {
const nameWithFlags = `${user.name}`;
const displayName = user.url ? `<a href="${user.url}">${nameWithFlags}</a>` : nameWithFlags;
return `<span class='user'><b>${displayName}</b> - ${user.descr}</span>`;
}).join('') +
`</div>`;
}
return result;
}
function displayResults(users) {
const groups = splitUsersByGroups(users);
resultsContainer.innerHTML = groups.map(group => getGroupContent(group)).join('');
}
function addClicks() {
const dropdownElems = document.querySelectorAll('.selectable');
dropdownElems.forEach(elem => {
elem.addEventListener('click', function(event) {
const selectedId = event.target.classList[0];
const category = event.target.classList[1];
if (category === 'gender') {
filters.gender.textContent = selectedId === 'all' ? 'Все' : Object.values(Tags.Gender).find(item => item.id === selectedId).name;
} else if (category === 'activity') {
filters.activity.textContent = selectedId === 'all' ? 'Все' : Object.values(Tags.Activities).find(item => item.id === selectedId).name;
} else if (category === 'race') {
filters.race.textContent = selectedId === 'all' ? 'Все' : Object.values(Tags.Races).find(item => item.id === selectedId).name;
}
dropdown.style.display = 'none';
updateFilters();
});
});
}
filters.gender.addEventListener('click', function(event) {
dropdown.innerHTML = `<div class="all gender selectable">Все</div>` + Object.values(Tags.Gender).map(gender =>
`<div class="${gender.id} gender selectable">${gender.name}</div>`
).join('');
dropdown.style.display = 'inline-block';
addClicks();
});
filters.activity.addEventListener('click', function(event) {
dropdown.innerHTML = `<div class="all activity selectable">Все</div>` + Object.values(Tags.Activities).map(activity =>
`<div class="${activity.id} activity selectable">${activity.name}</div>`
).join('');
dropdown.style.display = 'inline-block';
addClicks();
});
filters.race.addEventListener('click', function(event) {
dropdown.innerHTML = `<div class="all race selectable">Все</div>` + Object.values(Tags.Races).map(race =>
`<div class="${race.id} race selectable">${race.name}</div>`
).join('');
dropdown.style.display = 'inline-block';
addClicks();
});
document.querySelectorAll('.filter').forEach(filter => {
filter.addEventListener('mouseenter', function(event) {
const filterRect = filter.getBoundingClientRect();
dropdown.style.left = `${filterRect.left}px`;
dropdown.style.top = `${filterRect.bottom + window.scrollY - 27}px`;
});
});
dropdown.addEventListener('mouseleave', function(event) {
dropdown.style.display = 'none';
});
window.addEventListener('message', function(event) {
if (event.data.eventName == 'postUserAction') {
fullUserlist = event.data.userList;
updateFilters();
}
});
setTimeout(() => { window.parent.postMessage({ eventName: 'getUserAction' }, "*"); }, 1000);
</script>
<div>
<div class="filters">
<h3 class="rolesHeading">Фильтры</h3>
<div class="location filterCategory">
<span>Пол:</span>
<div class="gender filter">Все</div>
</div>
<div class="activities filterCategory">
<span>Род деятельности:</span>
<div class="activity filter">Все</div>
</div>
<div class="races filterCategory">
<span>Раса:</span>
<div class="race filter">Все</div>
</div>
</div>
<div class="filterDropdown" style="display: none"></div>
<div class="results">
<div class="resultsContainer"><span class="loading">Загружаем...<span/></div>
</div>
</div>
<style>
.loading {
text-align: center;
margin-top: 12px;
display: block;
}
.rolesHeading {
margin: 8px 0px 4px 0px;
font-weight: bold !important;
font-size: 1.2em !important;
}
.filters, .results {
border-radius: 4px;
border: 1px solid var(--pinkBorder);
background: var(--lightBG);
padding: 0px 10px 10px 10px;
}
.filters {
margin-bottom: 10px;
}
.filters .filterCategory {
display: flex;
gap: 4px;
margin-bottom: 4px;
align-items: anchor-center;
}
.filters .filter {
border-radius: 16px;
border: 1px solid var(--pinkBorder);
background: var(--lightBG);
padding: 4px 8px;
transition: ease-in-out 0.1s background, ease-in-out 0.1s color;
}
.filters .filter:hover {
background: var(--pinkBorder);
color: #fff;
}
.filterDropdown {
border-radius: 4px;
border: 1px solid var(--pinkBorder);
background: var(--lightBG);
padding: 10px 0px;
position: fixed;
}
.selectable {
padding: 3px 10px;
}
.selectable:hover {
background: var(--pinkBorder);
color: #fff;
}
.resultsContainer span.user {
margin-bottom: 1px;
line-height: 150% !important;
color: #333333;
font: normal 14px Roboto, verdana, arial, helvetica, sans-serif;
display: block;
}
span.groupTitle {
font-size: 18px;
margin-top: 16px;
margin-bottom: 8px;
font-family: Palatino Linotype;
font-weight: 700;
text-align: center;
display: block;
}
.selectable, .filter {
cursor: pointer;
}
.results { margin-bottom: 80px; }
</style>
[/html]
ДЛЯ ВСЕХ НУЖНЫХ ДЕЙСТВУЕТ АКЦИЯ УПРОЩЕННЫЙ ПРИЕМ (если не указано обратное)
