change

IDawson-K · Feb 12, 2023 · ffc7fd9 · ffc7fd9
1 parent dd7472e
commit ffc7fd9
Show file tree

Hide file tree

Showing 20 changed files with 1,838 additions and 149 deletions.
diff --git a/DAWSON/_Fonts.sass b/DAWSON/_Fonts.sass
@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100;200;300;400;500;600;700;800;900&family=Dancing+Script:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')
+
+*
+    font-family: Orbitron, sans-serif
diff --git a/DAWSON/_Webkits.sass b/DAWSON/_Webkits.sass
@@ -0,0 +1,16 @@
+// Scrollbar
+
+::-webkit-scrollbar
+    width: 12px
+
+::-webkit-scrollbar-track
+    background: transparent
+
+::-webkit-scrollbar-thumb 
+    background: black
+    border: 4px solid white
+    border-radius: 2rem
+
+::-webkit-scrollbar-thumb:hover
+    background: royalblue
+    border: 2px solid white
diff --git a/DAWSON/_anim.sass b/DAWSON/_anim.sass
@@ -1,8 +1,24 @@
-// Depop
+// Motion Blur
+@for $i from 1 through 20
+    .n#{$i}
+        transition-delay: 0ms + 3ms * $i
+
+// Pop & Depop
+.pop
+    opacity: 1 !important
+
+    h2, video
+        transform: scale(1) !important
+        letter-spacing: 20px
+        font-size: 2rem
+
 .depop
-    transition: 1s
+    transition: 0.6s
     opacity: 0
     pointer-events: none
+
+.depop2
+    opacity: 0
 
 // Hovers
 .hvr1

diff --git a/DAWSON/_classes.sass b/DAWSON/_classes.sass
@@ -31,4 +31,11 @@
     left: 50%
     transform: translate(-50%, -50%)
     width: 100vw
-    height: 100vh
+    height: 100vh
+
+// Au milieu
+.milieu
+    position: absolute
+    left: 50%
+    top: 50%
+    transform: translate(-50%, -50%)
diff --git a/IMG/3Dbtn.svg b/IMG/3Dbtn.svg
diff --git a/IMG/PlanetAlphaSprite.png b/IMG/PlanetAlphaSprite.png
diff --git a/IMG/lune.png b/IMG/lune.png
diff --git a/IMG/vaisseausprite.png b/IMG/vaisseausprite.png
diff --git a/JS/game.js b/JS/game.js
@@ -0,0 +1,85 @@
+var objImage = null;
+            function init() {
+                objImage = document.getElementById("contour");
+                objImage.style.position = "relative";
+                objImage.style.left = "0px";
+                objImage.style.top = "0px";
+            }
+            function getKeyAndMove(e) {
+                var key_code = e.which || e.keyCode;
+                switch (key_code) {
+                    case 37: //gauche
+                        moveLeft();
+                        break;
+                    case 38: //haut
+                        moveUp();
+                        break;
+                    case 39: //droite
+                        moveRight();
+                        break;
+                    case 40: //bas
+                        moveDown();
+                        break;
+                }
+            }
+            function moveLeft() {
+                objImage.style.left = parseInt(objImage.style.left) - 20 + "px";
+                objImage.style.rotate = "-90deg";
+            }
+            function moveUp() {
+                objImage.style.top = parseInt(objImage.style.top) - 20 + "px";
+                objImage.style.rotate = "0deg";
+            }
+            function moveRight() {
+                objImage.style.left = parseInt(objImage.style.left) + 20 + "px";
+                objImage.style.rotate = "90deg";
+            }
+            function moveDown() {
+                objImage.style.top = parseInt(objImage.style.top) + 20 + "px";
+                objImage.style.rotate = "180deg";
+            }
+            window.onload = init;
+
+// Collision
+const ship = document.querySelector("#vaisseau");
+const planet = document.querySelector("#hitbox");
+const code = document.querySelector("#code");
+
+function checkCollision() {
+  let shipRect = ship.getBoundingClientRect();
+  let planetRect = planet.getBoundingClientRect();
+
+  if (shipRect.x < planetRect.x + planetRect.width &&
+    shipRect.x + shipRect.width > planetRect.x &&
+    shipRect.y < planetRect.y + planetRect.height &&
+    shipRect.height + shipRect.y > planetRect.y) {
+    code.classList.add('codepop');
+    document.querySelector('#retour').classList.add('retourpop');
+  }
+}
+setInterval(checkCollision, 50);
+
+// Click Sound
+var click = document.querySelector('#clicksound');
+click.volume = 0.6;
+
+boutons = document.querySelectorAll('.click');
+
+boutons.forEach(function(truc) {
+    truc.addEventListener('click', function() {
+        click.load();
+        click.play();
+    });
+});
+
+// Boutons OK
+function bouton1() {
+    document.querySelector('#vif').classList.add('plurien');
+    document.querySelector('#ok1').classList.add('okdisparait');
+}
+
+function bouton2() {
+    document.querySelector('#blabla').classList.add('plurien');
+    document.querySelector('#vif').classList.add('vifpop');
+    document.querySelector('#ok2').classList.add('okdisparait');
+}
diff --git a/JS/script.js b/JS/script.js
@@ -33,6 +33,16 @@ tag = document.querySelector('#tag');
 // Titre
 titre = document.querySelector('h1');
 
+// Systeme solaire
+asoleil = document.querySelector('#soleil');
+amercure = document.querySelector('#mercure');
+avenus = document.querySelector('#venus');
+aterre = document.querySelector('#terre');
+amars = document.querySelector('#mars');
+ajupiter = document.querySelector('#jupiter');
+asaturne = document.querySelector('#saturne');
+auranus = document.querySelector('#uranus');
+
 function begin() {
     start.classList.add('startDepop');
     hole.classList.add('overlayDepop');
@@ -42,48 +52,40 @@ function begin() {
     rocket.classList.add('fuseelaunch');
     tag.classList.add('depop');
     titre.classList.add('titreafter');
+    document.querySelector('.code').classList.add('codepop');
 }
 
-// Information Display
-function soleil() {
-    document.querySelector('#soleil').classList.toggle('info');
-    document.querySelector('.bgnoir').classList.toggle('black');
-};
-
-function mercure() {
-    document.querySelector('#mercure').classList.toggle('info');
-    document.querySelector('.bgnoir').classList.toggle('black');
-};
-
-function venus() {
-    document.querySelector('#venus').classList.toggle('info');
-    document.querySelector('.bgnoir').classList.toggle('black');
-};
+// 3D Mode
+function mode3D() {
+    document.querySelector('.cube').classList.toggle('cube3D');
+    document.querySelector('#all').classList.toggle('all3D');
+    document.querySelector('#rond').classList.toggle('switchbtn');
+    amercure.classList.toggle('depop');
+    avenus.classList.toggle('depop');
+    aterre.classList.toggle('depop');
+    amars.classList.toggle('depop');
+    ajupiter.classList.toggle('depop');
+    asaturne.classList.toggle('depop');
+    auranus.classList.toggle('depop');
+}
 
+// Information Display
 function terre() {
+    document.querySelector('#all').classList.toggle('depop2');
     document.querySelector('#terre').classList.toggle('info');
     document.querySelector('.bgnoir').classList.toggle('black');
+    document.querySelector('#holo').play();
+    document.querySelector('#holo').playbackRate = 1.4;
+    document.querySelector('.details').classList.toggle('pop');
 };
 
-function mars() {
-    document.querySelector('#mars').classList.toggle('info');
-    document.querySelector('.bgnoir').classList.toggle('black');
-};
-
-function jupiter() {
-    document.querySelector('#jupiter').classList.toggle('info');
-    document.querySelector('.bgnoir').classList.toggle('black');
-};
-
-function saturne() {
-    document.querySelector('#saturne').classList.toggle('info');
-    document.querySelector('.bgnoir').classList.toggle('black');
-};
+function holoplay() {
+    document.querySelector('#holo').playbackRate = 0.7;
+}
 
-function uranus() {
-    document.querySelector('#uranus').classList.toggle('info');
-    document.querySelector('.bgnoir').classList.toggle('black');
-};
+function holopause() {
+    document.querySelector('#holo').playbackRate = 1.4;
+}
 
 // Hover on planets
 function soleilup() {