e-typing chobun plus

ワードの表示・打ち切り回数保存、任意の文字間のリザルト・リプレイ再生
Wrap lines
// ==UserScript==
// @name         e-typing chobun plus
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  ワードの表示・打ち切り回数保存、任意の文字間のリザルト・リプレイ再生
// @author       tai
// @license MIT
// @match        https://www.e-typing.ne.jp/app*
// @exclude      https://www.e-typing.ne.jp/app/ad*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=e-typing.ne.jp
// @require      https://update.gf.qytechs.cn/scripts/530545/1558131/keyboardevent-chobun.js
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

$(document).one("loadComplete", (_, setting) => {
    let type = setting.querySelector("type").textContent;
    if (type === "4" || type === "255") {
        console.log("(`･▿･´ )ﾉ");

        let snsURL = setting.querySelector("snsURL").textContent;
        let title = setting.querySelector("title").textContent;
        let mode = snsURL.includes("english") ? "E" : snsURL.includes("kana") ? "K" : "R";
        new Chobun(title, mode);
    } else {
        console.log("_(- ᴗ -_)_ …zzz");
    }
})



class Chobun {
    constructor(title, mode){
        this.title = title;
        this.mode = mode;

        this.chobun = JSON.parse(GM_getValue("chobun", "{}"));
        this.words = this.chobun[this.title]?.[this.mode]?.words ?? {};
        this.focusWords = [];

        this.wordList = new WordList(this.title, this.mode, this.chobun, this.words, this.focusWords);

        this.insertStyle();

        $(document).on({
            "end_countdown.etyping": this.start,
            "replay": () => {
                Result.clear();
                Replay.clear();
                Typing.clear();
                $(document).on("end_countdown.etyping", this.start);
            }
        });

        window.addEventListener("beforeunload", this.close);
        parent.$pp_overlay && (parent.$pp_overlay.fadeOut = (a,c,d) => {this.close(); return parent.$pp_overlay.animate({opacity:"hide"},a,c,d)});
    }

    start = () => {
        let typingStartTime = performance.now();
        let time, char;
        Typing.data.push({ char: null, index: null, time: null }); //logで見やすく
        this.replayFlag = false;

        const handleKeydown = e => {
            time = e.timeStamp - typingStartTime;
            char = this.mode === "K" ? e.kana : this.mode === "R" ? e.char.toUpperCase() : e.char;
        };

        document.addEventListener("keydown", handleKeydown);

        let index = 0;
        $(document).on({
            ["correct.etyping error.etyping"]: e => {
                let charData = Typing.data.at(-1);

                if (e.type === "correct") {
                    charData.index = index;
                    charData.char = char;
                    charData.time = time;
                    index++;
                } else {
                    charData.index = index;
                    charData.char = char;
                    charData.time = time;
                    charData.isMiss = true;
                }

                Typing.data.push({ char: null, index: null, time: null });
            },
            ["complete.etyping interrupt.etyping"]: e => {
                let charData = Typing.data.at(-1);
                charData.index = index;
                charData.char = char;
                charData.time = time;
                charData.isInterrupt = charData.isInterrupt = e.type === "interrupt";

                document.removeEventListener("keydown", handleKeydown);

                console.log(Typing.data);
                setTimeout(() => this.end(e.type));
            }
        })

        setTimeout(() => {
            this.word = this.mode !== "E" ? document.getElementById("exampleText").textContent : document.getElementById("sentenceText").textContent.replace(/␣/g," ");

            this.words = this.wordList.add(this.word, "show");

            if (this.focusWords.length && !this.focusWords.includes(this.word)) {
                this.replayFlag = true;
                $(document).trigger("interrupt.etyping");
            }
        })
    }

    end(type){
        const resultObserver = new MutationObserver(() => {
            if (document.getElementsByClassName("result_data").length) {
                if (this.replayFlag) {
                    resultObserver.disconnect();
                    return $(document).trigger("replay");
                }

                if (type === "complete") {
                    this.wordList.add(this.word, type);
                }

                Result.init(this.mode);

                resultObserver.disconnect();
            }
        })

        resultObserver.observe(document.getElementById("result"), { childList: true });
    }

    insertStyle(){
        document.head.insertAdjacentHTML("afterbegin",`<style>
            #exampleList {
                width: 371px !important;
            }

            .entered {
                color: #ffd0a6;
            }

            .sentence {
                font-size: 20px;
                font-family: "Consolas", "Cascadia Mono", "Menlo", "DejaVu Sans Mono", monospace;
                line-break: anywhere;
            }

            .sentence span {
                cursor: pointer;
            }

            .sentence .hover {
                outline: 1px solid #000000;
            }

            .sentence .selected {
                background-color: rgba(5, 127, 255, 0.8);
                outline: 1px solid #0000ff;
            }

            .result_data.fixed {
                background-color: rgba(255, 255, 0, 0.5) !important;
            }
        </style>`);
    }

    close(){
        parent.document.getElementById("word_list").remove();
    }
}



class Result {
    static init(mode){
        this.mode = mode;

        this.sentence = document.getElementsByClassName("sentence")[0];
        !document.getElementById("latency") && this.plus(Typing.data);

        this.prev = document.getElementById("prev");
        this.savePrev = this.prev.innerHTML;

        this.sentence.title = "クリックでこの文字を固定（もう一度押して解除）\n\nショートカット:\n[s] リザルトを固定 (もう一度押して解除)\n[a] リプレイ再生\n[Escape] リプレイ停止、リザルト画面初期化";
        [...this.sentence.children].forEach(e => e.textContent = e.textContent === " " ? "_" : e.textContent);
        this.mode === "K" && (this.sentence.style.fontSize = "16px");

        Replay.init();

        this.fixed = false;
        this.selected = null;
        if (Typing.latestIndex()) {
            this.sentence.addEventListener("click", e => e.target.matches(".sentence span") && !this.fixed && this.#sentenceClick(e));
            this.sentence.addEventListener("mouseover", e => e.target.matches(".sentence span") && !this.fixed && this.#sentenceMouseOver(e));
            this.sentence.addEventListener("mouseleave", e => !this.fixed && this.#sentenceMouseLeave(e));

            document.addEventListener("keydown", this.#handleKeydown);
            parent.document.addEventListener("keydown", this.#handleKeydown);
        }
    }

    static plus(typingData){
        document.getElementById("app").style.height = "502px";
        document.querySelector("#result article").style.height = "452px";
        document.getElementById("current").style.height = "367px";
        document.getElementById("prev").style.height = "367px";
        document.getElementById("exampleList").style.height = "284px";
        document.querySelectorAll(".result_data").forEach(e => { e.children[0].children[7].remove(); e.style.height = "318px" });


        document.getElementsByClassName("result_data")[1].children[0].insertAdjacentHTML("beforeend", `<li id="previous_latency"><div class="data">${this.latency === undefined ? "-" : (this.latency / 1000).toFixed(3)}</div></li><li id="previous_rkpm"><div class="data">${this.rkpm === undefined ? "-" : this.rkpm.toFixed(2)}</div></li>`);

        this.latency = Typing.latency();
        this.rkpm = Typing.rkpm();
        document.getElementsByClassName("result_data")[0].children[0].insertAdjacentHTML("beforeend", `<li id="latency"><div class="title">Latency</div><div class="data">${(this.latency / 1000).toFixed(3)}</div></li><li id="rkpm"><div class="title">RKPM</div><div class="data">${this.rkpm.toFixed(2)}</div></li>`);


        this.sentence.innerHTML = this.sentence.textContent.split("").map((char, i) => {
            let charData = Typing.data.findLast(e => e.index === i);
            let isMiss = Typing.data.some(e => e.index === i && e.isMiss);

            return !charData || charData.isInterrupt ? `<span style="opacity: 0.6; display: inline;">${char}</span>` : isMiss ? `<span class="miss">${char}</span>` : `<span>${char}</span>`;
        }).join("");
    }

    static show(start, end, indexBreak = true){
        start = Math.max(0, start);
        end = indexBreak ? Math.min(Typing.latestIndex() - (Typing.data.at(-1).isInterrupt ? 1 : 0), end) : end;

        const data = Typing.result(start, end, indexBreak);

        document.querySelector("#prev h1").textContent = indexBreak ? `${start + 1}～${end + 1}まで` : `${data.typingCount}${data.missTypeCount ? " (" + data.missTypeCount + ")文字" : "文字"}`;
        let prevRsltElem = document.getElementsByClassName("result_data")[1].getElementsByClassName("data");
        prevRsltElem[0].textContent = data.score.toFixed(2);
        prevRsltElem[1].textContent = data.level;
        prevRsltElem[2].textContent = data.inputTime;
        prevRsltElem[3].textContent = data.typingCount;
        prevRsltElem[4].textContent = data.missTypeCount;
        prevRsltElem[5].textContent = data.wpm.toFixed(2);
        prevRsltElem[6].textContent = (data.correctRate / 100).toFixed(2) + "%";
        prevRsltElem[7].textContent = (data.latency / 1000).toFixed(3);
        prevRsltElem[8].textContent = data.rkpm.toFixed(2);
    }

    static #sentenceClick = e => {
        let sentences = [...e.target.parentNode.children];

        if (this.selected === null) {
            this.selected = Math.min(Typing.latestIndex() - (Typing.data.at(-1).isInterrupt ? 1 : 0), sentences.indexOf(e.target));
            this.show(this.selected, this.selected);
            sentences[this.selected].classList.add("selected");
        } else {
            this.selected = null;
            this.show(0, sentences.indexOf(e.target));
            document.getElementsByClassName("selected")[0]?.classList.remove("selected");
        }
    }

    static #sentenceMouseOver = e => {
        let sentences = [...e.target.parentNode.children];
        let targetIndex = sentences.indexOf(e.target);

        document.getElementsByClassName("hover")[0]?.classList.remove("hover");
        sentences[Math.min(Typing.latestIndex() - (Typing.data.at(-1).isInterrupt ? 1 : 0), targetIndex)].classList.add("hover");

        let [start, end] = [this.selected || 0, targetIndex].sort((a, b) => a - b);
        this.show(start, end);
    }

    static #sentenceMouseLeave = e => {
        if (e.relatedTarget?.className !== "time-tooltip" && e.relatedTarget?.parentElement.className !== "time-tooltip") {
            this.selected = null;
            document.getElementsByClassName("hover")[0]?.classList.remove("hover");
            document.getElementsByClassName("selected")[0]?.classList.remove("selected");

            this.prev.innerHTML = this.savePrev;
        }
    }

    static #handleKeydown = e => {
        switch (e.key) {
            case "s":
                this.fixed && this.selected && (this.selected = null, document.getElementsByClassName("selected")[0]?.classList.remove("selected"));
                this.fixed && document.getElementsByClassName("hover")[0]?.classList.remove("hover");


                this.fixed = !this.fixed;
                document.getElementsByClassName("result_data")[1].classList.toggle("fixed");
                break;
        }
    }

    static clear(){
        this.prev = null;
        this.savePrev = null;

        document.removeEventListener("keydown", this.#handleKeydown);
        parent.document.removeEventListener("keydown", this.#handleKeydown);
    }
}

class WordList {
    constructor(title, mode, chobun, words, focusWords){
        this.title = title;
        this.mode = mode;

        this.chobun = chobun;
        this.words = words;
        this.focusWords = focusWords;

        this.pDoc = parent.document;
        this.insert();
    }

    insert(){
        let top = parent.scrollY + 137.5;
        let left = this.pDoc.documentElement.clientWidth / 2 - 374;

        this.pDoc.body.insertAdjacentHTML("afterbegin",`
            <table id="word_list" style="top: ${top + 371 + 90}px; left: ${left + 10 + 57.5 + 608 * 3 / 4}px;">
                <tbody id="words"></tbody>
            </table>`);

        this.pDoc.head.insertAdjacentHTML("afterbegin",`
            <style>
                #word_list {
                    position: absolute;
                    z-index: 15000;
                    color: black;
                    padding: 5px;
                    background-color: rgba(5, 127, 255, 0.8);
                    outline: 1px solid #0000ff;
                    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
                    border-radius: 10px;
                    border-collapse: separate;
                    user-select: none;
                }

                #word_list:hover {
                    cursor: grab;
                }

                #word_list:active {
                    cursor: grabbing;
                }

                #words td {
                    color: black;
                    max-width: 300px;
                    height: 20px;
                    line-height: 2;
                    padding-left: 5px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .focus_word {
                    outline: 1px solid aqua;
                    background-color: rgba(127, 255, 212, 0.5);
                    border-radius: 10px;
                }

                .highlight::after {
                    content: "";
                    position: absolute;
                    animation: pathmove 3s ease-in-out infinite;
                    opacity: 0;
                    box-shadow: 0px -3px 1px 1px rgba(222, 222, 7, 0.9);
                }

                @keyframes pathmove {
                    0% { width: 0; left: 0; opacity: 0; }
                    10% { opacity: 1; }
                    30% { width: 200px; }
                    70% { left: 60%; opacity: 1; }
                    100% { width: 30px; left: 60%; opacity: 0; }
                }
            `);



        this.wordList = this.pDoc.getElementById("word_list");

        this.wordList.addEventListener("pointermove", function(e){
            if (e.buttons) {
                this.style.left = this.offsetLeft + e.movementX + "px";
                this.style.top = this.offsetTop + e.movementY + "px";
                this.setPointerCapture(e.pointerId);
            }
        });

        this.wordList.addEventListener("click", e => {
            if (e.target.matches("td") && [...e.target.classList].includes("word")) {
                let targetWord = e.target.textContent;
                if (!this.focusWords.includes(targetWord)) {
                    this.focusWords.push(targetWord);
                    e.target.classList.add("focus_word");
                } else {
                    this.focusWords.splice(this.focusWords.findIndex(word => word === targetWord), 1);
                    e.target.classList.remove("focus_word");
                }
            }
        })

        this.show(Object.keys(this.words));
    }

    add(word, type){
        this.words[word] = this.words[word] || { count: 0, compCount: 0 };
        this.words[word].count += type === "show" ? 1 : 0;
        this.words[word].compCount += type === "complete" ? 1 : 0;

        this.chobun[this.title] ??= {};
        this.chobun[this.title][this.mode] = { words: this.words };
        GM_setValue("chobun", JSON.stringify(this.chobun));

        this.show([word]);
    }

    show(addedWords){
        let innerHTML = Object.keys(this.words).sort((a, b) => this.words[b].count - this.words[a].count).reduce((accHTML, word) => {
            let count = this.words[word].count;
            let compCount = this.words[word].compCount;
            let compRate = (compCount / count * 100).toFixed(2);
            let isFocusWord = this.focusWords.includes(word);

            return accHTML + `<tr>
                <td title="${compRate}%">${compCount}/${count}</td>
                <td title="${word}" class="word${isFocusWord ? " focus_word" : ""}">${word}</td>
            </tr>`;
        }, "") || "<td>Let's typing!</td>";

        this.pDoc.getElementById("words").innerHTML = innerHTML;
        this.highlight(addedWords);
    }

    highlight(addedWords){
        addedWords.forEach(addedWord => {
            let target = this.wordList.querySelector(`[title="${addedWord}"]`);
            target.insertAdjacentHTML("beforeend", "<div class='highlight'></div>");
        })

        setTimeout(() => { [...this.wordList.getElementsByClassName("highlight")].forEach(e => e.remove()); }, 3000);
    }
}

class Replay {
    static scrollLine = 7;

    static init(){
        document.getElementById("btn_area").insertAdjacentHTML("beforeend",`<a id="miss_only_btn" class="btn">リプレイ</a>`);
        document.getElementById("miss_only_btn").addEventListener("click", () => Replay.load(...[Result.selected || 0, !document.getElementsByClassName("hover")[0] ? Typing.latestIndex() : [...document.getElementsByClassName("sentence")[0].children].indexOf(document.getElementsByClassName("hover")[0])].sort((a, b) => a - b), true));

        document.addEventListener("keydown", this.#handleKeydown);
        parent.document.addEventListener("keydown", this.#handleKeydown);
    }

    static load(start, end, play = true){
        this.data = Typing.dataSlice(start, end, true);

        this.sentence = document.getElementsByClassName("sentence")[0];
        this.sentences = document.querySelectorAll(".sentence span");

        this.charWidth = this.sentences[0].getBoundingClientRect().width;
        this.charHeight = this.sentences[0].getBoundingClientRect().height;
        this.lineLimit = Math.floor(this.sentence.getBoundingClientRect().width / this.charWidth);


        play && this.play(start, end);
    }

    static play(start, end){
        document.querySelector("#prev h1").textContent = "-";
        document.getElementsByClassName("result_data")[1].querySelectorAll(".data").forEach(e => e.textContent = "-");
        this.sentences.forEach((e, i) => (i < start || i > end) && (e.style = "opacity: 0.6; display: inline;"));
        this.sentences.forEach((_, i) => this.sentences[i].classList.remove("miss", "entered"));

        Result.fixed = true;
        document.getElementsByClassName("result_data")[1].classList.add("fixed");

        document.getElementById("exampleList").scrollTo({ top: this.sentences[start].offsetTop });

        this.stop = false;
        let startIndex = Typing.data.findIndex(e => e.index === start);
        let i = 0;
        let startTime = performance.now();
        this.tick(() => {
            if (!this.data?.[i] || !document.getElementsByClassName("sentence")[0]) {
                return false;
            }

            let currentTime = performance.now() - startTime;
            let charTime = this.data[i].time;

            if (currentTime >= charTime) {
                if (this.data[i].isInterrupt) {
                    return false;
                }

                let char = this.data[i].char;
                let isMiss = this.data[i].isMiss;
                let index = this.data[i].index;

                this.sentences[index].textContent = char;
                this.sentences[index].classList.add(isMiss ? "miss" : "entered");
                Result.show(startIndex, startIndex + i, false);
                i++;

                if (!isMiss && this.lineLimit * (this.scrollLine - Number(!!(start % this.lineLimit))) <= index - start && !(index % this.lineLimit)) {
                    document.getElementById("exampleList").scrollBy(0, this.charHeight);
                }
            }

            return true;
        })
    }

    static tick(callback) {
        if (this.currentTick) {
            cancelAnimationFrame(this.currentTick);
            console.log("stop");
        }

        const loop = () => {
            if (!callback() || this.stop) {
                console.log(this.stop ? "stop" : "end");
                this.data = null;
                this.currentTick = null;

                Typing.data.forEach(e => {
                    if (!e.isInterrupt) {
                        this.sentences[e.index].style = "";
                        e.isMiss && this.sentences[e.index].classList.add("miss");
                    }
                })
                return;
            }
            this.currentTick = requestAnimationFrame(loop);
        };

        this.currentTick = requestAnimationFrame(loop);
    }

    static #handleKeydown = e => {
        switch (e.key) {
            case "a":
                document.getElementById("miss_only_btn").click();
                break;
            case "Escape":
                this.stop = true;

                this.sentences && Typing.data.forEach(e => {
                    !e.isMiss && !e.isInterrupt && (this.sentences[e.index].textContent = e.char);
                    e.isMiss && this.sentences[e.index].classList.add("miss");
                    this.sentences[e.index].style = e.isInterrupt ? "opacity: 0.6; display: inline;" : "";
                    this.sentences[e.index].classList.remove("entered");
                })

                Result.selected && (Result.selected = null, document.getElementsByClassName("selected")[0]?.classList.remove("selected"));
                document.getElementsByClassName("hover")[0]?.classList.remove("hover");

                Result.fixed = false;
                document.getElementsByClassName("result_data")[1].classList.remove("fixed");
                setTimeout(() => Result.prev.innerHTML = Result.savePrev);
                break;
        }
    }

    static clear(){
        this.stop = false;
        this.data = null;
        this.sentence = null;
        this.sentences = null;

        document.removeEventListener("keydown", this.#handleKeydown);
        parent.document.removeEventListener("keydown", this.#handleKeydown);
    }
}



class Typing {
    static levelList = ["E-", "E", "E+", "D-", "D", "D+", "C-", "C", "C+", "B-", "B", "B+", "A-", "A", "A+", "S", "Good!", "Fast", "Thunder", "Ninja", "Comet", "Professor", "LaserBeam", "EddieVH", "Meijin", "Rocket", "Tatujin", "Jedi", "Godhand", "Joker", "Error"];
    static data = [];

    static score(data = this.data){
        const ms = this.data.at(-1).time;
        const typingCount = this.typingCount(data);
        const missTypeCount = this.missTypeCount(data);
        const correctRate = Math.floor(Math.max(10000 * (typingCount - missTypeCount) / typingCount, 0));
        return 60000 * (typingCount - missTypeCount) / ms * (correctRate / 10000) ** 2;
    }

    static level(score){
        return this.levelList[score < 22 ? 0 : score < 39 ? 1 : score < 56 ? 2 : score < 73 ? 3 : score < 90 ? 4 : score < 107 ? 5 : score < 124 ? 6 : score < 141 ? 7 : score < 158 ? 8 : score < 175 ? 9 : score < 192 ? 10 : score < 209 ? 11 : score < 226 ? 12 : score < 243 ? 13 : score < 260 ? 14 : score < 277 ? 15 : score < 300 ? 16 : score < 325 ? 17 : score < 350 ? 18 : score < 375 ? 19 : score < 400 ? 20 : score < 450 ? 21 : score < 500 ? 22 : score < 550 ? 23 : score < 600 ? 24 : score < 650 ? 25 : score < 700 ? 26 : score < 750 ? 27 : score < 800 ? 28 : score < 1100 ? 29 : 30];
    }

    static inputTime(data = this.data){
        const ms = data.at(-1).time;
        return (ms < 60000 ? "" : Math.floor(ms / 60000) + "分") + (ms / 1000 % 60).toFixed(2).replace(".","秒");
    }

    static typingCount(data = this.data){
        return data.filter(e => !e.isMiss && !e.isInterrupt).length;
    }

    static missTypeCount(data = this.data){
        return data.filter(e => e.isMiss && !e.isInterrupt).length;
    }

    static wpm(data = this.data){
        const ms = this.data.at(-1).time;
        const typingCount = this.typingCount(data);
        return Math.floor(typingCount * (6000000 / ms)) / 100;
    }

    static correctRate(data = this.data){
        const typingCount = this.typingCount(data);
        const missTypeCount = this.missTypeCount(data);
        return Math.floor(Math.max(10000 * (typingCount - missTypeCount) / typingCount, 0));
    }

    static latency(data = this.data){
        return data.find(e => !e.isMiss && !e.isInterrupt)?.time || NaN;
    }

    static rkpm(data = this.data){
        const ms = this.data.at(-1).time;
        const typingCount = this.typingCount(data);
        const latency = this.latency(data);
        return (typingCount - 1) / (ms - latency) * 60000 || 0;
    }

    static result(start = 0, end = this.data.length, indexBreak){
        const data = this.dataSlice(start, end, indexBreak);

        const latency = this.latency(data);
        const ms = data.at(-1).time;
        const inputTime = (ms < 60000 ? "" : Math.floor(ms / 60000) + "分") + (ms / 1000 % 60).toFixed(2).replace(".","秒");

        const typingCount = this.typingCount(data);
        const wpm = Math.floor(typingCount * (6000000 / ms)) / 100;

        const missTypeCount = this.missTypeCount(data);
        const correctRate = Math.floor(Math.max(10000 * (typingCount - missTypeCount) / typingCount, 0));
        const score = 60000 * (typingCount - missTypeCount) / ms * (correctRate / 10000) ** 2;
        const level = this.level(score);

        const rkpm = (typingCount - 1) / (ms - latency) * 60000 || 0;

        return {
            score: score,
            level: level,
            inputTime: inputTime,
            typingCount: typingCount,
            missTypeCount: missTypeCount,
            wpm: wpm,
            correctRate: correctRate,
            latency: latency,
            rkpm: rkpm
        }
    }

    static dataSlice(start, end, indexBreak){
        let data = indexBreak ? this.data.slice(this.data.findIndex(e => e.index === start), this.data.findLastIndex(e => e.index === Math.min(end, this.latestIndex())) + 1) : this.data.slice(start, end + 1);
        return start === 0 ? data : data.map(e => ({ ...e, time: e.time - this.data.findLast(e => e.index === (!indexBreak ? this.data[start].index : start) - 1).time }));
    }

    static latestIndex(){
        return this.data.at(-1).index;
    }

    static clear(){
        this.data = [];
    }
}
欢迎访问Greasy Fork镜像
