import Inferno from 'inferno'

const BLOCK_SIZE  = 35
const BORDER_SIZE = 2
const MARGINS     = [10, 10, 10, 10]

const Piece = ({ color, blocks, x, y })=>
  <div>
    {
      blocks.map(([bx, by], i)=> {
        const style = {
          backgroundColor: color,
          top:  MARGINS[0] + BORDER_SIZE+ (y+by)*BLOCK_SIZE,
          left: MARGINS[3] + BORDER_SIZE+ (x+bx)*BLOCK_SIZE
        }
        return <div className="block" key={i} style={style}/>
      })
    }
  </div>


const Tetris = ({ grid, currentPiece })=> {
  const WIDTH  = grid.length
  const HEIGHT = grid[0].length

  return (
    <div className="board">
      <style>
        {`
          html, body, * {
            padding: 0;
            margin:  0;
            // box-sizing: border-box;
          }
          .board {
            margin: ${MARGINS.map(m=> m+"px").join(" ")};
            width:  ${(WIDTH  * BLOCK_SIZE)+BORDER_SIZE}px;
            height: ${(HEIGHT * BLOCK_SIZE)+BORDER_SIZE}px;
            border: ${BORDER_SIZE}px solid #888;
            display: inline-block;
          }

          .info {
            position: absolute;
            display: inline-block;
            padding: 10px;
          }

          .block {
            position: absolute;
            width:  ${BLOCK_SIZE-BORDER_SIZE}px;
            height: ${BLOCK_SIZE-BORDER_SIZE}px;
            border: ${BORDER_SIZE}px solid #333;
            z-index: 20;
          }

          .block.empty {
            border: ${BORDER_SIZE}px solid #EEE;
            z-index: 10;
          }
        `}
      </style>

      {
        grid.map((column, i)=> {
          return column.map((blockColor, j)=> {
            // if (blockColor) {
              const style = {
                backgroundColor: blockColor ? blockColor : "initial",
                top:  MARGINS[0] + BORDER_SIZE+ j*BLOCK_SIZE,
                left: MARGINS[3] + BORDER_SIZE+ i*BLOCK_SIZE
              }

              return <div key={i+"-"+j}
                          className={"block" + (!blockColor ? " empty" : "")}
                          style={style} />
            // }
          })
        })
      }

      <Piece {...currentPiece}/>
    </div>
  );
}

const zerosForScore = (score)=> {
  const SCORE_LENGTH = 9
  const zerosLength  = SCORE_LENGTH - (score && score.toString().length)

  return new Array(zerosLength+1).join("0")
}


const App = ({grid, currentPiece, nextPiece, score, speed})=>
  <div>
    <Tetris {...{grid, currentPiece}} />

    <div className="info">
      <h1 style={{fontFamily: "monospace", color: "#333"}}>
        <span style={{color: "#CCC"}}>
          {zerosForScore(score)}
        </span>

        {score && score || ""}
      </h1>

      <div style={{position: "relative", margin: "0px 25px"}}>
        <Piece {...nextPiece} x={0} y={0}/>
      </div>
    </div>
  </div>


export default App

@@ -45,17 +45,17 @@
 IZE  = 3
-5
+2
 %0Aconst B
@@ -275,34 +275,8 @@
 op: 
- MARGINS%5B0%5D + BORDER_SIZE+
  (y+
@@ -310,34 +310,8 @@
 eft:
- MARGINS%5B3%5D + BORDER_SIZE+
  (x+
@@ -459,16 +459,23 @@
 entPiece
+, score
  %7D)=%3E %7B%0A
@@ -739,16 +739,281 @@
     
-.board %7B
+html, body %7B%0A            height: 100%25;%0A            background-color: #ffd5d5;%0A            background-image: linear-gradient(#ffd5d5, #b3aeff);%0A          %7D%0A%0A          #root%3Ediv %7B%0A            text-align: center;%0A          %7D%0A%0A          .board %7B%0A            position: relative;
 %0A   
@@ -1234,12 +1234,26 @@
 lid 
-#888
+rgba(0, 0, 0, 0.3)
 ;%0A  
@@ -1277,32 +1277,85 @@
 : inline-block;%0A
+            background-color: rgba(34, 34, 34, 0.7);%0A
           %7D%0A%0A   
@@ -1784,12 +1784,27 @@
 lid 
-#EEE
+rgba(0, 0, 0, 0.06)
 ;%0A  
@@ -2080,17 +2080,12 @@
 r : 
-%22initial%22
+null
 ,%0A  
@@ -2108,33 +2108,8 @@
 p:  
-MARGINS%5B0%5D + BORDER_SIZE+
  j*B
@@ -2145,33 +2145,8 @@
 ft: 
-MARGINS%5B3%5D + BORDER_SIZE+
  i*B
@@ -2721,16 +2721,23 @@
 entPiece
+, score
 %7D%7D /%3E%0A%0A 
@@ -2856,12 +2856,27 @@
 r: %22
-#CCC
+rgba(0, 0, 0, 0.15)
 %22%7D%7D%3E

Update appearance.