// ==UserScript==
// @name         RateYourMusic Rating Bar
// @namespace    rym-rating-bar
// @version      0.1
// @description  Adds a simple visual rating bar on releases pages.
// @author       Kazaam
// @match        https://rateyourmusic.com/release/*
// @icon         https://www.google.com/s2/favicons?domain=rateyourmusic.com
// @grant        GM_addStyle
// @downloadURL none
// ==/UserScript==

/* eslint-env jquery */

(function () {
    'use strict';

    // ==================================================
    // OPTIONS
    // ==================================================

    // Do you want to enable the rating bar rounded corners? (true or false)
    const rounded_bar = true;

    // If you enabled the rouned_bar (above setting), how much you want to round the rating bar
    const border_radius = 10;

    // The rating bar width. Set 100% to get a full-width bar, or specify a fixed width in pixels (eg. 200px)
    const rating_bar_width = "100%";

    // The rating bar height, only in pixels (eg. 20)
    const rating_bar_height = "20"

    // ==================================================

    GM_addStyle(`
    .us-rym-rating-wrapper {
        width: ${rating_bar_width};
        background: rgb(249,65,68);
        background: linear-gradient(90deg, rgba(249,65,68,1) 0%, rgba(249,182,62,1) 35%, rgba(43,147,72,1) 70%, rgba(43,147,72,1) 98%, rgba(255,255,255,1) 99%);
        border-radius: ${rounded_bar ? border_radius : 0}px;
        text-align: right;
        font-size: 0;
    }

    .us-rym-rating-hidden {
        background-color: #fbfbfb;
        height: ${rating_bar_height}px;
        border:1px solid #dddddd;
        border-left-width: 0;
        display: inline-block;
        border-radius: 0 ${rounded_bar ? border_radius : 0}px ${rounded_bar ? border_radius : 0}px 0;
    }`);

    const avg_rating = parseFloat($('.avg_rating').html());
    const rating_percent = (avg_rating * 100) / 5;

    const rating_bar = `
    <div class="us-rym-rating-wrapper">
        <span class="us-rym-rating-hidden" style="width:${(100-rating_percent)}%;"></span>
    </div>`;

    $('tr th:contains("RYM Rating")').next('td').append(rating_bar);
    console.log('RateYourMusic Rating Bar loaded.');
})();