<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The page supports only a dark color schemes -->
    <meta name="color-scheme" content="dark">

    <title>Lucky Scuff Bot - Hosts</title>

    <link rel="icon" href="images/terminal.svg">

    <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.0.1/dist/css/bootstrap-night.min.css">

    <style>
        [v-cloak] {
            display: none;
        }

        [v-cloak]>* {
            display: none
        }

        [v-cloak]::before {
            content: ""
        }

        .gist {
            width: 1px !important;
            height: 0px !important;
        }

        .gist-meta {
            display: none;
        }

        .text-twitch {
            color: #9146ff !important;
        }

        .text-twitch-muted {
            color: #6441a5 !important;
        }

        .shadow-svg {
            -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
            filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
        }

        .card {
            cursor: pointer;
            -webkit-transition: all 0.3s 0s ease-in;
            transition: all 0.3s 0s ease-in;
            transition: all 0.3s ease;
        }

        .card .blockquote-footer {
            opacity: 0;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
        }

        .card .badge {
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
        }

        .card .badge a {
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
        }

        .card:hover {
            box-shadow: 0 40px 60px -20px rgba(158, 158, 158, 0.1);
            z-index: 100;
        }

        .card:hover .blockquote-footer {
            opacity: 1;
            transition: all 0.5s;
        }

        .img-hover-zoom {
            overflow: hidden;
        }

        .img-hover-zoom img {
            transition: transform .5s ease;
        }

        .img-hover-zoom:hover img {
            transform: scale(1.2);
        }

        .img-hover-zoom--brightness img {
            transition: transform 0.5s, filter 1s ease-in-out;
            transform-origin: center center;
            filter: brightness(50%);
        }

        .img-hover-zoom--brightness:hover img {
            filter: brightness(100%);
            transform: scale(1.2);
        }

        .card-img-overlay {
            padding: 0 0.5rem;
        }
    </style>
</head>

<body class="d-flex flex-column min-vh-100">
    <header>
        <div class="collapse bg-dark" id="navbarHeader">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-md-7 py-4 pb-0">
                        <h4 class="text-white">About</h4>
                        <p class="text-muted">
                            Introducing Lucky Scuff Bot!
                            <br />
                            <br />
                            For every raffle you enter and don't win, you will receive 1% Lucky Scuff Protection (LSP).
                            The more LSP you have, the higher chance you have of winning a raffle. Enter !LSP in the
                            chat to check how lucky you are. At the top of every hour there will be a giveaway for LSP,
                            make sure to type !join to enter.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="navbar navbar-dark bg-dark shadow-sm">
            <div class="container">
                <a href="/" class="navbar-brand d-flex align-items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="38" height="30" fill="currentColor" stroke-width="2"
                        class="bi bi-terminal me-2" viewBox="0 0 16 16">
                        <path
                            d="M6 9a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 6 9zM3.854 4.146a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2z" />
                        <path
                            d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm12 1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12z" />
                    </svg>
                    <strong>Lucky Scuff Bot</strong>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader"
                    aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </div>
    </header>
    <main id="main" class="wrapper flex-grow-1" v-cloak>
        <section class="py-5 pb-3 text-center container">
            <div class="col-lg-8 col-md-8 mx-auto">
                <h1 class="fw-light pb-2">Lucky Scuff Squad</h1>
                <p class="lead text-muted">Meet the people who are apart of the Lucky Scuff Squad!</p>
                <p class="lead text-muted">Check out their channels and view their raffle results!</p>
            </div>
        </section>
        <div class="py-auto" v-cloak>
            <div class="container">
                <div class="row text-center" v-if="loading">
                    <div class="text-center">
                        <div role="status" class="spinner-border text-light" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" v-else>
                    <div class="col-md-3" v-for="(host, index) in raffleHosts">
                        <div class="card bg-dark text-white img-hover-zoom img-hover-zoom--brightness"
                            @click="viewResults(`${host.resultsUrl}`)">
                            <img v-bind:src="`${host.imageUrl}`" class="card-img rounded-0" />
                            <div class="card-img-overlay">
                                <h2>
                                    <span class="badge p-0">
                                        <a href="#" class="link-light text-decoration-none"
                                            v-bind:href="`${host.twitchUrl}`" target="_blank">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="38" height="30"
                                                fill="currentColor" class="bi bi-twitch text-twitch shadow-svg"
                                                viewBox="0 0 16 16">
                                                <path
                                                    d="M3.857 0 1 2.857v10.286h3.429V16l2.857-2.857H9.57L14.714 8V0H3.857zm9.714 7.429-2.285 2.285H9l-2 2v-2H4.429V1.143h9.142v6.286z" />
                                                <path
                                                    d="M11.857 3.143h-1.143V6.57h1.143V3.143zm-3.143 0H7.571V6.57h1.143V3.143z" />
                                            </svg>
                                        </a>
                                        {{ host.name }}
                                    </span>
                                </h2>
                                <footer class="blockquote-footer position-absolute bottom-0 start-0 text-white m-2">
                                    <strong>
                                        {{ host.about }}
                                    </strong>
                                </footer>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer class="text-center text-light">
        <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
            © 2022 <a href="https://luckyscuffbot.github.io/">Lucky Scuff Bot</a>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-timeago@5.1.3/dist/vue-timeago.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
        crossorigin="anonymous"></script>
    <script src="https://gist.github.com/zhr0git/4f81112c344efe84380d2d9f1f7b1c4c.js"></script>
    <script>
        $(() => {
            $("body").tooltip({ selector: '[data-bs-toggle=tooltip]' });

            // Index mixin
            let indexMixin = {
                data: function () {
                    return {
                        ENV: Object.freeze({
                            "UNKNOWN": 0,
                            "DEV": 1,
                            "PROD": 2
                        }),
                        currEnv: 0,
                        raffleHosts: [],
                        raffleHostsDataUrl: "aHR0cHM6Ly9hcGkuZ2l0aHViLmNvbS9naXN0cy80ZjgxMTEyYzM0NGVmZTg0MzgwZDJkOWYxZjdiMWM0Yw==",
                        loading: true
                    }
                },
                mounted: function () {
                    var self = this;

                    this.determineEnv();

                    // Get embedded raffle results
                    var data = this.fetchData(this.raffleHost);
                    if (data == null) {
                        this.loading = false;
                        return;
                    }

                    let twitchUrlRoot = "https://twitch.tv/";
                    let twitchImageCDNRoot = "https://static-cdn.jtvnw.net/jtv_user_pictures/";

                    this.raffleHosts = data["raffleHosts"].map((h, idx) => {
                        let host = {
                            name: h.name,
                            about: h.about,
                            resultsUrl: `${h.name}${this.currEnv == this.ENV.DEV ? '.html' : ''}`,
                            twitchUrl: `${twitchUrlRoot}${h.twitch_id}`,
                            imageUrl: `${twitchImageCDNRoot}${h.image_id}`
                        };
                        return host;
                    });

                    // Cleanup
                    this.cleanup();

                    // Done loading
                    setTimeout(() => { self.loading = false; }, 150);
                },
                methods: {
                    determineEnv: function () {
                        switch (window.location.protocol) {
                            case "http:":
                            case "https:":
                                this.currEnv = this.ENV.PROD;
                                break;
                            case "file:":
                            default:
                                this.currEnv = this.ENV.DEV;
                                break;
                        }
                    },
                    viewResults: function (resultsUrl) {
                        if (resultsUrl) {
                            window.location.href = resultsUrl;
                        }
                    },
                    fetchData: function (hostName) {
                        let embeddedKey = `table[data-tagsearch-path='manifest.squad.json']`;
                        let embeddedData = $(embeddedKey).find("td:contains('raffleHosts')");

                        if (!embeddedData.length) {
                            return null;
                        }

                        let data = null;
                        try {
                            data = JSON.parse(embeddedData.text());
                        } catch (ex) {
                            // Ignore
                        }

                        return data;
                    },
                    cleanup: function () {
                        // Cleanup embedded data
                        $(".gist").remove();
                        $("link[rel=stylesheet][href*='githubassets.com']").remove();
                        $("script[src*='github.com']").remove();
                    }
                }
            };

            var app = new Vue({
                el: "#main",
                mixins: [indexMixin]
            });
        });
    </script>
</body>

</html>