replace slugs with rail gun, rebalanced flechettes, added falling dmg, new mod: fast movement, added mouse icons

js/engine.js

@@ -91,13 +91,10 @@ function mobCollisionChecks(event) {
         const v = Matter.Vector.magnitude(Matter.Vector.sub(player.velocity, obj.velocity));
         if (v > speedThreshold) {
           mech.damageImmune = mech.cycle + 30; //player is immune to collision damage for 30 cycles
-          let dmg = Math.sqrt((v - speedThreshold + 0.1) * (obj.mass - massThreshold)) * 0.02;
+          let dmg = Math.sqrt((v - speedThreshold + 0.1) * (obj.mass - massThreshold)) * 0.01;
-          dmg = Math.min(Math.max(dmg, 0.02), 0.2);
+          dmg = Math.min(Math.max(dmg, 0.02), 0.15);
-          // console.log(`mass = ${obj.mass} \n`, `dmg = ${dmg}\n`, `v = ${v}\n`)
-          // console.log(v, dmg)
           mech.damage(dmg);
-          game.drawList.push({
+          game.drawList.push({ //add dmg to draw queue
-            //add dmg to draw queue
             x: pairs[i].activeContacts[0].vertex.x,
             y: pairs[i].activeContacts[0].vertex.y,
             radius: dmg * 500,
@@ -144,7 +141,7 @@ function mobCollisionChecks(event) {
               let dmg = Math.min(Math.max(0.025 * Math.sqrt(mob[k].mass), 0.05), 0.3) * game.dmgScale; //player damage is capped at 0.3*dmgScale of 1.0
               mech.damage(dmg);
               if (mob[k].onHit) mob[k].onHit(k);
-              if (b.annihilation && mob[k].dropPowerUp) {
+              if (b.modAnnihilation && mob[k].dropPowerUp) {
                 mob[k].death();
                 game.drawList.push({
                   //add dmg to draw queue
@@ -182,7 +179,7 @@ function mobCollisionChecks(event) {
           if (obj.classType === "bullet" && obj.speed > obj.minDmgSpeed) {
             mob[k].foundPlayer();
             // const dmg = b.dmgScale * (obj.dmg + 0.15 * obj.mass * Matter.Vector.magnitude(Matter.Vector.sub(mob[k].velocity, obj.velocity)));
-            const dmg = b.dmgScale * (obj.dmg + b.extraDmg + 0.15 * obj.mass * Matter.Vector.magnitude(Matter.Vector.sub(mob[k].velocity, obj.velocity)))
+            const dmg = b.dmgScale * (obj.dmg + b.modExtraDmg + 0.15 * obj.mass * Matter.Vector.magnitude(Matter.Vector.sub(mob[k].velocity, obj.velocity)))
             mob[k].damage(dmg);
             obj.onDmg(); //some bullets do actions when they hits things, like despawn
             game.drawList.push({

js/game.js

@@ -167,6 +167,10 @@ const game = {
     document.getElementById("mods").innerHTML = text
   },
   replaceTextLog: true,
+  // <!-- <path d="M832.41,106.64 V323.55 H651.57 V256.64 c0-82.5,67.5-150,150-150 Z" fill="#789" stroke="none" />
+  // <path d="M827,112 h30 a140,140,0,0,1,140,140 v68 h-167 z" fill="#7ce" stroke="none" /> -->
+  SVGleftMouse: '<svg viewBox="750 0 200 765" class="mouse-icon" width="40px" height = "60px" stroke-linecap="round" stroke-linejoin="round" stroke-width="25px" stroke="#000" fill="none">  <path fill="#fff" stroke="none" d="M827,112 h30 a140,140,0,0,1,140,140 v268 a140,140,0,0,1-140,140 h-60 a140,140,0,0,1-140-140v-268 a140,140,0,0,1,140-140h60" />  <path d="M832.41,106.64 V323.55 H651.57 V256.64 c0-82.5,67.5-150,150-150 Z" fill="#456" stroke="none" />  <path fill="none" d="M827,112 h30 a140,140,0,0,1,140,140 v268 a140,140,0,0,1-140,140 h-60 a140,140,0,0,1-140-140v-268 a140,140,0,0,1,140-140h60" />  <path d="M657 317 h 340 h-170 v-207" />  <ellipse fill="#fff" cx="827.57" cy="218.64" rx="29" ry="68" />  </svg>',
+  SVGrightMouse: '<svg viewBox="750 0 200 765" class="mouse-icon" width="40px" height = "60px" stroke-linecap="round" stroke-linejoin="round" stroke-width="25px" stroke="#000" fill="none">  <path fill="#fff" stroke="none" d="M827,112 h30 a140,140,0,0,1,140,140 v268 a140,140,0,0,1-140,140 h-60 a140,140,0,0,1-140-140v-268 a140,140,0,0,1,140-140h60" />  <path d="M827,112 h30 a140,140,0,0,1,140,140 v68 h-167 z" fill="#0af" stroke="none" />  <path fill="none" d="M827,112 h30 a140,140,0,0,1,140,140 v268 a140,140,0,0,1-140,140 h-60 a140,140,0,0,1-140-140v-268 a140,140,0,0,1,140-140h60" />  <path d="M657 317 h 340 h-170 v-207" />  <ellipse fill="#fff" cx="827.57" cy="218.64" rx="29" ry="68" />  </svg>',
   makeTextLog(text, time = 180) {
     if (game.replaceTextLog) {
       document.getElementById("text-log").innerHTML = text;
@@ -508,6 +512,7 @@ const game = {
     if (mech.holdingTarget) {
       holdTarget = mech.holdingTarget;
     }
+    mech.fireCDcycle = 0
     mech.drop();
     level.fill = [];
     level.fillBG = [];

js/index.js

@@ -2,6 +2,27 @@
 /* TODO:  *******************************************
 *****************************************************
 
+gun:  Spirit Bomb
+  use charge up like rail gun
+
+left and right click mouse icons for text displays
+
+mod: auto pick up guns, heals, ammo
+  use the same rule for drones
+  maybe give some other bonus too?
+
+mod: + move speed and jump height
+  will leg animations look strange?
+    that's OK for a mod
+  this could just slow the mobs down instead?
+    how?
+
+rework junk bot, or remove it
+  it's behavior is too unpredictable
+    range is unclear
+    having the bullets last long after doing dmg isn't fun
+  we want a fun gun that acts like a melee weapon
+
 mouse can get suck as clicked if the user clicks off the window
   can lead to gun lock up until player pressed mouse again
   should I really need to fix this?

js/level.js

@@ -14,9 +14,9 @@ const level = {
   start() {
     if (level.levelsCleared === 0) {
       // game.difficulty = 6; //for testing to simulate possible mobs spawns
-      // b.giveGuns(6)
+      // b.giveGuns(1)
       // mech.fieldUpgrades[7].effect();
-      // b.giveMod(13)
+      b.giveMod(15)
       // spawn.pickList = ["ghoster", "ghoster"]
 
       this.intro(); //starting level
@@ -1475,7 +1475,7 @@ const level = {
         level.onLevel++;
         if (level.onLevel > level.levels.length - 1) level.onLevel = 0;
 
-        game.clearNow = true; //triggers in the physics engine to remove all physics bodies
+        game.clearNow = true; //triggers in game.clearMap to remove all physics bodies and setup for new map
       }
     },
     death() {

js/mobs.js

@@ -231,7 +231,7 @@ const mobs = {
           // ctx.lineDashOffset = 6*(game.cycle % 215);
           if (this.distanceToPlayer() < this.laserRange) {
             //if (Math.random()>0.2 && this.seePlayer.yes && this.distanceToPlayer2()<800000) {
-            if (!b.AoEImmunity) {
+            if (!b.isModAoEImmunity) {
               mech.damage(0.0003 * game.dmgScale);
               if (mech.fieldMeter > 0.1) mech.fieldMeter -= 0.005
             }

js/player.js

@@ -6,15 +6,15 @@ const mech = {
   spawn() {
     //load player in matter.js physic engine
     // let vector = Vertices.fromPath("0 40  50 40   50 115   0 115   30 130   20 130"); //player as a series of vertices
-    let vector = Vertices.fromPath("0,40, 50,40, 50,115, 30,130, 20,130, 0,115, 0,40"); //player as a series of vertices
+    let vertices = Vertices.fromPath("0,40, 50,40, 50,115, 30,130, 20,130, 0,115, 0,40"); //player as a series of vertices
-    playerBody = Matter.Bodies.fromVertices(0, 0, vector);
+    playerBody = Matter.Bodies.fromVertices(0, 0, vertices);
     jumpSensor = Bodies.rectangle(0, 46, 36, 6, {
       //this sensor check if the player is on the ground to enable jumping
       sleepThreshold: 99999999999,
       isSensor: true
     });
-    vector = Vertices.fromPath("16 -82  2 -66  2 -37  43 -37  43 -66  30 -82");
+    vertices = Vertices.fromPath("16 -82  2 -66  2 -37  43 -37  43 -66  30 -82");
-    playerHead = Matter.Bodies.fromVertices(0, -55, vector); //this part of the player lowers on crouch
+    playerHead = Matter.Bodies.fromVertices(0, -55, vertices); //this part of the player lowers on crouch
     headSensor = Bodies.rectangle(0, -57, 48, 45, {
       //senses if the player's head is empty and can return after crouching
       sleepThreshold: 99999999999,
@@ -65,7 +65,7 @@ const mech = {
   },
   defaultMass: 5,
   mass: 5,
-  Fx: 0.015, //run Force on ground
+  Fx: 0.015, //run Force on ground  //this is reset in b.setModDefaults()
   FxAir: 0.015, //run Force in Air
   definePlayerMass(mass = mech.defaultMass) {
     Matter.Body.setMass(player, mass);
@@ -110,7 +110,7 @@ const mech = {
   Sy: 0, //adds a smoothing effect to vertical only
   Vx: 0,
   Vy: 0,
-  jumpForce: 0.38,
+  jumpForce: 0.38, //this is reset in b.setModDefaults()
   gravity: 0.0019,
   friction: {
     ground: 0.01,
@@ -211,6 +211,14 @@ const mech = {
         this.doCrouch();
         this.yOff = this.yOffWhen.jump;
         this.hardLandCD = mech.cycle + Math.min(momentum / 6 - 6, 40)
+
+        if (game.isBodyDamage && momentum > 200 && player.velocity.y > 20) { //falling damage
+          mech.damageImmune = mech.cycle + 30; //player is immune to collision damage for 30 cycles
+          let dmg = Math.sqrt(momentum - 200) * 0.01
+          console.log(dmg, momentum, player.velocity.y)
+          dmg = Math.min(Math.max(dmg, 0.02), 0.15);
+          mech.damage(dmg);
+        }
       } else {
         this.yOffGoal = this.yOffWhen.stand;
       }
@@ -242,11 +250,17 @@ const mech = {
       //horizontal move on ground
       //apply a force to move
       if (keys[65] || keys[37]) { //left / a
-        player.force.x -= this.Fx
+        if (player.velocity.x > -2) {
-        if (player.velocity.x > -2) player.force.x -= this.Fx * 0.5
+          player.force.x -= this.Fx * 1.5
+        } else {
+          player.force.x -= this.Fx
+        }
       } else if (keys[68] || keys[39]) { //right / d
-        player.force.x += this.Fx
+        if (player.velocity.x < 2) {
-        if (player.velocity.x < 2) player.force.x += this.Fx * 0.5
+          player.force.x += this.Fx * 1.5
+        } else {
+          player.force.x += this.Fx
+        }
       } else {
         const stoppingFriction = 0.92;
         Matter.Body.setVelocity(player, {
@@ -287,76 +301,6 @@ const mech = {
     //smoothly move leg height towards height goal
     this.yOff = this.yOff * 0.85 + this.yOffGoal * 0.15;
   },
-  gamepadMove() {
-    if (this.onGround) { //on ground **********************
-      if (this.crouch) {
-        if (game.gamepad.leftAxis.y !== -1 && this.isHeadClear && this.hardLandCD < mech.cycle) this.undoCrouch();
-      } else if (game.gamepad.leftAxis.y === -1 || this.hardLandCD > mech.cycle) {
-        this.doCrouch(); //on ground && not crouched and pressing s or down
-      } else if (game.gamepad.jump && this.buttonCD_jump + 20 < mech.cycle && this.yOffWhen.stand > 23) {
-        this.buttonCD_jump = mech.cycle; //can't jump again until 20 cycles pass
-
-        //apply a fraction of the jump force to the body the player is jumping off of
-        Matter.Body.applyForce(mech.standingOn, mech.pos, {
-          x: 0,
-          y: this.jumpForce * 0.12 * Math.min(mech.standingOn.mass, 5)
-        });
-
-        player.force.y = -this.jumpForce; //player jump force
-        Matter.Body.setVelocity(player, { //zero player y-velocity for consistent jumps
-          x: player.velocity.x,
-          y: 0
-        });
-      }
-
-      //horizontal move on ground
-      //apply a force to move
-      if (game.gamepad.leftAxis.x === -1) { //left / a
-        player.force.x -= this.Fx
-        if (player.velocity.x > -2) player.force.x -= this.Fx * 0.5
-      } else if (game.gamepad.leftAxis.x === 1) { //right / d
-        player.force.x += this.Fx
-        if (player.velocity.x < 2) player.force.x += this.Fx * 0.5
-      } else {
-        const stoppingFriction = 0.92;
-        Matter.Body.setVelocity(player, {
-          x: player.velocity.x * stoppingFriction,
-          y: player.velocity.y * stoppingFriction
-        });
-      }
-      //come to a stop if fast or if no move key is pressed
-      if (player.speed > 4) {
-        const stoppingFriction = (this.crouch) ? 0.65 : 0.89;
-        Matter.Body.setVelocity(player, {
-          x: player.velocity.x * stoppingFriction,
-          y: player.velocity.y * stoppingFriction
-        });
-      }
-
-    } else { // in air **********************************
-      //check for short jumps
-      if (
-        this.buttonCD_jump + 60 > mech.cycle && //just pressed jump
-        !game.gamepad.jump && //but not pressing jump key
-        this.Vy < 0 //moving up
-      ) {
-        Matter.Body.setVelocity(player, {
-          //reduce player y-velocity every cycle
-          x: player.velocity.x,
-          y: player.velocity.y * 0.94
-        });
-      }
-      const limit = 125 / player.mass / player.mass
-      if (game.gamepad.leftAxis.x === -1) {
-        if (player.velocity.x > -limit) player.force.x -= this.FxAir; // move player   left / a
-      } else if (game.gamepad.leftAxis.x === 1) {
-        if (player.velocity.x < limit) player.force.x += this.FxAir; //move player  right / d
-      }
-    }
-
-    //smoothly move leg height towards height goal
-    this.yOff = this.yOff * 0.85 + this.yOffGoal * 0.15;
-  },
   alive: true,
   death() {
     if (b.modIsImmortal) { //if player has the immortality buff, spawn on the same level with randomized stats
@@ -517,7 +461,7 @@ const mech = {
     document.getElementById("dmg").style.opacity = 0.1 + Math.min(0.6, dmg * 4);
 
     //chance to build a drone on damage  from mod
-    if (b.makeDroneOnDamage) {
+    if (b.isModDroneOnDamage) {
       const len = (dmg - 0.08 + 0.05 * Math.random()) / 0.05
       for (let i = 0; i < len; i++) {
         if (Math.random() < 0.6) b.guns[13].fire() //spawn drone
@@ -730,7 +674,7 @@ const mech = {
       mech.fieldMeter += mech.fieldRegen;
       ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
       ctx.fillRect(this.pos.x - this.radius, this.pos.y - 50, range, 10);
-      ctx.fillStyle = "rgb(50,220,255)";
+      ctx.fillStyle = "#0af";
       ctx.fillRect(this.pos.x - this.radius, this.pos.y - 50, range * this.fieldMeter, 10);
     } else {
       mech.fieldMeter = 1
@@ -1071,7 +1015,7 @@ const mech = {
   hold() {},
   fieldText() {
     game.replaceTextLog = true;
-    game.makeTextLog(`<div class="circle field "></div> &nbsp; <strong style='font-size:30px;'>${mech.fieldUpgrades[mech.fieldMode].name}</strong><br><span class='faded'>(right click or space bar)</span><br><br>${mech.fieldUpgrades[mech.fieldMode].description}`, 1000);
+    game.makeTextLog(`${game.SVGrightMouse}<strong style='font-size:30px;'> ${mech.fieldUpgrades[mech.fieldMode].name}</strong><br><span class='faded'></span><br>${mech.fieldUpgrades[mech.fieldMode].description}`, 1000);
     game.replaceTextLog = false;
     document.getElementById("field").innerHTML = mech.fieldUpgrades[mech.fieldMode].name //add field
   },
@@ -1179,13 +1123,13 @@ const mech = {
     },
     {
       name: "plasma torch",
-      description: "field emits a beam of destructive <span style='color:#f0f;'>ionized gas</span><br><span style='color:#a00;'>decreased</span> <strong style='color: #08f;'>shield</strong> range and efficiency",
+      description: "field emits a beam of destructive <span style='color:#f0f;'>ionized gas</span><br><span style='color:#a00;'>decreased</span> <strong class='color-f'>shield</strong> range and efficiency",
       effect: () => {
         mech.fieldMode = 2;
         mech.fieldText();
         mech.setHoldDefaults();
         // mech.fieldShieldingScale = 2;
-        mech.grabRange = 125;
+        // mech.grabRange = 125;
         mech.fieldArc = 0.05 //run calculateFieldThreshold after setting fieldArc, used for powerUp grab and mobPush with lookingAt(mob)
         mech.calculateFieldThreshold(); //run after setting fieldArc, used for powerUp grab and mobPush with lookingAt(mob)
         mech.hold = function () {
@@ -1346,13 +1290,12 @@ const mech = {
     },
     {
       name: "negative mass field",
-      description: "field nullifies &nbsp;<strong style='letter-spacing: 15px;'>gravity</strong><br> player can hold more massive objects<br><em>can fire while field is active</em>",
+      description: "field nullifies &nbsp;<strong style='letter-spacing: 15px;'>gravity</strong><br><em>can fire while field is active</em>",
       effect: () => {
         mech.fieldMode = 3;
         mech.fieldText();
         mech.setHoldDefaults();
         mech.fieldFire = true;
-        mech.holdingMassScale = 0.05; //can hold heavier blocks with lower cost to jumping
 
         mech.hold = function () {
           if (mech.isHolding) {
@@ -1434,7 +1377,7 @@ const mech = {
     },
     {
       name: "standing wave harmonics",
-      description: "you are surrounded by oscillating <strong style='color: #08f;'>shields</strong><br> <span style='color:#a00;'>decreased</span> field regeneration",
+      description: "you are surrounded by oscillating <strong class='color-f'>shields</strong><br> <span style='color:#a00;'>decreased</span> field regeneration",
       effect: () => {
         mech.fieldMode = 4;
         mech.fieldText();
@@ -1479,7 +1422,7 @@ const mech = {
       name: "nano-scale manufacturing",
       description: "excess field <span class='color-f'>energy</span> used to build <strong class='color-b'>drones</strong><br> increased <span class='color-f'>energy</span> regeneration",
       effect: () => {
-        let gunIndex = Math.random() < 0.5 ? 13 : 14
+        let gunIndex = 13 //Math.random() < 0.5 ? 13 : 14
         mech.fieldMode = 5;
         mech.fieldText();
         mech.setHoldDefaults();

js/powerups.js

@@ -9,10 +9,10 @@ const powerUps = {
     },
     effect() {
       let heal = (this.size / 40) ** 2
-      if (b.fullHeal) heal = Infinity
+      if (b.isModFullHeal) heal = Infinity
       heal = Math.min(1 - mech.health, heal)
       mech.addHealth(heal);
-      if (heal > 0) game.makeTextLog("<span style='font-size:115%;'> <strong class='color-h' style = 'letter-spacing: 2px;'>heal</strong>  " + (heal * 100).toFixed(0) + "%</span>", 300)
+      if (heal > 0) game.makeTextLog("<div class='circle heal'></div> &nbsp; <span style='font-size:115%;'> <strong style = 'letter-spacing: 2px;'>heal</strong>  " + (heal * 100).toFixed(0) + "%</span>", 300)
     }
   },
   ammo: {
@@ -48,13 +48,13 @@ const powerUps = {
         const ammo = Math.ceil((target.ammoPack * (0.45 + 0.08 * Math.random())) / b.dmgScale);
         target.ammo += ammo;
         game.updateGunHUD();
-        game.makeTextLog("<span style='font-size:110%;'>+" + ammo + " ammo for " + target.name + "</span>", 300);
+        game.makeTextLog("<div class='circle gun'></div> &nbsp; <span style='font-size:110%;'>+" + ammo + " ammo for " + target.name + "</span>", 300);
       }
     }
   },
   field: {
     name: "field",
-    color: "#0bf",
+    color: "#0af",
     size() {
       return 45;
     },
@@ -124,7 +124,7 @@ const powerUps = {
       if (options.length > 0) {
         let newGun = options[Math.floor(Math.random() * options.length)];
         if (b.activeGun === null) b.activeGun = newGun //if no active gun switch to new gun
-        game.makeTextLog(`<div class="circle gun "></div> &nbsp; <strong style='font-size:30px;'>${b.guns[newGun].name}</strong><br><span class='faded'>(left click)</span><br><br>${b.guns[newGun].description}`, 900);
+        game.makeTextLog(`${game.SVGleftMouse} <strong style='font-size:30px;'>${b.guns[newGun].name}</strong><br><br>${b.guns[newGun].description}`, 900);
         b.guns[newGun].have = true;
         b.inventory.push(newGun);
         b.guns[newGun].ammo += b.guns[newGun].ammoPack * 2;

js/spawn.js

@@ -457,7 +457,7 @@ const spawn = {
         this.healthBar();
         //when player is inside event horizon
         if (Matter.Vector.magnitude(Matter.Vector.sub(this.position, player.position)) < eventHorizon) {
-          if (!b.AoEImmunity) {
+          if (!b.isModAoEImmunity) {
             mech.damage(0.00015 * game.dmgScale);
             if (mech.fieldMeter > 0.1) mech.fieldMeter -= 0.01
           }
@@ -548,7 +548,7 @@ const spawn = {
         ctx.fill();
         //when player is inside event horizon
         if (Matter.Vector.magnitude(Matter.Vector.sub(this.position, player.position)) < eventHorizon) {
-          if (!b.AoEImmunity) {
+          if (!b.isModAoEImmunity) {
             mech.damage(0.00015 * game.dmgScale);
             if (mech.fieldMeter > 0.1) mech.fieldMeter -= 0.01
           }
@@ -680,14 +680,14 @@ const spawn = {
       this.laser();
     };
   },
-  striker(x, y, radius = 15 + Math.ceil(Math.random() * 25)) {
+  striker(x, y, radius = 14 + Math.ceil(Math.random() * 25)) {
     mobs.spawn(x, y, 5, radius, "rgb(221,102,119)");
     let me = mob[mob.length - 1];
-    me.accelMag = 0.0004 * game.accelScale;
+    me.accelMag = 0.0003 * game.accelScale;
     me.g = 0.0002; //required if using 'gravity'
     me.frictionStatic = 0;
     me.friction = 0;
-    me.delay = 90;
+    me.delay = 100;
     Matter.Body.rotate(me, Math.PI * 0.1);
     me.onDamage = function () {
       this.cd = game.cycle + this.delay;

style.css

@@ -208,8 +208,12 @@ em {
   opacity: 0.7;
 }
 
+.mouse-icon {
+  margin-bottom: -20px;
+}
+
 .color-f {
-  color: #0bf;
+  color: #0af;
 }
 
 .color-b {
@@ -255,7 +259,7 @@ em {
 }
 
 .field {
-  background: #0bf;
+  background: #0af;
 }
 
 .mod {
@@ -264,6 +268,12 @@ em {
 
 .gun {
   background: #149;
+  margin-bottom: -2px;
+}
+
+.heal {
+  background: #0d9;
+  margin-bottom: -2px;
 }
 
 .box {
@@ -285,48 +295,6 @@ em {
   justify-self: center;
 }
 
-.mouse {
-  color: #ccc;
-  position: relative;
-  padding: 37px 30px 37px 30px;
-  border-radius: 25px;
-  border: 2px solid #444;
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-.mouse:after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: 4px;
-  left: 26px;
-  border-radius: 25px;
-  /* background: #444; */
-  border: 2px solid #444;
-
-  width: 4px;
-  height: 20px;
-  border-radius: 10px / 25px;
-}
-
-.mouse-line {
-  position: relative;
-  top: 30px;
-  left: 0px;
-}
-
-.mouse-line:after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: -35px;
-  left: -30px;
-  width: 60px;
-  height: 2px;
-  border-radius: 8px;
-  background: #444;
-}
-
 .right {
   text-align: right;
 }