| db/sql | ||
| public | ||
| src | ||
| templates | ||
| .env.example | ||
| .gitignore | ||
| README.md | ||
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.
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.
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.
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.
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
// 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);
?>