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

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

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,87 +99,105 @@ 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'>
-			Il n'y a pas d'image dans le fichier
-		</div></>
+		<>
+			<link rel="stylesheet" href='/test/index.css' type="text/css" />
+			<h1 className='string'>
+				Il n'y a pas d'image dans le fichier
+			</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>
-			<div className="board">
-				<div className='row11'>
-					<img src={list[0]} width={620} />
+			<>
+				<link rel="stylesheet" href='/test/index.css' type="text/css" />
+				<div className="board">
+					<div className='row11' >
+						<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} />
+					</div>
+					<div className='row13'>
+						<img src={list[2]} width={620} />
+					</div>
+					<div className="row21">
+						<img src={list[3]} width={620} />
+					</div>
+					<div className='row22'>
+						<img src={list[4]} width={620} />
+					</div>
+					<div className='row23'>
+						<img src={list[5]} width={620} />
+					</div>
 				</div>
-				<div className='row12'>
-					<img src={list[1]} width={620} />
-				</div>
-				<div className='row13'>
-					<img src={list[2]} width={620} />
-				</div>
-				<div className="row21">
-					<img src={list[3]} width={620} />
-				</div>
-				<div className='row22'>
-					<img src={list[4]} width={620} />
-				</div>
-				<div className='row23'>
-					<img src={list[5]} width={620} />
-				</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
+*/