Flask Othello
- 8 Devlogs
- 26 Total hours
A web-based Othello game built with vanilla JS and Flask, featuring online multiplayer, game replays, and a bit-board based minimax AI.
A web-based Othello game built with vanilla JS and Flask, featuring online multiplayer, game replays, and a bit-board based minimax AI.
MY EIGHTH AND (hopefully) FINAL DEVLOG 
I THINK WE’RE SHIP READY.
I spent these 3 hours doing a bunch of final polish. The AI now has three difficulty levels to pick from (Easy, Medium and Impossible).
I also added some actual juice to the game. Pieces now make sounds when placed and captured, and buttons make a little click sound. I also added a little rules popup with a tiny board showing how the game works for those who don’t know :)
I finally updated the README from my initial commit too! It now has the full project info, as well as instructions for running FlaskOthello locally.
Everything else was just minor fixes / cleanup. FlaskOthello is officially feature complete.
Time to ship! 🚢
My seventh devloggg 
I replaced the AI search that was array based with a full bitboard implementation. This means that the board state is now stored as two 64-bit integers instead of nested lists. We also now have transposition tables and alpha-beta with move ordering based on the TT too!
This was lowkey not THAT much work, but there were SOOOO many bugs to fix. I tried a bunch of ‘optimisations’ that actually made the AI ~27% worse… In the end, we scored a 36% decrease in search time though!
During this time, I did some test deployments to NEST for playtesting with my girlfriend. Turns out, running a Flask dev server in production is a bad idea 💀
I had WebSockets, hints, undo, and UI redesign in my todo list, but decided to scratch those to make sure I ship in time.
Sixth Devlog! (IM LOWKEY REMEMBERING TO DO THESE)
This one was heavy on AI modifications, but I also implemented a replay system! I added transposition tables to the AI, which allows it to reuse positions it has already searched, along with a BUNCH of benchmarking for comparing.
I also changed the AI’s minimax search to make and undo moves in-place instead of constantly creating new OthelloBoard objects which was a BIG optimization.
Now, about that replay system! Games now keep a full move history which allows you to rewatch your game after play. You can jump to the start/end, step through moves one by one, and hold the buttons to scrub through the game.
Lastly, I improve the piece flip animations so captured pieces do a proper flip + many minor bug fixes / refactors.
Fifth devlog! (I KEEP FORGETTING TO DO THESE)
SO much has happened. I added full Player vs CPU support, fixed a major bug where if the AI was black it never made a starting move + a crash from the AI “make a move” loop firing every 1.5s 💀
Draw offers and resignation have been added. For draws, either player can offer and the other can accept/decline, and the AI automatically responds to draw requests based on piece count. Resignation has a confirm dialog to prevent accidents.
Games are now automatically archived when they conclude (read only game copy at /archive/<id> which you’re automatically redirected to if on a stale /game/<id> URL).
I also added piece ‘flip’ animations for the tiles that just got captured, so you can easily tell which tiles have just been captured.
And alongside all this, TONS of refactoring and bug fixes, including extracing common code into resolve_player() and serialize_game() functions, and a strings.js module for game status strings.
Fourth devlog!!
Today I built the actual frontend with a landing page (pick black/white, creates a game and redirects you), a live board page which polls the backend every 1.5s, click to play on legal squares, and CSS of course (green board, yellow legal move outlines).
Previously, when the player had no legal moves, the game would just stop and you’d be stuck. Now, your turn is automatically passed if you have no legal moves.
Added last-move highlighting (red outline on the most recently placed piece, so it’s obvious where your opponent just played) and a proper game-over screen showing the winning colour and final tile count.
Third devlog! (I forgot to devlog…)
I fixed a bunch of serious bugs in the engine (illegal moves overwriting occupied tiles, allowing negative indexing of the board, and more). The minimax now scores wins/loses by token count, not positional advantage at the end of the game, and some documentation cleanup.
I also started working on the Flask backend, which now features 4 API routes for creating and joining games, making your move, and calling for AI moves.
I tested this thoroughly with cURL, so hopefully there aren’t any significant bugs!
My second devlog!
It’s 1:17am right now, but I just finished implementing the most basic minimax algorithm possible, and it (miraculously) works!
I even hacked together a quick CPU vs CPU prototype, and it plays all the way through without any bugs, crashes or other breakage.
Goodnight 💀
First Devlog!
I have a really bad habit of starting 12 projects and never shipping any of them… so I started yet another project!
I loved playing Othello with my brother growing up, but we haven’t been able to play much anymore since I moved to uni. To solve this, I’m developing FlaskOthello in my free time, and I plan to add a minimax algorithm with alpha-beta pruning.
The plan is a Python Flask backend, and a vanilla HTML + CSS + JS frontend, probably hosted on Github Pages.
So far, I’ve made an OthelloBoard class, with a basic board representation, and most of the fundamental game logic (making moves, flipping opponent tiles, validity checks, etc.), and since my COSC class forces me to, I wrote a bunch of doctests out of habit…
Next up: minimax algorithm + alpha-beta pruning!