154 lines
7.5 KiB
Markdown
154 lines
7.5 KiB
Markdown
JASNE UPUTE ZA AI AGENTA: Dodavanje obojenih pozadina za vrste riječi
|
|
|
|
KONTEKST
|
|
Na originalnoj aplikaciji (slika: original/1 dodaj rijeci.png), svaka riječ u rječniku prikazuje se kao gumb s obojenom pozadinom koja ovisi o vrsti riječi (wordType). Trenutno aplikacija prikazuje vrstu riječi samo kao sivi tekst bez pozadinske
|
|
boje.
|
|
|
|
PRIMJERI SA SLIKE
|
|
• "adresa" (Imenica/NOUN) → zelena pozadina
|
|
• "Analizirati" (Glagol/VERB) → crvena pozadina
|
|
|
|
ZADATAK
|
|
Promijeni kod tako da tekst riječi (wordText) u WordCard komponenti ima obojenu pozadinu koja odgovara vrsti riječi, baš kao na originalnoj slici.
|
|
|
|
|
|
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
|
|
|
|
KORACI ZA IMPLEMENTACIJU
|
|
|
|
1. Kreiraj mapiranje boja za vrste riječi
|
|
|
|
U datoteci packages/frontend/src/components/dictionary/WordCard.tsx, dodaj novo mapiranje boja za vrste riječi (wordType), slično kao što već postoji cefrColors za CEFR razine:
|
|
|
|
const wordTypeColors: Record<string, string> = {
|
|
NOUN: 'bg-green-600', // Imenica - zelena
|
|
VERB: 'bg-red-600', // Glagol - crvena
|
|
ADJECTIVE: 'bg-blue-600', // Pridjev - plava
|
|
ADVERB: 'bg-purple-600', // Prilog - ljubičasta
|
|
PRONOUN: 'bg-yellow-600', // Zamjenica - žuta
|
|
PREPOSITION: 'bg-orange-600', // Prijedlog - narančasta
|
|
CONJUNCTION: 'bg-pink-600', // Veznik - roza
|
|
INTERJECTION: 'bg-teal-600', // Uzvik - tirkizna
|
|
PHRASE: 'bg-indigo-600', // Fraza - indigo
|
|
OTHER: 'bg-gray-600', // Ostalo - siva
|
|
};
|
|
|
|
NAPOMENA: Prilagodi boje prema točnim bojama sa slike ako imaš pristup slici. Ovo su prijedlozi.
|
|
|
|
|
|
──────────────────────────────────────────────────────────────────────────────────────────────────────
|
|
|
|
2. Promijeni prikaz teksta riječi (wordText)
|
|
|
|
U istoj datoteci (WordCard.tsx), pronađi dio gdje se prikazuje term.wordText (trenutno oko linije 69):
|
|
|
|
TRENUTNI KOD:
|
|
{/* Word Text */}
|
|
<h3 className="text-lg font-semibold text-center mb-3 text-gray-900">
|
|
{term.wordText}
|
|
</h3>
|
|
|
|
NOVI KOD:
|
|
{/* Word Text with colored background based on word type */}
|
|
<div className="flex justify-center mb-3">
|
|
<span className={`${wordTypeColors[term.wordType] || 'bg-gray-600'} text-white text-lg font-semibold px-4 py-2 rounded`}>
|
|
{term.wordText}
|
|
</span>
|
|
</div>
|
|
|
|
ŠTO SE MIJENJA:
|
|
• Tekst riječi sada ima obojenu pozadinu (bg-* klasa) ovisno o term.wordType
|
|
• Tekst je bijele boje (text-white) za kontrast
|
|
• Dodani su padding (px-4 py-2) i zaobljeni rubovi (rounded) da izgleda kao gumb
|
|
|
|
|
|
──────────────────────────────────────────────────────────────────────────────────
|
|
|
|
3. (OPCIONALNO) Ukloni ili prilagodi prikaz vrste riječi
|
|
|
|
Trenutno se vrsta riječi prikazuje kao sivi tekst u gornjem desnom kutu kartice (linija 44-46):
|
|
|
|
<span className="text-xs text-gray-500">
|
|
{wordTypeLabels[term.wordType] || term.wordType}
|
|
</span>
|
|
|
|
OPCIJE:
|
|
• Opcija A: Ukloni ovaj dio jer je sada vrsta riječi vidljiva kroz boju pozadine
|
|
• Opcija B: Zadrži ga za dodatnu jasnoću
|
|
|
|
|
|
────────────────────────────────────────────────
|
|
|
|
4. Primijeni iste promjene u drugim komponentama
|
|
|
|
Ako se riječi prikazuju i u drugim komponentama (npr. WordDetailModal, SentenceBuilder, itd.), primijeni iste promjene tamo:
|
|
|
|
U `WordDetailModal.tsx`:
|
|
Dodaj isto mapiranje wordTypeColors i promijeni prikaz term.wordText na isti način.
|
|
|
|
U budućoj `SentenceBuilder` komponenti:
|
|
Kada se budu prikazivale riječi u rečenici (Znakopis), svaka riječ treba imati obojenu pozadinu prema vrsti riječi.
|
|
|
|
|
|
──────────────────────────────────────────
|
|
|
|
5. Testiraj promjene
|
|
|
|
1. Pokreni aplikaciju
|
|
2. Otvori stranicu Rječnik (/dictionary)
|
|
3. Provjeri da svaka riječ ima obojenu pozadinu koja odgovara njenoj vrsti
|
|
4. Usporedi s originalnom slikom original/1 dodaj rijeci.png
|
|
|
|
|
|
────────────────────────────────────────────────────────────────────────────
|
|
|
|
DODATNE NAPOMENE
|
|
|
|
Ako trebaš točne boje sa slike:
|
|
Ako imaš pristup slici, koristi alat za odabir boja (color picker) da dobiješ točne hex vrijednosti boja i pretvori ih u Tailwind klase ili custom CSS.
|
|
|
|
Ako Tailwind nema točnu boju:
|
|
Možeš dodati custom boje u tailwind.config.js:
|
|
|
|
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'word-noun': '#16a34a', // zelena za imenice
|
|
'word-verb': '#dc2626', // crvena za glagole
|
|
// ... ostale boje
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Zatim koristi: bg-word-noun, bg-word-verb, itd.
|
|
|
|
|
|
───────────────────────────────────────────────
|
|
|
|
SAŽETAK PROMJENA
|
|
|
|
| Datoteka | Što dodati/promijeniti |
|
|
|----------|------------------------|
|
|
| packages/frontend/src/components/dictionary/WordCard.tsx | 1. Dodaj wordTypeColors mapiranje<br>2. Promijeni prikaz term.wordText da ima obojenu pozadinu |
|
|
| packages/frontend/src/components/dictionary/WordDetailModal.tsx | Iste promjene kao u WordCard.tsx |
|
|
| Buduće komponente (SentenceBuilder, itd.) | Primijeni isti stil za prikaz riječi |
|
|
|
|
|
|
────────────────────────────────────────────────────────────────────────────────────
|
|
|
|
PRIMJER KONAČNOG IZGLEDA
|
|
|
|
Nakon promjena, svaka kartica riječi u rječniku će imati:
|
|
• Gornji lijevi kut: CEFR razina (A1, A2, itd.) s bojom
|
|
• Centar: Slika/ikona riječi
|
|
• Ispod slike: Tekst riječi s obojenom pozadinom (npr. "adresa" na zelenoj pozadini)
|
|
• Ispod teksta: Kratak opis (ako postoji)
|
|
• Dno: Gumbi "Dodaj" i "Info"
|
|
|
|
|
|
─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
|
|
|
|
Ovo su jasne, korak-po-korak upute koje možeš dati AI agentu da implementira promjene. Agent će točno znati koje datoteke treba promijeniti i što dodati.
|