Improving the Yo Te Lo Guiso ad.

js-src/index.js

@@ -51,7 +51,7 @@ function loadAd() {
         const a = document.createElement('a')
         const image = document.createElement('img')
         const text_container = document.createElement('div')
-        const text = document.createElement('h3')
+        const text = document.createElement('h4')
         const promoted = document.createElement('p')
 
         promoted.classList.add('promoted-tag')

lib/BurguillosInfo/Ad.pm

@@ -9,12 +9,24 @@ use feature 'signatures';
 
 use Moo::Role;
 
+has alternative => (
+    is => 'rw'
+);
+
+sub max_alternative {
+    return 0;
+}
+
+sub regenerate_alternative($self) {
+    $self->alternative(int(rand() * ($self->max_alternative+1)));
+}
+
 sub order {
     return 999;
 }
 
 sub seconds {
-    return 15;
+    return 3;
 }
 
 sub serialize ($self) {

lib/BurguillosInfo/Ads.pm

@@ -61,6 +61,7 @@ sub get_next ( $self, $current_ad_number = undef ) {
     if ( !$ad->is_active ) {
         return $self->get_next( $self->_get_next_number($current_ad_number) );
     }
+    $ad->regenerate_alternative;
     return {
         ad                => $ad->serialize,
         continue          => 1,

lib/BurguillosInfo/Ads/YoTeLoGuiso.pm

@@ -16,16 +16,31 @@ sub id ($self) {
     return 'yo-te-lo-guiso';
 }
 
+sub order {
+    return 50;
+}
+
+sub max_alternative {
+    return 2;
+}
+
 sub is_active ($self) {
     return 1;
 }
 
-sub img {
-    return '/img/afasode.svg';
+sub img ($self) {
+    if ( $self->alternative == 1 ) {
+        return '/img/anuncio-yo-te-lo-guiso-2.webp';
+    }
+    return '/img/anuncio-yo-te-lo-guiso-1.webp';
 }
 
-sub text {
-    return 'Prueba.';
+sub text($self) {
+    if ( $self->alternative == 1 ) {
+        return
+'Una comida como esta no la ves todos los días, disponible en Burguillos, entra y descubrelo.';
+    }
+    return 'Comida hecha como en tu casa, Yo Te Lo Guiso...';
 }
 
 sub href {

public/css/styles.css

@@ -24,20 +24,29 @@ body {
   body div.carousel {
     position: fixed;
     top: 80%;
-    height: 20%;
-    width: 100%;
-    background: white; }
+    height: calc(20% - 6px);
+    width: calc(100% - 6px);
+    background: #f2eb8c;
+    border: solid 3px black; }
+    body div.carousel:hover {
+      background: blueviolet; }
     body div.carousel a {
+      color: blueviolet;
       display: flex;
       text-align: center;
-      justify-content: start;
+      justify-content: space-between;
       align-items: center;
       height: 100%;
       text-decoration: none; }
-    body div.carousel p, body div.carousel h3 {
-      margin: 0; }
+      body div.carousel a:hover {
+        color: #f2eb8c; }
+    body div.carousel div.promoted-tag, body div.carousel h3 {
+      margin: 0;
+      margin-right: 5px; }
     body div.carousel img {
-      height: 100%; }
+      margin: 10px;
+      height: calc(100% - 20px);
+      border: solid 1px black; }
   body div.none {
     display: none; }
   body div.complete-container {

public/css/styles.scss

@@ -42,22 +42,33 @@ body {
   div.carousel {
     position: fixed;
     top: 80%;
-    height: 20%;
-    width: 100%;
-    background: white;
+    height: calc(20% - 6px);
+    width: calc(100% - 6px);
+    background: $color_div;
+    &:hover {
+        background: $background_div;
+    }
+    border: solid 3px black;
     a {
+        color: $background_div;
         display: flex;
         text-align: center;
-        justify-content: start;
+        justify-content: space-between;
         align-items: center;
         height: 100%;
         text-decoration: none;
+        &:hover {
+            color: $color_div;
         }
-    p,h3 {
+    }
+    div.promoted-tag,h3 {
         margin: 0;
+        margin-right: 5px;
     }
     img {
-        height: 100%;
+        margin: 10px;
+        height: calc(100% - 20px);
+        border: solid 1px black;
     }
   }
 

public/js/bundle.js

@@ -16,7 +16,7 @@
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tablesort__WEBPACK_IMPORTED_MODULE_0__);\n\n\nwindow.Tablesort = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n__webpack_require__(/*! tablesort/src/sorts/tablesort.number */ \"./node_modules/tablesort/src/sorts/tablesort.number.js\");\n\nwindow.onload = () => {\n    const menu_expand = document.querySelector('a.menu-expand');\n    const mobile_foldable = document.querySelector('nav.mobile-foldable');\n    const tables = document.querySelectorAll('table')\n\n    loadAd()\n\n    if (menu_expand !== null && mobile_foldable !== null) {\n        menu_expand.addEventListener('click', () => {\n            mobile_foldable.classList.toggle('show');\n        });\n    }\n\n    for (const table of tables) {\n        const header = table.querySelector('tr');\n        if (header !== null) {\n            header.setAttribute('data-sort-method', 'none')\n            for (const th of header.querySelectorAll('th')) {\n                if (th.getAttribute('data-sort-method') == null) {\n                    th.setAttribute('data-sort-method', 'thead')\n                }\n            }\n        }\n        new (tablesort__WEBPACK_IMPORTED_MODULE_0___default())(table)\n    }\n};\n\nlet current_ad_number = null\n\nfunction loadAd() {\n    const params = new URLSearchParams();\n    if (current_ad_number !== null) {\n        params.append('n', \"\"+current_ad_number);\n    }\n    fetch('/next-ad.json?' + params).then((res) => {\n        return res.json()\n    }).then((res) => {\n        current_ad_number = res.current_ad_number\n        const ad = res.ad\n        const must_continue = res.continue\n        const carousel = document.querySelector('.carousel');\n        if (must_continue === 0) {\n            return;\n        }\n        carousel.innerHTML = \"\"\n        const a = document.createElement('a')\n        const image = document.createElement('img')\n        const text_container = document.createElement('div')\n        const text = document.createElement('h3')\n        const promoted = document.createElement('div')\n\n        promoted.classList.add('promoted-tag')\n        promoted.innerText = \"Promocionado\"\n        image.src = ad.img\n        text.innerText = ad.text\n        a.href = ad.href\n\n        a.append(image)\n        text_container.append(promoted)\n        text_container.append(text)\n        a.append(text_container)\n        carousel.append(a);\n\n        window.setTimeout(() => {\n            loadAd()\n        }, ad.seconds * 1000)\n    })\n}\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tablesort__WEBPACK_IMPORTED_MODULE_0__);\n\n\nwindow.Tablesort = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n__webpack_require__(/*! tablesort/src/sorts/tablesort.number */ \"./node_modules/tablesort/src/sorts/tablesort.number.js\");\n\nwindow.onload = () => {\n    const menu_expand = document.querySelector('a.menu-expand');\n    const mobile_foldable = document.querySelector('nav.mobile-foldable');\n    const tables = document.querySelectorAll('table')\n\n    loadAd()\n\n    if (menu_expand !== null && mobile_foldable !== null) {\n        menu_expand.addEventListener('click', () => {\n            mobile_foldable.classList.toggle('show');\n        });\n    }\n\n    for (const table of tables) {\n        const header = table.querySelector('tr');\n        if (header !== null) {\n            header.setAttribute('data-sort-method', 'none')\n            for (const th of header.querySelectorAll('th')) {\n                if (th.getAttribute('data-sort-method') == null) {\n                    th.setAttribute('data-sort-method', 'thead')\n                }\n            }\n        }\n        new (tablesort__WEBPACK_IMPORTED_MODULE_0___default())(table)\n    }\n};\n\nlet current_ad_number = null\n\nfunction loadAd() {\n    const params = new URLSearchParams();\n    if (current_ad_number !== null) {\n        params.append('n', \"\"+current_ad_number);\n    }\n    fetch('/next-ad.json?' + params).then((res) => {\n        return res.json()\n    }).then((res) => {\n        current_ad_number = res.current_ad_number\n        const ad = res.ad\n        const must_continue = res.continue\n        const carousel = document.querySelector('.carousel');\n        if (must_continue === 0) {\n            return;\n        }\n        carousel.innerHTML = \"\"\n        const a = document.createElement('a')\n        const image = document.createElement('img')\n        const text_container = document.createElement('div')\n        const text = document.createElement('h4')\n        const promoted = document.createElement('p')\n\n        promoted.classList.add('promoted-tag')\n        promoted.innerText = \"Promocionado\"\n        image.src = ad.img\n        text.innerText = ad.text\n        a.href = ad.href\n\n        a.append(image)\n        text_container.append(promoted)\n        text_container.append(text)\n        a.append(text_container)\n        carousel.append(a);\n\n        window.setTimeout(() => {\n            loadAd()\n        }, ad.seconds * 1000)\n    })\n}\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/index.js?");
 
 /***/ }),