Benjamin Geck

PostsAboutContact

Score Wars


ScoreWars.com is a site that I was the lead Front End developer on. It was in the old times..the before times, 2 years ago. When the team was still small and SPAs were in full swing. The site had some really fun aspects to it that were challenges to figure out.

One of the main challenges was how to make it feel like an actual Arcade cabinet across devices. The way we approached it was to focus on the controls of the "cabinet", and on the flickering screen / monitor. The video below shows both of these, so check it out, but its easier to see how it works by actually going to https://scorewars.com.

Codebase: PHP (Wordpress), JS, LESS

The Controls

Bear in mind this was in the good old days before flex and grid became super solid. Also note, this site is based on bootstrap 3 and needed to work well within that framework. I've come to rely less and less on frameworks over the years as it tends to be so much bulk and locks you into a specific moment in time. It's a bit of a hack, but ends up working out nicely.

1// Tablets and above handle the controls in one way2@media only screen and (max-width: @screen-sm-max) {3  .footer-container {4    height: 128px;56    .site-footer {7      .game-button-left {8        height: 128px;9      }10      .meow-callout {11        align-items: left;12        text-align: left;13        height: 92px;14        .meow-logo-shadow {15          width: 80%;16        }17      }18      .game-button-right {19        height: 150px;20      }21    }22  }23}
1// Phones then make adjustments2@media only screen and (max-width: @screen-xs-max) {3  .footer-container {4    height: 63px;5    border-top: 17px solid #015dfd;6    box-shadow: 0px 0px 0px 20px #000;78    .site-footer {9      .game-button-left {10        height: 100px;11      }12      .meow-callout {13        height: 65px;14        top: -17px;15        h5 {16          margin: 0;17        }18        .meow-logo-shadow {19          margin-top: 3px;20          width: 60%;21        }22      }23      .game-button-right {24        height: 104px;25      }26    }27  }28}
1// Tiny Devices (older phones) need a little extra,2// by removing the meow wolf logo.3@media only screen and (max-width: 480px) {4  .meow-callout {5    display: none !important;6  }7}
1// And we also need to take care of landscape orientated devices2@media only screen and (max-width: @screen-xs-max) and (orientation: landscape) {3  .footer-container {4    height: 49px;5    border-top: 27px solid #015dfd;6    box-shadow: 0px 0px 0px 14px #000;7    .site-footer {8      .game-button-left {9        display: block !important;10        height: 49px;11      }12      .game-button-right {13        height: 81px;14      }15    }16  }17}

The flickering Screen

The flickering screen itself is entirely css based, using a single class + the :before and :after pseudo-selectors.

Here's the general setup:

1// The screen shine and the corner shadows2.screen {3  background: linear-gradient(4    145deg,5    rgba(173, 233, 6, 0.13) 0%,6    rgba(173, 233, 6, 0.05) 50%,7    rgba(173, 233, 6, 0.1) 50.5%,8    rgba(173, 233, 6, 0.214) 100%9  );10  box-shadow: inset 0px 0px 18.5vw 0vw rgba(0, 0, 0, 0.572), inset 0px 0px 4.5vw11      0vw rgba(0, 0, 0, 0.7), 0px 0px 0px 13vw #000000;12  border-radius: 2.5vw;13  pointer-events: none;14  position: fixed;15  top: 80px;16  margin: 0 2.5%;17  width: 95%;18  z-index: 0;19}2021// The screen grid22.screen::before {23  _content_: " ";24  display: block;25  position: absolute;26  top: 0;27  left: 0;28  bottom: 0;29  right: 0;30  background: linear-gradient(31      rgba(18, 16, 16, 0) 50%,32      rgba(71, 71, 71, 0.25) 50%33    ), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));34  z-index: 2;35  background-size: 100% 2px, 3px 100%;36  pointer-events: none;37  border-radius: 1.9vw;38  box-shadow: 0px 0px 11vw rgba(173, 233, 6, 0.18);39}4041// The animation42.screen::after {43  _content_: " ";44  display: block;45  position: absolute;46  top: 0;47  left: 0;48  bottom: 0;49  right: 0;50  background: rgba(87, 90, 86, 0.2);51  opacity: 0;52  z-index: 2;53  pointer-events: none;54  animation: flicker 6s infinite;55  border-radius: 1.9vw;56}5758// Custom CRT flicker from http://aleclownes.com/2017/02/01/crt-display.html59@keyframes flicker {60  0% {61    opacity: 0.27861;62  }63  5% {64    opacity: 0.34769;65  }66  10% {67    opacity: 0.23604;68  }69  15% {70    opacity: 0.40626;71  }72  20% {73    opacity: 0.18128;74  }75  25% {76    opacity: 0.53891;77  }78  30% {79    opacity: 0.45583;80  }81  35% {82    opacity: 0.47807;83  }84  40% {85    opacity: 0.26559;86  }87  45% {88    opacity: 0.54693;89  }90  50% {91    opacity: 0.46019;92  }93  55% {94    opacity: 0.08594;95  }96  60% {97    opacity: 0.20313;98  }99  65% {100    opacity: 0.41988;101  }102  70% {103    opacity: 0.53455;104  }105  75% {106    opacity: 0.37288;107  }108  80% {109    opacity: 0.51428;110  }111  85% {112    opacity: 0.40419;113  }114  90% {115    opacity: 0.1003;116  }117  95% {118    opacity: 0.36108;119  }120  100% {121    opacity: 0.24387;122  }123}

Additional Images