{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# [Julia Tetris](https://github.com/djsegal/Tetris.jl)\n",
    "\n",
    "<span class=\"js-load-message cs-loading\">This should only take a minute.</span>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "cur_script = \"\"\"\n",
    "    <style class=\"js-load-remove-tag\">\n",
    "        .cs-loading:after {\n",
    "            overflow: hidden;\n",
    "            display: inline-block;\n",
    "            vertical-align: bottom;\n",
    "            -webkit-animation: cs-ellipsis steps(3,end) 3250ms infinite;      \n",
    "            animation: cs-ellipsis steps(3,end) 3250ms infinite;\n",
    "            content: \"\\\\2026\";\n",
    "            width: 0px;\n",
    "        }\n",
    "        @keyframes cs-ellipsis { to { width: 0.9em; } }\n",
    "        @-webkit-keyframes cs-ellipsis { to { width: 0.9em; } }\n",
    "    </style>\n",
    "\n",
    "    <script class=\"js-load-remove-tag\">\n",
    "      \\$(\".js-load-remove-tag\").parent(\".output_subarea\").css(\"padding\", \"0\");\n",
    "    </script>\n",
    "\"\"\"\n",
    "\n",
    "display(HTML(cur_script))\n",
    "\n",
    "using Suppressor\n",
    "\n",
    "@suppress using Tetris\n",
    "@suppress Tetris.setup()\n",
    "\n",
    "cur_script = \"\"\"\n",
    "    <script class=\"js-load-remove-tag\">\n",
    "        \\$(\".js-load-message\").remove();\n",
    "        \\$(\"#appmode-busy\").css(\"opacity\",\"0\");\n",
    "        \\$('pre:contains(\"WebIO: setting up\")').parent(\".output_subarea\").remove();\n",
    "        \\$(\".js-load-remove-tag\").parent(\".output_subarea\").remove();\n",
    "    </script>\n",
    "\"\"\"\n",
    "\n",
    "display(HTML(cur_script))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "------\n",
    "\n",
    "### Controls are:\n",
    "\n",
    "<div style=\"display: flex; margin-top: 8px;\">\n",
    "    <table style=\"margin: auto;\">\n",
    "        <thead>\n",
    "            <tr>\n",
    "                <th style=\"text-align: center; line-height: 1.5;\"> key </th>\n",
    "                <th style=\"text-align: center; line-height: 1.5;\"> action </th>\n",
    "            </tr>\n",
    "        </thead>\n",
    "        <tbody>\n",
    "            <tr>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> &nbsp;&nbsp;⬅️&nbsp;&nbsp; </td>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> slide left </td>\n",
    "            </tr>\n",
    "            <tr>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> ➡️ </td>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> slide right </td>\n",
    "            </tr>\n",
    "            <tr>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> ⬆️ </td>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> rotate right </td>\n",
    "            </tr>\n",
    "            <tr>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> ⬇️ </td>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> soft drop </td>\n",
    "            </tr>\n",
    "        </tbody>\n",
    "    </table>\n",
    "    <table style=\"margin: auto;\">\n",
    "        <thead>\n",
    "            <tr>\n",
    "                <th style=\"text-align: center; line-height: 1.5;\"> key </th>\n",
    "                <th style=\"text-align: center; line-height: 1.5;\"> action </th>\n",
    "            </tr>\n",
    "        </thead>\n",
    "        <tbody>\n",
    "            <tr>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> <code>M</code> </td>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> play music </td>\n",
    "            </tr>\n",
    "            <tr>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> <code>C</code> </td>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> hold piece </td>\n",
    "            </tr>\n",
    "            <tr>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> <code>Z</code> </td>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> rotate left </td>\n",
    "            </tr>\n",
    "            <tr>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> <code>SPACE</code> </td>\n",
    "                <td style=\"text-align: center; line-height: 2.0;\"> hard drop </td>\n",
    "            </tr>\n",
    "        </tbody>\n",
    "    </table>\n",
    "</div>"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Julia 0.6.2",
   "language": "julia",
   "name": "julia-0.6"
  },
  "language_info": {
   "file_extension": ".jl",
   "mimetype": "application/julia",
   "name": "julia",
   "version": "0.6.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}