96 lines
2.1 KiB
Svelte
96 lines
2.1 KiB
Svelte
<svelte:head>
|
|
<title>How to play Sverdle</title>
|
|
<meta name="description" content="How to play Sverdle" />
|
|
</svelte:head>
|
|
|
|
<div class="text-column">
|
|
<h1>How to play Sverdle</h1>
|
|
|
|
<p>
|
|
Sverdle is a clone of <a href="https://www.nytimes.com/games/wordle/index.html">Wordle</a>, the
|
|
word guessing game. To play, enter a five-letter English word. For example:
|
|
</p>
|
|
|
|
<div class="example">
|
|
<span class="close">r</span>
|
|
<span class="missing">i</span>
|
|
<span class="close">t</span>
|
|
<span class="missing">z</span>
|
|
<span class="exact">y</span>
|
|
</div>
|
|
|
|
<p>
|
|
The <span class="exact">y</span> is in the right place. <span class="close">r</span> and
|
|
<span class="close">t</span>
|
|
are the right letters, but in the wrong place. The other letters are wrong, and can be discarded.
|
|
Let's make another guess:
|
|
</p>
|
|
|
|
<div class="example">
|
|
<span class="exact">p</span>
|
|
<span class="exact">a</span>
|
|
<span class="exact">r</span>
|
|
<span class="exact">t</span>
|
|
<span class="exact">y</span>
|
|
</div>
|
|
|
|
<p>This time we guessed right! You have <strong>six</strong> guesses to get the word.</p>
|
|
|
|
<p>
|
|
Unlike the original Wordle, Sverdle runs on the server instead of in the browser, making it
|
|
impossible to cheat. It uses <code><form></code> and cookies to submit data, meaning you can
|
|
even play with JavaScript disabled!
|
|
</p>
|
|
</div>
|
|
|
|
<style>
|
|
span {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 0.8em;
|
|
width: 2.4em;
|
|
height: 2.4em;
|
|
background-color: white;
|
|
box-sizing: border-box;
|
|
border-radius: 2px;
|
|
border-width: 2px;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.missing {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.close {
|
|
border-style: solid;
|
|
border-color: var(--color-theme-2);
|
|
}
|
|
|
|
.exact {
|
|
background: var(--color-theme-2);
|
|
color: white;
|
|
}
|
|
|
|
.example {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin: 1rem 0;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.example span {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
p span {
|
|
position: relative;
|
|
border-width: 1px;
|
|
border-radius: 1px;
|
|
font-size: 0.4em;
|
|
transform: scale(2) translate(0, -10%);
|
|
margin: 0 1em;
|
|
}
|
|
</style>
|