NickHatBoecker/twitch_show_game_name.html

## twitch_show_game_name.html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8" />
    <title></title>

    <style>
    @import url(https://db.onlinewebfonts.com/c/9882baf89f6a50439487112cbd8a91dd?family=UA+Cadet);

    * { margin: 0; padding: 0; }
    body {
        background: #000;
        font-family: 'UA Cadet', 'sans-serif';
        color: #fff;
        font-size: 49px;
    }
    .hidden { display: none; }
    </style>
</head>
<body>
    <p id="text">OFFLINE</p>
    <p class="hidden">2019 &copy; <a href="https://nick-hat-boecker.de">NickHatBoecker</a></p>

    <script>
        const username = 'LaraLoft';
        const updateInterval = 5000; // every 5 sec
        const clientId = '{{ clientId }}'; // Get yours at https://dev.twitch.tv/console/apps

        /**
         * ##############################
         * ### That's it! Stop editing!
         * ##############################
         */

        const api = 'helix'; // new twitch api

        // Initial check
        getGameTitle();

        // Check for updates every interval
        setInterval(getGameTitle, updateInterval);

        /**
         * Init
         */
        async function getGameTitle () {
            try {
                /**
                 * Get game id of current playing game
                 */
                let data = await sendRequest(getUserUrl());
                const gameId = data.game_id;

                if (typeof gameId === 'undefined' || !gameId) {
                    return;
                }

                /**
                 * Get game name of identified game id
                 */
                data = await sendRequest(getGameUrl(gameId));
                render(data.name);
            } catch (e) {
                console.log(e);
            }
        }

        /**
         * Send GET request
         *
         * @param string url
         *
         * @return object
         */
        async function sendRequest (url) {
            const headers = new Headers({
              'Client-ID': clientId,
            });

            const response = await fetch(url, { headers: headers });
            const json = await response.json();
            const data = JSON.parse(JSON.stringify(json)).data[0];

            if (typeof data === 'undefined') {
                return {};
            }

            return data;
        }

        /**
         * @return string
         */
        function getUserUrl () {
            return getBaseUrl()+'/streams/?user_login='+username+'&client_id='+clientId;
        }

        /**
         * @return string
         */
        function getGameUrl (gameId) {
            return getBaseUrl()+'/games/?id='+gameId+'&client_id='+clientId;
        }

        /**
         * @return string
         */
        function getBaseUrl () {
            return 'https://api.twitch.tv/'+api;
        }

        /**
         * Update view
         *
         * @return void
         */
        function render (text) {
            document.getElementById('text').innerHTML = text
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8" />
	<title></title>

	<style>
	@import url(https://db.onlinewebfonts.com/c/9882baf89f6a50439487112cbd8a91dd?family=UA+Cadet);

	* { margin: 0; padding: 0; }
	body {
	background: #000;
	font-family: 'UA Cadet', 'sans-serif';
	color: #fff;
	font-size: 49px;
	}
	.hidden { display: none; }
	</style>
	</head>
	<body>
	<p id="text">OFFLINE</p>
	<p class="hidden">2019 © <a href="https://nick-hat-boecker.de">NickHatBoecker</a></p>

	<script>
	const username = 'LaraLoft';
	const updateInterval = 5000; // every 5 sec
	const clientId = '{{ clientId }}'; // Get yours at https://dev.twitch.tv/console/apps

	/**
	* ##############################
	* ### That's it! Stop editing!
	* ##############################
	*/

	const api = 'helix'; // new twitch api

	// Initial check
	getGameTitle();

	// Check for updates every interval
	setInterval(getGameTitle, updateInterval);

	/**
	* Init
	*/
	async function getGameTitle () {
	try {
	/**
	* Get game id of current playing game
	*/
	let data = await sendRequest(getUserUrl());
	const gameId = data.game_id;

	if (typeof gameId === 'undefined' \|\| !gameId) {
	return;
	}

	/**
	* Get game name of identified game id
	*/
	data = await sendRequest(getGameUrl(gameId));
	render(data.name);
	} catch (e) {
	console.log(e);
	}
	}

	/**
	* Send GET request
	*
	* @param string url
	*
	* @return object
	*/
	async function sendRequest (url) {
	const headers = new Headers({
	'Client-ID': clientId,
	});

	const response = await fetch(url, { headers: headers });
	const json = await response.json();
	const data = JSON.parse(JSON.stringify(json)).data[0];

	if (typeof data === 'undefined') {
	return {};
	}

	return data;
	}

	/**
	* @return string
	*/
	function getUserUrl () {
	return getBaseUrl()+'/streams/?user_login='+username+'&client_id='+clientId;
	}

	/**
	* @return string
	*/
	function getGameUrl (gameId) {
	return getBaseUrl()+'/games/?id='+gameId+'&client_id='+clientId;
	}

	/**
	* @return string
	*/
	function getBaseUrl () {
	return 'https://api.twitch.tv/'+api;
	}

	/**
	* Update view
	*
	* @return void
	*/
	function render (text) {
	document.getElementById('text').innerHTML = text
	}
	</script>
	</body>
	</html>