Replaced VueJs with vanila js for the simon game

Author: kingstenbanh

docs/css/style.css

@@ -5,7 +5,7 @@
   --brand-yellow: #ffba08;
   --brand-red: #f35325;
   --brand-green: #81bc06;
-  --white: #ffffff;
+  --white: #fff;
   --off-white: #bbb;
   --dark-grey: #121212;
   /* typeface defaults */
@@ -218,18 +218,6 @@ h1 {
   }
 }
 
-main p:nth-child(2) {
-  animation-delay: calc(var(--move-in-base-delay) * 6);
-}
-
-main p:nth-child(3) {
-  animation-delay: calc(var(--move-in-base-delay) * 7);
-}
-
-main p:nth-child(4) {
-  animation-delay: calc(var(--move-in-base-delay) * 8);
-}
-
 /* Logo */
 
 .logo-link {
@@ -239,12 +227,6 @@ main p:nth-child(4) {
   margin: var(--large-space) auto;
 }
 
-.logo-image {
-  display: block;
-  width: 100%;
-  height: auto;
-}
-
 .logo {
   display: flex;
   flex-wrap: wrap;
@@ -260,78 +242,44 @@ main p:nth-child(4) {
   margin: 2.5%;
   outline: 1px solid transparent;
   animation: var(--logo-tiles-in-animation);
-}
-
-.winner {
-  display: block;
-  margin: auto;
-  text-align: center;
-}
-
-.logo-tile--red {
-  background-color: var(--brand-red);
   transition: 150ms;
 }
 
-.logo-tile--largered {
-  background-color: var(--brand-red);
+.logo-tile.large {
   transform: scale(1.2) translateY(-3px);
-  transition: 150ms;
 }
 
-.logo-tile--red:active {
+.logo-tile:active {
   transform: scale(0.8);
 }
 
-.logo-tile--green {
-  background-color: var(--brand-green);
-  animation-delay: var(--logo-tiles-in-delay);
-  transition: 150ms;
+.logo-tile--red {
+  background-color: var(--brand-red);
 }
 
-.logo-tile--largegreen {
+.logo-tile--green {
   background-color: var(--brand-green);
-  transform: scale(1.2) translateY(-3px);
   animation-delay: var(--logo-tiles-in-delay);
-  transition: 150ms;
-}
-
-.logo-tile--green:active {
-  transform: scale(0.8);
 }
 
 .logo-tile--blue {
   background-color: var(--brand-blue);
   animation-delay: calc(var(--logo-tiles-in-delay) * 2);
-  transition: 150ms;
-}
-
-.logo-tile--largeblue {
-  background-color: var(--brand-blue);
-  transform: scale(1.2) translateY(-3px);
-  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
-  transition: 150ms;
-}
-
-.logo-tile--blue:active {
-  transform: scale(0.8);
 }
 
 .logo-tile--yellow {
   background-color: var(--brand-yellow);
   animation-delay: calc(var(--logo-tiles-in-delay) * 3);
-  transition: 150ms;
 }
 
-.logo-tile--largeyellow {
-  background-color: var(--brand-yellow);
-  transform: scale(1.2) translateY(-3px);
-  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
-  transition: 150ms;
+.winner {
+  display: none;
+  margin: auto;
+  text-align: center;
 }
 
-.logo-tile--yellow:active {
-  transform: scale(0.8);
+.winner.show {
+  display: block;
 }
 
 /* Main */

docs/index.html

@@ -24,32 +24,37 @@
     <header>
       <div class="logo-link" title="Microsoft Website">
         <div class="logo" role="img" aria-label="Microsoft Logo">
-          <span @click="clickColor('red')" class="logo-tile" v-bind:class="logoTitleRed"></span>
-          <span @click="clickColor('green')" class="logo-tile" v-bind:class="logoTitleGreen"></span>
-          <span @click="clickColor('blue')" class="logo-tile" v-bind:class="logoTitleBlue"></span>
-          <span @click="clickColor('yellow')" class="logo-tile" v-bind:class="logoTitleYellow"></span>
+          <span class="logo-tile logo-tile--red" data-color="red"></span>
+          <span class="logo-tile logo-tile--green" data-color="green"></span>
+          <span class="logo-tile logo-tile--blue" data-color="blue"></span>
+          <span class="logo-tile logo-tile--yellow" data-color="yellow"></span>
         </div>
       </div>
-      <span v-if="winner" class="winner">🎊 Simon says...A winner is you! 🎊</span>
+      <span class="winner">🎊 Simon says...A winner is you! 🎊</span>
     </header>
     <main>
       <h1>
-        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services on
+        Microsoft is looking for designers who code to help create the most compelling developer
+        tools&nbsp;&amp;&nbsp;services on
         the planet.
       </h1>
       <p>
-        We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and elsewhere.
+        We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and
+        elsewhere.
       </p>
       <p>
-        We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
+        We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and
+        build the future
         of software development.
       </p>
       <p>
-        We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
+        We believe in diversity, openness, and building delightful tools that empower every person and organization to
+        achieve more.
       </p>
       <p>
         Interested? Send a PR with any improvement to
-        <a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
+        <a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a>
+        or
         <a href="mailto:mmuno@microsoft.com" title="Email address for mmuno@microsoft.com">email us</a>.
       </p>
     </main>
@@ -81,48 +86,45 @@ <h1>
       </span>
       <span class="footer-piece footer-piece--separate">
         Created by
-        <a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
+        <a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a>
+        contributors on
         <a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
       </span>
     </p>
-    <script>
-      fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
+  </footer>
+  <script>
+    const getContributors = () => {
+      fetch("https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors")
         .then(response => {
           if (response.status !== 200) {
-            console.log('Looks like there was a problem. Status Code: ' + response.status);
-            return;
+            return console.log(
+              "Looks like there was a problem. Status Code: " + response.status
+            );
           }
+
           return response.json();
         })
-        .then(data => document.getElementById('contributors').innerText = data.length)
-        .catch(err => console.log('Fetch Error :-S', err));
-
-    </script>
-  </footer>
-    <script async src="scripts/ls.helper.js"></script>
-  <script async src="theme/theme.js"></script>
-  <script>
-    function logLogo(size) {
-      const style =
-        `font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
-      console.log('%c■     ', style);
-    }
+        .then(data => (document.getElementById("contributors").innerText = data.length))
+        .catch(err => console.log("Fetch Error :-S", err));
+    };
 
-    logLogo(100);
+    const logLogo = size => {
+      const style = `font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
+      console.log("%c■     ", style);
+    };
 
-  </script>
-  <script>
-    function markDocumentAsLoaded() {
-      setTimeout(function () {
-        document.documentElement.dataset.loaded = true
-      }, 1000)
-    }
+    document.addEventListener('DOMContentLoaded', () => {
+      document.documentElement.dataset.loaded = true;
 
-    addEventListener('load', markDocumentAsLoaded);
+      getContributors();
+      logLogo(100);
+    });
 
+    document.addEventListener('click', () => import('./simon.js'));
+    document.removeEventListener('click', null);
   </script>
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js "></script>
-  <script src="simon.js "></script>
+  <script async src="scripts/ls.helper.js"></script>
+  <script async src="theme/theme.js"></script>
 </body>
 
 </html>