From 4deaa1c2c2e89838a5249c145a92a4faf4b9b5ce Mon Sep 17 00:00:00 2001
From: Martin Lehoux <martin@lehoux.net>
Date: Sat, 16 Feb 2019 00:49:31 +0100
Subject: [PATCH] add front update for action points

---
 media/script.js             | 19 +++++++++++++++++--
 views/base.pug              |  1 +
 views/character_summary.pug |  8 ++++++--
 views/characters.pug        | 11 +++++------
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/media/script.js b/media/script.js
index 1ab47a6..7674b31 100644
--- a/media/script.js
+++ b/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] --;
diff --git a/views/base.pug b/views/base.pug
index 51dc564..99efae0 100644
--- a/views/base.pug
+++ b/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")
diff --git a/views/character_summary.pug b/views/character_summary.pug
index ced5e41..407b0ef 100644
--- a/views/character_summary.pug
+++ b/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});
diff --git a/views/characters.pug b/views/characters.pug
index 9f44b9a..5c8c567 100644
--- a/views/characters.pug
+++ b/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
-- 
GitLab