Set score via javascript

[Surye]

What would be the easiest/best way to set the score while in edit mode via javascript, rather than the edit field, and re-render the bracket?

[arsenetoumani]

what exactly do you mean?

[teijo]

Can you give your use case?

[sheharyarn]

I have the same question, let me elaborate.

Right now, to update scores, the user clicks on the little number (or dash), it's replaced by an input field, and enters the score. (<div class="score editable" data-resultid="result-x"> DOM Element).

How can I update the score using Javascript? I don't want the user to update score by manually entering it, instead I want to do it by calling a javascript function (that would be called in another callback). Maybe something like this:

function updateScores(match_id, team1_score, team2_score) { 
    // ...
    // returns matchData object with updated results
}

I really don't care about the UI being updated, I can just re-render it from the updated matchData results object, but it's important that the scores be updated using javascript and the results are returned

[teijo]

If you want to use another interface for manipulating the results, you'll have to be able to reproduce the data structure passed to {init: }. Unfortunately there aren't any utility functions for accessing or generating this structure, except for the UI, which really isn't a good API for external code :)

[sheharyarn]

I figured as much. So I had to re-write my app's functionality according to that. I was able to able to do it by not using the provided onClickHandler and writing my own;

1. On clicking a match, my custom interface is shown. The user does _stuff_ on this interface.

2. When the scores need to be updated, the appropriate match index (<div data-resultid="result-x">; dividing x by 2) and team seed values (<div data-teamid="y">) are tracked.

3. A call to my API is made that saves the match data

   POST { "match_index": index, "winner_seed": winner, "loser_seed": loser }
   

4. The results are calculated in backend, and sent back as response.

5. The bracket is rendered again.

The hardest part was calculating results in my backend. I tried to mimic jquery.bracket's functionality as much as I could, but I don't know if it's perfect. My backend is in rails and I don't know if this would be useful to anyone, but here's how I'm calculating results:

def get_bracket  # of class Tournament
    teams   = self.teams.asc(:seed).map(&:to_hash).in_groups_of(2)
    matches = self.matches.asc(:index)
    count   = self.teams.count

    m_res   = []
    l_res   = []
    f_res   = []

    last    = 0

    n = count / 2
    until n == 0
        round = matches[last..(last+n-1)].map(&:get_result)
        m_res << round

        last += n
        n    /= 2
    end 

    n = count / 4
    until n == 0
        2.times do 
            round = matches[last..(last+n-1)].map(&:get_result)
            l_res << round
            last  += n
        end
        n /= 2
    end

    f_res << matches[-3..-2].map(&:get_result)
    f_res << [matches.last.get_result]

    return {
        teams:      teams,
        results:    [m_res, l_res, f_res]
    }

    # match.get_result #> returns an array of scores e.g. [3,5]
    # team.to_hash     #> returns a hash of seed, id and team name
end

[sheharyarn]

As discussed in #29;

Final cannot really be swapped as the connectors would cross and they wouldn't be visually clear. The bracket purposefully reverses the matches of every second loser bracket round in order to postpone rematches as far into the end of the tournament as possible.

So I had to store the orders of seeds when saving a match as well, changing my post call to:

POST { "match_index": index, "winner_seed": winner, "loser_seed": loser, "reverse": is_reverse_bool }

and rendering the results in the order of the match. I know this is not a decent solution, and there are bound to be more bugs.

[cybricks]

@sheharyarn hey! looking for some help regarding updating single match score rather than the entire array from the frontend. Want to have player update its own match only & not others & secondly, we have players update matches simultaneously which causes an issue. As they update on an older data in the database. Would appreciate if you could help us a bit here