Не могли бы помочь с заданием?

Question

[Triplicate]

Здравствуйте, выполнял задание по построению пирамиды.
Результат моего решения
C условиями задачи можно ознакомиться в репозитории

Я понимаю, что создавать такое кол-во элементов в DOM - пагубная задача, но это была первая идея, что пришла в голову, вторая - canvas, но знаний в этой технологии у меня недостаточно, так как не уделял ей достаточно внимания.

Проблема, которая возникала:

При более чем 100 строках ужасное отображение пирамиды, многие элементы пропадают, нет возможности проскроллить влево (использовал overflow: auto)

Не могли бы подсказать как это исправить, может кто-то хорошо владеет canvas и сможет объяснить как выполнить такое на данной технологии ?
Заранее спасибо за любую помощь, сам же претендую на Junior+ позицию во фронте.

Comments

[origami1024]

Канвас еще проще чем DOM для этой задачи, ты сам разберешься если попробуешь.

Но тут лучше на webgl делать в 3д. Three.js может быть.
Еще было бы круто добавить анимацию построения пирамиды, чтоб блоки появлялись с фундамента к верху

Потом можно будет прикрутить физический движок, чтоб можно было выбивать блоки и пирамида феерически разваливалась

[Triplicate]

origami1024, Да, у меня тоже были мысли по поводу построения его, а ваше предложение по поводу разбиения - вообще огонь))
Но к canvas я подойду немного позже, эту технологию в полной мере и прилегающие к ней Pixi.js и ThreeJS я тоже хочу пощупать, но пока действительно не могу распыляться на них.
У меня есть небольшой опыт работы с canvas, но данная задача - тестовое задание, которое практически выполнено, к сожалению я не могу потратить на него много времени, хотя и понимаю, что моё решение - костыль, спасибо большое за ваш ответ

[RAX7]

Ну хотя бы так поправь:

.main {
- min-height: 100vh;
+ height: 100vh;
}

.pyramid__observer {
  overflow: auto;
- width: 100%;
- max-height: 1200px;
+ display: flex;
}

.pyramid {
- display: flex;
- flex-direction: column;
- justify-content: center;
- flex-basis: 80%;
- min-height: 100%;
+ margin: 0 auto;
}

[Triplicate]

RAX7, Спасибо большое за ответ, исправил немного другим образом

[WbICHA]

Но тут лучше на webgl делать в 3д.

origami1024, а зачем тут 3д?

[WbICHA]

Triplicate, как вариант, если не хочется использовать канвас, можешь сделать по другому:
Для строк указываешь нужную длину при создании через жс, добавляешь туда все значения через пробел, выставляешь text-align-last: justify; (паддинги слева и справа добавь для строки). Остаётся только выделить простые числа, можно созданием дива с числом и абсолютным позиционированием его (строка должна быть позишн релеатив).
Дом элементов становится на порядок меньше.

На выходе получается херня, конечно, но почему бы и нет? :D

[Triplicate]

WbICHA, Спасибо за ответ, можете взглянуть как я это поправил ("камерой" можно управлять стрелочками) ))

[WbICHA]

Triplicate, эммм... Так ничего же не изменилось.

[Triplicate]

WbICHA, края пирамиды стали видны, так же появилась условная "камера", которая позволяет с помощью стрелок перемещаться

Answer 1

[profesor08]

По хорошему тебе надо как-то масштабировать пирамиду, лучше если будешь вычислять высоту и ширину кирпичей, а так-же размер шрифта.

Код ниже лишь упрощает просмотр пирамиды, когда она большая.

body {
    background: var(--color-background);
}

.main {
    display: grid;
    gap: 30px;
    min-height: 100vh;
    grid-auto-rows: auto 1fr auto;
    padding: 30px;
}

.header {}

.header__rows {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.camera {
    display: grid;
    justify-items: center;
    align-items: center;
}

.pyramid {
    display: grid;
    justify-content: center;
}

.row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    justify-content: center;
    width: 100%;
    height: 32px;
}

.brick {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    background: var(--color-backround-second);
    color: var(--color-main);
    min-width: 62px;
    height: 100%;
}

Comments

[Triplicate]

Спасибо большое, я думал в сторону добавления камеры или чего-то подобного, так же пытался уменьшать строки и сами кирпичики, но пирамиду-то становиться видно, но читаемость чисел и сам визуал сильно проседает, спасибо за ваш ответ )

[profesor08]

Triplicate, ты можешь еще добавить небольшой скрипт, который будет реагировать на колесико мыши и менять значени css свойства для пирамиды transform: scale(0.4), позволит ее масштабировать

[Triplicate]

profesor08, Спасибо большое, я думал об этом )) Задание с изменениями отправил, жду ответа