sneakers-the-rat
2 years ago
parent
93d17b108e
commit
cd4bec28e2
@ -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
|
After Width: | Height: | Size: 888 B |
|
After Width: | Height: | Size: 24 KiB |
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue