Add skill level number, fix skills list

main.js

@@ -164,12 +164,13 @@ function createModElement(mod) {
 /** @param {string} skill @param {integer} boost */
 function createSkillElement(skill, boost) {
   const skillNameElement = $("<span>").addClass("skill-name").text(SKILL_NAMES.get(skill));
-  const skillLevelElement = $("<div>").addClass("skill-level pips");
-  for (let i = 0; i < boost; i ++) skillLevelElement.append($("<div>").addClass("pip"));
+  const skillLevelElement = $("<span>").addClass("skill-level").text(boost);
+  const skillLevelBarElement = $("<div>").addClass("skill-level-bar pips");
+  for (let i = 0; i < boost; i ++) skillLevelBarElement.append($("<div>").addClass("pip"));
   const xpBoostText = skill === "Strength" || skill === "Fitness" ? null : getXpBoostText(boost);
   const skillXpBoostElement = $("<span>").addClass("skill-xp-boost").text(xpBoostText || "");
   return $("<div>").addClass("planner-skill").append([
-    skillNameElement, skillLevelElement, skillXpBoostElement
+    skillNameElement, skillLevelElement, skillLevelBarElement, skillXpBoostElement
   ]);
 }
 
@@ -303,7 +304,7 @@ class State {
     const skillsElement = $("#panel-major-skills > div.panel-inner").empty();
 
     const skills = this.getSkills();
-    for (const skill of SKILL_NAMES.values()) {
+    for (const skill of SKILL_NAMES.keys()) {
       if (skills.has(skill) && skills.get(skill) !== 0) {
         skillsElement.append(createSkillElement(skill, skills.get(skill)));
       }
@@ -319,8 +320,9 @@ class State {
 
   /** @returns {integer} */
   getPointTotal() {
+    const freePoints = this.settings.freePoints;
     const currentProfession = this.currentModData.professions.get(this.chosenProfession);
-    let base = currentProfession != null ? currentProfession.points : 0;
+    let base = freePoints + (currentProfession != null ? currentProfession.points : 0);
     for (const id of this.chosenTraits.values()) {
       base -= this.currentModData.traits.get(id).cost;
     }
@@ -473,22 +475,24 @@ class State {
 }
 
 class Settings {
-  constructor(isMultiplayer = false, isSleepEnabled = false, showUnavailable = false) {
+  constructor({
+    isMultiplayer = false,
+    isSleepEnabled = false,
+    showUnavailable = false,
+    freePoints = 0
+  }) {
     /** @type {boolean} */
     this.isMultiplayer = isMultiplayer;
     /** @type {boolean} */
     this.isSleepEnabled = isSleepEnabled;
     /** @type {boolean} */
     this.showUnavailable = showUnavailable;
+    /** @type {integer} */
+    this.freePoints = freePoints;
   }
 
   static loadFromCookies() {
-    const settings = getOrDefaultCookie("saved_settings", {});
-    return new Settings(
-      settings.isMultiplayer,
-      settings.isSleepEnabled,
-      settings.showUnavailable
-    );
+    return new Settings(getOrDefaultCookie("saved_settings", {}));
   }
 
   saveToCookies() {
@@ -516,7 +520,6 @@ function getPointsPolarity(points) {
  * @param {any} value
  */
 function setCookie(cookieName, value) {
-  console.log("saved cookie " + cookieName);
   Cookies.set(cookieName, JSON.stringify(value));
 }
 

stylesheet.css

@@ -38,7 +38,7 @@ body a:hover {
   color: #8be;
 }
 
-button {
+button, input[type=text], input[type=number] {
   color: #fff;
   background-color: transparent;
   border: 1px solid #fff;
@@ -56,6 +56,14 @@ button:active {
   border-color: #777;
 }
 
+input[type=text], input[type=number] {
+  background-color: #111;
+}
+
+input[type=number] {
+  padding: 1px 0 1px 3px;
+}
+
 header p, header h1, header h2, header h3,
 footer p, footer h1, footer h2, footer h3 {
   margin-bottom: 0.5rem;
@@ -95,8 +103,6 @@ div.pips {
   user-select: none;
 }
 
-
-
 #planner-main button:disabled {
   color: #d00;
   border-color: #d00;
@@ -162,6 +168,47 @@ div.pips {
   padding: 0.25rem 0.5rem;
 }
 
+#planner-main span.skill-name {
+  display: inline-block;
+  width: 100%;
+}
+
+#planner-main span.skill-level {
+  text-align: center;
+  display: inline-block;
+  width: 1rem;
+  flex-shrink: 0;
+}
+
+#planner-main div.skill-level-bar {
+  width: 69px;
+  flex-shrink: 0;
+}
+
+#planner-main span.skill-xp-boost, #points {
+  text-align: right;
+  display: inline-block;
+  width: 50%;
+}
+
+#planner-settings {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: 1rem;
+}
+
+#setting-free-points {
+  width: 6rem;
+}
+
+#planner-mods {
+  display: flex;
+  flex-direction: column;
+  height: 30rem;
+  gap: 0.25rem;
+}
+
 #planner-mods-list div.planner-mod {
   user-select: none;
   padding: 0.5rem 0.5rem;
@@ -187,21 +234,8 @@ div.pips {
   background-color: #c00;
 }
 
-#planner-main span.skill-name {
-  display: inline-block;
-  width: 100%;
-}
-
-#planner-main div.skill-level {
-  width: 69px;
-  flex-shrink: 0;
-}
-
-#planner-main span.skill-xp-boost, #points {
-  text-align: right;
-  display: inline-block;
-  width: 4rem;
-  flex-shrink: 0;
+#planner-mods-list {
+  height: 100%;
 }
 
 #planner-mods-list,
@@ -247,28 +281,10 @@ div.panel > div.panel-bottom {
     grid-template-rows: repeat(2, 1fr);
 
     height: 60rem;
-    max-height: 60rem;
 
     gap: 1rem;
   }
 
-  #planner-settings {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-  }
-
-  #planner-mods {
-    display: flex;
-    flex-direction: column;
-    height: 30rem;
-    gap: 0.25rem;
-  }
-
-  #planner-mods-list {
-    height: 100%;
-  }
-
   div.panel {
     display: flex;
     flex-direction: column;
@@ -279,7 +295,6 @@ div.panel > div.panel-bottom {
 
   div.panel > div.panel-inner {
     height: 100%;
-    max-height: 100%;
   }
 
   #panel-professions {
@@ -313,20 +328,15 @@ div.panel > div.panel-bottom {
     gap: 1rem;
   }
 
-  #planner-settings {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
   div.panel {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     gap: 0.25rem;
+    height: 30rem;
   }
 
   div.panel > div.panel-inner {
-    height: 100px;
+    height: 100%;
   }
 }