Show HN: Play Othello in your web browser (made with Mithril) | Hacker News Reader

Show HN: Play Othello in your web browser (made with Mithril)

jawj.github.io

106 pointsgmac52 comments

Very nice! I like how the state of the game is directly available in the URL - I could send a game directly to another person and have them see the history of the moves I've played, if I understand that correctly.

That said, when I want to go back to the previous page, I now need to click back through the game's history to get there - using `replaceState` from the History API would allow you to keep on using the URL as state, but without clobbering the user's browser history.

On the other hand, I liked that I could back out of a mistake with my browser back button!

Yeah, I'm thinking that may be a feature, not a bug.

>> Very nice! I like how the state of the game is directly available in the URL

I did this same thing with Othello back in 1994 and have been wondering why it never caught on.

I used a CGI program to generate the board. Playable squares were links so the pointer would change. The script made your move, figured out the AI move and spit out the board with a timed reload feeding its own move in. Totally stateless other than the URL.

This one is prettier, but a little less smart. Nicely done!

Yeah, I was surprised that I needed to hit back through an entire game history to get back to the HN discussion...

It would be more reasonable to map the 'undo' button to backspace and a visible button, and keep the browser back button semantics unsurprising. One can also have a string in the window with the current game state for sharing/linking.

This is great. And love to see Mithril. One of the best JavaScript frameworks before the whole madness started.

Indeed! Still my go-to for smaller personal projects.

Scales up to larger projects too! Simplicity can go a long way done right.

Yup! Lichess used to be on Mithril. Maybe some of it still is.

Used to be? Did they start using something else?

Was replaced by snabddom exclusively [0], looking at the readme and history.

[0]: https://github.com/snabbdom/snabbdom

I agree. Mithril hits the sweet spot.

I chose Mithril with JSX for a real startup's main product. It felt like what I expected React to feel like, and it scaled with no issues. The only downside is that everyone on your team is anxious that they're missing out on marketable React experience.

Mithril is one of those tools that you use and intuitively feel that it makes the right tradeoffs.

Yes, 100%.

When did Mithril come out? First I have heard of it. A quick look it seems like a really nice API.

I still don’t understand why React, if Mithril exists. React is what a young hacker would invent under heavy hallucinogens after a week of reading Advanced Haskell tutorials. I can believe it exists. I can’t believe it’s an industrial standard and nobody has a speck in the eye about it.

> React is what a young hacker would invent under heavy hallucinogens after a week of reading Advanced Haskell tutorials

That's precisely why it works: it presents an alternative to the liminality requirements of maintaining the Ballmer Peak (which is is too NP-hard to reproduce) by tapping into the underdeveloped PFCs in young developers everywhere and making them productive by psyop-hacking their sense of adventure into the pursuit of complexity.

It's honestly sad, but a nonetheless really interesting study in emergent psychological dynamics.

You're halfway to a point, but none of those words are used correctly. Something like -

"React is built to appeal to young developers. By being complicated, internally consistent, and "selling itself", it keeps them working long hours on boring business tasks. Practically, it's not the right tool, but it keeps 'em happy and grinding away."

Words misused (all of them):

- liminal = transitional, "between worlds", arguable, but more "flow"

- ballmer peak = coding capability stemming from mild inebriation, not from an old man sense of duty

- NP-hard = difficulty comes from combinatorial explosion, not from the impossibility of making people love spreadsheets

As a used-to-be baby dev, I'd argue the appeal of web frameworks is 2-fold. Structured ways to do complicated stuff, and internal consistency.

I really liked this reply :D

I was probably already dealing with the quirky subtle delirium I get with onset head colds/flus when I wrote that yesterday (I'm now past it and at the sniffle stage lol). That's my excuse for the "u ok?" word salad there :P

Some clarifications following this feedback:

- ballmer peak: yep, pretty much - the latter interpretation is new to me

- liminality: the defocused focus referred to in the above, but specifically referring to the need to drink to make it work

- NP-hard: I was trying to make a joke about it being impossible to achieve the effects of the ballmer peak without drinking lol

I just spent the last few days building parts of a SPA with vanilla js. It was a great reminder of why React exists.

This is a different contrast though. It could be a great reminder of any ui framework, since “dom” part is barebones and lacks features even compared to early desktop libs.

Nice implementation! I did one of these many years ago here: https://hewgill.com/othello/

The playing engine is based on a tiny C engine which I de-obfuscated and translated to Javascript.

I did one of these a few months ago. https://www.luduxia.com/reversi

The AI was based on ideas from https://archive.org/details/byte-magazine-1980-07/page/n57/m... and it was an end to end test of my WebGL code.

One of the life lessons of mine is that your UI is probably a much better direction. There is a sort of upper limit beyond which the whole graphical side of things is an absolute distraction to everyone. My gut feeling is the whole Wordle style end of things will be where a lot more future growth occurs.

You may be right, but your one is seriously impressive. Good work!

Seconded. It's fantastic!

A really nice sweet spot between playable and excessive graphics, and the music is great too!

Thanks! A lot of people commented on the music. I reused it in another game which went slightly viral in the UK and the newsletter responsible said it was "unintentionally creepy" which isn't quite true as it was totally intentional.

Looking good! The AI player is just a simple 2-ply lookahead, so should be beatable by the better Othello players (not me).

Indeed! I basically programmed it to do roughly what I (a total novice) do when I play. Mainly for when my kids want to play and I don’t (or am not around).

Darn I was impressed when I pulled off this: https://jawj.github.io/fliptiles/#!/4/52222224222222f222222d.... But now not so much. The key is to work to the edge and out.

For Othello, picking the positionally best square (corners very good, adjacent to corners very bad, 2 squares from corner good, etc.) beats lookahead, likely because having unflippable pieces in good positions leads to large swings in score in the endgame that a short lookahead won't see.

I play almost purely positionally with no conscious lookahead and I beat it soundly every time, playing as both black and white, frequently with the AI having to pass because it had no legal moves.

A "don't yield a corner" heuristic to never move in the three squares around a corner unless there are no other legal moves would likely significantly strengthen its play.

That’s interesting, thanks. Can I read up somewhere about these positional principles? It’s not immediately obvious to me why positions adjacent to the corner are so poor.

EDIT: ah, I guess it’s because it gives the corner to your opponent.

https://www.ffothello.org/livres/beginner-Randy-Fang.pdf

Yes easily, just make sure you catch corner and edges.

I wouldn't describe myself as a "better Othello player", but I managed to thoroughly beat it with the simple strategy of occupying the corners of the board as soon as possible...

It's just terrible, I got it to have to pass in just a few turns.

Yay! I'll take that as a compliment! I cut my teeth on the Microsoft windows version, which can be surprisingly good.

This is cool but the AI is not very good :)

I got a corner after like 5-6 moves.

Agreed. :)

I made it mainly for pass-and-play, but perhaps one of these days I should try to implement an AI vaguely worthy of the name.

I only this week was taught to play Othello by a young child in my life, so I appreciate seeing this pop up. It was interesting playing through the whole game and then rewinding with the back button. Not how the back button is "supposed to be" used, but it was fun to rewind and think about fixing some rookie mistakes. Thanks for the fun!

In response to some of the comments here, I've just (11.45 GMT) tweaked the 'AI' to give even greater weight than before to corner and edge positions, which might make it a little stronger.

This is really smooth and polished. My othello skills are bottom of barrel so I got whooped by the AI, but had fun anyway.

Does anyone know of something similar for go?

There are a lot of options out there. I've used this: https://www.cosumi.net/en/

The AI on that is pretty strong, at least at 9x9.

The key to winning Othello is getting the corners. Controlling the edges helps a ton in getting the corners. Avoid the 2x2 corner areas unless you know you can get the corners.

Using these tips alone should help you (easily?) beat the AI here, as it does a lot of mistakes.

I played enough times to realize I'm an inferior opponent. Yikes.

The key to winning Othello is getting the corners. Controlling the edges helps a ton in getting the corners. Avoid the 2x2 corner areas unless you know you can get the corners.

Using these tips alone should help you (easily?) beat the AI here, as it does a lot of mistakes.

I had dark mode enabled using Noir, a Safari extension, and let me tell you… there are only one color pieces.

Nice! If the dev is here, could we have the option of faster animation please.

Hmm, should be a simple CSS tweak, so I guess so.

Here's mine! https://skeoh.com/othello/

It's not nearly as polished but I had a lot of fun making it. It uses React and the now-no-longer-maintained https://boardgame.io/.

Reply on news.ycombinator.com