node-tp2

Package NPM combinant un générateur de Lorem Ipsum et un afficheur de cartes Magic: The Gathering via l'API publique Scryfall.

Table des matières

• Installation
• Partie 1 — Lorem Ipsum
  • Fonctionnement interne
  • Usage en JavaScript
  • Usage via le DOM
• Partie 2 — Magic: The Gathering
  • Fonctionnement interne
  • Usage en JavaScript
  • Usage via le DOM
• Exemple HTML complet
• Référence API
• Publier sur NPM

Installation

npm install node-tp2

Ou, en clonant le dépôt directement :

git clone https://github.com/VidarIvory/Node-TP2.git
cd Node-TP2
npm install

Partie 1 — Lorem Ipsum

Fonctionnement interne

Le générateur s'appuie sur une liste de ~130 mots inspirés du latin classique (tiré du De Finibus Bonorum et Malorum de Cicéron). Aucune dépendance externe n'est requise.

Le processus de génération fonctionne en trois niveaux :

Mot  →  Phrase  →  Paragraphe  →  Texte final

| Niveau | Détail | |------------|------------------------------------------------| | Mot | Tiré aléatoirement dans la liste de 130 mots | | Phrase | 5 à 14 mots, première lettre en majuscule, terminée par un point | | Paragraphe | 3 à 6 phrases assemblées | | Texte | N paragraphes séparés par une ligne vide |

Usage en JavaScript

const { Ipsum } = require('node-tp2');

Générer des paragraphes

const lorem = new Ipsum({ paragrafs: 5 });

console.log(lorem.text);
// Affiche 5 paragraphes de texte latin aléatoire

// L'objet est aussi directement convertible en chaîne
console.log(String(lorem));
console.log(`${lorem}`);

Générer un nombre précis de mots

const lorem = new Ipsum({ words: 50 });

console.log(lorem.text);
// Affiche exactement 50 mots séparés par des espaces

Valeur par défaut

Sans option, 1 paragraphe est généré :

const lorem = new Ipsum();
console.log(lorem.text); // 1 paragraphe

Usage via le DOM

La méthode statique Ipsum.init() parcourt automatiquement la page HTML et remplit tous les éléments dont la classe contient le mot ipsum.

Appel unique à placer en fin de page ou dans un DOMContentLoaded :

<script>
  const { Ipsum } = require('node-tp2');
  Ipsum.init();
</script>

Classes CSS reconnues

| Classe CSS | Comportement | |--------------------|---------------------------------------------------| | ipsum | Insère 3 paragraphes dans des balises <p> | | ipsum-p-{n} | Insère n paragraphes dans des balises <p> | | ipsum-w-{n} | Insère exactement n mots en texte brut |

Exemples HTML

<!-- 3 paragraphes par défaut -->
<div class="ipsum"></div>

<!-- 12 paragraphes -->
<div class="ipsum-p-12"></div>

<!-- 122 mots -->
<div class="ipsum-w-122"></div>

Résultat généré dans le DOM pour ipsum-p-2 :

<div class="ipsum-p-2">
  <p>Lorem qui eos reiciendis error commodo itaque mollit quae.</p>
  <p>Ratione omnis quaerat reprehenderit aut voluptatem veniam modi deserunt.</p>
</div>

Partie 2 — Magic: The Gathering

Fonctionnement interne

La classe Mtg communique avec l'API publique Scryfall pour récupérer les données d'une carte MTG au format JSON.

Deux modes sont disponibles :

| Mode | Endpoint Scryfall appelé | |---------------|---------------------------------------------------| | Aléatoire | GET https://api.scryfall.com/cards/random | | Par édition | GET https://api.scryfall.com/cards/{ed}/{id} |

Les paramètres ed et id correspondent au code de l'édition (ex: dom, mh2, lea) et au numéro de collectionneur de la carte dans cette édition.

Les codes d'édition Scryfall sont consultables sur scryfall.com/sets.

L'instance Mtg est thenable : elle peut être utilisée directement avec await ou .then(), sans appeler de méthode supplémentaire. La requête HTTP démarre dès la construction de l'objet.

Compatibilité réseau :

• Navigateur et Node.js 18+ : utilise fetch natif
• Node.js < 18 : utilise le module https de la librairie standard

Usage en JavaScript

const { Mtg } = require('node-tp2');

Carte aléatoire

const card = await new Mtg({ rand: true });

console.log(card.name);         // "Black Lotus"
console.log(card.type_line);    // "Artifact"
console.log(card.set_name);     // "Limited Edition Alpha"

Carte spécifique (édition + numéro)

// Carte #1 de l'édition "Dominaria" (code: dom)
const card = await new Mtg({ ed: 'dom', id: 1 });

console.log(card.name);         // "Karn, Scion of Urza"
console.log(card.collector_number); // "1"

Avec .then() / .catch()

new Mtg({ rand: true })
  .then(card => console.log(card.name))
  .catch(err => console.error('Erreur:', err.message));

Accéder aux données après résolution

Une fois l'instance résolue, la carte est stockée dans instance.card :

const mtg = new Mtg({ rand: true });
await mtg;

console.log(mtg.card.name);
console.log(mtg.card.image_uris.normal); // URL de l'image

Structure de la réponse Scryfall (extrait)

{
  "name": "Karn, Scion of Urza",
  "type_line": "Legendary Planeswalker — Karn",
  "set": "dom",
  "set_name": "Dominaria",
  "collector_number": "1",
  "image_uris": {
    "normal": "https://cards.scryfall.io/normal/..."
  }
}

Usage via le DOM

La méthode statique Mtg.init() parcourt la page et remplit automatiquement tous les éléments dont la classe commence par mtg-.

<script>
  const { Mtg } = require('node-tp2');
  Mtg.init();
</script>

Classes CSS reconnues

| Classe CSS | Comportement | |-------------------------|-------------------------------------------------------| | mtg-rand | Affiche une carte aléatoire | | mtg-ed{code}-id{n} | Affiche la carte #n de l'édition dont le code est code |

Exemples HTML

<!-- Carte aléatoire -->
<div class="mtg-rand"></div>

<!-- Carte #122 de l'édition "Dominaria" (code: dom) -->
<div class="mtg-eddom-id122"></div>

<!-- Carte #45 de l'édition "Modern Horizons 2" (code: mh2) -->
<div class="mtg-edmh2-id45"></div>

Rendu HTML généré

Chaque <div> est rempli avec la structure suivante :

<div class="mtg-card">
  <img src="https://cards.scryfall.io/normal/..." alt="Nom de la carte" style="max-width:100%">
  <div class="mtg-card-info">
    <strong>Nom de la carte</strong>
    <em>Type de la carte</em>
    <span>Nom de l'édition — #Numéro</span>
  </div>
</div>

En cas d'erreur (carte introuvable, réseau indisponible), l'élément affiche Carte introuvable. et l'erreur est loggée dans la console.

Exemple HTML complet

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Démo node-tp2</title>
  <style>
    body { font-family: sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
    .mtg-card { border: 1px solid #ccc; padding: 1rem; border-radius: 8px; max-width: 300px; }
    .mtg-card-info { margin-top: .5rem; display: flex; flex-direction: column; gap: .25rem; }
  </style>
</head>
<body>

  <h1>Lorem Ipsum</h1>

  <h2>Défaut (3 paragraphes)</h2>
  <div class="ipsum"></div>

  <h2>5 paragraphes</h2>
  <div class="ipsum-p-5"></div>

  <h2>20 mots</h2>
  <div class="ipsum-w-20"></div>

  <hr>

  <h1>Magic: The Gathering</h1>

  <h2>Carte aléatoire</h2>
  <div class="mtg-rand"></div>

  <h2>Karn, Scion of Urza (dom #1)</h2>
  <div class="mtg-eddom-id1"></div>

  <script src="https://unpkg.com/node-tp2/index.js"></script>
  <script>
    const { Ipsum, Mtg } = require('node-tp2');
    Ipsum.init();
    Mtg.init();
  </script>

</body>
</html>

Référence API

new Ipsum(options)

| Option | Type | Description | |--------------|--------|---------------------------------------------| | paragrafs | number | Nombre de paragraphes à générer (défaut: 1) | | words | number | Nombre exact de mots à générer |

Si les deux options sont fournies, words est prioritaire.

Propriétés de l'instance :

| Propriété | Type | Description | |-----------|--------|-------------------------------------| | text | string | Le texte généré |

Méthodes statiques :

| Méthode | Description | |----------------|---------------------------------------------------------------| | Ipsum.init() | Scanne le DOM et remplit les éléments avec la classe ipsum* |

new Mtg(options)

| Option | Type | Description | |--------|---------|------------------------------------------------------| | rand | boolean | Si true, récupère une carte aléatoire | | ed | string | Code de l'édition Scryfall (ex: dom, mh2, lea) | | id | number | Numéro de collectionneur de la carte dans l'édition |

ed et id doivent être fournis ensemble. rand: true prend le dessus.

L'instance est thenable : elle peut être passée directement à await ou .then().

Propriétés de l'instance (après résolution) :

| Propriété | Type | Description | |-----------|--------|------------------------------------------| | card | object | Objet JSON complet retourné par Scryfall |

Méthodes statiques :

| Méthode | Description | |--------------|-----------------------------------------------------------------| | Mtg.init() | Scanne le DOM et remplit les éléments avec la classe mtg-* |

Publier sur NPM

# 1. Se connecter à son compte NPM
npm login

# 2. Vérifier que le nom du package est disponible
npm search node-tp2

# 3. Publier
npm publish

# 4. Pour mettre à jour plus tard : incrémenter la version puis republier
npm version patch   # 1.0.0 → 1.0.1
npm version minor   # 1.0.0 → 1.1.0
npm version major   # 1.0.0 → 2.0.0
npm publish

Le champ "name" dans package.json doit être unique sur le registre NPM. Si node-tp2 est déjà pris, choisir un nom différent ou utiliser un scope : @votre-username/node-tp2.

Auteur

Vidar Ivory — GitHub

Licence

ISC