first commit

This commit is contained in:
2026-05-26 16:04:55 +02:00
commit 9c2f59ee6a
15 changed files with 3503 additions and 0 deletions
+140
View File
@@ -0,0 +1,140 @@
import React from "react"
import { clsx } from "clsx"
import Confetti from "react-confetti"
import { languages } from "./languages"
import { getFarewellText, getRandomWord } from "./utils"
export default function AssemblyEndgame() {
const [currentWord, setCurrentWord] = React.useState(() => getRandomWord())
const [guessedLetters, setGuessedLetters] = React.useState([])
const nbOfGuessesLeft = languages.length - 1
const wrongGuessCount = guessedLetters.filter(letter => (!currentWord.includes(letter))).length
const isGameWon = Array.from(currentWord).every(letter => guessedLetters.includes(letter))
const isGameLost = wrongGuessCount >= languages.length - 1
const isGameOver = isGameWon || isGameLost
const lastGuess = guessedLetters[guessedLetters.length - 1]
const isLastGuessIncorrect = lastGuess && !currentWord.includes(lastGuess)
const alphabet = "abcdefghijklmnopqrstuvwxyz"
const languageChips = languages.map((language, index) => {
const style = { backgroundColor: language.backgroundColor, color: language.color }
const className = clsx("chip", {
lost: index < wrongGuessCount
})
return (
<span
key={language.name}
className={className}
style={style}
>
{language.name}
</span>
)
})
const letterElements = Array.from(currentWord).map((letter, index) => {
const letterClassName = clsx({
missing: isGameLost && !guessedLetters.includes(letter)
})
return <span className={letterClassName} key={index}>{(guessedLetters.includes(letter) || isGameLost) && letter.toUpperCase()}</span>
})
const keyboardElements = Array.from(alphabet).map(letter => {
const isGuessed = guessedLetters.includes(letter)
const isRight = isGuessed && currentWord.includes(letter)
const isWrong = isGuessed && !currentWord.includes(letter)
const className = clsx({
right: isRight,
wrong: isWrong
})
return (
<button
key={letter}
disabled={isGameOver}
aria-disabled={guessedLetters.includes(letter)}
aria-label={`̀Letter ${letter}`}
onClick={() => addLetter(letter)}
className={className}
>
{letter.toUpperCase()}
</button>
)
})
function addLetter(letter) {
setGuessedLetters(prevLetters => (!prevLetters.includes(letter) ? [...prevLetters, letter] : prevLetters))
}
function resetGame() {
setCurrentWord(getRandomWord())
setGuessedLetters([])
}
const gameStatusClassName = clsx("game-status", {
lost: isGameLost,
won: isGameWon,
farewell: !isGameOver && isLastGuessIncorrect
})
function renderGameStatus() {
if (!isGameOver) {
if (!isLastGuessIncorrect) return null;
const goneLanguage = languages[wrongGuessCount - 1]
return (
<p>"{getFarewellText(goneLanguage.name)}" 🫡</p>
)
}
return (
<>
<h2>{isGameWon ? "You win!" : isGameLost ? "Game over!" : ""}</h2>
<p>{isGameWon ? "Well done! 🎉" : isGameLost ? "You lose! Better start learning Assembly 😭" : ""}</p>
</>
)
}
return (
<main>
{isGameWon && <Confetti recycle={false} numberOfPieces={1000} />}
<header>
<h1>Assembly: Endgame</h1>
<p>Guess the word in under 8 attempts to keep the programming world safe from Assembly!</p>
</header>
<section aria-live="polite" role="status" className={gameStatusClassName}>
{renderGameStatus()}
</section>
<section className="language-chips">
{languageChips}
</section>
<section className="current-word">
{letterElements}
</section>
{/* Visually-hidden aria-live section for status updates */}
<section className="sr-only" aria-live="polite" role="status">
<p>
{
isLastGuessIncorrect ?
`Sorry, the letter ${lastGuess} is not in the word`
: `Correct! The letter ${lastGuess} is in the word`
}
You have {nbOfGuessesLeft} guesses left.
</p>
<p>Current word : {Array.from(currentWord).map(letter => guessedLetters.includes(letter) ? letter + "." : "blank").join(" ")}</p>
</section>
<section className="keyboard">
{keyboardElements}
</section>
{isGameOver && <button className="new-game" onClick={() => resetGame()}>New Game</button>}
</main>
)
}
+182
View File
@@ -0,0 +1,182 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Hanken Grotesk", Arial, sans-serif;
background-color: #262626;
color: #D9D9D9;
padding: 20px;
height: 100vh;
}
main {
display: flex;
flex-direction: column;
align-items: center;
}
button {
font-family: "Hanken Grotesk", Arial, sans-serif;
}
header {
text-align: center;
}
header>h1 {
color: #F9F4DA;
font-weight: 500;
font-size: 1.25rem;
}
header>p {
color: #8E8E8E;
max-width: 350px;
font-size: 0.875rem;
}
section.game-status {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 350px;
width: 100%;
height: 60px;
border-radius: 4px;
color: #F9F4DA;
margin-block: 30px;
}
section.game-status.won {
background-color: #10A95B;
}
section.game-status.lost {
background-color: #BA2A2A;
}
section.game-status.farewell {
background-color: #7A5EA7;
font-style: italic;
border: 1px dashed #323232;
}
section.game-status>h2 {
font-weight: 400;
margin: 5px;
margin-bottom: 0px;
font-size: 1.25rem;
}
section.game-status>p {
margin: 5px;
}
section.language-chips {
max-width: 350px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px;
margin: auto;
}
section.language-chips>span.chip {
border-radius: 3px;
padding: 4px 5px;
font-size: 0.75rem;
font-weight: 600;
position: relative;
}
section.language-chips>span.chip.lost::before {
content: "💀";
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
font-size: 0.85rem;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
}
section.current-word {
display: flex;
justify-content: center;
margin-block: 35px;
gap: 3px;
}
section.current-word>span {
border-bottom: 1px solid #F9F4DA;
font-size: 1.125rem;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: #323232;
}
section.current-word>span.missing {
color: #EC5D49;
}
section.keyboard {
max-width: 450px;
margin-block: 35px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
section.keyboard>button {
background-color: #FCBA29;
border-radius: 4px;
border: 1px solid #d7d7d7;
height: 35px;
width: 35px;
font-weight: 500;
}
button.new-game {
background-color: #11B5E5;
border: 1px solid #D7D7D7;
border-radius: 4px;
width: 225px;
height: 40px;
padding: 6px 12px;
display: block;
margin-inline: auto;
cursor: pointer;
}
section.keyboard>button.right {
background-color: #10A95B;
}
section.keyboard>button.wrong {
background-color: #EC5D49;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
+10
View File
@@ -0,0 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
+47
View File
@@ -0,0 +1,47 @@
export const languages = [
{
name: "HTML",
backgroundColor: "#E2680F",
color: "#F9F4DA",
},
{
name: "CSS",
backgroundColor: "#328AF1",
color: "#F9F4DA",
},
{
name: "JavaScript",
backgroundColor: "#F4EB13",
color: "#1E1E1E",
},
{
name: "React",
backgroundColor: "#2ED3E9",
color: "#1E1E1E",
},
{
name: "TypeScript",
backgroundColor: "#298EC6",
color: "#F9F4DA",
},
{
name: "Node.js",
backgroundColor: "#599137",
color: "#F9F4DA",
},
{
name: "Python",
backgroundColor: "#FFD742",
color: "#1E1E1E",
},
{
name: "Ruby",
backgroundColor: "#D02B2B",
color: "#F9F4DA",
},
{
name: "Assembly",
backgroundColor: "#2D519F",
color: "#F9F4DA",
},
]
+26
View File
@@ -0,0 +1,26 @@
import { words } from "./words"
export function getFarewellText(language) {
const options = [
`Farewell, ${language}`,
`Adios, ${language}`,
`R.I.P., ${language}`,
`We'll miss you, ${language}`,
`Oh no, not ${language}!`,
`${language} bites the dust`,
`Gone but not forgotten, ${language}`,
`The end of ${language} as we know it`,
`Off into the sunset, ${language}`,
`${language}, it's been real`,
`${language}, your watch has ended`,
`${language} has left the building`
];
const randomIndex = Math.floor(Math.random() * options.length);
return options[randomIndex];
}
export function getRandomWord() {
const randomIndex = Math.floor(Math.random() * words.length)
return words[randomIndex]
}
+484
View File
@@ -0,0 +1,484 @@
export const words = [
"about",
"account",
"across",
"addition",
"after",
"again",
"against",
"agreement",
"almost",
"among",
"amount",
"amusement",
"angle",
"angry",
"animal",
"answer",
"apparatus",
"apple",
"approval",
"argument",
"attack",
"attempt",
"attention",
"authority",
"automatic",
"awake",
"balance",
"basin",
"basket",
"beautiful",
"because",
"before",
"behaviour",
"belief",
"berry",
"between",
"birth",
"bitter",
"black",
"blade",
"blood",
"board",
"boiling",
"bottle",
"brain",
"brake",
"branch",
"brass",
"bread",
"breath",
"brick",
"bridge",
"bright",
"broken",
"brother",
"brown",
"brush",
"bucket",
"building",
"burst",
"business",
"butter",
"button",
"camera",
"canvas",
"carriage",
"cause",
"certain",
"chain",
"chalk",
"chance",
"change",
"cheap",
"cheese",
"chemical",
"chest",
"chief",
"church",
"circle",
"clean",
"clear",
"clock",
"cloth",
"cloud",
"collar",
"colour",
"comfort",
"committee",
"common",
"company",
"complete",
"complex",
"condition",
"conscious",
"control",
"copper",
"cotton",
"cough",
"country",
"cover",
"crack",
"credit",
"crime",
"cruel",
"crush",
"current",
"curtain",
"curve",
"cushion",
"damage",
"danger",
"daughter",
"death",
"decision",
"degree",
"delicate",
"dependent",
"design",
"desire",
"detail",
"different",
"digestion",
"direction",
"dirty",
"discovery",
"disease",
"disgust",
"distance",
"division",
"doubt",
"drain",
"drawer",
"dress",
"drink",
"driving",
"early",
"earth",
"education",
"effect",
"elastic",
"electric",
"engine",
"enough",
"equal",
"error",
"event",
"every",
"example",
"exchange",
"existence",
"expansion",
"expert",
"false",
"family",
"father",
"feather",
"feeble",
"feeling",
"female",
"fertile",
"fiction",
"field",
"fight",
"finger",
"first",
"fixed",
"flame",
"flight",
"floor",
"flower",
"foolish",
"force",
"forward",
"frame",
"frequent",
"friend",
"front",
"fruit",
"future",
"garden",
"general",
"glass",
"glove",
"grain",
"grass",
"great",
"green",
"group",
"growth",
"guide",
"hammer",
"hanging",
"happy",
"harbour",
"harmony",
"healthy",
"hearing",
"heart",
"history",
"hollow",
"horse",
"hospital",
"house",
"humour",
"important",
"impulse",
"increase",
"industry",
"insect",
"insurance",
"interest",
"invention",
"island",
"jelly",
"jewel",
"journey",
"judge",
"kettle",
"knife",
"knowledge",
"language",
"laugh",
"learning",
"leather",
"letter",
"level",
"library",
"light",
"limit",
"linen",
"liquid",
"little",
"living",
"loose",
"machine",
"manager",
"market",
"married",
"match",
"material",
"measure",
"medical",
"meeting",
"memory",
"metal",
"middle",
"military",
"minute",
"mixed",
"money",
"monkey",
"month",
"morning",
"mother",
"motion",
"mountain",
"mouth",
"muscle",
"music",
"narrow",
"nation",
"natural",
"necessary",
"needle",
"nerve",
"night",
"noise",
"normal",
"north",
"number",
"offer",
"office",
"operation",
"opinion",
"opposite",
"orange",
"order",
"ornament",
"other",
"owner",
"paint",
"paper",
"parallel",
"parcel",
"paste",
"payment",
"peace",
"pencil",
"person",
"physical",
"picture",
"place",
"plane",
"plant",
"plate",
"please",
"pleasure",
"plough",
"pocket",
"point",
"poison",
"polish",
"political",
"porter",
"position",
"possible",
"potato",
"powder",
"power",
"present",
"price",
"print",
"prison",
"private",
"probable",
"process",
"produce",
"profit",
"property",
"prose",
"protest",
"public",
"purpose",
"quality",
"question",
"quick",
"quiet",
"quite",
"range",
"reaction",
"reading",
"ready",
"reason",
"receipt",
"record",
"regret",
"regular",
"relation",
"religion",
"request",
"respect",
"reward",
"rhythm",
"right",
"river",
"rough",
"round",
"scale",
"school",
"science",
"scissors",
"screw",
"second",
"secret",
"secretary",
"selection",
"sense",
"separate",
"serious",
"servant",
"shade",
"shake",
"shame",
"sharp",
"sheep",
"shelf",
"shirt",
"shock",
"short",
"silver",
"simple",
"sister",
"skirt",
"sleep",
"slope",
"small",
"smash",
"smell",
"smile",
"smoke",
"smooth",
"snake",
"sneeze",
"society",
"solid",
"sound",
"south",
"space",
"spade",
"special",
"sponge",
"spoon",
"spring",
"square",
"stage",
"stamp",
"start",
"statement",
"station",
"steam",
"steel",
"stick",
"sticky",
"stiff",
"still",
"stitch",
"stocking",
"stomach",
"stone",
"store",
"story",
"straight",
"strange",
"street",
"stretch",
"strong",
"structure",
"substance",
"sudden",
"sugar",
"summer",
"support",
"surprise",
"sweet",
"system",
"table",
"taste",
"teaching",
"tendency",
"theory",
"there",
"thick",
"thing",
"thought",
"thread",
"throat",
"through",
"through",
"thumb",
"thunder",
"ticket",
"tight",
"tired",
"together",
"tomorrow",
"tongue",
"tooth",
"touch",
"trade",
"train",
"transport",
"trick",
"trouble",
"trousers",
"twist",
"umbrella",
"under",
"value",
"verse",
"vessel",
"violent",
"voice",
"waiting",
"waste",
"watch",
"water",
"weather",
"weight",
"wheel",
"where",
"while",
"whistle",
"white",
"window",
"winter",
"woman",
"wound",
"writing",
"wrong",
"yellow",
"yesterday",
"young"
];