Scrabble pseudo-typeface

<p class="scrabble">
  Offred is a Handmaid in the Republic of Gilead. She may leave the home of the
  Commander and his wife once a day to walk to food markets whose signs are now
  pictures instead of words because women are no longer allowed to read. She
  must lie on her back once a month and pray that the Commander makes her
  pregnant, because in an age of declining births, Offred and the other
  Handmaids are valued only if their ovaries are viable. Offred can remember the
  years before, when she lived and made love with her husband, Luke; when she
  played with and protected her daughter; when she had a job, money of her own,
  and access to knowledge. But all of that is gone now...
</p>

@font-face {
  font-family: "Roboto Mono";
  src: url("RobotoMono-Regular.ttf");
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #b30000;

  font-family: "Roboto Mono", monospace;
  font-size: 2rem;
  text-transform: uppercase;

  overflow-x: hidden;
}

.scrabble {
  opacity: 0;
}

.tile {
  position: relative;
  display: inline-block;

  padding: 0.1em 0.3em;
  margin: 0.1em;

  background: rgb(243, 230, 210);

  border: 1px hsl(43, 81%, 94%) solid;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

  border-radius: 0.1em;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.value {
  position: absolute;
  right: 0.15em;
  bottom: 0.5em;

  font-size: 0.3em;
}

.word {
  margin-inline-end: 1em;
}

const letterValues = [
  { letter: "A", value: 1 },
  { letter: "B", value: 3 },
  { letter: "C", value: 3 },
  { letter: "D", value: 2 },
  { letter: "E", value: 1 },
  { letter: "F", value: 4 },
  { letter: "G", value: 2 },
  { letter: "H", value: 4 },
  { letter: "I", value: 1 },
  { letter: "J", value: 8 },
  { letter: "K", value: 5 },
  { letter: "L", value: 1 },
  { letter: "M", value: 3 },
  { letter: "N", value: 1 },
  { letter: "O", value: 1 },
  { letter: "P", value: 3 },
  { letter: "Q", value: 10 },
  { letter: "R", value: 1 },
  { letter: "S", value: 1 },
  { letter: "T", value: 1 },
  { letter: "U", value: 1 },
  { letter: "V", value: 4 },
  { letter: "W", value: 4 },
  { letter: "X", value: 8 },
  { letter: "Y", value: 4 },
  { letter: "Z", value: 10 },
];

// creates a span for each letter
let targetClass = ".scrabble";
Splitting({ target: targetClass, by: "chars" });

let characters = document.querySelectorAll(".char");

// a letter is styled as a tile, punctuation is left as it is.
function makeTiles() {
  for (const characterSpan of characters) {
    characterSpan.classList.add("tile");

    const letter = characterSpan.innerText;

    if (isLetter(letter)) {
      addValue(characterSpan);
    }
  }
}

function isLetter(str) {
  if (str.length === 1 && str.match(/[a-z]/i)) {
    return true;
  }
  return false;
}

function addValue(span) {
  const character = span.innerText;

  for (const item of letterValues) {
    if (item.letter === character) {
      const valueSpan = document.createElement("span");
      valueSpan.innerText = item.value;
      valueSpan.classList.add("value");
      span.append(valueSpan);
      break;
    }
  }
}

// paragraphs are hidden initially to prevent text being shown until it is styled as tiles
function showParagraphs() {
  let paragraphs = document.querySelectorAll(targetClass);
  paragraphs.forEach((p) => p.style.setProperty("opacity", "1"));
}

makeTiles();
showParagraphs();