#!/usr/bin/env ruby
# generates the HTML for the random dice button

output = "<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<!-- This file is generated by scripts/generate_dice_roll_html.rb. Don't try to edit directly -->
<!-- %1$@ should be replaced with the button background color -->
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->

<html>
<head>
    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no\">
    <style>
      body {
      	background-color: rgba(0, 0, 0, 0);
      }

      #container {
      	position: absolute;
      	left: 8px;
      	top: 8px;
      	height: 28px;
      	width: 28px;
      	padding: 0 !important;
      	perspective: 1000px;
      	-webkit-perspective: 1000px;
      }

      #dice {
      	cursor: pointer;
      	position: absolute;
      	transform-style: preserve-3d;
      	height: 100%;
      	width: 100%;
      	-webkit-transform: translateZ(-19px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      }

      #dice > div {
      	backface-visibility: hidden;
      	height: 28px;
      	width: 28px;
      	position: absolute;
      	background: #FFFFFF;
      	border-radius: 4px;
      }

      #dice > div > span { /*die dot styling */
      	position: absolute;
      	background: #%1$@;
      	height: 6px;
      	width: 6px;
      	border-radius: 50%;
      	-webkit-transform: translate3d(-50%, -50%, 0);
      	backface-visibility: hidden;
      }

      .one {
      	-webkit-transform: rotateY(0deg) translateZ(11px);
      }

      .two {
      	-webkit-transform: rotateX(180deg) translateZ(11px);
      }

      .three {
      	-webkit-transform: rotateY(90deg) translateZ(11px);
      }

      .four {
      	-webkit-transform: rotateY(-90deg) translateZ(11px);
      }

      .five {
      	-webkit-transform: rotateX(90deg) translateZ(11px);
      }

      .six {
      	-webkit-transform: rotateX(-90deg) translateZ(11px);
      }

    	.one span, .three span:nth-child(2), .five span:nth-child(5) {
    		top: 50%;
    		left: 50%;
    	}

    	.two span:nth-child(1), .three span:nth-child(1), .four span:nth-child(1), .five span:nth-child(1), .six span:nth-child(1) {
    		top: 25%;
    		left: 25%;
    	}

    	.two span:nth-child(2), .three span:nth-child(3), .four span:nth-child(4), .five span:nth-child(4), .six span:nth-child(6) {
    		top: 75%;
    		left: 75%;
    	}

    	.four span:nth-child(2), .five span:nth-child(2), .six span:nth-child(2) {
    		top: 25%;
    		left: 75%;
    	}

    	.four span:nth-child(3), .five span:nth-child(3), .six span:nth-child(5)  {
    		top: 75%;
    		left: 25%;
    	}

    	.six span:nth-child(3) {
    		top: 50%;
    		left: 25%;
    	}   

    	.six span:nth-child(4) {
    		top: 50%;
    		left: 75%;
    	}
"

rx = [   0,   0,   0,   0, -90,  90]
ry = [   0, 180, -90,  90,   0,   0]
rz = 0
tz = -19

mxes = [1, 1, -1, -1]
myes = [1, -1, -1, 1]

for i in 0..5
  side = i+1
    output << "
        #dice.rolled-#{side} {
            -webkit-transform: translateZ(#{tz[i]}px) rotateX(#{rx[i]}deg) rotateY(#{ry[i]}deg) rotateZ(#{rz}deg);
        }"
  for j in 0..5
    next if i == j
    to_side = j+1
    for v in 0..3
      mx = mxes[v]
      my = myes[v]
      variant = v + 1
      output << "

        #dice.roll-#{side}-#{to_side}-#{variant} {
            -webkit-animation: roll-keyframes-#{side}-#{to_side}-#{variant} 1s 1 ease-in-out forwards;
        }

        @-webkit-keyframes roll-keyframes-#{side}-#{to_side}-#{variant} {
            0% {
            	-webkit-transform: translateZ(#{tz}px) rotateX(#{rx[i]}deg) rotateY(#{ry[i]}deg) rotateZ(#{rz}deg);
            }
            80% {
              -webkit-transform: translateZ(-500px) rotateX(#{mx*360 + rx[j]}deg) rotateY(#{my*360 + ry[j]}deg) rotateZ(#{rz}deg);
            }
            100% {
            	-webkit-transform: translateZ(#{tz}px) rotateX(#{mx*360 + rx[j]}deg) rotateY(#{my*360 + ry[j]}deg) rotateZ(#{rz}deg);
            }
        }"
    # 20% {
    #   -webkit-transform: translateZ(-125px) rotateX(#{mx*90 + rx[j]}deg) rotateY(#{my*90 + ry[j]}deg) rotateZ(#{rz}deg);
    # }
    # 40% {
    #   -webkit-transform: translateZ(-250px) rotateX(#{mx*180 + rx[j]}deg) rotateY(#{my*180 + ry[j]}deg) rotateZ(#{rz}deg);
    # }
    # 60% {
    #   -webkit-transform: translateZ(-375px) rotateX(#{mx*270 + rx[j]}deg) rotateY(#{my*270 + ry[j]}deg) rotateZ(#{rz}deg);
    # }
    end

  end
end

output << "
  </style>
</head>
<body>
	<div id=\"container\">
		<div id=\"dice\" class=\"rolled-1\">
			<div class=\"one\">
				<span></span>
			</div>
			<div class=\"two\">
				<span></span>
				<span></span>
			</div>
			<div class=\"three\">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class=\"four\">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class=\"five\">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class=\"six\">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</div>
</body>
"

puts output