@media screen and (max-width: 800px) {
	
		body{
			margin: 0px;
			padding: 0px;
			font-family: Calibri, Sans Serif;
			background: linear-gradient(to right, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
		}
		
		.navigation{
			background: linear-gradient(to left, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
			width: 100%;
			position: sticky;
			height: auto;
			z-index: 100;
			top: 0px;
			margin: 0px;
			padding: 0px;
		}
		
		.liste_ul{
			display: flex;
			width: 100%;
			align-items: left;
			justify-content: left;
			margin: 0px 0px 0px 40px;
			padding: 0px;
		}
		
		a{
			text-decoration: none;
			color: rgb(100,100,100);
		}		

		a:visited{
			color: rgb(150,150,150);
		}
		
		li{
			list-style-type: none;
		}
		
		.liste_li{						
			flex-direction: column;
			margin-left: 20px;				
			padding: 10px;
		}
		
		#premier_li{
			margin-left: 0%;
		}		
		
		.fa-solid{
			font-size: 16px;		
		}
		
		.liste-diplomes,.liste-competences{		
			display: flex;	
			flex-direction: column;	
			height: auto;
			width: 100%;
			box-shadow: 2px 2px 4px lightgrey;
		}
		
		.diplome0{
			background: linear-gradient(to right, rgb(220,255,255), rgb(255,225,255), rgb(240,255,220));
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.competence0{
			background: linear-gradient(to right, rgb(240,255,255), rgb(225,255,255), rgb(210,255,255));
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.diplome1,.competence1{
			background: linear-gradient(to right, rgb(240,255,255), rgb(225,255,255), rgb(210,255,255));
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: left;
			align-items: center;
		}
		
		.diplome2,.competence2{			
			background: linear-gradient(to right, rgb(255,240,255), rgb(255,225,255), rgb(255,210,255));
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: left;
			align-items: center;
		}
		
		.diplome3,.competence3{			
			background: linear-gradient(to right, rgb(255,255,240), rgb(255,255,225), rgb(255,255,210));
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: left;
			align-items: center;
		}
		
		.diplomes, .competences{
			margin-left: 10%;
			font-size: 14px;
			font-weight: bolder;
			color: #666;
		}
		
		.type-diplome{
			margin-left: 10%;
			font-size: 10px;
			font-weight: bolder;
			color: #666;
		}

		.competence0{
			background: linear-gradient(to right, rgba(255,190,120,0.1), rgba(120,190,255,0.2), rgba(255,230,130,0.3));
		}
		
		.competence1{
			background: linear-gradient(to right, rgba(255,190,120,0.1), rgba(255,190,120,0.2), rgba(255,190,120,0.3));
		}
		
		.competence2{
			background: linear-gradient(to right, rgba(120,190,255,0.1), rgba(120,190,255,0.2), rgba(120,190,255,0.3));
		}
		
		.competence3{
			background: linear-gradient(to right, rgba(255,230,130,0.1), rgba(255,230,130,0.2), rgba(255,230,130,0.3));
		}
		
		.competence4{
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: left;
			align-items: center;
			background: linear-gradient(to right, rgba(176,184,255,0.1), rgba(176,184,255,0.2), rgba(176,184,255,0.3));
		}
		
		.competence5{
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: left;
			align-items: center;
			background: linear-gradient(to right, rgba(77,160,0,0.1), rgba(77,160,0,0.2), rgba(77,160,0,0.3));
		}
		
		.html, .css, .js, .php, .node-js{
			width: 60%;
			border-radius: 4px;
			background-color: #BCF0ED;
			margin-left: 10%;
			margin-right: 10%;
		}
		

		.jauge-html{
			display: block;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			background-color: lime;
			width: 76.67%;
			text-align: center;
			padding: 10px;
			font-weight: bolder;
			color: #666;
			animation-name: html;
			animation-duration: 8s;
		}
		
		.jauge-css{
			display: block;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			background-color: lime;
			width: 72.72%;
			text-align: center;
			padding: 10px;
			font-weight: bolder;
			color: #666;
			animation-name: css;
			animation-duration: 8s;
		}
		
		.jauge-js{
			display: block;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			background-color: lime;
			width: 71.08%;
			text-align: center;
			padding: 10px;
			font-weight: bolder;
			color: #666;
			animation-name: js;
			animation-duration: 8s;
		}
		
		.jauge-php{
			display: block;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			background-color: lime;
			width: 80.40%;
			text-align: center;
			padding: 10px;
			font-weight: bolder;
			color: #666;
			animation-name: php;
			animation-duration: 8s;
		}
		
		.jauge-node-js{
			display: block;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			background-color: lime;
			width: 30.39%;
			text-align: center;
			padding: 10px;
			font-weight: bolder;
			color: #666;
			animation-name: node-js;
			animation-duration: 8s;
		}
		
		@keyframes html{
			from {
					width: 0%;
				}
				
				to {
				width: 76.67%;
			}
		} 
		
		@keyframes css{
			from {
					width: 0%;
				}
				
				to {
				width: 72.72%;
			}
		} 
		
		@keyframes js{
			from {
					width: 0%;
				}
				
				to {
				width: 71.08%;
			}
		} 
		
		@keyframes php{
			from {
					width: 0%;
				}
				
				to {
				width: 80.40%;
			}
		}		
		
		@keyframes node-js{
			from {
					width: 0%;
				}
				
				to {
				width: 30.39%;
			}
		}	
		
		.fa-award, .fa-medal, .fa-star-half-stroke, .fa-html5, .fa-css3-alt, .fa-js, .fa-php, .fa-node-js{
			margin-left: 10%;
			font-size: 100px;
			cursor: pointer;
		}
		
		.fa-award:hover{
			background-color: rgba(100,240,240,0.2);
		}
		
		.fa-medal:hover{
			background-color: rgba(240,100,240,0.2);
		}
		
		.fa-star-half-stroke:hover{
			background-color: rgba(240,240,100,0.2);
		}
		
		.fa-html5:hover{
			background-color: rgba(255,190,120,0.3);
		}
		
		.fa-css3-alt:hover{
			background-color: rgba(120,190,255,0.3);
		}				
		
		.fa-js:hover{
			background-color: rgba(255,230,130,0.3);
		}
		
		.fa-php:hover{
			background-color: rgba(176,184,255,0.3);
		}
		
		.fa-node-js:hover{
			background-color: rgba(77,160,0,0.3);
		}
		
		.fa-award{
			color: rgb(100,240,240);
			background-color: rgba(100,240,240,0.1);
			padding-left: 18.8px;
			padding-right: 18.8px;
		}
		
		.fa-medal{
			color: rgb(240,100,240);
			background-color: rgba(240,100,240,0.1);
			padding-left: 6.2px;
			padding-right: 6.2px;
		}
		
		.fa-star-half-stroke{
			color: rgb(240,240,100);
			background-color: rgba(240,240,100,0.1);
		}
						
		.fa-html5{
			color: rgb(224,119,29);
			padding-left: 19px;
			padding-right: 19px;
			background-color: rgba(255,190,120,0.2);
		}
		
		.fa-css3-alt{
			color: rgb(12,51,242);
			padding-left: 19px;
			padding-right: 19px;
			background-color: rgba(120,190,255,0.2);
		}
		
		.fa-js{
			color: rgb(232,211,107);
			padding-left: 12.8px;
			padding-right: 12.8px;
			background-color: rgba(255,230,130,0.2);
		}
		
		.fa-php{
			color: rgb(176,184,255);
			padding: 10px 6.4px;
			background-color: rgba(176,184,255,0.2);
			font-size: 80px;
		}
		
		.fa-node-js{
			color: rgb(77,160,0);
			padding-left: 12.8px;
			padding-right: 12.8px;
			background-color: rgba(77,160,0,0.2);
		}
		
		

		.jauge-html, .jauge-css, .jauge-js, .jauge-php, .jauge-node-js{
			padding: 0px;
			font-size: 12px;
		}

	
		.fa-award{
		padding: 0px 5.3px;

		}
		
		.fa-medal{

padding: 0px 1.5px;
		}
		
		.fa-star-half-stroke{
padding: 0px;
		}
						
		.fa-html5{
padding: 0px 7.6px;

		}
		
		.fa-css3-alt{
padding: 0px 7.6px;

		}
		
		.fa-js{
padding: 0px 5.8px;
		}
		
		.fa-php{
padding: 0px;
		}
		
		.fa-node-js{
padding: 0px 5.5px;
		}
	
	.diplome0, .diplome1, .diplome2, .diplome3, .competence0, .competence1, .competence2, .competence3, .competence4, .competence5{
		height: 40px;
	}
	
		.fa-award, .fa-medal, .fa-star-half-stroke, .fa-html5, .fa-css3-alt, .fa-js, .fa-php, .fa-node-js{
			font-size: 30px;
			cursor: pointer;
		}
		
	}		

@media screen and (min-width: 801px) {
		body{
			margin: 0px;
			padding: 0px;
			font-family: Calibri, Sans Serif;
			background: linear-gradient(to right, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
		}
		
		.navigation{
			background: linear-gradient(to left, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
			width: 100%;
			position: sticky;
			height: auto;
			z-index: 100;
			top: 0px;
			margin: 0px;
			padding: 0px;
		}
		
		.liste_ul{
			display: flex;
			width: 100%;
			align-items: right;
			justify-content: right;
			margin: 0px 0px 0px -80px;
			padding: 0px;
		}
		
		a{
			text-decoration: none;
			color: rgb(100,100,100);
		}		

		a:visited{
			color: rgb(150,150,150);
		}
		
		li{
			list-style-type: none;
		}
		
		.liste_li{						
			flex-direction: column;
			margin-left: 40px;				
			padding: 10px;
		}
		
		#premier_li{
			margin-left: 0%;
		}		
		
		.fa-solid{
			font-size: 24px;		
		}
		
		.liste-diplomes,.liste-competences{		
			display: flex;	
			flex-direction: column;	
			height: auto;
			width: 100%;
			box-shadow: 2px 2px 4px lightgrey;
		}
		
		.diplome0{
			background: linear-gradient(to right, rgb(220,255,255), rgb(255,225,255), rgb(240,255,220));
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.competence0{
			background: linear-gradient(to right, rgb(240,255,255), rgb(225,255,255), rgb(210,255,255));
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.diplome1,.competence1{
			background: linear-gradient(to right, rgb(240,255,255), rgb(225,255,255), rgb(210,255,255));
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: left;
			align-items: center;
		}
		
		.diplome2,.competence2{			
			background: linear-gradient(to right, rgb(255,240,255), rgb(255,225,255), rgb(255,210,255));
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: left;
			align-items: center;
		}
		
		.diplome3,.competence3{			
			background: linear-gradient(to right, rgb(255,255,240), rgb(255,255,225), rgb(255,255,210));
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: left;
			align-items: center;
		}
		
		.diplomes, .competences{
			margin-left: 10%;
			font-size: 28px;
			font-weight: bolder;
			color: #666;
		}
		
		.type-diplome{
			margin-left: 10%;
			font-size: 24px;
			font-weight: bolder;
			color: #666;
		}
		
		.competence0{
			background: linear-gradient(to right, rgba(255,190,120,0.1), rgba(120,190,255,0.2), rgba(255,230,130,0.3));
		}
		
		.competence1{
			background: linear-gradient(to right, rgba(255,190,120,0.1), rgba(255,190,120,0.2), rgba(255,190,120,0.3));
		}
		
		.competence2{
			background: linear-gradient(to right, rgba(120,190,255,0.1), rgba(120,190,255,0.2), rgba(120,190,255,0.3));
		}
		
		.competence3{
			background: linear-gradient(to right, rgba(255,230,130,0.1), rgba(255,230,130,0.2), rgba(255,230,130,0.3));
		}
		
		.competence4{
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: left;
			align-items: center;
			background: linear-gradient(to right, rgba(176,184,255,0.1), rgba(176,184,255,0.2), rgba(176,184,255,0.3));
		}
		
		.competence5{
			width: 100%;
			height: 120px;
			display: flex;
			justify-content: left;
			align-items: center;
			background: linear-gradient(to right, rgba(77,160,0,0.1), rgba(77,160,0,0.2), rgba(77,160,0,0.3));
		}
		
		.html, .css, .js, .php, .node-js{
			width: 60%;
			border-radius: 4px;
			background-color: #BCF0ED;
			margin-left: 10%;
			margin-right: 10%;
		}
		

		.jauge-html{
			display: block;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			background-color: lime;
			width: 76.67%;
			text-align: center;
			padding: 10px;
			font-weight: bolder;
			color: #666;
			animation-name: html;
			animation-duration: 8s;
		}
		
		.jauge-css{
			display: block;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			background-color: lime;
			width: 72.72%;
			text-align: center;
			padding: 10px;
			font-weight: bolder;
			color: #666;
			animation-name: css;
			animation-duration: 8s;
		}
		
		.jauge-js{
			display: block;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			background-color: lime;
			width: 71.08%;
			text-align: center;
			padding: 10px;
			font-weight: bolder;
			color: #666;
			animation-name: js;
			animation-duration: 8s;
		}
		
		.jauge-php{
			display: block;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			background-color: lime;
			width: 80.40%;
			text-align: center;
			padding: 10px;
			font-weight: bolder;
			color: #666;
			animation-name: php;
			animation-duration: 8s;
		}
		
		.jauge-node-js{
			display: block;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			background-color: lime;
			width: 30.39%;
			text-align: center;
			padding: 10px;
			font-weight: bolder;
			color: #666;
			animation-name: node-js;
			animation-duration: 8s;
		}
		
		@keyframes html{
			from {
					width: 0%;
				}
				
				to {
				width: 76.67%;
			}
		} 
		
		@keyframes css{
			from {
					width: 0%;
				}
				
				to {
				width: 72.72%;
			}
		} 
		
		@keyframes js{
			from {
					width: 0%;
				}
				
				to {
				width: 71.08%;
			}
		} 
		
		@keyframes php{
			from {
					width: 0%;
				}
				
				to {
				width: 80.40%;
			}
		}		
		
		@keyframes node-js{
			from {
					width: 0%;
				}
				
				to {
				width: 30.39%;
			}
		}	
		
		.fa-award, .fa-medal, .fa-star-half-stroke, .fa-html5, .fa-css3-alt, .fa-js, .fa-php, .fa-node-js{
			margin-left: 10%;
			font-size: 100px;
			cursor: pointer;
		}
		
		.fa-award:hover{
			background-color: rgba(100,240,240,0.2);
		}
		
		.fa-medal:hover{
			background-color: rgba(240,100,240,0.2);
		}
		
		.fa-star-half-stroke:hover{
			background-color: rgba(240,240,100,0.2);
		}
		
		.fa-html5:hover{
			background-color: rgba(255,190,120,0.3);
		}
		
		.fa-css3-alt:hover{
			background-color: rgba(120,190,255,0.3);
		}				
		
		.fa-js:hover{
			background-color: rgba(255,230,130,0.3);
		}
		
		.fa-php:hover{
			background-color: rgba(176,184,255,0.3);
		}
		
		.fa-node-js:hover{
			background-color: rgba(77,160,0,0.3);
		}
		
		.fa-award{
			color: rgb(100,240,240);
			background-color: rgba(100,240,240,0.1);
			padding-left: 18.8px;
			padding-right: 18.8px;
		}
		
		.fa-medal{
			color: rgb(240,100,240);
			background-color: rgba(240,100,240,0.1);
			padding-left: 6.2px;
			padding-right: 6.2px;
		}
		
		.fa-star-half-stroke{
			color: rgb(240,240,100);
			background-color: rgba(240,240,100,0.1);
		}
						
		.fa-html5{
			color: rgb(224,119,29);
			padding-left: 19px;
			padding-right: 19px;
			background-color: rgba(255,190,120,0.2);
		}
		
		.fa-css3-alt{
			color: rgb(12,51,242);
			padding-left: 19px;
			padding-right: 19px;
			background-color: rgba(120,190,255,0.2);
		}
		
		.fa-js{
			color: rgb(232,211,107);
			padding-left: 12.8px;
			padding-right: 12.8px;
			background-color: rgba(255,230,130,0.2);
		}
		
		.fa-php{
			color: rgb(176,184,255);
			padding: 10px 6.4px;
			background-color: rgba(176,184,255,0.2);
			font-size: 80px;
		}
		
		.fa-node-js{
			color: rgb(77,160,0);
			padding-left: 12.8px;
			padding-right: 12.8px;
			background-color: rgba(77,160,0,0.2);
		}

}
		
		
		
import 'dart:math';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'card_item.dart';

class TotalPointsGame extends StatelessWidget {

  TotalPointsGame({
    required this.score,
    super.key
  });
  List<CardItem> cards = [];
  final int score;

  @override
  Widget build(BuildContext context) {
    final user = Provider.of<User?>(context);
    final Stream<QuerySnapshot> users = FirebaseFirestore.instance.collection('users').where('id', isEqualTo: user!.displayName).snapshots();
    return Card(
      margin: const EdgeInsets.all(40),
      elevation: 8,
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      color: Colors.green[700],
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
            children: [
              const Expanded(
                flex: 1,
                child: Icon(
                    Icons.score,
                    size: 40,
                    color: Colors.black54
                ),
              ),
              Expanded(


                child: Container(
                  height: 100,
                  padding: const EdgeInsets.symmetric(vertical: 20),
                  color: Colors.green,
                  child: StreamBuilder<QuerySnapshot>(
                    stream: users,
                    builder: (
                        BuildContext context,
                        AsyncSnapshot<QuerySnapshot> snapshot,
                        ){
                      if(snapshot.hasError){
                        return const Text('Something went wrong');
                      }
                      if(snapshot.connectionState == ConnectionState.waiting){
                        return const Text('Loading');
                      }


                      final data = snapshot.requireData;


                      return ListView.builder(
                        itemCount: data.size,
                        itemBuilder: (context, index){
                          if(snapshot.data!.docs.isNotEmpty){
                            return Text('${data.docs[index]['id']} vous avez un score de ${data.docs[index]['score']}');
                          }
                        },
                      );

                    },

                  ),
                ),
              ),






            ]
        ),

      ),
    );
  }
  List<int> _getVisibleCardIndexes() {
    return cards
        .asMap()
        .entries
        .where((entry) => entry.value.state == CardState.visible)
        .map((entry) => entry.key)
        .toList();
  }
  void onCardPressed(int index,context) {
    final user = Provider.of<User?>(context);

    cards[index].state = CardState.visible;
    final List<int> visibleCardIndexes = _getVisibleCardIndexes();


    if (visibleCardIndexes.length == 2) {
      final CardItem card1 = cards[visibleCardIndexes[0]];
      final CardItem card2 = cards[visibleCardIndexes[1]];

      if (card1.value == card2.value) {
        card1.state = CardState.guessed;
        card2.state = CardState.guessed;

        if (user != null) {
          FirebaseFirestore.instance
              .collection('users')
              .doc('${user!.displayName}\n')
              .get()
              .then((DocumentSnapshot documentSnapshot) {
            if (documentSnapshot.exists) {
              FirebaseFirestore.instance
                  .collection('users')
                  .doc('${user!.displayName}\n').update({
                'id': user!.displayName,
                'score': FieldValue.increment(score),
              }).then((value) =>
                  print('User Update')).catchError(
                      (error) => print('Failed to add user : $error')
              );
            } else {
              FirebaseFirestore.instance
                  .collection('users')
                  .doc('${user!.displayName}\n')
                  .set({
                'id': user!.displayName,
                'score': score,
              }).then((value) =>
                  print('User Added')).catchError(
                      (error) => print('Failed to add user : $error')
              );
            }
          });
        }
      }
    }
  }
}