output.html

<!--
  Copyright 2020 Kaggle Inc

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Kaggle Simulation Player</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"
      crossorigin="anonymous"
    />
    <style type="text/css">
      html,
      body {
        height: 100%;
        font-family: sans-serif;
        margin: 0px;
      }
      canvas {
        /* image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-crisp-edges;
        image-rendering: pixelated;
        image-rendering: crisp-edges; */
      }
    </style>
    <script src="https://unpkg.com/preact@10.0.1/dist/preact.umd.js"></script>
    <script src="https://unpkg.com/preact@10.0.1/hooks/dist/hooks.umd.js"></script>
    <script src="https://unpkg.com/htm@2.2.1/dist/htm.umd.js"></script>
    <script>
      // Polyfill for Styled Components
      window.React = {
        ...preact,
        createElement: preact.h,
        PropTypes: { func: {} },
      };
    </script>
    <script src="https://unpkg.com/styled-components@3.5.0-0/dist/styled-components.min.js"></script>
  </head>
  <body>
    <script>
      
window.kaggle = {
  "debug": false,
  "playing": true,
  "step": 0,
  "controls": true,
  "environment": {
    "id": "2dcd14db-d62a-11ed-a1b7-d8808350540a",
    "name": "connectx",
    "title": "ConnectX",
    "description": "Classic Connect in a row but configurable.",
    "version": "1.0.1",
    "configuration": {
      "episodeSteps": 1000,
      "actTimeout": 2,
      "runTimeout": 1200,
      "columns": 7,
      "rows": 6,
      "inarow": 4,
      "agentTimeout": 60,
      "timeout": 2
    },
    "specification": {
      "action": {
        "description": "Column to drop a checker onto the board.",
        "type": "integer",
        "minimum": 0,
        "default": 0
      },
      "agents": [
        2
      ],
      "configuration": {
        "episodeSteps": {
          "description": "Maximum number of steps in the episode.",
          "type": "integer",
          "minimum": 1,
          "default": 1000
        },
        "actTimeout": {
          "description": "Maximum runtime (seconds) to obtain an action from an agent.",
          "type": "number",
          "minimum": 0,
          "default": 2
        },
        "runTimeout": {
          "description": "Maximum runtime (seconds) of an episode (not necessarily DONE).",
          "type": "number",
          "minimum": 0,
          "default": 1200
        },
        "columns": {
          "description": "The number of columns on the board",
          "type": "integer",
          "default": 7,
          "minimum": 1
        },
        "rows": {
          "description": "The number of rows on the board",
          "type": "integer",
          "default": 6,
          "minimum": 1
        },
        "inarow": {
          "description": "The number of checkers in a row required to win.",
          "type": "integer",
          "default": 4,
          "minimum": 1
        },
        "agentTimeout": {
          "description": "Obsolete field kept for backwards compatibility, please use observation.remainingOverageTime.",
          "type": "number",
          "minimum": 0,
          "default": 60
        },
        "timeout": {
          "description": "Obsolete copy of actTimeout maintained for backwards compatibility. May be removed in the future.",
          "type": "integer",
          "default": 2,
          "minimum": 0
        }
      },
      "info": {},
      "observation": {
        "remainingOverageTime": {
          "description": "Total remaining banked time (seconds) that can be used in excess of per-step actTimeouts -- agent is disqualified with TIMEOUT status when this drops below 0.",
          "shared": false,
          "type": "number",
          "minimum": 0,
          "default": 60
        },
        "step": {
          "description": "Current step within the episode.",
          "type": "integer",
          "shared": true,
          "minimum": 0,
          "default": 0
        },
        "board": {
          "description": "Serialized grid (rows x columns). 0 = Empty, 1 = P1, 2 = P2",
          "type": "array",
          "shared": true,
          "default": []
        },
        "mark": {
          "defaults": [
            1,
            2
          ],
          "description": "Which checkers are the agents.",
          "enum": [
            1,
            2
          ]
        }
      },
      "reward": {
        "description": "-1 = Lost, 0 = Draw/Ongoing, 1 = Won",
        "enum": [
          -1,
          0,
          1
        ],
        "default": 0,
        "type": [
          "number",
          "null"
        ]
      }
    },
    "steps": [
      [
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 60,
            "step": 0,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0
            ],
            "mark": 1
          },
          "status": "ACTIVE"
        },
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 60,
            "mark": 2
          },
          "status": "INACTIVE"
        }
      ],
      [
        {
          "action": 3,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 54.376569,
            "step": 1,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0
            ],
            "mark": 1
          },
          "status": "INACTIVE"
        },
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 60,
            "mark": 2
          },
          "status": "ACTIVE"
        }
      ],
      [
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 54.376569,
            "step": 2,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              2,
              0,
              0
            ],
            "mark": 1
          },
          "status": "ACTIVE"
        },
        {
          "action": 4,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 58.926034,
            "mark": 2
          },
          "status": "INACTIVE"
        }
      ],
      [
        {
          "action": 4,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 53.308548,
            "step": 3,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              1,
              2,
              0,
              0
            ],
            "mark": 1
          },
          "status": "INACTIVE"
        },
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 58.926034,
            "mark": 2
          },
          "status": "ACTIVE"
        }
      ],
      [
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 53.308548,
            "step": 4,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              2,
              1,
              2,
              0,
              0
            ],
            "mark": 1
          },
          "status": "ACTIVE"
        },
        {
          "action": 2,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 57.791435,
            "mark": 2
          },
          "status": "INACTIVE"
        }
      ],
      [
        {
          "action": 4,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 52.086123,
            "step": 5,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              2,
              1,
              2,
              0,
              0
            ],
            "mark": 1
          },
          "status": "INACTIVE"
        },
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 57.791435,
            "mark": 2
          },
          "status": "ACTIVE"
        }
      ],
      [
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 52.086123,
            "step": 6,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "ACTIVE"
        },
        {
          "action": 6,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 56.575608,
            "mark": 2
          },
          "status": "INACTIVE"
        }
      ],
      [
        {
          "action": 4,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 51.066409,
            "step": 7,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "INACTIVE"
        },
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 56.575608,
            "mark": 2
          },
          "status": "ACTIVE"
        }
      ],
      [
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 51.066409,
            "step": 8,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              2,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "ACTIVE"
        },
        {
          "action": 4,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 55.693358,
            "mark": 2
          },
          "status": "INACTIVE"
        }
      ],
      [
        {
          "action": 3,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 50.020046,
            "step": 9,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              2,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              1,
              1,
              0,
              0,
              0,
              0,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "INACTIVE"
        },
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 55.693358,
            "mark": 2
          },
          "status": "ACTIVE"
        }
      ],
      [
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 50.020046,
            "step": 10,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              2,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              1,
              1,
              0,
              2,
              0,
              0,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "ACTIVE"
        },
        {
          "action": 6,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 54.910501000000004,
            "mark": 2
          },
          "status": "INACTIVE"
        }
      ],
      [
        {
          "action": 1,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 49.424965,
            "step": 11,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              2,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              1,
              1,
              0,
              2,
              0,
              1,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "INACTIVE"
        },
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 54.910501000000004,
            "mark": 2
          },
          "status": "ACTIVE"
        }
      ],
      [
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 49.424965,
            "step": 12,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              2,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              2,
              0,
              0,
              0,
              1,
              1,
              0,
              2,
              0,
              1,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "ACTIVE"
        },
        {
          "action": 6,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 54.37485100000001,
            "mark": 2
          },
          "status": "INACTIVE"
        }
      ],
      [
        {
          "action": 6,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 49.020571000000004,
            "step": 13,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              2,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              1,
              0,
              0,
              0,
              0,
              1,
              0,
              2,
              0,
              0,
              0,
              1,
              1,
              0,
              2,
              0,
              1,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "INACTIVE"
        },
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 54.37485100000001,
            "mark": 2
          },
          "status": "ACTIVE"
        }
      ],
      [
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 49.020571000000004,
            "step": 14,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              2,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              1,
              0,
              0,
              0,
              0,
              1,
              0,
              2,
              0,
              2,
              0,
              1,
              1,
              0,
              2,
              0,
              1,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "ACTIVE"
        },
        {
          "action": 1,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 54.002863000000005,
            "mark": 2
          },
          "status": "INACTIVE"
        }
      ],
      [
        {
          "action": 3,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 49.020571000000004,
            "step": 15,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              2,
              0,
              0,
              0,
              0,
              0,
              0,
              1,
              0,
              1,
              0,
              0,
              0,
              1,
              1,
              0,
              2,
              0,
              2,
              0,
              1,
              1,
              0,
              2,
              0,
              1,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "INACTIVE"
        },
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 54.002863000000005,
            "mark": 2
          },
          "status": "ACTIVE"
        }
      ],
      [
        {
          "action": 0,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 49.020571000000004,
            "step": 16,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              2,
              0,
              0,
              0,
              0,
              0,
              2,
              1,
              0,
              1,
              0,
              0,
              0,
              1,
              1,
              0,
              2,
              0,
              2,
              0,
              1,
              1,
              0,
              2,
              0,
              1,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "ACTIVE"
        },
        {
          "action": 3,
          "reward": 0,
          "info": {},
          "observation": {
            "remainingOverageTime": 54.002863000000005,
            "mark": 2
          },
          "status": "INACTIVE"
        }
      ],
      [
        {
          "action": 2,
          "reward": 1,
          "info": {},
          "observation": {
            "remainingOverageTime": 49.020571000000004,
            "step": 17,
            "board": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              2,
              0,
              0,
              0,
              0,
              0,
              2,
              1,
              0,
              1,
              0,
              0,
              0,
              1,
              1,
              0,
              2,
              0,
              2,
              1,
              1,
              1,
              0,
              2,
              0,
              1,
              2,
              1,
              2,
              0,
              2
            ],
            "mark": 1
          },
          "status": "DONE"
        },
        {
          "action": 0,
          "reward": -1,
          "info": {},
          "observation": {
            "remainingOverageTime": 54.002863000000005,
            "mark": 2
          },
          "status": "DONE"
        }
      ]
    ],
    "rewards": [
      1,
      -1
    ],
    "statuses": [
      "DONE",
      "DONE"
    ],
    "schema_version": 1,
    "info": {}
  },
  "logs": [
    [],
    [],
    [
      {
        "duration": 7.623431,
        "stdout": "",
        "stderr": ""
      },
      {}
    ],
    [
      {},
      {
        "duration": 3.073966,
        "stdout": "",
        "stderr": ""
      }
    ],
    [
      {
        "duration": 3.068021,
        "stdout": "",
        "stderr": ""
      },
      {}
    ],
    [
      {},
      {
        "duration": 3.134599,
        "stdout": "",
        "stderr": ""
      }
    ],
    [
      {
        "duration": 3.222425,
        "stdout": "",
        "stderr": ""
      },
      {}
    ],
    [
      {},
      {
        "duration": 3.215827,
        "stdout": "",
        "stderr": ""
      }
    ],
    [
      {
        "duration": 3.019714,
        "stdout": "",
        "stderr": ""
      },
      {}
    ],
    [
      {},
      {
        "duration": 2.88225,
        "stdout": "",
        "stderr": ""
      }
    ],
    [
      {
        "duration": 3.046363,
        "stdout": "",
        "stderr": ""
      },
      {}
    ],
    [
      {},
      {
        "duration": 2.782857,
        "stdout": "",
        "stderr": ""
      }
    ],
    [
      {
        "duration": 2.595081,
        "stdout": "",
        "stderr": ""
      },
      {}
    ],
    [
      {},
      {
        "duration": 2.53565,
        "stdout": "",
        "stderr": ""
      }
    ],
    [
      {
        "duration": 2.404394,
        "stdout": "",
        "stderr": ""
      },
      {}
    ],
    [
      {},
      {
        "duration": 2.371988,
        "stdout": "",
        "stderr": ""
      }
    ],
    [
      {
        "duration": 1.18333,
        "stdout": "",
        "stderr": ""
      },
      {}
    ],
    [
      {},
      {
        "duration": 0.43323,
        "stdout": "",
        "stderr": ""
      }
    ],
    [
      {
        "duration": 0.350224,
        "stdout": "",
        "stderr": ""
      },
      {}
    ]
  ],
  "mode": "html"
};


window.kaggle.renderer = // Copyright 2020 Kaggle Inc
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

function renderer({
  act,
  agents,
  environment,
  frame,
  height = 400,
  interactive,
  isInteractive,
  parent,
  step,
  update,
  width = 400,
}) {
  // Configuration.
  const { rows, columns, inarow } = environment.configuration;

  // Common Dimensions.
  const unit = 8;
  const minCanvasSize = Math.min(height, width);
  const minOffset = minCanvasSize > 400 ? 30 : unit / 2;
  const cellSize = Math.min(
    (width - minOffset * 2) / columns,
    (height - minOffset * 2) / rows
  );
  const cellInset = 0.8;
  const pieceScale = cellSize / 100;
  const xOffset = Math.max(0, (width - cellSize * columns) / 2);
  const yOffset = Math.max(0, (height - cellSize * rows) / 2);

  // Canvas Setup.
  let canvas = parent.querySelector("canvas");
  if (!canvas) {
    canvas = document.createElement("canvas");
    parent.appendChild(canvas);

    if (interactive) {
      canvas.addEventListener("click", evt => {
        if (!isInteractive()) return;
        const rect = evt.target.getBoundingClientRect();
        const col = Math.floor((evt.clientX - rect.left - xOffset) / cellSize);
        if (col >= 0 && col < columns) act(col);
      });
    }
  }
  canvas.style.cursor = isInteractive() ? "pointer" : "default";

  // Character Paths (based on 100x100 tiles).
  const kPath = new Path2D(
    `M78.3,96.5c-0.1,0.4-0.5,0.6-1.1,0.6H64.9c-0.7,0-1.4-0.3-1.9-1l-20.3-26L37,75.5v20.1 c0,0.9-0.5,1.4-1.4,1.4H26c-0.9,0-1.4-0.5-1.4-1.4V3.9c0-0.9,0.5-1.4,1.4-1.4h9.5C36.5,2.5,37,3,37,3.9v56.5l24.3-24.7 c0.6-0.6,1.3-1,1.9-1H76c0.6,0,0.9,0.2,1.1,0.7c0.2,0.6,0.1,1-0.1,1.2l-25.7,25L78,95.1C78.4,95.5,78.5,95.9,78.3,96.5z`
  );
  const goose1Path = new Path2D(
    `M8.8,92.7c-4-18.5,4.7-37.2,20.7-46.2c0,0,2.7-1.4,3.4-1.9c2.2-1.6,3-2.1,3-5c0-5-2.1-7.2-2.1-7.2 c-3.9-3.3-6.3-8.2-6.3-13.7c0-10,8.1-18.1,18.1-18.1s18.1,8.1,18.1,18.1c0,6-1.5,32.7-2.3,38.8l-0.1,1`
  );
  const goose2Path = new Path2D(
    `M27.4,19L8.2,27.6c0,0-7.3,2.9,2.6,5c6.1,1.3,24,5.9,24,5.9l1,0.3`
  );
  const goose3Path = new Path2D(
    `M63.7,99.6C52.3,99.6,43,90.3,43,78.9s9.3-20.7,20.7-20.7c10.6,0,34.4,0.1,35.8,9`
  );

  // Canvas setup and reset.
  let c = canvas.getContext("2d");
  canvas.width = width;
  canvas.height = height;
  c.fillStyle = "#000B2A";
  c.fillRect(0, 0, canvas.width, canvas.height);

  const getRowCol = cell => [Math.floor(cell / columns), cell % columns];

  const getColor = (mark, opacity = 1) => {
    if (mark === 1) return `rgba(0,255,255,${opacity})`;
    if (mark === 2) return `rgba(255,255,255,${opacity})`;
    return "#fff";
  };

  const drawCellCircle = (cell, xFrame = 1, yFrame = 1, radiusOffset = 0) => {
    const [row, col] = getRowCol(cell);
    c.arc(
      xOffset + xFrame * (col * cellSize + cellSize / 2),
      yOffset + yFrame * (row * cellSize + cellSize / 2),
      (cellInset * cellSize) / 2 - radiusOffset,
      2 * Math.PI,
      false
    );
  };

  // Render the pieces.
  const board = environment.steps[step][0].observation.board;

  const drawPiece = mark => {
    // Base Styles.
    const opacity = minCanvasSize < 300 ? 0.6 - minCanvasSize / 1000 : 0.1;
    c.fillStyle = getColor(mark, opacity);
    c.strokeStyle = getColor(mark);
    c.shadowColor = getColor(mark);
    c.shadowBlur = 8 / cellInset;
    c.lineWidth = 1 / cellInset;

    // Outer circle.
    c.save();
    c.beginPath();
    c.arc(50, 50, 50, 2 * Math.PI, false);
    c.closePath();
    c.lineWidth *= 4;
    c.stroke();
    c.fill();
    c.restore();

    // Inner circle.
    c.beginPath();
    c.arc(50, 50, 40, 2 * Math.PI, false);
    c.closePath();
    c.stroke();

    // Kaggle "K".
    if (mark === 1) {
      const scale = 0.54;
      c.save();
      c.translate(23, 23);
      c.scale(scale, scale);
      c.lineWidth /= scale;
      c.shadowBlur /= scale;
      c.stroke(kPath);
      c.restore();
    }

    // Kaggle "Goose".
    if (mark === 2) {
      const scale = 0.6;
      c.save();
      c.translate(24, 28);
      c.scale(scale, scale);
      c.lineWidth /= scale;
      c.shadowBlur /= scale;
      c.stroke(goose1Path);
      c.stroke(goose2Path);
      c.stroke(goose3Path);
      c.beginPath();
      c.arc(38.5, 18.6, 2.7, 0, Math.PI * 2, false);
      c.closePath();
      c.fill();
      c.restore();
    }
  };

  for (let i = 0; i < board.length; i++) {
    const [row, col] = getRowCol(i);
    if (board[i] === 0) continue;
    // Easing In.
    let yFrame = Math.min(
      (columns * Math.pow(frame, 3)) / Math.floor(i / columns),
      1
    );

    if (
      step > 1 &&
      environment.steps[step - 1][0].observation.board[i] === board[i]
    ) {
      yFrame = 1;
    }

    c.save();
    c.translate(
      xOffset + cellSize * col + (cellSize - cellSize * cellInset) / 2,
      yOffset +
        yFrame * (cellSize * row) +
        (cellSize - cellSize * cellInset) / 2
    );
    c.scale(pieceScale * cellInset, pieceScale * cellInset);
    drawPiece(board[i]);
    c.restore();
  }

  // Background Gradient.
  const bgRadius = (Math.min(rows, columns) * cellSize) / 2;
  const bgStyle = c.createRadialGradient(
    xOffset + (cellSize * columns) / 2,
    yOffset + (cellSize * rows) / 2,
    0,
    xOffset + (cellSize * columns) / 2,
    yOffset + (cellSize * rows) / 2,
    bgRadius
  );
  bgStyle.addColorStop(0, "#000B49");
  bgStyle.addColorStop(1, "#000B2A");

  // Render the board overlay.
  c.beginPath();
  c.rect(0, 0, canvas.width, canvas.height);
  c.closePath();
  c.shadowBlur = 0;
  for (let i = 0; i < board.length; i++) {
    drawCellCircle(i);
    c.closePath();
  }
  c.fillStyle = bgStyle;
  c.fill("evenodd");

  // Render the board overlay cell outlines.
  for (let i = 0; i < board.length; i++) {
    c.beginPath();
    drawCellCircle(i);
    c.strokeStyle = "#0361B2";
    c.lineWidth = 1;
    c.stroke();
    c.closePath();
  }

  const drawLine = (fromCell, toCell) => {
    if (frame < 0.5) return;
    const lineFrame = (frame - 0.5) / 0.5;
    const x1 = xOffset + (fromCell % columns) * cellSize + cellSize / 2;
    const x2 =
      x1 +
      lineFrame *
        (xOffset + ((toCell % columns) * cellSize + cellSize / 2) - x1);
    const y1 =
      yOffset + Math.floor(fromCell / columns) * cellSize + cellSize / 2;
    const y2 =
      y1 +
      lineFrame *
        (yOffset + Math.floor(toCell / columns) * cellSize + cellSize / 2 - y1);
    c.beginPath();
    c.lineCap = "round";
    c.lineWidth = 4;
    c.strokeStyle = getColor(board[fromCell]);
    c.shadowBlur = 8;
    c.shadowColor = getColor(board[fromCell]);
    c.moveTo(x1, y1);
    c.lineTo(x2, y2);
    c.stroke();
  };

  // Generate a graph of the board.
  const getCell = (cell, rowOffset, columnOffset) => {
    const row = Math.floor(cell / columns) + rowOffset;
    const col = (cell % columns) + columnOffset;
    if (row < 0 || row >= rows || col < 0 || col >= columns) return -1;
    return col + row * columns;
  };
  const makeNode = cell => {
    const node = { cell, directions: [], value: board[cell] };
    for (let r = -1; r <= 1; r++) {
      for (let c = -1; c <= 1; c++) {
        if (r === 0 && c === 0) continue;
        node.directions.push(getCell(cell, r, c));
      }
    }
    return node;
  };
  const graph = board.map((_, i) => makeNode(i));

  // Check for any wins!
  const getSequence = (node, direction) => {
    const sequence = [node.cell];
    while (sequence.length < inarow) {
      const next = graph[node.directions[direction]];
      if (!next || node.value !== next.value || next.value === 0) return;
      node = next;
      sequence.push(node.cell);
    }
    return sequence;
  };

  // Check all nodes.
  for (let i = 0; i < board.length; i++) {
    // Check all directions (not the most efficient).
    for (let d = 0; d < 8; d++) {
      const seq = getSequence(graph[i], d);
      if (seq) {
        drawLine(seq[0], seq[inarow - 1]);
        i = board.length;
        break;
      }
    }
  }

  // Upgrade the legend.
  if (agents.length && (!agents[0].color || !agents[0].image)) {
    const getPieceImage = mark => {
      const pieceCanvas = document.createElement("canvas");
      parent.appendChild(pieceCanvas);
      pieceCanvas.style.marginLeft = "10000px";
      pieceCanvas.width = 100;
      pieceCanvas.height = 100;
      c = pieceCanvas.getContext("2d");
      c.translate(10, 10);
      c.scale(0.8, 0.8);
      drawPiece(mark);
      const dataUrl = pieceCanvas.toDataURL();
      parent.removeChild(pieceCanvas);
      return dataUrl;
    };

    agents.forEach(agent => {
      agent.color = getColor(agent.index + 1);
      agent.image = getPieceImage(agent.index + 1);
    });
    update({ agents });
  }
};


    </script>
    <script>
      const h = htm.bind(preact.h);
      const { useContext, useEffect, useRef, useState } = preactHooks;
      const styled = window.styled.default;

      const Context = preact.createContext({});

      const Loading = styled.div`
        animation: rotate360 1.1s infinite linear;
        border: 8px solid rgba(255, 255, 255, 0.2);
        border-left-color: #0cb1ed;
        border-radius: 50%;
        height: 40px;
        position: relative;
        transform: translateZ(0);
        width: 40px;

        @keyframes rotate360 {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      `;

      const Logo = styled(
        (props) => h`
        <a href="https://kaggle.com" target="_blank" className=${props.className}>
          <svg width="62px" height="20px" viewBox="0 0 62 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g fill="#1EBEFF" fill-rule="nonzero">
              <path d="M10.2,17.8c0,0.1-0.1,0.1-0.2,0.1H7.7c-0.1,0-0.3-0.1-0.4-0.2l-3.8-4.9l-1.1,1v3.8 c0,0.2-0.1,0.3-0.3,0.3H0.3c-0.2,0-0.3-0.1-0.3-0.3V0.3C0.1,0.1,0.2,0,0.3,0h1.8c0.2,0,0.3,0.1,0.3,0.3V11L7,6.3 c0.1-0.1,0.2-0.2,0.4-0.2h2.4c0.1,0,0.2,0,0.2,0.1c0,0.1,0,0.2,0,0.2l-4.9,4.7l5.1,6.3C10.2,17.6,10.2,17.7,10.2,17.8z"/>
              <path d="M19.6,17.9h-1.8c-0.2,0-0.3-0.1-0.3-0.3v-0.4c-0.8,0.6-1.8,0.9-3,0.9c-1.1,0-2-0.3-2.8-1 c-0.8-0.7-1.2-1.6-1.2-2.7c0-1.7,1.1-2.9,3.2-3.5c0.8-0.2,2.1-0.5,3.8-0.6c0.1-0.6-0.1-1.2-0.5-1.7c-0.4-0.5-1-0.7-1.7-0.7 c-1,0-2,0.4-3,1C12.2,9.1,12.1,9.1,12,9l-0.9-1.3C11,7.5,11,7.4,11.1,7.3c1.3-0.9,2.7-1.4,4.2-1.4c1.1,0,2.1,0.3,2.8,0.8 c1.1,0.8,1.7,2,1.7,3.7v7.3C19.9,17.8,19.8,17.9,19.6,17.9z M17.5,12.4c-1.7,0.2-2.9,0.4-3.5,0.7c-0.9,0.4-1.2,0.9-1.1,1.6 c0.1,0.4,0.2,0.7,0.6,0.9c0.3,0.2,0.7,0.4,1.1,0.4c1.2,0.1,2.2-0.2,2.9-1V12.4z"/>
              <path d="M30.6,22.5c-0.9,1-2.3,1.5-4,1.5c-1,0-2-0.3-2.9-0.8c-0.2-0.1-0.4-0.3-0.7-0.5 c-0.3-0.2-0.6-0.5-0.9-0.7c-0.1-0.1-0.1-0.2,0-0.4l1.2-1.2c0.1-0.1,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1c1,1,1.9,1.5,2.8,1.5 c2.1,0,3.2-1.1,3.2-3.3v-1.4c-0.8,0.7-1.9,1-3.3,1c-1.7,0-3-0.6-4-1.9c-0.8-1.1-1.3-2.5-1.3-4.2c0-1.6,0.4-3,1.2-4.1 c0.9-1.3,2.3-2,4-2c1.3,0,2.4,0.3,3.3,1V6.4c0-0.2,0.1-0.3,0.3-0.3h1.8c0.2,0,0.3,0.1,0.3,0.3v11.7C32,20,31.5,21.5,30.6,22.5z M29.7,9.9c-0.4-1.1-1.4-1.7-3-1.7c-2,0-3.1,1.3-3.1,3.8c0,1.4,0.3,2.4,1,3.1c0.5,0.5,1.2,0.8,2,0.8c1.6,0,2.7-0.6,3.1-1.7V9.9z"/>
              <path d="M42.9,22.5c-0.9,1-2.3,1.5-4,1.5c-1,0-2-0.3-2.9-0.8c-0.2-0.1-0.4-0.3-0.7-0.5 c-0.3-0.2-0.6-0.5-0.9-0.7c-0.1-0.1-0.1-0.2,0-0.4l1.2-1.2c0.1-0.1,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1c1,1,1.9,1.5,2.8,1.5 c2.1,0,3.2-1.1,3.2-3.3v-1.4c-0.8,0.7-1.9,1-3.3,1c-1.7,0-3-0.6-4-1.9c-0.8-1.1-1.3-2.5-1.3-4.2c0-1.6,0.4-3,1.2-4.1 c0.9-1.3,2.3-2,4-2c1.3,0,2.4,0.3,3.3,1V6.4c0-0.2,0.1-0.3,0.3-0.3H44c0.2,0,0.3,0.1,0.3,0.3v11.7C44.3,20,43.8,21.5,42.9,22.5z M42,9.9c-0.4-1.1-1.4-1.7-3-1.7c-2,0-3.1,1.3-3.1,3.8c0,1.4,0.3,2.4,1,3.1c0.5,0.5,1.2,0.8,2,0.8c1.6,0,2.7-0.6,3.1-1.7L42,9.9 L42,9.9z"/>
              <path d="M48.3,17.9h-1.8c-0.2,0-0.3-0.1-0.3-0.3V0.3c0-0.2,0.1-0.3,0.3-0.3h1.8c0.2,0,0.3,0.1,0.3,0.3 v17.3C48.5,17.8,48.5,17.9,48.3,17.9z"/>
              <path d="M61.4,12.6c0,0.2-0.1,0.3-0.3,0.3h-8.5c0.1,0.9,0.5,1.6,1.1,2.2c0.7,0.6,1.6,0.9,2.7,0.9 c1,0,1.8-0.3,2.6-0.8c0.2-0.1,0.3-0.1,0.4,0l1.2,1.3c0.1,0.1,0.1,0.3,0,0.4c-1.3,0.9-2.7,1.4-4.4,1.4c-1.8,0-3.3-0.6-4.4-1.8 c-1.1-1.2-1.7-2.7-1.7-4.5c0-1.7,0.6-3.2,1.7-4.4c1-1.1,2.4-1.6,4.1-1.6c1.6,0,2.9,0.6,4,1.7c1.1,1.2,1.6,2.6,1.5,4.4L61.4,12.6 z M58,8.7c-0.6-0.5-1.3-0.8-2.1-0.8c-0.8,0-1.5,0.3-2.1,0.8c-0.6,0.5-1,1.2-1.1,2H59C59,9.9,58.6,9.3,58,8.7z"/>
            </g>
          </svg>
        </a>
      `
      )`
        display: inline-flex;
      `;

      const Header = styled((props) => {
        const { environment } = useContext(Context);

        return h`<div className=${props.className} >
          <${Logo} />
          <span><b>Left / Right Arrow:</b> Increase / Decrease Step</span><span><b>0-9 Row Keys:</b> Playback Speed</span><span><b>Space:</b> Pause / Play</span>
          ${environment.title}
        </div>`;
      })`
        align-items: center;
        border-bottom: 4px solid #212121;
        box-sizing: border-box;
        color: #fff;
        display: flex;
        flex: 0 0 36px;
        font-size: 14px;
        justify-content: space-between;
        padding: 0 8px;
        width: 100%;
      `;

      const Renderer = styled((props) => {
        const context = useContext(Context);
        const { animate, debug, playing, renderer, speed } = context;
        const ref = preact.createRef();

        useEffect(async () => {
          if (!ref.current) return;

          const renderFrame = async (start, step, lastFrame) => {
            if (step !== context.step) return;
            if (lastFrame === 1) {
              if (!animate) return;
              start = Date.now();
            }
            const frame =
              playing || animate
                ? Math.min((Date.now() - start) / speed, 1)
                : 1;
            try {
              if (debug) console.time("render");
              await renderer({
                ...context,
                frame,
                height: ref.current.clientHeight,
                hooks: preactHooks,
                parent: ref.current,
                preact,
                styled,
                width: ref.current.clientWidth,
              });
            } catch (error) {
              if (debug) console.error(error);
              console.log({ ...context, frame, error });
            } finally {
              if (debug) console.timeEnd("render");
            }
            window.requestAnimationFrame(() => renderFrame(start, step, frame));
          };

          await renderFrame(Date.now(), context.step);
        }, [ref.current, context.step, context.renderer]);

        return h`<div className=${props.className} ref=${ref} />`;
      })`
        align-items: center;
        box-sizing: border-box;
        display: flex;
        height: 100%;
        left: 0;
        justify-content: center;
        position: absolute;
        top: 0;
        width: 100%;
      `;

      const Processing = styled((props) => {
        const { processing } = useContext(Context);
        const text = processing === true ? "Processing..." : processing;
        return h`<div className=${props.className}>${text}</div>`;
      })`
        bottom: 0;
        color: #fff;
        font-size: 12px;
        left: 0;
        line-height: 24px;
        position: absolute;
        text-align: center;
        width: 100%;
      `;

      const Viewer = styled((props) => {
        const { processing } = useContext(Context);
        return h`<div className=${props.className}>
          <${Renderer} />
          ${processing && h`<${Processing} />`}
        </div>`;
      })`
        background-color: #000b2a;
        background-image: radial-gradient(
          circle closest-side,
          #000b49,
          #000b2a
        );
        display: flex;
        flex: 1;
        overflow: hidden;
        position: relative;
        width: 100%;
      `;

      // Partitions the elements of arr into subarrays of max length num.
      const groupIntoSets = (arr, num) => {
        const sets = [];
        arr.forEach(a => {
          if (sets.length === 0 || sets[sets.length - 1].length === num) {
            sets.push([]);
          }
          sets[sets.length - 1].push(a);
        });
        return sets;
      }

      // Expects `width` input prop to set proper max-width for agent name span.
      const Legend = styled((props) => {
        const { agents, legend } = useContext(Context);

        const agentPairs = groupIntoSets(agents.sort((a, b) => a.index - b.index), 2);

        return h`<div className=${props.className}>
          ${agentPairs.map(agentList =>
            h`<ul>
                ${agentList.map(a =>
                  h`<li key=${a.id} title="id: ${a.id}" style="color:${a.color || "#FFF"}">
                      ${a.image && h`<img src=${a.image} />`}
                      <span>${a.name}</span>
                    </li>`
                )}
              </ul>`)}
        </div>`;
      })`
        background-color: #000b2a;
        font-family: sans-serif;
        font-size: 14px;
        height: 48px;
        width: 100%;

        ul {
          align-items: center;
          display: flex;
          flex-direction: row;
          justify-content: center;
        }

        li {
          align-items: center;
          display: inline-flex;
          transition: color 1s;
        }

        span {
          max-width: ${p => (p.width || 400) * 0.5 - 36}px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        img {
          height: 24px;
          margin-left: 4px;
          margin-right: 4px;
          width: 24px;
        }
      `;

      const StepInput = styled.input.attrs({
        type: "range",
      })`
        appearance: none;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 2px;
        display: block;
        flex: 1;
        height: 4px;
        opacity: 0.8;
        outline: none;
        transition: opacity 0.2s;
        width: 100%;

        &:hover {
          opacity: 1;
        }

        &::-webkit-slider-thumb {
          appearance: none;
          background: #1ebeff;
          border-radius: 100%;
          cursor: pointer;
          height: 12px;
          margin: 0;
          position: relative;
          width: 12px;

          &::after {
            content: "";
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 8px;
            background: green;
          }
        }
      `;

      const PlayButton = styled.button`
        align-items: center;
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        display: flex;
        flex: 0 0 56px;
        font-size: 20px;
        height: 40px;
        justify-content: center;
        opacity: 0.8;
        outline: none;
        transition: opacity 0.2s;

        &:hover {
          opacity: 1;
        }
      `;

      const StepCount = styled.span`
        align-items: center;
        color: white;
        display: flex;
        font-size: 14px;
        justify-content: center;
        opacity: 0.8;
        padding: 0 16px;
        pointer-events: none;
      `;

      const Controls = styled((props) => {
        const { environment, pause, play, playing, setStep, step } = useContext(
          Context
        );
        const value = step + 1;
        const onClick = () => (playing ? pause() : play());
        const onInput = (e) => {
          pause();
          setStep(parseInt(e.target.value) - 1);
        };

        return h`
          <div className=${props.className}>
            <${PlayButton} onClick=${onClick}><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF">${
          playing
            ? h`<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/>`
            : h`<path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/>`
        }</svg><//>
            <${StepInput} min="1" max=${
          environment.steps.length
        } value="${value}" onInput=${onInput} />
            <${StepCount}>${value} / ${environment.steps.length}<//>
          </div>
        `;
      })`
        align-items: center;
        border-top: 4px solid #212121;
        display: flex;
        flex: 0 0 44px;
        width: 100%;
      `;

      const Info = styled((props) => {
        const {
          environment,
          playing,
          step,
          speed,
          animate,
          header,
          controls,
          settings,
        } = useContext(Context);

        return h`
          <div className=${props.className}>
            info:
            step(${step}),
            playing(${playing ? "T" : "F"}),
            speed(${speed}),
            animate(${animate ? "T" : "F"})
          </div>`;
      })`
        color: #888;
        font-family: monospace;
        font-size: 12px;
      `;

      const Settings = styled((props) => {
        const { environment, pause, play, playing, setStep, step } = useContext(
          Context
        );

        return h`
          <div className=${props.className}>
            <${Info} />
          </div>
        `;
      })`
        background: #fff;
        border-top: 4px solid #212121;
        box-sizing: border-box;
        padding: 20px;
        width: 100%;

        h1 {
          font-size: 20px;
        }
      `;

      const Player = styled((props) => {
        const context = useContext(Context);
        const { agents, controls, header, legend, loading, settings, width } = context;
        return h`
          <div className=${props.className}>
            ${loading && h`<${Loading} />`}
            ${!loading && header && h`<${Header} />`}
            ${!loading && h`<${Viewer} />`}
            ${!loading && legend && h`<${Legend} width=${width}/>`}
            ${!loading && controls && h`<${Controls} />`}
            ${!loading && settings && h`<${Settings} />`}
          </div>`;
      })`
        align-items: center;
        background: #212121;
        border: 4px solid #212121;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        position: relative;
        width: 100%;
      `;

      const App = () => {
        const renderCountRef = useRef(0);
        const [_, setRenderCount] = useState(0);

        // These are bindings to the 0-9 keys and are milliseconds of timeout per step
        const speeds = [
          0,
          3000,
          1000,
          500,
          333, // Default
          200,
          100,
          50,
          25,
          10,
        ];

        const contextRef = useRef({
          animate: false,
          agents: [],
          controls: false,
          debug: false,
          environment: { steps: [], info: {} },
          header: window.innerHeight >= 600,
          height: window.innerHeight,
          interactive: false,
          legend: true,
          loading: false,
          playing: false,
          processing: false,
          renderer: () => "DNE",
          settings: false,
          speed: speeds[4],
          step: 0,
          width: window.innerWidth,
        });

        // Context helpers.
        const rerender = (contextRef.current.rerender = () =>
          setRenderCount((renderCountRef.current += 1)));
        const setStep = (contextRef.current.setStep = (newStep) => {
          contextRef.current.step = newStep;
          rerender();
        });
        const setPlaying = (contextRef.current.setPlaying = (playing) => {
          contextRef.current.playing = playing;
          rerender();
        });
        const pause = (contextRef.current.pause = () => setPlaying(false));

        const playNext = () => {
          const context = contextRef.current;

          if (
            context.playing &&
            context.step < context.environment.steps.length - 1
          ) {
            setStep(context.step + 1);
            play(true);
          } else {
            pause();
          }
        };

        const play = (contextRef.current.play = (continuing) => {
          const context = contextRef.current;
          if (context.playing && !continuing) return;
          if (!context.playing) setPlaying(true);
          if (
            !continuing &&
            context.step === context.environment.steps.length - 1
          ) {
            setStep(0);
          }
          setTimeout(playNext, context.speed);
        });

        const updateContext = (o) => {
          const context = contextRef.current;
          Object.assign(context, o, {
            environment: { ...context.environment, ...(o.environment || {}) },
          });
          rerender();
        };

        // First time setup.
        useEffect(() => {
          // Timeout is used to ensure useEffect renders once.
          setTimeout(() => {
            // Initialize context with window.kaggle.
            updateContext(window.kaggle || {});

            if (window.kaggle.playing) {
                play(true);
            }

            // Listen for messages received to update the context.
            window.addEventListener(
              "message",
              (event) => {
                // Ensure the environment names match before updating.
                try {
                  if (
                    event.data.environment.name ==
                    contextRef.current.environment.name
                  ) {
                    updateContext(event.data);
                  }
                } catch {}
              },
              false
            );
            // Listen for keyboard commands.
            window.addEventListener(
              "keydown",
              (event) => {
                const {
                  interactive,
                  isInteractive,
                  playing,
                  step,
                  environment,
                } = contextRef.current;
                const key = event.keyCode;
                const zero_key = 48
                const nine_key = 57
                if (
                  interactive ||
                  isInteractive() ||
                  (key !== 32 && key !== 37 && key !== 39 && !(key >= zero_key && key <= nine_key))
                )
                  return;

                if (key === 32) {
                  playing ? pause() : play();
                } else if (key === 39) {
                  contextRef.current.playing = false;
                  if (step < environment.steps.length - 1) setStep(step + 1);
                  rerender();
                } else if (key === 37) {
                  contextRef.current.playing = false;
                  if (step > 0) setStep(step - 1);
                  rerender();
                } else if (key >= zero_key && key <= nine_key) {
                  contextRef.current.speed = speeds[key - zero_key];
                }
                event.preventDefault();
                return false;
              },
              false
            );
          }, 1);
        }, []);

        if (contextRef.current.debug) {
          console.log("context", contextRef.current);
        }

        // Ability to update context.
        contextRef.current.update = updateContext;

        // Ability to communicate with ipython.
        const execute = (contextRef.current.execute = (source) =>
          new Promise((resolve, reject) => {
            try {
              window.parent.IPython.notebook.kernel.execute(source, {
                iopub: {
                  output: (resp) => {
                    const type = resp.msg_type;
                    if (type === "stream") return resolve(resp.content.text);
                    if (type === "error") return reject(new Error(resp.evalue));
                    return reject(new Error("Unknown message type: " + type));
                  },
                },
              });
            } catch (e) {
              reject(new Error("IPython Unavailable: " + e));
            }
          }));

        // Ability to return an action from an interactive session.
        contextRef.current.act = (action) => {
          const id = contextRef.current.environment.id;
          updateContext({ processing: true });
          execute(`
            import json
            from kaggle_environments import interactives
            if "${id}" in interactives:
                action = json.loads('${JSON.stringify(action)}')
                env, trainer = interactives["${id}"]
                trainer.step(action)
                print(json.dumps(env.steps))`)
            .then((resp) => {
              try {
                updateContext({
                  processing: false,
                  environment: { steps: JSON.parse(resp) },
                });
                play();
              } catch (e) {
                updateContext({ processing: resp.split("\n")[0] });
                console.error(resp, e);
              }
            })
            .catch((e) => console.error(e));
        };

        // Check if currently interactive.
        contextRef.current.isInteractive = () => {
          const context = contextRef.current;
          const steps = context.environment.steps;
          return (
            context.interactive &&
            !context.processing &&
            context.step === steps.length - 1 &&
            steps[context.step].some((s) => s.status === "ACTIVE")
          );
        };

        return h`
          <${Context.Provider} value=${contextRef.current}>
            <${Player} />
          <//>`;
      };

      preact.render(h`<${App} />`, document.body);
    </script>
  </body>
</html>