There is a couple of indicators that shows kill/death and dealt/received damage on this page. There is no client-side JavaScript function that would calculate the rotation angle for arrows on them, only the one that converts `transform: rotate();`

property to legacy IE's DXImage thing.

The initial position of both arrows (when ratio is 1) is 0°, the leftmost is -30° (ratio is 0), the rightmost is 30° (ratio is 2), but this is applicable to the first (kill/death) indicator.

The right one is complicated, as it may have variable lowest and highest values. I'm probably wrong on that, here are more examples — one, two, three.

I have attempted calculating the rotation angle for the left indicator using the formulas from this React application, but it uses 180° scale while I have 60° with start point not being at leftmost position.

Providing code-way solution of the problem is not essential, I'm looking for math-way solution which I'll adapt to language I use on my backend, but if you wish so, I'll accept answers in PHP, JS or Python 3.x syntax.

My Answer:

To calculate the rotation angle from a proportion of two values, you can use the following formula:

angle = (ratio - 1) * 30

This formula assumes that the initial position (when ratio is 1) is 0°, the leftmost position (when ratio is 0) is -30°, and the rightmost position (when ratio is 2) is 30°.

For example, if the ratio is 1.5, the calculation would be:

angle = (1.5 - 1) * 30

angle = 0.5 * 30

angle = 15

So, for a ratio of 1.5, the rotation angle would be 15°.

You can adapt this formula to your backend language of choice (PHP, JS, Python) by simply plugging in the ratio value and performing the calculation.

## Rate this post

5 of 5 based on 4642 votes## Comments