\documentclass[a4paper,12pt]{article} % Packages \usepackage[french]{babel} \usepackage[utf8]{inputenc} \usepackage[T1]{fontenc} \usepackage{tabularx} \usepackage{amsmath} \usepackage{amsfonts} \usepackage{eurosym} \usepackage{epsfig} \usepackage{stmaryrd} % Title \title{AJAX : Projet 2025-2026} \author{D.Moreaux} % Document \begin{document} \maketitle \section{Abstract} L'exercice ci-présent vise à réaliser une application AJAX basée sur le Javascript côté navigateur et sur PHP/Postgresql côté serveur. Cette application utilisera des méthodes de programmation avancée telles que la machine d'état, l'envoi de données structurées par le serveur dont le rendu sera géré par le navigateur. La mise en page sera laissée partiellement à l'appréciation de chacun, le but étant de concevoir une interface dont la présentation est correcte, entre autres au moyen de CSS appropriées. \section{Introduction} Le projet constitue en l'implémentation d'une visual novel en AJAX. La visual novel qui sera implémentée sera une adaptation de l'acte 1\footnote{Si la visual novel contient du contenu {\em 18+}, ce contenu n'est présent que dans les actes suivants et est totalement absent de l'acte 1} de la Visual Novel "Katawa Shoujo" (https://www.katawa-shoujo.com/). Cette Visual Novel est en Creative Common et peut être téléchargée sur le site (ou sur Steam). La version à implémenter ne contiendra ni les effets visuels (transitions, animations,\dots), ni les sons/musiques. Le résultat ne sera donc pas semblable à 100\% à la VN d'origine mais restera quand même similaire. La VN d'origine est programmée en Ren'Py. Elle a été convertie pour que d'une part les données se retrouvent dans une base de données et d'autre part la mécanique de jeu soit réduite à un langage "bytecode" très simple et limité. Les ressources sont prévues pour un affichage de 800x600. \section{L'interface web} L'interface devra permettre de se connecter avec un nom d'utilisateur et un mot de passe. Si le compte n'existe pas, un nouveau compte sera créé. L'état de la VN, contenant les séquences lues, les variables,\dots seront sauvées dans le profil d'utilisateur sous la forme d'une chaîne obtenue avec la fonction serialize() du PHP. L'écran de jeu proposera une zone de 800x600 pour la VN mais également des contrôles (un bouton de déconnexion, un bouton pour masquer/afficher la zone de texte). On utilisera des
superposées (z-index) pour les différentes zones du jeu : image de fond, zone de texte, autres images. \section{Le Javascript} La partie Javascript de l'interface de jeu réagira à un clic en demandant le texte suivant. Le serveur peut envoyer plusieurs messages successifs d'une séquence indiquant l'image de fond, les portraits, et le texte à afficher. Les types de messages sont les suivants : \begin{table}[htb] \begin{tabular}{|c|l|} \hline 1 & Texte normal (TXT) \\ 2 & image de fond (BG) \\ 3 & affichage portrait (SHOW) \\ 4 & masque portrait (HIDE) \\ 5 & note (NOTE) \\ 6 & Doublespeak (DBL) \\ \hline \end{tabular} \end{table} La note apparaît au milieu de l'écran, dans une
supplémentaire. Le doublespeak apparaîtra dans la zone texte mais contient du HTML qu'il faudra interpréter (et donc, utiliser .innerHTML). Ces deux messages fonctionneront pour le reste comme les textes normaux (attendre un clic pour continuer). Le serveur peut aussi proposer une question avec plusieurs options. Il faudra proposer les différents choix et attendre que l'utilisateur clique sur l'un d'entre eux. \section{Le PHP} Le PHP travaillera dans trois modes : bytecode, QCM ou séquence. En mode séquence, il se contentera de retourner le message suivant de la séquence en cours. Si la séquence se termine, on repassera en mode bytecode. En mode QCM, on enverra les différentes options avant d'attendre la réponse du client. Une fois la réponse obtenue, on repasse en mode bytecode. Le mode bytecode exécutera un programme réalisé dans un bytecode de 10 instructions : \begin{description} \item[0 : NOP] No Operation. ce bytecode est utilisé par le programme qui a créé le bytecode à partir du programme Ren'Py \item[1 : JMP] Jump, saut inconditionnel à l'instruction bytecode dont le numéro est transmis \item[2 : SCENE] Lance une séquence de messages \item[3 : MENU] Affiche un menu. La valeur de retour sera conservée pour la suite \item[4 : IFRET] Saut conditionnel : si la valeur de retour du dernier menu est la valeur fournie, saute à l'instruction bytecode correspondant \item[5 : IFSEEN] Saut conditionnel : si la scène indiquée a été vue, saute à la position indiquée \item[6 : IFGT] Saut conditionnel : si la variable indiquée a une valeur supérieure à la valeur donnée, saute à l'instruction bytecode indiquée \item[7: VARADD] Ajoute la valeur indiquée à la variable donnée. Les variables non définies valent 0 \item[8 : ACT] Indique le numéro d'acte. Peut être ignoré ici (et considéré comme NOP) \item[9 : END] Indique la fin de la VN. Ce bytecode est utilisé quand on arrive en fin d'acte 1 ou d'une Bad-End. \end{description} \section{La DB} Une série de tables sont fournies (katawa.sql). Ces tables contiennent les données nécessaire à la VN. Il sera nécessaire d'ajouter une table contenant les utilisateurs et leur avancement. \subsection{story} Cette table contient le bytecode de l'histoire. Le champ {\tt id} contient le numéro d'instruction (JMP,\dots), le champ {\tt type} contient de type d'instruction (de 0 à 9), et les champs {\tt name}, {\tt param} et {\tt next} les paramètres des bytecode, respectivement texte (nom de la variable ou de la séquence), numérique (valeur de retour, valeur de variable,\dots) et adresse bytecode (destination d'un saut). Sauf en cas d'instruction de saut (JMP, IFRET, IFSEEN, IFGT), les instructions sont exécutées dans l'ordre de leur id. En cas de saut non exécuté, on continue également sur l'id suivant. \subsection{seqtag} Contient les associations entre les noms des scènes (utilisés dans le bytecode) et QCM et leur numéro (utilisés dans la DB). Le champ {\tt seqid} contient le numéro de séquence ou question (un numéro ne peut être utilisé que pour un seul des deux), le champ {\tt tag} contient le nom de la scène et le champ {tt type} vaudra 0 pour une question et 1 pour une scène. \subsection{seqtext} Cette table contient les différentes scènes de dialogue. Les champs {\tt seqid}, {\tt seqserial} et {\tt type} corresponde au numéro de scène, au numéro de pas dans la scène (à effectuer dans l'ordre) et au type de donnée (TXT, BG,\dots). La signification des champs qui suivent dépend du type de ligne. \begin{description} \item[TXT, NOTE, DBL] {\tt data} est le texte à afficher, {\tt elid} le numéro du personnage \item[BG] {\tt elid} est le numéro de l'image de fond à afficher. \item[SHOW] {\tt elid} est le numéro de l'image à afficher, {\tt data} est le tag de l'image à afficher (utilisé pour HIDE et en cas de SHOW multiples de la même image), {\tt xpos} est la position horizontale du centre de l'image et {\tt z} est le Z-Index à utilise (à multiplier par 10 et augmenter du nombre d'images déjà affichées). Si le tag est "bg", l'image sera affichée en arrière plan (xpos et z seront ignorés) mais sans effacement des personnages déjà affichés à l'écran \item[HIDE] {\tt data} contient le tag de l'image à masquer \end{description} \subsection{character} Cette table contient les définitions des personnages. A l'id {\tt cid} du personnage sera associé un nom {\tt name} et une couleur {\tt color}. \subsection{image} Cette table contient le nom de l'image et ses dimensions pour associer un ID numérique (elid) à une image. \subsection{menu} Cette table contient les questions posées au joueur. {\tt seqid} est le numéro de la question (similaire au numéro de scène). {\tt qid} est le numéro du personnage qui pose la question (NULL si il n'y en a pas). {\tt qtext} est le texte de la question et {\tt q1},{\tt q2},\dots les textes des options. \end{document}