import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
const artworks = [
{
artist: "KERRY JAMES MARSHALL",
title: "Untitled (Studio)",
imageUrl: "https://upload.wikimedia.org/wikipedia/en/7/7e/Untitled_%28Studio%29%2C_2014%2C_Kerry_James_Marshall.jpg",
year: "2014",
city: "Birmingham",
hints: [
"This artwork was made in 2014.",
"This artist was born in Birmingham, Alabama.",
"Associated with the Black Arts Movement.",
"His paintings are known for their large scale and richly layered imagery.",
"He is praised for powerful depictions of Black life."
],
wikiLink: "https://en.wikipedia.org/wiki/Kerry_James_Marshall"
},
{
artist: "AARON DOUGLAS",
title: "Into Bondage",
imageUrl: "https://upload.wikimedia.org/wikipedia/en/7/75/Into_Bondage_Douglas_1936.jpg",
year: "1936",
city: "Topeka",
hints: [
"This artwork was made in 1936.",
"This artist was born in Topeka, Kansas.",
"He was a major figure in the Harlem Renaissance.",
"His style is characterized by silhouetted figures and concentric circles of light.",
"He is often called the 'father of African American art.'"
],
wikiLink: "https://en.wikipedia.org/wiki/Aaron_Douglas"
},
{
artist: "FAITH RINGGOLD",
title: "Groovin' High",
imageUrl: "https://d32dm0rphc51dk.cloudfront.net/acoK5V95RvwW463O3gHvvA/large.jpg",
year: "1996",
city: "New York City",
hints: [
"This artwork was made in 1996.",
"This artist was born in NYC, New York.",
"She is famous for her narrative quilts and mixed media work.",
"Also well known for her award-winning children's book Tar Beach- which she both wrote and illustrated.",
"This artist passed away in 2024 at the age of 93.'"
],
wikiLink: "https://en.wikipedia.org/wiki/Faith_Ringgold"
},
{
artist: "HENRY O TANNER",
title: "The Banjo Lesson",
imageUrl: "https://upload.wikimedia.org/wikipedia/commons/8/80/Henry_Ossawa_Tanner%2C_The_Banjo_Lesson_%28darker%29.jpg",
year: "1893",
city: "Pittsburgh",
hints: [
"This artwork was made in 1893.",
"This artist was born in Pittsburgh, Pennsylvania.",
"Associated with Realism and religious symbolism.",
"He was the first African American painter to gain international acclaim.",
"Known for sensitive portrayals of Black life and biblical scenes."
],
wikiLink: "https://en.wikipedia.org/wiki/Henry_Ossawa_Tanner"
},
{
artist: "AUGUSTA SAVAGE",
title: "Gamin",
imageUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Augusta_Savage_-_Gamin_-_2003.40_-_Cleveland_Museum_of_Art.jpg/800px-Augusta_Savage_-_Gamin_-_2003.40_-_Cleveland_Museum_of_Art.jpg",
year: "1929",
city: "Green Cove Springs",
hints: [
"This sculpture was made in 1929.",
"This artist was born in Green Cove Springs, Florida.",
"Important figure in the Harlem Renaissance.",
"She founded the Savage Studio of Arts and Crafts in Harlem.",
"Known for her portraits and busts of African American figures."
],
wikiLink: "https://en.wikipedia.org/wiki/Augusta_Savage"
},
{
artist: "JACOB LAWRENCE",
title: "The Migration Series Panel No. 1",
imageUrl: "https://en.wikipedia.org/wiki/The_Migration_Series#/media/File:Migration_Series_Panel_1.jpg",
year: "1940",
city: "Atlantic City",
hints: [
"This artwork was made in 1940.",
"This artist was born in Atlantic City, New Jersey.",
"Known for his bold use of color and simplified figures.",
"He chronicled African American life and history.",
"His 'Migration Series' is among his most celebrated works."
],
wikiLink: "https://en.wikipedia.org/wiki/Jacob_Lawrence"
},
{
artist: "CHARLES WHITE",
title: "Harvest Talk",
imageUrl: "https://www.arthistoryproject.com/site/assets/files/31640/charles_white-harvest_talk-1953-trivium-art-history.800x0.jpg",
year: "1953",
city: "Chicago",
hints: [
"This artwork was made in 1953.",
"This artist was born in Chicago, Illinois.",
"He was a master draftsman and printmaker.",
"His works center on Black dignity and resilience.",
"Taught many students including Kerry James Marshall."
],
wikiLink: "https://en.wikipedia.org/wiki/Charles_White_(artist)"
},
{
artist: "ROMARE BEARDEN",
title: "Patchwork Quilt",
imageUrl: "https://upload.wikimedia.org/wikipedia/en/4/48/Romare_Bearden_-_Patchwork_Quilt._1970._Cut-and-pasted_cloth_and_paper_with_synthetic_polymer_paint_on_composition_board%2C_Museum_of_Modern_Art.jpg",
year: "1970",
city: "Charlotte",
hints: [
"This artwork was made in 1970.",
"This artist was born in Charlotte, North Carolina.",
"Known for collage and photomontage techniques.",
"Often depicted scenes of African American community life.",
"He is one of the most important American artists of the 20th century."
],
wikiLink: "https://en.wikipedia.org/wiki/Romare_Bearden"
},
{
artist: "ALMA THOMAS",
title: "Resurrection",
imageUrl: "https://upload.wikimedia.org/wikipedia/en/7/70/Resurrection%2C_1966%2C_Alma_Thomas_at_SAAM_2023.jpg",
year: "1966",
city: "Columbus",
hints: [
"This artwork was made in 1966.",
"This artist was born in Columbus, Georgia.",
"Known for her vibrant abstract paintings.",
"She was the first African American woman to have a solo exhibition at the Whitney Museum.",
"Her style is often associated with color field painting."
],
wikiLink: "https://en.wikipedia.org/wiki/Alma_Thomas"
},
{
artist: "EMMA AMOS",
title: "Tumbling After",
imageUrl: "https://upload.wikimedia.org/wikipedia/en/a/a1/Tumbling_After%2C_1986%2C_Emma_Amos_at_BMA_2022.jpeg",
year: "1986",
city: "Atlanta",
hints: [
"This artwork was made in 1986.",
"This artist was born in Atlanta, Georgia.",
"She was the only female member of the African American artist collective Spiral.",
"Her work blends printmaking, painting, and textiles.",
"Themes of race, gender, and power are central to her work."
],
wikiLink: "https://en.wikipedia.org/wiki/Emma_Amos"
},
{
artist: "SAM GILLIAM",
title: "Swing",
imageUrl: "https://upload.wikimedia.org/wikipedia/en/1/1a/Swing%2C_1969%2C_Sam_Gilliam%2C_SAAM_2023.jpeg",
year: "1969",
city: "Tupelo",
hints: [
"This artwork was made in 1969.",
"This artist was born in Tupelo, Mississippi.",
"Known for his draped, painted canvases.",
"Pioneered Color Field painting in three dimensions.",
"He was a major figure in the Washington Color School."
],
wikiLink: "https://en.wikipedia.org/wiki/Sam_Gilliam"
},
{
artist: "BETYE SAAR",
title: "The Liberation of Aunt Jemima",
imageUrl: "https://upload.wikimedia.org/wikipedia/en/d/dc/The_Liberation_of_Aunt_Jemima%2C_1972%2C_Betye_Saar.jpeg",
year: "1972",
city: "Los Angeles",
hints: [
"This artwork was made in 1972.",
"This artist was born in Los Angeles, California.",
"She is known for assemblage art that challenges stereotypes.",
"Her work confronts racism and empowers Black identity.",
"One of her most iconic works is a mixed media piece featuring Aunt Jemima."
],
wikiLink: "https://en.wikipedia.org/wiki/Betye_Saar"
},
{
artist: "NELLIE MAE ROWE",
title: "Untitled (Atlanta’s Missing Children, Figure with Headdress)",
imageUrl: "https://highmuseum-redesign.s3.amazonaws.com/uploads/2023/02/db_photod4040u928404022003.213RoweRGB_o2-1480x1280-1024x886.jpg",
year: "1981",
city: "Fayette County",
hints: [
"This artwork was made in 1981.",
"This artist was born in Fayette County, Georgia.",
"A leading figure in American folk art.",
"Her colorful works often included animals and domestic scenes.",
"She created an 'art yard' around her home filled with sculptures."
],
wikiLink: "https://en.wikipedia.org/wiki/Nellie_Mae_Rowe"
},
{
artist: "HOWARDENA PINDELL",
title: "Untitled, 2010",
imageUrl: "https://64.media.tumblr.com/f5a437a7cb3e5c4a2e20f6a9f60706c2/tumblr_inline_p4msy1s36R1r1yac2_500.jpg",
year: "2010",
city: "Philadelphia",
hints: [
"This artwork was made in 2010.",
"This artist was born in Philadelphia, Pennsylvania.",
"Combines painting with personal and political narratives.",
"Was one of the first Black curators at MoMA.",
"Her work frequently addresses racism, feminism, and identity."
],
wikiLink: "https://en.wikipedia.org/wiki/Howardena_Pindell"
},
{
artist: "ADRIAN PIPER",
title: "Self-Portrait Exaggerating My Negroid Features",
imageUrl: "https://upload.wikimedia.org/wikipedia/commons/d/d0/AdrianPiper1981Self-Portrait_Exaggerating.png",
year: "1981",
city: "New York City",
hints: [
"This artwork was made in 1981.",
"This artist was born in New York City.",
"Uses conceptual and performance art to explore identity.",
"Her work often challenges assumptions about race and gender.",
"She was the first tenured African American woman professor of philosophy."
],
wikiLink: "https://en.wikipedia.org/wiki/Adrian_Piper"
},
{
artist: "FRED WILSON",
title: "Artemis/Bast",
imageUrl: "https://upload.wikimedia.org/wikipedia/en/3/34/Artemis_-_Bast%2C_1992%2C_Fred_Wilson_at_BMA_2022.jpeg",
year: "1992",
city: "The Bronx",
hints: [
"This artwork was made in 1992.",
"This artist was born in The Bronx, New York.",
"Known for using museum spaces to reveal hidden histories.",
"His installations juxtapose historical artifacts to expose racism.",
"He represented the US at the Venice Biennale in 2003."
],
wikiLink: "https://en.wikipedia.org/wiki/Fred_Wilson_(artist)"
},
{
artist: "KEHINDE WILEY",
title: "Saint Adelaide",
imageUrl: "https://upload.wikimedia.org/wikipedia/commons/7/7a/Saint_Adelaide%2C_Kehinde_Wiley_2014_-_Stained_Glass_Museum.jpg",
year: "2014",
city: "Los Angeles",
hints: [
"This artwork was made in 2014.",
"This artist was born in Los Angeles, California.",
"Known for reimagining classical portraits with Black subjects.",
"Painted Barack Obama’s official presidential portrait.",
"His work blends hip-hop culture with Renaissance aesthetics."
],
wikiLink: "https://en.wikipedia.org/wiki/Kehinde_Wiley"
},
{
artist: "MICKALENE THOMAS",
title: "Mama Bush: One of a Kind Two",
imageUrl: "https://www.joanmitchellfoundation.org/uploads/artwork/supported-artists/PS-2009-MickaleneThomas1.jpg",
year: "2009",
city: "Camden",
hints: [
"This artwork was made in 2009.",
"This artist was born in Camden, New Jersey.",
"Her work combines rhinestones, acrylic, and enamel.",
"Reclaims and reinterprets images of Black femininity.",
"Influenced by art history, pop culture, and fashion."
],
wikiLink: "https://en.wikipedia.org/wiki/Mickalene_Thomas"
},
{
artist: "ROBERT COLESCOTT",
title: "The Wreckage of the Medusa",
imageUrl: "https://static01.nyt.com/images/2022/07/07/arts/07colescott-new-museum-review4/07colescott-new-museum-review4-mediumSquareAt3X.jpg",
year: "1978",
city: "Oakland",
hints: [
"This artwork was made in 1978.",
"This artist was born in Oakland, California.",
"Known for bold, satirical works confronting racism.",
"Often parodied historical paintings and stereotypes.",
"He was the first African American artist to represent the US at the Venice Biennale."
],
wikiLink: "https://en.wikipedia.org/wiki/Robert_Colescott"
},
{
artist: "JEAN-MICHEL BASQUIAT",
title: "Untitled (Skull)",
imageUrl: "https://upload.wikimedia.org/wikipedia/en/e/e1/Untitled_acrylic_and_mixed_media_on_canvas_by_--Jean-Michel_Basquiat--%2C_1984.jpg",
year: "1981",
city: "Brooklyn",
hints: [
"This artwork was made in 1981.",
"This artist was born in Brooklyn, New York.",
"Rose to fame as a graffiti artist before breaking into fine art.",
"His work explores race, identity, and social commentary.",
"He became a global icon of the neo-expressionist movement."
],
wikiLink: "https://en.wikipedia.org/wiki/Jean-Michel_Basquiat"
},
{
artist: "NICK CAVE",
title: "Soundsuit",
imageUrl: "https://upload.wikimedia.org/wikipedia/en/0/0b/Soundsuit_by_Nick_Cave.jpg",
year: "2009",
city: "Fulton",
hints: [
"This artwork was made in 2009.",
"This artist was born in Fulton, Missouri.",
"Known for wearable sculptures called Soundsuits.",
"Combines performance, sculpture, and fashion.",
"His work addresses race, identity, and social justice."
],
wikiLink: "https://en.wikipedia.org/wiki/Nick_Cave_(performance_artist)"
}
];
const maxAttempts = 5;
const getColor = (letter, index, answer, word) => {
if (!answer.includes(letter)) return "bg-neutral-300 text-black";
if (answer[index] === letter) return "bg-green-600 text-white";
return word.split('').filter((l, i) => l === letter && answer[i] !== letter).length > 0
? "bg-yellow-500 text-black"
: "bg-neutral-300 text-black";
};
export default function ArtWordle() {
const [artIndex, setArtIndex] = useState(0);
const artwork = artworks[artIndex];
const answer = artwork?.artist;
const [step, setStep] = useState(0);
const [guess, setGuess] = useState("");
const [guesses, setGuesses] = useState([]);
const [showHint, setShowHint] = useState(false);
const [isCorrect, setIsCorrect] = useState(false);
const [darkMode, setDarkMode] = useState(false);
const handleSubmit = () => {
if (!answer) return;
const upperGuess = guess.toUpperCase().padEnd(answer.length);
const newGuesses = [...guesses, upperGuess];
setGuesses(newGuesses);
setGuess("");
setShowHint(false);
if (upperGuess.trim() === answer) {
setIsCorrect(true);
} else if (step < maxAttempts - 1) {
setStep(step + 1);
} else {
setStep(maxAttempts);
}
};
const renderGuessBoxes = (word, reveal = true) => {
return answer.split("").map((char, idx) => {
const guessedLetter = word[idx] || "";
const colorClass =
guessedLetter === ""
? darkMode
? "bg-neutral-800 border-neutral-600"
: "bg-white border-neutral-400"
: guessedLetter === " "
? darkMode
? "bg-neutral-800 border-neutral-800"
: "bg-white border-white"
: reveal
? getColor(guessedLetter, idx, answer, word)
: darkMode
? "bg-neutral-800 border-neutral-600"
: "bg-white border-neutral-400";
return (
);
}
{guessedLetter === " " ? "" : guessedLetter}
);
});
};
const handleNextArtwork = () => {
let nextIndex = artIndex;
while (artworks.length > 1 && nextIndex === artIndex) {
nextIndex = Math.floor(Math.random() * artworks.length);
}
setArtIndex(nextIndex);
setStep(0);
setGuess("");
setGuesses([]);
setShowHint(false);
setIsCorrect(false);
};
const currentGuess = guess.toUpperCase().padEnd(answer.length, " ");
const isGameOver = guesses.length >= maxAttempts && !isCorrect;
const bgClass = darkMode ? "bg-neutral-900 text-white" : "bg-neutral-100 text-black";
const textHintClass = darkMode ? "text-neutral-300" : "text-neutral-600";
const linkTextColor = darkMode ? "text-blue-400" : "text-blue-600";
const inputTextColor = darkMode ? "text-white placeholder-neutral-400" : "text-black";
return (
Guess the Artist
"{artwork?.title}"
{!showHint ? (
) : (
)}
{showHint && step < artwork.hints.length && (
Hint: {artwork.hints[step]}
)}
Attempt {guesses.length + (isCorrect || isGameOver ? 0 : 1)} of {maxAttempts}
{guesses.map((g, idx) => (
{!isCorrect && !isGameOver ? (
{renderGuessBoxes(g, true)}
))}
{!isCorrect && !isGameOver && (
{renderGuessBoxes(currentGuess, false)}
)}
setGuess(e.target.value)}
placeholder="Guess the artist's name"
className={`w-full max-w-sm border border-neutral-400 ${inputTextColor}`}
/>
) : isCorrect ? (
<>
Congratulations! The artist is {answer}.
Who is {answer}? → Learn more
> ) : ( <>Sorry, the artist of this work is {answer}.
Who is {answer}? → Learn more
> )}