Sandbox page

This page serves as a playground to try new formats, to test certain things or anything. Anyone can edit this page as much as they want, as long as they are not removing text from other users. If you want to add something to this page or try something, please do so in a separate section/title or under a section with same title (if you want to experiment with tables, do so under the "Sandbox - tables" title).

How to align text in tables to the right: align="right"

```
<div style="display:none"> <!-- For mobile users. -->
//text here will be displayed only to mobile users
</div>
<div class="hidden"> <!-- For desktop users. -->
//text here will be displayed only to desktop users
</div>

```

```
<span class="mw-collapsible mw-collapsed">Text you want to collapse or hide.</span>

```

## Sandbox - testing layout

I am thinking of changing the layout for crafting, ship, caravan, airship time boosts to a more vertical layout - something along these lines. I am more leaning towards the "Test 2" table - section "Cameleer lvl. 1". The "Expand" buttons in "Test 1" tables don't even work (unfortunately).

 Test 1
 Travel time
* Projects...
* Projects...
* Projects...
* Projects...
* Projects...  7h
* Projects...
* Projects...
* Projects...
* Projects...
* Projects...
 Cameleer lvl. 1.5
 9h
 8h
\*Projects...
* + Projects...
	+ Projects...
	+ Projects...
	+ Projects...

  7h
* + Projects...
	+ Projects...
	+ Projects...
	+ Projects...
 Cameleer lvl. 2
* 8h
* 7h

	+ Projects...
	+ Projects...
	+ Projects...
	+ Projects...
	+ Projects...
* 6h

	+ Projects...
	+ Projects...
	+ Projects...
	+ Projects...
 Items to buy
 Item to sell
 Starting chancesof robbery

 Test 2
 Travel time
  8h
* Projects...
* Projects...
* Projects...
* Projects...
* Projects...
   7h
* Projects...
* Projects...
* Projects...
* Projects...
* Projects...
 Cameleer lvl. 2
 * 7h

	+ Projects...
	+ Projects...
	+ Projects...
	+ Projects...
 * 6h

	+ Projects...
	+ Projects...
	+ Projects...
	+ Projects...
 Items to buy
 Item to sell
 Starting chancesof robbery

 Test 3
 Travel time
  8h
* Projects...
* Projects...
* Projects...
* Projects...
* Projects...
   7h
* Projects...
* Projects...
* Projects...
* Projects...
* Projects...
 Cameleer lvl. 1
  8h
* Projects...
* Projects...
* Projects...
* Projects...
* Projects...
   7h
* Projects...
* Projects...
* Projects...
* Projects...
* Projects...
 Cameleer lvl. 2
  8h
* Projects...
* Projects...
* Projects...
* Projects...
* Projects...
   7h
* Projects...
* Projects...
* Projects...
* Projects...
* Projects...
 Items to buy
 Item to sell
 Starting chancesof robbery

 Original (old)
 Travel time
 Cameleer lvl. 1
 Cameleer lvl. 2
 Items to buy
 Item to sell
 Starting chancesof robbery

Caravan lvl. 1
 Time to build
 Unlocks

Caravan lvl. 2
 Time to build
 Unlocks

Caravan lvl. 1
 Time to build
 Unlocks

Beijing
 With Cameleer lvl. 1
 With Cameleer lvl. 2
 Items to buy

 Required to unlock

## Sandbox - overlimit experience

* XP overlimit - overlimit experience per unit that exceeds warehouse capacity: reward for solving a nonogram, level-up reward, expedition reward, production outcome, cauldron transmutation outcome, ship's expedition reward.
* XP cauldron - transmutation experience for throwing 7 units of this item into cauldron (always the same, regardless of transmutation material rewards), without bonuses (such as Porcelain vase).
* MP cualdron - Mental power received from throwing 7 units of this item into the cauldron.

NOTES:

* If the item name is blank, then the Data/item module has not yet been updated with info for this item.
* The player cannot buy items in Shop or Bourse beyond warehouse capacity.
* The palyer cannot craft items that are "immediately" obtained (such as Treasure Maps) if they would exceed warehouse capacity.
	+ However, for items that take some time to be crafted (such as Shuriken), the player can start crafting items in an amount that would exceed warehouse capacity.
		- In this case, production outcome is not immediately converted (the player may free up some space and then collect the rest of the items into the warehouse).

## Sandbox - tables

```
testing...

```

**Alternative:**

following quasi-table (made of divs with specific width) again works only on desktop :(

it seems that mobile/responsive mode removes style attribute from divs...

level
1152

Next table is built using straight HTML and it works good on both desktop/mobile :O

(though in mobile view it is enclosed in a div.article-table-wrapper, so its appearance is different... don't know if styling of the div may be overridden or maybe its class could by removed with javascript)

Sadly it doesn't. We have to test with big and small numbers in columns and also more columns, so the mobile browser has to shrink the table.

note:

ruby picture below is defined in source as thumbnail of 40x40x40px
 mobile/responsive mode must be using some backend scaling - inspector shows its HTML has width="20" and height="20" attributes; pic properties according to inspector:

```
Rendered size:	14 × 14 px
Rendered aspect ratio:	1∶1
Intrinsic size:	20 × 20 px
Intrinsic aspect ratio:	1∶1

```

so not only it is reduced in size by backend, but also frontend styles shrink it even more

This looks more like a table, doesn't it? Let's hope it works on mobile. Nope. It doesn't work on mobile.

:O

**(none)**

Spices

0%

0%

0%

0%

Pearl

0%

0%

0%

0%

Message in a bottle

0%

0%

0%

0%

Anchor

0%

0%

0%

0%

Salmon

0%

0%

0%

0%

This text will appear in the first column. That might depend on the quantity of text used inside the container. The latter portion of the text will overflow into the second column. This does depend on the number of columns you have as well.

## Sandbox - imagemaps

hmm, this script (js) can "reset" table wrappers in responsive mode (you can try it in browser's console after page is loaded):

```
for (t in document.getElementsByClassName('article-table-wrapper')) {document.getElementsByClassName('article-table-wrapper')[t].classList="";}

```

with jQuery is even simplier:

```
$('.article-table-wrapper').removeClass('article-table-wrapper')

```

or you can minimize padding for tablecells in responsive mode:

```
$('.article-table-wrapper td').css('padding','2px')

```

- and it affects only tablecells within that wrapper, so desktop mode should be unchanged... now it is only a question of injecting the code into every page (Common.js?) and executing it after page is loaded, maybe like this:

```
$(document).ready(function() {...});

```