dame

by Sebastian Kay

HTML

<style>
  @import url("https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap");

  /* Basis Dark Mode */
  body {
    background-color: #222;
    color: #222;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    transition: background-color 0.4s ease-in-out;
  }

  #game-container {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .buttons {
    position: relative;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 15px;

    /* Button Neues Spiel */
    #new-game {
      padding: 10px 20px;
      background-color: #555;
      border: none;
      color: #fff;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
    }

    #new-game:hover {
      background-color: #777;
    }
  }

  #status {
    margin-bottom: 10px;
    font-family: "Caveat Brush", serif;
    font-size: 3rem;
    font-weight: 600;
    color: color-mix(
      in srgb,
      rgba(var(--active-background-color), 1) 30%,
      black
    );
  }

  /* Responsive Brett: 8 Spalten, jede Zelle passt sich an */
  #board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    margin: 0;
    background-color: rgba(68, 68, 68, 1);
    border: none;
    border-radius: 0.35rem;
    overflow: hidden;
    padding: 8px;
    width: 90%;
    max-height: 90vw;
    /* Existing styles... */
    transform: perspective(1600px) rotateX(45deg) rotateZ(0deg) rotateY(0deg); /* Perspective and X-axis rotation for isometric effect */
    transform-origin: top center; /* Keep the top of the board in place */
    /* Add a subtle shadow for depth...

JavaScript

const rgbToHsl = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const l = Math.max(r, g, b);
  const s = l - Math.min(r, g, b);
  const h = s
    ? l === r
      ? (g - b) / s
      : l === g
      ? 2 + (b - r) / s
      : 4 + (r - g) / s
    : 0;
  return [
    60 * h < 0 ? 60 * h + 360 : 60 * h,
    100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
    (100 * (2 * l - s)) / 2,
  ];
};

const hslToRgb = (h, s, l) => {
  s /= 100;
  l /= 100;
  const k = n => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = n =>
    l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  return [255 * f(0), 255 * f(8), 255 * f(4)];
};

console.log(rgbToHsl(128, 168, 190))