Include the LMNO CSS files and add a header. The LMNO button styling
looks better here than I expected. Just required a couple of padding
tweaks to get things looking correct.
<title>Tic-tac-toe</title>
<title>Tic-tac-toe</title>
+ <link rel="stylesheet" href="/reset.css" type="text/css" />
+ <link rel="stylesheet" href="/style.css" type="text/css" />
+ <link rel="stylesheet" href="tictactoe.css" type="text/css" />
+
<script src="/react.js"></script>
<script src="/react-dom.js"></script>
<script src="/react.js"></script>
<script src="/react-dom.js"></script>
- <link rel="stylesheet" href="tictactoe.css" type="text/css" />
<script type="module" src="tictactoe.js"></script>
</head>
<body>
<script type="module" src="tictactoe.js"></script>
</head>
<body>
- <div id="tictactoe"></div>
+
+ <div id="page">
+
+ <h1>Tic Tac Toe</h1>
+
+ <p>
+ Just the classic game.
+ </p>
+
+ <div id="message-area">
+ </div>
+
+ <div id="tictactoe"></div>
+
+ </div>
+
-body {
- font: 14px "Century Gothic", Futura, sans-serif;
- margin: 20px;
-}
-
ol, ul {
padding-left: 30px;
}
ol, ul {
padding-left: 30px;
}
.square {
background: #fff;
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
border: 1px solid #999;
float: left;
font-size: 24px;
.game-info {
margin-left: 20px;
.game-info {
margin-left: 20px;