[hideprofile]
У НЕБА НЕТ ПРИЧАЛА
Дата: 05.02.1980
Место: в небе, в опасной близости от побережья острова Колл, рядом с Сорисдейлом.
Действующие лица: @James Potter, @Sirius Black, @Leona KeggПосле тревожных и затяжных первых двадцати четырёх часов, наполненных тишиной и отсутствием информации о том, как именно обстоят дела в драконьем заповеднике и есть ли выжившие, в Министерство от патрулирующих периметр групп поступило донесение о выжившем драконе.
Взлетев, он сперва кружил над побережьем острова Мак, а потом покинул выжженную пустошь, в которую превратился его родной дом, и направился в сторону острова Колл.
Приказ прост: нужно найти дракона и приложить все силы, чтобы задержать или отвлечь его, не дать ему добраться до маггловского поселения. Никто не надеется, что вы сможете его остановить.Важно! Обязательно ознакомьтесь.Сроки и условия отписи:
● для игроков круг длится 2 дня (с 22:00 Мск и до этого же часа);
● на отпись ГМа даются сутки (с 22:00 Мск и до этого же часа);
● посты игроков не более 2000 символов, за превышение объема штраф (-2 ХП);
● кол-во постов на каждом кругу, кроме первого: 1 шт.Дополнительная информация по квесту:
Стажеры ДОМП на метлах. Целительницу же посадили на одного из гранианов, которых любезно предоставила в помощь семья МакКиннон.
Вас снабдили куртками из плотной драконьей кожи, зачарованными от огня. Но всё равно не стоит лезть под пламя.
Метлы так же заколдовали.Боевая система:
● На каждом ходу вы можете совершить два действия (атакующих или защитных (для Леоны есть вариант из исцеляющих заклинаний), строгого деления на атаку + защиту нет).
● У Джеймса и Сириуса есть бонусы к защитной и боевой магии, но нет бонуса к заклинаниям, направленным на целительство.
● У Леоны ситуация обратная: есть бонус на целительную магию, но нет к атаке и защите.
● У каждого есть с собой два рубиновых отвара, которые восстанавливают по 5 ХП. Выпивание зелья не забирает у вас ход и действия.
● Если целитель оказывает вам помощь, то делать это желательно на краю «арены» и в спокойной обстановке. Пока персонажа лечат, он не может участвовать в бою. То есть атаковать дракона не получится, но можно защитить себя и целителя.
● Со старта атаки дракона, характерные для его поведения, вам неизвестны. Информация о нём будет пополняться по ходу действия квеста.Критическое состояние:
● Если ХП достигает 0, единственное действие, доступное персонажу в течение двух ходов, — выпить зелье или использовать порт-ключ, чтобы покинуть локацию (и квест). Если персонаж этого не делает, он теряет сознание.
● При 0 ХП нельзя лечить самого себя магией, если вы не целитель.
● Если за эти два хода ХП персонажа восстанавливают другие игроки, он может продолжить участие в квесте.Взаимодействие с картой:
● Карта поделена на сектора, где центром всегда будет дракон.
● За 1 ход вы можете переместиться на 1 ячейку. Например, из С1 в С2 или в С12. Либо переместиться ближе или дальше от цели, например: из С1 в B1 или D1. Если ячейка касается двух других, то перейти можно в любую из них, пример С2: из неё можно попасть как в B1, так и в B2.
● Дальность от дракона не влияет на возможность его атаковать. Вы можете это делать, как находясь, например, в ячейке А3, так и в D5.
Но насколько атаки издалека эффективны или вообще безопасны — выясните в игре.
● Просьба в конце поста указывать ячейку, в которой находится ваш герой, когда вы найдете дракона.Карта[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Карточки персонажей + Дракон | Магическая битва</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}body {
background-color: #1a1a1a;
color: #4a3436;
line-height: 1.6;
padding: 20px;
}.table-wrapper {
max-width: 1100px;
margin: 0 auto;
border: 2px solid #4a3436;
border-radius: 14px;
padding: 4px;
background-color: #4a3436;
}.container-global {
max-width: 1080px;
margin: 0 auto;
background-color: #dbd4cd;
border-radius: 12px;
overflow: visible; /* Меняем на visible, чтобы тултипы не обрезались */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border: 1px solid #4a3436;
padding-bottom: 24px;
}.players-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 30px 24px 20px 24px;
background-color: #dbd4cd;
}.character-card {
background-color: #f5f0eb;
border-radius: 18px;
border: 2px solid #4a3436;
padding: 16px 14px 18px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: relative; /* Важно для тултипов, чтобы они позиционировались относительно карточки */
overflow: visible; /* Чтобы тултипы не обрезались */
}.character-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
border-color: #caa954;
}.character-title {
font-size: 18px;
font-weight: bold;
color: #4a3436;
text-align: center;
background: #e8dfd7;
padding: 8px 6px;
border-radius: 40px;
border: 1px solid #caa954;
}.image-container {
display: flex;
justify-content: center;
align-items: center;
width: 170px;
height: 170px;
margin: 0 auto;
background-color: #dbd4cd;
border-radius: 16px;
border: 1px solid #4a3436;
}.character-image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 14px;
border: 1px solid #caa954;
}.hp-bar-container {
width: 100%;
margin: 4px 0 2px;
}.hp-bar-label {
font-size: 12px;
font-weight: 600;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
color: #4a3436;
background: #e3d8cf;
padding: 2px 8px;
border-radius: 20px;
}.hp-bar-bg {
background-color: #ac9f94;
border-radius: 20px;
height: 26px;
width: 100%;
overflow: hidden;
border: 1px solid #4a3436;
}.hp-bar-fill {
background-color: #c13b2b;
width: 100%;
height: 100%;
border-radius: 20px;
transition: width 0.25s ease;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
color: white;
font-weight: bold;
font-size: 13px;
text-shadow: 0 0 3px black;
}.items-grid {
display: flex;
justify-content: center;
gap: 16px;
margin: 8px 0 0;
flex-wrap: wrap;
}.item-slot {
position: relative;
width: 60px;
height: 60px;
flex-shrink: 0;
cursor: help;
background-color: #dbd4cd;
border-radius: 12px;
border: 2px solid #4a3436;
transition: all 0.15s;
overflow: visible; /* Чтобы тултип не обрезался */
}.item-slot:hover {
border-color: #caa954;
transform: scale(1.02);
}.item-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 10px;
}/* Исправленный тултип */
.item-tooltip {
visibility: hidden;
opacity: 0;
background-color: #4a3436;
color: #fef3e2;
text-align: center;
border-radius: 12px;
padding: 8px 14px;
position: absolute;
z-index: 9999; /* Максимальный z-index */
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 8px;
white-space: nowrap;
font-size: 12px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: opacity 0.2s, visibility 0.2s;
pointer-events: none;
border: 1px solid #caa954;
}/* Стрелочка для тултипа */
.item-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #4a3436 transparent transparent transparent;
}.item-slot:hover .item-tooltip {
visibility: visible;
opacity: 1;
}/* ========== ТЕКСТОВЫЙ БЛОК ========== */
.scroll-text-block {
background-color: #e3d8cf;
border-radius: 0px;
padding: 8px 12px;
margin-top: 8px;
max-height: 95px;
overflow-y: auto;
font-size: 12px;
line-height: 1.45;
color: #2c2420;
border: 1px solid #4a3436;
font-weight: 500;
padding-right: 16px;
scrollbar-width: thin;
scrollbar-color: #caa954 #e3d8cf;
}.scroll-text-block::-webkit-scrollbar {
width: 5px;
}.scroll-text-block::-webkit-scrollbar-track {
background: #e3d8cf;
border-radius: 0px;
}.scroll-text-block::-webkit-scrollbar-thumb {
background: #caa954;
border-radius: 3px;
}.scroll-text-block::-webkit-scrollbar-thumb:hover {
background: #a87f2c;
}/* Блок дракона */
.dragon-right {
flex: 2;
background-color: #e3d8cf;
border-radius: 0px;
padding: 12px 16px;
padding-right: 20px;
border: 1px solid #4a3436;
max-height: 130px;
overflow-y: auto;
font-size: 13px;
line-height: 1.5;
color: #2c2420;
scrollbar-width: thin;
scrollbar-color: #caa954 #e3d8cf;
}.dragon-right::-webkit-scrollbar {
width: 5px;
}
.dragon-right::-webkit-scrollbar-track {
background: #e3d8cf;
}
.dragon-right::-webkit-scrollbar-thumb {
background: #caa954;
border-radius: 3px;
}.dragon-right strong {
color: #882c1a;
}/* Стили дракона */
.dragon-container {
background-color: #f5f0eb;
border: 2px solid #4a3436;
border-radius: 20px;
margin: 0 24px 20px 24px;
padding: 18px 20px;
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: center;
transition: box-shadow 0.2s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
position: relative;
overflow: visible;
}
.dragon-container:hover {
border-color: #caa954;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}.dragon-left {
display: flex;
align-items: center;
gap: 18px;
flex: 1.2;
min-width: 200px;
}.dragon-avatar {
width: 100px;
height: 100px;
background-color: #2a241f;
border-radius: 50%;
border: 2px solid #caa954;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}.dragon-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}.dragon-hp-area {
flex: 1;
min-width: 140px;
}.dragon-hp-label {
font-weight: bold;
margin-bottom: 6px;
display: flex;
justify-content: space-between;
color: #4a3436;
background: #e3d8cf;
padding: 4px 12px;
border-radius: 30px;
font-size: 13px;
}.dragon-hp-bar-bg {
background-color: #ac9f94;
border-radius: 20px;
height: 28px;
width: 100%;
overflow: hidden;
border: 1px solid #4a3436;
}.dragon-hp-fill {
background-color: #b82b1c;
width: 100%;
height: 100%;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 12px;
color: white;
font-weight: bold;
font-size: 14px;
text-shadow: 0 0 3px black;
}@media (max-width: 750px) {
.players-grid {
gap: 16px;
padding: 20px 16px;
}
.dragon-container {
flex-direction: column;
align-items: stretch;
margin: 0 16px 20px 16px;
}
.dragon-left {
justify-content: space-between;
}
}@media (max-width: 680px) {
.players-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
</style>
</head>
<body>
<div class="table-wrapper">
<div class="container-global">
<div class="players-grid">
<!-- ДЖЕЙМС -->
<div class="character-card" data-max-hp="20" data-current-hp="20">
<div class="character-title">Джеймс Поттер</div>
<div class="image-container">
<img src="https://upforme.ru/uploads/0008/e1/93/3/20528.png" alt="Джеймс" class="character-image">
</div>
<div class="hp-bar-container">
<div class="hp-bar-label">
<span>❤ ЗДОРОВЬЕ</span>
<span class="hp-values-display">20 / 20</span>
</div>
<div class="hp-bar-bg">
<div class="hp-bar-fill" style="width: 100%;">
<span class="hp-current-text">20</span>
</div>
</div>
</div>
<div class="items-grid">
<div class="item-slot"><img src="https://upforme.ru/uploads/0008/e1/93/3/236810.png" class="item-image" alt="предмет"><span class="item-tooltip">Метла</span></div>
<div class="item-slot"><img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет"><span class="item-tooltip">Рубиновый отвар (+5 хп)</span></div>
<div class="item-slot"><img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет"><span class="item-tooltip">Рубиновый отвар (+5 хп)</span></div>
</div>
<div class="scroll-text-block">
Бонус на атаку и защиту: +2<br>
Бонус к исцеляющей магии: нет
</div>
</div>
<!-- СИРИУС -->
<div class="character-card" data-max-hp="20" data-current-hp="20">
<div class="character-title">Сириус Блэк</div>
<div class="image-container">
<img src="https://upforme.ru/uploads/0008/e1/93/3/645381.png" alt="Сириус" class="character-image">
</div>
<div class="hp-bar-container">
<div class="hp-bar-label">
<span>❤ ЗДОРОВЬЕ</span>
<span class="hp-values-display">20 / 20</span>
</div>
<div class="hp-bar-bg">
<div class="hp-bar-fill" style="width: 100%;">
<span class="hp-current-text">20</span>
</div>
</div>
</div>
<div class="items-grid">
<div class="item-slot"><img src="https://upforme.ru/uploads/0008/e1/93/3/236810.png" class="item-image" alt="предмет"><span class="item-tooltip">Метла</span></div>
<div class="item-slot"><img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет"><span class="item-tooltip">Рубиновый отвар (+5 хп)</span></div>
<div class="item-slot"><img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет"><span class="item-tooltip">Рубиновый отвар (+5 хп)</span></div>
</div>
<div class="scroll-text-block">
Бонус на атаку и защиту: +2<br>
Бонус к исцеляющей магии: нет
</div>
</div>
<!-- ЛЕОНА -->
<div class="character-card" data-max-hp="20" data-current-hp="20">
<div class="character-title">Леона Кегг</div>
<div class="image-container">
<img src="https://upforme.ru/uploads/0008/e1/93/3/394558.png" alt="Леона" class="character-image">
</div>
<div class="hp-bar-container">
<div class="hp-bar-label">
<span>❤ ЗДОРОВЬЕ</span>
<span class="hp-values-display">20 / 20</span>
</div>
<div class="hp-bar-bg">
<div class="hp-bar-fill" style="width: 100%;">
<span class="hp-current-text">20</span>
</div>
</div>
</div>
<div class="items-grid">
<div class="item-slot"><img src="https://upforme.ru/uploads/0008/e1/93/3/633872.png" class="item-image" alt="предмет"><span class="item-tooltip">Граниан Альвита</span></div>
<div class="item-slot"><img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет"><span class="item-tooltip">Рубиновый отвар (+5 хп)</span></div>
<div class="item-slot"><img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет"><span class="item-tooltip">Рубиновый отвар (+5 хп)</span></div>
</div>
<div class="scroll-text-block">
Бонус на атаку и защиту: нет<br>
Бонус к исцеляющей магии: +1
</div>
</div>
</div>
<!-- ДРАКОН -->
<div class="dragon-container" data-dragon-max="100" data-dragon-current="100">
<div class="dragon-left">
<div class="dragon-avatar">
<img src="https://upforme.ru/uploads/0008/e1/93/3/522850.png" alt="Дракон">
</div>
<div class="dragon-hp-area">
<div class="dragon-hp-label">
<span>Хардброт</span>
<span class="dragon-hp-values">100 / 100</span>
</div>
<div class="dragon-hp-bar-bg">
<div class="dragon-hp-fill" style="width: 100%;">
<span class="dragon-hp-current">100</span>
</div>
</div>
</div>
</div>
<div class="dragon-right">
<strong>Информация об атаках:</strong><br>
• ? <br>
• ? <br>
<strong>Особенности:</strong> <br>
• чешуя дракона не пропускает урон, значение которого меньше 4.
</div>
</div>
</div>
</div><script>
function syncPlayersHp() {
const cards = document.querySelectorAll('.character-card');
cards.forEach(card => {
const maxHp = parseInt(card.getAttribute('data-max-hp')) || 20;
let currHp = parseInt(card.getAttribute('data-current-hp'));
if (isNaN(currHp)) currHp = maxHp;
const percent = (currHp / maxHp) * 100;
const fillDiv = card.querySelector('.hp-bar-fill');
const valuesSpan = card.querySelector('.hp-values-display');
const currentSpan = card.querySelector('.hp-current-text');
if (fillDiv) {
fillDiv.style.width = percent + '%';
if (currentSpan) currentSpan.textContent = currHp;
}
if (valuesSpan) valuesSpan.textContent = currHp + ' / ' + maxHp;
});
}function syncDragonHp() {
const dragon = document.querySelector('.dragon-container');
if (!dragon) return;
const maxHp = parseInt(dragon.getAttribute('data-dragon-max')) || 100;
let currHp = parseInt(dragon.getAttribute('data-dragon-current'));
if (isNaN(currHp)) currHp = maxHp;
const percent = (currHp / maxHp) * 100;
const fillDiv = dragon.querySelector('.dragon-hp-fill');
const valuesSpan = dragon.querySelector('.dragon-hp-values');
const currentSpan = dragon.querySelector('.dragon-hp-current');
if (fillDiv) {
fillDiv.style.width = percent + '%';
if (currentSpan) currentSpan.textContent = currHp;
}
if (valuesSpan) valuesSpan.textContent = currHp + ' / ' + maxHp;
}window.addEventListener('DOMContentLoaded', () => {
syncPlayersHp();
syncDragonHp();
});
</script>
</body>
</html>[/html]
