Nerva's Poorly written but Mildly helpful BB Code generators

[Nerva Regis]

'Morning, 'Afternoon, 'Evening,

Welcome to Nerva's Poorly written but Mildly helpful BB Code generators

They are ugly, they use var in (new Date()).getFullYear() but they are mildly useful.

Huh? For a guy who talks about BB code, this post of yours has almost no formatting.

Dr.Mittens'approval certifies that this thread is immune to drama.

For some time now I have been aiding people either by helping them understand how BB code works, or by jumping in and formatting the posts for them.

I soon realized that many players miss out on some of the formatting options we have on the forum. Unfortunately, my free time is really limited, and I can't really help everyone (sorry people that I've turned down ). Thus, I started making some small html/css/js generators (hosted on Codepen) for various issues that I noticed people are struggling with.

This is not the final list, more will come. I am also planing on starting BB Code Templates Thread as soon as I get some decent free time.

Oh, and be sure to check the BB Code Repository

Right then, let's get back to business:

---

Simple Things

---

BBcodeTableGenerator

#1 BB [Code] Table Generator

Pretty easy to use:

1. Enter the number of columns
   
2. Enter the number of lines
   
3. Generate the code for the table
   
4. Use the button to select the table -> then Crtl C to Copy . Voila you have your BB code for the table, each cell is populated with a Default Text.
   
5. Max Size that can be generated 99*99
   

Example of usage

BBcodeThumbnailCreator

#2 BB[Code] Auto Thumbnail creator

This came to life after seeing @evanz 's request here

This one creates a thumbnail which contains the direct link to the imgur image.

1. Go to your Imgur image
   
2. Find the link that looks like this one : https://imgur.com/myCmN3m (notice that there is no png, jpg etc. extension)
   
3. Copy the link in the the text box.
   
4. Choose the thumbnail size that fits your needs.
   
5. Use the corresponding copy link button -> Ctrl+C.
   
   

   Example of usage

   
   
   

BBcodeColourCodeGenerator

#3 BB[Code] Colour Tag Generator

Another thing that I've encounter while formatting posts was that people were using only the colors available in the forum editor.
(still has to be improved a bit)

1. Open the link.
   
2. Adjust the sliders until you see the colour you like.
   
3. Generate the tag
   
4. Use the select generated tag button to select, erhm... the tag -> Ctrl+C.
   
   

   Example of usage

   
   
   

BBcodeListCreator

#4BB[Code] BB [Code] List Creator]

This one isn't that fancy, but it does save you some time.
There are 3 types of lists:
Numbered:

Lettered Lists:

Simple List

1. Open the link.
   
2. Enter the number of items in the corresponding text box.
   
3. Use the generate button.
   
4. Max amount of items is 99.
   
5. Select the text. -> Ctrl + C and off you go
   
   

   Example of usage

   
   
   

---

Fancy things

---

BBcodeDiplomacyBarGenerator

#5 BB [Code] Diplomacy Bar Generator

"How do I make those cool diplomacy bars?" is one of the top 3 things that people usually ask me.

The bar is split into 20 blocks.




[rep=Starting value, End value] color1, color2, color3, color4[/rep]
The code for a bar has 4 parts:

1. green - the tag
   
2. yellow - the starting value which indicates the starting block.
   
3. brown - ending value which tells the site at which block to stop.
   
4. teal - those are the four colour "slots". (colour code + transparent goes here)
   

1. Open the link.
   
2. Adjust the sliders until you see the colour you like.
   
3. Set the color you want using the Set Colour Buttons
   
4. To set transparent, click on Set Transparent then click on the Set Colour (1, 2, 3, 4) Button depending on which one of those you want to be transparent.
   
5. Repeat Steps 2,3 or 4 until you've set all the colours.
   
6. Set the Starting Value, should always be more than 1.
   
7. Set the End Value, max is 100.
   
8. When you are happy with everything, press Generate Diplomacy Bar button
   
9. To select the text, use the Select.... button. Ctrl + C; now go declare everyone an enemy, and do it with style
   
   

   Example of usage

CommodityTableCreator

#6 BB [Code] Commodity Table Creator
What does this do? I can explain, but it's better if I show you.

TableBasicType

Silver		10000	99999	89999
Silver		10000	99999	89999
Silver		10000	99999	89999

TableWithCustomHeader

Commodity	Details	Current Stock	Max Amount	Still Needed
Silver		1000	9000	8000
Silver		1000	9000	8000

Let's do this then.

---

Part 1 - Mandatory stuff

Example of values

• Font:
  
  1. Use can use the default forum fonts (you can see them in the forum post editor)
     
  2. Check Corile's font pack
     
• Size:
  
  1. You can use the default disco ones ( you can see them in the forum post editor)
     
  2. Use numbers just like in any text editor.
     
• Colours:
  
  1. By name: red, green, blue etc.
     
  2. Hex values: #4286f4, #12ad0f etc. (Google Hex Color picker for this)
     

---

Part #2 - Getting the info in the table. (for custom header jump to part #3)

Example of values

• Enter Commodity Name - self-explanatory
  
• Enter the commodity's Wiki link:
  
  1. use the link in the app (the green one) or click here
     
  2. copy/paste the link
     
  
  
• Enter direct link to commodity wiki image:
  
  1. On the same page - right corner
     
  2. Right-click on the image ->open image in new tab
     
  3. Copy/paste the link
     
  
  
• Enter commodity image size (widthxlenght):
  
  1. The commodity images are usually 64x64.
     
  2. I use, most of the time, 40x40.
     
  
  
• Enter current commodity value:
  
  1. The amount of units you already have of your commodity
     
  2. Has to be smaller than or equal to the Maximum Quantity
     
  
  
• Enter max commodity value:
  
  1. The maximum amount that you need.
     
  2. Has to be larger than or equal to the Current Quantity
     
  
  
• The remaining amount is calculated automatically.
  

---

Part #3 - Generating the custom table header

Example of values

This one is pretty easy: Just enter the values you want, the above values are just an example.

---

Part #4 - Generating the code:

Once you have set up everything go ahead and:

• Generating header (Do not use multiple times. You only need one)
  
  1. If you want the standard header - use Generate header Code Button
     
  2. If you want the custom header - use Generate custom header Code Button
     
  3. To select text - use the Select Text Button / triple (yes, triple) click on the generated code
     
  4. Copy paste to your thread and come back to the app
     
  
  
• Generating table lines (Can be used multiple times)
  
  1. To generated a line - use the Generate Table Line button
     
  2. Change commodity name, wiki link etc.
     
  3. To select text - use the Select Text Button / triple (yes, triple) click on the generated code
     
  4. Copy/Paste to forum post
     
  5. Repeat until you get to the penultimate/first-to-last entry
     
  
  
• Generating the table footer (Do not use multiple times. You only need one)
  
  1. After you entered the info for you last commodity entry from the table
     
  2. To generate the Footer - use the generate footer button.
     
  3. To select text - use the Select Text Button / triple (yes, triple) click on the generated code
     
  4. Copy/Paste to forum post.
     

Custom Header Example - Click image for full size	Custom Header Example - Click image for full size

You should now have a really nice table with all your data. Also, click on the commodity icon to got the its wiki page.

Pfew, this took some time to write.
I hope some of you find this helpful. The first two comments will be reserved for future work.

That is it for today!

[Nerva Regis]

Taking this one for future posts.

Feedback and everything else goes here. I will still improve them when I have time, they are far from being perfect.
Yes, my coding skills are pretty bad.
Yes, I did not invest that much in CSS-ing them to look really nice.
Yup, there might be bugs, especially if not all the fields are filled.

[Nerva Regis]

This one was taken by Dr. Mittens.