Skip to content

Allow to ❤️ on mobile scoreboard #2826

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 22, 2024
Merged

Allow to ❤️ on mobile scoreboard #2826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 111 additions & 53 deletions webapp/public/js/domjudge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,13 +207,29 @@ function getSelectedTeams()
return JSON.parse(cookieVal);
}

function getScoreboard()
function getScoreboards(mobile)
{
var scoreboard = document.getElementsByClassName("scoreboard");
if (scoreboard === null || scoreboard[0] === null || scoreboard[0] === undefined) {
const scoreboards = document.getElementsByClassName("scoreboard");
if (scoreboards === null || scoreboards[0] === null || scoreboards[0] === undefined) {
return null;
}
return scoreboard[0].rows;
let scoreboardRows = {};
const mobileScoreboardClass = 'mobile-scoreboard';
const desktopScoreboardClass = 'desktop-scoreboard';
for (let i = 0; i < scoreboards.length; i++) {
if (scoreboards[i].classList.contains(mobileScoreboardClass)) {
scoreboardRows.mobile = scoreboards[i].rows;
} else if (scoreboards[i].classList.contains(desktopScoreboardClass)) {
scoreboardRows.desktop = scoreboards[i].rows;
}
}
if (mobile === undefined) {
return scoreboardRows;
} else if (mobile) {
return scoreboardRows.mobile;
} else {
return scoreboardRows.desktop;
}
}

function getRank(row)
Expand All @@ -226,7 +242,7 @@ function getHeartCol(row) {
var td = null;
// search for td before the team name
for (var i = 1; i < 4; i++) {
if (tds[i].className == "scoretn") {
if (tds[i].classList.contains("scoretn")) {
td = tds[i - 1];
break;
}
Expand All @@ -249,16 +265,28 @@ function getTeamname(row)
return row.getAttribute("data-team-id");
}

function toggle(id, show)
function toggle(id, show, mobile)
{
var scoreboard = getScoreboard();
var scoreboard = getScoreboards(mobile);
if (scoreboard === null) return;

// Filter out all rows that do not have a data-team-id attribute or have
// the class `scoreheader`.
// The mobile scoreboard has them, and we need to ignore them.
scoreboard = Array.from(scoreboard)
.filter(
row => row.getAttribute("data-team-id")
|| row.classList.contains("scoreheader")
);

var favTeams = getSelectedTeams();
// count visible favourite teams (if filtered)
var visCnt = 0;
for (var i = 0; i < favTeams.length; i++) {
for (var j = 0; j < scoreboard.length; j++) {
if (!scoreboard[j].getAttribute("data-team-id")) {
continue;
}
var scoreTeamname = getTeamname(scoreboard[j]);
if (scoreTeamname === null) {
continue;
Expand Down Expand Up @@ -297,69 +325,99 @@ function toggle(id, show)
});
}

function addHeart(rank, row, id, isFav)
function addHeart(rank, row, id, isFav, mobile)
{
var heartCol = getHeartCol(row);
var iconClass = isFav ? "fas fa-heart" : "far fa-heart";
return heartCol.innerHTML + "<span class=\"heart " + iconClass + "\" onclick=\"toggle(" + id + "," + (isFav ? "false" : "true") + ")\"></span>";
return heartCol.innerHTML + "<span class=\"heart " + iconClass + "\" onclick=\"toggle(" + id + "," + (isFav ? "false" : "true") + "," + mobile + ")\"></span>";
}

function initFavouriteTeams()
{
var scoreboard = getScoreboard();
if (scoreboard === null) {
const scoreboards = getScoreboards();
if (scoreboards === null) {
return;
}

var favTeams = getSelectedTeams();
var toAdd = new Array();
var cntFound = 0;
var lastRank = 0;
for (var j = 0; j < scoreboard.length; j++) {
var found = false;
var teamname = getTeamname(scoreboard[j]);
if (teamname === null) {
continue;
}
var firstCol = getRank(scoreboard[j]);
var heartCol = getHeartCol(scoreboard[j]);
var rank = firstCol.innerHTML;
for (var i = 0; i < favTeams.length; i++) {
if (teamname === favTeams[i]) {
found = true;
heartCol.innerHTML = addHeart(rank, scoreboard[j], j, found);
toAdd[cntFound] = scoreboard[j].cloneNode(true);
if (rank.trim().length === 0) {
// make rank explicit in case of tie
getRank(toAdd[cntFound]).innerHTML += lastRank;
Object.keys(scoreboards).forEach(function(key) {
var toAdd = new Array();
var toAddMobile = new Array();
var cntFound = 0;
var lastRank = 0;
const scoreboard = scoreboards[key];
const mobile = key === 'mobile';
let teamIndex = 1;
for (var j = 0; j < scoreboard.length; j++) {
var found = false;
var teamname = getTeamname(scoreboard[j]);
if (teamname === null) {
continue;
}
var firstCol = getRank(scoreboard[j]);
var heartCol = getHeartCol(scoreboard[j]);
var rank = firstCol.innerHTML;
for (var i = 0; i < favTeams.length; i++) {
if (teamname === favTeams[i]) {
found = true;
heartCol.innerHTML = addHeart(rank, scoreboard[j], teamIndex, found, mobile);
toAdd[cntFound] = scoreboard[j].cloneNode(true);
if (mobile) {
toAddMobile[cntFound] = scoreboard[j + 1].cloneNode(true);
}
if (rank.trim().length === 0) {
// make rank explicit in case of tie
getRank(toAdd[cntFound]).innerHTML += lastRank;
}
scoreboard[j].style.background = "lightyellow";
const scoretn = scoreboard[j].querySelector('.scoretn');
if (scoretn && scoretn.classList.contains('cl_FFFFFF')) {
scoretn.classList.remove('cl_FFFFFF');
scoretn.classList.add('cl_FFFFE0');
Comment on lines +374 to +376
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, I guess that's one way to fix the white colour 😂

Is the extra cl_FFFFE0 class needed, when the wrapping <div> will receive the background colour lightyellow anyway? 🙂

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that cl_ thing is there because if you set a fixed team column width, we do a 'fade out'. For that to work we need an actual background colour always. So I'm just switching it out. Not the most beautiful but it works.

}
if (mobile) {
scoreboard[j + 1].style.background = "lightyellow";
}
cntFound++;
break;
}
scoreboard[j].style.background = "lightyellow";
cntFound++;
break;
}
if (!found) {
heartCol.innerHTML = addHeart(rank, scoreboard[j], teamIndex, found, mobile);
}
if (rank !== "") {
lastRank = rank;
}

teamIndex++;
}
if (!found) {
heartCol.innerHTML = addHeart(rank, scoreboard[j], j, found);
}
if (rank !== "") {
lastRank = rank;
}
}

// copy favourite teams to the top of the scoreboard
for (var i = 0; i < cntFound; i++) {
var copy = toAdd[i];
var style = "";
if (i === 0) {
style += "border-top: 2px solid black;";
let addCounter = 1;
const copyRow = function (i, copy, addTopBorder, addBottomBorder, noMiddleBorder) {
let style = "";
if (noMiddleBorder) {
style += "border-bottom-width: 0;";
}
if (addTopBorder && i === 0) {
style += "border-top: 2px solid black;";
}
if (addBottomBorder && i === cntFound - 1) {
style += "border-bottom: thick solid black;";
}
copy.setAttribute("style", style);
const tbody = scoreboard[1].parentNode;
tbody.insertBefore(copy, scoreboard[addCounter]);
addCounter++;
}
if (i === cntFound - 1) {
style += "border-bottom: thick solid black;";

// copy favourite teams to the top of the scoreboard
for (let i = 0; i < cntFound; i++) {
copyRow(i, toAdd[i], true, !mobile, mobile);
if (mobile) {
copyRow(i, toAddMobile[i], false, true, false);
}
}
copy.setAttribute("style", style);
var tbody = scoreboard[1].parentNode;
tbody.insertBefore(copy, scoreboard[i + 1]);
}
});
}

// This function is a specific addition for using DOMjudge within a
Expand Down
30 changes: 14 additions & 16 deletions webapp/templates/partials/scoreboard_table.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
</style>
{% endif %}

<table class="d-none d-md-table scoreboard center {% if jury %}scoreboard_jury{% endif %}">
<table class="d-none d-md-table scoreboard desktop-scoreboard center {% if jury %}scoreboard_jury{% endif %}">

{% set teamColspan = 2 %}
{% if showAffiliationLogos %}
Expand All @@ -38,22 +38,22 @@
{# output table column groups (for the styles) #}
<colgroup>
{% if enable_ranking %}
<col id="scorerankmobile"/>
<col id="scorerank"/>
{% endif %}
{% if showFlags %}
<col id="scoreflagsmobile"/>
<col id="scoreflags"/>
{% else %}
<col/>
{% endif %}
{% if showAffiliationLogos %}
<col id="scorelogosmobile"/>
<col id="scorelogos"/>
{% endif %}
<col id="scoreteamnamemobile"/>
<col id="scoreteamname"/>
</colgroup>
{% if enable_ranking %}
<colgroup>
<col id="scoresolvmobile"/>
<col id="scoretotalmobile"/>
<col id="scoresolv"/>
<col id="scoretotal"/>
</colgroup>
{% endif %}
<colgroup>
Expand Down Expand Up @@ -106,7 +106,7 @@
<tbody>
{% set previousSortOrder = -1 %}
{% set previousTeam = null %}
{% set backgroundColors = {"#FFFFFF": 1} %}
{% set backgroundColors = {"#FFFFFF": 1, '#FFFFE0': 1} %}
Copy link
Contributor

@mpsijm mpsijm Nov 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's this for? Is it still needed after resolving the previous comment? (also on line 359)

EDIT: oh, never mind 😄 Still curious what it's for, though 🙂

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do think we don't have to do the loop twice though. let me fix that

{% set medalCount = 0 %}
{% for score in scores %}
{% set classes = [] %}
Expand Down Expand Up @@ -315,25 +315,25 @@
</tbody>
</table>

<table class="d-md-none scoreboard center {% if jury %}scoreboard_jury{% endif %}">
<table class="d-md-none scoreboard mobile-scoreboard center {% if jury %}scoreboard_jury{% endif %}">
{# output table column groups (for the styles) #}
<colgroup>
{% if enable_ranking %}
<col id="scorerank"/>
<col id="scorerankmobile"/>
{% endif %}
{% if showFlags %}
<col id="scoreflags"/>
<col id="scoreflagsmobile"/>
{% else %}
<col/>
{% endif %}
{% if showAffiliationLogos %}
<col id="scorelogos"/>
<col id="scorelogosmobile"/>
{% endif %}
<col id="scoreteamname"/>
<col id="scoreteamnamemobile"/>
</colgroup>
{% if enable_ranking %}
<colgroup>
<col id="scoresolv"/>
<col id="scoresolvmobile"/>
</colgroup>
{% endif %}
<thead>
Expand All @@ -356,7 +356,6 @@
<tbody>
{% set previousSortOrder = -1 %}
{% set previousTeam = null %}
{% set backgroundColors = {"#FFFFFF": 1} %}
{% set medalCount = 0 %}
{% for score in scores %}
{% set classes = [] %}
Expand Down Expand Up @@ -431,7 +430,6 @@
{% set colorClass = "_FFFFFF" %}
{% else %}
{% set colorClass = color | replace({"#": "_"}) %}
{% set backgroundColors = backgroundColors | merge({(color): 1}) %}
{% endif %}
<td class="scoretn cl{{ colorClass }}" title="{{ score.team.effectiveName }}">
{% set link = null %}
Expand Down
Loading