{url}+/ now display grid of 6 random images , first changes every 5 sec

Co-authored-by: Avior <github@avior.me>

css/index.css

@@ -0,0 +1,37 @@
+
+h1.string{
+	color: red;
+	font-size: 150px
+}
+.board {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-gap: 10px;
+	grid-auto-rows: minmax(100px, auto);
+	background-color : #e012f384
+}
+div.row11 {
+	grid-column : 1;
+	grid-row : 1
+}
+div.row12 {
+	grid-column: 2;
+	grid-row: 1
+}
+div.row13 {
+	grid-column : 3;
+	grid-row : 1
+}
+div.row21 {
+	grid-column : 1;
+	grid-row : 2
+}
+div.row22 {
+	grid-column : 2;
+	grid-row : 2
+}
+div.row23 {
+	grid-column : 3;
+	grid-row : 2
+}
+

output.json

@@ -1 +1 @@
-{"./assets/images/Nouveau dossier/Capture.PNG":"921c3b04780b23be6c516d52a025525dbf9ea23eb0418f997b59785ad4ede73c","./assets/images/Nouveau dossier/OIP.jfif":"b5c98b3c1e6bc469b15990b44a36bdf71cbb4349378881cac83396f3d7ef36f9"}
+{"./assets/103863.jpg":"381c0a8e86918f21c9ced8406b76152c5c50263b6d3b75875b0e580d78088e4e","./assets/1069102.jpg":"83ce630814217afe8f1f778c05b492d0521aa88cdff07fc4fcb4f02970b65f67","./assets/359313.jpg":"59554fa3adac4ad9d392ea415c04c425799c0266d6cb8d61a87c037d340d4bc7","./assets/394102.jpg":"5f6b1e2ea356af80835b52db7dc21dfce2e6d010c0369d153d6b257043b9c84d","./assets/593127.jpg":"57db8d499712f78d2bbc2c70032590cbf86996e1999e2dfe8a4487db721eff8d","./assets/593730.jpg":"2018065f430000ca9cd43481994a12763ece80adfb73a91b87cfc8f7a049a5c5","./assets/694296.jpg":"d07233378e0ee69dc447c8535ca92aad914757b72d33190d72fe416ac63d5521","./assets/970055 (1).jpg":"dd3d321f06a9a6d2a236db2292f7f06e35cf23c387b12f18c988807f10563a24","./assets/970055.jpg":"dd3d321f06a9a6d2a236db2292f7f06e35cf23c387b12f18c988807f10563a24","./assets/987815.jpg":"844222ac5bc6f8ccac84eedda7f17112ffd0f373d9075ada45e8181d39f34575","./assets/S987815.jpg":"c66653491a96463768afe5672a764893774e83ce17abaee9599d47c4c5ba5d6d","./assets/thumbbig-970055.webp":"ef9b3bab751a3504f93225dd4bff4508d273be1bb7b33bd27050d72e499bd366","./assets/thumbbig-987815.webp":"3564d190433d57b89841d9b4b21337fa99c7ee9e8cd46a97049f75e1dd58774b","./assets/téléchargement (1).jfif":"b3d39e5675b25b511f4c841c4efcb83d7739f086c0bab6bb9139535643296576","./assets/téléchargement (2).jfif":"9b10ea9ed130715d5d54a8ce45079e991a39e37f392244ee94b6492b489f3c89","./assets/téléchargement.jfif":"9178cb9d9fc26f508b43a6da1aa75767696610d06dc0e267d002001dd46eb78a"}

src/index.tsx

@@ -7,8 +7,11 @@ import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 
 const app = express()
+app.use('/test',express.static('css'))
+app.use('/assets',express.static('assets', {
+	dotfiles: 'allow'
+}))
 
-app.use('/assets',express.static('assets'))
 /* eslint-disable max-depth */
 /* eslint-disable complexity */
 app.listen(3000, () => {
@@ -62,7 +65,7 @@ app.get('/program', (_req, res) => {
 			hash.write(readI)
 			hash.end()
 			const sha256sum = hash.read()
-			console.log('bfile = ' + bFile)
+			// console.log('bfile = ' + bFile)
 
 			if (bFile.startsWith('.')) {
 				continue
@@ -80,12 +83,13 @@ app.get('/program', (_req, res) => {
 			try{
 				const image = await Jimp.read(readI)
 				image.sepia()
-				console.log(bFile)
-				const newFileName = pName + '/S' + bFile
-				console.log('newfilename:' + newFileName)
-				// save image with new file name
+				image.rgba(true)
+				image.contain(256, 256)
+				const index = bFile.lastIndexOf('.')
+				const newBaseName = bFile.slice(0, index) + '.png'
+				const newFileName = pName + '/.' + newBaseName
 				await image.writeAsync(`${newFileName}`)
-				console.log('Images have been turned to sepia and renamed ' + newFileName)
+				// console.log('Images have been turned to sepia and renamed ' + newFileName)
 			}catch (err){
 				console.log('this file is not an image')
 			}
@@ -95,70 +99,70 @@ app.get('/program', (_req, res) => {
 
 	})('./assets')
 })
+async function filter() {
+	const list = await filesList('./assets') // si moins de 6 element dans la liste  ....
+	const listF: Array<string> = []
+	for(const file of list){
+		const bName = path.basename(file)
+		if(bName.startsWith('.')){
+			listF.push(file)
+		}
+	}
+	return listF
+}
+
 function randomSort() {
 	return Math.random() - 0.5
 }
 async function randomI(): Promise<[] | [string, string, string, string, string, string]> {
-	const list = await filesList('./assets') // si moins de 6 element dans la liste  ....
-	const sorted = list.sort(randomSort).slice(0, 6)
+	const filteredList = await filter()
+	const sorted = filteredList.sort(randomSort).slice(0, 6)
 	while (sorted.length < 6 && sorted.length > 0 ) {
 		const listLength = sorted.length
-		sorted.push(...list.sort(randomSort).slice(0, 6 - listLength))
+		sorted.push(...filteredList.sort(randomSort).slice(0, 6 - listLength))
 	}
 	return sorted as []
 }
-app.get('/test', async (_req, res) => {
-	res.send(randomI())
+app.get('/code', async (_, res) => {
+	const data = await randomI()
+	// return json data
+	if (data.length !== 0){
+		res.json(data[0])
+	}
 })
-app.get('/', async (_req, res) => {
+
+
+app.get('/', async (_, res) => {
 	const list = await randomI()
 	if(list.length === 0 ){
 		const board =
-		<><style>{`
-		.string{
-			color: red;}
-		`}</style>
-		<div className='string'>
+		<>
+			<link rel="stylesheet" href='/test/index.css' type="text/css" />
+			<h1 className='string'>
 				Il n'y a pas d'image dans le fichier
-		</div></>
+			</h1>
+		</>
 		const rendering = ReactDOMServer.renderToString(board)
 		res.send(rendering)
 	}else{
 		res.send(ReactDOMServer.renderToString(
-			<><style>{`
-		.board {
-			display: grid;
-			grid-template-columns: repeat(3, 1fr);
-			grid-gap: 10px;
-			grid-auto-rows: minmax(100px, auto);
-		.row11 {
-			grid-column : 1
-			grid-row : 1
-		}
-		.row12 {
-			grid-column: 2
-			grid-row: 1
-		}
-		.row13 {
-			grid-column : 3
-			grid-row : 1
-		}
-		.row21 {
-			grid-column : 1
-			grid-row : 2
-		}
-		.row22 {
-			grid-column : 2
-			grid-row : 2
-		}
-		.row23 {
-			grid-column : 3
-			grid-row : 2
-		}
-		}`}</style>
+			<>
+				<link rel="stylesheet" href='/test/index.css' type="text/css" />
 				<div className="board">
 					<div className='row11' >
-					<img src={list[0]} width={620} />
+						<img id='img1' src={list[0]} width={620} />
+						<script dangerouslySetInnerHTML={{__html:`
+							setInterval(() => {
+								fetch('http://localhost:3000/code')
+									.then(function(response) {
+										return response.json();
+									})
+									.then(function(data) {
+										let imgElement = document.getElementById('img1');
+										imgElement.src = data;
+									});
+							}, 5000);
+						`}}></script>
 					</div>
 					<div className='row12'>
 						<img src={list[1]} width={620} />
@@ -175,7 +179,25 @@ app.get('/', async (_req, res) => {
 					<div className='row23'>
 						<img src={list[5]} width={620} />
 					</div>
-			</div></>
+				</div>
+			</>
 		))
 	}
 })
+
+
+// img de 1 a 6
+// animer les images par rappoirt a un format de fichier, (base.ext) -> (anim1, anim2, ...animX)
+/*
+
+/assets/florian.bouillon/
+/assets/florian.bouillon/base.ext
+/assets/florian.bouillon/anim1.ext
+/assets/florian.bouillon/anim2.ext
+/assets/florian.bouillon/anim3.ext
+/assets/florian.bouillon/anim4.ext
+
+1. je veux que tu récupères uniquement les images qui suivent le format ci-dessus
+2. aléatoirement, je veux que toutes les 30secs, une image passe de base.ext, a toutes ces animations
+ex: base.ext > anim1.ext > anim2.ext > animX.ext
+*/

test.js

@@ -1 +0,0 @@
-"use strict";