final solution

nikuzz · May 31, 2020 · 9d2e8bb · 9d2e8bb
1 parent 29cd611
commit 9d2e8bb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -24,11 +24,11 @@
                     </b-form>
                 </b-navbar-nav>
                 <b-navbar-nav class="ml-auto">
-                    <b-button-close v-on:click="close"></b-button-close>
+                    <b-button-close v-on:click="closeFullScreeen"></b-button-close>
                 </b-navbar-nav>
             </b-navbar>
-            <div id="emdr-squares">
-                <span v-bind:class="[circle ? 'circle' : '', 'emdr-square']" v-for="n in squareNumber" v-bind:style="{ backgroundColor: ( n == squareActive ? foreground : background ), width: width + 'px', height: width + 'px' }"></span>
+            <div id="emdr-squares" v-on:click="toggleRun">
+                <span v-bind:class="[circle ? 'circle' : '', 'emdr-square']" v-for="n in squareNumber" v-bind:style="{ backgroundColor: ( n == squareActive ? foreground : background ), width: width + 'px', height: width + 'px', marginTop: (direction == '1' ? squareMarginTop * n + 'px' : 'auto'), marginBottom: (direction == '2' ? squareMarginTop * n + 'px' : 'auto')}"></span>
             </div>
         </div>
         <script src="dist/app.js"></script>

diff --git a/src/app.js b/src/app.js
@@ -10,7 +10,6 @@ var app = new Vue({
     data: {
         directions: [
             {value: 'H', text: 'Horizontal [H]'},
-            {value: 'V', text: 'Vertical [V]'},
             {value: '1', text: 'Oblicua 1 [1]'},
             {value: '2', text: 'Oblicua 2 [2]'},
         ],
@@ -19,26 +18,28 @@ var app = new Vue({
         durationTotal: 30,
         startRun: 0,
         startRound: 0,
-        runDirection: 0,
         width: 30,
         background: 'rgb(0,0,0)',
         foreground: 'rgb(255,0,0)',
         sound: false,
         menu: true,
-        fullscreen: false,
         isRun: false,
         windowWidth: window.innerWidth,
         windowHeight: window.innerHeight,
         squareActive: 1,
         circle: false,
         roundProgress: null,
+        timeoutClick: null,
     },
     computed: {
         squareNumber: function () {
             return Math.min(Math.floor(this.windowWidth / this.width), Math.ceil(this.windowWidth / this.speed));
         },
         roundInterval: function () {
             return (((60 / this.speed)) * 1000);
+        },
+        squareMarginTop: function () {
+            return this.windowHeight / (this.squareNumber + 1);
         }
     },
     methods: {
@@ -84,6 +85,11 @@ var app = new Vue({
             } else {
                 var nextSquareActive = Math.ceil((1 - this.roundProgress) * this.squareNumber);
                 if (nextSquareActive <= 1) {
+                    //check duration
+                    if ((timestamp - this.startRun) >= (this.durationTotal * 1000)) {
+                        this.isRun = false;
+                        return;
+                    }
                     this.startRound = timestamp;
                     this.runDirection = 0;
                     this.squareActive = 1;
@@ -96,18 +102,24 @@ var app = new Vue({
             }
             window.requestAnimationFrame(this.nextSquare);
         },
-        close() {
+        closeFullScreeen() {
             document.exitFullscreen();
         },
+        fullScreen() {
+            if (document.fullscreenEnabled) {
+                document.documentElement.requestFullscreen();
+            }
+        },
+        toggleRun() {
+            this.isRun = !this.isRun;
+        },
     },
     watch: {
         isRun: function (val) {
             if (val) {
                 this.menu = false;
                 this.startRun = null;
-                if (document.fullscreenEnabled) {
-                    document.documentElement.requestFullscreen();
-                }
+                this.fullScreen();
                 if (this.sound) {
                     playSound("left");
                 }
@@ -164,9 +176,6 @@ var app = new Vue({
                 case 72: //h
                     this.direction = 'H';
                     break;
-                case 86: //v
-                    this.direction = 'V';
-                    break;
                 case 49: //1
                 case 97: //1
                     this.direction = '1';