Add class adancement

assets/icons/advancement.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <!-- Background circle -->
+  <circle cx="50" cy="50" r="48" fill="#f0f0f0" stroke="#333" stroke-width="2" />
+
+  <!-- Star for achievement/advancement -->
+  <path d="M 50 20 L 55 38 L 74 38 L 59 49 L 64 67 L 50 56 L 36 67 L 41 49 L 26 38 L 45 38 Z"
+    fill="#ffd700" stroke="#333" stroke-width="1.5" />
+
+  <!-- Upward arrow for progression -->
+  <path d="M 50 75 L 50 85" stroke="#333" stroke-width="3" stroke-linecap="round" />
+  <path d="M 45 78 L 50 73 L 55 78" fill="none" stroke="#333" stroke-width="3"
+    stroke-linecap="round" stroke-linejoin="round" />
+
+  <!-- Small accent dots for decoration -->
+  <circle cx="20" cy="30" r="2" fill="#666" />
+  <circle cx="80" cy="30" r="2" fill="#666" />
+  <circle cx="20" cy="70" r="2" fill="#666" />
+  <circle cx="80" cy="70" r="2" fill="#666" />
+</svg>

css/fvtt-prism-rpg.css

@@ -3227,6 +3227,118 @@ i.prismrpg {
 .prismrpg .class-content label {
   flex: 10%;
 }
+.prismrpg .class-content .advancement-level {
+  margin-bottom: 1.5rem;
+  padding: 0.5rem;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+.prismrpg .class-content .advancement-level h3 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 0.5rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+.prismrpg .class-content .advancement-level h3 .level-title {
+  color: #000000;
+  font-weight: bold;
+  font-size: 80%;
+}
+.prismrpg .class-content .advancement-level h3 .add-advancement {
+  padding: 0.25rem 0.5rem;
+  background: var(--color-control-bg);
+  border: 1px solid var(--color-border-dark);
+  border-radius: 3px;
+  cursor: pointer;
+}
+.prismrpg .class-content .advancement-level h3 .add-advancement:hover {
+  background: var(--color-control-bg-hover);
+}
+.prismrpg .class-content .advancement-level h3 .add-advancement i {
+  margin: 0;
+}
+.prismrpg .class-content .advancement-level .empty-advancements {
+  font-style: italic;
+  color: rgba(0, 0, 0, 0.5);
+  margin: 0.5rem 0;
+}
+.prismrpg .class-content .advancement-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.prismrpg .class-content .advancement-item {
+  padding: 0.75rem;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+.prismrpg .class-content .advancement-item .advancement-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.prismrpg .class-content .advancement-item .advancement-header .advancement-icon {
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.prismrpg .class-content .advancement-item .advancement-header .advancement-icon:hover {
+  border-color: var(--color-border-highlight);
+}
+.prismrpg .class-content .advancement-item .advancement-header input[type="text"] {
+  flex: 1;
+  font-weight: bold;
+}
+.prismrpg .class-content .advancement-item .advancement-header .toggle-advancement-description {
+  padding: 0.25rem 0.5rem;
+  background: var(--color-control-bg);
+  border: 1px solid var(--color-border-dark);
+  border-radius: 3px;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+}
+.prismrpg .class-content .advancement-item .advancement-header .toggle-advancement-description:hover {
+  background: var(--color-control-bg-hover);
+}
+.prismrpg .class-content .advancement-item .advancement-header .toggle-advancement-description i {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.7);
+}
+.prismrpg .class-content .advancement-item .advancement-header .delete-advancement {
+  padding: 0.25rem 0.5rem;
+  background: var(--color-control-bg);
+  border: 1px solid var(--color-border-dark);
+  border-radius: 3px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.prismrpg .class-content .advancement-item .advancement-header .delete-advancement:hover {
+  background: rgba(255, 0, 0, 0.1);
+  border-color: rgba(255, 0, 0, 0.5);
+}
+.prismrpg .class-content .advancement-item .advancement-header .delete-advancement i {
+  margin: 0;
+  color: rgba(255, 0, 0, 0.7);
+}
+.prismrpg .class-content .advancement-item .advancement-description {
+  margin-top: 0.5rem;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
+  max-height: 500px;
+  opacity: 1;
+}
+.prismrpg .class-content .advancement-item .advancement-description.collapsed {
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0;
+}
 .prismrpg .character-path-content {
   font-family: var(--font-primary);
   font-size: calc(var(--font-size-standard) * 1);

lang/en.json

@@ -688,7 +688,13 @@
       "spellcastingTypeMana": "Mana",
       "spellcastingTypeFaith": "Faith",
       "attributeBonuses": "Attribute Bonuses",
-      "classFeatures": "Class Features"
+      "classFeatures": "Class Features",
+      "advancement": "Advancement",
+      "addAdvancement": "Add Advancement",
+      "deleteAdvancement": "Delete Advancement",
+      "advancementName": "Advancement Name",
+      "noAdvancements": "No advancements defined for this level",
+      "toggleDescription": "Toggle Description"
     },
     "CoreSkill": {
       "acrobatics": "Acrobatics",

module/applications/sheets/class-sheet.mjs

@@ -32,6 +32,7 @@ export default class PrismRPGClassSheet extends PrismRPGItemSheet {
   #getTabs() {
     const tabs = {
       details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      advancements: { id: "advancements", group: "primary", label: "PRISMRPG.Label.advancement" },
       description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
     }
     for (const v of Object.values(tabs)) {
@@ -56,6 +57,142 @@ export default class PrismRPGClassSheet extends PrismRPGItemSheet {
       context.enrichedFeatures[key] = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.features[key], { async: true })
     }
 
+    // Enrich all advancement descriptions
+    context.enrichedAdvancements = {}
+    context.advancementsByLevel = []
+
+    for (let i = 1; i <= 10; i++) {
+      const key = `level${i}`
+      const advancements = this.document.system.advancements[key] || []
+      context.enrichedAdvancements[key] = []
+
+      const enrichedAdvancementsList = []
+      for (let j = 0; j < advancements.length; j++) {
+        const enrichedDesc = await foundry.applications.ux.TextEditor.implementation.enrichHTML(advancements[j].description, { async: true })
+        const enrichedAdv = {
+          ...advancements[j],
+          enrichedDescription: enrichedDesc,
+          index: j,
+          levelKey: key
+        }
+        context.enrichedAdvancements[key].push(enrichedAdv)
+        enrichedAdvancementsList.push(enrichedAdv)
+      }
+
+      context.advancementsByLevel.push({
+        level: i,
+        levelKey: key,
+        advancements: enrichedAdvancementsList
+      })
+    }
+
     return context
   }
+
+  /** @override */
+  _onRender(context, options) {
+    super._onRender(context, options)
+
+    // Add advancement button listeners
+    this.element.querySelectorAll(".add-advancement").forEach(btn => {
+      btn.addEventListener("click", this._onAddAdvancement.bind(this))
+    })
+
+    // Delete advancement button listeners
+    this.element.querySelectorAll(".delete-advancement").forEach(btn => {
+      btn.addEventListener("click", this._onDeleteAdvancement.bind(this))
+    })
+
+    // Edit advancement icon listeners
+    this.element.querySelectorAll(".advancement-icon").forEach(img => {
+      img.addEventListener("click", this._onEditAdvancementIcon.bind(this))
+    })
+
+    // Toggle advancement description listeners
+    this.element.querySelectorAll(".toggle-advancement-description").forEach(btn => {
+      btn.addEventListener("click", this._onToggleAdvancementDescription.bind(this))
+    })
+  }
+
+  /**
+   * Handle toggling advancement description visibility
+   * @param {Event} event
+   */
+  _onToggleAdvancementDescription(event) {
+    event.preventDefault()
+    const button = event.currentTarget
+    const item = button.closest(".advancement-item")
+    const description = item.querySelector(".advancement-description")
+    const icon = button.querySelector("i")
+
+    description.classList.toggle("collapsed")
+
+    if (description.classList.contains("collapsed")) {
+      icon.classList.remove("fa-chevron-up")
+      icon.classList.add("fa-chevron-down")
+    } else {
+      icon.classList.remove("fa-chevron-down")
+      icon.classList.add("fa-chevron-up")
+    }
+  }
+
+  /**
+   * Handle adding a new advancement to a level
+   * @param {Event} event
+   */
+  async _onAddAdvancement(event) {
+    event.preventDefault()
+    const level = event.currentTarget.dataset.level
+    const advancements = foundry.utils.deepClone(this.document.system.advancements[level] || [])
+
+    advancements.push({
+      icon: "systems/fvtt-prism-rpg/assets/icons/advancement.svg",
+      name: "",
+      description: ""
+    })
+
+    await this.document.update({
+      [`system.advancements.${level}`]: advancements
+    })
+  }
+
+  /**
+   * Handle deleting an advancement from a level
+   * @param {Event} event
+   */
+  async _onDeleteAdvancement(event) {
+    event.preventDefault()
+    const level = event.currentTarget.dataset.level
+    const index = parseInt(event.currentTarget.dataset.index)
+
+    const advancements = foundry.utils.deepClone(this.document.system.advancements[level] || [])
+    advancements.splice(index, 1)
+
+    await this.document.update({
+      [`system.advancements.${level}`]: advancements
+    })
+  }
+
+  /**
+   * Handle editing an advancement icon
+   * @param {Event} event
+   */
+  async _onEditAdvancementIcon(event) {
+    event.preventDefault()
+    const level = event.currentTarget.dataset.level
+    const index = parseInt(event.currentTarget.dataset.index)
+
+    const fp = new FilePicker({
+      type: "image",
+      current: this.document.system.advancements[level][index].icon,
+      callback: async (path) => {
+        const advancements = foundry.utils.deepClone(this.document.system.advancements[level] || [])
+        advancements[index].icon = path
+        await this.document.update({
+          [`system.advancements.${level}`]: advancements
+        })
+      }
+    })
+    fp.render(true)
+  }
 }

module/models/class.mjs

@@ -68,6 +68,41 @@ export default class PrismRPGClass extends foundry.abstract.TypeDataModel {
       level10: new fields.HTMLField({ initial: "" })
     })
 
+    // Advancements (list of advancements per level with icon, name and description)
+    const advancementSchema = () => new fields.ArrayField(
+      new fields.SchemaField({
+        icon: new fields.StringField({
+          required: true,
+          initial: "",
+          label: "Icon"
+        }),
+        name: new fields.StringField({
+          required: true,
+          initial: "",
+          label: "Name"
+        }),
+        description: new fields.HTMLField({
+          required: true,
+          initial: "",
+          label: "Description"
+        })
+      }),
+      { initial: [] }
+    )
+
+    schema.advancements = new fields.SchemaField({
+      level1: advancementSchema(),
+      level2: advancementSchema(),
+      level3: advancementSchema(),
+      level4: advancementSchema(),
+      level5: advancementSchema(),
+      level6: advancementSchema(),
+      level7: advancementSchema(),
+      level8: advancementSchema(),
+      level9: advancementSchema(),
+      level10: advancementSchema()
+    })
+
     // Proficiencies granted by this class
     schema.weaponProficiencies = new fields.StringField({
       required: true,
@@ -156,4 +191,36 @@ export default class PrismRPGClass extends foundry.abstract.TypeDataModel {
     }
     return features
   }
+
+  /**
+   * Get the current level's advancements
+   */
+  get currentLevelAdvancements() {
+    return this.advancements[`level${this.level}`] || []
+  }
+
+  /**
+   * Get all advancements up to current level
+   */
+  get allAdvancementsUpToLevel() {
+    const advancements = []
+    for (let i = 1; i <= this.level; i++) {
+      const levelAdvancements = this.advancements[`level${i}`]
+      if (levelAdvancements && levelAdvancements.length > 0) {
+        advancements.push({
+          level: i,
+          advancements: levelAdvancements
+        })
+      }
+    }
+    return advancements
+  }
+
+  /**
+   * Get advancements for a specific level
+   */
+  getAdvancementsForLevel(level) {
+    if (level < 1 || level > 10) return []
+    return this.advancements[`level${level}`] || []
+  }
 }

styles/class.less

@@ -13,4 +13,139 @@
   label {
     flex: 10%;
   }
+
+  .advancement-level {
+    margin-bottom: 1.5rem;
+    padding: 0.5rem;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+
+    h3 {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0 0 0.5rem 0;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+      .level-title {
+        color: #000000;
+        font-weight: bold;
+        font-size: 80%;
+      }
+
+      .add-advancement {
+        padding: 0.25rem 0.5rem;
+        background: var(--color-control-bg);
+        border: 1px solid var(--color-border-dark);
+        border-radius: 3px;
+        cursor: pointer;
+
+        &:hover {
+          background: var(--color-control-bg-hover);
+        }
+
+        i {
+          margin: 0;
+        }
+      }
+    }
+
+    .empty-advancements {
+      font-style: italic;
+      color: rgba(0, 0, 0, 0.5);
+      margin: 0.5rem 0;
+    }
+  }
+
+  .advancement-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .advancement-item {
+    padding: 0.75rem;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+
+    .advancement-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+
+      .advancement-icon {
+        width: 40px;
+        height: 40px;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 3px;
+        cursor: pointer;
+        flex-shrink: 0;
+
+        &:hover {
+          border-color: var(--color-border-highlight);
+        }
+      }
+
+      input[type="text"] {
+        flex: 1;
+        font-weight: bold;
+      }
+
+      .toggle-advancement-description {
+        padding: 0.25rem 0.5rem;
+        background: var(--color-control-bg);
+        border: 1px solid var(--color-border-dark);
+        border-radius: 3px;
+        cursor: pointer;
+        flex-shrink: 0;
+        margin-left: 0.25rem;
+
+        &:hover {
+          background: var(--color-control-bg-hover);
+        }
+
+        i {
+          margin: 0;
+          color: rgba(0, 0, 0, 0.7);
+        }
+      }
+
+      .delete-advancement {
+        padding: 0.25rem 0.5rem;
+        background: var(--color-control-bg);
+        border: 1px solid var(--color-border-dark);
+        border-radius: 3px;
+        cursor: pointer;
+        flex-shrink: 0;
+
+        &:hover {
+          background: rgba(255, 0, 0, 0.1);
+          border-color: rgba(255, 0, 0, 0.5);
+        }
+
+        i {
+          margin: 0;
+          color: rgba(255, 0, 0, 0.7);
+        }
+      }
+    }
+
+    .advancement-description {
+      margin-top: 0.5rem;
+      overflow: hidden;
+      transition:
+        max-height 0.3s ease-out,
+        opacity 0.3s ease-out;
+      max-height: 500px;
+      opacity: 1;
+
+      &.collapsed {
+        max-height: 0;
+        opacity: 0;
+        margin-top: 0;
+      }
+    }
+  }
 }

system.json

@@ -6,7 +6,7 @@
   "download": "#{DOWNLOAD}#",
   "url": "#{URL}#",
   "license": "LICENSE",
-  "version": "13.0.0",
+  "version": "13.0.1",
   "authors": [
     {
       "name": "Uberwald",

templates/class.hbs

@@ -7,6 +7,7 @@
   {{! Navigation des onglets }}
   <nav class="sheet-tabs tabs" data-group="primary">
     <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize "PRISMRPG.Label.details"}}</a>
+    <a class="item {{tabs.advancements.cssClass}}" data-tab="advancements">{{localize "PRISMRPG.Label.advancement"}}</a>
     <a class="item {{tabs.description.cssClass}}" data-tab="description">{{localize "PRISMRPG.Label.description"}}</a>
   </nav>
 
@@ -73,6 +74,59 @@
   </fieldset>
   </div>
 
+  {{! Onglet Advancements }}
+  <div class="tab {{tabs.advancements.cssClass}}" data-group="primary" data-tab="advancements">
+    <fieldset>
+      <legend>{{localize "PRISMRPG.Label.advancement"}}</legend>
+
+      {{#each advancementsByLevel as |levelData|}}
+        <div class="advancement-level">
+          <h3>
+            <span class="level-title">{{localize "PRISMRPG.Label.level"}} {{levelData.level}}</span>
+            <button type="button" class="add-advancement" data-level="{{levelData.levelKey}}" data-tooltip="{{localize 'PRISMRPG.Label.addAdvancement'}}">
+              <i class="fas fa-plus"></i>
+            </button>
+          </h3>
+
+          {{#if levelData.advancements.length}}
+            <div class="advancement-list">
+              {{#each levelData.advancements as |advancement|}}
+                <div class="advancement-item">
+                  <div class="advancement-header">
+                    <img class="advancement-icon" src="{{advancement.icon}}" data-level="{{advancement.levelKey}}" data-index="{{advancement.index}}" />
+                    {{formInput
+                      ../../systemFields.advancements.fields.level1.element.fields.name
+                      value=advancement.name
+                      name=(concat "system.advancements." advancement.levelKey "." advancement.index ".name")
+                      placeholder=(localize "PRISMRPG.Label.advancementName")
+                    }}
+                    <button type="button" class="toggle-advancement-description" data-tooltip="{{localize 'PRISMRPG.Label.toggleDescription'}}">
+                      <i class="fas fa-chevron-down"></i>
+                    </button>
+                    <button type="button" class="delete-advancement" data-level="{{advancement.levelKey}}" data-index="{{advancement.index}}" data-tooltip="{{localize 'PRISMRPG.Label.deleteAdvancement'}}">
+                      <i class="fas fa-trash"></i>
+                    </button>
+                  </div>
+                  <div class="advancement-description collapsed">
+                    {{formInput
+                      ../../systemFields.advancements.fields.level1.element.fields.description
+                      enriched=advancement.enrichedDescription
+                      value=advancement.description
+                      name=(concat "system.advancements." advancement.levelKey "." advancement.index ".description")
+                      toggled=true
+                    }}
+                  </div>
+                </div>
+              {{/each}}
+            </div>
+          {{else}}
+            <p class="empty-advancements">{{localize "PRISMRPG.Label.noAdvancements"}}</p>
+          {{/if}}
+        </div>
+      {{/each}}
+    </fieldset>
+  </div>
+
   {{! Onglet Description }}
   <div class="tab {{tabs.description.cssClass}}" data-group="primary" data-tab="description">
     <fieldset>