Pseudo Elements in CSS - javascript

I'm currently working on a game's character database. The character data and information about all the characters is written in JavaScript and the front end design is written in CSS. Each character has certain attributes (attack, hp, recovery, etc.). The one I'm focusing on is their Stars. Their stars refer to their rarity (1 star = extremely common; 6 stars = extremely rare). The game recently introduced a super evolution technique wherein a 6 star character can become a 6 star + (read as 6 star plus) character. This is where my problem is. I know that the JavaScript will work just fine and I know that my problem is in the CSS. Please look at the code below.
This is the JavaScript for one of the Characters:
[ "Whitebeard: Four Emperors", "STR", [ "Striker", "Powerhouse" ], "6_plus", 65, 4, 5, 99, 5000000, 3148, 996, 142, 3806, 1558, 347, 1 ],
And the CSS to go with it:
.stars-6_plus:before { color: #00bfff; content: '\2605\2605\2605\2605\2605\2605\002B'; }
Ideally, I would change the JavaScript to say 6+ instead of 6_plus and the CSS the same way, but I can't figure out how to do it. I'm not sure if there even is a way to do it the way that I'm hoping for. I was told that maybe I could make a conditional so that it says 6+ when it reads 6_plus but I'm not sure if that's possible. I would really appreciate some help.
Thanks in advance.
P.S. here's a link to the database if you'd like to check it out for yourself:
http://optc-db.github.io/characters/#/search/

This should work for your class example.
*[class~="stars-6+"]:before{color:#00bfff; content:'\2605\2605\2605\2605\2605\2605\002B'; }
and the html
<div class="stars-6+">
Hello
</div>
The javascript is straight forward and requires nothing special.
[ "Whitebeard: Four Emperors", "STR", [ "Striker", "Powerhouse" ], "6+", 65, 4, 5, 99, 5000000, 3148, 996, 142, 3806, 1558, 347, 1 ],

Related

How to look for patterns in numbers in javascript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last year.
Improve this question
Given any array of numbers, similar in nature to the following:
[48, 60, 64, 67, 72]
I want to be able to evaluate this(or any) series of numbers and look for musically meaningful patterns, and I'm not sure how to start going about it.
For example, if I subtract 48 from every number I would get this:
[0, 12, 16, 19, 24]
...one will notice that the 1st, 2nd and 5th numbers are 12 apart from each other, which is a meaningful pattern in music, as 12 steps is one octave. This is one of the things I would want to be able to figure out by just looking at the numbers.
Now, if I take the middle three numbers and subtract 12 from each one I get:
[0, 4, 7]
...which is the numerical pattern of steps on a keyboard that would create a Major Triad, which is another example of something I would want to be able to evaluate from a series of numbers.
So, in the end, the original series of numbers:
[48, 60, 64, 67, 72]
...represents the following musical notes:
[`C2`, `C3`, `E3`, `G3`, `C4`]
...which is a C Major Triad C3, E3, G3 with the root doubled down one octave C2 and doubled up one octave C4 as well.
What I want to do is write some code that takes in any series of midi message numbers, like the example above, evaluates them, then tells the user what musical entity they have played, including inversions, doublings, other possible interpretations, etc...
There would be a database/dictionary/object/array/data-thing of some type that contains many different patterns, then the code would compare the incoming numbers to this set of patterns to find the correct one(s)...
Not looking for code answers as much as an idea as to how to go about even getting started with such a thing in javascript, as this would be for the web...
I just don't really have any idea how to start going about this, but any thoughts or examples or resources that could point me in the right direction would be most appreciated.
Thanks! XD

JSON: Unknown Tags in a JSON file

Currently accessing a community public .json file, having worked only with HTML, Python, Dart & Flutter, I have little to no knowledge in other programming languages and I found some ambiguous tags and reference patterns (samples below).
{
"desc": "The holder gains #BonusAP# additional Spell Power.",
"effects": {
"AP": 30.0,
"{d49caf5d}": 50.0
},
"from": [
3,
3
],
"icon": "ASSETS/Maps/Particles/TFT/TFT_Item_RabadonsDeathcap.dds",
"id": 33,
"name": "Rabadon's Deathcap"
},
{
"desc": "Grants #CritChance#% Critical Strike Chance (including components). Each point of Critical Strike Chance above 100% becomes +#BonusCritDmgPerCritAbove100#% Critical Strike Damage.<br><br><tftitemrules>[Unique - Only One Per Champion]</tftitemrules>",
"effects": {
"AD": 15.0,
"CritChance": 75.0,
"{45c7ed6b}": 1.0
},
"from": [
1,
9
],
"icon": "ASSETS/Maps/Particles/TFT/TFT_Item_InfinityEdge.dds",
"id": 19,
"name": "Infinity Edge"
}
TLDR;:
#SomeString#
<tftitemrules>some string</tftitemrules>,
// under "effects":
{
...
"{45c7ed6b}": 1.0,
}
I would like to know, which language is exploiting this kind of tags/custom tags.
Is there any chance that "{45c7ed6b}" refers to something in the description? If so, please explain, I am clueless.
Is there any library in Dart that can make my work easier to exploit these tags?
1 - It could be written in any kind of language. But considering it's
"icon": "ASSETS/Maps/Particles/TFT/TFT_Item_InfinityEdge.dds",
part, it's directdraw surface file which is an openGL format and it can also be used by many languages but has many examples with C++ and C#.
DDS image format loader
Programming Guide for DDS
2 - It seems effects are property values of game code as described not directly in desc. And the "{45c7ed6b}" tag is refer to
Now converts every 1% excess critical strike chance into 1% bonus
critical strike damage
which is only known by knowing developer's intentions. Either they put names as temporary or new company policy for variable naming.
Infinity Edge - TFT item
3 - By exploiting, what do you intend to do? Visualize them in the Flutter app or??

Create "Karaoke" Type Functionality in DraftJS

I am attempting to implement a DraftJS editor that highlights words in a transcription while its recorded audio is playing (kind of like karaoke).
I receive the data in this format:
[
{
transcript: "This is the first block",
timestamps: [0, 1, 2.5, 3.2, 4.1, 5],
},
{
transcript: "This is the second block. Let's sync the audio with the words",
timestamps: [6, 7, 8.2, 9, 10, 11.3, 12, 13, 14, 15, 16, 17.2],
},
...
]
I then map this received data to ContentBlocks and initialize the editor's ContentState with them by using ContentState.createFromBlockArray(blocks)
It seems like the "DraftJS" way of storing the timestamp metadata would be to create an Entity for each word with its respective timestamp, and then scan through the currentContent as the audio plays and highlight entities up until the current elapsed time. But I am not sure if this is the right way to do this, as it doesn't seem performant for large transcriptions.
Note: the transcript needs to remain editable while maintaining this karaoke functionality
Any help or discussion is appreciated!
I ended up doing exactly what I described in the question: store timestamps in DraftJS entities. After a few more weeks with DraftJS it seems this is the correct way to do this.

JavaScript Structure (or array or list) for Storing 1000s of Labels / localization standardization

I have a scenario where there are many many programmers doing very rapid development and we are trying to get more consistency in our labels (words that actually display on the screen for customers). We are in a transition where over the next few years we will be putting a new front-end on to all of our pages. The new front end will be DHTMLX (a JavaScript framework). So now is the perfect time to nail down this new process for consistency.
We basically have 1000s of "key words" that are used many many times throughout 1000s of pages (its a very large product). There has always been slight variations in spelling (especially shorthand). So we would like to come up with a JavaScript structure to hold them all, and the programmer select the proper variable. Something like this...
<script>
/* This "w" structure stands for "word" and would hold all key words */
var w = {
/* This "l" structure stands for "long" and would hold all the long versions */
l: {
ai: "Action Item",
bom: "Bill of Materials",
cage: "CAGE",
assy: "Assembly"
},
/* This "s" structure stands for "short" and would hold all the short versions */
s: {
ai: "AI",
bom: "BOM",
cage: "CAGE",
assy: "Assy"
}
};
//How a programmer would use a label...
w.s.bom
</script>
I know some of you may say this shouldn't be handled in code but rather in the specs phase of development. And you are right. But put that aside for now.
My question is: Can anyone think of a cleaner way to handle this? I just gave just a 4 word example but there will end up being 1000s. I'm also tossing around the idea of two associative arrays (one for long, another for short).
If it were me, I would prefer putting all the variants of a term together, rather than splitting them into different size buckets. If this list was backed by a JSON file that somebody had to maintain, it would make life easier.
Something like this:
var w = {
ai: {
l: "Action Item",
s: "AI"
},
bom: {
l: "Bill of Materials",
s: "BOM"
},
};

FlotCharts two colored background

Using flot chart, I need to split the background into two colors. It is not going to be right down the middle, it will have a slight offset.
As of what I can see I can not find any documents on the internet that provide this information. If someone could point me in the right direction that would be great. Can someone put code in on how to do it if it is possible?
If I understand your question correctly, the easiest way is to use the grid markings option.
For example:
$.plot($("#placeholder"), [ d1 ], {grid: {
markings: [
{xaxis: { from: 0, to: 6 },color: "#C11B17"},
{xaxis: { from: 6, to: 100},color: "#FDD017"}
]}
});
Produces:
Fiddle here.

Categories