Tic Tac Toe component examples on docs site broken

[bob2517]

Just spotted this.

[bob2517]

Doh! They use a custom event "afterCheckGamePrivate", which was getting triggered after running a custom ACSS command that I set up.

I removed all the "after" events as I didn't think they were useful. Clearly they were at the time. Ok - looking at what to do next.

[bob2517]

Meh - I didn't need those after events after all. I was only running the command once and had 3 after events with different conditionals. So my solution was just to convert the after events into if statements and put them after running the command. It makes the code more concise and gives it better performance anyway.

I'll update the docs in a short while with the updated code.

[bob2517]

In case anyone in interested, the improvements to the code should have been done when @if statements were introduce into the core.

This:

    @conditional continueGame {
        !if-var-true: roundDraw, roundWon;
    }

    tic-tac-toe game-cell:if-inner-text(self ""):continueGame:click {
        var: gameState[{@val}] '{player}', animClass[{@val}] "cell-marked-{player}";
        check-game-2: true;
    }

    tic-tac-toe game-cell:if-var-true(roundDraw):afterCheckGame2 {
        game-status {
            render: "Game ended in a draw!";
        }
    }

    tic-tac-toe game-cell:if-var-true(roundWon):afterCheckGame2 {
        game-status {
            render: "Player {player} has won!";
        }
    }

    tic-tac-toe game-cell:continueGame:afterCheckGame2 {
        var: player ('{player}' == 'X') ? 'O' : 'X';
    }

becomes this:

    tic-tac-toe game-cell:if-inner-text(self ""):!if-var-true(roundDraw):!if-var-true(roundWon):click {
        var: gameState[{@val}] '{player}', animClass[{@val}] "cell-marked-{player}";
        check-game-2: true;
        @if var-true(roundDraw) {
            game-status {
                render: "Game ended in a draw!";
            }
        } @else if var-true(roundWon) {
            game-status {
                render: "Player {player} has won!";
            }
        } @else {
            var: player ('{player}' == 'X') ? 'O' : 'X';
        }
    }

Which is more concise and a bit easier to read I think.

[bob2517]

Updated code on live site. Closing.