balloons: size controls

DimaIT · Feb 18, 2020 · 46920c4 · 46920c4
1 parent 9b1b432
commit 46920c4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/static/balloons/index.html b/static/balloons/index.html
@@ -30,7 +30,19 @@
 <body>
 <div id="controls">
  <div class="container">
- <button class="btn btn-primary" onclick="start()">Start</button>
+ <div class="form-group">
+ <label for="balloon-size">Balloon radius</label>
+ <input type="number" class="form-control" id="balloon-size" value="50">
+ </div>
+ <div class="form-group">
+ <label for="target-area-size">Target area radius</label>
+ <input type="number" class="form-control" id="target-area-size" value="100">
+ </div>
+ <div class="form-group">
+ <label for="pop-time">Time to pop balloon (ms)</label>
+ <input type="number" class="form-control" id="pop-time" value="2000">
+ </div>
+ <button class="btn btn-lg btn-primary" onclick="start()">Start</button>
  </div>
 </div>
 
@@ -47,7 +59,8 @@
  top: 30px;
  text-align: center;
  line-height: 30px;
- font-size: 40px
+ font-size: 40px;
+ font-weight: lighter;
  ">
  ⊕
  </div>

diff --git a/static/balloons/index.js b/static/balloons/index.js
@@ -1,6 +1,6 @@
-const BALLOON_RADIUS = 50;
-const TARGET_RADIUS = 100;
-const DEFAULT_HEALTH = 2000; // ms
+let BALLOON_RADIUS = 50;
+let TARGET_RADIUS = 100;
+let DEFAULT_HEALTH = 2000; // ms
 
 const canvas = document.getElementById('canvas');
 const balloonTemplate = document.getElementById('balloon-template');
@@ -37,7 +37,18 @@ class Balloon {
  createNode() {
  const b = balloonTemplate.content.querySelector('.balloon').cloneNode(true);
  this.node = b;
+
  this.targetNode = b.querySelector('.target');
+ this.targetNode.style.left = (BALLOON_RADIUS * 0.6) + 'px';
+ this.targetNode.style.top = (BALLOON_RADIUS * 0.6) + 'px';
+ this.targetNode.style.width = (BALLOON_RADIUS * 0.8) + 'px';
+ this.targetNode.style.height = (BALLOON_RADIUS * 0.8) + 'px';
+ this.targetNode.style['font-size'] = (BALLOON_RADIUS * 0.8) + 'px';
+ this.targetNode.style['line-height'] = (BALLOON_RADIUS * 0.6) + 'px';
+
+ this.balloonNode = b.querySelector('svg');
+ this.balloonNode.setAttribute('height', `${BALLOON_RADIUS * 2}`);
+ this.balloonNode.setAttribute('width', `${BALLOON_RADIUS * 2}`);
 
  const left = randomInt(window.innerWidth - 2 * BALLOON_RADIUS);
  b.style.left = left + 'px';
@@ -104,6 +115,10 @@ function nextTick() {
 
 function start() {
  console.log('start');
+ BALLOON_RADIUS = parseInt(document.getElementById('balloon-size').value);
+ TARGET_RADIUS = parseInt(document.getElementById('target-area-size').value);
+ DEFAULT_HEALTH = parseInt(document.getElementById('pop-time').value);
+
  canvas.style.display = 'block';
  state.balloon = new Balloon();
  window.addEventListener('mousemove', mouseMoveHandler);