Imagini și fonturi

O aplicație reală are nevoie de mai mult decât fișiere sursă: un favicon, un logo, o imagine de tip hero, un font personalizat. Fiecare proiect și provocare DojoCode poate găzdui aceste resurse binare direct lângă codul tău. Ele apar în arborele de fișiere, se deschid într-un vizualizator în loc de editorul de cod, sunt servite de previzualizarea live și călătoresc cu munca ta atunci când o salvezi, faci fork, o exporți sau o publici.

Fișiere acceptate

Categorie	Extensii	Ce face editorul
Imagini raster	png, jpg, jpeg, gif, webp, ico	Deschide un vizualizator de imagini care arată tipul, dimensiunea și rezoluția.
Imagini vectoriale	svg	Se deschide ca text în editorul de cod, cu un comutator Code / Preview pentru a o reda.
Fonturi web	woff, woff2, ttf, otf	Deschide o filă de informații doar pentru citire cu tipul și dimensiunea.

Orice altceva care nu este un fișier text — audio, video, PDF, arhive, executabile — este refuzat cu un mesaj clar, astfel încât nimic să nu fie corupt.

Limite

Fiecare resursă binară poate avea cel mult 1 MB. Un grup de fișiere poate conține în total până la 10 MB de resurse binare: fișierele unui proiect, sau fiecare categorie a unei provocări în parte (fișiere preîncărcate, soluția autorului, teste). Fișierele care depășesc limita sunt refuzate la import; nimic nu este scris în arbore. Toate fișierele dintr-un grup împreună, codul și resursele, trebuie de asemenea să rămână sub 15 MB pentru a putea fi salvate.

Adăugarea unei resurse

Deschide meniul ⋮ de pe rădăcina proiectului (sau dă clic dreapta pe orice folder) și alege Import file. Selectează imaginea sau fontul de pe computerul tău, confirmă numele și aceasta va apărea în arbore cu propria pictogramă. Într-o provocare, același meniu se află pe fiecare grup de fișiere, astfel încât poți alege dacă resursa aparține fișierelor preîncărcate, soluției autorului sau testelor.

Încercarea de a importa un tip neacceptat afișează o eroare și lasă fișierele nemodificate:

Resursele sunt importate, nu scrise

Nu poți crea un .png sau .woff2 cu Create file — asta ar crea doar un fișier text gol cu un nume înșelător, așa că fereastra de dialog pentru nume refuză extensiile de imagini și fonturi. Folosește în schimb Import file. Din același motiv, o resursă importată nu poate fi redenumită cu o extensie de text.

Vizualizarea și înlocuirea

Fă clic pe o imagine din arbore pentru a deschide vizualizatorul. Acesta arată tipul MIME, dimensiunea fișierului și, pentru imaginile raster, dimensiunile în pixeli. Opțiunea Replace… îți permite să înlocuiești conținutul cu un alt fișier de același tip, fără a modifica numele sau codul care îl referențiază.

Fișierele SVG sunt text, așa că se deschid în editorul de cod ca orice alt fișier. Folosește comutatorul Preview din colțul din dreapta-sus al filei pentru a le reda:

Redenumirea, mutarea, ștergerea și drag-and-drop funcționează exact ca pentru fișierele de cod. Fork-ul, salvarea, exportul ca zip și importul din zip păstrează octeții fiecărei resurse.

Utilizarea resurselor în șabloane web (Vite)

React, Vue, Svelte, vanilla și celelalte șabloane bazate pe Vite îți servesc resursele prin același server de dezvoltare ca și codul tău. Pune-le într-un folder public și referențiază-le cu o cale absolută de la rădăcină:

function App() {
  return (
    <main>
      <img src="/logo.svg" alt="Brand logo" width={120} />
      <h1>Brand Kit</h1>
      <img src="/logo.png" alt="Brand logo (PNG)" width={96} />
    </main>
  );
}

public/logo.svg este servit la /logo.svg. Previzualizarea live se actualizează imediat ce fișierul este importat:

Folosește public/ dacă intenționezi să publici

În previzualizarea din editor, Vite servește de asemenea fișiere din rădăcina proiectului, așa că <img src="/logo.png"> funcționează chiar și atunci când logo.png se află lângă App.jsx. Un build de producție nu face asta: Vite copiază doar folderul public/ pe site-ul publicat, așa că o resursă de la nivelul rădăcinii va returna o eroare 404 odată ce publici. Păstrează imaginile și fonturile în public/ (sau importă-le din codul tău, de exemplu import logo from './logo.png') și atât previzualizarea, cât și site-ul publicat se vor comporta la fel.

Ctrl+clic (Cmd+clic pe macOS) pe src="/logo.png", href="favicon.ico" sau pe un url(...) din CSS sare direct la resursă, la fel ca pentru fișierele de cod, deschizând-o în vizualizator.

Fonturi personalizate

Fonturile web funcționează în același mod: importă fișierul .woff2 (sau .woff, .ttf, .otf) în public/ și declară-l cu @font-face:

const fontFace = `
  @font-face {
    font-family: 'Pacifico';
    src: url('/pacifico.woff2') format('woff2');
  }
`;

function App() {
  return (
    <main>
      <style>{fontFace}</style>
      <h1 style={{ fontFamily: 'Pacifico', fontSize: 48 }}>Brand Kit</h1>
    </main>
  );
}

Fila fontului arată doar detaliile fișierului — nu există o previzualizare a glifelor — dar previzualizarea live îl randează:

Declarat înainte ca fișierul să existe?

Dacă CSS-ul tău făcea referire la font înainte de a-l importa, browserul își amintește cererea eșuată. Fă clic o dată pe butonul de reîncărcare al previzualizării și fontul se va încărca.

Resurse în proiecte Python

Proiectele Python își păstrează fișierele în rădăcina proiectului și pot citi resursele ca octeți, atât în previzualizarea din browser, cât și atunci când apeși pe Run:

from pathlib import Path

logo = Path('logo.png').read_bytes()
print(f'logo.png: {len(logo)} bytes, PNG signature: {logo[:4]}')

Pentru a arăta o imagine, activează previzualizarea web din fila Details:

Apoi adaugă un index.html care face referire la fișier — previzualizarea servește fiecare fișier din proiect, inclusiv imaginile:

<h1>Pixel Lab</h1>
<img src="logo.png" alt="Logo" width="160">

La fel funcționează și cu pygame.image.load('logo.png') pentru jocuri și plt.imread('logo.png') pentru figurile matplotlib.

Resurse în provocări

Provocările acceptă aceleași fișiere, în oricare dintre grupurile lor:

• Preloaded files — fișierele cu care începe cursantul. Un logo, o foaie de sprite-uri (sprite sheet) sau un font de aici ajunge la oricine rezolvă provocarea și apare în arborele de fișiere și în previzualizarea cursantului.
• Author solution files — resursele de care are nevoie soluția ta de referință.
• Initial tests and all tests — fișierele de test (fixtures) pe care le citesc testele tale.

Atunci când provocarea rulează, fiecare resursă este scrisă pe disc exact așa cum ai încărcat-o, astfel încât testele o pot citi ca pe orice alt fișier. Într-o provocare PHP, de exemplu:

$bytes = file_get_contents(__DIR__ . '/logo.png');

$this->assertSame(56192, strlen($bytes));
$this->assertSame('89504e470d0a1a0a', bin2hex(substr($bytes, 0, 8)));

Același lucru este valabil și pentru Python, Node, Java, Go și celelalte: open('logo.png', 'rb'), fs.readFileSync('logo.png') și echivalentele lor obțin octeții originali, nu text. Șabloanele de browser cum ar fi React sau Vue servesc resursa din previzualizare, astfel încât cel care rezolvă vede imaginea în aplicația care rulează.

Cursanții deschid resursele în același mod ca și tine — în vizualizator, niciodată în editorul de cod — iar o resursă pe care un cursant o păstrează în fișierele sale călătorește împreună cu soluția pe care o trimite.

Publicarea

Publicarea nu necesită niciun pas suplimentar: build-ul decodifică fiecare resursă și o livrează odată cu site-ul. Pentru șabloanele Vite, asta înseamnă folderul public/ (vezi nota de mai sus); pentru Python, runtime-ul împachetează fișierele, inclusiv imaginile, și le servește pe pagina publicată.

Bine de știut

• Conținutul binar este stocat împreună cu fișierele tale, așa că se calculează în limita bugetului de 10 MB și călătorește cu fork-urile și exporturile zip.
• Asistentul AI vede resursele în arborele de fișiere și le poate referenția prin cale, dar nu le poate citi sau edita conținutul.