Технические полезности

Пётр Александрович · 14 Янв 2019

Выкладываем коды технических полезностей с кратким описанием.

Пётр Александрович · 14 Янв 2019

Колонки

Размер и количество можно регулировать (изменив размеры в строках вверху шаблона и добавив/удалив новые колонки с размерами).

Пояснение по размерам:
Npx - колонка имеет размер в N пикселей
N% - колонка имеет размер в N% от всей таблицы
Nfr - колонка имеет размер, пропорциональный N (среди всех колонок с данным размером)
auto - подобрать размер автоматически

Код:

[PARSEHTML]<div style="display: grid; gap: 5px; grid-template-rows: auto; grid-template-columns:
100px
30%
1fr
2fr
">[/PARSEHTML]

[PARSEHTML]<div style="grid-row: 1; grid-column: 1">[/PARSEHTML]
Колонка 1 (100 пикселей)
[PARSEHTML]</div>[/PARSEHTML]

[PARSEHTML]<div style="grid-row: 1; grid-column: 2">[/PARSEHTML]
Колонка 2 (30%)
[PARSEHTML]</div>[/PARSEHTML]

[PARSEHTML]<div style="grid-row: 1; grid-column: 3">[/PARSEHTML]
Колонка 3
[PARSEHTML]</div>[/PARSEHTML]

[PARSEHTML]<div style="grid-row: 1; grid-column: 4">[/PARSEHTML]
Колонка 4 (вдвое больше)
[PARSEHTML]</div>[/PARSEHTML]

[PARSEHTML] </div>[/PARSEHTML]

Колонка 1 (100 пикселей)

Колонка 2 (30%)

Колонка 3

Колонка 4 (вдвое больше)

Fredrik Mälaren · 26 Мар 2019

Линия

Просто линия, без изысков

Код:

[PARSEHTML]<hr>[/PARSEHTML]

Ta-da

Oh

Пётр Александрович · 4 Апр 2019

Обтекание картинки текстом

Отсутствие переводов строки рядом с тегами важно для внешнего вида.

Пояснение по параметрам:
float: с какой стороны находится картинка (left/right).
height, width, max-height, max-width: могут быть использованы, чтобы указать размер картинки.

Код:

[PARSEHTML]<div style='float: left; max-width: 150px'>[/PARSEHTML][IMG]https://otvet.imgsmail.ru/download/255823626_24aa653da3feacaff4a74e3cd51ebe04_800.jpg[/IMG]
[PARSEHTML]</div>[/PARSEHTML]On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.

Конфедерат · 11 Май 2019

Эммм?! А почему тупо нельзя IMG в PARSEHTML всунуть?

Пётр Александрович · 11 Май 2019

Конфедерат сказал(а):
Эммм?! А почему тупо нельзя IMG в PARSEHTML всунуть?

Формально - потому что это будет не IMG, а <img src=".

Конфедерат · 11 Май 2019

Понятно, тупо лень писать лишние буквы)))

Пётр Александрович · 17 Мар 2020

Прогресс-бар

Пояснение по параметрам:
background-color во второй строке: фоновый цвет полоски.
background-color в третьей строке: цвет заполнения полоски.
width в третьей строке: процент заполнения полоски. Можно прописывать дробями, можно прямо процентами.

Код:

[PARSEHTML]<div style='display: flex; flex-direction: row; align-items: center; width: 90%; margin-left: 10%; margin-right: 10%'>
<div style='height: 0.6rem; margin-right: 1.2rem; flex-grow: 1; background-color: #B2B2B2'>
<div style='height: 100%; width: calc(100% * 5 / 7); background-color: #267F00'>
</div></div>
<p style='margin: 0px'>
71,42%
</p></div>[/PARSEHTML]

71,42%

Batman · 17 Мар 2020

Semenar сказал(а):
Прогресс-бар

Пояснение по параметрам:
background-color во второй строке: фоновый цвет полоски.
background-color в третьей строке: цвет заполнения полоски.
width в третьей строке: процент заполнения полоски. Можно прописывать дробями, можно прямо процентами.

Код:

[PARSEHTML]<div style='display: flex; flex-direction: row; align-items: center; width: 100%'> <div style='height: 0.6rem; margin-right: 2rem; flex-grow: 1; background-color: #B2B2B2'> <div style='height: 100%; width: calc(100% * 5 / 7); background-color: #267F00'> </div></div> <p style='margin: 0px'> 71,42% </p></div>[/PARSEHTML]

71,42%

Для донатов что-ли?

Mathieu Mälaren · 17 Мар 2020

Semenar, спасибо! Классный код, с ним ещё играться и играться в оформлении.

Пётр Александрович · 24 Мар 2020

Переключатель языков

ВАЖНО! Данный пример использует Javascript!
Использование Javascript потенциально может "сломать" другие сообщения, использующие тот же шаблон. В связи с этим крайне рекомендуется использовать уникальные названия при использовании данного примера.

Перед использованием замените 90011337 в шаблоне на своё число.
При использовании нескольких переключателей в одном сообщении выбирайте для них разные числа.

Пояснение по использованию примера:
Вместо LA напишите короткое название основного языка текста.
Вместо RU напишите короткое название второго языка текста.
Вставьте исходный текст между тегами "<div id="text_90011337_default" style="display: block">[/PARSEHTML]" и "[PARSEHTML]</div>".
Вставьте переведённый текст между тегами "<div id="text_90011337_changed" style="display: none">[/PARSEHTML]" и "[PARSEHTML]</div>".

Код:

[PARSEHTML]
<script type='text/javascript'>
function changeLanguage_90011337(elid, old_lang, new_lang, lang_sel) {
let old_el = document.getElementById(elid + "_" + old_lang);
let new_el = document.getElementById(elid + "_" + new_lang);
old_el.style.display = "none";
new_el.style.display = "block";

let lang_sel_old = document.getElementById(lang_sel + "_" + old_lang);
let lang_sel_new = document.getElementById(lang_sel + "_" + new_lang);
lang_sel_old.style.backgroundColor = "white";
lang_sel_new.style.backgroundColor = "rgb(0,216,0)";
}
</script>

<div style='float: right; width: 5.5rem; height: 2rem; margin-left: 1rem; margin-bottom: 1rem; display: flex; flex-direction: row'>
<div id="lang_90011337_default" style='overflow: hidden; background-color: rgb(0,216,0); flex-grow: 1; flex-basis: 0; border: 2px black solid; border-right: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_90011337('text_90011337', 'changed', 'default', 'lang_90011337')">
LA
</div>
<div id="lang_90011337_changed" style='overflow: hidden; background-color: white; flex-grow: 1; flex-basis: 0; border: 2px black solid; border-left: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_90011337('text_90011337', 'default', 'changed', 'lang_90011337')">
RU
</div>
</div>

<div id="text_90011337_default" style="display: block">[/PARSEHTML]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, 
[PARSEHTML]</div>

<div id="text_90011337_changed" style="display: none">[/PARSEHTML]Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить 
[PARSEHTML]</div>
[/PARSEHTML]

LA

RU

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,

Пётр Александрович · 24 Мар 2020

Переключатель языков, вариант с большим числом кнопок

ВАЖНО! Данный пример использует Javascript!
Использование Javascript потенциально может "сломать" другие сообщения, использующие тот же шаблон. В связи с этим крайне рекомендуется использовать уникальные названия при использовании данного примера.

Перед использованием замените 90011337 в шаблоне на своё число.
При использовании нескольких переключателей в одном сообщении выбирайте для них разные числа.

Пояснение по использованию примера:
Для каждого языка требуется добавить два блока: блок вида

<div id="lang_several_90011337_[код языка]" style='overflow: hidden; background-color: white; flex: 1 1 0px; border-left: 1px gray solid; border-right: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_several_90011337('text_several_90011337', '[код языка]', 'lang_several_90011337')">
[название языка]
</div>

(в первую часть)
и блок вида

<div id="text_several_90011337_[код языка]" style="display: none">[/PARSEHTML][текст на языке]
[PARSEHTML]</div>

(во вторую часть).

Код для исходного языка несколько отличается; оставляйте его как есть, за исключением изменения названия и текста.

При необходимости изменить длину полоски с выбором языков меняйте число 7 в "width: 7rem;".

Код:

[PARSEHTML]
<script type='text/javascript'>
var lang_cur_90011337 = "default";

function changeLanguage_several_90011337(elid, new_lang, lang_sel) {
let old_el = document.getElementById(elid + "_" + lang_cur_90011337);
let new_el = document.getElementById(elid + "_" + new_lang);
old_el.style.display = "none";
new_el.style.display = "block";

let lang_sel_old = document.getElementById(lang_sel + "_" + lang_cur_90011337);
let lang_sel_new = document.getElementById(lang_sel + "_" + new_lang);
lang_sel_old.style.backgroundColor = "white";
lang_sel_new.style.backgroundColor = "rgb(0,216,0)";

lang_cur_90011337 = new_lang;
}
</script>

<div style='border: 2px black solid; float: right; width: 7rem; margin-left: 1rem; margin-bottom: 1rem; display: flex; flex-direction: row'>

<div id="lang_several_90011337_default" style='overflow: hidden; background-color: rgb(0,216,0); flex: 1 1 0px; border-left: 1px gray solid; border-right: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_several_90011337('text_several_90011337', 'default', 'lang_several_90011337')">
v.1
</div>

<div id="lang_several_90011337_alt1" style='overflow: hidden; background-color: white; flex: 1 1 0px; border-left: 1px gray solid; border-right: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_several_90011337('text_several_90011337', 'alt1', 'lang_several_90011337')">
v.2
</div>

<div id="lang_several_90011337_alt2" style='overflow: hidden; background-color: white; flex: 1 1 0px; border-left: 1px gray solid; border-right: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_several_90011337('text_several_90011337', 'alt2', 'lang_several_90011337')">
v.3
</div>

</div>

<div id="text_several_90011337_default" style="display: block">[/PARSEHTML]Вот дом,
Который построил Джек.

А это пшеница,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.
[PARSEHTML]</div>

<div id="text_several_90011337_alt1" style="display: none">[/PARSEHTML]Вот дом,
Который построил Джек.

А это пшеница,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.

А это весёлая птица-синица,
Которая часто ворует пшеницу,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.
[PARSEHTML]</div>

<div id="text_several_90011337_alt2" style="display: none">[/PARSEHTML]Вот дом,
Который построил Джек.

А это пшеница,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.

А это весёлая птица-синица,
Которая часто ворует пшеницу,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.

Вот кот,
Который пугает и ловит синицу,
Которая часто ворует пшеницу,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.
[PARSEHTML]</div>
[/PARSEHTML]

v.1

v.2

v.3

Вот дом,
Который построил Джек.

А это пшеница,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.

Пётр Александрович · 7 Апр 2020

Разбивка по фракциям

ВАЖНО! Данный пример использует Javascript!
Использование Javascript потенциально может "сломать" другие сообщения, использующие тот же шаблон. В связи с этим крайне рекомендуется использовать уникальные названия при использовании данного примера.

Перед использованием замените 90011337 в шаблоне на своё число.
При использовании нескольких шаблонов в одном сообщении выбирайте для них разные числа.

В этом примере понадобится много всего менять. Я постарался всё объяснить, но у вас могут остаться вопросы по применению; вы их можете задавать здесь.

Описание
Полоска состоит из блоков, по одному на каждую фракцию. Полный код блока приведён ниже:

<div id="90011337_ld" style="position: relative; flex-grow: 2; flex-shrink: 0; flex-basis: 0; background-color: #00137F; padding: 0.3rem; transition: background-color 0.3s linear; display: flex; flex-direction: column; justify-content: center"
onmouseover="document.getElementById('90011337_ld_tooltip').style.display = 'block'; document.getElementById('90011337_ld').style.backgroundColor = 'green';"
onmouseout="document.getElementById('90011337_ld_tooltip').style.display = 'none'; document.getElementById('90011337_ld').style.backgroundColor = '#00137F';">
<p style="color: white; text-align: center; margin: 0px">Либеральные демократы</p>
<div id="90011337_ld_tooltip" style="display: none; position: absolute; width: 240px; left: calc(50% - 120px); top: 2rem; padding: 10px; background-color: white; box-shadow: 0 0 10px black; z-index: 4">
[/PARSEHTML]
[CENTER]Численность: [B]2[/B][/CENTER]

@Matthieu
@Fredrik Mälaren[PARSEHTML]
</div></div>

Жирным выделены части кода, которые потребуется изменить.

ld - уникальный идентификатор фракции. При использовании придумайте короткое обозначение для фракции и подставьте его вместо ld.
2 - численность фракции.
#00137F - цвет, который будет использоваться в полоске для фракции. Смените на соответствующий.
Либеральные демократы - название фракции. Удалите, если оно не влезает в полоску.
@Matthieu и @Fredrik Mälaren - члены фракции.

Код:

[PARSEHTML]<div style="display: flex; width: 100%; min-height: 2rem; flex-direction: row">



<div id="90011337_ld" style="position: relative; flex-grow: 2; flex-shrink: 0; flex-basis: 0; background-color: #00137F; padding: 0.3rem; transition: background-color 0.3s linear; display: flex; flex-direction: column; justify-content: center"
onmouseover="document.getElementById('90011337_ld_tooltip').style.display = 'block'; document.getElementById('90011337_ld').style.backgroundColor = 'green';"
onmouseout="document.getElementById('90011337_ld_tooltip').style.display = 'none'; document.getElementById('90011337_ld').style.backgroundColor = '#00137F';">
<p style="color: white; text-align: center; margin: 0px">Либеральные демократы</p>
<div id="90011337_ld_tooltip" style="display: none; position: absolute; width: 240px; left: calc(50% - 120px); top: 2rem; padding: 10px; background-color: white; box-shadow: 0 0 10px black; z-index: 4">
[/PARSEHTML][CENTER]Численность: [B]2[/B][/CENTER]

[USER=8]Matthieu[/USER]
[USER=2]Fredrik Mälaren[/USER][PARSEHTML]
</div></div>


<div id="90011337_com" style="position: relative; flex-grow: 1; flex-shrink: 0; flex-basis: 0; background-color: #7F1300; padding: 0.3rem; transition: background-color 0.3s linear; display: flex; flex-direction: column; justify-content: center"
onmouseover="document.getElementById('90011337_com_tooltip').style.display = 'block'; document.getElementById('90011337_com').style.backgroundColor = 'green'"
onmouseout="document.getElementById('90011337_com_tooltip').style.display = 'none'; document.getElementById('90011337_com').style.backgroundColor = '#7F1300'">
<p style="color: white; text-align: center; margin: 0px">Трудовики</p>
<div id="90011337_com_tooltip" style="display: none; position: absolute; width: 240px; left: calc(50% - 120px); top: 2rem; padding: 10px; background-color: white; box-shadow: 0 0 10px black; z-index: 4">
[/PARSEHTML][CENTER]Численность: [B]1[/B][/CENTER]

[USER=180]Axel Mälaren[/USER][PARSEHTML]
</div></div>


<div id="90011337_ind" style="position: relative; flex-grow: 1; flex-shrink: 0; flex-basis: 0; background-color: #808080; padding: 0.3rem; transition: background-color 0.3s linear; display: flex; flex-direction: column; justify-content: center"
onmouseover="document.getElementById('90011337_ind_tooltip').style.display = 'block'; document.getElementById('90011337_ind').style.backgroundColor = 'green'"
onmouseout="document.getElementById('90011337_ind_tooltip').style.display = 'none'; document.getElementById('90011337_ind').style.backgroundColor = '#808080'">
<p style="color: white; text-align: center; margin: 0px">Независимые</p>
<div id="90011337_ind_tooltip" style="display: none; position: absolute; width: 240px; left: calc(50% - 120px); top: 2rem; padding: 10px; background-color: white; box-shadow: 0 0 10px black; z-index: 4">
[/PARSEHTML][CENTER]Численность: [B]1[/B][/CENTER]

[USER=3]Пал Сергеич[/USER][PARSEHTML]
</div></div>



</div>[/PARSEHTML]

Mathieu Mälaren · 7 Апр 2020

Шикарно!

Пётр Александрович · 20 Окт 2020

Разные сообщения для разных пользователей

ВАЖНО! Данный пример использует Javascript!
Использование Javascript потенциально может "сломать" другие сообщения, использующие тот же шаблон. В связи с этим крайне рекомендуется использовать уникальные названия при использовании данного примера.

Перед использованием замените 90011337 в шаблоне на своё число.
При использовании нескольких сообщений в одном сообщении выбирайте для них разные числа.

Пояснение по использованию примера:

В массиве alt_users укажите ID всех пользователей, которым предназначено альтернативное сообщение.
Как узнать ID пользователя? ID можно увидеть при переходе в профиль нужного пользователя; он будет содержаться в ссылке.

Замените

Код:

[VISITOR][/VISITOR], какая же хорошая погода в России сегодня!

на исходное сообщение.

Замените

Код:

[VISITOR][/VISITOR], голосуй за демократов на выборах!

на альтернативное сообщение.

Код:

[PARSEHTML]
<script type='text/javascript'>
function selectProperVariant_90011337() {
let alt_users = [8, 37, 361, 364, 7, 246, 42, 332, 2, 3, 180, 4, 355, 416, 12, 9];

let ID = -1;
if (document.getElementsByClassName("avatar--xxs")[0] !== undefined) ID = Number(document.getElementsByClassName("avatar--xxs")[0].getAttribute("data-user-id"));
if (alt_users.includes(ID)) {
document.getElementById("message_90011337_orig").style.display = "none";
document.getElementById("message_90011337_alt").style.display = "";
}
}
</script>

<p id="message_90011337_orig">
[/PARSEHTML][VISITOR][/VISITOR], какая же хорошая погода в России сегодня![PARSEHTML]
</p>

<p id="message_90011337_alt" style="display: none">
[/PARSEHTML][VISITOR][/VISITOR], голосуй за демократов на выборах![PARSEHTML]
</p>

<script type='text/javascript'>selectProperVariant_90011337();</script>[/PARSEHTML]

Гость, какая же хорошая погода в России сегодня!

Axel Mälaren · 31 Янв 2021

"Просматривайте заархивированные и кэшированные версии веб-страниц в 10+ поисковых системах, таких как Wayback Machine, Archive․is, Google, Bing, Yandex, Gigablast, WebCite, Sogou, Memento, Naver и Yahoo Japan. "

Версия для браузеров на основе Chromium.
Версия для Firefox.

Пётр Александрович · 5 Июн 2021

Фон для всех сообщений

Код необходимо разместить в первом сообщении темы; оно должно быть закреплено.
Можно менять ссылку на свой фон.

Код:

[PARSEHTML]<style>.message-content .message-userContent {
background-image: url(https://i.imgur.com/GYBzuHF.jpg);
background-size: cover; }</style>[/PARSEHTML]

Пример

Пётр Александрович · 23 Июн 2022

Круговой состав парламента

Пояснение по примеру:
Код, который необходимо поменять, находится в самом конце примера:

{
"CDU-Antonio": 116,
"CDU-Palpatine": 117,
"CDU-Romanoff": 117,
"Volt-Aushtraf": 175,
"Volt-Герман": 175
},
{
"CDU-Antonio": {
"color": "#c4181b",
"name": "Antonio",
"spectrum": -5
},
"CDU-Palpatine": {
"color": "#c4181b",
"name": "Palpatine",
"spectrum": -5
},
"CDU-Romanoff": {
"color": "#c4181b",
"name": "Romanoff",
"spectrum": -5
},
"Volt-Aushtraf": {
"color": "#4b7be5",
"name": "Konstantin Aushtraf",
"spectrum": 5
},
"Volt-Герман": {
"color": "#4b7be5",
"name": "Герман фон Эльбарзен",
"spectrum": 5
}
}

Здесь указывается состав парламента. Параметр spectrum отвечает за сортировку его членов.

Код:

[PARSEHTML]
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<style>
.parliament_holder > * {
width: 100%;
}
.parliament_faction:hover > circle {
filter: brightness(0.7);
transition: all 0.35s ease;
}
.parliament_faction_name {
fill: #00CD00;
opacity: 0;
}
.parliament_faction:hover > .parliament_faction_name {
opacity: 0.5;
transition: all 0.35s ease;
}
</style>
<script>
function drawParliament(composition, party_data, script_tag) {
// console.log(composition);
// console.log(party_data);
// console.log(script_tag);

// Calculate parameters
let total_seats = 0;
for (let party of Object.keys(composition)) {
total_seats += composition[party];
}
console.log(total_seats);

let SEAT_RADIUS = 10;
let CIRCLE_DIFFERENCE = 3;
let BENCH_SKIP = 25;
let EXTRA_NUMBER_SPACE = 70;
let PARTY_LEGEND = 20;
let PARTY_LEGEND_SKIP = 10;

let total_rows = 0;
let total_placed_seats = 0;

while (total_placed_seats < total_seats) {
total_rows++;
total_placed_seats = 0;

EXTRA_NUMBER_SPACE += Math.PI / 10;

let total_bench_skip = (total_rows - 1) * BENCH_SKIP;
let smallest_radius = total_bench_skip / (CIRCLE_DIFFERENCE - 1) + EXTRA_NUMBER_SPACE;

for (let current_bench = 0; current_bench < total_rows; current_bench += 1) {
total_placed_seats += Math.ceil(Math.PI * (smallest_radius + current_bench * BENCH_SKIP) / BENCH_SKIP);
}

// console.log(total_rows + ": " + total_placed_seats);
}

let total_bench_skip = (total_rows - 1) * BENCH_SKIP;
let smallest_radius = total_bench_skip / (CIRCLE_DIFFERENCE - 1) + EXTRA_NUMBER_SPACE;

let hskip_l = BENCH_SKIP;
let hskip_r = 1e18;
for (let iter = 0; iter < 100; iter += 1) {
let hskip_mid = (hskip_l + hskip_r) / 2;
total_placed_seats = 0;

for (let current_bench = 0; current_bench < total_rows; current_bench += 1) {
total_placed_seats += Math.ceil(Math.PI * (smallest_radius + current_bench * BENCH_SKIP) / hskip_mid);
}

// console.log(hskip_mid + " == " + total_placed_seats);

if (total_placed_seats < total_seats) {
    hskip_r = hskip_mid;
}
else {
    hskip_l = hskip_mid;
}
}

let total_w = 2 * EXTRA_NUMBER_SPACE + 2 * BENCH_SKIP * (total_rows - 1) * CIRCLE_DIFFERENCE / (CIRCLE_DIFFERENCE - 1) + 2 * SEAT_RADIUS;
let total_h = EXTRA_NUMBER_SPACE + BENCH_SKIP * (total_rows - 1) * CIRCLE_DIFFERENCE / (CIRCLE_DIFFERENCE - 1) + 2 * SEAT_RADIUS;

let draw = SVG().addTo(script_tag);
draw.viewbox(0, 0, total_w, total_h + 2 * PARTY_LEGEND_SKIP + (PARTY_LEGEND + PARTY_LEGEND_SKIP) * Object.keys(composition).length);

let circles = []

for (let current_bench = 0; current_bench < total_rows; current_bench += 1) {
let current_radius = smallest_radius + current_bench * BENCH_SKIP;
let bench_seats = Math.ceil(Math.PI * current_radius / hskip_l);
if (bench_seats == 1) {
let circle = draw.circle(SEAT_RADIUS);
circle.move(total_w / 2.0 - SEAT_RADIUS, total_h - current_radius - 2 * SEAT_RADIUS);
circles.push([circle, current_bench, Math.PI / 2.0]);
}
else {
for (let idx = 0; idx < bench_seats; idx++) {
let angle_loc = Math.PI * idx / (bench_seats - 1);
let circle = draw.circle(2 * SEAT_RADIUS);
circle.move(total_w / 2.0 - SEAT_RADIUS + current_radius * Math.cos(angle_loc), total_h - current_radius * Math.sin(angle_loc) - 2 * SEAT_RADIUS);
circles.push([circle, current_bench, angle_loc]);
}
}
}

circles.sort(function (a, b) {
if (a[2] < b[2] - 1e-6) { return 1; }
if (a[2] > b[2] + 1e-6) { return -1; }
if (a[1] < b[1]) { return -1; }
if (a[1] > b[1]) { return 1; }
return 0;
});

// console.log(circles);

let parties = [];
for (let party of Object.keys(composition)) {
parties.push([party, party_data[party].spectrum]);
}
parties.sort(function (a, b) {
if (a[1] < b[1]) { return -1; }
if (a[1] > b[1]) { return 1; }
return 0;
});
console.log(parties);

total_placed_seats = 0;
let parties_drawn = 0;

for (let party of parties) {
let group = draw.group();
group.addClass('parliament_faction');
for (let idx = 0; idx < composition[party[0]]; idx += 1) {
circles[total_placed_seats][0].fill(party_data[party[0]].color);
group.add(circles[total_placed_seats][0]);
total_placed_seats += 1;
}
let title = draw.element('title').words(party_data[party[0]].name);
group.add(title);
let rect = draw.rect(PARTY_LEGEND * 0.8, PARTY_LEGEND * 0.8);
rect.fill(party_data[party[0]].color);
rect.stroke({ color: '#000000', width: PARTY_LEGEND * 0.1 });
rect.x(PARTY_LEGEND_SKIP);
rect.y(total_h + 2 * PARTY_LEGEND_SKIP + (PARTY_LEGEND + PARTY_LEGEND_SKIP) * parties_drawn);
group.add(rect);

let party_name = draw.text(party_data[party[0]].name);
party_name.css('font-family', 'Bahnschrift');
party_name.css('font-size', PARTY_LEGEND);
party_name.css('margin', '0');
party_name.y(total_h + 2 * PARTY_LEGEND_SKIP + PARTY_LEGEND * 0.9 + (PARTY_LEGEND + PARTY_LEGEND_SKIP) * parties_drawn);
party_name.x(PARTY_LEGEND + PARTY_LEGEND_SKIP * 2);
party_name.children()[0].dy(0)
group.add(party_name);

let party_places = draw.text(composition[party[0]] + "");
party_places.css('font-family', 'Bahnschrift');
party_places.css('font-size', PARTY_LEGEND);
party_places.css('margin', '0');
party_places.css('text-anchor', 'end');
party_places.y(total_h + 2 * PARTY_LEGEND_SKIP + PARTY_LEGEND * 0.9 + (PARTY_LEGEND + PARTY_LEGEND_SKIP) * parties_drawn);
party_places.x(total_w - PARTY_LEGEND_SKIP - party_places.bbox().width);
party_places.children()[0].dy(0)
group.add(party_places);

/* let underscore = draw.line(party_name.bbox().x2 + PARTY_LEGEND_SKIP / 2.0, party_name.bbox().y2, party_places.bbox().x - PARTY_LEGEND_SKIP / 2.0, party_name.bbox().y2);
underscore.stroke({ color: '#000000', width: PARTY_LEGEND * 0.05 });
group.add(underscore); */


let bounding_rect = draw.rect(total_w - PARTY_LEGEND_SKIP * 1.6, PARTY_LEGEND + PARTY_LEGEND_SKIP * 0.4);
bounding_rect.x(PARTY_LEGEND_SKIP * 0.8);
bounding_rect.y(total_h + 2 * PARTY_LEGEND_SKIP * 0.8 + (PARTY_LEGEND + PARTY_LEGEND_SKIP) * parties_drawn);
bounding_rect.addClass('parliament_faction_name');
group.add(bounding_rect);
bounding_rect.back();

parties_drawn += 1;
}

let text = draw.text(total_seats + "");
text.css('font-family', 'Ubuntu');
text.css('font-size', 2.0 * (smallest_radius - SEAT_RADIUS) / (total_seats + "").length);
text.css('margin', '0');
text.css('text-anchor', 'middle');
text.cy(total_h - smallest_radius * 1.0 / 3.0);
text.cx(total_w / 2);
text.children()[0].dy(0)
}
</script>
<div style="display: flex; flex-direction: row; justify-content: center" class="parliament_holder">
<script id="current_script">
current_script = document.currentScript.parentElement;
if (!current_script.classList.contains('parliament_holder')) {
if (document.getElementsByClassName("xfPreview").length > 0) {
current_script = document.getElementsByClassName("xfPreview")[0].getElementsByClassName("parliament_holder")[0];
}
}
setTimeout(drawParliament,
100,
{
"CDU-Antonio": 116,
"CDU-Palpatine": 117,
"CDU-Romanoff": 117,
"Volt-Aushtraf": 175,
"Volt-Герман": 175
},
{
"CDU-Antonio": {
"color": "#c4181b",
"name": "Antonio",
"spectrum": -5
},
"CDU-Palpatine": {
"color": "#c4181b",
"name": "Palpatine",
"spectrum": -5
},
"CDU-Romanoff": {
"color": "#c4181b",
"name": "Romanoff",
"spectrum": -5
},
"Volt-Aushtraf": {
"color": "#4b7be5",
"name": "Konstantin Aushtraf",
"spectrum": 5
},
"Volt-Герман": {
"color": "#4b7be5",
"name": "Герман фон Эльбарзен",
"spectrum": 5
}
},
current_script
);
</script>
</div>
[/PARSEHTML]

Пётр Александрович · 7 Июл 2022

Вкладки

Код:

[PARSEHTML]
<script src="https://politsim.semenar.ru/unrelated/scripts/multiple_categories_message/script.js"></script>
<link href="https://politsim.semenar.ru/unrelated/scripts/multiple_categories_message/style.css" rel="stylesheet">
[/PARSEHTML]

[PARSEHTML]
<div class="multiple_categories_message_content_not_processed">
[/PARSEHTML]

[CATEGORY]Русский[/CATEGORY]

[FONT=Gabriela]На основании Закона о департаментах и коммунах:
§1. ...[/FONT]

[CATEGORY]Français[/CATEGORY]

[FONT=Gabriela]Conformément aux la loi sur les départements, [B]a décidé[/B]:
§1. ...[/FONT]

[CATEGORY]Italiano[/CATEGORY]

[FONT=Gabriela]In base alla Legge sui Dipartimenti e Comuni e alla Legge sulle Festività Nazionali e Locali:
§1. ...[/FONT]

[PARSEHTML]
</div>
[/PARSEHTML]

[CATEGORY]Русский[/CATEGORY]

На основании Закона о департаментах и коммунах:
§1. ...

[CATEGORY]Français[/CATEGORY]

Conformément aux la loi sur les départements, a décidé:
§1. ...

[CATEGORY]Italiano[/CATEGORY]

In base alla Legge sui Dipartimenti e Comuni e alla Legge sulle Festività Nazionali e Locali:
§1. ...

Технические полезности

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

Затемнённый абсолютист

Затемнённый абсолютист

‮тобAGEM

‮тобAGEM

Гражданин войны

Гражданин войны

‮тобAGEM

‮тобAGEM

Гражданин войны

Гражданин войны

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM