add front update for action points

media/script.js

@@ -28,7 +28,22 @@ const costTable = {
 
 const getScore = () => Object.keys(attributes).reduce((total, el) => total + costTable[attributes[el]], 0);
 
-const reduceAttribute = (attribute) => {
+const characters = {};
+
+const updateActionPoints = (characterId, characterActionPoints, maxActionPoints) => {
+  const timer = setInterval(() => {
+    if (characters[characterId].characterActionPoints >= maxActionPoints) {
+      clearInterval(characters[characterId].timer);
+    } else {
+      $('#action-points-bar-'+characterId).progress('increment', 1);
+      characters[characterId].characterActionPoints ++;
+      document.getElementById('action-points-value-'+characterId).innerHTML = characters[characterId].characterActionPoints;
+    }
+  }, 1000*60*3);
+  characters[characterId] = { timer, characterActionPoints };
+};
+
+const reduceAttribute = (attribute, initAttributesPoints) => {
   attributes[attribute] --;
   if (attributes[attribute]<7) {
     attributes[attribute] ++;
@@ -40,7 +55,7 @@ const reduceAttribute = (attribute) => {
   }
 };
 
-const augmentAttribute = (attribute) => {
+const augmentAttribute = (attribute, initAttributesPoints) => {
   attributes[attribute] ++;
   if (getScore()>initAttributesPoints) {
     attributes[attribute] --;

views/base.pug

@@ -9,6 +9,7 @@ html(lang="en")
   body
     script(src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous")
     script(src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous")
+    script(src="/media/script.js")
     block navbar
       if !user
         form(action="/auth/login", method="post")

views/character_summary.pug

@@ -4,9 +4,11 @@
     .header= character.name
     .meta
       .date Created on #{character.birthDate.toDateString()}
-    .ui.tiny.progress.yellow.progress.action-points(data-total=maxActionPoints, data-value=character.actionPoints)
+    .ui.tiny.progress.yellow.progress(id="action-points-bar-"+character._id)
       .bar
-      .label #{character.actionPoints} action points
+      .label 
+        span(id="action-points-value-"+character._id)= character.actionPoints
+        |&nbspaction points
   .content
     .ui.label(class=character.attributes.strength<=8 ? "orange" : character.attributes.strength>=12 ? "green" : "" )
       | Strength
@@ -26,3 +28,5 @@
     .ui.label(class=character.attributes.charisma<=8 ? "orange" : character.attributes.charisma>=12 ? "green" : "" )
       | Charisma
       .detail= character.attributes.charisma
+  script $('#action-points-bar-#{character._id}').progress({ total: #{maxActionPoints}, value: #{character.actionPoints}});
+  script updateActionPoints('#{character._id}', #{character.actionPoints}, #{maxActionPoints});

views/characters.pug

@@ -33,11 +33,11 @@ block main
                   .ui.horizontal.statistic
                     .value(id=attribute) 10
                     .label= attribute
-                  button.ui.button.orange.icon.circular.left.floated(type="button", onClick=`reduceAttribute('${attribute}')`)
+                  button.ui.button.orange.icon.circular.left.floated(type="button", onClick=`reduceAttribute('${attribute}', ${initAttributesPoints})`)
                     i.minus.icon
-                  button.ui.button.teal.icon.circular.right.floated(type="button", onClick=`augmentAttribute('${attribute}')`)
+                  button.ui.button.teal.icon.circular.right.floated(type="button", onClick=`augmentAttribute('${attribute}', ${initAttributesPoints})`)
                     i.add.icon
-                  .ui.bottom.attached.progress(id=attribute+"-bar")
+                  .ui.bottom.attached.progress.attribute(id=attribute+"-bar")
                     .bar
             
 
@@ -51,6 +51,5 @@ block main
 
   
   script $('.ui.dropdown').dropdown();
-  script $('.ui.progress').progress({ total: 20, value: 10 });
-  script let initAttributesPoints = #{initAttributesPoints};
-  script(src="/media/script.js")
\ No newline at end of file
+  script $('.ui.progress.attribute').progress({ total: 20, value: 10 });
+  script updateActionPoints(#{maxActionPoints});
\ No newline at end of file