funkydance

chips, tags, filters, badge, ачивки

breadcrump - это место положения, хотя и сомнительное

https://getbootstrap.com/docs/4.4/components/badge/

import { post } from "../../../server/application/apis/posts.json";

Что же тут не так? Возможно то, что в JSON файле нет именованного экспорта?
Как насчет такого?

import data from "../../../server/application/apis/posts.json";

console.log(data.posts);

если подтягивать его из другого файла, то ошибка

Норм пацаны текст ошибки указывают в вопросе ))

Есть более простое описание этой функции:

const rand=(min, max)=>Math.floor(Math.random() * max) + min;

for (i=0; i<10;i++) console.log(rand(1,10))
Console output:

9
4
2
8
7
9
4
6
4
3

У вас же в коде вообще не нашел где используется переменная rands или функция randomInteger в рендеринге - скорее всего она у вас создаётся на старте приложения и живёт весь цикл процесса, покопайте ещё раз код внимательно

new Audio() создает HTMLAudioElement.
Вместо того чтобы создавать его каждый раз, его можно создать один раз или даже вставить в разметку, а из события дергать только play
Чтобы заткнуть проигрыватель, ему нужно выставить свойство muted в true. Вы же тут даже ссылки на него не оставляете, поэтому свойство ставить некуда.

А уж как это сделать глобально вам решать, можно через стор типа redux.

И кстати непонятно что вам мешало сделать просто

onMouseOver={() => settings.isSound && new Audio('/sound/menuhover.wav').play()}

https://ryandrewjohnson.github.io/react-localize-r... или создать синглтон, и подписываться на изменения языка синглтона(через колбэк), последний предпочтительней, поскольку судя по всему эти либы крайне бедны на функционал.

Но у меня вопрос! Зачем столько кадров? Анимируйте только именно background-size, просто отдельным свойством, а не в составе background:



Тогда и кода будет в десятки раз меньше.

~ ~ ~ ~ ~

Ну а так, то вот:

@keyframes backwheel {
  @for $i from 100 to 33 {
    #{$i * 1%} {
      background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) #{$i * 1%});
    }
  }
}

Генерирует вот это:

@keyframes backwheel {
  100% {
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) 100%);
  }
  99% {
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) 99%);
  }
  98% {
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) 98%);
  }
  /* И так далее */
}

У Вас скорее всего ошибка. Вы все обернули в функцию. т. Е. Вы 77 раз создадите анимацию backwheel. Вам нужно поместить цикл внутрь кийфреймс

https://codepen.io/mrd/pen/yJAkVb - принцип будет понятен.

https://a.jscourse.com/ru/challenge
old.code.mu/tasks/javascript/practice/praktika-jav...
https://js2.itgid.info/lessons

Прохожу learn.javascript.ru и в конце даётся всего 2-3 примера, которые нужно решить. Их успешно решаю, но хочется прям попотеть. Кто, что посоветует?

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

Если прибавлять по 10%, то для третьего уровня надо не 120, а 121 опыта (110 * 1.1).
Сумма членов геометрической прогрессии
S_n = b₁ * (1 - qⁿ) / (1 - q)
b₁ = 100
q = 1.1
S_n = 100 * (1 - 1.1ⁿ) / (1 - 1.1) = 1000 * (1.1ⁿ - 1)
1.1ⁿ = (S_n / 1000) + 1
n = log_1.1((S_n / 1000) + 1)
S_n = 2500
n = log_1.1((2500 / 1000) + 1) = log_1.1(3.5) = 13.144
Получаем, что 2500 опыта будет на 13 уровне.
Но для целых чисел такой вариант не подходит, да и прибавление по 10% даст нецелые значения - 100, 110, 121, 133.1, 146.41, ...
Так что, оптимальным будет составление таблицы, как предложил Александр Аксентьев.

require_once 'vendor/autoload.php';

function levelGenerate(&$levels)
{
    $max_level = 100; // тут указывается максимально возможный уровень
    $lastLevel = $levels->last();

    $levels->push([
        'level' => ++$lastLevel['level'],
        'rating' => $lastLevel['rating'] * 1.1,
    ]);

    if ($levels->last()['level'] < $max_level) {
        return levelGenerate($levels);
    }
}

$levels = collect([['level' => 1, 'rating' => 100]]);
levelGenerate($levels);

$my_rating = 1245;
$my_level = $levels->where('rating', '<=', $my_rating)->last();
dd($my_level['level']); // 27

// my_rating = 741
// array:2 [▼
//   "level" => 22
//   "rating" => 740.02499442582
// ]

// my_rating = 150
// array:2 [▼
//   "level" => 5
//   "rating" => 146.41
// ]

// my_rating = 1245
// array:2 [▼
//   "level" => 27
//   "rating" => 1191.8176537727
// ]

Для работы скрипта нужно подключить эту библиотеку https://github.com/tightenco/collect
Требования: PHP 7.1

$string = '[17650,17776,17777]';

preg_match_all('/\d+/', $string, $matches);

var_dump($matches[0]);