|
|
| Line 1: |
Line 1: |
| <!-- Template:CraftingGUIHover -->
| | {{CraftingGUIHover |
| | | bg = File:YourCraftingBackground.png |
| | | width = 512 |
| | | tip1 = [[File:Empty Honeycomb.png|300px]] |
| | | tip2 = [[File:Empty Honeycomb.png|300px]] |
| | | tip3 = [[File:Empty Honeycomb.png|300px]] |
| | | tip4 = [[File:Empty Honeycomb.png|300px]] |
| | | tip5 = [[File:Empty Honeycomb.png|300px]] |
| | | tip6 = [[File:Empty Honeycomb.png|300px]] |
| | | tip7 = [[File:Empty Honeycomb.png|300px]] |
| | | tip8 = [[File:Empty Honeycomb.png|300px]] |
| | | tip9 = [[File:Empty Honeycomb.png|300px]] |
| | | tipout = [[File:Bee_Hive.png|300px]] |
|
| |
|
| <!-- | | <!-- tweak if alignment is off for your background --> |
| Parameters
| | | grid_x = 96 | grid_y = 44 | gap_h = 6 | gap_v = 6 | slot = 48 |
| - bg : full File:... syntax for the crafting window background image
| | | out_x = 380 | out_y = 94 |
| - width : width in px to render the background (default 512)
| | }} |
| - tip1..tip9 : tooltip content for the 3×3 crafting grid (row-major: top-left to bottom-right)
| |
| - tipout : tooltip content for the output slot
| |
| | |
| Optional alignment (px; adjust if your background differs):
| |
| - grid_x, grid_y : top-left corner of the 3×3 grid relative to the background
| |
| - slot : slot box size (default 48)
| |
| - gap_h, gap_v : horizontal / vertical gaps between slots
| |
| - out_x, out_y : center of the output slot
| |
| -->
| |
| | |
| <includeonly>
| |
| <span class="crafting-gui" style="display:inline-block; position:relative; width:{{{width|512}}}px;">
| |
| | |
| <!-- background -->
| |
| [[File:{{{bg|CraftingGUI-Example.png}}}|{{{width|512}}}px|link=]]
| |
| | |
| <!-- simple tooltip CSS (scoped to this instance) -->
| |
| <span style="
| |
| position:absolute; inset:0; pointer-events:none;
| |
| ">
| |
| <style>
| |
| .crafting-gui .hover-slot{position:absolute; width:{{{slot|48}}}px; height:{{{slot|48}}}px; transform:translate(-50%,-50%); pointer-events:auto;}
| |
| .crafting-gui .hover-slot .tooltip{display:none; position:absolute; left:105%; top:50%; transform:translateY(-50%); z-index:3; background:#111; color:#fff; padding:6px; border:1px solid #444; border-radius:4px; max-width:360px; box-shadow:0 2px 6px rgba(0,0,0,.35);}
| |
| .crafting-gui .hover-slot:hover .tooltip{display:block;}
| |
| </style>
| |
| </span>
| |
| | |
| <!-- helper: compute coordinates with calc() -->
| |
| <!-- defaults tuned for a typical 512px-wide crafting UI; adjust grid_x/grid_y/gaps if needed -->
| |
| <!-- row 1 -->
| |
| <span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 0 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 0 * ({{{slot|48}}}px + {{{gap_v|6}}}px));">
| |
| <span class="tooltip">{{{tip1|}}}</span>
| |
| </span>
| |
| <span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 1 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 0 * ({{{slot|48}}}px + {{{gap_v|6}}}px));">
| |
| <span class="tooltip">{{{tip2|}}}</span>
| |
| </span>
| |
| <span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 2 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 0 * ({{{slot|48}}}px + {{{gap_v|6}}}px));">
| |
| <span class="tooltip">{{{tip3|}}}</span>
| |
| </span>
| |
| | |
| <!-- row 2 -->
| |
| <span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 0 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 1 * ({{{slot|48}}}px + {{{gap_v|6}}}px));">
| |
| <span class="tooltip">{{{tip4|}}}</span>
| |
| </span>
| |
| <span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 1 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 1 * ({{{slot|48}}}px + {{{gap_v|6}}}px));">
| |
| <span class="tooltip">{{{tip5|}}}</span>
| |
| </span>
| |
| <span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 2 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 1 * ({{{slot|48}}}px + {{{gap_v|6}}}px));">
| |
| <span class="tooltip">{{{tip6|}}}</span>
| |
| </span>
| |
| | |
| <!-- row 3 -->
| |
| <span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 0 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 2 * ({{{slot|48}}}px + {{{gap_v|6}}}px));">
| |
| <span class="tooltip">{{{tip7|}}}</span>
| |
| </span>
| |
| <span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 1 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 2 * ({{{slot|48}}}px + {{{gap_v|6}}}px));">
| |
| <span class="tooltip">{{{tip8|}}}</span>
| |
| </span>
| |
| <span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 2 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 2 * ({{{slot|48}}}px + {{{gap_v|6}}}px));">
| |
| <span class="tooltip">{{{tip9|}}}</span>
| |
| </span>
| |
| | |
| <!-- output slot -->
| |
| <span class="hover-slot" style="left:{{{out_x|380}}}px; top:{{{out_y|94}}}px;">
| |
| <span class="tooltip">{{{tipout|}}}</span>
| |
| </span>
| |
| | |
| </span>
| |
| </includeonly>
| |