Rhythm Plus Export/Import maps

export/import

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         Rhythm Plus Export/Import maps
// @namespace    http://tampermonkey.net/
// @version      2024-07-14
// @description  export/import
// @author       qtpq
// @match        https://rhythm-plus.com/editor/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=rhythm-plus.com
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const id = window.location.href.split("/")[4]
    const postUrl = 'https://api.rhythm-plus.com/api/v1/sheet/update?sheetId=' + id
    const getUrl = 'https://api.rhythm-plus.com/api/v1/sheet/get?sheetId=' + id

    let mapDataImport = {
        "id": id,
        "mapping": null,
        "visibility":"private",
        "length":0,
        "noteCount":0
    }


    let mapDataImportBool = false

    let mapDataExport

    const originalFetch = window.fetch

    //create custom fetch
    window.fetch = function(url, options) {
        console.log("a")
        console.log(url, options)
        if (url === postUrl && options.method === "post" && mapDataImportBool) {
            const Header = new Headers(options.headers)
            return fetch(url, {
                method: "POST",
                headers: Header,
                body: JSON.stringify(mapDataImport)
            })

        }
        else if (url === getUrl && options.method === "get") {
            originalFetch(url, options).then(response => {
                return response.json().then(json => {
                    mapDataExport = json
                    return json
                })
            })
        }

        return originalFetch(url, options)
    }
 function waitToolbar(callback) {
        var element = document.getElementsByClassName("toolbar")[0]
        if (element) {
            callback(element)
        }
        else {
            setTimeout(function() {
                waitToolbar(callback)
            }, 500)
        }
    }

    waitToolbar(function(toolbar) {
        let exportDiv = document.createElement("div")
        exportDiv.textContent = "Export"
        exportDiv.className = "exportDiv"

        let importDiv = document.createElement("div")
        importDiv.textContent = "Import"
        importDiv.className = "importDiv"


        let styles = window.getComputedStyle(toolbar.children[2])
        for (let prop of styles) {
            importDiv.style.setProperty(prop, styles.getPropertyValue(prop))
            exportDiv.style.setProperty(prop, styles.getPropertyValue(prop))
        }

        toolbar.appendChild(importDiv)
        toolbar.appendChild(exportDiv)

        exportDiv.addEventListener('click', function() {

            let file = new Blob([mapDataExport.mapping], {type: "text/plain"})
            let a = document.createElement("a"), url = URL.createObjectURL(file)
            a.href = url
            a.download = "map.ryp"
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
            window.URL.revokeObjectURL(url)
        })


        importDiv.addEventListener("click", function() {
            let fileInput = document.createElement("input")
            fileInput.type = "file"
            fileInput.accept = ".ryp"

            fileInput.onchange = function(event) {
                var file = event.target.files[0]
                if (file) {
                    let fileContent = new FileReader()
                    fileContent.onload = function(fileContent) {
                        mapDataImport.mapping = fileContent.target.result
                        mapDataImportBool = true
                        document.body.removeChild(fileInput)
                        alert("Loaded map! Press save and refresh the page to view.")
                    }
                    fileContent.readAsText(file)
                }
            }
            document.body.appendChild(fileInput)
            fileInput.click()

        })
    })

})();