Custom 6-Sided-Dice Game

Make your own dice game and play it with friends!

by SpeedoThreeSixty

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="Make your own dice game and play it with friends!">
    <title>Custom 6-Sided-Dice Game</title>
  </head>
  <body>
    <header>
      <h1>Custom 6-Sided-Dice Game</h1>
      <p>Make your own dice game and play it with friends!</p>
    </header>
    <main>
      
    </main>
    <footer>
      <details id="rules-dropdown">
        <summary>Rules</summary>
        <div>
          <form id="rules" method="GET">
          <div>
            <div>
              <img src="https://i.imgur.com/8VKSsRI.png" width="20" height="20" alt="1-Roll">: <input list="on-roll" id="on-1" name="on-1">
            </div>
            <div>
              <img src="https://i.imgur.com/OZXWmS2.png" width="20" height="20" alt="2-Roll">: <input list="on-roll" id="on-2" name="on-2">
            </div>
            <div>
              <img src="https://i.imgur.com/CCQoBkM.png" width="20" height="20" alt="3-Roll">: <input list="on-roll" id="on-3" name="on-3">
            </div>
            <div>
              <img src="https://i.imgur.com/t021fQK.png" width="20" height="20" alt="4-Roll">: <input list="on-roll" id="on-4" name="on-4">
            </div>
            <div>
              <img src="https://i.imgur.com/c7ld1KD.png" width="20" height="20" alt="5-Roll">: <input list="on-roll" id="on-5" name="on-5">
            </div>
            <div>
              <img src="https://i.imgur.com/hIaIMCT.png" width="20" height="20" alt="6-Roll">: <input list="on-roll" id="on-6" name="on-6">
            </div>
            <datalist id="on-roll">
              <option value="Lose all points for turn and pass" />
              <option value="Lose all points in bank and pass" />
              <option value="Lose all points for turn" />
              <option value="Lose all points in...

CSS

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #333;
  color: darkgray;
}

#rules-dropdown {
  cursor: help;
}

#rules-dropdown > div {
  cursor: help;
}

JavaScript

const onRollChoices=["Lose all points for turn and pass","Lose all points in bank and pass","Lose all points for turn","Lose all points in banks","Automatically bank","Force roll again","Prompt again","Score the quantity on die and prompt again","Score the quantity on die","Score the quantity on die with arithmetics and prompt again","Score the quantity on die with arithmetics","Score X points and prompt again","Score X points","Lose X points for turn and pass","Lose X points in bank and pass","Lose X points for turn","Lose X points in bank"];function onRollChecker(number=1){const thisInputValue=document.getElementById(`on-${number}`).value;for(const onRollChoice of onRollChoices){if(thisInputValue===onRollChoice){if(number===6){return true}else{return onRollChecker(++number)}}}return false}document.getElementById("rules").addEventListener("submit",e=>{e.preventDefault();onRollChecker()})//I decided to write all of my code on one line just to see how confusing and quasi-complex it is, and - most importantly - to continue being weird.