VegasChickiChicki

еать залипалово какое :D
вот скрипт
colbacolorbar.ru/themes/colba/assets/js/fluidWave.js

вообще не понимаю что там происходит, вроде яваскрипт, но какой то непростой webGL фреймворк наверно

UPD вот нашел на гитхабе это, хз может быть это оригинал кода
https://gist.github.com/peretc001/1444c3df210cc66c...

Чувак, все на много проще, смотри где они это взяли)
https://paveldogreat.github.io/WebGL-Fluid-Simulation/

Эта штука сделана на WebGL с использованием уравнения Навье-Стокса
https://ru.wikipedia.org/wiki/%D0%A3%D1%80%D0%B0%D...

https://codepen.io/PavelDoGreat/pen/zdWzEL
developer.download.nvidia.com/books/HTML/gpugems/g...
Пример разбора есть в книге по динамике жидкостей.

if (time_push%50 == 0 && fish.length < 10)

вы реально полагаете, что по скринам можно понять как оно всплывает?
ну ок: можно и на чистом CSS показывать блок по hover'у.

(/\t/g, "\\t")

Как расположить цифры по серединам клеток?

Добавьте следующие свойства для .place

.place {
    ...
    display: flex;
    justify-content: center;
    align-items: center;
}

Как сделать, чтобы сами клетки циферблата (ну, естественно, и сам циферблат) были квадратными, не зависимо от размера и соотношения сторон дисплея?

Пробую - не получается так сделать.
У Вас везде заданы относительные величины в гриде.
Если сделать так, чтобы высота квадратов увеличивалась пропорционально ширине, в определенный момент циферблат начинает выталкивать хедер и футер за пределы экрана. А при уменьшении, наоборот, все же начинает сжиматься.
Нужны хотя бы частично фиксированные величины.

А вообще, суть сохранения пропорции размеров элемента в следующем: внутрь блока вкладываем еще один блок и задаем ему "padding-bottom: 100%" (процентное отношение ширины к высоте, в нашем случае 100%, потому что стороны должны быть равны).
Получается вот такое.
Как я написал, работает лишь в определенном диапазоне ширины.

https://codepen.io/hisbvdis/pen/ZgGqNm?editors=1100

JS прожорлив сам по себе, так что не использовать jQuery это как не брать колу, заказав 15 гамбургеров, пушо в ней сахару много.

Redux

:disabled="currentPage === 0"

Ну и какой в этом смысл? 0 - это январь, что, нельзя переключаться на предыдущий год? Уберите.

if(this.currentPage % 11 == 0){

Да ну? Так вы будете с февраля переключаться на декабрь. Проверяйте, что номер текущего месяца меньше нуля.

if(this.currentPage+1 % 11 == 0){

И это тоже работает не так, как вам кажется. Во-первых - чтобы получить нулевой остаток от деления, currentPage должен быть равен 10, т.е., после октября у вас будет идти январь. А во-вторых - приоритет операторов, погуглите что это такое. Реально тут вычисляется остаток от деления единицы на одиннадцать, а не суммы, т.е. (учитывая, что currentPage не должен быть отрицательным) условие никогда не будет истинным. Проверяйте, что номер текущего месяца превышает максимальный (декабрь, 11).

this.currentPage == 11;

this.currentPage == 0;

Кто-то неспособен различить операторы присваивания и сравнения.

подскажите пожалуйста что я неправильно делаю

Да всё правильно делаете - не зная язык, пытаетесь осваивать фреймворк.

Если интересен вариант с меньшими затратами по памяти и CPU чем у Александр

const items = Array.from(
  document.getElementsByClassName('cartitem'),
  ({textContent}) => ({name: textContent})
);
const itemsJSON = JSON.stringify(items);

Добрый день!

Вы можете сделать что-то вроде:

const cartItems = [...document.querySelectorAll(‘cartitem’)];

// затем собрать их в новый массив:
const items =[];
cartItems.forEach(cartItem => {
  const newItem = {
    name: cartItem.textContent
  };
  items.push(newItem);
})

// после чего конвертировать в json:

const itemsJson = JSON.stringify(items);

массив с данными для форм, v-for, push