dao-game / commit
Added React link to index.html, and game rules to the React version.
public/index.html | 1 + src/react/App.css | 7 +++++++ src/react/App.tsx | 12 ++++++++++++ 3 files changed, 20 insertions(+) diff --git a/public/index.html b/public/index.html index dd30114..716aa14 100644 --- a/public/index.html +++ b/public/index.html @@ -30,6 +30,7 @@ <hr /> <div class="info"> <div>Play local (pass-and-play) game of Dao <a href="local.html">here</a>.</div> + <div>Play local (pass-and-play) game of Dao implemented in React <a href="react.html">here</a>.</div> <div>Play online game of Dao <a href="remote.html">here</a>.</div> </div> diff --git a/src/react/App.css b/src/react/App.css index 1e0e319..dfa34de 100644 --- a/src/react/App.css +++ b/src/react/App.css @@ -23,3 +23,10 @@ border: 1px solid black; padding: 20px; } + +.info { + font-family: var(--font-family); + font-size: 20px; + max-width: var(--max-width); + margin: auto; +} \ No newline at end of file diff --git a/src/react/App.tsx b/src/react/App.tsx index 1218741..02da913 100644 --- a/src/react/App.tsx +++ b/src/react/App.tsx @@ -95,6 +95,18 @@ export const App = (props: Props): React.ReactElement => { {allTiles} </div> <Controls onUndo={undoMove} isDisabled={isControlsDisabled} /> + <div className='info'> + The game consists of only one simple rule and three ways to win. Rules: + <ul> + <li>Pieces move in a straight line, including diagonally, as far as possible with no jumps.</li> + </ul> + Ways to win: + <ol> + <li>Arrange your pieces in a straight line on the board (not diagonally)</li> + <li>Occupy four corners of the board</li> + <li>Form a 2x2 square anywhere on the board</li> + </ol> + </div> <Modal isOpen={isModalOpen} className='modal'> <h2>Game Over</h2> <div>