Responsive design tablette

SwichGIT/src/css/PageDaccueil.css

@@ -376,25 +376,7 @@ label:active:after {
     z-index: 10;
 }
 
-#choosemode {
-    height: 4vw;
-    width: 16vw;
-    position: absolute;
-    left: 42vw;
-    top: 50vh;
-    z-index: 15;
-}
 
-#conteneurmode{
-    width: 80%;
-    height: 2vw;
-    left : 10%;
-    top : 25%;
-    position: absolute;
-    margin: 0 auto;
-    background-color: var(--lightsedonca);
-    border-radius: 5vw;
-}
 
 #modeprec{
     height: 100%;
@@ -417,31 +399,9 @@ label:active:after {
     left: 15%;
 }
 
-#textmode {
-        font-family: Lucida Console, Arial Black, Arial;
-        font-size: 1vw;
-        color: #707070;
-        text-align:center;
-        margin: 5% auto 0 auto;
-}
 
-#triangleprec{
-    width: 0;
-    height: 0;
-    margin: 0.25vw auto 0 auto;
-    border-top: 0.75vw solid transparent;
-    border-right: 1.25vw solid grey;
-    border-bottom: 0.75vw solid transparent;
-}
 
-#trianglesuiv{
+
-    width: 0;
-    height: 0;
-    margin: 0.25vw auto 0 auto;
-    border-top: 0.75vw solid transparent;
-    border-left: 1.25vw solid grey;
-    border-bottom: 0.75vw solid transparent;
-}
 
 #buttonadd {
     position: absolute;

SwichGIT/src/css/PartieGame.css

@@ -15,11 +15,6 @@
     justify-content: center;
 }
 
-.divmenu {
-    width: 10vw;
-    height: inherit;
-    margin-right: 1vw;
-}
 
 .retourstp {
     position: absolute;
@@ -30,13 +25,6 @@
     top:-3vw;
 }
 
-#affPoints {
-    text-align: center;
-    font-family: Montserrat, impact, Arial Black;
-    font-size: 2vw;
-    margin-top: 1.2vw;
-    color: var(--lightsedonca);
-}
 
 #affSolution {
     text-align: center;

SwichGIT/src/css/desktops.css

@@ -1,6 +1,9 @@
 /*Ecran*/
 @media screen and (min-width: 992px) {
     
+    :root{
+        --taille : 10vw;
+    }
     
     /*PARTIE FORMES*/
     .containform3 {
@@ -31,6 +34,52 @@
         z-index: 15;
     }
 
+    #choosemode {
+        height: 4vw;
+        width: 16vw;
+        position: absolute;
+        left: 42vw;
+        top: 50vh;
+        z-index: 15;
+    }
+
+    #conteneurmode{
+        width: 80%;
+        height: 2vw;
+        left : 10%;
+        top : 25%;
+        position: absolute;
+        margin: 0 auto;
+        background-color: var(--lightsedonca);
+        border-radius: 5vw;
+    }
+
+    #triangleprec{
+        width: 0;
+        height: 0;
+        margin: 0.25vw auto 0 auto;
+        border-top: 0.75vw solid transparent;
+        border-right: 1.25vw solid grey;
+        border-bottom: 0.75vw solid transparent;
+    }
+
+    #trianglesuiv{
+        width: 0;
+        height: 0;
+        margin: 0.25vw auto 0 auto;
+        border-top: 0.75vw solid transparent;
+        border-left: 1.25vw solid grey;
+        border-bottom: 0.75vw solid transparent;
+    }
+
+    #textmode {
+        font-family: Lucida Console, Arial Black, Arial;
+        font-size: 1vw;
+        color: #707070;
+        text-align:center;
+        margin: 5% auto 0 auto;
+    }
+
     #formSize{
         margin : 0 auto;
         width: 100%;
@@ -107,6 +156,20 @@
         display: block;
     }
 
+    #affPoints {
+        text-align: center;
+        font-family: Montserrat, impact, Arial Black;
+        font-size: 2vw;
+        margin-top: 1.2vw;
+        color: var(--lightsedonca);
+    }
+
+    .divmenu {
+        width: 10vw;
+        height: inherit;
+        margin-right: 1vw;
+    }
+
     .containButtonForm{
         height: 2.5vw;
         width: 2.5vw;
@@ -127,7 +190,7 @@
 
     .flex-item {
         background: var(--lightsedonca);
-        width: 10vw;
+        width: var(--taille);
         border-radius: 0.75vw;
         padding-right: 0.15vw;
         padding-left: 0.15vw;

SwichGIT/src/css/tablet.css

@@ -1,6 +1,10 @@
 /*DemTéléphone 1i Ecran*/
 @media screen and (min-width: 669px) and (max-width: 992px) {
 
+    :root{
+        --taille : 14vw;
+    }
+
     .containform3 {
         position: relative;
         height: calc(1.25*var(--x));
@@ -93,7 +97,6 @@
         width: 20vh;
         padding-top: 1vh;
         position: relative;
-        left: 27vw;
     }
 
     .txt {
@@ -159,7 +162,128 @@
         position: absolute;
         font-size: 10vw;
         margin-top: 0.2vw;
-        margin-left: 12.5vw;
+        width: inherit;
+        text-align: center;
+        color: var(--lightsedonca);
+    }
+
+    #choosemode {
+        height: 7vw;
+        width: 50vw;
+        position: absolute;
+        left: 25vw;
+        top: 50vh;
+        z-index: 15;
+    }
+
+    #conteneurmode{
+        width: 80%;
+        height: 80%;
+        left : 10%;
+        top : 45%;
+        position: absolute;
+        background-color: var(--lightsedonca);
+        border-radius: 5vw;
+    }
+
+    #triangleprec{
+        width: 0;
+        height: 0;
+        margin: 0.25vw auto 0 auto;
+        border-top: 2vw solid transparent;
+        border-right: 4vw solid grey;
+        border-bottom: 2vw solid transparent;
+        margin-top: 0.75vw;
+    }
+
+    #trianglesuiv{
+        width: 0;
+        height: 0;
+        margin: 0.25vw auto 0 auto;
+        border-top: 2vw solid transparent;
+        border-left: 4vw solid grey;
+        border-bottom: 2vw solid transparent;
+        margin-top: 0.75vw;
+    }
+
+    #textmode {
+        font-family: Lucida Console, Arial Black, Arial;
+        font-size: 3vw;
+        color: #707070;
+        text-align:center;
+        margin: 5% auto 0 auto;
+    }
+
+    .logoboutton{
+        font-size: 2vw;    
+        color: var(--lightprima);
+        margin: 1vw; 
+    }
+
+    /*Externe*/
+    .bouttonMenuHaut{
+        height: 4vw;
+        width: 4vw;
+        background-color: var(--lightsedonca);
+        border-radius: 50%;
+        margin: 0 auto;
+        margin-top: 2.5vw;
+        position: relative;
+        display: block;
+    }
+
+
+    .divmenu {
+        width: 25vw;
+        height: inherit;
+        margin-right: 1vw;
+    }
+
+
+    #affPoints {
+        text-align: center;
+        font-family: Montserrat, impact, Arial Black;
+        font-size: 2vw;
+        margin-top: 3.5vw;
         color: var(--lightsedonca);
     }
+
+    .containcards {
+        overflow-x: auto;
+        display: flex;
+        flex-wrap: wrap;
+        padding-top: 5vw;
+        justify-content: center;
+        width: 70vw;
+        margin: 0 auto;
+        grid-row-gap: 2vw;
+        column-gap: 2vw;
+    }
+
+    .flex-item {
+        flex-grow: 1;
+        background: var(--lightsedonca);
+        width: var(--taille);
+        border-radius: 0.75vw;
+        padding-right: 0.15vw;
+        padding-left: 0.15vw;
+        padding-bottom: 0.25vw;
+        list-style: none;
+        display: flex;
+        margin-right: 0.4vw;
+        margin-left: 0.4vw;
+        margin-bottom: 1vw;
+        -webkit-flex-flow: row wrap;
+        justify-content: space-around;
+    }
+
+    .item-form {
+        width: 4vw;
+        height: 4vw;
+        padding-left: 0.1vw;
+        margin-top: 0.25vw;        
+        border-radius: 10px;
+        background-color: var(--lighttercia);
+    }
+
 }

SwichGIT/src/index.html

@@ -642,7 +642,7 @@
                 </a>
             </div>
             <div class="divmenu">
-                <a class="bouttonMenuHaut" onclick="test()">
+                <a class="bouttonMenuHaut" onclick="chercheCombi2()">
                     <div class="containButtonForm">
                         <i class="fas fa-search logoboutton"></i>  
                     </div>

SwichGIT/src/js/main.js

@@ -662,72 +662,6 @@ function chercherCombinaison() {
 	window.alert("Nombre de combinaison: " + Cptsolution);
 }
 
-function test() {
-	printCombinations([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], 3);
-}
-
-function printCombinations(array, p) {
-	var combinations = [];
-	var Cptsolution = 0;
-	for (k = 2; k < p + 1; k++) {
-
-		function run(level, start) {
-			for (var i = start; i < array.length - k + level + 1; i++) {
-				combinations[level] = array[i];
-				//console.log(i);
-				if (level < k - 1) {
-
-					run(level + 1, i + 1);
-				} else {
-
-					var combTest = [];
-					for (var j = 0; j < combinations.length; j++) {
-						combTest.push(deckPartie[combinations[j]]);
-						//window.alert("Matrice ajouté num" + j + " :" + deckPartie[combinations[j]].getMatrice);
-						//console.log("i"+j +" :"+ combinations[j]);
-					}
-					//console.log("matrice début ex: "+combTest[0].getMatrice);
-					console.log("Cartes selectionnées :(en partant de indice 0) :")
-					console.log(combinations.join(" "));
-					console.log("----- taille :" + combTest.length + " -------");
-
-					var cpt = testCombinaison(combTest, combinations, Cptsolution);
-					Cptsolution = cpt;
-				}
-			}
-		}
-		run(0, 0);
-	}
-	window.alert("nb combi :" + Cptsolution);
-}
-
-
-function testCombinaison(DeckTeste, combi, Cptsolution) {
-	var tabCode = [];
-	var tab = [];
-	//window.alert("---------------");
-	tab = AssemblageARBRE(copieListeDeCarte(DeckTeste), copieCarte(DeckTeste[0]));
-
-	//Recupération de code
-	var solution = true;
-	for (var h = 0; h < tab.length; h++) {
-		tabCode.push(tab[h].code);
-	}
-	//Reagarde si il y a une solution
-	for (var g = 0; g < tab.length; g++) {
-		if (tab[g].code == DeckTeste.length) {
-			solution = false;
-		}
-	}
-	//Reagarde si il y a une solution
-	if (!solution) {
-		Cptsolution++;
-		window.alert("Combinaison à " + (DeckTeste.length) + " cartes trouvée : " + combi);
-	}
-	return Cptsolution;
-}
-
-
 function chercheCombi2() {
 
 	var Cptsolution = 0;