Add miracle class and upgrade skill

css/fvtt-lethal-fantasy.css

@@ -1313,6 +1313,83 @@ i.lethalfantasy {
 .lethalfantasy .shield-content label {
   flex: 10%;
 }
+.lethalfantasy .miracle-content {
+  font-family: var(--font-primary);
+  font-size: calc(var(--font-size-standard) * 1);
+  color: var(--color-dark-1);
+  background-image: var(--background-image-base);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.lethalfantasy .miracle-content input:disabled,
+.lethalfantasy .miracle-content select:disabled {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-color: transparent;
+  color: var(--color-dark-3);
+}
+.lethalfantasy .miracle-content input,
+.lethalfantasy .miracle-content select {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-color: var(--color-dark-6);
+  color: var(--color-dark-2);
+}
+.lethalfantasy .miracle-content input[name="name"] {
+  height: 50px;
+  margin-right: 10px;
+  font-family: var(--font-secondary);
+  font-size: calc(var(--font-size-standard) * 1);
+  font-weight: bold;
+  border: none;
+}
+.lethalfantasy .miracle-content fieldset {
+  margin-bottom: 5px;
+  border-radius: 5px;
+}
+.lethalfantasy .miracle-content .form-fields input,
+.lethalfantasy .miracle-content .form-fields select {
+  text-align: center;
+  font-size: calc(var(--font-size-standard) * 1);
+}
+.lethalfantasy .miracle-content .form-fields select {
+  font-family: var(--font-secondary);
+  font-size: calc(var(--font-size-standard) * 1);
+}
+.lethalfantasy .miracle-content legend {
+  font-family: var(--font-secondary);
+  font-size: calc(var(--font-size-standard) * 1.2);
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+.lethalfantasy .miracle-content .form-fields {
+  padding-top: 5px;
+}
+.lethalfantasy .miracle-content label {
+  font-family: var(--font-secondary);
+  font-size: calc(var(--font-size-standard) * 1);
+  flex: 50%;
+}
+.lethalfantasy .miracle-content .align-top {
+  align-self: flex-start;
+  padding: 0.1rem;
+  margin-right: 0.2rem;
+  /*border-color: black;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 2%;*/
+}
+.lethalfantasy .miracle-content .shift-right {
+  margin-left: 2rem;
+}
+.lethalfantasy .miracle-content .header {
+  display: flex;
+}
+.lethalfantasy .miracle-content .header img {
+  width: 50px;
+  height: 50px;
+}
+.lethalfantasy .miracle-content label {
+  flex: 10%;
+}
 .application.dialog.lethalfantasy {
   color: var(--color-dark-1);
 }

module/documents/item.mjs

@@ -6,7 +6,8 @@ export const defaultItemImg = {
   gift: "systems/fvtt-lethal-fantasy/assets/icons/icon_gift.webp",
   invulnerability: "systems/fvtt-lethal-fantasy/assets/icons/icon_invulnerability.webp",
   shield: "systems/fvtt-lethal-fantasy/assets/icons/icon_shield.webp",
-  spell: "systems/fvtt-lethal-fantasy/assets/icons/icon_spell.webp"
+  spell: "systems/fvtt-lethal-fantasy/assets/icons/icon_spell.webp",
+  miracle: "systems/fvtt-lethal-fantasy/assets/icons/icon_miracle.webp"  
 }
 
 export default class LethalFantasyItem extends Item {

system.json

@@ -40,7 +40,8 @@
       "armor": { "htmlFields": ["description"] },
       "shield": { "htmlFields": ["description"] },
       "spell": { "htmlFields": ["description"] },
-      "equipment": { "htmlFields": ["description"] }
+      "equipment": { "htmlFields": ["description"] },
+      "miracle": { "htmlFields": ["miracle"] }
     }
   },
   "grid": {

templates/miracle.hbs

@@ -15,8 +15,8 @@
     {{formField systemFields.components.fields.religious value=system.components.religious}}
   </div>
 
-  {{formField systemFields.prayerTime value=system.castingTime}}
+  {{formField systemFields.prayerTime value=system.prayerTime}}
-  {{formField systemFields.miracleRange value=system.spellRange}}
+  {{formField systemFields.miracleRange value=system.miracleRange}}
   {{formField systemFields.areaAffected value=system.areaAffected}}
   {{formField systemFields.duration value=system.duration}}
   {{formField systemFields.savingThrow value=system.savingThrow}}