наверное здесь ошибка или я не правильно прикрутил
у меня время постоянно null? а нужно что бы ложило сколько прошло со старта(начала отсчета таймера)

вот сейчас весь код по JS
отдельно модалка на приветствие:

"use strict";

document.addEventListener("DOMContentLoaded", function () {
  let user = localStorage.getItem("userName");
  let title = user ? `Привет ${user}!` : `Введите своё имя.`;
  let h1 = document.querySelector("h1");
  h1.textContent = title;
  let newname = document.querySelector("[name='newname']");
  newname.hidden = !user;
  let username = document.querySelector("[name='username']");
  username.hidden = user;
  user && (username.value = user);
  let form = document.querySelector("form");
  form.addEventListener("click", event => {
    let { target } = event;
    let txt = username.value.trim();
    if (target == newname) {
      event.preventDefault();
      localStorage.removeItem('userName');
      h1.textContent = `Введите или выберете из списка:`;
      newname.hidden = true;
      username.value = "";
      username.hidden = false;
    }

  })
});

отдельно работа с рисунком

"use strict";

//Работа с цветам
const colors = [
  { color: '#ff0000', image: 'Pic/pencil_red.png' },
  { color: '#ffa500', image: 'Pic/pencil_orange.png' },
  { color: '#ffff00', image: 'Pic/pencil_yellow.png' },
  { color: '#008000', image: 'Pic/pencil_green.png' },
  { color: '#0000ff', image: 'Pic/pencil_blue.png' },
  { color: '#00008b', image: 'Pic/pencil_dark_blue.png' },
  { color: '#800080', image: 'Pic/pencil_purple.png' },
];
function renderColorPalette() {
  const paletteContainer = document.querySelector(".palette");
  const colorsItems = colors
    .map(n => `
    <button
      style="background-image: url(${n.image})"
      class="palette-button"
      data-color="${n.color}"
    ></button>`)
    .join('');
  paletteContainer.innerHTML = colorsItems;
}
function handleClickOnColor(event) {
  const button = event.target.closest(".palette-button");
  if (!button) return;
  const oldActiveButton = document.querySelector(".palette-button-active");
  if (oldActiveButton) {
    oldActiveButton.classList.remove("palette-button-active");
  }
  button.classList.add("palette-button-active");
}
function setEventsOnFilledElements() {
  function handleMouseEnter() {
    this.classList.add("selected");
  }
  function handleMouseLeave() {
    this.classList.remove("selected");
  }
  const elements = document.querySelectorAll("*[fill]");
  function handleClick() {
    const currentColor = document.querySelector(".palette-button-active");
    if (!currentColor) {
      alert("Цвет не выбран");
      return;
    }
    const save = { elem: this, color: this.getAttribute("fill") };
    stateStack.push(save);
    this.setAttribute("fill", currentColor.dataset.color);
    if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) {
      tick();
      let time = document.getElementById('play_timer').innerHTML;
      localStorage.setItem("time ", time);
      setTimeout(() => alert('Вы всё закрасили!'));
      location.href = "/rekord.html";
    }
  }
  elements.forEach(element => {
    element.addEventListener("mouseenter", handleMouseEnter);
    element.addEventListener("mouseleave", handleMouseLeave);
    element.addEventListener("click", handleClick);
  });
}
document.addEventListener("DOMContentLoaded", renderColorPalette);
document.addEventListener("click", handleClickOnColor);
document.addEventListener("DOMContentLoaded", setEventsOnFilledElements);
function check() {
  const { length } = [...document.querySelectorAll("*[fill]")].filter(ep => ep.getAttribute('fill') == '#ffffff');
  const txt = length ? `Ещё ${length} фигур не закрашено` : 'Вы всё закрасили!'
  alert(txt)
}
const stateStack = []
function rev() {
  if (stateStack.length) {
    const { elem, color } = stateStack.pop();
    elem.setAttribute("fill", color)
  }
}

отдельно таймер

"use strict";

/*таймер игры*/
function timer(elem, min, sec) {
  (--sec < 0) && (sec = min-- ? 59 : 0);
  min = Math.max(min, 0);
  elem.innerHTML = min + " : " + sec;
  if (sec || min)
    setTimeout(timer.bind(0, elem, min, sec), 1000);
  else {
    alert('Время вышло!');
    location.href = "/rekord.html";
  }
}

timer(document.getElementById('play_timer'), 3, 0);

//Время в игре

function tick() {
  var nowTime = new Date();
  console.log('прошло секунд: ' + (nowTime + timer) / 1000);
}

отдельно работа с пользователем

"use strict";

$(document).ready(function () {

if (localStorage.getItem("users") === null) {
    localStorage.setItem("users", JSON.stringify([]));
}
 
let users = JSON.parse(localStorage.getItem("users"));
let userName  = localStorage.getItem("userName");
let time = localStorage.getItem("time")
users.push({userName, time});
localStorage.setItem("users", JSON.stringify(users));
for (const item of users) console.log(item);


var $select = $('#name');
  $select.ready(function (event) {
    $.each(JSON.parse(users), function (key, value) {
      $('<option>').val(value.name).text(value.name).appendTo($select);
    });
  });

  $('#play_game').click(function () {
    let userName = document.getElementById('new_name').value;
    localStorage.setItem("userName", userName)
    users = JSON.parse(users);
    users.push(newUser);
    console.log(users);
    localStorage.setItem("users", JSON.stringify(users));
  });
});

Где-то ошибка в последнем коде, т.к. после того как закрасил, выдаёт null на время и ссылается на этот .js

Pavel_16,
строка 54 пробел в ключе уберите

localStorage.setItem("time ", time);

Pavel_16,
на всякий случай $select.ready это бред.

круто!
но теперь вот что - где наш юзер исчез,
И время можно как то -захватить которое прошло, а не осталось!?
{userName: null, time: "2 : 34"}

мне кажется,что в этом js многое не так или не нужно?!?!:cray:

почему то перестало имя передаваться- после изменения формы или нет? нужно поковыряться....

Pavel_16,
страница рекордов

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  table{
    border: 1px solid #000000;
    border-collapse: collapse;
  }
  td{
    border: 1px solid #000000;
  }

  </style>

  <script>
document.addEventListener( "DOMContentLoaded" , function() {
if (localStorage.getItem("users") === null) {
    localStorage.setItem("users", JSON.stringify([]));
}

let users = JSON.parse(localStorage.getItem("users"));
let userName  = localStorage.getItem("userName");
let time = localStorage.getItem("time");
if(time) {
users.push({userName, time});
localStorage.setItem("users", JSON.stringify(users));
localStorage.removeItem('time');
}
let html = ''
for (const {userName, time} of users) html +=
    `<tr>
        <td>${userName}</td>
        <td>${time}</td>
    </tr>`;
document.querySelector('table tbody').innerHTML = html;

  });

  </script>
</head>
<body>
<table>
<thead><tr>
        <td>имя</td>
        <td>время</td>
    </tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>

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

так верните строки которые записывают имя