commit e65bc44fadfc4fe3a4f087d3207b188dc2a76ae1
Author: ledudal <lucastag77@gmail.com>
Date:   Fri Apr 1 22:49:14 2022 +0200

    unique git

diff --git a/cacher-desc.riot b/cacher-desc.riot
new file mode 100644
index 0000000..1aaa4d5
--- /dev/null
+++ b/cacher-desc.riot
@@ -0,0 +1,45 @@
+<cacher-desc>
+	
+	<button id="cacher-desc-but" onclick={toggle}>
+		<i id="logo-cacher-desc-but" class="fa-solid fa-eye"></i>
+	</button>
+	
+	<script>
+		
+		export default {
+			state: {
+				loading: false,
+				error: null,
+				cache: false
+			},
+			reset() {
+				this.update({
+					loading: false,
+					error: null,
+					cache: false
+				})
+			},
+			async toggle(e) {
+				e.preventDefault();
+				
+				this.state.cache=!this.state.cache;
+				if(this.state.cache){
+					document.getElementById("logo-cacher-desc-but").classList="fa-solid fa-eye-slash";
+				} else {
+					document.getElementById("logo-cacher-desc-but").classList="fa-solid fa-eye";
+				}
+
+				this.props.t_setvisi(!this.state.cache);
+			}
+		}
+	</script>
+	
+	<style>
+		#cacher-desc-but {
+			width: 50px;
+			padding: -50px;
+		}
+		
+	</style>
+	
+</cacher-desc>
\ No newline at end of file
diff --git a/cat-selector.riot b/cat-selector.riot
new file mode 100644
index 0000000..34fc001
--- /dev/null
+++ b/cat-selector.riot
@@ -0,0 +1,47 @@
+<cat-selector>
+
+	<button id="aff" class="bleu" onclick={change} >A l'affiche</button>
+	<button id="pop" onclick={change} >Populaires</button>
+	<button id="not" onclick={change} >Mieux notés</button>
+	<button id="nex" onclick={change} >A venir</button>
+	
+	<script>
+		
+		export default {
+			state: {
+				loading: false,
+				error: null
+			},
+			reset() {
+				this.update({
+					loading: false,
+					error: null
+				})
+			},
+			async change(e) {
+				e.preventDefault();
+				
+				document.getElementById('pop').classList='gris';
+				document.getElementById('not').classList='gris';
+				document.getElementById('nex').classList='gris';
+				document.getElementById('aff').classList='gris';
+				
+				e.target.classList="bleu";
+				this.props.t_changer(e.target.id);
+			}
+		}
+		
+	</script>
+	
+	<style>
+		.gris{
+			background: default;
+		}
+		
+		.bleu{
+			background: lightblue;
+			border-radius: 5px;
+		}
+	</style>
+	
+</cat-selector>
\ No newline at end of file
diff --git a/compofilm.riot b/compofilm.riot
new file mode 100644
index 0000000..1242c80
--- /dev/null
+++ b/compofilm.riot
@@ -0,0 +1,55 @@
+<compofilm>
+	<a if="{state.visible && state.film!=null}" target="blanc" href="https://www.themoviedb.org/movie/{state.film.id}?language=fr">{state.film.title}</a>
+	<img if="{state.film!=null && state.film.poster_path!=null}" src="https://image.tmdb.org/t/p/original{state.film.poster_path}" width="100%"/>
+	<i class="fa-solid fa-star" each={ i in Array(10).keys() } if="{ state.visible && state.film!=null && state.film.vote_average>=i+1 }"></i>
+	<i class="fa-regular fa-star-half-stroke" each={ i in Array(10).keys() } if="{state.visible && state.film!=null && state.film.vote_average>=i+0.5 && state.film.vote_average<i+1}"></i>
+	<i class="fa-regular fa-star tamer" each={ i in Array(10).keys() } if="{state.visible && state.film!=null && state.film.vote_average>=i && state.film.vote_average<i+0.5}"></i>
+	<i class="fa-regular fa-star" each={ i in Array(10).keys() } if="{ state.visible && state.film!=null && state.film.vote_average<i }"></i>
+	<span if="{state.visible && state.film!=null}">{state.film.vote_average}</span>
+	
+	<script>
+		
+		export default {
+			state: {
+				loading: false,
+				error: null,
+				film: null,
+				visible: true
+			},
+			reset() {
+				this.update({
+					loading: false,
+					error: null,
+					film: null,
+					visible: true
+				})
+			},
+			onBeforeMount (props,state){
+
+				state.film=props.v_film;
+				props.v_setVisiSetter(this.setVisi);
+				props.v_setFilmSetter(this.setFilm);
+			},
+			setVisi(visible){
+				this.state.visible=visible;
+				this.update();
+			},
+			setFilm(film){
+				this.state.film=film;
+				this.update();
+			}
+		}
+		
+	</script>
+	
+	<style>
+		*{
+			display: block;
+		}
+
+		compofilm{
+			text-align: center;
+		}
+	</style>
+	
+</compofilm>
\ No newline at end of file
diff --git a/genre-selector.riot b/genre-selector.riot
new file mode 100644
index 0000000..6772922
--- /dev/null
+++ b/genre-selector.riot
@@ -0,0 +1,49 @@
+<genre-selector>
+	<select id="genre-selector-sel" onchange={choisi}></select>
+	
+	
+	<script>
+		
+		const NOTHING = 0;
+		const RECHERCHE = 1;
+		const GET_GENRES = 2;
+		
+		export default {
+			state: {
+				loading: false,
+				error: null,
+			},
+			reset() {
+				this.update({
+					loading: false,
+					error: null,
+				})
+			},
+			choisi(e){
+				this.props.t_changer(e.target.value);
+			}
+		}
+		
+		
+		fetch("https://api.themoviedb.org/3/genre/movie/list?api_key=64a9b2af6577bd1f5553143e0eacd4a8&language=fr")
+		.then(result => result.json())
+		.then( genres => {
+			let selecteur = document.getElementById("genre-selector-sel");
+			
+			const tout = document.createElement("option");
+			tout.setAttribute("value", 666);
+			tout.innerHTML = "Tout";
+			selecteur.appendChild(tout);
+			
+			for(let i = 0 ; i < genres.genres.length ; i++){
+				const newOption = document.createElement("option");
+				newOption.setAttribute("value", genres.genres[i].id);
+				newOption.innerHTML = genres.genres[i].name;
+				selecteur.appendChild(newOption);
+			}
+			
+			
+		});
+		
+	</script>
+</genre-selector>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100755
index 0000000..037a9fe
--- /dev/null
+++ b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<hmtl>
+	<head>
+		<script src="https://kit.fontawesome.com/3f74e6a305.js" crossorigin="anonymous"></script>
+		<script type="riot" src="./vue.riot"></script>
+		<script type="riot" src="./tout.riot"></script>
+		<script type="riot" src="./search.riot"></script>
+		<script type="riot" src="./compofilm.riot"></script>
+		<script type="riot" src="./cacher-desc.riot"></script>
+		<script type="riot" src="./cat-selector.riot"></script>
+		<script type="riot" src="./genre-selector.riot"></script>
+		<script src="https://cdn.jsdelivr.net/npm/riot@6.1.2/riot+compiler.min.js"></script>
+		<title>Cinema</title>
+	</head>
+	
+	<body>
+		<tout></tout>
+	</body>
+	<script>
+		riot.compile().then(()=>{
+			riot.mount('tout');
+		});
+	</script>
+	
+	<style>
+		body{
+			background: gray;
+		}
+	</style>
+</hmtl>
\ No newline at end of file
diff --git a/search.riot b/search.riot
new file mode 100755
index 0000000..8558a69
--- /dev/null
+++ b/search.riot
@@ -0,0 +1,85 @@
+<search>
+	<label>
+		<form onsubmit={_search}>
+			<input type="input" id="input" placeholder="Recherche">
+		</form>
+	</label>
+	
+	<button id="search-but" onclick={ _search }>
+		<i class="fa-solid fa-magnifying-glass"></i>
+	</button>
+	
+	<p if={state.error} class="error">{ state.error }</p>
+	
+	<script>
+		
+		const NOTHING = 0;
+		const RECHERCHE = 1;
+		const GET_GENRES = 2;
+		
+		export default {
+			state: {
+				loading: false,
+				error: null,
+				results: []
+			},
+			reset() {
+				this.update({
+					loading: false,
+					error: null,
+					results: [],
+				})
+			},
+			async _search(e) {
+				e.preventDefault();
+				
+				if(document.getElementById("input").value == "")
+				return;
+				
+				results = await fetch( "https://api.themoviedb.org/3/search/movie?api_key=64a9b2af6577bd1f5553143e0eacd4a8&query="+document.getElementById("input").value+"&language=fr&include_adult=true")
+				.then(result => result.json());
+				this.state.results=results.results;
+				console.log(this.state.results);
+				this.update();
+			}
+		}
+		
+	</script>
+	
+	<style>
+		
+		.loader {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+		
+		.loader {
+			margin: 6rem 0 0;
+		}
+		
+		.error {
+			color: #AA8222;
+			margin: 1rem 0;
+		}
+		
+		input {
+			margin: 1rem 0 0;
+			font-weight: 300;
+			padding: 0.8rem 1rem;
+			border: 1px solid rgba(0, 0, 0, 0.05);
+			background: rgba(255, 255, 255, 0.05);
+			transition: all 0.3s;
+			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+			-moz-appearance: none;
+			-webkit-appearance: none;
+			outline: none;
+			border-radius: 5px;
+		}
+		
+		input:focus {
+			background: rgba(0, 0, 0, 0.08);
+		}
+	</style>
+</search>
\ No newline at end of file
diff --git a/tout.riot b/tout.riot
new file mode 100644
index 0000000..a5e34e2
--- /dev/null
+++ b/tout.riot
@@ -0,0 +1,147 @@
+<tout>
+	
+	<div id="topbar">
+		<div id="gauche">
+			<cacher-desc t_setvisi="{setVisibilite}"></cacher-desc>
+			<genre-selector t_changer="{setGenre}"></genre-selector>
+		</div>
+		<div id="droite">
+			<search></search>
+		</div>
+	</div>
+	
+	<div id="ndbar">
+		<cat-selector t_changer="{changeAff}"></cat-selector>
+	</div>
+	
+	<div id="panneau">
+		<vue if="{state.films}!=[]" t_data="{state.films}" t_setSetters="{setSetters}" ></vue>
+	</div>
+	
+	<script>
+		const API_KEY="64a9b2af6577bd1f5553143e0eacd4a8";
+		const R_AFFICHE="https://api.themoviedb.org/3/movie/now_playing?api_key="+API_KEY+"&language=fr&include_adult=true";
+		const R_POPULAIRE="https://api.themoviedb.org/3/movie/popular?api_key=" + API_KEY+"&language=fr&include_adult=true";
+		const R_NOTES="https://api.themoviedb.org/3/movie/top_rated?api_key=" + API_KEY + "&language=fr&include_adult=true";
+		const R_AVENIR="https://api.themoviedb.org/3/movie/upcoming?api_key=" + API_KEY + "&language=fr&include_adult=true";
+
+		
+		export default {
+			state: {
+				loading: false,
+				error: null,
+				films: [],
+				visible: true,
+				req: R_AFFICHE,
+				genre: 666,
+				v_changeFilm: null,
+				v_changeVisibilite: null
+			},
+			
+			reset() {
+				this.update({
+					loading: false,
+					error: null,
+					films: [],
+					visible: true,
+					req: R_AFFICHE,
+					genre: 666
+				})
+			},
+			async changeAff(aff){
+				switch (aff) {
+					case "aff":
+						this.state.req=R_AFFICHE;
+						break;
+					
+					case "pop":
+						this.state.req=R_POPULAIRE;
+						break;
+
+					case "not":
+						this.state.req=R_NOTES;
+						break;
+
+					case "nex":
+						this.state.req=R_AVENIR;
+						break;
+				}
+				if(this.state.genre != 666){
+					this.state.req+="&with_genres="+this.state.genre
+				}
+				await this.updateFilms();
+
+				this.state.v_changeFilm(this.state.films);
+			},
+			async updateFilms(){
+				
+				this.state.films=await fetch(this.state.req)
+				.then(result => result.json())
+				.then(data => data);
+				
+				this.update();
+			},
+			onBeforeMount (props,state){
+				this.updateFilms();
+			},
+			setVisibilite(visible){
+				this.state.visible=!!visible;
+				this.state.v_changeVisibilite(this.state.visible);
+			},
+			setGenre(genre){
+				this.state.genre=genre;
+				this.updateFilms();
+				this.state.v_changeFilm(this.state.films);
+				this.update();
+			},
+			setSetters(films,visibilite){
+				this.state.v_changeFilm=films;
+				this.state.v_changeVisibilite=visibilite;
+
+				this.state.v_changeVisibilite(this.state.visible);
+				this.state.v_changeFilm(this.state.films);
+			}
+		}
+		
+	</script>
+	
+	<style>
+		#topbar *{
+			margin:10px;
+			vertical-align: center;
+		}
+		
+		#gauche{
+			float: left;
+		}
+		
+		#droite{
+			float: right;
+		}
+
+		#droite *{
+			display: inline-block;
+		}
+		
+		#search-but{
+			margin-left: -20px;
+		}
+		
+		#topbar{
+			height: 100px;
+		}
+		
+		#ndbar{
+			text-align: center;
+			padding-left: 10%;
+		}
+		
+		#ndbar *{
+			display: inline-block;
+			margin: 5px;
+			font-size: 1.2rem;
+		}
+		
+	</style>
+	
+</tout>
\ No newline at end of file
diff --git a/vue.riot b/vue.riot
new file mode 100644
index 0000000..fa43d17
--- /dev/null
+++ b/vue.riot
@@ -0,0 +1,67 @@
+<vue>
+	<div id="conteneur" > 
+		<compofilm each={ film in state.films.results } v_film="{ film }" v_setVisiSetter="{ addVisibilitySetter }" v_setFilmSetter="{ addSetter }">
+		</compofilm> <!--Refuse de s'update-->
+	</div>
+	
+	<script>
+		export default {
+			state: {
+				loading: false,
+				error: null,
+				films: [],
+				visible: true,
+				setters: [],
+				film_setters: [],
+				genres_names: [],
+				genres_ids: []
+			},
+			reset() {
+				this.update({
+					loading: false,
+					error: null,
+					films: [],
+					visible: true,
+					setters: [],
+					film_setters: [],
+					genres_names: [],
+					genres_ids: []
+				})
+			},
+			async onBeforeMount(props,state){
+				await new Promise(r => setTimeout(r, 200));
+
+				props.t_setSetters(this.setFilms,this.setVisibilite);
+
+				this.update();
+			},
+			setFilms(data){
+				this.state.films=data;
+				i = 0;
+				for(setter of this.state.film_setters){
+					setter(data.results[i++]);
+				}
+			},
+			setVisibilite(visible){
+				this.state.visible=visible;
+				for(setter of this.state.setters){
+					setter(visible);
+				}
+			},
+			addVisibilitySetter(setter){
+				this.state.setters.push(setter);
+			},
+			addSetter(setter){
+				this.state.film_setters.push(setter);
+			}
+		}
+	</script>
+	
+	<style>
+		compofilm{
+			display: inline-block;
+			width: 22%;
+			margin: 1%;
+		}
+	</style>
+</vue>
\ No newline at end of file