|
|
| Line 31: |
Line 31: |
| }} | | }} |
| {{#for_external_table:|{{#vardefine:Name|{{{Name}}}}}{{#vardefine:BuildingType|{{{BuildingType}}}}}{{#vardefine:Description|{{{Description}}}}}{{#vardefine:PowerCost|{{{PowerCost}}}}}{{#vardefine:GeneratesPower|{{{GeneratesPower}}}}}{{#vardefine:StorageSlots|{{{StorageSlots}}}}}{{#vardefine:StorageCapacity|{{{StorageCapacity}}}}}{{#vardefine:SchematicRequirement|{{{SchematicRequirement}}}}}{{#vardefine:JourneyRequirement|{{{JourneyRequirement}}}}}{{#vardefine:Health|{{{Health}}}}}{{#vardefine:PlacedWith|{{{PlacedWith}}}}}{{#vardefine:AdditionalNotes|{{{AdditionalNotes}}}}}{{#vardefine:RecipeToBuild|{{{RecipeToBuild}}}}}{{#vardefine:ImageFile|{{{ImageFile}}}}}{{#vardefine:IconFile|{{{IconFile}}}}}{{#vardefine:Category3|{{{Category3}}}}}{{#vardefine:YoutubeVideoLink|{{{YoutubeVideoLink}}}}} }} | | {{#for_external_table:|{{#vardefine:Name|{{{Name}}}}}{{#vardefine:BuildingType|{{{BuildingType}}}}}{{#vardefine:Description|{{{Description}}}}}{{#vardefine:PowerCost|{{{PowerCost}}}}}{{#vardefine:GeneratesPower|{{{GeneratesPower}}}}}{{#vardefine:StorageSlots|{{{StorageSlots}}}}}{{#vardefine:StorageCapacity|{{{StorageCapacity}}}}}{{#vardefine:SchematicRequirement|{{{SchematicRequirement}}}}}{{#vardefine:JourneyRequirement|{{{JourneyRequirement}}}}}{{#vardefine:Health|{{{Health}}}}}{{#vardefine:PlacedWith|{{{PlacedWith}}}}}{{#vardefine:AdditionalNotes|{{{AdditionalNotes}}}}}{{#vardefine:RecipeToBuild|{{{RecipeToBuild}}}}}{{#vardefine:ImageFile|{{{ImageFile}}}}}{{#vardefine:IconFile|{{{IconFile}}}}}{{#vardefine:Category3|{{{Category3}}}}}{{#vardefine:YoutubeVideoLink|{{{YoutubeVideoLink}}}}} }} |
| <!-- Main container -->
| |
| <div class="responsive-container">
| |
|
| |
|
| <!-- Left Column -->
| | <!-- Main container with proper responsive grid layout --> |
| <div class="responsive-col col1">
| | <div class="page-content"> |
| <div class="skin-pivot">
| | <div class="content-grid"> |
| <div class="dune-card">
| | <!-- Column 1: Building Info --> |
| <div class="dune-card-decoration"></div>
| | <div class="ui-card col-span-4"> |
| <div class="dune-card-inner">
| | <div class="card-header"> |
| <div class="dune-card-label">SCHEMATIC – BUILDABLE</div>
| | <div class="card-label">SCHEMATIC – BUILDABLE</div> |
| <div class="dune-card-title"><span class="icon">🛈</span> {{#var:Name}}</div>
| | <h3 class="card-title"> |
| <div class="dune-card-image">
| | <span class="card-icon">🛈</span> {{#var:Name}} |
| {{#if:{{#var:ImageFile}}|[[File:{{#var:ImageFile}}|200px|alt={{#var:Name}}|style=max-width:100%;max-height:150px;object-fit:contain;border:2px solid #e2d3ae;border-radius:4px;padding:2px;background-color:#262626;]]}} | | </h3> |
| | </div> |
| | <div class="card-content"> |
| | <!-- Building image --> |
| | <div class="image-container"> |
| | <div class="image-frame"> |
| | {{#if:{{#var:ImageFile}}|[[File:{{#var:ImageFile}}|200px|alt={{#var:Name}}|style=max-width:100%;max-height:180px;object-fit:contain;]]}} |
| </div> | | </div> |
| <div class="dune-card-description">{{#invoke:DataTableParserV2|iconize|{{#var:Description}}}}</div>
| | </div> |
| <div class="dune-card-locked">
| | |
| <div class="dune-card-locked-label"><span class="dune-card-locked-icon">🔒</span>Locked Behind</div>
| | <!-- Description --> |
| <div class="dune-card-locked-value">{{#var:JourneyRequirement}}</div>
| | <div class="description-box"> |
| | {{#invoke:DataTableParserV2|iconize|{{#var:Description}}}} |
| | </div> |
| | |
| | <!-- Locked behind --> |
| | <div class="locked-section"> |
| | <div class="locked-header"> |
| | <span class="card-icon">🔒</span> Locked Behind |
| </div> | | </div> |
| <div class="dune-card-infobox-two-column"> | | <div class="locked-content"> |
| <table class="infobox-dune-two-column">
| | {{#var:JourneyRequirement}} |
| <tr><th><span class="icon">[[File:BuildingTypeIcon.png]]</span> Building Type</th><td>{{#var:BuildingType}}</td></tr>
| |
| <tr><th><span class="icon">[[File:BuildingHealthIcon.png]]</span> Health</th><td>{{#var:Health}}</td></tr>
| |
| <tr><th><span class="icon">[[File:BuildingPowerIcon.png]]</span> Power Cost</th><td>{{#var:PowerCost}}</td></tr>
| |
| <tr><th><span class="icon">[[File:BuildingInventoryIcon.png]]</span> Inventory Slots</th><td>{{#var:StorageSlots}}</td></tr>
| |
| <tr><th><span class="icon">[[File:BuildingCapacityIcon.png]]</span> Capacity</th><td>{{#var:StorageCapacity}}</td></tr>
| |
| <tr><th><span class="icon">[[File:BuildingRecipeIcon.png]]</span> Recipe</th><td>{{#invoke:DataTableParserV2|iconize|{{#var:RecipeToBuild}}}}</td></tr>
| |
| <tr><th><span class="icon">[[File:BuildingPlacedWithIcon.png]]</span> Placed With</th><td>{{#invoke:DataTableParserV2|iconize|{{#var:PlacedWith}}}}</td></tr>
| |
| </table>
| |
| </div> | | </div> |
| </div> | | </div> |
| | |
| | <!-- Building stats --> |
| | <table class="dune-table"> |
| | <tbody> |
| | <tr><th><span class="card-icon">⚙️</span> Building Type</th><td>{{#var:BuildingType}}</td></tr> |
| | <tr><th><span class="card-icon">❤️</span> Health</th><td>{{#var:Health}}</td></tr> |
| | <tr><th><span class="card-icon">⚡</span> Power Cost</th><td>{{#var:PowerCost}}</td></tr> |
| | <tr><th><span class="card-icon">📦</span> Inventory Slots</th><td>{{#var:StorageSlots}}</td></tr> |
| | <tr><th><span class="card-icon">📊</span> Capacity</th><td>{{#var:StorageCapacity}}</td></tr> |
| | <tr><th><span class="card-icon">🧰</span> Recipe</th><td>{{#invoke:DataTableParserV2|iconize|{{#var:RecipeToBuild}}}}</td></tr> |
| | <tr><th><span class="card-icon">🔧</span> Placed With</th><td>{{#invoke:DataTableParserV2|iconize|{{#var:PlacedWith}}}}</td></tr> |
| | </tbody> |
| | </table> |
| </div> | | </div> |
| </div> | | </div> |
| </div>
| | |
| | | <!-- Column 2: Refining Recipes + Related Buildings --> |
| <!-- Middle Column -->
| | <div class="col-span-4"> |
| <div class="responsive-col col2">
| | <!-- Refining Recipes Card --> |
| <div class="skin-pivot" style="margin-bottom:20px;">
| | <div class="ui-card" style="margin-bottom:20px;"> |
| <div class="dune-card"> | | <div class="card-header"> |
| <div class="dune-card-decoration"></div>
| | <div class="card-label">CRAFTING</div> |
| <div class="dune-card-inner"> | | <h3 class="card-title"> |
| <div class="dune-card-label">CRAFTING</div> | | <span class="card-icon">⚒️</span> Refining Recipes |
| <div class="dune-card-title"><span class="icon">⚛</span> Refining Recipes</div> | | </h3> |
| <div class="dune-card-description">Below is a list of possible outputs, required inputs, and the time to refine.</div>
| | </div> |
| <div class="dune-card-infobox-left"> | | <div class="card-content"> |
| {{#get_external_data: | | <div class="description-box"> |
| source=externaldb
| | Below is a list of possible outputs, required inputs, and the time to refine. |
| |from=data_refining_recipes
| | </div> |
| |data=Output=name,Time=time_to_smelt,Recipe=recipe_to_smelt,Refiner=refiner_needed
| | |
| |cache=yes
| | <table class="dune-table"> |
| |where=refiner_needed='Small Ore Refinery'
| | <thead> |
| }}
| | <tr> |
| <div style="overflow-x:auto;">
| | <th>Output</th> |
| <table class="infobox-dune-standard-table" style="width:100%; table-layout:fixed;"> | | <th>Recipe</th> |
| | <th>Craft Time</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | {{#get_external_data: |
| | source=externaldb |
| | |from=data_refining_recipes |
| | |data=Output=name,Time=time_to_smelt,Recipe=recipe_to_smelt,Refiner=refiner_needed |
| | |cache=yes |
| | |where=refiner_needed='Small Ore Refinery' |
| | }} |
| | {{#for_external_table:| |
| <tr> | | <tr> |
| <th style="text-align:left; width:30%;">Output</th> | | <td>{{#invoke:DataTableParserV2|iconize|1={{{Output}}}}}</td> |
| <th style="text-align:left; width:50%;">Recipe</th> | | <td>{{#invoke:DataTableParserV2|formatRecipeList|1={{{Recipe}}}}}</td> |
| <th style="text-align:left; width:20%;">Craft Time</th> | | <td>{{{Time}}}</td> |
| </tr> | | </tr> |
| {{#for_external_table:|
| | }} |
| <tr>
| | </tbody> |
| <td style="text-align:left;">{{#invoke:DataTableParserV2|iconize|1={{{Output}}}}}</td>
| | </table> |
| <td style="text-align:left;">{{#invoke:DataTableParserV2|formatRecipeList|1={{{Recipe}}}}}</td>
| | </div> |
| <td style="text-align:left;">{{{Time}}}</td>
| | </div> |
| </tr>
| | |
| }}
| | <!-- Related Buildings Card (Moved to middle column) --> |
| </table>
| | <div class="ui-card"> |
| </div>
| | <div class="card-header"> |
| | <div class="card-label">RELATED BUILDINGS</div> |
| | <h3 class="card-title"> |
| | <span class="card-icon">🏗️</span> Other {{#var:Category3}} |
| | </h3> |
| | </div> |
| | <div class="card-content"> |
| | <div class="description-box"> |
| | Explore similar building types to expand your base capabilities. |
| </div> | | </div> |
| | |
| | <table class="dune-table"> |
| | <thead> |
| | <tr> |
| | <th>Name</th> |
| | <th>Tier</th> |
| | <th>Description</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | {{#get_external_data: |
| | source=externaldb |
| | |from=data_buildings |
| | |data=Name=name,BuildingType=building_type,Category3=category_3 |
| | |cache=yes |
| | |where=category_3='{{#var:Category3}}' |
| | }} |
| | {{#for_external_table:| |
| | <tr> |
| | <td>{{{Name}}}</td> |
| | <td>{{{BuildingType}}}</td> |
| | <td>{{{Category3}}}</td> |
| | </tr> |
| | }} |
| | </tbody> |
| | </table> |
| </div> | | </div> |
| </div> | | </div> |
| </div> | | </div> |
| | | |
| <div class="skin-pivot" style="margin-bottom:20px;"> | | <!-- Column 3: Building Guide + Additional Notes --> |
| <div class="dune-card"> | | <div class="col-span-4"> |
| <div class="dune-card-decoration"></div>
| | <!-- Building Guide Video Card --> |
| <div class="dune-card-inner"> | | <div class="ui-card" style="margin-bottom:20px;"> |
| <div class="dune-card-label">ADDITIONAL INFO</div> | | <div class="card-header"> |
| <div class="dune-card-title"><span class="icon">≡</span> Notes</div> | | <div class="card-label">VIDEO TUTORIALS</div> |
| <div class="dune-card-description">{{#invoke:DataTableParserV2|iconize|{{#var:AdditionalNotes}}}}</div> | | <h3 class="card-title"> |
| | <span class="card-icon">▶️</span> Building Guide |
| | </h3> |
| </div> | | </div> |
| </div>
| | <div class="card-content"> |
| </div>
| | <div class="video-container"> |
| </div>
| | {{#if:{{{YoutubeEmbed|}}} |
| | |
| <!-- Right Column -->
| |
| <div class="responsive-col col3">
| |
| <div class="skin-pivot" style="margin-bottom:20px;">
| |
| <div class="dune-card">
| |
| <div class="dune-card-decoration"></div>
| |
| <div class="dune-card-inner"> | |
| <div class="dune-card-label">VIDEO TUTORIALS</div> | |
| <div class="dune-card-title"><span class="icon">▶</span> Building Guide</div>
| |
| <div class="dune-card-video" style="border:2px solid #e2d3ae;border-radius:4px;padding:2px;background-color:#262626;"> {{#if:{{{YoutubeEmbed|}}}
| |
| | {{{YoutubeEmbed}}} | | | {{{YoutubeEmbed}}} |
| | <youtube>r8lxVDqoHLQ</youtube>}} | | | <youtube>r8lxVDqoHLQ</youtube>}} |
| Line 130: |
Line 184: |
| </div> | | </div> |
| </div> | | </div> |
| </div>
| | |
| | | <!-- Additional Notes Card (Moved to right column) --> |
| <div class="skin-pivot">
| | <div class="ui-card"> |
| <div class="dune-card"> | | <div class="card-header"> |
| <div class="dune-card-decoration"></div> | | <div class="card-label">ADDITIONAL INFO</div> |
| <div class="dune-card-inner">
| | <h3 class="card-title"> |
| <div class="dune-card-label">RELATED BUILDINGS</div> | | <span class="card-icon">≡</span> Notes |
| <div class="dune-card-title"><span class="icon">🏗</span> Other {{#var:Category3}}</div> | | </h3> |
| <div class="dune-card-description">Explore similar building types to expand your base capabilities.</div>
| | </div> |
| <div class="dune-card-infobox"> | | <div class="card-content"> |
| {{#get_external_data: | | <div class="description-box"> |
| source=externaldb
| | {{#invoke:DataTableParserV2|iconize|{{#var:AdditionalNotes}}}} |
| |from=data_buildings
| |
| |data=Name=name,BuildingType=building_type,Category3=category_3
| |
| |cache=yes
| |
| |where=category_3='{{#var:Category3}}'
| |
| }}
| |
| <table class="infobox-dune-standard-table" style="width:100%">
| |
| <tr>
| |
| <th style="text-align:left;">Name</th>
| |
| <th style="text-align:left;">Tier</th>
| |
| <th style="text-align:left;">Description</th>
| |
| </tr>
| |
| {{#for_external_table:|
| |
| <tr>
| |
| <td style="text-align:left;">{{{Name}}}</td>
| |
| <td style="text-align:left;">{{{BuildingType}}}</td>
| |
| <td style="text-align:left;">{{{Category3}}}</td>
| |
| </tr>
| |
| }}
| |
| </table>
| |
| </div> | | </div> |
| </div> | | </div> |