Whac a mole implementation

package.json

@@ -15,14 +15,14 @@
     "mithril": "^2.0.4",
     "mithril-tsx-component": "^3.0.1",
     "parcel": "^1.12.4",
-    "prismjs": "^1.17.1",
-    "sass": "^1.22.12"
+    "prismjs": "^1.17.1"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-env": "^1.7.0",
+    "sass": "^1.23.7",
     "typedoc": "^0.15.0",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.3"
   }
 }

web/src/event/_event.scss

@@ -1,108 +1,63 @@
-$event-img-margin: 350px;
+.Game {
+  padding: 0;
+  margin: 0;
+  background: url(../img/events/thumbnail_784789.jpg) bottom center no-repeat;
+  background-size: contain;
+  -webkit-background-size: cover;
+  padding: 100px 0;
+
+  h1 {
+    text-align: center;
+    font-size: 3rem;
+    line-height: 1;
+    margin-bottom: 0;
+    color: brown;
+  }
+}
 
-.Event2 {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-
-    h1, h2, h3, h4 {
-        font-family: Pixel;
-        color: $primary-color;
-        background: linear-gradient(to right, $code-color, $primary-color);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }
-    h2:before {
-        content: "# ";
-        color: black;
-        -webkit-text-fill-color: black;
-        margin-left: -1rem;
-    }
-    h3:before {
-        content: "# ";
-        color: white;
-        -webkit-text-fill-color: white;
-        margin-left: -1rem;
-    }
-    h2 {
-        font-size: 1.7rem;
-        color: $code-color;
-    }
-    h3 {
-        font-size: 1.1rem;
-        color: $code-color;
-    }
-    h4 {
-        font-size: 0.9rem;
-    }
-    &-overlay {
-        position: fixed;
-        background: rgba(255, 255, 255, 0.9);
-        backdrop-filter: blur(5px);
-        width: 100vw;
-        height: 100vh;
-        z-index: 999;
-    }
-    &-content {
-        background: white;
-        box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.25), 
-                    2px 2px 32px -2px rgba(0, 0, 0, 0.25);
-        border: 5px solid black;
-        border-radius: 4px;
-        color: black;
-        height: 100vh;
-        margin: 0;
-        padding-left: $event-img-margin;
-        position: relative;
-        z-index: 1000;
-    }
-    &-description {
-        //background: url('../img/bg/interlaced.png');
-        background-clip: border-box;
-        padding: 1.5rem;
-        min-height: 25%;
+.score {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 0 3rem;
+  line-height: 1;
+  border-radius: 1rem;
+}
 
-        *:last-child {
-            margin-bottom: 0;
-        }
-    }
-    &-question {
-        background: black;
-        padding: 0.75rem 1.5rem;
-
-        h3 {
-            margin: 0;
-        }
-    }
-    &-choiceList {
-        @extend .columns;
-    }
-    &-choice {
-        @extend .column, .col-6;
-        padding: 0.75rem 1.5rem;
-        transition: transform, box-shadow, border-radius 200ms;
-        position: relative;
+.game {
+  width: 600px;
+  height: 400px;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 auto;
+}
 
-        &:hover {
-            background: white;
-            border-radius: 5px;
-            box-shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.15),
-                        0 0 3px 2px rgba(0, 0, 0, 0.25);
-            transform: scale(1.02);
-            z-index: 1001;
-        }
-        &:not(:last-child):not(:hover):after {
-            background: #eee;
-            content: "";
-            position: absolute;
-            right: 0;
-            top: 40px;
-            width: 4px;
-            height: 30vh;
-        }
-    }
-}
+.hole {
+  flex: 1 0 33.33%;
+  overflow: hidden;
+  position: relative;
+}
+
+.hole:after {
+  display: block;
+  background: url(../img/events/terra.svg) bottom center no-repeat;
+  background-size: contain;
+  content: "";
+  width: 100%;
+  height: 70px;
+  position: absolute;
+  z-index: 2;
+  bottom: -30px;
+}
+
+.mole {
+  background: url(../img/events/rrr.png) bottom center no-repeat;
+  background-size: 60%;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  height: 100%;
+  transition: all 0.4s;
+}
+
+.hole.up .mole {
+  top: 0;
+}

web/src/event/event.tsx

@@ -1,71 +1,93 @@
 import m from 'mithril';
-import { Window, Tab, Tabs, Btn, Sidebar, Component } from '../ui';
-import terminatorImg from '../../img/events/terminator.jpg';
-import { Culture, CultureTabs } from '../culture/culture';
-
-let event = {
-    img: terminatorImg,
-}
+import { Window } from '../ui';
 
 /**
  * Componente para janela de evento.
- */
+*/
 export class Event {
+    bonk: any;
+    startGame: any;
+
     view() {
         return <Window>
-            <Sidebar src={event.img} title="Importante!"/>
-            <Tabs>
-                <Tab title="Tab 1">
-                    Tab 1 content
+            <div class="Game">
+                <h1>Whack-a-mole! <span class="score">0</span></h1>
+                <button class="nes-btn is-primary" onclick={() => this.startGame() }>Start!</button>
 
-                </Tab>
-                <Tab title="Tab 2">
-                    Tab 2 content
-                </Tab>
-                <Tab title="Tab 3">
-                    Tab 3 content
-                </Tab>
-            </Tabs>
+                <div class="game">
+                    <div class="hole hole1">
+                        <div class="mole"></div>
+                    </div>
+                    <div class="hole hole2">
+                        <div class="mole"></div>
+                    </div>
+                    <div class="hole hole3">
+                        <div class="mole"></div>
+                    </div>
+                    <div class="hole hole4">
+                        <div class="mole"></div>
+                    </div>
+                    <div class="hole hole5">
+                        <div class="mole"></div>
+                    </div>
+                    <div class="hole hole6">
+                        <div class="mole"></div>
+                    </div>
+                </div>
+            </div>
         </Window>
     }
-}
 
-let ev = (
-    <div class="Event" style="display: block">
-        <div class="Event-content">
-            <div class="Event-image"></div>
-            <div class="Event-description">
-                <h2>Exterminador do Futuro</h2>
-                <blockquote>Hasta la vista, baby!</blockquote>
-                <p>Um guerreiro foi enviado do Futuro para salvar o planeta.</p>
-            </div>
-            <div class="Event-question"><h3>O que você deseja fazer?</h3></div>
-            <div class="Event-choiceList">
-                <div class="Event-choice">
-                    <h4>Eliminar um Illuminati à sua escolha</h4>
-                    <dl>
-                        <dd>Chance de sucesso</dd><dd>70%</dd>
-                        <dd>Fracasso</dd>
-                        <dd>
-                            <ul>
-                                <li>Illuminati aumenta seu poder em 5%</li>
-                                <li>Você perde 10% de poder</li>
-                            </ul>
-                        </dd>
-                    </dl>
-                    <button class="nes-btn is-primary">Não se faz um omelete sem quebrar uns ovos</button>
-                </div>
+    oncreate() {
+        const holes = document.querySelectorAll('.hole');
+        const scoreBoard : HTMLElement = document.querySelector('.score');
+        const moles = document.querySelectorAll('.mole');
+        let lastHole;
+        let timeUp = false;
+        let score = 0;
 
-                <div class="Event-choice">
-                    <h4>Adotá-o como segurança privado</h4>
-                    <dl><dd>Chance de sucesso</dd><dd>70%</dd></dl>
-                    <ul>
-                        <li>Aumenta o seu poder em 5%</li>
-                    </ul>
-                    <button class="nes-btn is-primary">Vamos jogar tranquilo e na defensiva</button>
-                </div>
-            </div>
-        </div>
-    </div>
-);
+        function randomTime(min, max) {
+            return Math.round(Math.random() * (max - min) + min);
+        }
+
+        function randomHole(holes) {
+            const idx = Math.floor(Math.random() * holes.length);
+            const hole = holes[idx];
+            if (hole === lastHole) {
+                console.log('Ah nah thats the same one bud');
+                return randomHole(holes);
+            }
+            lastHole = hole;
+            return hole;
+        }
 
+        function peep() {
+            const time = randomTime(200, 1000);
+            const hole = randomHole(holes);
+            hole.classList.add('up');
+            setTimeout(() => {
+                hole.classList.remove('up');
+                if (!timeUp) peep();
+            }, time);
+        }
+
+        function startGame() {
+            console.log('Starting...');
+            scoreBoard.textContent = "0";
+            timeUp = false;
+            score = 0;
+            peep();
+            setTimeout(() => timeUp = true, 10000)
+        }
+
+        function bonk(e) {
+            if (!e.isTrusted) return; // cheater!
+            score++;
+            this.parentNode.classList.remove('up');
+            scoreBoard.textContent = score.toString();
+        }
+
+        moles.forEach(mole => mole.addEventListener('click', bonk));
+        this.startGame = startGame;
+    }
+}