X-Wing Targeting Computer

index.html

<div class="grid">

  <div class="l-one"></div>
  <div class="l-two"></div>
  <div class="l-three"></div>
  <div class="l-four"></div>
  <div class="l-five"></div>
  <div class="l-six"></div>

  <div class="r-one"></div>
  <div class="r-two"></div>
  <div class="r-three"></div>
  <div class="r-four"></div>
  <div class="r-five"></div>
  <div class="r-six"></div>

  <div class="l-red"></div>
  <div class="r-red"></div>
  
  <div class="wall-1"></div>
  <div class="wall-2"></div>
  <div class="wall-3"></div>
  <div class="wall-4"></div>
  <div class="wall-5"></div>
  
</div>

<div class="coordinates">
  <span></span>
</div>

style.scss

* {
  box-sizing: border-box;
}

body {
  background-color: #0d1007;
}

.grid {
  height: 325px;
  width:  590px;
  border: 3px solid #bdbb12;
 /* box-shadow: 0 0 15px #9a962f;  yes or no? */
  border-radius: 30px; /* or 35px? */
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}


.l-one {
  background-color: #bdbb12;
  height: 3px;
  width: 230px;
  transform: rotate(45deg);
  position: absolute;
  top: 79px;
  left: 100px; 
}

.l-two {
  background-color: #bdbb12;
  height: 3px;
  width: 303px;
  transform: rotate(32deg);
  position: absolute;
  top: 77px;
  left: 10px; 
}

.l-three {
  background-color: #bdbb12;
  height: 3px;
  width: 300px;
  transform: rotate(11deg);
  position: absolute;
  top: 127px;
  left: -5px; 
}

.l-four {
  background-color: #bdbb12;
  height: 3px;
  width: 300px;
  transform: rotate(-11deg);
  position: absolute;
  top: 186px;
  left: -5px; 
}


.l-five {
  background-color: #bdbb12;
  height: 3px;
  width: 303px;
  transform: rotate(-32deg);
  position: absolute;
  bottom: 77px;
  left: 10px;
}

.l-six {
  background-color: #bdbb12;
  height: 3px;
  width: 230px;
  transform: rotate(-45deg);
  position: absolute;
  bottom: 79px;
  left: 100px; 
}

.r-one {
  background-color: #bdbb12;
  height: 3px;
  width: 230px;
  transform: rotate(-45deg);
  position: absolute;
  top: 79px;
  right: 100px; 
}



.r-two {
  background-color: #bdbb12;
  height: 3px;
  width: 303px;
  transform: rotate(-32deg);
  position: absolute;
  top: 77px;
  right: 10px; 
}

.r-three {
  background-color: #bdbb12;
  height: 3px;
  width: 300px;
  transform: rotate(-11deg);
  position: absolute;
  top: 127px;
  right: -5px; 
}

.r-four {
  background-color: #bdbb12;
  height: 3px;
  width: 300px;
  transform: rotate(11deg);
  position: absolute;
  top: 186px;
  right: -5px; 
}




.r-five {
  background-color: #bdbb12;
  height: 3px;
  width: 303px;
  transform: rotate(32deg);
  position: absolute;
  bottom: 77px;
  right: 10px;
}

.r-six {
  background-color: #bdbb12;
  height: 3px;
  width: 230px;
  transform: rotate(45deg);
  position: absolute;
  bottom: 79px;
  right: 100px; 
}


.l-red {
  background-color: red;
  height: 5px;
  width: 321px;
  transform: rotate(90deg);
  position: absolute;
  top: 156px;
  left: -125px; 
  z-index: -1;
  animation: l-to-r 9s infinite  linear;
}

.r-red {
  background-color: red;
  height: 5px;
  width: 321px;
  transform: rotate(90deg);
  position: absolute;
  top: 156px;
  right: -125px; 
  z-index: -1;
  animation: r-to-l 9s infinite linear; 
}



.wall-1 {
  width: 4%;
  height: 7%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #bdbb12;
  border-top: transparent;  
  animation: wall-1 0.2s infinite linear; 
}



.wall-2 {
  width: 12%;
  height: 23%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #bdbb12;
  border-top: transparent;  
  animation: wall-2 0.2s infinite linear; 
}


.wall-3 {
  width: 27%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #bdbb12;
  border-top: transparent;  
 animation: wall-3 0.2s infinite linear; 
}


.wall-4 {
  width: 54%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #bdbb12;
  border-top: transparent; 
 animation: wall-4 0.2s infinite linear; 
}



.wall-5 {
  width: 96%;
  height: 125%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #bdbb12;
  border-top: transparent; 
  border-bottom: transparent;
  animation: wall-5 0.2s infinite linear; 

}



.coordinates {
  height: 65px;
  width:  365px;
  border: 3px solid #bdbb12;
  border-radius: 20px; /* or 35px? */
  margin: auto;
  margin-top: -7px;
  position: relative;
 
}


.coordinates span:after {
  content: "032968";
  color: red;
  font-size: 75px;
  font-family: 'Athiti', sans-serif;
  letter-spacing: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: odometer linear infinite; 
}






@keyframes l-to-r {
  from {left: -125px;}
  to {left: 131px;}
}

@keyframes r-to-l {
  from {right: -125px;}
  to {right: 131px;}
}


@keyframes wall-1 {

  from {
    height: 0; 
    width: 0; 
   }
   to {
    width: 4%;
    height: 7%;
   }
}

@keyframes wall-2 {

  from {
   width: 4%;
   height: 7%;
   }
   to {
    width: 12%;
    height: 23%;
   }
}

@keyframes wall-3 {

   from {
    width: 12%;
    height: 23%;
   }
   to {
    width: 27%;
    height: 50%;
   }
}

@keyframes wall-4 {

  from {
   width: 27%;
   height: 50%;
   }
   to {
    width: 54%;
    height: 100%;
   }
}

@keyframes wall-5 {

  from {
    width: 54%;
    height: 100%;
   }
  to {
   width: 100%;
   height: 100%;
   }
}

x-wing-targeting-computer.markdown

X-Wing Targeting Computer

My first attempt at the X-Wing Targeting Computer. Still would like to figure out how to get the numbers to count down. And would like to add the target at the end as well.

A Pen by Kristopher Van Sant on CodePen.

License.