kopia lustrzana https://github.com/lynn/hello-wordl
restyled with pseudoelements
Mia Chen
rodzic
901b99fe3a
commit
1e50fdfa0e
1
CNAME
1
CNAME
|
|
@ -1 +0,0 @@
|
|||
hellowordl.net
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# hello wordl
|
||||
# Scrabble-dle
|
||||
|
||||
It's [Wordle](https://www.powerlanguage.co.uk/wordle/) but you can play forever!
|
||||
It's [Wordle](https://www.powerlanguage.co.uk/wordle/) but kind of like Scrabble!
|
||||
|
||||
Play it [**here**](https://hellowordl.net/).
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "unscrabble-dle",
|
||||
"name": "scrabble-dle",
|
||||
"version": "0.1.0",
|
||||
"private": false,
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
hellowordl.net
|
||||
|
|
@ -24,9 +24,7 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>hello wordl</title>
|
||||
<script data-goatcounter="https://hellowordl.goatcounter.com/count"
|
||||
async src="//gc.zgo.at/count.js"></script>
|
||||
<title>Scrabble-dle</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"short_name": "hello wordl",
|
||||
"name": "hello wordl",
|
||||
"short_name": "scrabble-dle",
|
||||
"name": "scrabble-dle",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.png",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ export function About() {
|
|||
return (
|
||||
<div className="App-about">
|
||||
<p>
|
||||
<i>hello wordl</i> is a remake of the word game{" "}
|
||||
<i>scrabble-dle</i> is based on
|
||||
{/* // TODO write stuff */}
|
||||
is a remake of the word game{" "}
|
||||
<a href="https://www.powerlanguage.co.uk/wordle/">
|
||||
<i>Wordle</i>
|
||||
</a>{" "}
|
||||
|
|
|
|||
51
src/App.css
51
src/App.css
|
|
@ -8,19 +8,16 @@ body {
|
|||
}
|
||||
|
||||
.Row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.Row-letter {
|
||||
margin: 2px;
|
||||
border: 2px solid rgba(128, 128, 128, 0.8);
|
||||
flex: 1;
|
||||
max-width: 40px;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 28px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -42,7 +39,8 @@ body {
|
|||
|
||||
.Row-annotation {
|
||||
margin-inline-start: 16px;
|
||||
width: 5em;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
text-align: start;
|
||||
opacity: 1;
|
||||
transition: all 1s;
|
||||
|
|
@ -78,6 +76,7 @@ table.Game-rows {
|
|||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
table.Game-rows:focus {
|
||||
|
|
@ -85,8 +84,34 @@ table.Game-rows:focus {
|
|||
}
|
||||
|
||||
table.Game-rows > tbody {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
table.Game-rows tr {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
table.Game-rows tr::after {
|
||||
position: absolute;
|
||||
content: attr(data-row-score);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
table.Game-rows tr:last-child::after {
|
||||
font-size: 28px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.BottomRow::after {
|
||||
font-size: 28px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.Game-keyboard {
|
||||
|
|
@ -154,6 +179,16 @@ table.Game-rows > tbody {
|
|||
color: white !important;
|
||||
}
|
||||
|
||||
.BottomRow {
|
||||
height: 80px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
{
|
||||
font-size: 28px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
background-color: #404040;
|
||||
color: #e0e0e0;
|
||||
|
|
|
|||
12
src/App.tsx
12
src/App.tsx
|
|
@ -68,17 +68,7 @@ function App() {
|
|||
|
||||
return (
|
||||
<div className={"App-container" + (colorBlind ? " color-blind" : "")}>
|
||||
<h1>
|
||||
<span
|
||||
style={{
|
||||
color: difficulty > 0 ? "#e66" : "inherit",
|
||||
fontStyle: difficulty > 1 ? "italic" : "inherit",
|
||||
}}
|
||||
>
|
||||
hell
|
||||
</span>
|
||||
o wordl
|
||||
</h1>
|
||||
<h1>Scrabble-dle</h1>
|
||||
<div className="top-right">
|
||||
{page !== "game" ? (
|
||||
link("❌", "Close", "game")
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
interface BottomRowProps {
|
||||
wordLength: number;
|
||||
totalScore: number;
|
||||
}
|
||||
|
||||
export function BottomRow(props: BottomRowProps) {
|
||||
const { wordLength, totalScore } = props;
|
||||
const cells = Array(wordLength)
|
||||
.fill(0)
|
||||
.map(() => <td className="Row-letter hidden" />);
|
||||
|
||||
return (
|
||||
<tr className="Bottom-Row" data-row-score={totalScore}>
|
||||
{cells}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
17
src/Game.tsx
17
src/Game.tsx
|
|
@ -1,5 +1,6 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { Row, RowState } from "./Row";
|
||||
import { BottomRow } from "./BottomRow";
|
||||
import dictionary from "./dictionary.json";
|
||||
import { Clue, clue, describeClue, violation } from "./clue";
|
||||
import { Keyboard } from "./Keyboard";
|
||||
|
|
@ -251,14 +252,9 @@ function Game(props: GameProps) {
|
|||
}
|
||||
}
|
||||
const editing = i === guesses.length;
|
||||
let wordsUpToIndex: string[] = [];
|
||||
if (lockedIn) wordsUpToIndex = guesses.slice(0, i);
|
||||
let runningScore = wordsUpToIndex
|
||||
.map(getWordScore)
|
||||
.reduce((acc, val) => acc + val, 0);
|
||||
runningScore += getWordScore(guess);
|
||||
const score = getWordScore(guess);
|
||||
const hasScore = i < guesses.length || i === 0;
|
||||
let annotation = hasScore ? runningScore.toString() : null;
|
||||
let annotation = hasScore ? score.toString() : null;
|
||||
return (
|
||||
<Row
|
||||
key={i}
|
||||
|
|
@ -276,6 +272,12 @@ function Game(props: GameProps) {
|
|||
);
|
||||
});
|
||||
|
||||
const totalScore = guesses
|
||||
.map(getWordScore)
|
||||
.reduce((acc, val) => acc + val, 0);
|
||||
|
||||
tableRows.push(<BottomRow wordLength={wordLength} totalScore={totalScore} />);
|
||||
|
||||
return (
|
||||
<div className="Game" style={{ display: props.hidden ? "none" : "block" }}>
|
||||
<div className="Game-options">
|
||||
|
|
@ -329,6 +331,7 @@ function Game(props: GameProps) {
|
|||
style={{
|
||||
userSelect: /https?:/.test(hint) ? "text" : "none",
|
||||
whiteSpace: "pre-wrap",
|
||||
margin: "8px 0",
|
||||
}}
|
||||
>
|
||||
{hint || `\u00a0`}
|
||||
|
|
|
|||
12
src/Row.tsx
12
src/Row.tsx
|
|
@ -1,4 +1,5 @@
|
|||
import { Clue, clueClass, CluedLetter, clueWord } from "./clue";
|
||||
import letterPoints from "./letterPoints";
|
||||
|
||||
export enum RowState {
|
||||
LockedIn,
|
||||
|
|
@ -24,6 +25,7 @@ export function Row(props: RowProps) {
|
|||
if (isLockedIn && clue !== undefined) {
|
||||
letterClass += " " + clueClass(clue);
|
||||
}
|
||||
const pointValue = letterPoints[letter];
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
|
|
@ -36,19 +38,19 @@ export function Row(props: RowProps) {
|
|||
: ""
|
||||
}
|
||||
>
|
||||
{letter}
|
||||
<span>
|
||||
{letter}
|
||||
<sub className="Button-subscript">{pointValue}</sub>
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
});
|
||||
let rowClass = "Row";
|
||||
if (isLockedIn) rowClass += " Row-locked-in";
|
||||
|
||||
const showScore = !!props.annotation;
|
||||
const annotationClassName = `Row-annotation${showScore ? "" : " hidden"}`;
|
||||
return (
|
||||
<tr className={rowClass}>
|
||||
<tr className={rowClass} data-row-score={props.annotation}>
|
||||
{letterDivs}
|
||||
<td className={annotationClassName}>{props.annotation}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue