jswright61/wordle_stats.html

## wordle_stats.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Update Wordle Statistics</title>
    <style>
      /* Global Styles & Colors */
      :root {
        --green: #6aaa64;
        --darkendGreen: #538d4e;
        --yellow: #c9b458;
        --darkendYellow: #b59f3b;
        --lightGray: #d8d8d8;
        --gray: #86888a;
        --darkGray: #939598;
        --white: #fff;
        --black: #212121;
        /* Colorblind colors */
        --orange: #f5793a;
        --blue: #85c0f9;
        font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
        font-size: 16px;
        --header-height: 50px;
        --keyboard-height: 200px;
        --game-max-width: 500px;
      }
      /* Light theme colors */
      :root {
        --color-tone-1: #1a1a1b;
        --color-tone-2: #787c7e;
        --color-tone-3: #878a8c;
        --color-tone-4: #d3d6da;
        --color-tone-5: #edeff1;
        --color-tone-6: #f6f7f8;
        --color-tone-7: #ffffff;
        --opacity-50: rgba(255, 255, 255, 0.5);
      }
      html {
        height: 100%;
      }
      body {
        height: 100%;
        background-color: var(--color-background);
        margin: 1rem;
        padding: 1rem;
        /* Prevent scrollbar appearing on page transition */
        overflow-y: hidden;
      }
      .modal-fader {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          z-index: 99998;
          background: rgba(0,0,0,0.8);
      }
      .modal-fader.active {
          display: block;
      }
      .modal-window {
          display: none;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          z-index: 99999;
          background: #fff;
          padding: 20px;
          border-radius: 5px;
          font-family: sans-serif;
          top: 50px;
      }
      .modal-window.active {
          display: block;
      }
      .modal-btn {
          background: #36a5a5;
          border: none;
          color: #fff;
          padding: 10px 15px;
          box-shadow: none;
          border-radius: 3px;
          text-decoration: none;
      }
    dt, dd { float: left }
    dt { clear:both }
    dt {
      margin-right: .1rem;
      padding-right: .1em;
      text-align: right;
      font-weight: bold;
    }
    dd {
      margin-left: .1rem;
      padding-left: .1rem;
      text-align: left;
    }
    .stats{
      clear: both;
    }
    </style>
</head>
<body>
  <div>
    <h1>Update Wordle Statistics for This Site</h1>
  </div>
  <div>
    <ol>
      <li><a href="https://www.nytimes.com/games/wordle/index.html" target="_blank">Play today's Wordle at the New York Times</a></li>
      <li>Note your stats from NYT to enter below (take a screenshot?)</li>
      <li><a href="wordle.html" target="_blank">Play today's Wordle on this site (NO CHEATING)</a></li>
      <li>Enter stats from NYT noted in step 2 in the form below</li>
      <li>Click the "Update Stats" Button (You will have a chance to review)</li>
      <li>If everything looks right on the sheet, click the "Write Stats" Button</li>
      <li>If there is a problem, Click "Reenter Stats" to close the sheet, make corrections, repeat starting at step 4</li>
      <li><a href="wordle.html" target="_blank">Visit this site's Wordle again -stats should be correct</a></li>
    </ol>
  </div>
<form action="./wordle_stats.html" method="GET">
  <div>
    <label for="ones">ones:</label>
    <input type="text" id="ones" name="ones"><br>
  </div>
  <div>
    <label for="twos">twos:</label>
    <input type="text" id="twos" name="twos"><br>
  </div>
  <div>
    <label for="threes">threes:</label>
    <input type="text" id="threes" name="threes"><br>
  </div>
  <div>
    <label for="fours">fours:</label>
    <input type="text" id="fours" name="fours"><br>
  </div>
  <div>
    <label for="fives">fives:</label>
    <input type="text" id="fives" name="fives"><br>
  </div>
  <div>
    <label for="sixes">sixes:</label>
    <input type="text" id="sixes" name="sixes"><br>
  </div>
  <div>
    <label for="current-streak">current streak:</label>
    <input type="text" id="current-streak" name="current-streak"><br>
  </div>
  <div>
    <label for="max-streak">max streak:</label>
    <input type="text" id="max-streak" name="max-streak"><br>
  </div>
  <div>
    <label for="games-played">games played:</label>
    <input type="text" id="games-played" name="games-played"><br>
  </div>
  <div>
    <label for="games-won">games won:</label>
    <input type="text" id="games-won" name="games-won"><br>
  </div>
</form>
<button class="modal-btn" onclick = "showStatsModal()">Update Stats</button>

<div id="stats-modal" class="modal-window">
    <h2>Update Stats</h2>
    <div>
      <dl id="dl-stats">
        <dt>Ones:</dt><dd id="dd-ones"></dd>
        <dt>Twos:</dt><dd id="dd-twos"></dd>
        <dt>Threes:</dt><dd id="dd-threes"></dd>
        <dt>Fours:</dt><dd id="dd-fours"></dd>
        <dt>Fives:</dt><dd id="dd-fives"></dd>
        <dt>Sixes:</dt><dd id="dd-sixes"></dd>
        <dt>Current Streak: </dt><dd id="dd-current-streak"></dd>
        <dt>Max Streak: </dt><dd id="dd-max-streak"></dd>
        <dt>Games Played: </dt><dd id="dd-games-played"></dd>
        <dt>Games Won: </dt><dd id="dd-games-won"></dd>
      </dl>
    </div>
    <p class="stats">
    <button class="modal-btn modal-hide" onclick = "hideAllModalWindows()">Reenter Stats</button>
    <button class="modal-btn modal-hide" onclick = "writeStats()">Write Stats</button>
    </p>
</div>


<div class="modal-fader"></div>
</body>
<script type="text/javascript">
  function showStatsModal () {
    readForm();
    updateModal();
    document.querySelector(".modal-fader").className += " active";
    document.getElementById("stats-modal").className += " active";
  };

  function updateModal(){
    document.getElementById("dd-ones").innerHTML = onesVal;
    document.getElementById("dd-twos").innerHTML = twosVal;
    document.getElementById("dd-threes").innerHTML = threesVal;
    document.getElementById("dd-fours").innerHTML = foursVal;
    document.getElementById("dd-fives").innerHTML = fivesVal;
    document.getElementById("dd-sixes").innerHTML = sixesVal;
    document.getElementById("dd-current-streak").innerHTML = currentStreakVal;
    document.getElementById("dd-max-streak").innerHTML = maxStreakVal;
    document.getElementById("dd-games-played").innerHTML = gamesPlayedVal;
    document.getElementById("dd-games-won").innerHTML = gamesWonVal;
  }

  function hideAllModalWindows () {
    var modalFader = document.querySelector(".modal-fader");
    var modalWindows = document.querySelectorAll(".modal-window");

    if(modalFader.className.indexOf("active") !== -1) {
      modalFader.className = modalFader.className.replace("active", "");
    }

    modalWindows.forEach(function (modalWindow) {
      if(modalWindow.className.indexOf("active") !== -1) {
        modalWindow.className = modalWindow.className.replace("active", "");
      }
    });
  }

  function readForm(){
    window.currentStreakVal = parseInt(document.getElementById("current-streak").value) || 0;
    window.maxStreakVal = parseInt(document.getElementById("max-streak").value) || 0;
    window.onesVal = parseInt(document.getElementById("ones").value) || 0;
    window.twosVal = parseInt(document.getElementById("twos").value) || 0;
    window.threesVal = parseInt(document.getElementById("threes").value) || 0;
    window.foursVal = parseInt(document.getElementById("fours").value) || 0;
    window.fivesVal = parseInt(document.getElementById("fives").value) || 0;
    window.sixesVal = parseInt(document.getElementById("sixes").value) || 0;
    window.gamesPlayedVal = parseInt(document.getElementById("games-played").value) || 0;
    window.gamesWonVal = parseInt(document.getElementById("games-won").value) || 0;
    window.winPercentageVal = gamesPlayedVal / gamesWonVal * 100
    var sumGuessesVal = (onesVal + twosVal * 2 + threesVal * 3 + foursVal * 4 + fivesVal * 5 + sixesVal * 6);
    window.averageGuessesVal = sumGuessesVal / gamesWonVal;

}

  function writeStats(){
      var Ya = "statistics",
        Ja = "fail",
        Ua = {
          currentStreak: currentStreakVal,
          maxStreak: maxStreakVal,
          guesses: n({
            1: onesVal,
            2: twosVal,
            3: threesVal,
            4: foursVal,
            5: fivesVal,
            6: sixesVal
          }, Ja, 0),
          winPercentage: winPercentageVal,
          gamesPlayed: gamesPlayedVal,
          gamesWon: gamesWonVal,
          averageGuesses: averageGuessesVal
        };

      window.localStorage.setItem(Ya, JSON.stringify(Ua));
      hideAllModalWindows ();
  }
   function n(e, a, s) {
    return a in e ? Object.defineProperty(e, a, {
      value: s,
      enumerable: !0,
      configurable: !0,
      writable: !0
    }) : e[a] = s, e
  }
</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Update Wordle Statistics</title>
	<style>
	/* Global Styles & Colors */
	:root {
	--green: #6aaa64;
	--darkendGreen: #538d4e;
	--yellow: #c9b458;
	--darkendYellow: #b59f3b;
	--lightGray: #d8d8d8;
	--gray: #86888a;
	--darkGray: #939598;
	--white: #fff;
	--black: #212121;
	/* Colorblind colors */
	--orange: #f5793a;
	--blue: #85c0f9;
	font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	--header-height: 50px;
	--keyboard-height: 200px;
	--game-max-width: 500px;
	}
	/* Light theme colors */
	:root {
	--color-tone-1: #1a1a1b;
	--color-tone-2: #787c7e;
	--color-tone-3: #878a8c;
	--color-tone-4: #d3d6da;
	--color-tone-5: #edeff1;
	--color-tone-6: #f6f7f8;
	--color-tone-7: #ffffff;
	--opacity-50: rgba(255, 255, 255, 0.5);
	}
	html {
	height: 100%;
	}
	body {
	height: 100%;
	background-color: var(--color-background);
	margin: 1rem;
	padding: 1rem;
	/* Prevent scrollbar appearing on page transition */
	overflow-y: hidden;
	}
	.modal-fader {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 99998;
	background: rgba(0,0,0,0.8);
	}
	.modal-fader.active {
	display: block;
	}
	.modal-window {
	display: none;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	background: #fff;
	padding: 20px;
	border-radius: 5px;
	font-family: sans-serif;
	top: 50px;
	}
	.modal-window.active {
	display: block;
	}
	.modal-btn {
	background: #36a5a5;
	border: none;
	color: #fff;
	padding: 10px 15px;
	box-shadow: none;
	border-radius: 3px;
	text-decoration: none;
	}
	dt, dd { float: left }
	dt { clear:both }
	dt {
	margin-right: .1rem;
	padding-right: .1em;
	text-align: right;
	font-weight: bold;
	}
	dd {
	margin-left: .1rem;
	padding-left: .1rem;
	text-align: left;
	}
	.stats{
	clear: both;
	}
	</style>
	</head>
	<body>
	<div>
	<h1>Update Wordle Statistics for This Site</h1>
	</div>
	<div>
	<ol>
	<li><a href="https://www.nytimes.com/games/wordle/index.html" target="_blank">Play today's Wordle at the New York Times</a></li>
	<li>Note your stats from NYT to enter below (take a screenshot?)</li>
	<li><a href="wordle.html" target="_blank">Play today's Wordle on this site (NO CHEATING)</a></li>
	<li>Enter stats from NYT noted in step 2 in the form below</li>
	<li>Click the "Update Stats" Button (You will have a chance to review)</li>
	<li>If everything looks right on the sheet, click the "Write Stats" Button</li>
	<li>If there is a problem, Click "Reenter Stats" to close the sheet, make corrections, repeat starting at step 4</li>
	<li><a href="wordle.html" target="_blank">Visit this site's Wordle again -stats should be correct</a></li>
	</ol>
	</div>
	<form action="./wordle_stats.html" method="GET">
	<div>
	<label for="ones">ones:</label>
	<input type="text" id="ones" name="ones"><br>
	</div>
	<div>
	<label for="twos">twos:</label>
	<input type="text" id="twos" name="twos"><br>
	</div>
	<div>
	<label for="threes">threes:</label>
	<input type="text" id="threes" name="threes"><br>
	</div>
	<div>
	<label for="fours">fours:</label>
	<input type="text" id="fours" name="fours"><br>
	</div>
	<div>
	<label for="fives">fives:</label>
	<input type="text" id="fives" name="fives"><br>
	</div>
	<div>
	<label for="sixes">sixes:</label>
	<input type="text" id="sixes" name="sixes"><br>
	</div>
	<div>
	<label for="current-streak">current streak:</label>
	<input type="text" id="current-streak" name="current-streak"><br>
	</div>
	<div>
	<label for="max-streak">max streak:</label>
	<input type="text" id="max-streak" name="max-streak"><br>
	</div>
	<div>
	<label for="games-played">games played:</label>
	<input type="text" id="games-played" name="games-played"><br>
	</div>
	<div>
	<label for="games-won">games won:</label>
	<input type="text" id="games-won" name="games-won"><br>
	</div>
	</form>
	<button class="modal-btn" onclick = "showStatsModal()">Update Stats</button>

	<div id="stats-modal" class="modal-window">
	<h2>Update Stats</h2>
	<div>
	<dl id="dl-stats">
	<dt>Ones:</dt><dd id="dd-ones"></dd>
	<dt>Twos:</dt><dd id="dd-twos"></dd>
	<dt>Threes:</dt><dd id="dd-threes"></dd>
	<dt>Fours:</dt><dd id="dd-fours"></dd>
	<dt>Fives:</dt><dd id="dd-fives"></dd>
	<dt>Sixes:</dt><dd id="dd-sixes"></dd>
	<dt>Current Streak: </dt><dd id="dd-current-streak"></dd>
	<dt>Max Streak: </dt><dd id="dd-max-streak"></dd>
	<dt>Games Played: </dt><dd id="dd-games-played"></dd>
	<dt>Games Won: </dt><dd id="dd-games-won"></dd>
	</dl>
	</div>
	<p class="stats">
	<button class="modal-btn modal-hide" onclick = "hideAllModalWindows()">Reenter Stats</button>
	<button class="modal-btn modal-hide" onclick = "writeStats()">Write Stats</button>
	</p>
	</div>


	<div class="modal-fader"></div>
	</body>
	<script type="text/javascript">
	function showStatsModal () {
	readForm();
	updateModal();
	document.querySelector(".modal-fader").className += " active";
	document.getElementById("stats-modal").className += " active";
	};

	function updateModal(){
	document.getElementById("dd-ones").innerHTML = onesVal;
	document.getElementById("dd-twos").innerHTML = twosVal;
	document.getElementById("dd-threes").innerHTML = threesVal;
	document.getElementById("dd-fours").innerHTML = foursVal;
	document.getElementById("dd-fives").innerHTML = fivesVal;
	document.getElementById("dd-sixes").innerHTML = sixesVal;
	document.getElementById("dd-current-streak").innerHTML = currentStreakVal;
	document.getElementById("dd-max-streak").innerHTML = maxStreakVal;
	document.getElementById("dd-games-played").innerHTML = gamesPlayedVal;
	document.getElementById("dd-games-won").innerHTML = gamesWonVal;
	}

	function hideAllModalWindows () {
	var modalFader = document.querySelector(".modal-fader");
	var modalWindows = document.querySelectorAll(".modal-window");

	if(modalFader.className.indexOf("active") !== -1) {
	modalFader.className = modalFader.className.replace("active", "");
	}

	modalWindows.forEach(function (modalWindow) {
	if(modalWindow.className.indexOf("active") !== -1) {
	modalWindow.className = modalWindow.className.replace("active", "");
	}
	});
	}

	function readForm(){
	window.currentStreakVal = parseInt(document.getElementById("current-streak").value) \|\| 0;
	window.maxStreakVal = parseInt(document.getElementById("max-streak").value) \|\| 0;
	window.onesVal = parseInt(document.getElementById("ones").value) \|\| 0;
	window.twosVal = parseInt(document.getElementById("twos").value) \|\| 0;
	window.threesVal = parseInt(document.getElementById("threes").value) \|\| 0;
	window.foursVal = parseInt(document.getElementById("fours").value) \|\| 0;
	window.fivesVal = parseInt(document.getElementById("fives").value) \|\| 0;
	window.sixesVal = parseInt(document.getElementById("sixes").value) \|\| 0;
	window.gamesPlayedVal = parseInt(document.getElementById("games-played").value) \|\| 0;
	window.gamesWonVal = parseInt(document.getElementById("games-won").value) \|\| 0;
	window.winPercentageVal = gamesPlayedVal / gamesWonVal * 100
	var sumGuessesVal = (onesVal + twosVal * 2 + threesVal * 3 + foursVal * 4 + fivesVal * 5 + sixesVal * 6);
	window.averageGuessesVal = sumGuessesVal / gamesWonVal;

	}

	function writeStats(){
	var Ya = "statistics",
	Ja = "fail",
	Ua = {
	currentStreak: currentStreakVal,
	maxStreak: maxStreakVal,
	guesses: n({
	1: onesVal,
	2: twosVal,
	3: threesVal,
	4: foursVal,
	5: fivesVal,
	6: sixesVal
	}, Ja, 0),
	winPercentage: winPercentageVal,
	gamesPlayed: gamesPlayedVal,
	gamesWon: gamesWonVal,
	averageGuesses: averageGuessesVal
	};

	window.localStorage.setItem(Ya, JSON.stringify(Ua));
	hideAllModalWindows ();
	}
	function n(e, a, s) {
	return a in e ? Object.defineProperty(e, a, {
	value: s,
	enumerable: !0,
	configurable: !0,
	writable: !0
	}) : e[a] = s, e
	}
	</script>
	</html>