Narrow the width of the answered anime titles to make the watching status indicator readable.
Från och med
// ==UserScript==
// @name AMQ Readable Watching Status
// @namespace https://github.com/SlashNephy
// @version 0.1.1
// @author SlashNephy
// @description Narrow the width of the answered anime titles to make the watching status indicator readable.
// @description:ja 解答欄の幅を狭め、視聴状況のインジケーターを読みやすくします。
// @homepage https://scrapbox.io/slashnephy/AMQ_%E3%81%A7%E9%82%AA%E9%AD%94%E3%81%AA%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%92%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%99%E3%82%8B_UserScript
// @homepageURL https://scrapbox.io/slashnephy/AMQ_%E3%81%A7%E9%82%AA%E9%AD%94%E3%81%AA%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%92%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%99%E3%82%8B_UserScript
// @icon https://animemusicquiz.com/favicon-32x32.png
// @supportURL https://github.com/SlashNephy/.github/issues
// @match https://animemusicquiz.com/*
// @grant unsafeWindow
// @license MIT license
// ==/UserScript==
const isAmqReady = () => {
return unsafeWindow.setupDocumentDone === true
}
const createInstalledWindow = () => {
if (!isAmqReady()) return
if ($('#installedModal').length === 0) {
$('#gameContainer').append(
$(`
<div class="modal fade" id="installedModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h2 class="modal-title">Installed Userscripts</h2>
</div>
<div class="modal-body" style="overflow-y: auto;max-height: calc(100vh - 150px);">
<div id="installedContainer">
You have the following scripts installed (click on each of them to learn more)<br>
This window can also be opened by going to AMQ settings (the gear icon on bottom right) and clicking "Installed Userscripts"
<div id="installedListContainer"></div>
</div>
</div>
</div>
</div>
</div>
`)
)
$('#mainMenu')
.prepend(
$(`
<div class="button floatingContainer mainMenuButton" id="mpInstalled" data-toggle="modal" data-target="#installedModal">
<h1>Installed Userscripts</h1>
</div>
`)
)
.css('margin-top', '20vh')
$('#optionsContainer > ul').prepend(
$(`
<li class="clickAble" data-toggle="modal" data-target="#installedModal">Installed Userscripts</li>
`)
)
addStyle(`
.descriptionContainer {
width: 95%;
margin: auto;
}
.descriptionContainer img {
width: 80%;
margin: 10px 10%;
}
`)
}
}
const addScriptData = (metadata) => {
if (!isAmqReady()) return
createInstalledWindow()
$('#installedListContainer').append(
$('<div></div>')
.append(
$('<h4></h4>')
.html(
`<i class="fa fa-caret-right"></i> ${metadata.name !== undefined ? metadata.name : 'Unknown'} by ${
metadata.author !== undefined ? metadata.author : 'Unknown'
}`
)
.css('font-weight', 'bold')
.css('cursor', 'pointer')
.click(function () {
const selector = $(this).next()
if (selector.is(':visible')) {
selector.slideUp()
$(this).find('.fa-caret-down').addClass('fa-caret-right').removeClass('fa-caret-down')
} else {
selector.slideDown()
$(this).find('.fa-caret-right').addClass('fa-caret-down').removeClass('fa-caret-right')
}
})
)
.append(
$('<div></div>')
.addClass('descriptionContainer')
.html(metadata.description !== undefined ? metadata.description : 'No description provided')
.hide()
)
)
}
const addStyle = (css) => {
if (!isAmqReady()) return
const head = document.head
const style = document.createElement('style')
head.appendChild(style)
style.appendChild(document.createTextNode(css))
}
if (isAmqReady()) {
addStyle(`
.qpAvatarAnswerText {
width: calc(100% - 1em);
}
.qpAvatarStatusInnerContainer {
opacity: 1;
}
`)
addScriptData({
name: 'Readable Watching Status',
author: 'SlashNephy',
description: 'Narrow the width of the answered anime titles to make the watching status indicator readable.',
})
}