User:Hefner/Sandbox8: Difference between revisions

From Roat Pkz
Jump to navigation Jump to search
No edit summary
Tag: Reverted
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
<style>
<noinclude>{{/doc}}</noinclude><div class="mainpage-skills tile-halves">
.bingo-table td {
    <div class="tile-top">
  cursor: pointer;
        <h2>Guides</h2>
  padding: 12px 18px;
        <ul>
  border: 1px solid #aaa;
            <li class="skill-melee">{{SCP MP2|Flower Poker|image=Flower poker icon}}</li>
  text-align: center;
            <li class="skill-smithing">{{SCP MP2|Boxing|image=Boxing icon}}</li>
  user-select: none;
            <li class="skill-farming">{{SCP MP2|Crate Frenzy|image=Crate frenzy icon}}</li>
}
            <li class="skill-magic">{{SCP MP2|Shooting Star|image=Shooting star icon}}</li>
 
            <li class="skill-cooking">{{SCP MP|Money Making|image=Pkp icon}}</li>
.bingo-selected {
            <li class="skill-mining">{{SCP MP2|Blackjack|image=Blackjack icon}}</li>
  background-color: #ffe599 !important;
            <li class="skill-smithing">{{SCP MP2|Dice|image=Dice icon}}</li>
  border: 2px solid #d4af37 !important;
            <li class="skill-thieving">{{SCP MP2|Wilderness Chest|image=Wilderness chest icon}}</li>
  color: black;
            <li class="skill-agility">{{SCP MP2|Currencies|image=Pkp icon}}</li>
  font-weight: bold;
            <li class="skill-fletching">{{SCP MP2|Treasure Trails|image=Clue scroll}}</li>
}
            <li class="skill-farming">{{SCP MP2|Mines|image=Mines icon}}</li>
</style>
            <li class="skill-smithing">{{SCP MP2|Bloodlust|image=Bloodlust icon}}</li>
 
            <li class="skill-fletching">{{SCP MP2|Clan Warfare|image=Clan warfare icon}}</li>
{| class="wikitable bingo-table" style="width: 300px; margin: 1em auto; border-collapse: collapse;"
            <li class="skill-melee">{{SCP MP|Slayer|image=Slayer icon}}</li>
|-
            <li class="skill-smithing">{{SCP MP2|Scrolls|image=Double Time scroll (1 Hour)}}</li>
| {{#tag:td|B1|id=tile-1}} || {{#tag:td|B2|id=tile-2}} || {{#tag:td|B3|id=tile-3}}
        </ul>
|-
     </div>
| {{#tag:td|I1|id=tile-4}} || {{#tag:td|I2|id=tile-5}} || {{#tag:td|I3|id=tile-6}}
     <div class="tile-bottom link-button read-more">[[Skill training guides|More guides<span class="arrow dark"></span>]]</div>
|-
</div>
| {{#tag:td|N1|id=tile-7}} || {{#tag:td|N2|id=tile-8}} || {{#tag:td|N3|id=tile-9}}
|}
 
<script>
document.addEventListener("DOMContentLoaded", function () {
  const cells = document.querySelectorAll(".bingo-table td");
 
  cells.forEach(function (cell) {
    const id = cell.id;
    if (!id) return;
 
    // Restore selection from localStorage
    if (localStorage.getItem(id) === "selected") {
      cell.classList.add("bingo-selected");
    }
 
     // Toggle selection on click
     cell.addEventListener("click", function () {
      cell.classList.toggle("bingo-selected");
 
      if (cell.classList.contains("bingo-selected")) {
        localStorage.setItem(id, "selected");
      } else {
        localStorage.removeItem(id);
      }
    });
  });
});
</script>

Latest revision as of 16:32, 10 July 2025