Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="index.css">
    </head>
    <body class="body">
        </div>
        <div id="press_esc"></div>
        <div id="left_row" class="left_row">
            <div class="right-line"><div class="gun_Ct_kiss_super"></div></div>
            <div class="activebar"><div class="bar-line-right"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div>
            <div class="right-line"></div>
            <div class="activebar"><div class="bar-line-right"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div>
            <div class="right-line"></div>
            <div class="activebar"><div class="bar-line-right"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div>
            <div class="phone_and_sim_line-right"><div class="elips"></div><div class="elips"></div></div>
        </div>
        <div id="right_row" class="right_row">
            <div class="left-line"><div class="cap"></div><div class="activebar"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div><div class="cap_txt">Головной убор</div></div>   
            <div class="left-line"><div class="outerwear"></div><div class="activebar"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div><div class="cap_txt">Головной убор</div></div>
            <div class="left-line"><div class="trousers"></div><div class="activebar"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div><div class="cap_txt">Головной убор</div></div>   
            <div class="left-line"><div class="footwear"></div><div class="activebar"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div><div class="cap_txt">Головной убор</div></div>   
            <div class="left-line"><div class="accessories"></div><div class="activebar"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div><div class="cap_txt">Головной убор</div></div>
        <div class="fieled" id="fieled"></div> 
        <div id="capacityTOP"></div>
        <div id="capacityBOTTOM"></div>
        <div id="shadow"></div>
        <div id="test"></div>
        <div id="description_body"></div>
        <div id="description_drag"></div>
        <script src="script.js" async defer></script>
    
    </body>
</html>


              
            
!

CSS

              
                .fieled {
	width: 72vw;
	position: absolute;
	background-color: rgb(255, 255, 255);
	opacity: 1;
}

.column {
	height: 4vw;
	width: 4vw;
	float: left;
	border: 1px solid #666666;
	background-color: rgb(72, 72, 72);
	opacity: 0.4;
	-webkit-box-shadow: inset 0 0 1px #000;
	-ms-box-shadow: inset 0 0 1px #000;
	box-shadow: inset 0 0 1px #000;
	text-align: center;
}
.column header {
	color: #fff;
	text-shadow: #000 0 1px;
	box-shadow: 5px;
	padding: 5px;
	background: -moz-linear-gradient(left center, rgb(0, 0, 0), rgb(79, 79, 79), rgb(21, 21, 21));
	background: -webkit-gradient(
		linear,
		left top,
		right top,
		color-stop(0, rgb(0, 0, 0)),
		color-stop(0.50, rgb(79, 79, 79)),
		color-stop(1, rgb(21, 21, 21))
	);
	background: -webkit-linear-gradient(left center, rgb(0, 0, 0), rgb(79, 79, 79), rgb(21, 21, 21));
	background: -ms-linear-gradient(left center, rgb(0, 0, 0), rgb(79, 79, 79), rgb(21, 21, 21));
	border-bottom: 1px solid #ddd;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-ms-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-ms-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
}
.black {
	background-color: black;
}
.active {
	background-color: orange;
	background-size: contain;
}
.active {
	background-color: green;
}
.column.over {
	border: 2px dashed #000;
}
.test {
	width: 100px;
	height: 100px;
	color: red;
	background-color: red;
}
.cursor {
	width: 2vw;
	height: 2vh;
	display: none;
}
.shawod {
	position: absolute;
}
.log {
	position: relative;
	margin-top: 20px;
}

body {
	overflow-y: hidden;
	overflow-x: hidden;
	width: 100vw;
	height: 100vh;
	margin: 0px;
	/* background-color: rgba(0, 0, 255, 0.157); */
}

#description_body {
}

img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

.block {
	background: green;
	border-radius: 10px;
	padding: 20px;
	position: relative;
	color: #fff;
}
.block::after {
	content: '';
	position: absolute; /* Абсолютное позиционирование */
	left: 20px;
	bottom: -20px; /* Положение треугольника */
	border: 10px solid transparent; /* Прозрачные границы */
	border-top: 10px solid green; /* Добавляем треугольник */
}
.item {
	color: red;
	width: 100px;
	height: 100px;
}
counter {
	/* margin-left: 12%; */
	/* position: absolute; */
}

.weapon_Kriss_Super_V_Custom {
	height: 80%;
	padding: 2px;
	position: absolute;
	width: 91%;
}
.meat {
	width: 45%;
	height: 84%;
	padding: 2px;
	margin-left: 24%;
}
inv {
	justify-items: left;
	display: flex;
}
.left-line {
	/* background-image: url(./img/line-left.png); */
	width: 200px;
	background-size: cover;
	height: 14px;
	margin-top: 12vh;
}
.right-line {
	/* background-image: url(./img/line-right.png); */
	width: auto;
	background-size: cover;
	height: 76px;
	margin-top: 10vh;
	display: flex;
	justify-items: center;
	justify-content: center;
}
.phone_and_sim_line-right {
	/* background-image: url(./img/sim_line-right.png); */
	height: 80px;
	margin-top: 10vh;
	width: auto;
	background-size: cover;
	display: flex;
	justify-items: center;
	justify-content: center;
}
.bar {
	/* background-image: url(./img/bar-helper-item.png); */
	width: 14%;
	height: 59%;
	margin-bottom: auto;
	margin-left: 6px;
	background-size: cover;
	margin-top: auto;
	margin-bottom: auto;
}
.bar-line-right {
	/* background-image: url(./img/right_bar_line.png); */
	background-size: cover;
	width: 11px;
	height: 19px;
	margin-top: auto;
	margin-bottom: auto;
	display: flex;
	justify-items: center;
	justify-content: center;
}
.elips {
	/* background-image: url(./img/elips.png); */
	width: 55px;
	height: 56px;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 17px;
}
.cap {
	/* background-image: url(./img/cap.png); */
	width: 27px;
	height: 20px;
	background-size: cover;
	position: relative;
	left: 72px;
	top: -11px;
}
.head {
}
.cap_txt {
	position: relative;
	left: 108px;
	top: -37px;
}
.activebar {
	width: 257px;
	height: 60px;
	position: absolute;
	display: flex;
	justify-items: center;
	justify-content: center;
	right: 10px;
}
.accessories {
	/* background-image: url(./img/accessories.png); */
	width: 38px;
	height: 15px;
	background-size: cover;
	position: relative;
	left: 70px;
	top: -19px;
}
.footwear {
	/* background-image: url(./img/footwear.png); */
	width: 38px;
	height: 17px;
	background-size: cover;
	position: relative;
	left: 70px;
	top: -19px;
}
.trousers {
	/* background-image: url(./img/trousers.png); */
	width: 21px;
	height: 30px;
	background-size: cover;
	position: relative;
	left: 75px;
	top: -19px;
}
.outerwear {
	/* background-image: url(./img/outerwear.png); */
	width: 30px;
	height: 30px;
	background-size: cover;
	position: relative;
	left: 70px;
	top: -19px;
}
.gun_Ct_kiss_super{
	/* weapon_Kriss_Super_V_Custom */
	/* background-image: url(./img/weapon_Kriss_Super_V_Custom.png); */
    width: 90px;
    height: 49px;
	background-size: cover;
	margin-top: auto;
    margin-bottom: auto;
}
#shadow{
	z-index: 2;
}
#inv{
  background-color:red;
}
              
            
!

JS

              
                let initialDataQualytyContainer = 1;
let items_setting = {};
let backgroundColorActiveShadows = 'rgba(0, 255, 81, 0.21)';
let backgroundColorDontActiveShadows = 'rgba(255, 0, 0, 0.21)';

let devMode = false;
let arr;
let VisibelMode = true;
// @initialDataQualytyContainer - принимает два состояние 1 это если контайнер должен быть один 2 если их два
let inventory = { x: 6, y: 17 };
let regExpY = new RegExp(/\Y[0-9]?[0-9]/g);
let regExpX = new RegExp(/X+[0-9]?[0-9]/g);
let regExpRotate = new RegExp(/[0-9]?[0-9]?[0-9]/g);
let RegExpNum = new RegExp(/[^\d]/g, '');
let ItemStructures = [];
//структура документа
let speakers_counter = 20;
let windowAll = window.innerWidth % 100;
let attributeSizeShadowHelperWidth;
let attributeSizeShadowHelperHeight;
let newElementShadowToInventory;
let lastCLickItem;
let globalClickOfsetY;
let globalClickOfsetX;
let lastCLickId;
let ShadowElement;
let activeClickElementWithoutMutations;
let ActiveElementWidth;
let ActiveElementHeight;
let globalOffsetXYangleLeft;
let lastActiveShadowX;
let lastActiveShadowY;
let ArrayBuzyCoords = [];
let lastActiveArrayId = [];
let ElementSuitabel = false;
// массив последних активных клеток
let winodwTs = window.innerWidth - windowAll;

let shadowDoc = document.getElementById('shadow');
let rotateActivetedShadowInit = false;
let lastShadowId;
// последний айдишник от которого строилась тень
let fieledHTMLdoc;
let Shadow;
let shadowTransform = 'vertical';

let OFSET_TOP;
let OFSET_LEFT;
// отношение разрешения дисплея текущего устройства в физических пикселях к разрешению в логических (CSS) пикселях.
// крч ширина одного пикселя
let onePixel = window.devicePixelRatio;

let ColonWidth = onePixel * (window.innerWidth / 4.2);
// колонка должна занимать где то 15% пространства, и вот по этому такие костыли 4.2 коофицент подбирался методом рандома

let maxWidth = Math.abs(ColonWidth) > 232.143 ? 232.143 : Math.abs(ColonWidth);
let leftCollonOfsetLeft = window.innerWidth - maxWidth;
let widthAllfieled = window.innerWidth - maxWidth - maxWidth + 'px';

let widthAndHeightOneInventorySquare = (window.innerWidth - maxWidth - maxWidth) / 18.2;

let ClickFuckingOfset = null;

let coordinateActiveArray = [];
// массив с IDшниками на которые нельзя ложить айтем

//
let coordinateActive = [];

let ShadowStatus = false;

let ArrayClear;

let submissions_with_X_Y_ByItems = [];

let removed;

let timerId;
let lastDocsWithoutVisibelDescription;

let dragMenu;
let leftBoottomHTML;
let lastDocsWithoutVisibelDescriptionInvItem;
let oneSqaure;

let activeItemResetStyle;
var FinalMatMatrixItem = [];
let inventory_user = [
	{
		uuid: '112C8DD8-346B-426E-B06C-75BBA97D#D63',
		item: 'COCACOLA',
		transform: 0,
		areaWidth_Height: { width: 3, height: 2 },
		area: { right_corner_top: { x: 7, y: 0 }, left_corner: { x: 9, y: 1 } },
		HTML: '<img class="weapon_Kriss_Super_V_Custom" src="./img/weapon_Kriss_Super_V_Custom.png" alt="">',
		description: '<p>МЯСО утоляет голод<p/>',
		action: '<div><button>ТЕСТ</button><button>ТЕСТ</button></div>',
		quality: 6,
		weapon: true,
		fn: 'setWeapon()'
	},
	{
		uuid: 'weq',
		item: 'RED',
		transform: 0,
		areaWidth_Height: { width: 1, height: 1 },
		area: { right_corner_top: { x: 1, y: 1 }, left_corner: { x: 1, y: 1 } },
		description: '<p>МЯСО утоляет голод<p/>',
		action: '<div><button>ТЕСТ</button><button>ТЕСТ</button></div>',
		quality: 0,
		HTML: '<img src="./img/marijuana.png" alt="">'
	},
	{
		uuid: '123231321',
		item: 'meat',
		transform: 0,
		areaWidth_Height: { width: 2, height: 1 },
		area: {
			right_corner_top: { x: 5, y: 1 },
			left_corner: { x: 6, y: 1 }
		},
		description: '<p>МЯСО утоляет голод<p/>',
		action: '<div><button>ТЕСТ</button><button>ТЕСТ</button></div>',
		quality: 1,
		HTML: '<img class="meat" src="./img/Meat.png" alt=""><counter>19</counter>'
	}
];
let clickItemState = null;
let rotateActiveted = false;
/**
 * @function пытается вычислить оптимальную ширину, контайнера под инвентарь
 */
function init() {
	fieledHTMLdoc = document.getElementById('fieled');

	fieledHTMLdoc.style.left = maxWidth + 'px';
	fieledHTMLdoc.style.width = widthAllfieled;
}
init();
/**
 * @function инициализирует парвый угол
 */
function right_rowInit() {
	let right_row = document.getElementById('right_row');
	let style = {
		width: maxWidth + 'px',
		height: '100vh',
		position: 'absolute'
	};
	SetStyles(right_row, style);
}
let HTMLdescription_body = document.getElementById('description_body');
right_rowInit();
/**
 * @function инициализирует левый угол
 */
function left_rowInit() {
	let left_row = document.getElementById('left_row');
	let style = {
		width: maxWidth + 'px',
		height: '100vh',
		position: 'absolute',
		left: Math.abs(leftCollonOfsetLeft) + 'px'
	};
	SetStyles(left_row, style);
}
left_rowInit();
/**
 * 
 * @function рисует инвентаря, исходя из X и Y заданных в глобале
 */
async function draw() {
	let out = '';
	let m = 0;
	let Oneitem = null;
	for (let i = 0; i < inventory.x; i++) {
		m++;
		for (let item of inventory_user) {
			if (m === item.area.x) {
				item = Oneitem;
			}
		}
		for (let k = 0; inventory.y > k; k++) {
			if (Oneitem != null) {
			}
			ItemStructures.push({ item: `X${k}____Y${i}` });

			out += `<div style="width:${widthAndHeightOneInventorySquare +
				'px'};  height:${widthAndHeightOneInventorySquare +
				'px'}" class="column" id="X${k}____Y${i}" x="${k}" y="${i}" ></div>`;
		}
	}
	document.querySelector('#fieled').innerHTML = out;
	document.querySelectorAll('.column').forEach(function(element) {
		element.onmousemove = dragColumnShadow;
	});
}
document.getElementById('shadow').addEventListener('mousemove', dragColumnShadow);

function resultX() {}
function resultY() {}
/**
* @function рисует айтемы, исходя из их свойств  в которых существует правый угол и левый угол.
* она берет, и ищет все DIV с айдишниками этих углов. Как только находит. Производит математические манипуляции
* и преобразует на основе их. Айтем инвентаря.
*/
function drawIneventoryItem() {
	for (let el of inventory_user) {
		let right_corner_top = document.getElementById(
			`X${el.area.right_corner_top.x}____Y${el.area.right_corner_top.y}`
		);

		let left_corner = document.getElementById(`X${el.area.left_corner.x}____Y${el.area.left_corner.y}`);
		let RightCornerTopX = right_corner_top.id.match(regExpX);
		let RightCornerTopY = right_corner_top.id.match(regExpY);
		let LeftCornerBottomX = left_corner.id.match(regExpX);
		let LeftCornerBottomY = left_corner.id.match(regExpY);
		let BottomX = parseInt(LeftCornerBottomX[0].replace(/[^\d]/g, ''));
		let BottomY = parseInt(LeftCornerBottomY[0].replace(/[^\d]/g, ''));
		let TopX = parseInt(RightCornerTopX[0].replace(/[^\d]/g, ''));
		let TopY = parseInt(RightCornerTopY[0].replace(/[^\d]/g, ''));
		let incr = BottomX + 1;
		let incrY = TopY;
		let position = areaFromCorner(TopX, TopY, BottomX, BottomY);

		coordinateActiveArray.push({
			item: {
				uuid: el.uuid,
				right: `X${el.area.right_corner_top.x}____Y${el.area.right_corner_top.y}`,
				left: `X${el.area.left_corner.x}____Y${el.area.left_corner.y}`,
				x: el.areaWidth_Height.height,
				y: el.areaWidth_Height.width
			}
		});
		let CoordinateRight = getCoords(right_corner_top);
		let CoordinateLeft = getCoords(left_corner);
		let itemCreated = document.createElement('inv');
		itemCreated.setAttribute(
			'style',
			` width:100%;height:100%; background-color: red; position: absolute; border:1px solid rgb(204, 204, 204);
			`
		);
		itemCreated.setAttribute('position', position);
		itemCreated.setAttribute('height', `${el.areaWidth_Height.height}`);
		itemCreated.setAttribute('width', `${el.areaWidth_Height.width}`);
		itemCreated.id = el.uuid;
		itemCreated.src = el.img;
		itemCreated.innerHTML = el.HTML;

		let style = {
			height: CoordinateLeft.bottom - CoordinateRight.top + 'px',
			width: CoordinateLeft.right - CoordinateRight.left + 'px',
			left: CoordinateRight.left + 'px',
			top: CoordinateRight.top + 2 + 'px',
			transform: `rotate(${el.transform}deg)`
		};
		SetStyles(itemCreated, style);
		itemCreated.addEventListener('mousemove', dragColumnShadow);

		document.body.appendChild(itemCreated);
	}
}

/**
 * @function нормализует fieled делай так что бы он был ровно по середине
 */
function initNormalizedCentered() {
	let documentLastItemHtml = document.getElementById(`${ItemStructures[ItemStructures.length - 1].item}`);

	let coordinatNormalized = getCoords(documentLastItemHtml);
	let resultOfsetCollumnInventoryFromLeftRow =
		Math.abs(coordinatNormalized.right) + maxWidth - Math.abs(window.innerWidth);
	let marginResultOfset = Math.abs(resultOfsetCollumnInventoryFromLeftRow) / 2;
	let LeftfieledHTMLdoc = fieledHTMLdoc.style.left;
	let aaa = Math.abs(LeftfieledHTMLdoc.slice(0, -2)) + marginResultOfset + 'px';

	fieledHTMLdoc.style.left = aaa;

	let coordsfieled = getCoords(fieledHTMLdoc);
	let cente = coordsfieled.height - window.innerHeight;
	let topOfset = Math.abs(cente) / 2;
	fieledHTMLdoc.style.top = topOfset + 'px';
}
draw();
initNormalizedCentered();

function visibelClick() {
	ElementClick = this;
}
/**
 * @param  {HTMLelement} elem 
 * @return Координаты HTML элемента
 */
function getCoords(elem) {
	if (elem !== null || undefined) {
		let box = elem.getBoundingClientRect();
		return {
			top: box.top,
			left: box.left,
			bottom: box.bottom,
			height: box.height,
			right: box.right,
			width: box.width,
			x: box.x,
			y: box.y
		};
	}
}
/**
 * @param  {Array HTML айдищников} item
 * @function  ищет координаты по документу, каждого id
 */
function getStructurCoordinarData(item) {
	let coordinatesStructur = [];
	item.forEach((elem) => {
		let el = document.getElementById(`${elem.item}`);
		coordinatesStructur.push({ el_coords: getCoords(el), item: elem.item });
	});
	return coordinatesStructur;
}
draw();

let structuresHTMLAndCoordinats = getStructurCoordinarData(ItemStructures);

/**
 * @param  {елемент интерпретируемого массив} element
 * @param  {его индекс} index
 * @param  {сам массив} array
 * @function озвращает данные о левом угле, подставляемой фикстуры инвентаря
 */
function isShadow(element, index, array) {
	if (element.item === globalOffsetXYangleLeft) {
		return element;
	}
}

drawIneventoryItem();
document.querySelector('body').addEventListener(
	'mousemove',
	throttle(function(e) {
		if (lastCLickItem === undefined && dragMenu === undefined) {
			if (e.target.tagName === 'INV') {
				timerId = setTimeout(function() {
					drawDescription(e);
				}, 1000);
			}
		}

		if (lastCLickItem) {
			let coord = getCoords(lastCLickItem);
			lastCLickItem.style.top = e.y - OFSET_LEFT + 'px';
			lastCLickItem.style.left = e.x - OFSET_TOP + 'px';
		}
	}, 0)
);
document.querySelector('body').addEventListener('mousemove', function(e) {
	if (timerId != undefined) {
		DisabelAllvision();
		cleatInvFocusStyle();
	}
});

function ValidateColumnAndRetunPos(HTMLarray) {
	let findElement;
	HTMLarray.forEach((elem) => {
		if (elem.classList[0] === 'column') {
			return (findElement = elem);
		}
	});

	if (findElement === undefined) {
		return undefined;
	} else {
		let x = findElement.getAttribute('x');
		let y = findElement.getAttribute('y');
		let SeachObj = {
			x: parseInt(x),
			y: parseInt(y)
		};
		return SeachObj;
	}
}
/**@function применяется в случае, когда мы хотим подсчитать все занятые клетки
 * @param  {Верхний угол X Координата} TopX
 * @param  {Верхний угол Y Координата} TopY
 * @param  {Нижний угол X Координата} BottomX
 * @param  {Нижний угол Y Координата} BottomY
 * @return {Массив клеток} position
 */
function areaFromCorner(TopX, TopY, BottomX, BottomY) {
	let incr = BottomX + 1;
	let incrY = TopY;
	let position = [];
	for (incrY = TopY - 1; BottomY > incrY; incrY++) {
		for (incr = BottomX + 1; TopX < incr; incr--) {
			position.push(`X${incr - 1}Y${incrY + 1}`);
		}
	}
	return position;
}
/**@function нормализиет коордианты между двумя HTML документами. А зачем? спросите у создатлей Chrome помойки
 * @param  {HTML} FromHTML
 * @param  {HTML} FromToHTML
 */
function coordsNormaliz(FromHTML, FromToHTML) {
	let coordsFrom = getCoords(FromHTML);
	let cooordsFromTo = getCoords(FromToHTML);
	console.log(coordsFrom,FromHTML)
	console.log(cooordsFromTo,FromToHTML)
	// let style = {
		// top:cooordsFromTo.top + "px",
		// bottom:coordsFromTo.bottom + 'px',
		// left:coordsFromTo.left + 'px',
		// right:coordsFromTo.right + 'px'
	// }
	// SetStyles(FromHTML,style)

	// По скольку я диву позиционирую в абсолют,то его стороны должны принять значения
	// cooordsFromTo который
	console.log("TOP",FromHTML.style.top,"BOTTOM",FromHTML.style.bottom,"RIGHT",FromHTML.style.right,"LEFT",FromHTML.style.left)
	
}
document.body.addEventListener('mouseup', function(e) {
	if (rotateActiveted) {
		// если не подходит
		if (shadowDoc != undefined) {
			if (shadowDoc.style.backgroundColor === backgroundColorDontActiveShadows || backgroundColorActiveShadows) {
				let getCoordsSh = getCoords(shadowDoc);

				lastCLickItem.style.width = shadowDoc.style.height;
				lastCLickItem.style.height = shadowDoc.style.width;
				lastCLickItem.style.top = getCoordsSh.top + 'px';
				lastCLickItem.style.left = getCoordsSh.left + 'px';
				coordsNormaliz(lastCLickItem, shadowDoc);
				lastCLickItem = undefined;
				lastCLickId = undefined
			} else {
				// елси подходит
			}
		}
	} else {
		if (shadowDoc.style.backgroundColor === backgroundColorDontActiveShadows || backgroundColorActiveShadows) {
			if (shadowDoc != undefined) {
				if (backgroundColorActiveShadows === shadowDoc.style.backgroundColor) {
					let activeShadow = getCoords(shadowDoc);

					if (activeShadow.width > 10) {
						let ActiveId = lastCLickId;
						let style = {
							width: activeShadow.width + 'px',
							height: activeShadow.height + 'px',
							top: activeShadow.top + 'px',
							left: activeShadow.left + 'px',
							bottom: activeShadow.bottom + 'px'
						};
						let ArrayHTMLelementCornerTop = document.elementsFromPoint(activeShadow.left, activeShadow.top);

						let ArrayHTMLelementCornerBottom = document.elementsFromPoint(
							activeShadow.right - 10,
							activeShadow.bottom - 1
						);
						let CornerTop = ValidateColumnAndRetunPos(ArrayHTMLelementCornerTop);
						let CornerBottom = ValidateColumnAndRetunPos(ArrayHTMLelementCornerBottom);
						let newXYcoordsElement = areaFromCorner(
							CornerTop.x,
							CornerTop.y,
							CornerBottom.x,
							CornerBottom.y
						);
						submissions_with_X_Y_ByItems.forEach((element, i) => {
							if (element.uuid === lastCLickId) {
								submissions_with_X_Y_ByItems[i].submissions = newXYcoordsElement;
								coordinateActive.push(...newXYcoordsElement);
							}
						});
						SetStyles(lastCLickItem, style);
						lastCLickItem = undefined;
						resultX = NaN;
						let styleShDoc = {
							width: '0px',
							height: '0px'
						};

						SetStyles(shadowDoc, styleShDoc);
						lastCLickId = undefined;
					}
				}

				if (backgroundColorDontActiveShadows === shadowDoc.style.backgroundColor) {
					lastCLickItem.style.cssText = activeItemResetStyle;
					lastCLickId = undefined;
					lastCLickItem = undefined;
					Shadow.style.display = 'none';
				}
			}
		}
	}
});

document.body.onmousedown = function(e) {
	let ArrayHTMLelement = document.elementsFromPoint(e.x, e.y);

	for (let elem of ArrayHTMLelement) {
		if (elem.nodeName === 'INV') {
			if (elem != lastCLickItem) {
				btnCode = e.button;
				let htmlElementTargetId = elem;

				switch (btnCode) {
					case 0:
						if (activeItemResetStyle === undefined) {
							activeItemResetStyle = elem.style.cssText;
						}
						DisabelAllvision();
						VisibelMode = false;

						let coords = getCoords(elem);
						OFSET_LEFT = coords.height / 2;
						OFSET_TOP = coords.width / 2;

						attributeSizeShadowHelperWidth = htmlElementTargetId.getAttribute('width');
						attributeSizeShadowHelperHeight = htmlElementTargetId.getAttribute('height');
						lastCLickId = htmlElementTargetId.id;
						htmlElementTargetId.style.zIndex = 10;
						lastCLickItem = document.getElementById(`${htmlElementTargetId.id}`);
						ActiveElementClickCoords = getCoords(lastCLickItem);
						ActiveElementWidth = ActiveElementClickCoords.height;
						ActiveElementHeight = ActiveElementClickCoords.width;
						let ArrayClear = [];
						submissions_with_X_Y_ByItems.forEach((element, i) => {
							if (element.uuid === htmlElementTargetId.id) {
								removed = submissions_with_X_Y_ByItems[i].submissions.splice(0);
							}
						});
						removed.forEach((element, i) => {
							for (let index = 0; coordinateActive.length > index; index++) {
								if (coordinateActive[index] === element) {
									coordinateActive.splice(index, 1);
								}
							}
						});

						break;
				}
			}
		}
	}
};
/**
 * @function тротлинг самый обычный
 * @param  {принимает функцию} fn
 * @param  {и задержку между вызовами этой функции} delay
 */
function throttle(fn, delay) {
	var timeout = null;
	return function throttledFn() {
		window.clearTimeout(timeout);
		var ctx = this;
		var args = Array.prototype.slice.call(arguments);
		timeout = window.setTimeout(function callThrottledFn() {
			fn.apply(ctx, args);
		}, delay);
	};
}

document.addEventListener('wheel', (e) => wheelActiveDocs(e));

/**
 * @param  {стандартный DON event} e
 * @function оно должно вращать элемент
 */
function wheelActiveDocs(e) {
	if (lastCLickItem === undefined) {
		return;
	} else {
		let kindofNumber = Math.sign(e.deltaY);
		if (kindofNumber === 1) {
			let rotate = lastCLickItem.style.transform;
			let rotateResult = rotate.match(regExpRotate);
			setRotateItem(...rotateResult, e);
		}
		if ((kindofNumber = -1)) {
			let rotate = lastCLickItem.style.transform;
			let rotateResult = rotate.match(regExpRotate);
			setRotateItem(...rotateResult, e);
		}
	}
}

/**
 * @param  {html} elem
 * @param  {ValidDomStyleObject} style
 * @function изменят стилизацию входящего элемента
 */
function SetStyles(elem, style) {
	Object.assign(elem.style, style);
}

/**
 * @function у нас как бы активный айдишники записываются так right:X_Y,left:X_Y 
 * и эта функция, отвечает за то что бы преобразовать этот массив так что бы  заполнить пробелы 
 * которые возникают 
 * @param { массив айдишников } arrayID 
 */
function CoordinateNormalize(arrayID) {
	arrayID.forEach((element) => {
		let x_right = element.item.right.match(regExpX);
		let y_right = element.item.right.match(regExpY);
		let x_left = element.item.left.match(regExpX);
		let y_left = element.item.left.match(regExpY);

		let X_rightAlgol = parseInt(x_right[0].slice(1, 2));
		let Y_rightAlgol = parseInt(y_right[0].slice(1, 2));
		let X_leftAlgol = parseInt(x_left[0].slice(1, 2));
		let Y_leftAlgol = parseInt(y_left[0].slice(1, 2));
		let items = [];

		let submissions = [];
		for (Y_rightAlgol; Y_leftAlgol >= Y_rightAlgol; Y_rightAlgol++) {
			items.push(Y_rightAlgol);
		}

		let FinalMatMatrixItem = [];
		let helperleftAlgol = X_leftAlgol;
		let helperMathMaxAlgolWidth = helperleftAlgol - element.item.x;

		let elem = 0;
		while (elem < items.length) {
			for (let i = helperMathMaxAlgolWidth; helperleftAlgol > i; i++) {
				submissions.push(`X${i + 1}Y${items[elem]}`);
				coordinateActive.push(`X${i + 1}Y${items[elem]}`);
			}
			elem++;
		}

		submissions_with_X_Y_ByItems.push({ uuid: element.item.uuid, submissions });
	});
}

CoordinateNormalize(coordinateActiveArray);

function debugLog(DebugText) {
	let log = document.getElementById('log');
	let newLog = document.createElement('div');
	newLog.style.position = 'relative';
	newLog.innerHTML = `<strong>${DebugText}</strong> `;
	document.body.append(newLog);
}

document.addEventListener(
	'contextmenu',
	function(e) {
		if (VisibelMode) {
			e.preventDefault();
			let activeDoc;
			let ArrayHTMLelement = document.elementsFromPoint(e.x, e.y);
			for (let HTMLdoc of ArrayHTMLelement) {
				if (HTMLdoc.tagName === 'IMG') {
					activeDoc = HTMLdoc;
				}
			}
			if (activeDoc) {
				let coords = getCoords(activeDoc);
				inventory_user.forEach((element) => {
					if (element.uuid === activeDoc.id) {
						let HTML_description = element.action;
						let documentDescription = document.getElementById('description_drag');
						let centeredOfset = (coords.right - coords.left) / 2;
						let style = {
							width: '1px',
							height: '1px',
							position: 'absolute',
							top: coords.bottom + 'px',
							left: coords.left + centeredOfset - 8 + 'px',
							border: '8px solid transparent',
							borderBottom: '12px solid green'
							// zIndex:3,
						};
						SetStyles(documentDescription, style);
						documentDescription.innerHTML = HTML_description;
						leftBoottomHTML = documentDescription;
					}
				});
			}
		}
	},
	false
);

function drawDescription(e) {
	if (VisibelMode) {
		cleatInvFocusStyle();
		lastDocsWithoutVisibelDescriptionInvItem = document.elementFromPoint(e.x, e.y);
		inventory_user.forEach((elem) => {
			if (elem.uuid === lastDocsWithoutVisibelDescriptionInvItem.id) {
				let coord = getCoords(lastDocsWithoutVisibelDescriptionInvItem);
				let centeredOfset = (coord.right - coord.left) / 2;
				let heightOfset = coord.bottom - coord.top;
				let style = {
					width: '1px',
					height: '1px',
					position: 'absolute',
					top: coord.bottom - 15 + 'px',
					left: coord.left + centeredOfset - 8 + 'px',
					border: '8px solid transparent',
					borderBottom: '12px solid green',
					zIndex: '3',
					display: 'block'
				};
				let HTML_description = elem.description;
				lastDocsWithoutVisibelDescription = HTML_description;
				SetStyles(HTMLdescription_body, style);
				HTMLdescription_body.innerHTML = HTML_description;
				lastDocsWithoutVisibelDescriptionInvItem.style.border = 'solid 1px #4b70e7';
			}
		});
	} else {
		return;
	}
}

const DisabelAllvision = function() {
	let style = {
		display: 'none'
	};
	if (leftBoottomHTML) {
		SetStyles(leftBoottomHTML, style);
	}
	if (HTMLdescription_body) {
		SetStyles(HTMLdescription_body, style);
	}
	cleatInvFocusStyle();
};

const DisabelToogeverVisibel = function(HTML) {
	let style = {
		display: 'none'
	};
	switch (HTML.id) {
		case 'description_body':
			SetStyles(lastDocsWithoutVisibelDescription, style);
		case 'description_drag':
			SetStyles(leftBoottomHTML, style);
	}
};

function cleatInvFocusStyle() {
	if (lastDocsWithoutVisibelDescriptionInvItem) {
		lastDocsWithoutVisibelDescriptionInvItem.style.border = '1px solid black';
	}
}

//-----------------------------------------------------//
// Инициализация
//-----------------------------------------------------//

/**@function Нормализация инвентаря просчитываем Ofset который возникает при клике
 */
function fieledNormaliz() {
	let lastHTMLdoc = document.getElementById(`X16____Y5`);
	let fieled = document.getElementById('fieled');
	let coordsLast = getCoords(lastHTMLdoc);
	let fieledCoords = getCoords(fieled);
	let ofset = fieledCoords.right - coordsLast.right;
	fieled.style.width = fieled.offsetWidth - ofset + 'px';
	fieled.style.border = '2px solid rgb(204, 204, 204)';
}

fieledNormaliz();

//-----------------------------------------------------//
// Рисование Блоков
//-----------------------------------------------------//

/**@function рисует, тень 
 * @param  { стандартаный DOM event} e
 */
function dragColumnShadow(e) {
	if (lastCLickId != undefined) {
		FinalMatMatrixItem = [];
		let idActive = e.target.id;
		let documentDropshadowLeftAngle = structuresHTMLAndCoordinats.find(isShadow);
		let ArrayHTMLelement = document.elementsFromPoint(e.x - OFSET_TOP, e.y - OFSET_LEFT);
		for (let HTMLdoc of ArrayHTMLelement) {
			if (HTMLdoc.classList.contains('column')) {
				if (lastShadowId === HTMLdoc.id) {
					return;
				} else {
					Shadow = HTMLdoc;
					lastShadowId = HTMLdoc.id;
				}
			}
		}
		let resultX = parseInt(Shadow.getAttribute('x')) + parseInt(attributeSizeShadowHelperWidth);
		let resultY = parseInt(Shadow.getAttribute('y')) + parseInt(attributeSizeShadowHelperHeight);
		if (isNaN(resultX)) {
			return;
		} else {
			if (rotateActiveted) {
				let docActiveCoord = getCoords(lastCLickItem);
				let height = parseInt(attributeSizeShadowHelperHeight);
				let RightTopCornerDOC = documentGetCollumn(docActiveCoord.left, docActiveCoord.top + 4);
				let coordsTop = getCoords(RightTopCornerDOC);

				let LeftBottomCornerDOC = documentGetCollumn(
					docActiveCoord.right - oneSqaure.width,
					coordsTop.top + docActiveCoord.width
				);

				let coordsBottom = getCoords(LeftBottomCornerDOC);

				let style = {
					top: coordsTop.top + 'px',
					left: coordsTop.left + 'px',
					right: coordsBottom.right + 'px',
					bottom: coordsBottom.bottom + 'px',
					position: 'absolute',
					height: coordsBottom.bottom - coordsTop.top + 'px',
					width: coordsBottom.right - coordsTop.left + 'px',
					backgroundColor: ShadowStatus
						? `${backgroundColorDontActiveShadows}`
						: `${backgroundColorActiveShadows}`,
					display: 'block'
				};

				SetStyles(shadowDoc, style);
				if (RightTopCornerDOC != undefined && LeftBottomCornerDOC != undefined) {
					let TopX = parseInt(RightTopCornerDOC.getAttribute('x'));
					let TopY = parseInt(RightTopCornerDOC.getAttribute('y'));
					let BottomX = parseInt(LeftBottomCornerDOC.getAttribute('x'));
					let BottomY = parseInt(LeftBottomCornerDOC.getAttribute('y'));
					console.log(TopY, TopX, BottomX, BottomY);
				}
			} else {
				let normalizX = resultX - inventory.y;

				let resultAreaCalculationX = inventory.y + parseInt(normalizX) - 1;
				if (resultAreaCalculationX <= inventory.y && resultY <= inventory.x) {
					if (Shadow) {
						ShadowStatus = false;
						let rightAlgol = Shadow;
						let leftAngelId = `X${parseInt(Shadow.getAttribute('x')) -
							1 +
							parseInt(attributeSizeShadowHelperWidth)}____Y${parseInt(Shadow.getAttribute('y')) -
							1 +
							parseInt(attributeSizeShadowHelperHeight)}`;
						let leftAlgol = document.getElementById(`${leftAngelId}`);
						let CoordsleftAlgol = getCoords(leftAlgol);
						let CoordsRightAlgol = getCoords(rightAlgol);
						let Y_left = leftAngelId.match(regExpY);
						let X_left = leftAngelId.match(regExpX);
						let X_right = parseInt(Shadow.getAttribute('x'));
						let Y_right = parseInt(Shadow.getAttribute('y'));
						let numLeftY = parseInt(Y_left[0].slice(1, 2));
						let numLeftX = parseInt(X_left[0].slice(1, 2));
						let items = [];
						let helperleftAlgol = leftAlgol.getAttribute('x');
						let helperMathMaxAlgolWidth = helperleftAlgol - attributeSizeShadowHelperWidth;
						for (Y_right; numLeftY >= Y_right; Y_right++) {
							items.push(Y_right);
						}
						let elem = 0;
						while (elem < items.length) {
							for (let i = helperMathMaxAlgolWidth; helperleftAlgol > i; i++) {
								FinalMatMatrixItem.push(`X${i + 1}Y${items[elem]}`);
							}
							elem++;
						}
						for (let elem = 0; FinalMatMatrixItem.length > elem; elem++) {
							if (coordinateActive.includes(FinalMatMatrixItem[elem])) {
								ShadowStatus = true;
							}
						}
						let style = {
							top: CoordsRightAlgol.top + 'px',
							left: CoordsRightAlgol.left + 'px',
							right: CoordsleftAlgol.right + 'px',
							bottom: CoordsleftAlgol.bottom,
							position: 'absolute',
							height: CoordsleftAlgol.bottom - CoordsRightAlgol.top + 'px',
							width: CoordsleftAlgol.right - CoordsRightAlgol.left + 'px',
							backgroundColor: ShadowStatus
								? `${backgroundColorDontActiveShadows}`
								: `${backgroundColorActiveShadows}`,
							display: 'block'
						};
						SetStyles(shadowDoc, style);
						ElementSuitabel = true;
						arr = FinalMatMatrixItem.slice(0, FinalMatMatrixItem.length);
					}
				} else {
					return;
				}
			}
		}
	}
}

function setRotateItem(rotate, event) {
	let style;
	let shadowStyle = {
		width: 0 + 'px',
		height: 0 + 'px'
	};

	switch (rotate) {
		case '0':
			style = {
				transform: `rotate(90deg)`
			};
			SetStyles(lastCLickItem, style);
			// if (rotateActivetedShadowInit === false) {
			// console.log(200)

			// SetStyles(shadowDoc, shadowStyle);
			// }
			rotateActiveted = true;
			break;
		case '90':
			style = {
				transform: `rotate(0deg)`
			};
			SetStyles(lastCLickItem, style);

			// if (rotateActivetedShadowInit === false) {
			// console.log(200)
			// SetStyles(shadowDoc, shadowStyle);
			// }
			rotateActiveted = false;
		default:
			break;
	}
}
function rotateActivetedDown() {}

rotateActivetedDown();

function documentGetCollumn(x, y) {
	let docs;
	let ArrayHTMLelement = document.elementsFromPoint(x, y);
	for (let doc of ArrayHTMLelement) {
		if (doc.classList.contains('column')) {
			docs = doc;
		}
	}
	return docs;
}
oneSqaure = getCoords(document.getElementById('X0____Y0'));

              
            
!
999px

Console