Actions

Template

JourneyPage: Difference between revisions

From Dune Awakening DB

VisualWikitext
Created page with "<templatestyles src="Template:JourneysPage/styles.css" /> <div class="journeys-page-container"> <div class="journeys-main-content"> <div class="journeys-tabs"> <span class="journeys-tab">{{{tab_z_name|Z}}}</span> <span class="journeys-tab">{{{tab_c_name|C}}}</span> <span class="journeys-tab active">{{{tab_story_name|STORY}}}</span> </div> {{#get_external_data:source=externaldb |from=data_journ..."
 
mNo edit summary
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
<templatestyles src="Template:JourneysPage/styles.css" />
<includeonly><templatestyles src="Template:JourneyPage/styles.css" />__NOTOC__
<!-- Main Journey Container -->
<div class="journey-main-container">
  <!-- Journey Categories (Left Column - 60%) -->
  <div class="journey-categories">
    <!-- A New Beginning -->
    <div class="journey-section" data-section="A New Beginning">
        <div class="journey-section-header" style="padding-top:6px;">
            <h3 class="section-title">A New Beginning</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='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>


<div class="journeys-page-container">
    <!-- Vermillius Gap -->
    <div class="journey-section" data-section="Vermillius Gap">
        <div class="journey-section-header">
            <h3 class="section-title">Vermillius Gap</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='Vermillius Gap' 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="Vermillius Gap" 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 class="journeys-main-content">
    <!-- Jabal Eifrit & Hagga Rift -->
         <div class="journeys-tabs">
     <div class="journey-section" data-section="Jabal Eifrit & Hagga Rift">
             <span class="journeys-tab">{{{tab_z_name|Z}}}</span>
         <div class="journey-section-header">
            <span class="journeys-tab">{{{tab_c_name|C}}}</span>
             <h3 class="section-title">Jabal Eifrit & Hagga Rift</h3>
            <span class="journeys-tab active">{{{tab_story_name|STORY}}}</span>
        </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>
    </div>


         {{#get_external_data:source=externaldb
    <!-- Find The Fremen -->
            |from=data_journeys
    <div class="journey-section" data-section="Find The Fremen">
            |data=JourneyID=id,Slug=slug,Name=name,ImageSlug=image_file_slug |where=journey_category='STORY' |order by=tier, id
         <div class="journey-section-header">
            |cache=yes
            <h3 class="section-title">Find The Fremen</h3>
        }}
        </div>
        <div class="journey-group">
        <div class="journey-grid">
            <div class="journey-card-grid">
{{#get_external_data: source=externaldb
            {{#for_external_table:|
|from=data_journeys
                {{#vardefine:cardImage|{{#if:{{{ImageSlug|}}}|File:Journey_{{{ImageSlug}}}_Card.png|File:Journey_Placeholder_Card.png}} }} <div class="journey-card {{#ifeq: {{{Slug}}} | {{{selected_journey_slug|}}} | active-journey }}">
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon
                    <div class="journey-card-border-outer">
|cache=yes
                        <div class="journey-card-border-inner">
|where=journey_group='Find The Fremen' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
                            <div class="journey-card-image-wrapper">
|order by=tier, id
                                <img src="{{#var:cardImage}}" alt="{{{Name}}}">
}}
                            </div>
{{#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-title-container">
    <div class="journey-card-inner">
                                <span class="journey-card-title-text">{{{Name}}}</span>
        <div class="journey-name">{{{Name}}}</div>
                            </div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
                        </div>
    </div>
                    </div>
    {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
                </div>
</div>
            }}
}}
            {{! <div class="journey-card locked empty"></div> }}
            {{! <div class="journey-card locked empty"></div> }}
            </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>


         <div class="journey-section-label">
    <!-- Factions -->
             {{{section_vermillius_name|VERMILLIUS GAP}}}
    <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>


        {{#get_external_data:source=externaldb
  <!-- Journey Details Panel (Right Column - 40%) -->
            |from=data_journeys
  <div class="journey-details-panel" id="journeyDetailsPanel">
            |data=JourneyID=id,Slug=slug,Name=name,ImageSlug=image_file_slug
    <div class="journey-details-header">
            |where=journey_category='Vermillius Gap' |order by=tier, id
      <div class="journey-tier-badge"><span class="tier-number">1</span></div>
            |cache=yes
      <h2 class="journey-title">SELECT A JOURNEY</h2><span class="completion-status">0% COMPLETE</span>
        }}
    </div><div class="journey-description">Click on any journey card to view objectives and track your progress.</div>
        <div class="journey-group">
<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-card-grid">
<div class="journey-objectives">
            {{#for_external_table:|
      <div class="objectives-header">OBJECTIVES</div>
                {{#vardefine:cardImage|{{#if:{{{ImageSlug|}}}|File:Journey_{{{ImageSlug}}}_Card.png|File:Journey_Placeholder_Card.png}} }}
      <div class="objectives-list">
                <div class="journey-card {{#ifeq: {{{Slug}}} | {{{selected_journey_slug|}}} | active-journey }}">
        <div class="objective-item">
                    <div class="journey-card-border-outer">
          <div class="objective-header">
                        <div class="journey-card-border-inner">
            <div class="objective-title" style="color: var(--color-secondary);">Select a journey to view objectives</div>
                            <div class="journey-card-image-wrapper">
          </div>
                                <img src="{{#var:cardImage}}" alt="{{{Name}}}">
                            </div>
                            <div class="journey-card-title-container">
                                <span class="journey-card-title-text">{{{Name}}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            }}
            </div>
         </div>
         </div>
      </div>
    </div>
    <div class="journey-actions">
      <button class="action-button view-items" disabled>
        <span class="button-icon">📋</span>
        View Item Prep List
      </button>
      <button class="action-button view-guide" disabled>
        <span class="button-icon">▶️</span>
        View Guide
      </button>
     </div>
     </div>
  </div>
</div>


    <div class="journeys-sidebar">
<!-- Popup container will be added by JavaScript -->
        {{#get_external_data:source=externaldb
</includeonly>
            |from=data_journeys
            |data=SelectedJourneyID=id,SelectedName=name,SelectedDescription=description,SelectedRewardJSON=reward_json
            |where=slug='{{{selected_journey_slug}}}' |limit=1
            |cache=yes
        }}
        {{#for_external_table:| {{#vardefine:journeyName|{{{SelectedName}}}}}
            {{#vardefine:journeyDesc|{{{SelectedDescription}}}}}
            {{#vardefine:journeyIDForObjectives|{{{SelectedJourneyID}}}}}
            {{#vardefine:rewardJson|{{{SelectedRewardJSON}}}}}


            <div class="journey-details-card">
<noinclude>
                <div class="journey-details-content">
{{Documentation}}
                    <div class="journey-details-header">
== Journey Page Template ==
                        <h2 class="selected-journey-title">{{#var:journeyName}}</h2>
                        <div class="selected-journey-progress">
                            <span class="progress-text">{{{progress_text_override|0% COMPLETE}}}</span>
                            <div class="progress-bar-container">
                                <div class="progress-bar-fill" style="width: {{{progress_percent_override|0}}}%;"></div>
                            </div>
                        </div>
                    </div>


                    <div class="selected-journey-description">
This template displays the journey tracking system for Dune Awakening.
                        <p>{{#invoke:Plaintext|parse|{{#var:journeyDesc}}}}</p> </div>


                    <div class="selected-journey-rewards">
=== Usage ===
                        <h3 class="details-section-title">REWARD</h3>
Simply add <code><nowiki>{{JourneyPage}}</nowiki></code> to any page where you want the journey tracker to appear.
                        <p class="reward-text">
                            {{#if: {{#var:rewardJson}} |
                                XP {{#invoke:StringJson|get|{{#var:rewardJson}}|xp|notfound=0}}
                                | No reward data.
                            }}
                        </p>
                    </div>


                    <div class="selected-journey-objectives">
=== Features ===
                        <h3 class="details-section-title">OBJECTIVES</h3>
* Displays all journeys grouped by category
                        <ul>
* Interactive journey cards that show details when clicked
                        {{#get_external_data:source=externaldb
* Progress tracking with checkboxes
                            |from=data_journey_objectives
* Material prep list for each journey
                            |data=ObjectiveID=id,ObjectiveTitle=title,ObjectiveGoalCount=goal_count
* Video guide links (when available)
                            |where=journey_id={{#var:journeyIDForObjectives}}
* Responsive design for different screen sizes
                            |order by=seq
                            |cache=yes
                        }}
                        {{#for_external_table:|
                            {{#vardefine:objTitle|{{{ObjectiveTitle}}}}}
                            {{#vardefine:objGoal|{{{ObjectiveGoalCount|1}}}}} {{#vardefine:objID|{{{ObjectiveID}}}}}


                            {{#get_external_data:source=externaldb|from=data_journey_tasks
=== Dependencies ===
                                |data=PartyCompletable=party_completable
* Template:JourneyPage/styles.css - Styling
                                |where=objective_id={{#var:objID}} AND party_completable=1
* MediaWiki:Common.js - JavaScript functionality
                                |limit=1
                                |cache=yes
                            }}
                            {{#vardefine:partyText|{{#for_external_table:|Completable by a party member}}}}


                            <li class="objective-item {{{objective_status_{{{!}}var:objID}|incomplete}}}">
=== Database Tables ===
                                <span class="objective-status-icon"></span>
This template pulls data from:
                                <span class="objective-text">{{#var:objTitle}}</span>
* data_journeys - Main journey information
                                {{#if: {{#var:objGoal}} |
* data_journey_objectives - Objectives for each journey
                                    <span class="objective-meta">
* data_journey_tasks - Tasks within objectives
                                        {{{objective_current_{{{!}}var:objID}|0}}}/{{#var:objGoal}} </span>
* data_journey_task_components - Materials needed for tasks
                                }}
                                {{#if: {{#var:partyText}} |
                                    <span class="objective-subtext">({{#var:partyText}})</span>
                                }}
                            </li>
                        }} </ul>
                    </div>


                    <div class="selected-journey-actions">
[[Category:Dune Templates]]
                        <button class="journey-track-button">
[[Category:Interactive Templates]]
                            <span class="track-button-keybind">T</span> TRACK
</noinclude>
                        </button>
                    </div>
                </div>
            </div>
        }} {{#if:{{#var:journeyName|}}||
            <div class="journey-details-card">
                <div class="journey-details-content">
                    <p>Select a journey to see details, or no journey specified.</p>
                </div>
            </div>
        }}
    </div>
</div>

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"