Implementing Tic Tac Toe with 170mb of HTML – No JavaScript or CSS

170 MB seems like a lot. Aren't there less than 1,000 different states? My first naive idea would be to link to a static version of the gameboard further down the page like href="xo-------".

HN lunch challenge: Many here have noted one should be able to do this with far fewer total states by ignoring the order of the moves and focusing only on what the next board state needs to be. Who can generate the smallest working HTML file first? Preferably with how they generated the HTML too.

It seems that there is a missed optimization where the order of moves after. Assuming that X always goes first for every board state you know who goes next and the path that you took to get there doesn't matter. So you don't have to store the full sequence of moves that lead to the state, just the state itself.

There are 9 cells in the game that each can be empty, X, or O. So three states. That is 3^9 = 19683 maximum possible states of the game.

170MB seems like an awefull lot.

The author used popovers to store state and calculate results. They also used JavaScript to generate the HTML. And hate properly capitalising “MB”.

The demo indicates it only works on Chrome, however it worked fine on Firefox on iOS (so just Safari, presumably).

> It all started when Chrome implemented popovers in HTML [...] we found some pretty cool vectors that allow you to exploit hidden inputs and meta tags

So if these vectors/sploits were patched out, the game wouldn't work anymore?

(Impressive, thanks for sharing!)

This Python scripts generates a playable HTML-only Tic Tac Toe game. The generated file is 560KB, that is more than 300 times smaller. Also it works in any browser not just Chrome, probably even TUI browsers like w3m or links for that matter ^^. It generates all and only the valid game states, that is 5478 boards. It may be optimized further.

Play it here: https://pablo.rauzy.name/dev/ttt.html

    from copy import deepcopy
    
    opponent = {'X':'O','O':'X'}
    
    generated_boards = []
    
    def board_id (board):
        return ''.join([''.join(row) for row in board])
    
    def winning (board, player):
        return player == board[0][0] == board[0][1] == board[0][2] \
            or player == board[1][0] == board[1][1] == board[1][2] \
            or player == board[2][0] == board[2][1] == board[2][2] \
            or player == board[0][0] == board[1][0] == board[2][0] \
            or player == board[0][1] == board[1][1] == board[2][1] \
            or player == board[0][2] == board[1][2] == board[2][2] \
            or player == board[0][0] == board[1][1] == board[2][2] \
            or player == board[0][2] == board[1][1] == board[2][0]
    
    def full (board):
        return '_' not in [cell for row in board for cell in row]
    
    def print_board (board, player):
        print(f'<hr id="{board_id(board)}">', end="")
        links = True
        if winning(board, opponent[player]):
            links = False
            print("WIN:")
        elif full(board):
            links = False
            print("DRAW:")
        for row in range(0, 3):
            for col in range(0, 3):
                if links and board[row][col] == '_':
                    board[row][col] = player
                    print(f'<a href="#{board_id(board)}">_</a>', end="")
                    board[row][col] = '_'
                else:
                    print(f'{board[row][col]}', end="")
            if row != 2: print('')
        return links
    
    def next_boards (board, player):
        boards = []
        for row in range(0, 3):
            for col in range(0, 3):
                if board[row][col] == '_':
                    board[row][col] = player
                    bid = player + board_id(board)
                    if bid not in generated_boards:
                        boards.append(deepcopy(board))
                        generated_boards.append(bid)
                    board[row][col] = '_'
        return boards
    
    def print_boards (board, player):
        if not print_board(board, player): return
        for board in next_boards(board, player):
            print_boards(board, opponent[player])
    
    print("<pre>")
    print_boards([['_' for _ in range(0, 3)] for _ in range(0, 3)], 'X')

Works fine on Safari 17.1, great work!

there arent that many states couldnt you do this a lot easier with hyperlinks