Merge pull request #1 from mi-lopez/feature/pokemon-game

Pokemon game

src/Controller/Frontend/PokemonAjaxController.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Synolia\Bundle\PokemonBundle\Controller\Frontend;
+
+use Doctrine\Persistence\ManagerRegistry;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\Routing\Annotation\Route;
+use Synolia\Bundle\PokemonBundle\Entity\Pokemon;
+
+class PokemonAjaxController extends AbstractController
+{
+    public function __construct(protected ManagerRegistry $doctrine)
+    {
+    }
+
+    /**
+     * @Route(
+     *     "/get-images",
+     *     name="synolia_pokemon_get_images",
+     *     methods={"GET"},
+     *     options={"expose"=true}
+     * )
+     */
+    public function getPokemonImagesAction()
+    {
+        $images = $this->doctrine->getRepository(Pokemon::class)->getImages();
+
+        if (empty($images)) {
+            return new JsonResponse(['success' => false, 'message' => 'Not enough Pokemons to start the game']);
+        } else {
+            return new JsonResponse(['success' => true, 'images' => $images]);
+        }
+    }
+}

src/Entity/Repository/PokemonRepository.php

@@ -22,4 +22,14 @@ public function __construct(ManagerRegistry $registry)
     {
         parent::__construct($registry, Pokemon::class);
     }
+
+    public function getImages($max = 100)
+    {
+        $qb = $this->createQueryBuilder('p');
+        $qb->select('p.image as image')
+            ->where('p.image IS NOT NULL')
+            ->setMaxResults($max);
+
+        return array_column($qb->getQuery()->getArrayResult(), 'image');
+    }
 }

src/Resources/config/controllers.yml

@@ -6,3 +6,10 @@ services:
             - '@oro_form.update_handler'
         calls:
             - ['setContainer', ['@Psr\Container\ContainerInterface']]
+
+    Synolia\Bundle\PokemonBundle\Controller\Frontend\PokemonAjaxController:
+        public: true
+        arguments:
+            - '@doctrine'
+        calls:
+            - ['setContainer', ['@Psr\Container\ContainerInterface']]

src/Resources/config/oro/routing.yml

@@ -2,3 +2,10 @@ synolia_pokemon:
     resource: "@SynoliaPokemonBundle/Controller"
     type: annotation
     prefix: /pokemon
+
+synolia_pokemon_frontend_ajax:
+    resource: "@SynoliaPokemonBundle/Controller/Frontend/PokemonAjaxController.php"
+    type:     annotation
+    prefix:   /pokemon
+    options:
+        frontend: true

src/Resources/public/default/scss/components/pokemon.scss

@@ -0,0 +1,160 @@
+/* @theme: default; */
+
+#pokemon-game-area {
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  display: none;
+}
+
+.pokemon-game-image {
+  position: absolute;
+  cursor: pointer;
+}
+
+.pokemon-game-top-bar{
+  background-image: linear-gradient(to right, #1884f1 , #d1181a);
+  color: white;
+  font-weight: bold;
+}
+
+.pokemon-game-control-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 10px;
+  max-width: 1400px;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+button#start-game, button#stop-game {
+  font-size: 14px;
+  font-weight: bold;
+  padding: 8px 15px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  background-color: #ffb1d8a1;
+  color: #fff;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
+  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
+  z-index: 10000;
+}
+
+button#stop-game {
+  display: none;
+}
+
+.pokemon-score-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  #pokemon-score {
+    font-size: 20px;
+    padding-left: 10px;
+  }
+}
+
+
+// score label animation
+.pokemon-score-label {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 2px;
+  color: #ff0081;
+  font-weight: bold;
+  padding: 2px;
+  font-size: 16px;
+  animation: labelAnimation 0.5s ease forwards;
+}
+
+@keyframes labelAnimation {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// confetti
+.confetti-button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
+}
+
+.confetti-button:before, .confetti-button:after {
+  position: absolute;
+  content: '';
+  display: block;
+  width: 140%;
+  height: 100%;
+  left: -20%;
+  z-index: -1000;
+  transition: all ease-in-out 0.5s;
+  background-repeat: no-repeat;
+}
+
+.confetti-button:before {
+  display: none;
+  top: -75%;
+  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
+  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
+}
+
+.confetti-button:after {
+  display: none;
+  bottom: -75%;
+  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
+  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
+}
+
+.confetti-button.animate:before {
+  display: block;
+  animation: topBubbles ease-in-out 0.75s forwards;
+}
+
+.confetti-button.animate:after {
+  display: block;
+  animation: bottomBubbles ease-in-out 0.75s forwards;
+}
+@keyframes
+topBubbles {  0% {
+  background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
+}
+  50% {
+    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
+  }
+  100% {
+    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
+    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+  }
+}
+@keyframes
+bottomBubbles {  0% {
+  background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
+}
+  50% {
+    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
+  }
+  100% {
+    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
+    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+  }
+}

src/Resources/public/default/scss/styles.scss

@@ -0,0 +1,3 @@
+/* @theme: default; */
+
+@import 'components/pokemon';