// ==UserScript==
// @name         twitch2
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      *://*.twitch.tv/*
// @include      *://twitch.tv/*
// @grant        unsafeWindow
// ==/UserScript==

(function(wnd) {
    'use strict';

    wnd.initReticle = function(){
        let hdr = document.querySelector("[data-target=channel-header-left]");
        if(hdr)
        {
            hdr.insertAdjacentHTML('beforeend','<a class="channel-header__item tw-align-items-center tw-flex-shrink-0 tw-interactive tw-link tw-link--hover-underline-none" href="#" onclick="ondomload(); return false;">crX</a>');
        }
        wnd.drawReticle(4,2,20, 'red');
    };



    wnd.document.addEventListener("DOMContentLoaded", function(event) {
        setTimeout(() => {
            wnd.initReticle();
        }, 10000);
    });


    wnd.drawReticle = function(space,lineWid, wid, color){
        let twPlayerClass = [
            ".video-player",
            ".video-player__default-player",
            ".persistent-player",
            ".player-root" ,
            ".highwind-video-player__overlay"
        ];
        let w = Math.round(wid*0.5);
        let h = w;
        twPlayerClass.forEach( c => {
            let o = document.querySelector(c);
            if(o)
            {
                let canvas = document.getElementById('crosshair');
                if(!canvas)
                {
                    o.insertAdjacentHTML('afterbegin','<canvas id="crosshair" style="padding: 0 0 0 0;z-index:1000000; position:absolute; top: calc(50% - ' + w+'px);  left: calc(50% - ' +w+'px);"></canvas>');
                    canvas = document.getElementById('crosshair');
                    canvas.height=wid;
                    canvas.width =wid;

                    const ctx = canvas.getContext('2d');
                    if(ctx)
                    {
                        ctx.lineWidth = lineWid;
                        ctx.strokeStyle = color;
                        ctx.moveTo(0, h);
                        ctx.lineTo(w - space, h);
                        ctx.moveTo(w + space, h);
                        ctx.lineTo(canvas.clientWidth, h);
                        ctx.moveTo(w, 0);
                        ctx.lineTo(w, h - space);
                        ctx.moveTo(w, h + space);
                        ctx.lineTo(w, canvas.clientHeight);
                        ctx.closePath();
                        ctx.stroke();
                    }
                    console.log('reticle', o, canvas);
                }
            }
        });
    }



})(unsafeWindow );