Actions

Template

JourneyPage: Difference between revisions

From Dune Awakening DB

← Older edit
VisualWikitext
mNo edit summary
mNo edit summary
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly><templatestyles src="Template:JourneyPage/styles.css" />
<includeonly><templatestyles src="Template:JourneyPage/styles.css" />__NOTOC__
<div class="dune-breadcrumb-nav">
  <span id="menuRadialTrigger" class="menu-button-wrapper" style="cursor:pointer;">[[File:MenuButton.png|100px|link=|alt=Menu]]</span><span class="dune-breadcrumb-separator">/</span>[[Main Page|Home]]<span class="dune-breadcrumb-separator">/</span>[[Journeys]]<span class="dune-breadcrumb-separator">/</span><span>Journey Tracker</span>
</div>
 
<!-- Alternative: Let JavaScript build the data structure from HTML data attributes -->
<!-- This avoids complex JSON generation in templates -->
 
<!-- Main Journey Container -->
<!-- Main Journey Container -->
<div class="journey-main-container">
<div class="journey-main-container">
   <!-- Journey Categories (Left Column - 60%) -->
   <!-- Journey Categories (Left Column - 60%) -->
   <div class="journey-categories">
   <div class="journey-categories">
     <!-- Get unique journey groups -->
     <!-- A New Beginning -->
    {{#get_external_data:source=externaldb
    <div class="journey-section" data-section="A New Beginning">
    |from=data_journeys
        <div class="journey-section-header" style="padding-top:6px;">
    |data=Group=journey_group
            <h3 class="section-title">A New Beginning</h3>
    |cache=yes
        </div>
    |group by=journey_group
        <div class="journey-grid">
    |order by=journey_group
{{#get_external_data: source=externaldb
    }}
|from=data_journeys
    {{#for_external_table:|
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon
      <div class="journey-section" data-group="{{{Group}}}">
|cache=yes
|where=journey_group='A New Beginning' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
|order by=tier, id
}}
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="A New Beginning" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
    <div class="journey-card-inner">
        <div class="journey-name">{{{Name}}}</div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
    </div>
    {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
</div>
}}
        </div>
    </div>
 
    <!-- Vermillius Gap -->
    <div class="journey-section" data-section="Vermillius Gap">
         <div class="journey-section-header">
         <div class="journey-section-header">
          <span class="section-icon">{{#invoke:JourneySystem|getGroupIcon|{{{Group}}}}}</span>
            <h3 class="section-title">Vermillius Gap</h3>
          <span class="section-title">{{{Group}}}</span>
         </div>
         </div>
         <div class="journey-grid">
         <div class="journey-grid">
          <!-- Get journeys for this group -->
{{#get_external_data: source=externaldb
          {{#get_external_data:source=externaldb
|from=data_journeys
          |from=data_journeys
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon
          |data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Icon=journey_icon,Category=journey_category,Location=location,Reward=reward_json
|cache=yes
          |cache=yes
|where=journey_group='Vermillius Gap' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
          |where=journey_group='{{{Group}}}'
|order by=tier, id
          |order by=tier, id
}}
          }}
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="Vermillius Gap" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
          {{#for_external_table:|
    <div class="journey-card-inner">
            <div class="journey-card"  
        <div class="journey-name">{{{Name}}}</div>
                data-journey-id="{{{ID}}}"  
        <div class="journey-tier">TIER {{{Tier}}}</div>
                data-group="{{{Group}}}"
    </div>
                data-name="{{{Name}}}"
    {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
                data-description="{{#invoke:JourneySystem|escapeHtml|{{{Description}}}}}"
</div>
                data-tier="{{{Tier}}}"
}}
                data-slug="{{{Slug}}}"
                data-category="{{{Category}}}"
                data-location="{{{Location|}}}"
                data-reward='{{{Reward|}}}'>
              <div class="journey-card-inner">
                <div class="journey-icon">{{#invoke:JourneySystem|getIcon|{{{Icon}}}|{{{Group}}}}}</div>
                <div class="journey-name">{{{Name}}}</div>
                <div class="journey-tier">Tier {{{Tier}}}</div>
              </div>
            </div>
          }}
         </div>
         </div>
      </div>
    </div>
     }}
 
    <!-- Jabal Eifrit & Hagga Rift -->
    <div class="journey-section" data-section="Jabal Eifrit & Hagga Rift">
        <div class="journey-section-header">
            <h3 class="section-title">Jabal Eifrit & Hagga Rift</h3>
        </div>
        <div class="journey-grid">
{{#get_external_data: source=externaldb
|from=data_journeys
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon
|cache=yes
|where=journey_group='Jabal Eifrit & Hagga Rift' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
|order by=tier, id
}}
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="Jabal Eifrit & Hagga Rift" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
    <div class="journey-card-inner">
        <div class="journey-name">{{{Name}}}</div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
    </div>
     {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
</div>
}}
        </div>
    </div>
 
    <!-- Find The Fremen -->
    <div class="journey-section" data-section="Find The Fremen">
        <div class="journey-section-header">
            <h3 class="section-title">Find The Fremen</h3>
        </div>
        <div class="journey-grid">
{{#get_external_data: source=externaldb
|from=data_journeys
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon
|cache=yes
|where=journey_group='Find The Fremen' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
|order by=tier, id
}}
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="Find The Fremen" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
    <div class="journey-card-inner">
        <div class="journey-name">{{{Name}}}</div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
    </div>
    {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
</div>
}}
        </div>
    </div>
 
    <!-- Miscellaneous -->
    <div class="journey-section" data-section="Miscellaneous">
        <div class="journey-section-header">
            <h3 class="section-title">Miscellaneous</h3>
        </div>
        <div class="journey-grid">
{{#get_external_data: source=externaldb
|from=data_journeys
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon
|cache=yes
|where=journey_group='Miscellaneous' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
|order by=tier, id
}}
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="Miscellaneous" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
    <div class="journey-card-inner">
        <div class="journey-name">{{{Name}}}</div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
    </div>
    {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
</div>
}}
        </div>
    </div>
 
    <!-- Factions -->
    <div class="journey-section" data-section="Factions">
        <div class="journey-section-header">
            <h3 class="section-title">Factions</h3>
        </div>
        <div class="journey-grid">
{{#get_external_data: source=externaldb
|from=data_journeys
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon
|cache=yes
|where=journey_group='Factions' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
|order by=tier, id
}}
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="Factions" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
    <div class="journey-card-inner">
        <div class="journey-name">{{{Name}}}</div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
    </div>
    {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
</div>
}}
        </div>
    </div>
   </div>
   </div>


Line 60: Line 152:
   <div class="journey-details-panel" id="journeyDetailsPanel">
   <div class="journey-details-panel" id="journeyDetailsPanel">
     <div class="journey-details-header">
     <div class="journey-details-header">
       <div class="journey-tier-badge">
       <div class="journey-tier-badge"><span class="tier-number">1</span></div>
        <span class="tier-number">1</span>
       <h2 class="journey-title">SELECT A JOURNEY</h2><span class="completion-status">0% COMPLETE</span>
      </div>
     </div><div class="journey-description">Click on any journey card to view objectives and track your progress.</div>
       <h2 class="journey-title">SELECT A JOURNEY</h2>
<div class="journey-rewards"><div class="rewards-header">REWARD</div><div class="rewards-content"><span class="xp-icon">XP</span><span class="xp-amount">--</span></div></div>
      <span class="completion-status">0% COMPLETE</span>
<div class="journey-objectives">
     </div>
   
    <div class="journey-description">Click on any journey card to view objectives and track your progress.</div>
   
    <div class="journey-rewards">
      <div class="rewards-header">REWARD</div>
      <div class="rewards-content">
        <span class="xp-icon">XP</span>
        <span class="xp-amount">--</span>
      </div>
    </div>
   
    <div class="journey-objectives">
       <div class="objectives-header">OBJECTIVES</div>
       <div class="objectives-header">OBJECTIVES</div>
       <div class="objectives-list">
       <div class="objectives-list">
Line 101: Line 180:
</div>
</div>


<!-- Initialize journey data from HTML attributes -->
<!-- Popup container will be added by JavaScript -->
<script>
</includeonly>
// Build journey data from HTML data attributes
 
(function() {
<noinclude>
    var journeyData = {};
    document.querySelectorAll('.journey-card').forEach(function(card) {
        var group = card.getAttribute('data-group');
        var journey = {
            id: parseInt(card.getAttribute('data-journey-id')),
            name: card.getAttribute('data-name'),
            slug: card.getAttribute('data-slug'),
            description: card.getAttribute('data-description'),
            tier: parseInt(card.getAttribute('data-tier')),
            category: card.getAttribute('data-category'),
            location: card.getAttribute('data-location'),
            group: group,
            reward_json: {}
        };
       
        // Parse reward JSON
        var rewardStr = card.getAttribute('data-reward');
        if (rewardStr) {
            try {
                journey.reward_json = JSON.parse(rewardStr);
            } catch(e) {}
        }
       
        if (!journeyData[group]) {
            journeyData[group] = [];
        }
        journeyData[group].push(journey);
    });
   
    // Store in global variable for JavaScript to use
    window.journeyDataFromHTML = journeyData;
})();
</script>
</includeonly><noinclude>
{{Documentation}}
{{Documentation}}
== Journey Page Template ==
This template displays the journey tracking system for Dune Awakening.
=== Usage ===
Simply add <code><nowiki>{{JourneyPage}}</nowiki></code> to any page where you want the journey tracker to appear.
=== Features ===
* Displays all journeys grouped by category
* Interactive journey cards that show details when clicked
* Progress tracking with checkboxes
* Material prep list for each journey
* Video guide links (when available)
* Responsive design for different screen sizes
=== Dependencies ===
* Template:JourneyPage/styles.css - Styling
* MediaWiki:Common.js - JavaScript functionality
=== Database Tables ===
This template pulls data from:
* data_journeys - Main journey information
* data_journey_objectives - Objectives for each journey
* data_journey_tasks - Tasks within objectives
* data_journey_task_components - Materials needed for tasks
[[Category:Dune Templates]]
[[Category:Interactive Templates]]
</noinclude>
</noinclude>

Latest revision as of 15:37, 31 May 2025


Template:Documentation

Journey Page Template

This template displays the journey tracking system for Dune Awakening.

Usage

Simply add {{JourneyPage}} to any page where you want the journey tracker to appear.

Features

  • Displays all journeys grouped by category
  • Interactive journey cards that show details when clicked
  • Progress tracking with checkboxes
  • Material prep list for each journey
  • Video guide links (when available)
  • Responsive design for different screen sizes

Dependencies

  • Template:JourneyPage/styles.css - Styling
  • MediaWiki:Common.js - JavaScript functionality

Database Tables

This template pulls data from:

  • data_journeys - Main journey information
  • data_journey_objectives - Objectives for each journey
  • data_journey_tasks - Tasks within objectives
  • data_journey_task_components - Materials needed for tasks
Retrieved from "https://dunedb.com/index.php?title=Template:JourneyPage&oldid=806"