Forum Settings
Forums
New
Dec 20, 2021 10:16 AM
#1

Offline
Dec 2018
72
Feature List:

  • Decimal scores
  • Forwards and backwards sortable while on All Anime, Currently Watching, or Completed (and no other filters selected).
  • Sorting within each decimal value (so you can specify the exact order of the entire list)
  • Correction to the number column
  • Store decimals in the MAL entry itself
  • Sort (roughly) without the generated CSS
  • Tool to automate setting decimal values (WIP)

Technical Details:

Storing decimals in a MAL entry
I didn't want this tool to rely on any other services (such as AniList) to store the decimal values. Decimal values are completely stored within a MAL entry, and the CSS generator is only used as a means of displaying them on a list. The decimal is encoded into the Rewatch Value and the Priority fields of a MAL entry with the following format:


Relative sorting within a decimal is stored in the comments. The format is:


Generating the CSS

The generator begins by loading a user's list. It then reads the decimal scores and ordering comments. Then, it processes the data to form CSS that will enable the list to be sorted forwards or backwards while on All Anime, Currently Watching, or Completed (and no other filters selected). I plan on releasing the code for this on GitHub or something after I do some refactoring.

Displaying it on the list itself

The CSS uses the order property of flex or grid items. This means that the table that contains all of the entries must be set to display flex or grid. The scores are set as :before pseudo-elements of the tags td. The numbers are set as :before pseudo-elements of the numbers td. That's all there is to it.

Usage:

NOTE: THIS IS SUBJECT TO CHANGE. I don't plan on changing the core mechanism, but I might be changing the URL.
https://maldecimal-css.squashbucklr.com/AniDecimal?malusername=Squashbucklr&pointzero=true

malusername is a required parameter. It indicates what list the generator should read the entries of to determine sorting and scores.
pointzero is an optional parameter. It indicates whether whole numbers should have a ".0" appended to them.
More parameters are planned! Suggestions are welcome!
SquashbucklrJan 31, 2023 1:01 PM
Reply Disabled for Non-Club Members
Dec 21, 2021 10:49 PM
#2

Offline
Jul 2020
1179
Include a BBCode strikethrough section at the beginning of the comments section. Inside it is a number, which is the order the element will be sorted within its decimal. Lower numbers mean higher.

Does this mean if I put 1 at the start of my comments it will be .9 and 10 will be .0??

also, where's the CSS ??

StoryGraph x Spotify x Instagram
“Whether we die or not isn't really that big a deal." — Suzuya Juuzou
Dec 22, 2021 5:36 AM
#3

Offline
Dec 2018
72
Legends_of_anime said:

Does this mean if I put 1 at the start of my comments it will be .9 and 10 will be .0??


No, the comment is for sorting within a decimal. For example, an entry with a score of 8, rewatch value of high, priority of medium, and a comment with 3 will be interpreted as the 3rd (actually 4th) 8.7 on the list.

Legends_of_anime said:

also, where's the CSS ??


Still a bit of polish I need to do, join the club and I'll post something when it's ready.
Dec 22, 2021 5:30 PM
#4

Offline
Jul 2020
1179
Squashbucklr said:
No, the comment is for sorting within a decimal. For example, an entry with a score of 8, rewatch value of high, priority of medium, and a comment with 3 will be interpreted as the 3rd (actually 4th) 8.7 on the list.

so if I don't use the comments it will be sorted by the title and the score. But if I use the comments then I can sort it in a specific order within the decimals. hope I got it correct....

Still a bit of polish I need to do, join the club and I'll post something when it's ready.

Take your time. I always wanted this function and MAL directly said that they will probably never implement it so as long as it works I can wait. (I already joined the club btw)


StoryGraph x Spotify x Instagram
“Whether we die or not isn't really that big a deal." — Suzuya Juuzou
Dec 22, 2021 7:23 PM
#5

Offline
Dec 2018
72
Legends_of_anime said:

so if I don't use the comments it will be sorted by the title and the score. But if I use the comments then I can sort it in a specific order within the decimals. hope I got it correct....


Exactly.
Dec 30, 2021 11:57 PM
#6

Offline
Jul 2020
1179
@Squashbucklr can you give an idea or how much time it may take for the CSS to be complete? (cuz I need the css to correctly sort all the decimals right?)

I just wanna have an idea of how much time it may take. Cuz I'm watching a lot of anime and it will get harder and harder to use give decimal scores to my completed anime as more time goes on.

StoryGraph x Spotify x Instagram
“Whether we die or not isn't really that big a deal." — Suzuya Juuzou
Dec 31, 2021 12:46 PM
#7

Offline
Dec 2018
72
Legends_of_anime said:
@Squashbucklr can you give an idea or how much time it may take for the CSS to be complete? (cuz I need the css to correctly sort all the decimals right?)

I just wanna have an idea of how much time it may take. Cuz I'm watching a lot of anime and it will get harder and harder to use give decimal scores to my completed anime as more time goes on.


The CSS generator is done, it's just the tool that makes it easier to actually enter the decimals that isn't. If you want to use the CSS generator now, read the usage section of the first post. But you'll have to manually set the rewatch value and priority to set a decimal.

For the tool that sets the decimals for you, I have a working copy, but it isn't intuitive to use and I've accidentally wiped out my scores with it, so I don't really want to release that yet until I can improve it. I'm probably going to work on that in late January.
Jan 16, 2022 9:24 PM
#8

Offline
May 2010
1094
any plans on adding the MAL scores or synopsis prototypes you have or making something capable of things like
@\import "https://3dbmhuid8h.execute-api.us-east-1.amazonaws.com/auto/anime?template=/* [TITLE] *[DEL]/ .data.image a[href^="/anime/[ID]/"]:before{background-image:url([IMGURL]);} .chapter-[ID]:after {content: "MAL: [SCORE] RANK: [RANK] POPRANK: [POPRANK]";} #tags-[ID] ~ .retail:after {content: "SYNOPSIS\a \a [DESC]";}";

or maybe providing some info on how to create the API as I would like to not have to generate half a dozen CSS files every few weeks for my lists lol.
Jan 16, 2022 9:36 PM
#9

Offline
Dec 2018
72
ShaggyZE said:
any plans on adding the MAL scores or synopsis prototypes you have or making something capable of things like
@\import "https://3dbmhuid8h.execute-api.us-east-1.amazonaws.com/auto/anime?template=/* [TITLE] *[DEL]/ .data.image a[href^="/anime/[ID]/"]:before{background-image:url([IMGURL]);} .chapter-[ID]:after {content: "MAL: [SCORE] RANK: [RANK] POPRANK: [POPRANK]";} #tags-[ID] ~ .retail:after {content: "SYNOPSIS\a \a [DESC]";}";

or maybe providing some info on how to create the API as I would like to not have to generate half a dozen CSS files every few weeks for my lists lol.


That template idea is really cool and definitely something I will look into. I like the idea of being able to choose exactly where information is located without having to pick from some sort of preset. First priority for me right now however is making the decimal tool more user friendly.

As for creating the API, It's basically just an AWS API Gateway hooked up to an AWS Lambda function that calls MAL's API directly. Calling MAL's API is a little gnarly tho, so my second priority after fixing the decimal tool is cleaning up the API code and making it open source so others can build off of it.
Jan 16, 2022 9:51 PM

Offline
May 2010
1094
yea, the template would allow for custom theme creators to use one url for all their themes to place various info wherever like
@\import "https://dl.dropboxusercontent.com/s/swy6yenrg3pbjj6/Mod%20Synopsis.css";
@\import "https://dl.dropboxusercontent.com/s/ta5rab8nycn6950/maltags.css";
adds anime synopsis to most themes with a bit of tweaking.

Squashbucklr said:

As for creating the API, It's basically just an AWS API Gateway hooked up to an AWS Lambda function that calls MAL's API directly. Calling MAL's API is a little gnarly tho, so my second priority after fixing the decimal tool is cleaning up the API code and making it open source so others can build off of it.
cool, looking forward to it, I played around a bit with AWS, but need to watch some youtube videos or something to learn about Lamba I guess.
ShaggyZEJan 16, 2022 10:14 PM
Oct 11, 2022 4:34 AM

Offline
Dec 2018
72
@Legends_of_anime @ShaggyZE

I know it's been a while. College has been absolutely killing me and my free time, but I finally have something that I can show you. I rewrote the entire website that I had made for myself with the goal of being more intuitive to use and easier for me to understand and debug from the code side.

The website is maldecimal.squashbucklr.com

In order for the decimals to appear, the Lambda function is required as an import. This hasn't changed.
https://3dbmhuid8h.execute-api.us-east-1.amazonaws.com/default/AniDecimal?malusername=Squashbucklr&pointzero=true

Loading that page will prompt you to authorize with the MAL API.

Once authorized, sorting your list is simple. You just drag entries around to where they belong. You can drag the score headers too to make things easier.

Settings and functions are at the top of the page.

"Use Notes" determines whether or not to use the notes field in an entry for sorting within a decimal. If this setting is turned on, the notes section is formatted as per my own standards (mentioned above in this thread). If you have notes that you care about, I don't recommend using this right now. There is a bug that causes apostrophes to be encoded. MAL's API docs aren't helpful so I've just been living with it. If you don't care about your notes then this setting works fine.

"Process" checks through how the entries are sorted currently and checks to see if any changes need to be applied to the list. Any entry that needs an update is marked in yellow. This operation is performed automatically by moving stuff around, and before saves.

"Save" does what you'd expect. The server calls the MAL API to make changes to any entry marked yellow. The score of each entry is modified based on its position. The rewatch value and priority are modified based on the decimal. The comments are only updated if the checkbox is selected.

"Reload List" pulls your list from MAL as it is, resetting any changes that have been made.

Please note that this is still a work in progress. I'm not ready to give this my full stamp of approval. I don't want to be responsible for anything regarding incompetent coding on my part. I have, however, been using this tool with zero issues (other than the apostrophe problem) for a month or two to test it.

I do plan to release the source code for both the Lambda and the server for the tool, but I don't want to do that until I clean the code up (especially the backend). For piece of mind, if you want to review my code for the part that actually calls the MAL API, I've included it in the spoiler below.





Reply Disabled for Non-Club Members
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login