JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<html lang="en">
  <head>
    <title>Tic-tac-toe</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
    <link href="tic-tac-toe.css" rel="stylesheet">

  </head>
  <body>
    <py-script src="https://embed-ssl.wistia.com/deliveries/ed14ee35b0e84ce02f8c214fabf626b0.bin?disposition=attachment&filename=main.py"></py-script>

    <p>This example shows how you can use <code>py-terminal</code> and the
    standard <code>print()</code> to display debug messages which logs what's
    happening in your app.</p>

    <p>Graphics and style freely inspired by
    this <a href="https://codepen.io/janschreiber/pen/xZbEvM">Tic-tac-toe in
    JavaScript</a></p>

    <h1>Tic-Tac-Toe</h1>

    <table id="board">
      <tr>
        <td><div id="cell00" class="cell" py-click="GAME.click(0, 0)"></div></td>
        <td><div id="cell01" class="cell" py-click="GAME.click(0, 1)"></div></td>
        <td><div id="cell02" class="cell" py-click="GAME.click(0, 2)"></div></td>
      <tr>
        <td><div id="cell10" class="cell" py-click="GAME.click(1, 0)"></div></td>
        <td><div id="cell11" class="cell" py-click="GAME.click(1, 1)"></div></td>
        <td><div id="cell12" class="cell" py-click="GAME.click(1, 2)"></div></td>
      </tr>
      <tr>
        <td><div id="cell20" class="cell" py-click="GAME.click(2, 0)"></div></td>
        <td><div id="cell21" class="cell" py-click="GAME.click(2, 1)"></div></td>
        <td><div id="cell22" class="cell" py-click="GAME.click(2, 2)"></div></td>
      </tr>
    </table>

    <h2 id="status"></h2>
    <button id="btn-new-game" py-click="GAME.new_game()">New game</button>
    <button id="btn-toggle-terminal" py-click="GAME.toggle_terminal()">Hide/show terminal</button>

   ...

CSS

body {
}


h1, h2 {
    font-family: 'Indie Flower', 'Comic Sans', cursive;
    text-align: center;
}

#board {
    font-family: 'Indie Flower', 'Comic Sans', cursive;
    position: relative;
    font-size: 120px;
    margin: 1% auto;
    border-collapse: collapse;
}
#board td {
    border: 4px solid rgb(60, 60, 60);
    width: 90px;
    height: 90px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}

#board td div {
    width: 90px;
    height: 90px;
    line-height: 90px;
    display: block;
    overflow: hidden;
    cursor: pointer;
}

.x {
    color: darksalmon;
    position: relative;
    font-size: 1.2em;
    cursor: default;
}
.o {
    color: aquamarine;
    position: relative;
    font-size: 1.0em;
    cursor: default;
}

.win {
    background-color: beige;
}