@use "sass:list" as *;

// --- CONSTANTS ---

// coordinates of horizontal walls
$horizontal_walls: (
  (0, 0) (0, 2) (0, 5) (1, 1) (1, 2) (1, 4) (2, 4) (3, 0) (3, 2) (3, 4) (3, 5)
    (4, 0) (4, 1) (4, 2) (4, 3) (4, 5) (4, 6) (5, 0) (5, 2) (5, 3) (5, 5) (6, 3)
    (6, 4) (6, 5) (6, 6) (7, 0) (7, 4) (7, 6)
);

// coordinates of vertical walls
$vertical_walls: (
  (0, 4) (0, 6) (1, 0) (1, 1) (1, 3) (1, 5) (1, 6) (1, 7) (2, 1) (2, 3) (2, 4)
    (2, 6) (3, 2) (3, 7) (4, 4) (4, 5) (5, 1) (5, 2) (5, 6) (6, 2) (6, 3)
);

// number of maze units in x-direction
$n: 8;

// number of maze units in y-direction
$m: 8;

// size of a maze unit
$u: 2.5rem;

// coordinate of start
$start: (0, 0);

// coordinate of goal
$goal: (7, 7);

// thickness of walls
$thick: 0.25rem;

// main color for walls and labels
$color: #ccc;

// --- FUNCTIONS ---

// computes the id of a radio button at a coordinate
@function id($coordinate) {
  $x: nth($coordinate, 1);
  $y: nth($coordinate, 2);
  @return "r" + $x + "-" + $y;
}

// computes the allowed neighbor coordinates
@function neighbors($i, $j) {
  $list: ();

  // left
  @if ($i > 0 and not index($vertical_walls, ($i - 1, $j))) {
    $list: append($list, ($i - 1, $j));
  }

  // right
  @if (($i < $n - 1) and not index($vertical_walls, ($i, $j))) {
    $list: append($list, ($i + 1, $j));
  }

  // top
  @if ($j > 0 and not index($horizontal_walls, ($i, $j - 1))) {
    $list: append($list, ($i, $j - 1));
  }

  // bottom
  @if ($j < $m - 1 and not index($horizontal_walls, ($i, $j))) {
    $list: append($list, ($i, $j + 1));
  }

  @return $list;
}

// --- MIXINS ---

// flex utility mixin
@mixin flex-center($dir) {
  display: flex;
  flex-direction: $dir;
  align-items: center;
  justify-content: center;
}

// mixin for drawing horizontal and vertical walls in the maze
@mixin draw_walls {
  // outer wall
  outline: $thick solid $color;
  outline-offset: -0.5 * $thick;
  // lists to be filled
  $gradients: ();
  $positions: ();
  $sizes: ();
  $gradient: linear-gradient($color 0% 100%);
  // horizontal walls

  @each $x, $y in $horizontal_walls {
    $gradients: append($gradients, $gradient, comma);
    $positions: append(
      $positions,
      $x * $u - 0.5 * $thick ($y + 1) * $u - 0.5 * $thick,
      comma
    );
    $sizes: append($sizes, $u + $thick $thick, comma);
  }
  // vertical walls
  @each $x, $y in $vertical_walls {
    $gradients: append($gradients, $gradient, comma);
    $positions: append(
      $positions,
      ($x + 1) * $u - 0.5 * $thick $y * $u - 0.5 * $thick,
      comma
    );
    $sizes: append($sizes, $thick $u + $thick, comma);
  }

  background-image: $gradients;
  background-size: $sizes;
  background-position: $positions;
  background-repeat: no-repeat;
}

// mixin displaying the goal
@mixin show_goal() {
  &::before {
    content: "";
    position: absolute;
    width: $u - $thick;
    height: $u - $thick;
    background-color: #060;
    left: nth($goal, 1) * $u + 0.5 * $thick;
    top: nth($goal, 2) * $u + 0.5 * $thick;
  }
}

// mixin for animating opacity
@mixin animate_opacity() {
  transition: opacity 200ms ease-in-out;
}

// adjust player according to state
@mixin adjust_player($i, $j) {
  $id: id(($i, $j));
  input##{$id}:checked ~ .maze > .player {
    --x: #{$i};
    --y: #{$j};
  }
}

// show controls according to state
@mixin show_controls($i, $j) {
  $id: id(($i, $j));
  @each $x, $y in neighbors($i, $j) {
    $id_n: id(($x, $y));
    input##{$id}:checked ~ .menu > label[for="#{$id_n}"] {
      display: inline-block;
      @if ($x < $i) {
        // left
        --r: 180deg;
      } @else if ($x > $i) {
        // right
        --r: 0deg;
      } @else if ($y < $j) {
        // top
        --r: -90deg;
      } @else if ($y > $j) {
        // bottom
        --r: 90deg;
      }
    }
  }
}

// --- BEGIN OF CSS ---

// CSS reset
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// global styles
body {
  background-color: #111;
  color: $color;
  font-family: system-ui, sans-serif;
  padding-inline: 0.5rem;
}

// form containing everything
form {
  @include flex-center(column);
  min-height: 100vh;
}

// maze with the player, the walls and the goal
.maze {
  margin-top: 1rem;
  position: relative;
  width: $n * $u;
  height: $m * $u;
  @include draw_walls();
  @include show_goal();
}

// player
.player {
  --x: 0;
  --y: 0;
  $s: 0.65;
  position: absolute;
  width: $u;
  height: $u;
  border-radius: 50%;
  background: red;
  transform: translate(calc(var(--x) * #{$u}), calc(var(--y) * #{$u})) scale($s);
  transition: transform 180ms ease-out;
}

// hide radio buttons (not just visually, since keyboard
// interaction would make cheating possible)
input[type="radio"] {
  display: none;
}

// game logic
@for $i from 0 to $n {
  @for $j from 0 to $m {
    @include adjust_player($i, $j);
    @include show_controls($i, $j);
  }
}

// menu
$arrow_size: 2rem;

.menu {
  width: 3.5 * $arrow_size;
  height: 3.5 * $arrow_size;
  margin-block: 2rem;
  outline: 0.1rem solid $color;
  border-radius: 20%;
  position: relative;
  @include animate_opacity();
  @include flex-center(column);
}

// label with arrow inside
label {
  --r: 0deg;
  position: absolute;
  transform: rotate(var(--r)) translateX($arrow_size);
  cursor: pointer;
  width: $arrow_size;
  height: $arrow_size;
  display: none;

  &::after {
    content: "";
    position: absolute;
    inset: 0rem;
    background-color: $color;
    clip-path: polygon(
      0% 30%,
      50% 30%,
      50% 0%,
      100% 50%,
      50% 100%,
      50% 70%,
      0% 70%
    );
  }

  &:hover::after {
    background-color: white;
  }
}

// reset buttons
button {
  background-color: $color;
  border: none;
  padding: 0.4rem 0.8rem;
  font-family: inherit;
  font-size: 1.125rem;
  color: black;
  border-radius: 0.25rem;
  cursor: pointer;
  @include animate_opacity();

  &:focus {
    outline-offset: 0.2rem;
    outline: 0.1rem solid $color;
  }

  &:hover {
    background-color: white;
  }
}

// hide reset button when player is at start
input##{id($start)}:checked ~ button[type="reset"] {
  pointer-events: none;
  opacity: 0;
}

// win modal
.win {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(black, 0.9);
  font-size: 2rem;
  @include animate_opacity();
  @include flex-center(column);
  gap: 1rem;
}

// win logic
input##{id($goal)}:checked {
  & ~ .win {
    opacity: 1;
    pointer-events: initial;
  }
  & ~ :is(.menu, button[type="reset"]) {
    opacity: 0;
  }
}