form
  - var tile = 42;
  while tile > 0
    each player in [1,2]
      label(for="rd-"+player+"-"+tile, class="lb") #{tile}
      input(type="radio", id="rd-"+player+"-"+tile, name="rd"+tile, class="rd")
    - tile--;
  #board
    div#foot-left.foot
    div#foot-right.foot
    div#tiles
      - var tile = 1;
      while tile < 43
        div(id="tile"+(tile++), class="tile")
      each player in [1,2]
        div.labels(id="labels"+player)
          - var label = 1
          while label < 43
            label(for="rd-"+player+"-"+label, id="lb-"+player+"-"+label, class="lb lb-col-"+(label%7))
            - label++;
          div.hand(id="hand"+player)
            div.finger-2.finger
            div.finger-3.finger
            div.finger-4.finger
            div.finger-5.finger
            div.piece
            div.arm.finger
            div.finger-1.finger
            div.fist.finger
            div.shirt
  // everything beyond this point is just for decoration
  div#table
    div#leg-left.leg
    div#leg-right.leg
    div.pieces
      div.piece#piece-1
      div.piece#piece-2
      div.piece#piece-3
      div.piece#piece-4
      div.piece#piece-5
    div.pieces#pieces-2
      div.piece#piece-1b
      div.piece#piece-2b
      div.piece#piece-3b
  div#congratulations.popup
    h1 Congratulations!
    h2 won the game!
    input(type="reset", value="Start again!")
  div#draw.popup
    h1 You draw!
    h2 No player won the game
    input(type="reset", value="Start again!")
View Compiled
// variables with colors
$blue: #3355ff;
$brown: #cc8844;
$colors: #D01F3C, #FFFF33;

// for testing purposes comment these two rules 
label.lb, input.rd { display: none; }

// this is the board, it includes functional and decorative styling
#board {
  position: absolute;
  display: inline-block;
  bottom: 150px;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  .foot {
    position:absolute;
    bottom: -40px;
    left: -11px;
    height: 60px;
    width: 14px;
    background: linear-gradient(darken($blue,10%), darken($blue,18%));
    z-index: 2;
    box-shadow: inset 0 -25px 10px -5px rgba(0,0,0,0.2);
    &#foot-right {
      left: auto;
      right: -11px;
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
      bottom: 0px;
      left: -4px;
      width: 22px;
      height: 12px;
      background: darken($blue, 20%);
      border-radius: 4px 4px 0 0;
    }
  }
  #tiles {
    width: 350px;
    height: 300px;
    //border: 10px solid darken($blue, 10%);
    box-shadow: 0 3px 0 0 darken($blue, 10%), 3px 3px 0 3px darken($blue, 10%), -3px 3px 0 3px darken($blue, 10%);
    border-radius: 5px;
    .tile {
      /*width: calc(100% / 7);
      height: 0;
      padding-top: calc(100% / 7);*/
      width: 50px;
      height: 50px;
      line-height: 50px;
      float: left;
      position: relative;
      overflow: hidden;
      text-align: center;
      &::before {
        content:"";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200%;
        height: 200%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        border-radius: 100%;
        box-shadow: inset 0 0 0 30px $blue;
      }
    }
    .labels {
      position: absolute;
      z-index: 100;
      width: 100%;
      height: 100%;
      bottom: 0;
    }
    .lb {
      position: absolute;
      display: none;
      width: 50px;
      height: 450px; /* fallback value */
      height: 100vmax;
      bottom: 0;
      left: 0;
      cursor: pointer;
      &:hover {
        background: rgba(0,0,0,0);
        @for $i from 0 to 42 {
          &[for$='-#{$i+1}'] {
            ~ .hand {
              bottom: 350px;
              transform: translate3d(50px * floor($i % 7), 0, 0);
            }
          }
        }
        &::before {
          content: "▼";
          position: absolute;
          bottom: 320px;
          left: 50%;
          color: white;
          transform: translate(-50%, 0);
          -webkit-transform: translate(-50%, 0);
          -moz-transform: translate(-50%, 0);
          animation: moveArrow 0.75s infinite;
          animation-timing-function: linear;
        }
      }
      @for $i from 0 to 42 {
        &[for$='-#{$i+1}'] {
          left: 50px * floor($i % 7);
          z-index: 45 - $i;
        }
      }
    }
  }
}

@keyframes moveArrow {
  0% { 
    color: rgba(255,255,255,1);
    transform: translate3d(-50%,0,0) scale(1);
  }
  100% { 
    color: rgba(255,255,255,0);
    transform: translate3d(-50%,20px,0) scale(1.5); 
  }
}

@for $player from 1 through 2 {
  @for $tile from 1 through 42 {
    #rd-#{$player}-#{$tile}:checked ~ #board #tile#{$tile}::before {
      background: nth($colors, $player);  
      box-shadow: inset 0 0 0 30px #3355ff, inset 0px 1px 3px 31px rgba(0,0,0,0.4)
    }
  }
}

@for $i from 42 through 36 {
  #board #tiles label[id$="-#{$i}"] {
    display: block;
  }
}


// this changes the color of the piece that is held by the hand 
// this code was posted by juzraai on this question: https://stackoverflow.com/a/51810018/3695983
// function to repeat string:
@function r($string, $times) { 
  $result: "";
  @if $times >= 1 {
    @for $i from 1 through $times {
      $result: $result + $string;
    }
  }
  @return $result;
}

// generate rules:
@for $n from 1 through 43 {
  .rd:checked {
    @if ($n % 2 == 0) {
      $s: r(' ~ &', $n - 1);
      $s: '&' + $s;
      #{$s} {
        ~ #board {
          .hand .piece {
            //background: nth($colors, 2);
          }
          #labels1 { z-index: -1; }
          #labels2 { z-index: 100; }
        }
        ~ #congratulations h2::before {
          content: "Player 2 ";
        }
      }
    } @elseif ($n % 2 == 1) {
      $s: r(' ~ &', $n - 1);
      $s: '&' + $s;
      #{$s} {
        ~ #board {
          .hand .piece {
            //background: nth($colors, 1);
          }
          #labels1 { z-index: 100; }
          #labels2 { z-index: -1; }
        }
        ~ #congratulations h2::before {
          content: "Player 1 ";
        }
      }
    }
  }
}
// -- ////////

@for $i from 42 through 8 {
  [name="rd#{$i}"]:checked ~ #board #tiles [for$="-#{$i - 7}"] {
    display: block;
  }
} 

@for $i from 1 through 7 {
  [name="rd#{$i}"]:checked ~ #board #tiles .lb-col-#{$i % 7} {
    display: none !important;
  }
}

[name=rd7]:checked ~ [name=rd6]:checked ~ [name=rd5]:checked ~ [name=rd4]:checked ~ [name=rd3]:checked ~ [name=rd2]:checked ~ [name=rd1]:checked ~ #draw {
  display: block;
}

// this is to check if the user won or not
@each $player in (1,2) {
  @each $row in (42,35,28,21,14,7) {
    @for $i from $row to $row - 4 {
      #rd-#{$player}-#{$i}:checked ~ #rd-#{$player}-#{$i - 1}:checked ~ #rd-#{$player}-#{$i - 2}:checked ~ #rd-#{$player}-#{$i - 3}:checked {
        ~ #congratulations { display: block; }
        ~ #draw { display: none; }
      } 
    }
  }
  @for $column from 42 through 36 {
    @each $i in ($column, $column - 7, $column - 14) {
      #rd-#{$player}-#{$i}:checked ~ #rd-#{$player}-#{$i - 7}:checked ~ #rd-#{$player}-#{$i - 14}:checked ~ #rd-#{$player}-#{$i - 21}:checked {
        ~ #congratulations { display: block; }
        ~ #draw { display: none; }
      } 
    }
  }
  // there has to be a better way for this. TODO: make it nicer
  $diagonals: ((39,31,23,15),(40,32,24,16,8),(41,33,25,17,9,1),(42,34,26,18,10,2),(35,27,19,11,3),(28,20,12,4),(22,16,10,4),(29,23,17,11,5),(36,30,24,18,12,6),(37,31,25,19,13,7),(38,32,26,20,14),(39,33,27,21));
  @each $arr in $diagonals {
    @for $i from 1 through length($arr) - 3 {
      #rd-#{$player}-#{nth($arr, $i)}:checked ~ #rd-#{$player}-#{nth($arr, $i + 1)}:checked ~ #rd-#{$player}-#{nth($arr, $i + 2)}:checked ~ #rd-#{$player}-#{nth($arr, $i + 3)}:checked {
        ~ #congratulations { display: block; }
        ~ #draw { display: none; }
      }
    }
  }
}

// everytihng beyond this point is just for decoration
html, body { 
  background: #d5d5d5; 
  overflow: hidden;
}
#table {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  height: 60px;
  //background-image: url(https://i.imgur.com/pgDW5Ux.jpg);
  background-color: $brown;
  background-color: linear-gradient($brown, darken($brown, 10%));
  background-position: center center;
  .leg {
    position: absolute; 
    bottom: -50px;
    left: 40px;
    height: 50px;
    width: 75px;
    background: darken($brown, 5%);
    box-shadow: inset 0 6px 6px rgba(0,0,0,0.1);
    &#leg-right {
      left: auto;
      right: 40px;
    }
  }
  .pieces {
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translate(230px, 0);
    .piece {
      width: 50px;
      height: 8px;
      background: nth($colors, 1);
      background: linear-gradient(nth($colors,1), darken(nth($colors,1), 3%));
      &#piece-2 { transform: translate(2px,0); }
      &#piece-3 { transform: translate(-1px,0); }
    }
    &#pieces-2 {
      transform: translate(-260px, 0);
      top: -24px;
      .piece {
        background: nth($colors, 2);
        background: linear-gradient(nth($colors,2), darken(nth($colors,2), 12%));
        &#piece-2b { transform: translate(1px,0); }
      }
    }
  }
}
.hand {
  position: absolute;
  width:150px;
  bottom: 100vmax;
  //bottom: 400px;
  transition: all 0.5s;
  pointer-events: none;
  z-index: -1;
  transform: translate3d(200px, 0, 0);
  .piece {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 46px;
    width: 46px;
    border-radius:100%;
    background: nth($colors,1);
  }
  .finger {
    border-radius: 40px;
    background-color: darken(#eebb99, 5%);
    width: 30px;
    height: 100px;
    position: absolute;
    bottom: 35px;
    &.finger-1 {
      width: 37px;
      left: 5px;
      height: 130px;
      background-color: #eebb99;
    }
    &.finger-2 {
      left: -3px;
      bottom: 25px;
      height: 130px;
    }
    &.finger-3 {
      left: 29px;
      bottom: 30px;
    }
    &.finger-4 {
      left: 60px;
      height: 70px;
      bottom: 40px;
    }
    &.finger-5 {
      left: 91px;
      height: 100px;
      bottom: 45px;
    }
    &.fist {
      width: 124px;
      left: -3px;
      background-color: #eebb99;
      bottom: 90px;
    }
    &.arm {
      width: 70px;
      left: 24px;
      bottom: 150px;
      background-color: #eebb99;
    }
  }
  .shirt {
    position: absolute;
    bottom: 200px;
    background: white;
    width: 100px;
    left: 9px;
    height: 100vmax;
  }
  &#hand2 {
    .shirt {
      background: #bef;
    }
    .piece {
      background: nth($colors, 2);
    }
  }
}

#congratulations, #draw {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  text-align: center;
  color: white;
  font-family: arial, verdana, sans-serif;
  input {
    background: $blue;
    padding: 12px 32px;
    color: white;
    font-size: 18px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
  }
}
View Compiled
// No JavaScript code!

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.