Giter Club home page Giter Club logo

ultimate-tictactoe's Introduction

Build Status

Play it here!

Ultimate Tic-tac-toe

An implementation of Ultimate Tic-tac-toe in your browser, in Elm. Supports singleplayer, as well as local and remote multiplayer modes.

A Gif showing the gameplay

Install and run

If you haven't already done so, install Elm:

$ npm install -g [email protected]

Then clone the repo:

$ git clone [email protected]:jjst/elmtimate-tictactoe.git

Then cd to the project folder and compile with:

$ cd elmtimate-tictactoe/
$ elm make src/Main.elm --output=tictactoe.html

If everything goes according to my evil instructions, you should be able to open tictactoe.html with your favourite web browser and play you some ultimate tic-tac-toe!

Note: for actual development, you probably want to use elm reactor instead of elm make: this will automatically rebuild the project on the fly when changes are made to the source (see the getting started section of the Elm website).

Testing

To run the unit tests suite, install and run elm-test:

$ npm install -g elm-test
$ elm-test

ultimate-tictactoe's People

Contributors

jjst avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

ultimate-tictactoe's Issues

Add test harness

The project has grown to a size where making involved changes can take a while before all the compile issues are fixed and where it would be very useful to have a unit test suite to better test changes incrementally.

AI: Randomise moves with same weight

Currently when presented with choices with the same weight the AI will always play the first option

Impact

When in a given position the AI will always play the same series of moves. This makes the AI predictable. If a player finds a way to wind they can play this way over and over again.

Fade out content of all sub-boards at endgame

Current endgame looks like this:

endgame

i.e. the board where the next move should happen were the game not finished is highlighted and other boards faded out.

The whole board should be highlighted instead.

Show a tutorial/how to play instructions when visiting for first time

Have a quick 2-min intro on how to play the game with step-by-step instructions and next buttons, to show the principle of sending an opponent to the next grid, and that the opponent can choose when the grid is full or won already.

Doable as either a bunch of overlayed pictures, or fancier, as an interactive tutorial.

When player can choose which grid to play on, highlight playable ones

In this case, when player O has just played to send player X at the center but this sub-board has already been won:

board

Player X can choose which sub-board to play on. Every sub-board can is fair game except the center one which has already been won. In this case every sub-board except the center one should be highlighted.

Proper README

Have a proper README with:

  • Explanations as to why tictactoe sucks
  • And why ultimate tictactoe will save the world and the rules of the game
  • And install instructions

Subtly highlight last played move

This would help figure out what was the last move played by your opponent, especially useful in remote games or games against the AI.

Probably requires a model change to keep track of what the last move was.

On the view side the change might be a bit complicated as it will most likely require passing down what the last move was in order to do some style trickery to highlight it.

Redesign menu

The menu is ugly as f*** - redesign it so that it's prettier.

Show whose turn it currently is in UI

Currently there's no way to figure out whose turn it is to play, which can be a bit frustrating.

Ideas:

  • Place a "phantom" mark (cross or circle) under the cursor on hover where a mark would be placed for the active player -> This is cool because it doesn't clutter the UI which I want to avoid so the game still works as well on a small mobile screen, however this only works with a mouse and not with a touchscreen where there is no hover!

Endgame screen

Have an endgame screen, showing "Draw!" or "X wins!" or "O wins!" and with a "New game" button.

Add replay at the end

It should be easy enough to add an option to watch a replay of the game at the end.
Because Elm.

Adapt grid to fit page size

Currently the grid has a fixed size. It should respond to the current width/height (whichever is the smallest) of the page.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.