added on to building

build.js

@@ -0,0 +1,81 @@
+
+/*Class that represents a wynn player's build.
+*/
+class Build{
+    
+    /*Construct a build.
+    */
+    constructor(level,helmet,chestplate,leggings,boots,ring1,ring2,bracelet,necklace,weapon){
+        if(helmet.type.valueOf() != "helmet".valueOf()){
+            throw new TypeError("No such helmet named ", helmet.name);
+        }else{
+            this.helmet = helmet;
+        }
+        if(chestplate.type.valueOf() != "chestplate"){
+            throw new TypeError("No such chestplate named ", chestplate.name);
+        }else{
+            this.chestplate = chestplate;
+        }
+        if(leggings.type.valueOf() != "leggings"){
+            throw new TypeError("No such leggings named ", leggings.name);
+        }else{
+            this.leggings = leggings;
+        }
+        if(boots.type.valueOf() != "boots"){
+            throw new TypeError("No such boots named ", boots.name);
+        }else{
+            this.boots = boots;
+        }
+        if(ring1.type.valueOf() != "ring"){
+            throw new TypeError("No such ring named ", ring1.name);
+        }else{
+            this.ring1 = ring1;
+        }
+        if(ring2.type.valueOf() != "ring"){
+            throw new TypeError("No such ring named ", ring2.name);
+        }else{
+            this.ring2 = ring2;
+        }
+        if(bracelet.type.valueOf() != "bracelet"){
+            throw new TypeError("No such bracelet named ", bracelet.name);
+        }else{
+            this.bracelet = bracelet;
+        }
+        if(necklace.type.valueOf() != "necklace"){
+            throw new TypeError("No such necklace named ", necklace.name);
+        }else{
+            this.necklace = necklace;
+        }
+        if(weapon.type.valueOf() == "wand" || weapon.type.valueOf() == "bow" || weapon.type.valueOf() == "dagger" || weapon.type.valueOf() == "spear" || weapon.type.valueOf() == "relik"){
+            this.weapon = weapon;
+        }else{
+            throw new TypeError("No such weapon named ", weapon.name);
+        }
+        if(level < 1){ //Should these be constants?
+            this.level = 1;
+        }else if (level > 106){
+            this.level = 106;
+        }else{
+            this.level = level;
+        }
+        this.skillpoints = levelToSkillPoints(this.level)
+    }  
+
+    /*Returns build in string format
+    */ TODO
+    toString(){
+        return this.helmet.name + ", " + this.chestplate.name + ", " + this.leggings.name + ", " + this.boots.name + ", " + this.ring1.name + ", " + this.ring2.name + ", " + this.bracelet.name + ", " + this.necklace.name + ", " + this.weapon.name;
+    }
+
+    /* Getters */ TODO
+    getHealth(){
+        health = parseInt(this.helmet.hp,10) + parseInt(this.helmet.hpBonus,10) + parseInt(this.chestplate.hp,10) + parseInt(this.chestplate.hpBonus,10) + parseInt(this.leggings.hp,10) + parseInt(this.leggings.hpBonus,10) + parseInt(this.boots.hp,10) + parseInt(this.boots.hpBonus,10) + parseInt(this.ring1.hp,10) + parseInt(this.ring1.hpBonus,10) + parseInt(this.ring2.hp,10) + parseInt(this.ring2.hpBonus,10) + parseInt(this.bracelet.hp,10) + parseInt(this.bracelet.hpBonus,10) + parseInt(this.necklace.hp,10) + parseInt(this.necklace.hpBonus,10) + parseInt(this.weapon.hp,10) + parseInt(this.weapon.hpBonus,10) + levelToHPBase(this.level);
+        if(health<5){
+            return 5;
+        }else{
+            return health;
+        }
+    }
+    /* Setters */ TODO
+
+}

index.html

@@ -142,8 +142,31 @@
                 <label for="agi-skp">Agility:</label>
                 <input type="text" id="agi-skp" name="agi-skp" />
             </div>
-
         </div>
+        <div class = "build">
+            <div class = "center" id = "build-helmet" style = "grid-column:1;grid-row:1">
+            </div>
+            <div class = "center" id = "build-chestplate" style = "grid-column:2;grid-row:1">
+            </div>
+            <div class = "center" id = "build-leggings" style = "grid-column:3;grid-row:1">
+            </div>
+            <div class = "center" id = "build-boots" style = "grid-column:4;grid-row:1">
+            </div>
+            <div class = "center" id = "build-ring1" style = "grid-column:1;grid-row:2">
+            </div>
+            <div class = "center" id = "build-ring2" style = "grid-column:2;grid-row:2">
+            </div>
+            <div class = "center" id = "build-bracelet" style = "grid-column:3;grid-row:2">
+            </div>
+            <div class = "center" id = "build-necklace" style = "grid-column:4;grid-row:2">
+            </div>
+            <div class = "center" id = "build-weapon" style = "grid-column:1;grid-row:3">
+            </div>
+            <div class = "center" id = "build-cumulative-stats" style = "grid-column:2;grid-row:3">
+            </div>
+        </div>
+        <script type="text/javascript" src="build.js">
+        </script>
         <script type="text/javascript" src="test.js">
         </script>
     </body>

styles.css

@@ -22,3 +22,12 @@
 .center {
     text-align: center;  
 }
+
+.build{
+    padding: 4%;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    grid-auto-rows: minmax(60px, auto);
+    width: 100vw;
+}

test.js

@@ -1,8 +1,10 @@
+
 const DB_VERSION = 2;
 // @See https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/video-store/index.js
 
 let db;
 let items;
+let player_build;
 let reload = false;
 // Set up item lists for quick access later.
 let armorTypes = [ "helmet", "chestplate", "leggings", "boots" ];
@@ -237,7 +239,7 @@ function calculateBuild(){
     if(weapon===""){
         weapon = "No Weapon";
     }
-    let player_build = new Build(
+    player_build = new Build(
         106,
         itemMap.get(helmet),
         itemMap.get(chestplate),
@@ -250,6 +252,15 @@ function calculateBuild(){
         itemMap.get(weapon),
         );
     console.log(player_build.toString());
+    document.getElementById("build-helmet").innerHTML = player_build.helmet.name;
+    document.getElementById("build-chestplate").innerHTML = player_build.chestplate.name;
+    document.getElementById("build-leggings").innerHTML = player_build.helmet.name;
+    document.getElementById("build-boots").innerHTML = player_build.helmet.name;
+    document.getElementById("build-ring1").innerHTML = player_build.ring1.name;
+    document.getElementById("build-ring2").innerHTML = player_build.ring2.name;
+    document.getElementById("build-bracelet").innerHTML = player_build.bracelet.name;
+    document.getElementById("build-necklace").innerHTML = player_build.necklace.name;
+    document.getElementById("build-weapon").innerHTML = player_build.weapon.name;
 }
 
 function resetFields(){
@@ -315,84 +326,3 @@ function levelToHPBase(level){
         return 5*level + 5;
     }
 }
-
-/*Class that represents a wynn player's build.
-*/
-class Build{
-    
-    /*Construct a build.
-    */
-    constructor(level,helmet,chestplate,leggings,boots,ring1,ring2,bracelet,necklace,weapon){
-        if(helmet.type.valueOf() != "helmet".valueOf()){
-            throw new TypeError("No such helmet named ", helmet.name);
-        }else{
-            this.helmet = helmet;
-        }
-        if(chestplate.type.valueOf() != "chestplate"){
-            throw new TypeError("No such chestplate named ", chestplate.name);
-        }else{
-            this.chestplate = chestplate;
-        }
-        if(leggings.type.valueOf() != "leggings"){
-            throw new TypeError("No such leggings named ", leggings.name);
-        }else{
-            this.leggings = leggings;
-        }
-        if(boots.type.valueOf() != "boots"){
-            throw new TypeError("No such boots named ", boots.name);
-        }else{
-            this.boots = boots;
-        }
-        if(ring1.type.valueOf() != "ring"){
-            throw new TypeError("No such ring named ", ring1.name);
-        }else{
-            this.ring1 = ring1;
-        }
-        if(ring2.type.valueOf() != "ring"){
-            throw new TypeError("No such ring named ", ring2.name);
-        }else{
-            this.ring2 = ring2;
-        }
-        if(bracelet.type.valueOf() != "bracelet"){
-            throw new TypeError("No such bracelet named ", bracelet.name);
-        }else{
-            this.bracelet = bracelet;
-        }
-        if(necklace.type.valueOf() != "necklace"){
-            throw new TypeError("No such necklace named ", necklace.name);
-        }else{
-            this.necklace = necklace;
-        }
-        if(weapon.type.valueOf() == "wand" || weapon.type.valueOf() == "bow" || weapon.type.valueOf() == "dagger" || weapon.type.valueOf() == "spear" || weapon.type.valueOf() == "relik"){
-            this.weapon = weapon;
-        }else{
-            throw new TypeError("No such weapon named ", weapon.name);
-        }
-        if(level < 1){ //Should these be constants?
-            this.level = 1;
-        }else if (level > 106){
-            this.level = 106;
-        }else{
-            this.level = level;
-        }
-        this.skillpoints = levelToSkillPoints(this.level)
-    }  
-
-    /*Returns build in string format
-    */ TODO
-    toString(){
-        return this.helmet.name + ", " + this.chestplate.name + ", " + this.leggings.name + ", " + this.boots.name + ", " + this.ring1.name + ", " + this.ring2.name + ", " + this.bracelet.name + ", " + this.necklace.name + ", " + this.weapon.name;
-    }
-
-    /* Getters */ TODO
-    getHealth(){
-        health = parseInt(this.helmet.hp,10) + parseInt(this.helmet.hpBonus,10) + parseInt(this.chestplate.hp,10) + parseInt(this.chestplate.hpBonus,10) + parseInt(this.leggings.hp,10) + parseInt(this.leggings.hpBonus,10) + parseInt(this.boots.hp,10) + parseInt(this.boots.hpBonus,10) + parseInt(this.ring1.hp,10) + parseInt(this.ring1.hpBonus,10) + parseInt(this.ring2.hp,10) + parseInt(this.ring2.hpBonus,10) + parseInt(this.bracelet.hp,10) + parseInt(this.bracelet.hpBonus,10) + parseInt(this.necklace.hp,10) + parseInt(this.necklace.hpBonus,10) + parseInt(this.weapon.hp,10) + parseInt(this.weapon.hpBonus,10) + levelToHPBase(this.level);
-        if(health<5){
-            return 5;
-        }else{
-            return health;
-        }
-    }
-    /* Setters */ TODO
-
-}