Merge pull request #4 from AlexeyVin273/dev

feat(playground): Завершает скрипты для анимации игрового поля
AlexeyVin273 · Aug 30, 2023 · 7ce5bdc · 7ce5bdc
2 parents 26d88ac + dda5e46
commit 7ce5bdc
Show file tree

Hide file tree

Showing 14 changed files with 405 additions and 50 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,3 +1,3 @@
 {
-  "extends": "./stylelintconfig.js"
+  "extends": "./stylelintconfig.cjs"
 }
diff --git a/source/js/modules/bets.js b/source/js/modules/bets.js
@@ -71,7 +71,7 @@ export class Bets {
     this.isDisabled = true;
   }
 
-  eneble() {
+  enable() {
     this.isDisabled = false;
   }
 
@@ -108,18 +108,32 @@ export class Bets {
     this.deactivateCounter = true;
   }
 
+  getKeyCode(str) {
+    return str.charCodeAt(str.length - 1);
+  }
+
   onValueKeyDown(evt) {
-    evt.preventDefault();
-    const oldValue = this.value.textContent;
-    if (evt.key >= '0' && evt.key <= '9') {
-      const newValue = oldValue + evt.key;
-      if (newValue <= this.maxValue) {
-        this.set(Number(newValue));
+    setTimeout(() => {
+      let key = evt.key;
+      const code = evt.which || evt.ketCode;
+      if (code === 0 || code === 229) { // bugfix for android keyboard
+        const value = this.valueInput.value;
+        key = value.substring(value.length - 1);
       }
-    }
 
-    if (evt.key === 'Backspace') {
-      this.set(Number(oldValue.substr(0, oldValue.length - 1)));
-    }
+      const oldValue = this.value.textContent;
+      if (key >= '0' && key <= '9') {
+        const newValue = oldValue + key;
+        if (newValue <= this.maxValue) {
+          this.set(Number(newValue));
+        }
+      }
+
+      if (key === 'Backspace') {
+        this.set(Number(oldValue.substr(0, oldValue.length - 1)));
+      }
+
+      this.valueInput.value = '';
+    }, 0);
   }
 }
diff --git a/source/js/modules/playground.js b/source/js/modules/playground.js
@@ -6,9 +6,12 @@ const stats = {
   maxStars: 0,
   coins: 0,
   bets: 0,
-  win: 0,
   isSpinMade: false,
   isGameStarted: false,
+  startSpeed: 100,
+  maxSpeed: 30,
+  acceleration: 5,
+  winFrequency: 3,
 };
 
 export class Playground {
@@ -25,6 +28,8 @@ export class Playground {
     this.coinsNumber = this.container.querySelector('.playground__coins-number');
     this.autoButton = this.container.querySelector('.playground__auto-btn');
     this.spinButton = this.container.querySelector('.playground__spin-btn');
+    this.winWord = this.container.querySelector('.playground__winning-text');
+    this.wonSumm = this.container.querySelector('.playground__winning-summ');
 
     const starsNumber = this.starsNumber.textContent;
     stats.stars = Number(starsNumber.substring(0, starsNumber.indexOf('/')));
@@ -39,9 +44,13 @@ export class Playground {
 
     this.onAutoButtonClick = this.onAutoButtonClick.bind(this);
     this.onSpinButtonClick = this.onSpinButtonClick.bind(this);
+    this.onSlotsFinished = this.onSlotsFinished.bind(this);
 
     this.autoButton.addEventListener('click', this.onAutoButtonClick);
     this.spinButton.addEventListener('click', this.onSpinButtonClick);
+    this.container.addEventListener('onslotsfinished', this.onSlotsFinished);
+
+    this.disableButton(this.autoButton);
   }
 
   writeOffCoins(coins) {
@@ -56,15 +65,16 @@ export class Playground {
   }
 
   onAutoButtonClick() {
-    if (!stats.isSpinMade) {
-      alert('Ставка не сделана');
+    if (stats.isGameStarted) {
+      this.slots.stop();
       return;
     }
 
     stats.isGameStarted = true;
     this.bets.disable();
+    this.disableButton(this.spinButton);
 
-    this.slots.start();
+    this.slots.start(stats);
   }
 
   onSpinButtonClick() {
@@ -83,5 +93,46 @@ export class Playground {
     stats.bets = newBets;
 
     stats.isSpinMade = true;
+    this.enableButton(this.autoButton);
+    this.hideWinnings();
+  }
+
+  onSlotsFinished(evt) {
+    this.enableButton(this.spinButton);
+    this.disableButton(this.autoButton);
+    this.bets.enable();
+
+    if (evt.detail.isWinner) {
+      const winnings = stats.bets * 5;
+      this.showWinnings(winnings);
+      this.accrueCoins(winnings);
+      setTimeout(() => {
+        this.hideWinnings();
+      }, 10000);
+    }
+
+    stats.bets = 0;
+    stats.isGameStarted = false;
+    stats.isSpinMade = false;
+  }
+
+  disableButton(button) {
+    button.setAttribute('disabled', '');
+  }
+
+  enableButton(button) {
+    button.removeAttribute('disabled');
+  }
+
+  hideWinnings() {
+    this.winWord.classList.remove('is-shown');
+    this.wonSumm.classList.remove('is-shown');
+    this.wonSumm.textContent = '0,000';
+  }
+
+  showWinnings(coins) {
+    this.winWord.classList.add('is-shown');
+    this.wonSumm.classList.add('is-shown');
+    this.wonSumm.textContent = coins;
   }
 }