diff --git a/encheres/client/.babelrc b/encheres/client/.babelrc
deleted file mode 100644
index e94b0a62fc1d4810bd67de7be6602f3636baff5a..0000000000000000000000000000000000000000
--- a/encheres/client/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "presets": ["@babel/preset-env"],
- "plugins": ["@babel/transform-runtime"]
-}
diff --git a/encheres/client/package-lock.json b/encheres/client/package-lock.json
index 33ec98cee75f67668864007cae0ba95305813657..c2c0fdb499143e580bda2327c868053ca14aa05e 100644
--- a/encheres/client/package-lock.json
+++ b/encheres/client/package-lock.json
@@ -25,7 +25,7 @@
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.0",
- "webpack": "^5.90.0",
+ "webpack": "^5.90.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.6.0"
}
@@ -6574,9 +6574,9 @@
}
},
"node_modules/webpack": {
- "version": "5.90.0",
- "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.0.tgz",
- "integrity": "sha512-bdmyXRCXeeNIePv6R6tGPyy20aUobw4Zy8r0LUS2EWO+U+Ke/gYDgsCh7bl5rB6jPpr4r0SZa6dPxBxLooDT3w==",
+ "version": "5.90.1",
+ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.1.tgz",
+ "integrity": "sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog==",
"dev": true,
"dependencies": {
"@types/eslint-scope": "^3.7.3",
diff --git a/encheres/client/package.json b/encheres/client/package.json
index cf4f3ab5de5fa46337787e12587dedb52cdba690..3b11b7a156dbc98e9eab6af6cc637a3fc89ab853 100644
--- a/encheres/client/package.json
+++ b/encheres/client/package.json
@@ -22,7 +22,7 @@
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.0",
- "webpack": "^5.90.0",
+ "webpack": "^5.90.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.6.0"
},
diff --git a/encheres/client/src/html/about.html b/encheres/client/src/html/about.html
new file mode 100644
index 0000000000000000000000000000000000000000..053083c95a113be1c0e946f10117a31adbb7e360
--- /dev/null
+++ b/encheres/client/src/html/about.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>Server</title>
+ <link href="./style/style.css" rel="stylesheet" type="text/css"/>
+ </head>
+
+ <body>
+ <h1>Infos</h1>
+ <div>
+ <p>Auteur de l'application : <strong>Mamadu BAH</strong></p>
+ <p>Numéro de version : <strong>V1.0</strong></p>
+ </div>
+ </body>
\ No newline at end of file
diff --git a/encheres/client/src/html/auctioneer.html b/encheres/client/src/html/auctioneer.html
new file mode 100644
index 0000000000000000000000000000000000000000..5d4a9e0c07498c1e0255359400b69547e7d38a5b
--- /dev/null
+++ b/encheres/client/src/html/auctioneer.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>Server</title>
+ <link href="./style/style.css" rel="stylesheet" type="text/css"/>
+ <script src="/socket.io/socket.io.js"></script>
+ </head>
+
+ <body>
+ <h1>Comissaire-priseur</h1>
+
+ <div id="ident-auc">Vous êtes le commissaire priseur</div>
+ <div id="prod-auc">
+ <div>
+ <label for="name">Objet aux enchères</label>
+ <input type="text" id="name" name="name" placeholder="Votre texte ici"/>
+ </div>
+
+ <div>
+ <label for="name">Prix de départ</label>
+ <input type="number" id="value" min="10" max="100" value="10" name="value" placeholder="Votre prix ici"/>
+ </div>
+ <div>Montant actuel enchère : <span id="prixactuel"></span></div>
+ <div class="button">
+ <button id="start" type="button" disabled>
+ <img src="../image/start.jpg" alt="start"/>
+ </button>
+
+ <button id="sale" type="button" disabled>
+ <img src="blabla" alt="sale"/>
+ </button>
+ </div>
+ </div>
+
+ </body>
+
+</html>
\ No newline at end of file
diff --git a/encheres/client/src/html/bidder.html b/encheres/client/src/html/bidder.html
new file mode 100644
index 0000000000000000000000000000000000000000..0a6f227f9cd87202ffd0d034a037e54f48624fbc
--- /dev/null
+++ b/encheres/client/src/html/bidder.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>Server</title>
+ <link href="./style/style.css" rel="stylesheet" type="text/css"/>
+ <script src="/socket.io/socket.io.js"></script>
+ </head>
+
+ <body>
+ <h1>Enchérisseur</h1>
+ <div class="bidder">
+ <div id="ident-bid">Bienvenue</div>
+ <div class="item">Objet en enchères : <span class="description"></span>
+ <div class="item">Prix actuel : <span class="prix"></span> </div>
+ </div>
+
+ <div class="price-options">
+ <p>Enchères possibles :</p>
+ <button class="price-button" onclick="selectPrice('20€')">20€</button>
+ <button class="price-button" onclick="selectPrice('50€')">50€</button>
+ <button class="price-button" onclick="selectPrice('100€')">100€</button>
+ </div>
+
+ </body>
+
+</html>
\ No newline at end of file
diff --git a/encheres/client/src/images/start.jpg b/encheres/client/src/images/start.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ecbaf45095acdc7a7b2d9f690bb5029e858df868
Binary files /dev/null and b/encheres/client/src/images/start.jpg differ
diff --git a/encheres/client/src/index.html b/encheres/client/src/index.html
index 2d8818e0bcc12f0ebde549c96e7ccf43c18c5f11..ba4ab2457c62216e05df5ebc4bd36a0f64f5e114 100644
--- a/encheres/client/src/index.html
+++ b/encheres/client/src/index.html
@@ -1,23 +1,22 @@
<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
-
-<head>
- <meta charset="UTF-8"/>
- <title>PAGE TITLE</title>
- <meta name="author" content="your name"/>
-
- <link rel="stylesheet" type="text/css" href="./style/style.css" title="starship style"/>
-</head>
-
-<body>
-
- <h1>Your page</h1>
-
- <p>Write your html code here.</p>
-
- <p>Consultez la console pour la trace de création du bundle : <kbd>Ctrl+Shift+K</kbd></p>
-
-</body>
-
-</html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
+
+ <head>
+ <meta charset="UTF-8"/>
+ <title>server</title>
+ <link href="./style/style.css" rel="stylesheet" type="text/css"/>
+
+ </head>
+
+ <body>
+ <h1>Enchères</h1>
+ <p class="ok"></p>
+ <ul id="liens">
+ <li> <a href="./auctioneer">Etre Comissaire-priseur</a> </li>
+ <li> <a href="./bidder">Participer aux Enchères</a> </li>
+ <li> <a href="./about">Infos sur l'application</a> </li>
+ </ul>
+ </body>
+
+</html>
\ No newline at end of file
diff --git a/encheres/client/src/scripts/auctioneer.js b/encheres/client/src/scripts/auctioneer.js
new file mode 100644
index 0000000000000000000000000000000000000000..af85e8bc976bcb2d32219d383556cd20fa228407
--- /dev/null
+++ b/encheres/client/src/scripts/auctioneer.js
@@ -0,0 +1,33 @@
+console.log('le bundle-auctioneer a été généré');
+
+const socket = io();
+
+const inputName = document.getElementById("name");
+const inputValue = document.getElementById("value");
+const buttonStart = document.getElementById("start");
+const buttonSale = document.getElementById("sale");
+
+const prixActuel = document.getElementById("prixactuel");
+prixActuel.textContent = inputValue.value;
+
+function emptyInput() {
+ if(inputName.value.trim() === "") {
+ buttonStart.disabled = true;
+ }
+ else {
+ buttonStart.disabled = false;
+ }
+}
+
+inputName.addEventListener("input", emptyInput);
+
+buttonStart.addEventListener("click", startEnchere);
+
+function startEnchere() {
+ buttonSale.disabled = false;
+ const ident = document.getElementById("ident-auc");
+ ident.textContent = `Debut de l'enchère pour ${inputName.value} à ${inputValue.value}`;
+ socket.emit("infos", inputName.value, inputValue.value);
+}
+
+
diff --git a/encheres/client/src/scripts/bidder.js b/encheres/client/src/scripts/bidder.js
new file mode 100644
index 0000000000000000000000000000000000000000..1959001c1fa56e50eead1e41e6c6fd3fef8220cb
--- /dev/null
+++ b/encheres/client/src/scripts/bidder.js
@@ -0,0 +1,26 @@
+console.log('le bundle-bidder a été généré');
+
+const socket = io();
+
+const ident = document.getElementById("ident-bid");
+const description = document.getElementsByClassName("description");
+const prix = document.getElementsByClassName("prix");
+
+socket.on("infos", (name, value) => {
+ ident.textContent = `Une nouvelle enchère commence`;
+ console.log(name, value);
+ description.textContent = name;
+ enchereBegin(name, value);
+});
+
+function enchereBegin(name, value) {
+ description[0].textContent = name;
+ prix[0].textContent = value;
+}
+
+function selectPrice(price) {
+ console.log(price);
+}
+
+
+
diff --git a/encheres/client/src/scripts/main.js b/encheres/client/src/scripts/main.js
index ad4049a136e3e5a9001cce4531cece5ca82ddd76..4d6a117fda2e8d47e9d51f38e648739879a17483 100644
--- a/encheres/client/src/scripts/main.js
+++ b/encheres/client/src/scripts/main.js
@@ -2,3 +2,4 @@
console.log('le bundle a été généré');
+
\ No newline at end of file
diff --git a/encheres/client/src/style/style.css b/encheres/client/src/style/style.css
index 993a797e063f4289a763f60d5cd2238659305b8f..b2a3bd6165de05266ac18d6e5d9499cf86f02d9f 100644
--- a/encheres/client/src/style/style.css
+++ b/encheres/client/src/style/style.css
@@ -4,12 +4,66 @@ body {
font-family : Verdana, Helvetica, Arial, sans-serif;
background-color: white;
margin : 0% 2%;
+ padding: 50px;
+ font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
-kbd {
+div {
padding : 0px 2px;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
color : rgb(60,60,60);
font-style : bold;
font-size : large;
}
+
+input {
+ padding: 5px 10px; /* Ajoute un peu de padding pour l'esthétique */
+ width: 150px; /* Réduit la largeur de l'input */
+}
+
+#ident-auc {
+ border: 2px solid #000; /* Ajoute une bordure noire solide autour du conteneur */
+ padding: 10px; /* Ajoute du padding à l'intérieur du conteneur pour ne pas coller au contenu */
+ margin: 10px; /* Ajoute un peu d'espace autour du conteneur */
+}
+
+h1 {
+ color: #00B7FF;
+}
+.bidder, #prod-auc{
+ display: flex; /* Active Flexbox */
+ flex-direction: column; /* Dispose les éléments enfants en colonne */
+ gap: 10px; /* Ajoute un espace entre les éléments enfants */
+ border: 2px solid #000; /* Ajoute une bordure noire solide autour du conteneur */
+ padding: 10px; /* Ajoute du padding à l'intérieur du conteneur pour ne pas coller au contenu */
+ margin: 10px; /* Ajoute un peu d'espace autour du conteneur */
+}
+
+.price-options {
+ display: flex;
+ align-items: center; /* Centre les éléments horizontalement */
+ gap: 10px; /* Espace entre les éléments */
+ border: 2px solid #000; /* Ajoute une bordure noire solide autour du conteneur */
+ padding: 10px; /* Ajoute du padding à l'intérieur du conteneur pour ne pas coller au contenu */
+ margin: 10px; /* Ajoute un peu d'espace autour du conteneur */
+}
+
+.price-options p {
+ margin: 0; /* Supprime la marge par défaut pour aligner correctement le texte */
+ font-size: 18px; /* Taille du texte */
+ color: #333; /* Couleur du texte */
+}
+
+.price-button {
+ padding: 10px 20px; /* Padding autour du texte */
+ font-size: 16px; /* Taille du texte */
+ color: white; /* Couleur du texte */
+ background-color: #007bff; /* Couleur de fond du bouton */
+ border: none; /* Pas de bordure */
+ border-radius: 5px; /* Bordures arrondies */
+ cursor: pointer; /* Change le curseur en main au survol */
+}
+
+.price-button:hover {
+ background-color: #0056b3; /* Couleur de fond du bouton au survol */
+}
diff --git a/encheres/client/webpack.config.js b/encheres/client/webpack.config.js
index 97f66402b0f4a801c470b12602493b688e08f8e5..2d149ed07b1dced3f7d322770bcfb146f4bbb2a5 100644
--- a/encheres/client/webpack.config.js
+++ b/encheres/client/webpack.config.js
@@ -8,11 +8,15 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const PRODUCTION = false;
module.exports = {
- entry: path.resolve(__dirname, 'src', 'scripts', 'main.js'),
+ entry: {
+ main: path.resolve(__dirname, 'src', 'scripts', 'main.js'),
+ bidder: path.resolve(__dirname, 'src', 'scripts', 'bidder.js'),
+ auctioneer: path.resolve(__dirname, 'src', 'scripts', 'auctioneer.js'),
+ },
output: {
path: path.resolve(__dirname, '../server/public'),
- filename: 'scripts/bundle.js'
+ filename: 'scripts/[name]-bundle.js'
},
mode : (PRODUCTION ? 'production' : 'development'),
@@ -31,7 +35,7 @@ module.exports = {
module: {
rules: [
{
- test: /\.m?js$/,
+ test: /\.(m?js$|jsx)/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader'
@@ -59,18 +63,33 @@ module.exports = {
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'src', 'index.html'),
filename: './index.html',
- hash: true,
+ chunks : ['main'],
+ hash: true
+ }),
+ new HtmlWebpackPlugin({
+ template: path.resolve(__dirname, 'src', 'html', 'auctioneer.html'),
+ filename: 'html/auctioneer.html',
+ chunks : ['auctioneer'],
+ hash: true
+ }),
+ new HtmlWebpackPlugin({
+ template: path.resolve(__dirname, 'src', 'html', 'bidder.html'),
+ filename: 'html/bidder.html',
+ chunks : ['bidder'],
+ hash: true
}),
new CopyPlugin({
patterns: [
- { // décommenter ce bloc pour copier les fichiers de src/html dans dist/html
+ {
context: path.resolve(__dirname, 'src', 'html'),
from: "**/*.html",
to: 'html',
noErrorOnMissing: true,
- globOptions: { }
+ globOptions: {
+ ignore: ["**/auctioneer.html", "**/bidder.html"],
+ }
},
- { // décommenter ce bloc pour copier les fichiers de src/images dans dist/images
+ {
context: path.resolve(__dirname, 'src','images'),
from: '**/*',
to: 'images/[name][ext]',
@@ -87,15 +106,15 @@ module.exports = {
],
- /* en cas de gestion de bibliothèques externes à exclure du buncle, ici cas de React pour l'exemple
+ /**gestion de bibliothèques externes à exclure du bundle, ici cas de React
externals : {
react: 'React',
- react-dom: 'ReactDom',
- },
- */
+ reactdom: 'ReactDom'
+ },**/
+
optimization: {
minimize: true,
- minimizer: [new TerserPlugin()]
+ minimizer: [new TerserPlugin()],
}
}