Specific Examples

• Rindor Food Calculator

  Link: Rindor Food Calculator

  So what exactly is it?

  • This project was for a DnD game, where a user can combine ingredients to make a dish.
  • It has a list of food categories, and then runs caluclations at the bottom.

  What tech is used, Specifically

  • The food items (ingredients) are all stored in a JSON file. All data on this page is from this file, no other sources.
  • The page builds a list of categories, creates the row for each category, and a list for each category housing each categories contents.
  • Each time an item is selected, it is added to the selected cateogry at the bottom, in a list.
  • When calculate is pressed, JS scripts grab all JSON data for each item. This includes their secondary list of attributes, which follow a {name, weight} pattern.
  • There are also special attributes stored in each item, that follow a {name, description} pattern.

  The Math/Ideas behind it

  • An item should have a name, attributes, and special attributes. Each attribute has a weight.
  • The goal is for a miniumum threshold to be reached, in order for a dish to take on an attribute. This is measured by adding the weights of individual items together.
  • In the Dish Output section, the syntax would be represented as:
  • Item: [Item name] --- Attributes:{Atr[1] name : Atr[1] weight, ... , Atr[n] name : Atr[n] weight} --- Special Trait: [name[1]:desc[1], ... name[n]:desc[n]]
  • For a example, a pear could be represented as:
  • Item: Pear --- Attributes: AC: 3, DEX: 1, INT: 9, MAGIC RESISTANCE: 5 --- Special Trait:
  • The totals for all items are added together to get the totals for each item. An example of a pear and Brocolli would look like:
  • Pear:{AC:3,DEX:1,INT:9,MR:5} + Brocolli:{AC:6,CON:8,STR:7,INIT:20} = Totals: AC: 9 | DEX: 1 | INT: 9 | MAGIC RESISTANCE: 5 | CON: 8 | STR: 7 | INITIATIVE INCREASE: 20
  • This shows how each item has a weight, and when combined the totals are displayed to show what the dish contains.
  • As I mentioned, the goal is to reach a miniumum threshold. If the minimum is 13, in this example, the only one that succeeds is INITIATIVE INCREASE: 20
  • In the Results Output section, you will see all traits over the minimum threshold, and all special attributes.
  • This means, that for a dish of Pears and Brocolli (gross), the dish only succeded on the INITIATIVE INCREASE trait, and will only provide that and none of the others.
  • If we added another item, say meat from a Dire Wolf:
  • Item: Dire Wolf --- Attributes: STR: 8, CON: 8, AC: 7 --- Special Trait: Pack Hunter: Pack hunter Ability
  • The new totals are:
  • Totals: AC: 16 | DEX: 1 | INT: 9 | MAGIC RESISTANCE: 5 | CON: 16 | STR: 15 | INITIATIVE INCREASE: 20
  • Back in the results output section, we will now see: AC:16, CON: 16, STR: 15, INITIATIVE INCREASE: 20, and Special Attributes: Pack Hunter
  • This means, the dish now provides benefits for AC, CON, STR, Initiative, and gives the users a special ability from the dire wolf, called Pack Hunter

• Rindor Island Tool

  Link: Rindor Island Tool

  So what exactly is it?

  • The Rindor Island Tool takes in parameters and spits out a bunch of island statistics.

  What tech is used, Specifically

  • The majority of the page runs on Javascript. The data is stored in various different types, such as arrays, matrices, and the ether.
  • The parameters are combined for a cascade of output fields, such as combining the size of an island with the geological activity to create an area, and then basing city counts and types off this added with population density and wealth statistics.

  The Math/Ideas behind it

  • This may be the most mathematically complex project so far, although the complexity isn't very steep, there are alot of moving parts.
  • The core idea is that the system takes in several parameters and calculates items off of this.
  • Here are the basic parameters in the tool:
  • Island Size Name: The category of island size. Minor, Moderate, Large, Continental, and Gargantuan.
  • Island Size Num: The area in km^2 of the island. This dynamically lists values for the selected category above.
  • Climate: Selects from a long list of climate options like Temperate forest, crag, etc.
  • Geological Impact: The level of activity on an island. This scales the size, where more activity is more land area.
  • Biome Diversity: A scale of 1-10 determining the likelihood of more than the base biome.
  • Pop Density: How densely populated the island is, which scales the towns.
  • Economic Status: The generalized wealth of the island, which affects how the city groups are scaled. More wealth means more larger sized cities.
  • The inputs are taken in by a form and used to calculate various island details and statistics.
  • The overall flow of information follows this example:
  • Island Size Name: Moderate Islands, Island Size Num: 20001-30000km^2, Climate: Marshland, Geological Impact: Minor geological uplift, Biome Diversity: 1-None, Pop Density: Moderate, Economic Status: Moderate
  • The first important consideration is the island size name, which is Moderate islands. This allows us to choose from a list of sizes, which we chose 20001-30000km^2.
  • The tool begins by grabbing the category and size selected, as well as the geological impact.
  • The geological impact is represented on the backend as a number from -0.5 to 0.5. This number is multiplied to the base size in order to increase or decrease the base land mass. Minor geological impact is expressed as 0.1 on the backend.
  • First, the size range is calcualted as:
  • [max size]-[min size], which for this is 30,000-20,001 = 9,999
  • Next, the baseSize(the lower range value) is modified by the product of the range and islandSizeBaseModifier modifier, added to the base size multiplied with the geological impact.
  • baseSize + (sizeRange * islandSizeBaseModifier) + (baseSize * geoImpact)
  • The base size is the Lower value in the range, the size range is the [max size]-[min size], the islandSizeBaseModifier is a set value for the category of island stored in a JSON file, and the geoImpact is the set value pulled from the form.
  • The actual numbers for this example are as follows:
  • 20,001 + (9,999 * 0.3) + (20,001 * 0.1) = 25000.8
  • The number is then rounded, which in this case presents us with "25,001 km^2"
  • Next up the town generation begins, where all the rest of the values are captured and parsed from the form.
  • Put simply, based off modern statistics, the system assumes 20 settlements per 1,000km. This is drawn in parallel to modern sicily, since the land mass is similar to this example.
  • The total number of settlements is necessary first, where a cieling operation is conducted on the relevant factors:
  • Math.ceil((islandSize / 1000) * baseDensityFactor * populationModifier * climateModifier)
  • What happens here is dividing the new base size(islandSize) by that 1000km partition decided above, then multiplying the base population density, population modifier, and climate modifier.
  • For our example, here are the numbers the system would use:
  • Math.ceil((20001 / 1000) * 20 * 2 * 0.5) = 501
  • Then, another ceiling operation is run to add the eeconomic modifier:
  • Math.ceil(numSettlements * economicModifier);
  • In our example, this takes the previous result, and adds the modifier
  • Math.ceil(1601 * 0.5) = 602
  • Next we run a max operation on a min operation, that verifies the settlements per area requirement
  • Math.max(1, Math.min(numSettlements, islandSize / 10))
  • In our example, this looks a little bit like:
  • Math.max(1, Math.min(801, 20001 / 10)) = 602
  • This leads us to our Total number of towns, being 602. This is a number the system then needs to take and divide into the appropriate sized settlements.
  • That means the next step is to determine the division of settlements, starting with our number 602.

• Rindor Naval Flags

  Link: Rindor Naval Flags
  

  I decided to add this for a few reasons, despite having already covered JSON in the previous example. I'll explain below.

  So what exactly is it?

  • A simple JSON file displayed on a JS webpage, like the other examples.
  • The page uses a JSON field to act as CSS, and only color one part of the output HTML.
  • The reason this is special is because I added a field in the JSON file where the CSS color for one element is in plain text
  • Why is this important? I was thinking outside the box and figured that adding the output css to the JSON file would be cool.

  What tech is used, Specifically

  • The JSON Schema follows this style:
  • {
  • "Name": "",
  • "Type": "",
  • "Description": "",
  • "Effect": "",
  • "DominantColor": ""
  • }
  • The code itself works by creating pulling all the fields from the JSON file, as you normally would.
  • The DominantColor field is used to store the CSS output color for only the Name field.
  • The key to making this work is to add the name to its own span, pulling the color field if it exists, and styling just the span.
  • This is how I can accomplish coloring the single part of the output HTML with a JSON field that acts as CSS.

• DND Colony Manager - Section Unfinished

  Link: DND Colony Manager
  

  This one is quite fun. I originally coded this in C#, and it worked without a hitch. I tried to direct port when I was first building this, and well... It didn't translate well. I have since redone it.

  So what exactly is it?

  • A web application that lets you calculate interest, money gained from sales, travelling merchants, and several other things
  • A dice rolling calculator
  • A building planner for a DND colony

  What tech is used, Specifically

  • Firstly, the page is a standard PHP page, that verifies login. As this is made Specifically for my players, so I will not show it here. This is the only example you cannot see, just because it is in use.

• EFT Data - Section Unfinished

  Link: EFT Raw Player Data
  Link: EFT Raw Scav Case Data

  This section is for the Escape from Tarkov(EFT) data I put on the website, and was more of an exercise in display and use of CSV.

  I have played alot of the game, and it has a large amount of possible data points a user can collect.

  
  

  DISCLAIMER: The raw data has curse words in it. This is not an official dataset. It is my dataset. We are adults and this data was taken in my spare time as a personal project. You will be fine.

  
  

  So what exactly is it?

  • There are currently two implementations of data from EFT.
  • The first is player data, taken from raids (or matches) that I collected. The headers indicate the collected data, and are as follows:
  • ID, Player, Date, Death, Death By, IsEOD?, Death To, Caliber, Location, Time, Raid Timer, Damage Taken, Damage Body, Damage Armor, Primary, Ammo Used, Did Cheat?, XP, NVG's, Notes, Extract, Kills Detailed, Kills Total
  • The second is Scav Case Data. The Scav Case is a box you essentially gamble at. You offer an item or money, scavs go collect loot, and return said loot to you in varying amounts of time.
  • The headers are as follows:
  • ID, Player, Date, Case Type, Buy-In, Buy-In Actual, Estimated Value, DIPFI, Percentage, Notes, Item 1, Item 2, Item 3, Item 4, Item 5, Item 6

  What tech is used, Specifically

• VA Calculator

  Link: VA Calculator

  This calculator is for VA Disability. Figured I would try my hand at it since my friends and I struggle with the low-effort, low-iq VA chart is hard to interpret.

  So what exactly is it?

  • A web application that lets you calculate disability
  • The math is predetermined, but I am aiming to just make it easier, where you can just put in your numbers.

  What tech is used, Specifically

  • The Main driving tech here is Javascript. There is a constant array holding all of the ratings.
  • The array is housed on a seperate page, and is accessed on the calculator page when a user submits the form.
  • Firstly, the user selects numbers, which are added to a list, the list is then sorted descending (high to low).
  • The sorted list is then compared to the constant array based on the highest value first.
  • A user array example could look like:
  • Pre Sorted: {10, 20, 40, 60, 10, 10, 20}
  • Sorted: {60, 40, 20, 20, 10, 10, 10}
  • After the information is sorted, it is compared to the constant array.
  • This is not the actualy syntax, but to start with number 60, the program navigates to 60.
  • 60: {10: 64, 20: 68, 30: 72, 40: 76, 50: 80, 60: 84, 70: 88, 80: 92, 90: 96}
  • On the entry for 60, you can see there are steps of 10, from 10 to 90.
  • The next step is for the the program to compare the second number, 40, to 60. In the case of 40 on 60, the answer is 76.
  • The progam sets the current number from 60 -> 76 and then compares the next number to 76.
  • 76: { 10: 78, 20: 81, 30: 83, 40: 86, 50: 88, 60: 90, 70: 93, 80: 95, 90: 98 }
  • Comparing the next number, 20, to 76 yields a value of 81.
  • The progam sets the current number from 76 -> 81 and then compares the next number to 81.
  • 81: { 10: 83, 20: 85, 30: 87, 40: 89, 50: 91, 60: 92, 70: 94, 80: 96, 90: 98 }
  • Comparing the next number, 20, to 81 yields a value of 85.
  • The progam sets the current number from 81 -> 85 and then compares the next number to 85.
  • 85: { 10: 87, 20: 88, 30: 90, 40: 91, 50: 93, 60: 94, 70: 96, 80: 97, 90: 99 }
  • Comparing the next number, 10, to 85 yields a value of 87.
  • The progam sets the current number from 85 -> 87 and then compares the next number to 87.
  • 87: { 10: 88, 20: 90, 30: 91, 40: 92, 50: 94, 60: 95, 70: 96, 80: 97, 90: 99 }
  • Comparing the next number, 10, to 87 yields a value of 88.
  • The progam sets the current number from 87 -> 88 and then compares the next number to 88.
  • 88: { 10: 89, 20: 90, 30: 92, 40: 93, 50: 94, 60: 95, 70: 96, 80: 98, 90: 99 }
  • Comparing the next number, 10, to 88 yields a value of 89.
  • The progam sets the current number from 88 -> 89 and then compares the next number to 89.
  • Here, 89 is actually our final product. This is the final result for the calculator for this example.
  • I figured I would provide a good mid sized example, and for longer ones, the calculator actually prints out a log of moves on the page itself.
  • Note: You can hit calculate, then add more, and hit calculate again and it will keep adding to the list.

• Crypto Clicker - Section Unfinished

  Link: Crypto Clicker
  

  This section is currently login locked, so I will not be linking it. This is because there are achievements associated with user accounts.

  So what exactly is it?

  • A web based clicker game, where the user clicks a large crypto coin, and earns points.
  • The user can purchase various items to upgrade the power of the click, or generate passive points.

  What tech is used, Specifically

  • Alot. Will update.

• Razor Workshop

  Link: Razor Workshop
  

  This section is currently heavily heavily unfinished.

  So what exactly is it?

  • A basic razor page to display that it works.
  • The page does not do anything yet.

  What tech is used, Specifically

  • Razor, C#, ASP.NET, .NET Core, Command line