@use 'sass:list';
@use "sass:map";

// values correspond to the order of each letter on a qwerty keyboard, starting at 1. q is 1, w is 2, e is 3 and so on...
$answer: 9,22,3,11,25; 
// number of rows and cols
$rows: 5;
$cols: 4;

@property --is-empty { // If the current cell hasn't been interacted with. Returns 0 or 1
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --row-entered {  // If the user hit enter on the current row. Returns 0 or 1
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --is-inrange { // If the current cell has been interacted with and the value is not in range. Returns 0 or 1
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --is-incorrect { // If the current cell has been interacted with and the value is not in range. Returns 0 or 1
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --is-correct { // If the current cell has been interacted with and the value is correct. Returns 0 or 1
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --is-winner { // If the user has the correct word. Returns 0 or 1
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

@property --is-gameover { // If the game is over without a win. Returns 0 or 1
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

/* 
  This results in a variable like --is-used-5 which is either 1 or 0
  that we'll use later to highlight specific keys on the keyboard.
  --is-used-5 corresponds to the letter t, because it's the 5th letter
  on a qwerty keyboard
*/
@for $i from 1 through 26 {
  @property --is-used-#{$i} {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
  }
}

:root{
  color-scheme: light dark;
  --u: min(1.5rem, 3.75vw, 3vh); // for sizing

  --grey: light-dark(#ddd, #888);
  --yellow: light-dark(#ffeb12, #c5b400);
  --green: light-dark(#69f048, #0ebc2e);
  --border: light-dark(#a8a8a8, #ccc);
  --focus: light-dark(#9eddf8, #4dc1f2);
  --page-bg: light-dark(#fff, #333); 
  --text-color: light-dark(#333, #fff);

  @for $i from 0 through 4 {
    --letter-#{$i}: #{nth($answer, ($i + 1))};
  }
}


$timelinescopes: "";
$animation: "";

@function implode($pieces, $glue: "") {
	$result: null;
	@for $i from 1 through length($pieces) {
		$piece: nth($pieces, $i);
		@if type-of($piece) == list {
			$result: unquote("#{$result}#{$glue}#{implode($piece, $glue)}");
		} @else {
			$result: unquote("#{$result}#{$glue}#{$piece}");
		}
	}
	@if $result != null {
		$result: str-slice($result, str-length($glue) + 1, -1);
	}
	@return $result;
}

// grid values
@for $row from 0 through $rows {
  @for $col from 0 through $cols {
    $timelinescopes: '#{$timelinescopes} --cell--#{$col}-#{$row}--scroller,';
    $animation: '#{$animation} cell--#{$col}-#{$row}--timeline steps(27) forwards,';
  }
  $timelinescopes: '#{$timelinescopes} --enter--#{$row}--scroller';
  $animation: '#{$animation} enter--#{$row}--timeline steps(2) forwards';
  
  @if $row != 5 {
   $timelinescopes: '#{$timelinescopes},';
   $animation: '#{$animation},';
  }
}



body{
  background: var(--page-bg);
  color: var(--text-color);
  margin:0;
  min-height: 100vh;
  font-family: "Public Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 1.5;
  font-size: 16px;
  align-content: center;
  text-align: center;
  timeline-scope: unquote($timelinescopes);
  animation: unquote($animation);
  animation-timeline: unquote($timelinescopes);
  height: 100vh;
  overflow: hidden;
  // Write the variable that, for each row, determines if every character is correct and the user has clicked 'ENTER'.
  $complete_rows: ();
  @for $row from 0 through 5 {
    $row_is_complete : '';
    @for $col from 0 through 4 {
      $row_is_complete: "#{$row_is_complete} calc(1 - min(abs(var(--letter-#{$col}) - var(--cell--#{$col}-#{$row})), 1)),"
    }
    $complete_rows: append($complete_rows, "min(#{$row_is_complete} var(--enter--#{$row}))");
  } 

  --is-winner: max(#{ implode($complete_rows, ',')});

  --is-gameover: calc(
    max(
      0, 
      calc(
        min(
          var(--enter--0),
          var(--enter--1),
          var(--enter--2),
          var(--enter--3),
          var(--enter--4),
          var(--enter--5)
        ) - var(--is-winner)
      )
    )
  );

  // Write the looooooong string that we use to determine whether or not a specific letter has been used
  @for $i from 1 through 26 {
    $row_list: ();
    @for $row from 0 through $rows {
      $cell_list: ();
      @for $col from 0 through $cols {
        @if index($answer, $i) == null or index($answer, $i) - 1 != $col {
          $cell_list: append($cell_list, "calc(1 - min(abs(#{$i} - var(--cell--#{$col}-#{$row})), 1))")
        }
      }
      $row_list: append($row_list, "calc(max( #{implode($cell_list, ',')}) * calc(var(--enter--#{$row})))" );
    }
    $v: "max(#{implode($row_list, ',')})";
    
    --is-used-#{$i}: max(#{implode($row_list, ',')});
  }
  
}

*, *::before, *::after {
  box-sizing: border-box;
}

#board{
  display: grid;
  width: calc(var(--u) * 17);
  gap: calc(var(--u) * 0.5);
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0;
  margin: 0 auto;
}

/* ************* */
/*     cells     */
/* ************* */
.cell, .char{
  display: block;
  float:left;
}

.cell{
  opacity:0.5;
  aspect-ratio: 1 / 1;
  position:relative;
  overflow: hidden;
  transition:0.25s all;
  -webkit-user-select: none; 
  -moz-user-select: none;    
  user-select: none;     
  scroll-timeline-axis: block;

  --is-correct: calc(1 - min(abs(var(--correct-val) - var(--keyboard-val)), 1));
  --is-inrange: max(
    calc(1 - min(abs(var(--inrange-1-val) - var(--keyboard-val)), 1)),
    calc(1 - min(abs(var(--inrange-2-val) - var(--keyboard-val)), 1)),
    calc(1 - min(abs(var(--inrange-3-val) - var(--keyboard-val)), 1)),
    calc(1 - min(abs(var(--inrange-4-val) - var(--keyboard-val)), 1))
  );
  --is-empty: calc( 1 - clamp(0, var(--keyboard-val), 1) );
  --is-incorrect: calc(
    1 - max(
      var(--is-correct), 
      var(--is-inrange), 
      calc( 1 - clamp(0, var(--keyboard-val), 1) )
    )
  );
}

.cell--row-0{
  opacity:1;
}

.char{
  border: 2px solid var(--border);
  display: block;
  width: 100%;
  aspect-ratio: 1;
  align-content: center;
  text-align: center;
  text-transform: uppercase;
  font-size:  calc(var(--u) * 1.5);
  font-weight: 700;
}

// After the user hits enter on the row, update the colors on the cells
@container style(--row-entered: 1){

  @container style(--is-incorrect: 1){    
    .char {
      border: var(--grey);
      background: var(--grey);
    }
  }

  @container style(--is-inrange: 1){    
    .char {
      border: var(--yellow);
      background: var(--yellow);
    }
  }

  @container style(--is-correct: 1){    
    .char {
      border: var(--green);
      background: var(--green);
    }
  }
}

@for $col from 0 through 4 { 
  .cell--col-#{$col}{
    --correct-val: var(--letter-#{$col});
    --col: #{$col};
    $count : 1;
    @for $v from 0 through 4 { 
      @if $v != $col{
        --inrange-#{$count}-val: var(--letter-#{$v});
        $count: $count+1;
      }
    }
  }
}
@for $row from 0 through 5 {
  .cell--row-#{$row}{
    --row-entered: var(--enter--#{$row});
  }
}

/* 
  Create the variables and timelines that set/store the value of each cell. 
  For example --cell--3-2 being equal to 4 means the cell in the third 
  column and second row is 4, which equates to r because it's the 4th key 
  on a qwerty keyboard.

  Likewise, create the variables that store whether or not a user has hit enter 
  on that row. The only possible values are 0 or 1.
*/
@for $row from 0 through 5 {
  @for $col from 0 through 4 { 
    @property --cell--#{$col}-#{$row} { 
      syntax: "<integer>";
      inherits: true;
      initial-value: 0;
    }
    
    @keyframes cell--#{$col}-#{$row}--timeline {
      0%{
        --cell--#{$col}-#{$row}: 0;
      }
      99%{
        --cell--#{$col}-#{$row}: 27;
      }
    }

    #cell--#{$col}-#{$row}{
      scroll-timeline-name:  --cell--#{$col}-#{$row}--scroller;
      --keyboard-val: var(--cell--#{$col}-#{$row});
    }
  }

  // If the user has hit enter on the row
  @property --enter--#{$row} {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
  }
  
  // Transition the value of enter to 1
  @keyframes enter--#{$row}--timeline {
    0%{
      --enter--#{$row}: 0;
    }
    50%{
      --enter--#{$row}: 1;
    }
  }
  #enter--#{$row}{
    scroll-timeline-name: --enter--#{$row}--scroller;
  }
}


.enter-switch{
  height: 1px;
  overflow: hidden;
  scroll-timeline-axis: block;
  visibility: hidden;
}

.enter-switch, .enter-option{
  width:1px;
}

.enter-option{
  height:2px;
}

.enter-option:not(:first-child){
  margin-top: 1px;
}


/* **************** */
/*     keyboard     */
/* **************** */
#keyboards{
  position:relative;
  margin-top: calc(var(--u) * 2);
  height: calc(var(--u) * 7);
  width: 100%;
}

.keyboard{
  position:absolute;
  background: var( --page-bg );
  z-index:0;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#keyboard--0-0{
  z-index:1; // visible by default
}

// There's a separate keyboard for each cell, because each key maps specifically to that cell
// Once someone clicks a letter key for the first cell, show the keyboard for the second cell
// and so on.
@for $row from 0 through 5 {
  @if $row > 0 {
    #keyboard--0-#{$row}{ 
      z-index: unquote("round(up, var(--enter--#{$row - 1}))");
    }
  }
  @for $col from 1 through 5 {
    #keyboard--#{$col}-#{$row}{
      z-index: #{'min(1, round(up, var(--cell--#{$col - 1}-#{$row})/3))'};
    }
  }
}

.key{
  display:inline-block;
  width: calc(var(--u) * 2);
  aspect-ratio: 1;
  border: 1px solid var(--border);
  align-content: center;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size:  calc(var(--u) * 1.25);
  color: var(--text-color);
  margin: calc(var(--u) / 6);
  border-radius: 5px;
  vertical-align: top;
  transition: 0.125s all;

  &.enter{
    font-size: calc(var(--u) * 0.5);
  }
  &.disabled{
    opacity: 0.33;
    pointer-events: none;
  }
  &:hover, &:active{
    background-color: var(--focus);
    border-color: var(--focus);
  }
}

// Invalid or in-range answers
@for $i from 1 through 26 {
  @container style(--is-used-#{$i}: 1){
    .key-#{$i} {
      $color: '';
      @if index($answer, $i) == null {
        $color: '--grey'
      } @else{
        $color: '--yellow';
      }
      background: var(#{$color});
      border: var(#{$color});
    }
  }
}

@keyframes hop{
  0%, 100%{
    transform: translate(0, 0);
  }

  50%{
    transform: translate(0, -15%);
  }
}


// correct answers
@for $row from 0 through 5 {
  @container style(--enter--#{$row}: 1) {
    .cell--row-#{$row}{
      animation: 0.3s cubic-bezier(.4,.4,.8,.5) calc(var(--col) * 0.075s) 1 normal both running hop;
    }
    .cell--row-#{$row + 1}{
      opacity: 1;
    }
    @for $col from 0 through 4 {
      @container style(--cell--#{$col}-#{$row}: var(--letter-#{$col})) {
        .key-#{nth($answer, ($col + 1))}{
          background: var(--green);
          border-color: var(--green);
        }
      }
    }
  }
}


@keyframes dialogIn{
  0%{
    opacity:0;
    top:100vh;
  }

  100%{
    opacity: 1;
    top:50%;
  }
}

dialog {
  top:0;
  opacity: 0;
  background: #fff;
  position: fixed;
  width:clamp(300px, 90%, 600px);
  min-width: 300px;
  text-align: center;
  transform: translate(0, -50%);
  z-index: 2;
  padding: calc(var(--u) * 3) calc(var(--u) * 1);
  color: #333;
  border-width: 5px;
  border-radius: 5px;
  h1{
    font-size: 2rem;
    padding:0;
    margin:0;
  }
  p{
    padding:0;
    margin:0;
  }
}

@container style(--is-gameover: 1) {
  #keyboards{
    opacity:0.5;
    pointer-events: none;
  }

  #is-gameover{
    animation: 0.5s ease-in-out 0.5s 1 normal both running dialogIn;
  }
}

@container style(--is-winner: 1) {
  #keyboards{
    opacity:0.5;
    pointer-events: none;
  }
  #is-winner{
    animation: 0.5s ease-in-out 0.5s 1 normal both running dialogIn;
  }
}
#support {
  animation: none; 
}
@supports (not (view-timeline: --custom_name)) {
  #keyboards{
    pointer-events: none;
  }
  #support {
    animation: 0.5s ease-in-out 0.5s 1 normal both running dialogIn;
  }
}