DEV Community

loading...

Discussion on: Daily Challenge #43 - Boardgame Fight Resolver

Collapse
alvaromontoro profile image
Alvaro Montoro

CSS

Add the attributes data-piece1 and data-piece2 to any element, and it will announce the winner:

[data-piece1][data-piece2]::before {
  content: attr(data-piece1) ' vs ' attr(data-piece2) ': ';
}

/* By default, piece 1 will win */
[data-piece1][data-piece2]::after {
  content: attr(data-piece1) ' wins!';
}

/* Only in some particular cases, piece 2 will win */
[data-piece2="archers"i][data-piece1="swordsmen"i]::after,
[data-piece2="swordsmen"i][data-piece1="pikemen"i]::after,
[data-piece2="pikemen"i][data-piece1="cavalry"i]::after,
[data-piece2="cavalry"i][data-piece1="archers"i]::after { 
  content: attr(data-piece2) ' wins!'
}

In CSS Selectors Level 4, there is an option to make some selectors case-insensitive (adding an i at the end as displayed above). And it is fairly well supported (haven't tried on IE). So it doesn't matter if the user writes "archers" or "Archers" or "aRcHeRs", all of them will be matched.

Collapse
giorgiobertolotti profile image
Giorgio Bertolotti

Okay close it all, we have a winner!

Collapse
somedood profile image
Basti Ortiz (Some Dood)

This is by far the most clever CSS I have ever seen. I applaud you.

Collapse
reko91 profile image