fcad-lang

v1.1.0

Published

9 days ago

Collection de composants Vue 3 pour des exercices et outils mathématiques.

0High
0Medium
0Low

coliveira_cad

vue vue3 components math education fcad

fcad-lang

Suite de composants développés pour la suite du plugin FCAD_Lang afin de fournir des activités favorisant la pratique d'une langue.

Getting started

To make it easy for you to get started with GitLab, here's a list of recommended next steps.

Already a pro? Just edit this README.md and make it your own. Want to make it easy? Use the template at the bottom!

Test and Deploy

Use the built-in continuous integration in GitLab.

📋 Composant FCAD_Pictionary

Le programme FCAD_Pictionary est une application web qui combine l'aspect ludique du jeu Pictionary à la précision du dessin vectoriel. Il est développé dans le cadre du projet FCAD_Lang pour faciliter l'apprentissage linguistique.

L'application est entièrement réalisée en JavaScript, HTML5 et CSS3.

Principe

Reprenant la mécanique principale du jeu Pictionary, l'application produit dynamiquement, ligne par ligne, un dessin à partir des données d'un fichier SVG. Le joueur doit essayer de deviner le mot ou l'expression associé(e) avant que le dessin soit terminé (environ 60 à 90 secondes).

L'application valide la proposition saisie par l'utilisateur et lui fournit une rétroaction adaptée à sa tentative. Elle calcule également le score de l'utilisateur durant la session de jeu.

Fonctionnalités principales

Mode de jeu solo.
Dessin progressif d’illustrations SVG dans le canevas.
Système de devinettes basé sur la saisie de texte.
Contrôle de la durée du dessin et fin automatique de la manche.
Calcul du score selon la rapidité de la réponse.
Gestion multilingue (français, anglais, espagnol).
Affichage de la solution à la fin d’une manche.
Démarrage rapide d’une nouvelle partie.

Fonctionnalités techniques

Conversion des primitives SVG en points de coordonnées (x, y).
Mise à l’échelle et centrage automatiques des dessins dans le canevas.
Animation progressive du tracé des illustrations.
Gestion du temps de dessin par minuterie.
Dictionnaire multilingue pour les réponses et les interfaces.
Calcul dynamique du score selon la progression du dessin.
Chargement dynamique des collections SVG.

🔧 Compilation

Récupérer le projet à partir du dépôt via SSH ou HTTPS.

git clone <url-du-projet>
cd poc_fcad_pictionary

Commandes disponibles

npm install         # Installer les dépendances
npm run build       # Compiler l'application pour le déploiement
npm run build:site  # Compiler l'application pour GitLab Pages
npm run dev         # Lancer l'environnement de développement
npm run lint        # Vérifier et corriger le formatage du code

Setup du projet

Installer les dépendances.

npm install

Compiler et Hot-Reload en développement

npm run dev

Compiler et Minifier pour la production

npm run build

Lint avec ESLint

npm run lint

Utilsation comme sous composant d'application

Pour integrer et utiliser Fcad_pictionnary dans une autre application

<script setup>
 import AppCompPictionary from './components/AppCompPictionary.vue'

 <template>
  <Suspense>
    <AppCompPictionary />
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>
</script>

📊 Format des données

En entrée

L'application extrait les coordonnées des primitives SVG et les convertit en une liste de points (x, y) utilisée pour l'animation du dessin dans le canvas. Elle extrait également les données des attributs id, category, group et aria-label pour la validation des résultats.

Format SVG

Pour être compatible avec l'application, un fichier SVG doit contenir au moins une primitive graphique représentant un tracé.

svg (attributs : version, xmlns, id, category, group)
└── primitive graphique (type : rect, path, circle, etc.)
    └── coordonnées du tracé

Les primitives SVG suivantes sont prises en charge :

path
line
polyline
polygon
rect
circle
ellipse

Exemple minimal :

<svg
  version="1.0"
  xmlns="http://www.w3.org/2000/svg"
  id="identifiant_du_svg"
  category="nom_de_catégorie"
  group="nom_du_groupe"
  aria-label="liste_de_mots_acceptés"
>
  <path d="M10 10 L100 100" />
</svg>

Exemple valide :

<svg
  width="800"
  height="800"
  viewBox="0 0 400 400"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  id="400928"
  category="animal"
  group="cat"
  aria-label="cat, a cat"
>
  <path
    d="M271.307 256.142c27.759-30.706-12.371-35.005-15.308-43.928-.501-1.528 3.331-23.254 1.702-23.254-12.066 0-27.968 45.171-58.689 32.73-29.091-11.784-29.809-59.942-60.389-73.212-76.697-33.286-49.84 120.248-42.53 149.865"
    stroke="#000"
    stroke-opacity=".9"
    stroke-width="16"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <path
    d="M314 305.612c-33.065 6.365-70.571-37.712-80.094-39.91-8.616-1.99-98.958 46.083-140.384-66.233m3.824-44.853c43.865-150.38 122.764 31.434 139.373-8.705"
    stroke="#000"
    stroke-opacity=".9"
    stroke-width="16"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

Base de données

L'application attend une base de données sous la forme d'un tableau d'objets associés à chaque SVG et utilise cette base pour effectuer la validation des résultats.

Format attendu pour la base de données (database.js) :

database
├── SVG 1
│   └── metadata (id, name: es, fr)
└── SVG 2
    └── metadata (id, name: es, fr)

Exemple valide :

;[
  {
    id: 'cat_00',
    name: {
      fr: ['un chat', 'chat'],
      es: ['un gato', 'gato']
    }
  },
  {
    id: 'cat_01',
    name: {
      fr: ['un chat', 'chat'],
      es: ['un gato', 'gato']
    }
  }
]

En sortie

L'application produit à partir de la base de données et du SVG une collection de données ayant la structure suivante :

const svgCollection = [
  {
    id: 'cake_01',
    name: 'morceau de gâteau',
    file: 'cake_01.svg',
    drawing: [
      [
        { x: 10, y: 20 },
        { x: 50, y: 80 }
      ]
    ]
  }
]

Chaque élément du tableau principal représente un trait du dessin. Chaque trait est composé de points ordonnés. L’application utilise ces points pour calculer les dimensions du dessin, le centrer dans le canvas, puis l’animer progressivement.

Champs minimaux recommandés pour un dessin :

{
  id: String,
  name: String,
  file: String,
  drawing: Array<Array<{ x: Number, y: Number }>>
}

L'application convertit les données SVG pour produire un tableau de tracés nommé drawing.

const drawing = [
  [
    { x: 10, y: 20 },
    { x: 40, y: 50 },
    { x: 80, y: 90 }
  ],
  [
    { x: 100, y: 120 },
    { x: 140, y: 160 }
  ]
]

🛑 Limitations techniques connues

Support partiel du format SVG.
Conversion SVG → points (x, y) limitée aux primitives prises en charge par le moteur de conversion.
Absence de mise en cache des coordonnées calculées.
Le rendu du canvas dépend de la résolution d'affichage et de la taille de la fenêtre du navigateur.
Les dessins contenant un très grand nombre de segments peuvent augmenter le temps de traitement.
Le moteur de dessin utilise une animation séquentielle des points et ne prend pas en charge les animations SVG natives.
Le score n'est pas persisté entre les sessions.
Aucune synchronisation réseau ou fonctionnalité temps réel n'est implémentée.

📜 Licence

Ce projet est distribué sous la licence MIT. Voir le fichier LICENSE pour plus d'informations.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

fcad-lang

Getting started

Test and Deploy

📋 Composant FCAD_Pictionary

Principe

Fonctionnalités principales

Fonctionnalités techniques

🔧 Compilation

Commandes disponibles

Setup du projet

Compiler et Hot-Reload en développement

Compiler et Minifier pour la production

Lint avec ESLint

Utilsation comme sous composant d'application

📊 Format des données

En entrée

Format SVG

Base de données

En sortie

🛑 Limitations techniques connues

📜 Licence