main
sneakers-the-rat 1 year ago
parent 93d17b108e
commit cd4bec28e2

2
.gitignore vendored

@ -0,0 +1,2 @@
.DS_Store

@ -1,2 +1,39 @@
# local_wordle
wordle but with saving and loading and in a single file
[wordle](https://www.powerlanguage.co.uk/wordle/), with a save and load button added, made into a single file (from `/src`) using [monolith](https://github.com/Y2Z/monolith)
mostly just unminifying the existing code, using some patterns from the original html/css, and exporting and loading the localStorage 'statistics' object.
# Exporting existing wordle stats
From the [wordle page](https://www.powerlanguage.co.uk/wordle/), Open your browser console (right click, inspect element or tools, open console or something), then load your stats like this:
```javascript
JSON.parse(window.localStorage.getItem('statistics'))
```
They should look something like this
```json
{
"currentStreak": 0,
"maxStreak": 0,
"guesses": {
"1": 1000,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0,
"fail": 0
},
"winPercentage": 0,
"gamesPlayed": 0,
"gamesWon": 0,
"averageGuesses": 0
}
```
and then copy the object into a text editor, save as `.json`

@ -0,0 +1,17 @@
{
"currentStreak": 0,
"maxStreak": 0,
"guesses": {
"1": 0,
"2": 20,
"3": 0,
"4": 0,
"5": 0,
"6": 0,
"fail": 0
},
"winPercentage": 0,
"gamesPlayed": 0,
"gamesWon": 0,
"averageGuesses": 0
}

@ -0,0 +1,70 @@
document.getElementById("save-close").addEventListener("click", (function(a) {
let s = document.querySelector('#save');
s.classList.toggle('hidden');
}));
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
}
const default_stats = {
currentStreak: 0,
maxStreak: 0,
guesses: n({
1: 0,
2: 0,
3: 0,
4: 0,
5: 0,
6: 0
}, 'fail', 0),
winPercentage: 0,
gamesPlayed: 0,
gamesWon: 0,
averageGuesses: 0
};
document.getElementById("saveButton").addEventListener("click", (function(a) {
let s = document.querySelector('#saveButton');
console.log('save-button')
s.classList.add('flash');
setTimeout(() =>
s.classList.remove('flash'), 200);
// get statistics from local storage!
let stats = window.localStorage.getItem('statistics') || JSON.stringify(default_stats);
let file = new Blob([stats], {type: 'text/json'});
let filename = `wordle_stats_${new Date().toISOString().substring(0,10)}.json`
let link = document.createElement("a"),
url = URL.createObjectURL(file);
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
setTimeout(function() {
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
}, 0);
}))
document.getElementById("inputload").addEventListener("change", (function(a) {
let s = document.querySelector('#inputload');
new Response(s.files[0]).json().then(json => {
window.localStorage.setItem('statistics', JSON.stringify(json));
console.debug('loaded stats! refreshing', json);
window.location.reload();
}, err => {
console.log('could not load data!', err, json);
})
}))

@ -0,0 +1,168 @@
.hidden {
display: none;
opacity: 0;
transition: opacity 0.2s;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
justify-content: center;
background-color: var(--color-background);
animation: SlideIn 100ms linear;
z-index: 2000;
}
:host([open]) .overlay {
display: flex;
}
.content {
position: relative;
color: var(--color-tone-1);
padding: 0 32px;
max-width: 500px;
margin: auto;
overflow-y: auto;
height: 100%;
display: flex;
flex-direction: column;
}
.content-container {
height: 100%;
}
.overlay.closing {
animation: SlideOut 150ms linear;
}
header {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
h1 {
font-weight: 700;
font-size: 16px;
letter-spacing: 0.5px;
text-transform: uppercase;
text-align: center;
margin-bottom: 10px;
}
game-icon {
position: absolute;
right: 0;
user-select: none;
cursor: pointer;
}
@media only screen and (min-device-width:320px) and (max-device-width:480px) {
.content {
max-width: 100%;
padding: 0;
}
game-icon {
padding: 0 16px;
}
}
@keyframes SlideIn {
0% {
transform: translateY(30px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes SlideOut {
0% {
transform: translateY(0px);
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
transform: translateY(60px);
}
}
.setting {
transition: background-color 0.25s;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-tone-4);
padding: 16px 0;
}
a, a:visited {
color: var(--color-tone-2);
}
.title {
font-size: 18px;
}
.text {
padding-right: 8px;
}
.description {
font-size: 12px;
color: var(--color-tone-2);
}
#footnote {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
color: var(--color-tone-2);
font-size: 12px;
text-align: right;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#privacy-policy,
#copyright {
text-align: left;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.setting {
padding: 16px;
}
}
.flash {
background-color: var(--color-tone-2);
transition: background-color 0.1s ease-out;
}
#inputload {
padding: 0.5em 0;
}

@ -0,0 +1,302 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Wordle - A daily word game</title>
<meta name="description" content="Guess the hidden word in 6 tries. A new puzzle is available each day.">
<!-- FB Meta Tags -->
<meta property="og:url" content="https://www.powerlanguage.co.uk/wordle/">
<meta property="og:type" content="website">
<meta property="og:title" content="Wordle - A daily word game">
<meta property="og:description" content="Guess the hidden word in 6 tries. A new puzzle is available each day.">
<meta property="og:image" content="wordle_og_1200x630.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<!-- <meta property="twitter:domain" content="powerlanguage.co.uk"> -->
<meta name="theme-color" content="#6aaa64">
<!-- <link rel="manifest" href="https://www.powerlanguage.co.uk/wordle/manifest.json"> -->
<link href="wordle_logo_32x32.png" rel="icon shortcut" sizes="3232">
<!-- <link href="https://www.powerlanguage.co.uk/wordle/images/wordle_logo_192x192.png" rel="apple-touch-icon"> -->
<link rel="stylesheet" type="text/css" href="wordle.css" />
<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);
}
/* Dark Theme Colors */
.nightmode {
--color-tone-1: #d7dadc;
--color-tone-2: #818384;
--color-tone-3: #565758;
--color-tone-4: #3a3a3c;
--color-tone-5: #272729;
--color-tone-6: #1a1a1b;
--color-tone-7: #121213;
--opacity-50: rgba(0, 0, 0, 0.5);
}
/* Constant colors and colors derived from theme */
:root,
.nightmode {
--color-background: var(--color-tone-7);
}
:root {
--color-present: var(--yellow);
--color-correct: var(--green);
--color-absent: var(--color-tone-2);
--tile-text-color: var(--color-tone-7);
--key-text-color: var(--color-tone-1);
--key-evaluated-text-color: var(--color-tone-7);
--key-bg: var(--color-tone-4);
--key-bg-present: var(--color-present);
--key-bg-correct: var(--color-correct);
--key-bg-absent: var(--color-absent);
--modal-content-bg: var(--color-tone-7);
}
.nightmode {
--color-present: var(--darkendYellow);
--color-correct: var(--darkendGreen);
--color-absent: var(--color-tone-4);
--tile-text-color: var(--color-tone-1);
--key-text-color: var(--color-tone-1);
--key-evaluated-text-color: var(--color-tone-1);
--key-bg: var(--color-tone-2);
--key-bg-present: var(--color-present);
--key-bg-correct: var(--color-correct);
--key-bg-absent: var(--color-absent);
--modal-content-bg: var(--color-tone-7);
}
.colorblind {
--color-correct: var(--orange);
--color-present: var(--blue);
--tile-text-color: var(--white);
--key-bg-present: var(--color-present);
--key-bg-correct: var(--color-correct);
--key-bg-absent: var(--color-absent);
}
html {
height: 100%;
}
body {
height: 100%;
background-color: var(--color-background);
margin: 0;
padding: 0;
/* Prevent scrollbar appearing on page transition */
overflow-y: hidden;
}
</style>
</head>
<body class="nightmode">
<game-app></game-app>
<div id='header-container' style='display: none;'>
<style>
.toaster {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, 0);
pointer-events: none;
width: fit-content;
}
#game-toaster {
z-index: ".concat(1e3, ";
}
#system-toaster {
z-index: ").concat(4e3, ";
}
#game {
width: 100%;
max-width: var(--game-max-width);
margin: 0 auto;
height: 100%;
display: flex;
flex-direction: column;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
height: var(--header-height);
color: var(--color-tone-1);
border-bottom: 1px solid var(--color-tone-4);
}
header .title {
font-weight: 700;
font-size: 36px;
letter-spacing: 0.2rem;
text-transform: uppercase;
text-align: center;
position: absolute;
left: 0;
right: 0;
pointer-events: none;
}
@media (max-width: 360px) {
header .title {
font-size: 22px;
letter-spacing: 0.1rem;
}
}
#board-container {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
overflow: hidden;
}
#board {
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-gap: 5px;
padding: 10px;
box-sizing: border-box;
}
button.icon {
background: none;
border: none;
cursor: pointer;
padding: 0 4px;
}
#debug-tools {
position: absolute;
bottom: 0;
}
#save-buttion game-icon svg path {
transform: translate(-1.99 -2.72);
fill: none !important;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 2px
}
</style>
<game-theme-manager>
<div id="game">
<header>
<div class="menu">
<button id="help-button" class="icon" aria-label="help">
<game-icon icon="help"></game-icon>
</button>
</div>
<div class="title">
WORDLE
</div>
<div class="menu">
<button id="save-button" class="icon" aria-label="save">
<game-icon icon="save"></game-icon>
</button>
<button id="statistics-button" class="icon" aria-label="statistics">
<game-icon icon="statistics"></game-icon>
</button>
<button id="settings-button" class="icon" aria-label="settings">
<game-icon icon="settings"></game-icon>
</button>
</div>
</header>
<div id="board-container">
<div id="board"></div>
</div>
<game-keyboard></game-keyboard>
<game-modal></game-modal>
<game-page></game-page>
<div class="toaster" id="game-toaster"></div>
<div class="toaster" id="system-toaster"></div>
</game-theme-manager>
</div>
<div id="debug-tools"></div>
</div>
<div id="save" class="hidden">
<div class="overlay">
<div class="content">
<header>
<h1>
<slot></slot>
</h1>
<game-icon id="save-close" icon="close"></game-icon>
</header>
<div class="content-container">
<slot name="content">
<div class="sections">
<section>
<div class="setting" id="saveButton">
<div class="text">
<div class="title">Save Stats</div>
<div class="description">Save stats to a local .json file</div>
</div>
</div>
<div class="setting" id="loadButton">
<div class="text">
<div class="title">Load Stats</div>
<div class="description">Also from a local .json file</div>
<input id='inputload' type='file' accept=".json"></input>
</div>
</div>
</section>
</div>
</slot>
</div>
</div>
</div>
</div>
<script async="" src="wordle.js"></script>
<script async="" src="savemenu.js"></script>
<script>
(function() {
// Defining the hash before the main bundle allows the bundle access window.hash
window.wordle = window.wordle || {};
window.wordle.hash = 'e65ce0a5';
})();
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 888 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save