T117_SV_Promotion_Games

<div class="mm-t117-wrap">
    <h6 class="mm-t117-header">Recently played</h6>
    <div class="mm-t117-content category-list soft--bottom"
         data-rosin-component="rosin/TylerGroup"
         data-tyler-category-list>
    </div>
</div>
<script>
    ;
    (function (campaign) {
        campaign.renderVariant = renderVariant;

        mmcore.mediator.on('www-sv-dispatch-event-after', function (data) {
            if (data.args[0] !== 'UPDATE_RECENT_GAMES') {
                return;
            }

            newRecentGameHandler(data)
        });

        function renderVariant(evt) {
            var isLoggedIn;

            var games = getPromoGames(evt);

            if (games) {
                return campaign.allGames.receive(games).then(function () {
                    renderGames(evt, games, 'Featured');
                });
            }

            games = getRecentGames();

            try {
                isLoggedIn = window.SkyBetAccount.lastLoginState.name === 'loggedIn'
            } catch (e) {
            }

            if (isLoggedIn && games.length) {
                return campaign.allGames.receive(games).then(function () {
                    renderGames(evt, games, 'Recently played');
                });
            }

            return campaign.featuredGames.getList().then(function (games) {
                return campaign.allGames.receive(games);
            }).then(function (games) {
                renderGames(evt, games, 'Featured games');
            });
        }

        function renderGames(evt, games, header) {
            var elemInsetTo;
            var tempWrap = document.createElement('div');
            var injectWrap = document.createElement('div');
            var gamesScrpt = convGamesToTag(games);

            injectWrap.innerHTML = mm_inner_HTML;
            injectWrap = injectWrap.querySelector('.mm-t117-wrap');

            injectWrap.querySelector('.mm-t117-header').innerHTML = header;
            injectWrap.querySelector('.mm-t117-content').appendChild(gamesScrpt);

            /**
             * Different handling of sibgle page routing and hard load of the page
             */
            if (evt && evt.data && evt.data.content) {
                tempWrap.innerHTML = evt.data.content;
            } else {
                tempWrap = document;
            }

            try {
                elemInsetTo = tempWrap
                        .querySelector('.main-body')
                        .querySelector('[data-rosin-component="rosin/MyAccountLink"][data-track-id="FAQ"]')
                        .parentNode;
            } catch (e) {
            }

            if (!elemInsetTo) {
                mmcore.EH('T117 error - node to insert content absent');
                return;
            }

            var oldWrap = tempWrap.querySelector('.mm-t117-wrap');
            var oldCont = oldWrap && oldWrap.querySelector('.mm-t117-content');

            if (oldCont) {
                oldCont.innerHTML = injectWrap.querySelector('.mm-t117-content').innerHTML;
            } else {
                prependEl(injectWrap, elemInsetTo);
            }

            if (games.length < 3) {
                (oldWrap || injectWrap).classList.add('mm-t117-half-height')
            }

            if (evt && evt.data && evt.data.content) {
                evt.data.content = tempWrap.innerHTML;
            } else {
                window.rosin.update(oldWrap || injectWrap);
            }

            oldCont && oldCont.classList.remove('mm-t117-content__hidden');
        }

        function getPromoGames(evt) {
            var url;

            try {
                url = evt.data.path;
            } catch (e) {
            }

            if (!url) {
                url = location.pathname;
            }

            if (url.indexOf('/promotions/rainbow-riches-freespin-drop') === 0) {
                return ["/games/rainbow-riches-pick-n-mix-html"];
            } else {
                return null;
            }

        }

        function getRecentGames() {
            try {
                return mmcore.SkyVegasDeskApi.dispCtx.getStore('RecentGamesStore').recentGames.slice(0, 4);
            } catch (e) {
                return [];
            }
        }

        function convGamesToTag(games) {
            var gameCats = [];

            for (var i = 0; i < 2; i++) {
                if (games.length < 3 && i === 1) {
                    break;
                }

                gameCats[i] = {
                    "title": "Row " + (i + 1),
                    "seeAllLink": null,
                    "description": null,
                    "reflowOnWindowResize": true,
                    "tileGroup": {
                        "layout": "mm-t117-layout",
                        "tiles": []
                    }
                };
            }

            games.forEach(function (val, indx, arr) {
                var catInd = indx < 2 ? 0 : 1;

                gameCats[catInd].tileGroup.tiles.push({
                    type: 'game',
                    href: val
                });
            });

            var scrpt = document.createElement('scr' + 'ipt');
            scrpt.setAttribute('type', "application/json");

            scrpt.innerHTML = JSON.stringify({
                "categories": gameCats
            });

            return scrpt;
        }

        function prependEl(elem, parent) {
            parent.insertBefore(elem, parent.firstElementChild);
        }

        function newRecentGameHandler(evt) {
            if (!campaign.checkUrl(location.pathname)) {
                return;
            }

            var oldCont = document.querySelector('.mm-t117-content');

            var header = document.querySelector('.mm-t117-header');

            if ( header && header.innerHTML !== 'Recently played' ) {
                return;
            }

            if (oldCont) {
                oldCont.classList.add('mm-t117-content__hidden');
                oldCont.innerHTML = '';
            }

            setTimeout(function() {
                campaign.renderVariant({
                    dispatch: {
                        ctx: evt.ctx,
                        args: evt.args
                    }
                })
            }, 250);
        }
    })(this);
</script>
<style>
    .mm-t117-wrap {
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 1px dashed black;
    }

    .mm-t117-content {
        position: relative;
        width: 100%;
        padding-top: 100%;
        padding-bottom: 0px !important;
        transition: opacity .25s;
    }

    .mm-t117-half-height .mm-t117-content {
        padding-top: 50%;
    }

    .mm-t117-content > div {
        width: 100%;
        position: absolute;
        top: 0;
    }

    .mm-t117-content__hidden {
        opacity: 0;
    }

    .mm-t117-content .tile {
        width: 47.5% !important;
        height: 100% !important;
        top: auto !important;
        left: auto !important;
        right: 0;

        transform: initial !important;
        -webkit-transform: initial !important;
        -ms-transform: initial !important;
    }

    .mm-t117-content .tile:first-child {
        left: 0 !important;
    }

    .mm-t117-content .homepage-category {
        margin: 0px;
    }

    .mm-t117-content .homepage-category.homepage-category--row-1 {
        margin-bottom: 5%;
    }

    .mm-t117-content .tyler-group > div {
        width: auto !important;
    }

    .mm-t117-content .tyler-group__inner {
        padding-bottom: 47.5% !important;
        width: auto !important;
        height: auto !important;
    }

    .mm-t117-content .tile .tile__inner-mouseout,
    .mm-t117-content .tile .tile__inner-mouseover {
        width: 100%;
    }

    .mm-t117-content .tile__inner__footer__info:hover {
        color: white;
    }

    .mm-t117-content .tyler-group > div:first-child {
        display: none;
    }

    .mm-t117-content .mm-t117-wrap {
        margin-bottom: 50px;
    }

    @media only screen and (max-width: 749px) and (min-width: 470px) {
        .mm-t117-content .tile {
            /*zoom: 1.5;*/
        }
    }
</style>