# Dragon Knight

Below is the current project documentation.

## Attributes

### Power
Power is the attribute that determines overall strike damage. Damage from weapon attacks, spells, or other strikes and specific skills will be directly influenced by Power. Power is a linear measure, with 1 Power = 1 damage in most cases.

### Accuracy
Accuracy determines the chance your attack, spell, or other skill will actually land on your opponent.

### Penetration
Penetration as a value determines your ability to make it through physical defenses; i.e. the enemy's Toughness and Armor.

### Focus
Focus is the same as Penetration but for causing magical damage, and helps go through magical defenses; i.e. the enemy's Resist.

### Evasion
Evasion is the attribute responsible for determining your chance to dodge any kind of attack. When calculating the chance, at base every 2 Evasion is 0.1% chance. The enemy's Accuracy negatively impacts this stat. The chance to dodge is capped at 85%.

### Toughness
Toughness affects your health pool and baseline defensive capability to physical attacks, such as weapons, projectiles, and physical skills.

### Armor
Armor is an additional layer of physical protection over Toughness. All armor grants some level of Armor, and it's effect is linear; 1 Armor = 1 point of damage negated.

### Resist
Resist is your defensive capacity against magic such as spells, magic skills, and magic weapons. Like Armor, this is a linear stat.

### Precision
Precision determines your Uber (Critical) Hit chance. In general, 2 points of Precision = 0.1% chance. No matter how high this value, your Uber Hit chance caps at 90%. Some equipment grants straight Uber Hit chance.

### Ferocity
Ferocity is a linear modifier of your Uber Hit damage; 1 Ferocity = 1% Uber Hit damage. Uber Hit damage increases cap at 300%.

### Luck
Luck is a modifier for gained XP/Silver. Like Precision, 2 points of Luck = 0.1% increase of these gains.

## Tooltip

The tooltip library is Isotip, taken and modified by Sharkk! Here is the breakdown of the API.

Configuring a specific tooltip is done via data attributes on an element.

### **`data-tooltip-classname`**

If you'd like to add a classname to the root tooltip element, set it here.

### **`data-tooltip-content`**

This sets the main body content of the tooltip into a `<p>` tag by default with a class of `tooltip-content`. Content is interpreted as plain text by default. To insert html, set the data-tooltip-html attribute to true.

### **`data-tooltip-title`**

This sets the title of the tooltip into a `<p>` tag by default with a class of `tooltip-title`.

### **`data-tooltip-html`**

Setting this to true will force Isotip to try and interpret the content as HTML. If it fails, it will interpret the content as plain text.

### **`data-tooltip-placement`**

This sets the position of the tooltip. Options are `top`, `right`, `bottom`, and `left`. By default, `top` is used for all tooltips.

### **`data-tooltip-container`**

This sets the element that the tooltip will be prepended to. By default, this is the `<body>` element.

Alternatively, programattic creation and destruction of tooltips is available.

### **`data-tooltip-scrollContainer`**

This sets the element that will have a scroll event bound to it. If your tooltip is inside a scrolling element (`overflow:scroll`), you need to add this!.

### **`data-tooltip-autoclose`**

If set to false, the tooltip will *not* close unless you do so programmatically with `isotip.close()`. Normal tooltips will not open until the open one has been closed!

### **`init( config )`**

The init method provides automatic event binding for tooltips. It sets up delegated event listeners for `.tooltip-click`, `.tooltip-hover`, and `.tooltip-focus` for click, mouseover, and focus events respectively. You can pass in an optional config object to overwrite any of the default options.

```javascript
var options = {
    html: false, // set to true to always interpret content as HTML
    placement: 'top', // default placement of tooltips
    container: 'body', // default containing element for the tooltip
    scrollContainer: '.scroll-container', // default container for scroll watching
    template: '<div class="tooltip" data-tooltip-target="tooltip"></div>', // default template for the tooltip shell
    removalDelay: 200, // default number of ms before the tooltip is removed
    tooltipOffset: 10, // default number of px the tooltip is offset from the trigger element
    windowPadding: { // window bounds for tooltip repositioning
        top: 10,
        right: 10,
        bottom: 10,
        left: 10
    }
};

Tooltip.init( config );
```

### **`open( trigger, config )`**

The open method will create the tooltip, insert it into the DOM, and position it in relation to it's trigger. The trigger can be an element or a CSS selector. The object to be passed in will serve as a replacement for the data attributes on the trigger.

```javascript
var config = {
    className: 'specific-class', // set to add a class to the tooltip
    html: false, // set to true to interpret content as HTML
    placement: 'top', // where to place the tooltip in relation to the trigger
    content: 'Tooltip content', // the content to go into the tooltip,
    title: 'Tooltip title', // the text to go in the title, if any
    container: document.querySelector('.container'), // the container to append the tooltip to
    scrollContainer: document.querySelector('.scroll-container'), // the container to bind the scroll event to
    autoClose: false // set to false if you only want to close the tooltip programmatically. Normal tooltips won't open until the open one has been closed!
};

Tooltip.open( '.tooltip', config );
```

### **`close( tooltip )`**

The close method will remove a tooltip from the DOM. The tooltip to remove should be passed in and can be an element or a CSS selector.

```javascript
Tooltip.close( '.tooltip' );
```

### **`positionTooltip( tooltip, trigger, placement )`**

The positionTooltip method will re-evaluate the position of a tooltip in relation to it's trigger element. Only the tooltip and trigger need to be passed in, and placement will default to what's been configured by `init()`. Tooltip and trigger can be either an element or a CSS selector.

```javascript
Tooltip.positionTooltip( '.tooltip', '.tooltip-click', 'left' );
```

## CAPTCHA

Here is some example code for implementing a CAPTCHA, using the gd extension to create a server-rendered, randomized image.

```php
<?php
// Start the session to store the CAPTCHA answer
session_start();

// Define the image dimensions
$width = 200;
$height = 60;

// Create the image resource
$image = imagecreatetruecolor($width, $height);

// Define colors
$bg_color = imagecolorallocate($image, 255, 255, 255); // White background
$text_color = imagecolorallocate($image, 0, 0, 0);      // Black text
$noise_color = imagecolorallocate($image, 100, 100, 100); // Gray for noise

// Fill the background
imagefill($image, 0, 0, $bg_color);

// Generate a random math equation (e.g., 3 + 5)
$num1 = rand(1, 9);
$num2 = rand(1, 9);
$operator = rand(0, 1) ? '+' : '-'; // Randomly choose addition or subtraction
$equation = "$num1 $operator $num2 = ?";
$answer = $operator == '+' ? ($num1 + $num2) : ($num1 - $num2);

// Store the answer in the session
$_SESSION['captcha'] = $answer;

// Add noise to the image (random dots)
for ($i = 0; $i < 1000; $i++) {
    imagesetpixel($image, rand(0, $width), rand(0, $height), $noise_color);
}

// Set the path to the ZXX font
$font = __DIR__ . '/fonts/ZXX-Regular.ttf'; // Path to the ZXX font file

// Add the math equation using ZXX font
$font_size = 30;
$x = 20;
$y = 40;
imagettftext($image, $font_size, rand(-10, 10), $x, $y, $text_color, $font, $equation);

// Output the image as PNG
header('Content-Type: image/png');
imagepng($image);

// Free the image resource
imagedestroy($image);
?>
```

https://github.com/kawaiidesune/zxx
