jorgefelipecunha · Dev-JoseRonaldo · Jun 18, 2022 · Jun 19, 2022 · Jun 19, 2022 · Jun 20, 2022
diff --git a/Images/background/bg_cyberpunk.png b/Images/background/bg_cyberpunk.png
diff --git a/Images/background/bg_cyberpunk_small.png b/Images/background/bg_cyberpunk_small.png
diff --git a/Images/background/bg_desert.png b/Images/background/bg_desert.png
diff --git a/Images/background/bg_desert_small.png b/Images/background/bg_desert_small.png
diff --git a/Images/background/bg_farm.png b/Images/background/bg_farm.png
diff --git a/Images/background/bg_farm_small.png b/Images/background/bg_farm_small.png
diff --git a/Images/background/bg_florest.png b/Images/background/bg_florest.png
diff --git a/Images/background/bg_florest_small.png b/Images/background/bg_florest_small.png
diff --git a/Images/background/bg_halloween.png b/Images/background/bg_halloween.png
diff --git a/Images/background/bg_halloween_small.png b/Images/background/bg_halloween_small.png
diff --git a/Images/background/bg_industry.png b/Images/background/bg_industry.png
diff --git a/Images/background/bg_industry_small.png b/Images/background/bg_industry_small.png
diff --git a/Images/characters/christmas/christmas_dead.gif b/Images/characters/christmas/christmas_dead.gif
diff --git a/Images/characters/christmas/christmas_idle_70.gif b/Images/characters/christmas/christmas_idle_70.gif
diff --git a/Images/characters/christmas/christmas_jump.gif b/Images/characters/christmas/christmas_jump.gif
diff --git a/Images/characters/christmas/christmas_run.gif b/Images/characters/christmas/christmas_run.gif
diff --git a/Images/characters/cowboy_girl/cowboy_girl_dead.gif b/Images/characters/cowboy_girl/cowboy_girl_dead.gif
diff --git a/Images/characters/cowboy_girl/cowboy_girl_idle_70.gif b/Images/characters/cowboy_girl/cowboy_girl_idle_70.gif
diff --git a/Images/characters/cowboy_girl/cowboy_girl_jump.gif b/Images/characters/cowboy_girl/cowboy_girl_jump.gif
diff --git a/Images/characters/cowboy_girl/cowboy_girl_run.gif b/Images/characters/cowboy_girl/cowboy_girl_run.gif
diff --git a/Images/characters/cowboy_man/cowboy_man_dead.gif b/Images/characters/cowboy_man/cowboy_man_dead.gif
diff --git a/Images/characters/cowboy_man/cowboy_man_idle_70.gif b/Images/characters/cowboy_man/cowboy_man_idle_70.gif
diff --git a/Images/characters/cowboy_man/cowboy_man_jump.gif b/Images/characters/cowboy_man/cowboy_man_jump.gif
diff --git a/Images/characters/cowboy_man/cowboy_man_run.gif b/Images/characters/cowboy_man/cowboy_man_run.gif
diff --git a/Images/characters/dino/dino_dead.gif b/Images/characters/dino/dino_dead.gif
diff --git a/Images/characters/dino/dino_idle_70.gif b/Images/characters/dino/dino_idle_70.gif
diff --git a/Images/characters/dino/dino_jump.gif b/Images/characters/dino/dino_jump.gif
diff --git a/Images/characters/dino/dino_run.gif b/Images/characters/dino/dino_run.gif
diff --git a/Images/characters/halloween/halloween_dead.gif b/Images/characters/halloween/halloween_dead.gif
diff --git a/Images/characters/halloween/halloween_idle_70.gif b/Images/characters/halloween/halloween_idle_70.gif
diff --git a/Images/characters/halloween/halloween_jump.gif b/Images/characters/halloween/halloween_jump.gif
diff --git a/Images/characters/halloween/halloween_run.gif b/Images/characters/halloween/halloween_run.gif
diff --git a/Images/characters/ninja_girl/ninja_girl_dead.gif b/Images/characters/ninja_girl/ninja_girl_dead.gif
diff --git a/Images/characters/ninja_girl/ninja_girl_idle_70.gif b/Images/characters/ninja_girl/ninja_girl_idle_70.gif
diff --git a/Images/characters/ninja_girl/ninja_girl_jump.gif b/Images/characters/ninja_girl/ninja_girl_jump.gif
diff --git a/Images/characters/ninja_girl/ninja_girl_run.gif b/Images/characters/ninja_girl/ninja_girl_run.gif
diff --git a/Images/characters/ninja_man/ninja_man_dead.gif b/Images/characters/ninja_man/ninja_man_dead.gif
diff --git a/Images/characters/ninja_man/ninja_man_idle_70.gif b/Images/characters/ninja_man/ninja_man_idle_70.gif
diff --git a/Images/characters/ninja_man/ninja_man_jump.gif b/Images/characters/ninja_man/ninja_man_jump.gif
diff --git a/Images/characters/ninja_man/ninja_man_run.gif b/Images/characters/ninja_man/ninja_man_run.gif
diff --git a/Images/characters/robot/robot_dead.gif b/Images/characters/robot/robot_dead.gif
diff --git a/Images/characters/robot/robot_idle_70.gif b/Images/characters/robot/robot_idle_70.gif
diff --git a/Images/characters/robot/robot_jump.gif b/Images/characters/robot/robot_jump.gif
diff --git a/Images/characters/robot/robot_run.gif b/Images/characters/robot/robot_run.gif
diff --git a/Images/enemy_1.gif b/Images/enemy_1.gif
diff --git a/Images/enemy_idle.gif b/Images/enemy_idle.gif
diff --git a/Images/menu.png b/Images/menu.png
diff --git a/Images/scenes/cyberpunk/layer_1.png b/Images/scenes/cyberpunk/layer_1.png
diff --git a/Images/scenes/cyberpunk/layer_2.png b/Images/scenes/cyberpunk/layer_2.png
diff --git a/Images/scenes/cyberpunk/layer_3.png b/Images/scenes/cyberpunk/layer_3.png
diff --git a/Images/scenes/desert/layer_1.png b/Images/scenes/desert/layer_1.png
diff --git a/Images/scenes/desert/layer_2.png b/Images/scenes/desert/layer_2.png
diff --git a/Images/scenes/desert/layer_3.png b/Images/scenes/desert/layer_3.png
diff --git a/Images/scenes/desert/layer_4.png b/Images/scenes/desert/layer_4.png
diff --git a/Images/scenes/desert/layer_5.png b/Images/scenes/desert/layer_5.png
diff --git a/Images/scenes/desert/layer_6.png b/Images/scenes/desert/layer_6.png
diff --git a/Images/scenes/farm/layer_1.png b/Images/scenes/farm/layer_1.png
diff --git a/Images/scenes/farm/layer_2.png b/Images/scenes/farm/layer_2.png
diff --git a/Images/scenes/farm/layer_3.png b/Images/scenes/farm/layer_3.png
diff --git a/Images/scenes/florest/Layer_0004_Lights.png b/Images/scenes/florest/Layer_0004_Lights.png
diff --git a/Images/scenes/florest/Layer_0007_Lights.png b/Images/scenes/florest/Layer_0007_Lights.png
diff --git a/Images/scenes/florest/layer_1.png b/Images/scenes/florest/layer_1.png
diff --git a/Images/scenes/florest/layer_2.png b/Images/scenes/florest/layer_2.png
diff --git a/Images/scenes/florest/layer_3.png b/Images/scenes/florest/layer_3.png
diff --git a/Images/scenes/florest/layer_4.png b/Images/scenes/florest/layer_4.png
diff --git a/Images/scenes/florest/layer_5.png b/Images/scenes/florest/layer_5.png
diff --git a/Images/scenes/florest/layer_6.png b/Images/scenes/florest/layer_6.png
diff --git a/Images/scenes/florest/layer_7.png b/Images/scenes/florest/layer_7.png
diff --git a/Images/scenes/florest/layer_8.png b/Images/scenes/florest/layer_8.png
diff --git a/Images/scenes/florest/layer_9.png b/Images/scenes/florest/layer_9.png
diff --git a/Images/scenes/industry/layer_1.png b/Images/scenes/industry/layer_1.png
diff --git a/Images/scenes/industry/layer_2.png b/Images/scenes/industry/layer_2.png
diff --git a/Images/scenes/industry/layer_3.png b/Images/scenes/industry/layer_3.png
diff --git a/Images/scenes/industry/layer_4.png b/Images/scenes/industry/layer_4.png
diff --git a/Images/scenes/industry/layer_5.png b/Images/scenes/industry/layer_5.png
diff --git a/css/layouts/background.css b/css/layouts/background.css
@@ -0,0 +1,134 @@
+.background {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 1750px;
+}
+
+.background__img {
+  position: absolute;
+  bottom: 94px;
+  left: 0;
+  width: 100%;
+  height: auto;
+}
+
+.background__img--florest {
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  width: auto;
+  height: 100%;
+}
+
+/*
+.background__img--1 {
+  animation: bg-animation 0s infinite linear;
+}
+*/
+
+.background__img--2 {
+  animation: bg-animation 11s infinite linear;
+}
+
+.background__img--3 {
+  animation: bg-animation 10s infinite linear;
+}
+
+.background__img--4 {
+  animation: light-animation 18s infinite linear;
+}
+
+.background__img--5 {
+  animation: bg-animation 8s infinite linear;
+}
+
+.background__img--6 {
+  animation: bg-animation 7s infinite linear;
+}
+.background__img--7 {
+  animation: light-animation 12s infinite linear;
+}
+
+.background__img--8 {
+  animation: bg-animation 5s infinite linear;
+}
+
+.background__img--9 {
+  animation: bg-animation 4s infinite linear;
+}
+.background__img--10 {
+  animation: bg-animation 1s infinite linear;
+}
+
+.background__terrain {
+  width: auto;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  animation: terrain-animation 1s infinite linear;
+}
+
+@keyframes bg-animation {
+  from {
+    left: -6px;
+  }
+  to {
+    left: -928px;
+  }
+}
+
+@keyframes light-animation {
+  from {
+    left: 900px;
+  }
+  to {
+    left: -900px;
+  }
+}
+
+@keyframes terrain-animation {
+  from {
+    left: -6px;
+  }
+  to {
+    left: -928px;
+  }
+}
+
+@keyframes bg-cyberpunk-animation {
+  from {
+    left: -6px;
+  }
+  to {
+    left: -1100px;
+  }
+}
+
+@keyframes bg-farm-animation {
+  from {
+    left: -6px;
+  }
+  to {
+    left: -1024.6px;
+  }
+}
+
+@keyframes bg-desert-animation {
+  from {
+    left: -6px;
+  }
+  to {
+    left: -1200px;
+  }
+}
+
+@keyframes bg-industry-animation {
+  from {
+    left: -6px;
+  }
+  to {
+    left: -1088px;
+  }
+}
diff --git a/css/layouts/buttons.css b/css/layouts/buttons.css
@@ -0,0 +1,46 @@
+.button {
+  font-size: 1rem;
+  font-weight: 500;
+
+  padding: 12px 20px;
+  background-color: transparent;
+  border: 1px solid var(--color-btn);
+  border-radius: 20px;
+  color: var(--color-btn);
+  text-transform: uppercase;
+  cursor: pointer;
+  font-family: var(--font-secundary);
+}
+
+.button--small {
+  font-size: 0.7rem;
+  padding: 7.5px 13.5px;
+  border-radius: 15px;
+  z-index: 100;
+}
+
+.select-person__back-menu--locked {
+  cursor: default;
+  z-index: 150;
+  font-weight: 700;
+}
+
+.button--menu,
+.game-over__btn {
+  font-family: var(--font-ui);
+  color: var(--color-btn);
+  background: var(--linear-btn);
+  font-size: 1.25rem;
+  border: none;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.49);
+  transition: all 0.2s ease;
+}
+
+.button--menu:hover,
+.game-over__btn:hover {
+  background: var(--btn-hover);
+}
+
+.button--ui {
+  font-family: var(--font-ui);
+}
diff --git a/css/layouts/card-person.css b/css/layouts/card-person.css
@@ -0,0 +1,47 @@
+.select-person__person {
+  max-width: 150px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  font-weight: 700;
+  font-family: var(--font-ui);
+  color: var(--color-btn);
+
+  margin: 0 auto;
+  padding: 0;
+  background-color: var(--color-game-title);
+
+  background: var(--linear-btn);
+  border: 1px solid black;
+  border-radius: 30px;
+  position: relative;
+}
+
+.select-person__person--locked::after {
+  position: absolute;
+  content: '';
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  opacity: 0.5;
+  border-radius: 30px;
+}
+.select-person__person-box {
+  width: 70%;
+  height: 80%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(178px, 4fr));
+  gap: 1rem;
+}
+
+.person__img {
+  width: 50%;
+  margin-bottom: 5px;
+}
diff --git a/css/layouts/card-scene.css b/css/layouts/card-scene.css
@@ -0,0 +1,135 @@
+.select-scene__scene {
+  position: relative;
+  width: 227px;
+  height: 138px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  margin: auto;
+  padding: 0;
+  background-color: var(--color-game-title);
+
+  background: linear-gradient(90deg, #0d4b17 0%, #349e46 100%);
+}
+
+.select-scene__scene--locked::after {
+  position: absolute;
+  content: '';
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  opacity: 0.4;
+  border-radius: 30px;
+}
+.select-scene__scene-box {
+  width: 70%;
+  height: 60%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 4fr));
+  gap: 1rem;
+}
+
+.select-scene__scene {
+  cursor: pointer;
+}
+
+.select-scene__scene:nth-child(1):hover ~ .select-scene_background {
+  animation: bg-scene-in 0.5s ease-in forwards;
+  background-image: url('/Images/background/bg_florest.png');
+}
+
+.select-scene__scene:nth-child(2):hover ~ .select-scene_background {
+  animation: bg-scene-in 0.5s ease-in forwards;
+  background-image: url('/Images/background/bg_cyberpunk.png');
+}
+
+.select-scene__scene:nth-child(3):hover ~ .select-scene_background {
+  animation: bg-scene-in 0.5s ease-in forwards;
+  background-image: url('/Images/background/bg_farm.png');
+}
+
+.select-scene__scene:nth-child(4):hover ~ .select-scene_background {
+  animation: bg-scene-in 0.5s ease-in forwards;
+  background-image: url('/Images/background/bg_desert.png');
+}
+
+.select-scene__scene:nth-child(5):hover ~ .select-scene_background {
+  animation: bg-scene-in 0.5s ease-in forwards;
+  background-image: url('/Images/background/bg_industry.png');
+}
+
+.select-scene__scene:nth-child(6):hover ~ .select-scene_background {
+  animation: bg-scene-in 0.5s ease-in forwards;
+  background-image: url('/Images/background/bg_halloween.png');
+}
+
+.select-scene__scene:hover {
+  background: #4de466;
+}
+
+.select-scene__scene:hover .scene__locked {
+  display: flex;
+}
+
+.scene__info {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.scene__img {
+  width: 97%;
+  height: 95%;
+  object-fit: cover;
+}
+
+.scene__locked {
+  display: none;
+  position: absolute;
+  background-color: black;
+  opacity: 0.8;
+  width: 98%;
+  height: 95%;
+  align-items: center;
+  justify-content: center;
+}
+
+.locked__text {
+  text-transform: uppercase;
+  font-family: var(--font-primary);
+  color: #4de466;
+  opacity: 1;
+  z-index: 200;
+}
+
+@keyframes card-hover {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.1;
+  }
+}
+
+@keyframes card-hover-out {
+  0% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes bg-scene-in {
+  0% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}