By adding it to your app, you can append to any element the FrogTroll component.
This will add a frog to your screen that jumps arround it's parent component boundaries when the mouse pointers comes uncomfortably close to it.
It turns it's head staring always to the mouse pointer's direction and if the pointer stays still for some time (defined by you), the frog opens its mouth warning about the coming tongue hit.
If the mouse pointer doesn't get the warning, it will meet the inevitable end as the frog will launch its tongue and make it dissapear from the screen.
You just need a React app. The oldest working version of React is 16.3 where useEffect was introduced.
To install the Frog Troll run npm i --save frog-troll
To integrate to your app add import {FrogTroll} from 'frog-troll' at the top of the component you want to have it.
Then inside the component where you want the Frog Troll to live add <FrogTroll options={yourOptions}/>.
Make sure to include options even as an empty parameter options={{}}
yourOptions variable is an object whose fields adjust the frog's size, starting position and behaviour:
| Field | Type | Default Value | Description |
|---|---|---|---|
| fontSize | Integer | 16 if screen width < 1024px 19 if screen width >= 1024px 20 if screen width >= 1280px |
Defines the font size used in the parent component |
| size | Integer | 5 | Defines the size of the frog troll in the units given |
| units | String | 'em' | Can be 'em' or 'px', defines the units used for the size of the frog troll |
| navbarHeight | Integer | 0 | The size in pixels of the navbar if there is one* |
| startingPosition | Object | { x:0, y:0 } | The starting position inside the parent element in the units given in units, giving only positive values. With { x:0, y:0 } being the top left corner of the parent element |
| timeToOpenMouth | Integer | 2000 | Time in milliseconds from the moment that mouse pointer stops moving to the moment frog troll opens its mouth |
| timeToAttack | Integer | 1000 | Time in milliseconds from the moment that frog troll opens its mouth to the moment it launches its tongue |
The frog troll feels uncomfortable when the pointer tries to touch it so it jumps to a random (x,y) point within the boundaries of the parent element.
Most of the magic happens in the jump() function where the orbit of the frog troll's jump is calculated.
The un-natural convention has been made that the jump follows always a perfect circle and based on this theory, we have eight cases of jumps. Considering that the starting position of the frog troll is (0,0), depending on the spot of the final position the eight cases are shown below.
Jump Cases
- In cases a and h, the center of the frog troll's orbit circle will be on Xaxis (Case 1).
- In cases f and c, the center of the frog troll's orbit circle will be on Yaxis (Case 4).
- In cases g and b, the center of the frog troll's orbit circle will be on the line passing from final position
point and being parallel to Yaxis (Case 3).
- In cases e and d, the center of the frog troll's orbit circle will be on the line passing from final position
point and being parallel to Xaxis (Case 2).
 |
 |
| Case 1 | Case 2 |
 |
 |
| Case 3 | Case 4 |