├── .env
├── .prettierrc
├── src
├── react-app-env.d.ts
├── lib
│ ├── keyboard.ts
│ ├── words.ts
│ ├── share.ts
│ ├── localStorage.ts
│ ├── stats.ts
│ └── statuses.ts
├── setupTests.ts
├── App.test.tsx
├── components
│ ├── grid
│ │ ├── EmptyRow.tsx
│ │ ├── CompletedRow.tsx
│ │ ├── CurrentRow.tsx
│ │ ├── Grid.tsx
│ │ └── Cell.tsx
│ ├── mini-grid
│ │ ├── MiniGrid.tsx
│ │ ├── MiniCompletedRow.tsx
│ │ └── MiniCell.tsx
│ ├── stats
│ │ ├── Histogram.tsx
│ │ ├── Progress.tsx
│ │ └── StatBar.tsx
│ ├── modals
│ │ ├── StatsModal.tsx
│ │ ├── AboutModal.tsx
│ │ ├── InfoModal.tsx
│ │ ├── WinModal.tsx
│ │ └── BaseModal.tsx
│ ├── alerts
│ │ └── Alert.tsx
│ └── keyboard
│ │ ├── Key.tsx
│ │ └── Keyboard.tsx
├── index.css
├── reportWebVitals.ts
├── index.tsx
├── App.css
├── logo.svg
├── App.tsx
└── constants
│ └── wordlist.ts
├── public
├── robots.txt
├── favicon.ico
├── logo192.png
├── logo512.png
├── manifest.json
└── index.html
├── Dockerfile
├── .vscode
└── settings.json
├── postcss.config.js
├── tailwind.config.js
├── .gitignore
├── tsconfig.json
├── README.md
├── LICENSE
└── package.json
/.env:
--------------------------------------------------------------------------------
1 | CI= npm run build
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | singleQuote: true
2 | semi: false
3 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
8 | {emptyCells.map((_, i) => (
9 | |
10 | ))}
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/mini-grid/MiniGrid.tsx:
--------------------------------------------------------------------------------
1 | import { MiniCompletedRow } from './MiniCompletedRow'
2 |
3 | type Props = {
4 | guesses: string[]
5 | }
6 |
7 | export const MiniGrid = ({ guesses }: Props) => {
8 | return (
9 |
10 | {guesses.map((guess, i) => (
11 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | .cell-animation {
6 | animation: revealCharCell linear;
7 | animation-duration: 0.15s;
8 | }
9 |
10 | @keyframes revealCharCell {
11 | 0% {
12 | transform: scale(1);
13 | }
14 |
15 | 50% {
16 | transform: scale(1.1);
17 | }
18 |
19 | 100% {
20 | transform: scale(1);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals'
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry)
7 | getFID(onPerfEntry)
8 | getFCP(onPerfEntry)
9 | getLCP(onPerfEntry)
10 | getTTFB(onPerfEntry)
11 | })
12 | }
13 | }
14 |
15 | export default reportWebVitals
16 |
--------------------------------------------------------------------------------
/src/components/grid/CompletedRow.tsx:
--------------------------------------------------------------------------------
1 | import { getGuessStatuses } from '../../lib/statuses'
2 | import { Cell } from './Cell'
3 |
4 | type Props = {
5 | guess: string
6 | }
7 |
8 | export const CompletedRow = ({ guess }: Props) => {
9 | const statuses = getGuessStatuses(guess)
10 |
11 | return (
12 |
13 | {guess.split('').map((letter, i) => (
14 | |
15 | ))}
16 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/mini-grid/MiniCompletedRow.tsx:
--------------------------------------------------------------------------------
1 | import { getGuessStatuses } from '../../lib/statuses'
2 | import { MiniCell } from './MiniCell'
3 |
4 | type Props = {
5 | guess: string
6 | }
7 |
8 | export const MiniCompletedRow = ({ guess }: Props) => {
9 | const statuses = getGuessStatuses(guess)
10 |
11 | return (
12 |
13 | {guess.split('').map((letter, i) => (
14 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/grid/CurrentRow.tsx:
--------------------------------------------------------------------------------
1 | import { Cell } from './Cell'
2 |
3 | type Props = {
4 | guess: string
5 | }
6 |
7 | export const CurrentRow = ({ guess }: Props) => {
8 | const splitGuess = guess.split('')
9 | const emptyCells = Array.from(Array(5 - splitGuess.length))
10 |
11 | return (
12 |
13 | {splitGuess.map((letter, i) => (
14 | |
15 | ))}
16 | {emptyCells.map((_, i) => (
17 | |
18 | ))}
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import './index.css'
4 | import App from './App'
5 | import reportWebVitals from './reportWebVitals'
6 |
7 | ReactDOM.render(
8 |
9 | ,
11 | document.getElementById('root')
12 | )
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals()
18 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"]
20 | }
21 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/stats/Histogram.tsx:
--------------------------------------------------------------------------------
1 | import { GameStats } from '../../lib/localStorage'
2 | import { Progress } from './Progress'
3 |
4 | type Props = {
5 | gameStats: GameStats
6 | }
7 |
8 | export const Histogram = ({ gameStats }: Props) => {
9 | const { totalGames, winDistribution } = gameStats
10 |
11 | return (
12 |
13 | {winDistribution.map((value, i) => (
14 |
20 | ))}
21 |
10 |
{index + 1}
11 |
12 |
16 | {label}
17 |
18 |
19 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/grid/Grid.tsx:
--------------------------------------------------------------------------------
1 | import { CompletedRow } from './CompletedRow'
2 | import { CurrentRow } from './CurrentRow'
3 | import { EmptyRow } from './EmptyRow'
4 |
5 | type Props = {
6 | guesses: string[]
7 | currentGuess: string
8 | }
9 |
10 | export const Grid = ({ guesses, currentGuess }: Props) => {
11 | const empties =
12 | guesses.length < 5 ? Array.from(Array(5 - guesses.length)) : []
13 |
14 | return (
15 |
16 | {guesses.map((guess, i) => (
17 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/modals/StatsModal.tsx:
--------------------------------------------------------------------------------
1 | import { StatBar } from '../stats/StatBar'
2 | import { Histogram } from '../stats/Histogram'
3 | import { GameStats } from '../../lib/localStorage'
4 | import { BaseModal } from './BaseModal'
5 |
6 | type Props = {
7 | isOpen: boolean
8 | handleClose: () => void
9 | gameStats: GameStats
10 | }
11 |
12 | export const StatsModal = ({ isOpen, handleClose, gameStats }: Props) => {
13 | return (
14 |
15 |
17 | Guess Distribution
18 |
19 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/lib/words.ts:
--------------------------------------------------------------------------------
1 | import { WORDS } from '../constants/wordlist'
2 | import { VALIDGUESSES } from '../constants/validGuesses'
3 |
4 | export const isWordInWordList = (word: string) => {
5 | return (
6 | WORDS.includes(word.toLowerCase()) ||
7 | VALIDGUESSES.includes(word.toLowerCase())
8 | )
9 | }
10 |
11 | export const isWinningWord = (word: string) => {
12 | return solution === word
13 | }
14 |
15 | export const getWordOfDay = () => {
16 | // January 1, 2022 Game Epoch
17 | const epochMs = 1641013200000
18 | const now = Date.now()
19 | const msInDay = 86400000
20 | const index = Math.floor((now - epochMs) / msInDay)
21 |
22 | return {
23 | solution: WORDS[index].toUpperCase(),
24 | solutionIndex: index,
25 | }
26 | }
27 |
28 | export const { solution, solutionIndex } = getWordOfDay()
29 |
--------------------------------------------------------------------------------
/src/components/grid/Cell.tsx:
--------------------------------------------------------------------------------
1 | import { CharStatus } from '../../lib/statuses'
2 | import classnames from 'classnames'
3 |
4 | type Props = {
5 | value?: string
6 | status?: CharStatus
7 | }
8 |
9 | export const Cell = ({ value, status }: Props) => {
10 | const classes = classnames(
11 | 'w-14 h-14 border-solid border-2 flex items-center justify-center mx-0.5 text-lg font-bold rounded',
12 | {
13 | 'bg-white border-slate-200': !status,
14 | 'border-black': value && !status,
15 | 'bg-slate-400 text-white border-slate-400': status === 'absent',
16 | 'bg-green-500 text-white border-green-500': status === 'correct',
17 | 'bg-yellow-500 text-white border-yellow-500': status === 'present',
18 | 'cell-animation': !!value,
19 | }
20 | )
21 |
22 | return {value}
23 | }
24 |
--------------------------------------------------------------------------------
/src/lib/share.ts:
--------------------------------------------------------------------------------
1 | import { getGuessStatuses } from './statuses'
2 | import { solutionIndex } from './words'
3 |
4 | export const shareStatus = (guesses: string[]) => {
5 | navigator.clipboard.writeText(
6 | `Not Wordle ${solutionIndex} ${guesses.length}/6\n\n` +
7 | generateEmojiGrid(guesses)
8 | )
9 | }
10 |
11 | export const generateEmojiGrid = (guesses: string[]) => {
12 | return guesses
13 | .map((guess) => {
14 | const status = getGuessStatuses(guess)
15 | return guess
16 | .split('')
17 | .map((letter, i) => {
18 | switch (status[i]) {
19 | case 'correct':
20 | return '🟩'
21 | case 'present':
22 | return '🟨'
23 | default:
24 | return '⬜'
25 | }
26 | })
27 | .join('')
28 | })
29 | .join('\n')
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/modals/AboutModal.tsx:
--------------------------------------------------------------------------------
1 | import { BaseModal } from './BaseModal'
2 |
3 | type Props = {
4 | isOpen: boolean
5 | handleClose: () => void
6 | }
7 |
8 | export const AboutModal = ({ isOpen, handleClose }: Props) => {
9 | return (
10 |
11 |
12 | This is an open source clone of the game Wordle -{' '}
13 |
17 | check out the code here
18 | {' '}
19 | and{' '}
20 |
24 | play the original here
25 |
26 |
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/stats/StatBar.tsx:
--------------------------------------------------------------------------------
1 | import { GameStats } from '../../lib/localStorage'
2 |
3 | type Props = {
4 | gameStats: GameStats
5 | }
6 |
7 | const StatItem = ({
8 | label,
9 | value,
10 | }: {
11 | label: string
12 | value: string | number
13 | }) => {
14 | return (
15 |
16 |
{value}
17 |
{label}
18 |
25 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Wordle Clone - In Irish / As Gaeilge
2 |
3 | ## STATUS: Work In Progress
4 |
5 | ---
6 | ### The majority of this clone was written by [hannahcode](https://github.com/hannahcode/wordle) for her Wordle Clone, my only contributions are in tweaking that code base to use an Irish corpus.
7 | ---
8 |
9 | - Try it [here](TODO)
10 | - Go play the real Wordle [here](https://www.powerlanguage.co.uk/wordle/)
11 | - Read the story behind it [here](https://www.nytimes.com/2022/01/03/technology/wordle-word-game-creator.html)
12 | - Try a demo of hannahcode's Wordle clone project [here](https://wordle.hannahmariepark.com)
13 |
14 | _To Run Locally:_
15 | Clone the repository and perform the following command line actions:
16 | ```bash
17 | $ cd wordle
18 | $ npm install
19 | $ npm run start
20 | ```
21 |
22 | _To build/run docker container:_
23 | ```bash
24 | $ docker build -t focale .
25 | $ docker run -d -p 3000:3000 focale
26 | ```
27 | open http://localhost:3000 in browser.
28 |
29 |
--------------------------------------------------------------------------------
/src/lib/localStorage.ts:
--------------------------------------------------------------------------------
1 | const gameStateKey = 'gameState'
2 |
3 | type StoredGameState = {
4 | guesses: string[]
5 | solution: string
6 | }
7 |
8 | export const saveGameStateToLocalStorage = (gameState: StoredGameState) => {
9 | localStorage.setItem(gameStateKey, JSON.stringify(gameState))
10 | }
11 |
12 | export const loadGameStateFromLocalStorage = () => {
13 | const state = localStorage.getItem(gameStateKey)
14 | return state ? (JSON.parse(state) as StoredGameState) : null
15 | }
16 |
17 | const gameStatKey = 'gameStats'
18 |
19 | export type GameStats = {
20 | winDistribution: number[]
21 | gamesFailed: number
22 | currentStreak: number
23 | bestStreak: number
24 | totalGames: number
25 | successRate: number
26 | }
27 |
28 | export const saveStatsToLocalStorage = (gameStats: GameStats) => {
29 | localStorage.setItem(gameStatKey, JSON.stringify(gameStats))
30 | }
31 |
32 | export const loadStatsFromLocalStorage = () => {
33 | const stats = localStorage.getItem(gameStatKey)
34 | return stats ? (JSON.parse(stats) as GameStats) : null
35 | }
36 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Hannah Park
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/components/alerts/Alert.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment } from 'react'
2 | import { Transition } from '@headlessui/react'
3 | import classNames from 'classnames'
4 |
5 | type Props = {
6 | isOpen: boolean
7 | message: string
8 | variant?: 'success' | 'warning'
9 | }
10 |
11 | export const Alert = ({ isOpen, message, variant = 'warning' }: Props) => {
12 | const classes = classNames(
13 | 'fixed top-20 left-1/2 transform -translate-x-1/2 max-w-sm w-full shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden',
14 | {
15 | 'bg-rose-200': variant === 'warning',
16 | 'bg-green-200': variant === 'success',
17 | }
18 | )
19 |
20 | return (
21 |
31 |
32 |
33 |
34 | {message}
35 |
36 |
37 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/keyboard/Key.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react'
2 | import classnames from 'classnames'
3 | import { KeyValue } from '../../lib/keyboard'
4 | import { CharStatus } from '../../lib/statuses'
5 |
6 | type Props = {
7 | children?: ReactNode
8 | value: KeyValue
9 | width?: number
10 | status?: CharStatus
11 | onClick: (value: KeyValue) => void
12 | }
13 |
14 | export const Key = ({
15 | children,
16 | status,
17 | width = 40,
18 | value,
19 | onClick,
20 | }: Props) => {
21 | const classes = classnames(
22 | 'flex items-center justify-center rounded mx-0.5 text-xs font-bold cursor-pointer select-none',
23 | {
24 | 'bg-slate-200 hover:bg-slate-300 active:bg-slate-400': !status,
25 | 'bg-slate-400 text-white': status === 'absent',
26 | 'bg-green-500 hover:bg-green-600 active:bg-green-700 text-white':
27 | status === 'correct',
28 | 'bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700 text-white':
29 | status === 'present',
30 | }
31 | )
32 |
33 | const handleClick: React.MouseEventHandler = (event) => {
34 | onClick(value)
35 | event.currentTarget.blur()
36 | }
37 |
38 | return (
39 |
44 | {children || value}
45 |
46 | )
47 | }
48 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "wordle",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@headlessui/react": "^1.4.2",
7 | "@heroicons/react": "^1.0.5",
8 | "@testing-library/jest-dom": "^5.16.1",
9 | "@testing-library/react": "^12.1.2",
10 | "@testing-library/user-event": "^13.5.0",
11 | "@types/jest": "^27.4.0",
12 | "@types/node": "^16.11.19",
13 | "@types/react": "^17.0.38",
14 | "@types/react-dom": "^17.0.11",
15 | "classnames": "^2.3.1",
16 | "react": "^17.0.2",
17 | "react-dom": "^17.0.2",
18 | "react-scripts": "5.0.0",
19 | "typescript": "^4.5.4",
20 | "web-vitals": "^2.1.3"
21 | },
22 | "scripts": {
23 | "start": "react-scripts start",
24 | "build": "react-scripts build",
25 | "test": "react-scripts test",
26 | "eject": "react-scripts eject"
27 | },
28 | "eslintConfig": {
29 | "extends": [
30 | "react-app",
31 | "react-app/jest"
32 | ]
33 | },
34 | "browserslist": {
35 | "production": [
36 | ">0.2%",
37 | "not dead",
38 | "not op_mini all"
39 | ],
40 | "development": [
41 | "last 1 chrome version",
42 | "last 1 firefox version",
43 | "last 1 safari version"
44 | ]
45 | },
46 | "devDependencies": {
47 | "autoprefixer": "^10.4.2",
48 | "postcss": "^8.4.5",
49 | "tailwindcss": "^3.0.12",
50 | "prettier": "^2.5.1"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/lib/stats.ts:
--------------------------------------------------------------------------------
1 | import {
2 | GameStats,
3 | loadStatsFromLocalStorage,
4 | saveStatsToLocalStorage,
5 | } from './localStorage'
6 |
7 | // In stats array elements 0-5 are successes in 1-6 trys
8 |
9 | export const addStatsForCompletedGame = (
10 | gameStats: GameStats,
11 | count: number
12 | ) => {
13 | // Count is number of incorrect guesses before end.
14 | const stats = { ...gameStats }
15 |
16 | stats.totalGames += 1
17 |
18 | if (count > 5) {
19 | // A fail situation
20 | stats.currentStreak = 0
21 | stats.gamesFailed += 1
22 | } else {
23 | stats.winDistribution[count] += 1
24 | stats.currentStreak += 1
25 |
26 | if (stats.bestStreak < stats.currentStreak) {
27 | stats.bestStreak = stats.currentStreak
28 | }
29 | }
30 |
31 | stats.successRate = getSuccessRate(stats)
32 |
33 | saveStatsToLocalStorage(stats)
34 | return stats
35 | }
36 |
37 | const defaultStats: GameStats = {
38 | winDistribution: [0, 0, 0, 0, 0, 0],
39 | gamesFailed: 0,
40 | currentStreak: 0,
41 | bestStreak: 0,
42 | totalGames: 0,
43 | successRate: 0,
44 | }
45 |
46 | export const loadStats = () => {
47 | return loadStatsFromLocalStorage() || defaultStats
48 | }
49 |
50 | const getSuccessRate = (gameStats: GameStats) => {
51 | const { totalGames, gamesFailed } = gameStats
52 |
53 | return Math.round(
54 | (100 * (totalGames - gamesFailed)) / Math.max(totalGames, 1)
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/modals/InfoModal.tsx:
--------------------------------------------------------------------------------
1 | import { Cell } from '../grid/Cell'
2 | import { BaseModal } from './BaseModal'
3 |
4 | type Props = {
5 | isOpen: boolean
6 | handleClose: () => void
7 | }
8 |
9 | export const InfoModal = ({ isOpen, handleClose }: Props) => {
10 | return (
11 |
12 |
13 | Guess the WORDLE in 6 tries. After each guess, the color of the tiles
14 | will change to show how close your guess was to the word.
15 |
16 |
17 |
18 | |
19 | |
20 | |
21 | |
22 | |
23 |
24 |
25 | The letter W is in the word and in the correct spot.
26 |
27 |
28 |
29 | |
30 | |
31 | |
32 | |
33 | |
34 |
35 |
36 | The letter L is in the word but in the wrong spot.
37 |
38 |
39 |
40 | |
41 | |
42 | |
43 | |
44 | |
45 |
46 |
47 | The letter U is not in the word in any spot.
48 |
49 |
50 | )
51 | }
52 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Wordle Clone
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/components/modals/WinModal.tsx:
--------------------------------------------------------------------------------
1 | import { Dialog } from '@headlessui/react'
2 | import { CheckIcon } from '@heroicons/react/outline'
3 | import { MiniGrid } from '../mini-grid/MiniGrid'
4 | import { shareStatus } from '../../lib/share'
5 | import { BaseModal } from './BaseModal'
6 |
7 | type Props = {
8 | isOpen: boolean
9 | handleClose: () => void
10 | guesses: string[]
11 | handleShare: () => void
12 | }
13 |
14 | export const WinModal = ({
15 | isOpen,
16 | handleClose,
17 | guesses,
18 | handleShare,
19 | }: Props) => {
20 | return (
21 |
22 |
23 |
24 |
26 |
27 |
31 | You won!
32 |
33 |
34 |
35 |
Great job.
36 |
37 |
38 |
40 | {
44 | shareStatus(guesses)
45 | handleShare()
46 | }}
47 | >
48 | Share
49 |
50 |
51 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/src/lib/statuses.ts:
--------------------------------------------------------------------------------
1 | import { solution } from './words'
2 |
3 | export type CharStatus = 'absent' | 'present' | 'correct'
4 |
5 | export type CharValue =
6 | | 'Q'
7 | | 'W'
8 | | 'E'
9 | | 'R'
10 | | 'T'
11 | | 'Y'
12 | | 'U'
13 | | 'I'
14 | | 'O'
15 | | 'P'
16 | | 'A'
17 | | 'S'
18 | | 'D'
19 | | 'F'
20 | | 'G'
21 | | 'H'
22 | | 'J'
23 | | 'K'
24 | | 'L'
25 | | 'Z'
26 | | 'X'
27 | | 'C'
28 | | 'V'
29 | | 'B'
30 | | 'N'
31 | | 'M'
32 |
33 | export const getStatuses = (
34 | guesses: string[]
35 | ): { [key: string]: CharStatus } => {
36 | const charObj: { [key: string]: CharStatus } = {}
37 |
38 | guesses.forEach((word) => {
39 | word.split('').forEach((letter, i) => {
40 | if (!solution.includes(letter)) {
41 | // make status absent
42 | return (charObj[letter] = 'absent')
43 | }
44 |
45 | if (letter === solution[i]) {
46 | //make status correct
47 | return (charObj[letter] = 'correct')
48 | }
49 |
50 | if (charObj[letter] !== 'correct') {
51 | //make status present
52 | return (charObj[letter] = 'present')
53 | }
54 | })
55 | })
56 |
57 | return charObj
58 | }
59 |
60 | export const getGuessStatuses = (guess: string): CharStatus[] => {
61 | const splitSolution = solution.split('')
62 | const splitGuess = guess.split('')
63 |
64 | const solutionCharsTaken = splitSolution.map((_) => false)
65 |
66 | const statuses: CharStatus[] = Array.from(Array(guess.length))
67 |
68 | // handle all correct cases first
69 | splitGuess.forEach((letter, i) => {
70 | if (letter === splitSolution[i]) {
71 | statuses[i] = 'correct'
72 | solutionCharsTaken[i] = true
73 | return
74 | }
75 | })
76 |
77 | splitGuess.forEach((letter, i) => {
78 | if (statuses[i]) return
79 |
80 | if (!splitSolution.includes(letter)) {
81 | // handles the absent case
82 | statuses[i] = 'absent'
83 | return
84 | }
85 |
86 | // now we are left with "present"s
87 | const indexOfPresentChar = splitSolution.findIndex(
88 | (x, index) => x === letter && !solutionCharsTaken[index]
89 | )
90 |
91 | if (indexOfPresentChar > -1) {
92 | statuses[i] = 'present'
93 | solutionCharsTaken[indexOfPresentChar] = true
94 | return
95 | } else {
96 | statuses[i] = 'absent'
97 | return
98 | }
99 | })
100 |
101 | return statuses
102 | }
103 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
15 |
20 |
21 |
30 |
32 |
33 | {/* This element is to trick the browser into centering the modal contents. */}
34 |
38 |
39 |
40 |
49 |
50 |
51 | handleClose()}
54 | />
55 |
56 |
57 |
58 |
62 | {title}
63 |
64 |
65 | {children}
66 |
67 |
68 |
69 |
71 |
73 |
74 | )
75 | }
76 |
--------------------------------------------------------------------------------
/src/components/keyboard/Keyboard.tsx:
--------------------------------------------------------------------------------
1 | import { KeyValue } from '../../lib/keyboard'
2 | import { getStatuses } from '../../lib/statuses'
3 | import { Key } from './Key'
4 | import { useEffect } from 'react'
5 |
6 | type Props = {
7 | onChar: (value: string) => void
8 | onDelete: () => void
9 | onEnter: () => void
10 | guesses: string[]
11 | }
12 |
13 | export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
14 | const charStatuses = getStatuses(guesses)
15 |
16 | const onClick = (value: KeyValue) => {
17 | if (value === 'ENTER') {
18 | onEnter()
19 | } else if (value === 'DELETE') {
20 | onDelete()
21 | } else {
22 | onChar(value)
23 | }
24 | }
25 |
26 | useEffect(() => {
27 | const listener = (e: KeyboardEvent) => {
28 | if (e.code === 'Enter') {
29 | onEnter()
30 | } else if (e.code === 'Backspace') {
31 | onDelete()
32 | } else {
33 | const key = e.key.toUpperCase()
34 | if (key.length === 1 && key >= 'A' && key <= 'Z') {
35 | onChar(key)
36 | }
37 | }
38 | }
39 | window.addEventListener('keyup', listener)
40 | return () => {
41 | window.removeEventListener('keyup', listener)
42 | }
43 | }, [onEnter, onDelete, onChar])
44 |
45 | return (
46 |
47 |
48 |
59 |
60 |
70 |
71 |
72 | Enter
73 |
74 |
82 | Delete
83 |
84 |
85 |
(() => {
30 | const loaded = loadGameStateFromLocalStorage()
31 | if (loaded?.solution !== solution) {
32 | return []
33 | }
34 | const gameWasWon = loaded.guesses.includes(solution)
35 | if (gameWasWon) {
36 | setIsGameWon(true)
37 | }
38 | if (loaded.guesses.length === 6 && !gameWasWon) {
39 | setIsGameLost(true)
40 | }
41 | return loaded.guesses
42 | })
43 |
44 | const [stats, setStats] = useState(() => loadStats())
45 |
46 | useEffect(() => {
47 | saveGameStateToLocalStorage({ guesses, solution })
48 | }, [guesses])
49 |
50 | useEffect(() => {
51 | if (isGameWon) {
52 | setIsWinModalOpen(true)
53 | }
54 | }, [isGameWon])
55 |
56 | const onChar = (value: string) => {
57 | if (currentGuess.length < 5 && guesses.length < 6 && !isGameWon) {
58 | setCurrentGuess(`${currentGuess}${value}`)
59 | }
60 | }
61 |
62 | const onDelete = () => {
63 | setCurrentGuess(currentGuess.slice(0, -1))
64 | }
65 |
66 | const onEnter = () => {
67 | if (!(currentGuess.length === 5) && !isGameLost) {
68 | setIsNotEnoughLetters(true)
69 | return setTimeout(() => {
70 | setIsNotEnoughLetters(false)
71 | }, 2000)
72 | }
73 |
74 | if (!isWordInWordList(currentGuess)) {
75 | setIsWordNotFoundAlertOpen(true)
76 | return setTimeout(() => {
77 | setIsWordNotFoundAlertOpen(false)
78 | }, 2000)
79 | }
80 |
81 | const winningWord = isWinningWord(currentGuess)
82 |
83 | if (currentGuess.length === 5 && guesses.length < 6 && !isGameWon) {
84 | setGuesses([...guesses, currentGuess])
85 | setCurrentGuess('')
86 |
87 | if (winningWord) {
88 | setStats(addStatsForCompletedGame(stats, guesses.length))
89 | return setIsGameWon(true)
90 | }
91 |
92 | if (guesses.length === 5) {
93 | setStats(addStatsForCompletedGame(stats, guesses.length + 1))
94 | setIsGameLost(true)
95 | }
96 | }
97 | }
98 |
99 | return (
100 |
101 |
102 |
Not Wordle
103 | setIsInfoModalOpen(true)}
106 | />
107 | setIsStatsModalOpen(true)}
110 | />
111 |
112 |
113 |
119 |
setIsWinModalOpen(false)}
122 | guesses={guesses}
123 | handleShare={() => {
124 | setIsWinModalOpen(false)
125 | setShareComplete(true)
126 | return setTimeout(() => {
127 | setShareComplete(false)
128 | }, 2000)
129 | }}
130 | />
131 | setIsInfoModalOpen(false)}
134 | />
135 | setIsStatsModalOpen(false)}
138 | gameStats={stats}
139 | />
140 | setIsAboutModalOpen(false)}
143 | />
144 |
145 | setIsAboutModalOpen(true)}
149 | >
150 | About this game
151 |
152 |
153 |