pendu fini (td3)

TD/TD3/architecture_dessin.drawio

@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2022-09-21T07:47:25.511Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36" etag="OUixL6Vl1F5MQpXTtU5_" version="20.3.3" type="device"><diagram id="caT7RZ4UwUJIcGb9_o4s" name="Page-1">7VhdT9swFP01lbaHoXw0BR5py/iQKIiCYE/IxLeJhxNXjtsm/PpdN06bxEVsE2JRtRfX98R2fM85/kh7/ijJzySZx1eCAu95Ds17/rjneUeuj6UGihLo+0EJRJLREnK3wJS9ggEdgy4YhazRUAnBFZs3wVCkKYSqgREpxarZbCZ4861zEoEFTEPCbfSBURWbtLzDLX4OLIqrN7uD4/JJQqrGJpMsJlSsapB/2vNHUghV1pJ8BFxzV/FS9vv+xtPNxCSk6nc6iFW8FK/3s8lt//rhKb99GtKf38woS8IXJuERZ3pAb8Bx1OGzxFqka18mZMkiomCBkHORKpApqK8mN1VUhK1ipmA6J6GOV+gJ7BurhGPkYpVk81KmGcsBZzY0EwCpIH8zM3fDF/oMRAJKFtjEdOgbhotmuKrpZaC4JlWFEeOQaDPulkSsGB7/gFPP4nQKclnyNsH1cZntYHdGGJLuIItYoAL4g9lLHYZGEQd0MRyPO0H6hr+OsO5brGPamj66LnB76I383skx7GKfslAxbEKY3HRJhMr0RBfrbUPiesbK5fR60gn6A69b9Pct+i2WIKUnekfGKOQky1iIVGSKSGXDNfakWKRU0zZ2MIKcqUfzRNd/aPwgMNE4rzUbFyYoZwLU2ulbZONsxUKG8P7axklHoN5zoy1eTZ1ghzoVJoETxZbN6e6SzLzhRrD1BmG84Q+a3nDbqpdpml71I6M1UN9tDeS3Bip5sAZaO2iT9t+bKvgsU+FOWzzWg5qtdLj11ToqumHG6j70nhm9/2b8ADMeWmY8v7u7sQyJW7pqei1TUrzASHAhEUlFii2HM8Z5CyKcRak2LOjLFQL6gGB4FT0xDxJGqX7NcNd503T0R9yqXP8gaDAe2GfMYIdx2rp82BlzZCnwAM9TEb6A2l8Z3EOnUyJUq7Cmwtn9xf7yH7yx6/wz/u1PtqvyZqsY0rW3OnjHXRPC/s7Db7P9FSDwP00ADLf/i5Tn9/bPJf/0Fw==</diagram></mxfile>

TD/TD3/pendu/.gitignore

@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

TD/TD3/pendu/client.js

@@ -0,0 +1,56 @@
+// On se connecte au serveur
+
+var connection = new WebSocket("ws://localhost:8080");
+
+connection.onopen = () => {
+    console.log('connected');
+};
+
+connection.onclose = () => {
+    console.error('disconnected');
+};
+
+connection.onerror = error => {
+    console.error('failed to connect', error);
+};
+
+connection.onmessage = msg => {
+    
+    let data = JSON.parse(msg.data)
+
+
+    if(data[0] ==  "Taille") {
+        for(let i = 0; i < data[1]; ++i) {
+            let li = document.createElement('li');
+            li.innerText = "_ ";
+            document.querySelector('#mot').append(li);
+        }
+    }
+
+    if(data[0] == "CharError") {
+        alert("Votre lettre n'est pas correcte.")
+    }
+
+    if(data[0] == "Char") {
+        const list = document.getElementsByTagName("li");
+        list[data[2]].innerText = data[1];
+    }
+
+    if(data[0] == "Partie") {
+        alert("Vous avez gagné ! Félicitations !");
+    }
+    
+
+};
+
+
+// Lorsque l'on clique sur le bouton envoyer
+document.querySelector('form').addEventListener('submit', event => {
+    event.preventDefault();
+    // On récupère la valeur entrée dans le formulaire
+    let lettre = document.querySelector('#lettre').value;
+    // On envoie la lettre au serveur
+    connection.send(JSON.stringify(lettre));
+    // On vide le formulaire
+    document.querySelector('#lettre').value = '';
+});

TD/TD3/pendu/db.json

@@ -0,0 +1,20 @@
+{
+    "mots": [
+        {
+            "id": 1,
+            "value": "voiture"
+        },
+        {
+            "id": 2,
+            "value": "antilope"
+        },
+        {
+            "id": 3,
+            "value": "nice"
+        },
+        {
+            "id": 4,
+            "value": "poney"
+        }
+    ]
+}

TD/TD3/pendu/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title>Web Socket Demo</title>
+  </head>
+  <body>
+    <ul id="mot"></ul>
+
+    <form>
+      Lettre : <input id='lettre' type="text"/>
+      <br />
+      <button type="submit">Jouer</button>
+    </form>
+
+    <script src="client.js"></script>
+  </body>
+</html>

TD/TD3/pendu/package.json

@@ -0,0 +1,11 @@
+{
+    "scripts": {
+        "start": "node serveur.js",
+        "jsonserver": "json-server -p 3001 --watch db.json"
+    },
+    "dependencies": {
+        "json-server": "^0.17.0",
+        "node-fetch": "^2.6.7",
+        "ws": "^7.0.1"
+    }
+}

TD/TD3/pendu/serveur.js

@@ -0,0 +1,60 @@
+const fetch = require('node-fetch');
+const WebSocket = require('ws');
+var word;
+var game;
+
+function getRandomInt(max) {
+    return Math.floor(Math.random() * max);
+}
+
+function getWordSize() {
+    return JSON.stringify(["Taille", word.length]);
+}
+
+function displayLetter(char) {
+    return JSON.stringify(["Char", char, word.indexOf(char)]);
+}
+
+// On créé notre Web Serveur qui écoute sur le port 8080
+const wss = new WebSocket.Server({
+    port: 8080
+});
+
+fetch('http://localhost:3001/mots') // une requete GET
+    .then((response) => { // lorsque la requête est terminée on traite la réponse
+        response.json() // que l’on passe en JSON
+        .then((mots) => { // On fois fait on peut travailler sur la liste des mots
+                word = mots[getRandomInt(Object.keys(mots).length)].value; //on choisi aléatoirement le mot dans la liste mots
+                console.log("Mot choisi : " + word); //on l'affiche sur notre console serveur pour tester plus facilement
+                game = word.length;
+        }
+    );
+    }).catch(error => console.error);
+
+
+
+// Lorsqu'un client se connecte on reçoit un événement 'connection'
+wss.on('connection', ws => {
+
+    ws.send(getWordSize());
+
+    // Lorsqu'il nous envoie un message on reçoit un événement message ainsi que le message !
+    ws.on('message', message => {
+        console.log(`Received message => ${message}`);
+        let char = message.charAt(1);
+
+        if(word.indexOf(char) > -1) {
+            game--;
+            ws.send(displayLetter(char));
+            if(game === 0) {
+                ws.send(JSON.stringify(["Partie", true]));
+            }
+        } else {
+            ws.send(JSON.stringify(["CharError"]));
+        }
+
+    });
+
+    
+
+})