stardance has been extended another month! the new deadline is october 31 :)

You are browsing as a guest. Sign up (or log in) to start making projects!

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.

Ship #1

I made a full Othello game you can simply play in the browser, using vanilla JS and Flask! It features online multiplayer, a CPU opponent, replays, spectating and much more.

My biggest challenge was definitely the countless hours of debugging, and chasing AI optimisations which actually made it perform worse.

I am super proud of how the entire project came together, but especially happy with how satisfying the tile flip animation + sound cascading effect turned out.

  • 8 devlogs
  • 26h
  • 17.32x multiplier
  • 446 Stardust
Try project → See source code →
Open comments for this post

3h 10m 52s logged

MY EIGHTH AND (hopefully) FINAL DEVLOG :paraguayparrot:

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! 🚢

0
0
38
Open comments for this post

3h 27m 8s logged

My seventh devloggg :paraguayparrot:

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.

0
0
41
Open comments for this post

3h 45m 17s logged

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.

0
0
21
Open comments for this post

5h 54m 36s logged

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.

0
0
8
Open comments for this post

3h 18m 18s logged

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.

0
0
13
Open comments for this post

3h 48m 27s logged

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!

0
0
5
Open comments for this post

1h 5m 18s logged

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 💀

0
0
16
Open comments for this post

1h 14m 47s logged

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!

0
0
10

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…