notation wheel basis

images/wheel-marker.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="58px" height="46px" viewBox="0 0 58 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="35.1057128%" y1="82.7823178%" x2="62.8992509%" y2="34.1408624%" id="linearGradient-1">
+            <stop stop-color="#DA4E8F" offset="0%"></stop>
+            <stop stop-color="#B32656" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="51.2374114%" y1="34.1408624%" x2="36.8070738%" y2="87.9919223%" id="linearGradient-2">
+            <stop stop-color="#DA4E8F" offset="0%"></stop>
+            <stop stop-color="#B32656" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Desktop-Web" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Lucky-Spin" transform="translate(-690.000000, -241.000000)" fill-rule="nonzero">
+            <g id="spinner" transform="translate(-4.000000, 106.000000)">
+                <g id="wheel" transform="translate(514.000000, 131.000000)">
+                    <g id="Spin">
+                        <g id="Group-2" transform="translate(176.250000, 4.000000)">
+                            <path d="M38.3238824,8.80309447 L60.1421473,41.3321441 C61.7572681,43.7401423 61.1145139,47.0015247 58.7065156,48.6166455 C57.8415572,49.1968006 56.8235859,49.5065789 55.7820808,49.5065789 L12.1455508,49.5065789 C9.24605589,49.5065789 6.89555083,47.1560739 6.89555083,44.2565789 C6.89555083,43.2150738 7.20532918,42.1971025 7.78548425,41.3321441 L29.6037492,8.80309447 C31.21887,6.39509619 34.4802524,5.752342 36.8882507,7.36746279 C37.4556491,7.7480349 37.9433103,8.23569605 38.3238824,8.80309447 Z" id="Triangle-Copy" fill="url(#linearGradient-1)" transform="translate(33.963816, 25.904605) scale(1, -1) translate(-33.963816, -25.904605) "></path>
+                            <path d="M36.0212508,6.50046289 L57.8395157,39.0295125 C59.4546365,41.4375107 58.8118823,44.6988931 56.4038841,46.3140139 C55.5389256,46.894169 54.5209544,47.2039474 53.4794492,47.2039474 L9.84291925,47.2039474 C6.94342431,47.2039474 4.59291925,44.8534423 4.59291925,41.9539474 C4.59291925,40.9124422 4.9026976,39.8944709 5.48285268,39.0295125 L27.3011176,6.50046289 C28.9162384,4.09246462 32.1776208,3.44971042 34.5856191,5.06483122 C35.1530175,5.44540332 35.6406787,5.93306448 36.0212508,6.50046289 Z" id="Triangle" fill="url(#linearGradient-2)" transform="translate(31.661184, 23.601974) scale(1, -1) translate(-31.661184, -23.601974) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

index.html

@@ -21,6 +21,7 @@
   <link rel="stylesheet" type="text/css" href="stylesheets/time-studies.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/tooltips.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/vis-network.css">
+  <link rel="stylesheet" type="text/css" href="stylesheets/winwheel.css">
   <script>
     (function(i, s, o, g, r, a, m) {
       i['GoogleAnalyticsObject'] = r;
@@ -70,6 +71,8 @@
 <script type="text/javascript" src="javascripts/lib/Sortable.min.js"></script>
 <script type="text/javascript" src="javascripts/lib/vuedraggable.umd.min.js"></script>
 <script type="text/javascript" src="javascripts/lib/Tween.min.js"></script>
+<script type="text/javascript" src="javascripts/lib/tweenmax.min.js"></script>
+<script type="text/javascript" src="javascripts/lib/winwheel.js"></script>
 <script type="text/javascript" src="javascripts/lib/gamma.js"></script>
 <script type="text/javascript" src="javascripts/lib/vue-split-pane.min.js"></script>
 <script type="text/javascript" src="javascripts/lib/chevrotain.min.js"></script>
@@ -190,6 +193,7 @@
 <script type="text/javascript" src="javascripts/components/options/options-button-grid.js"></script>
 <script type="text/javascript" src="javascripts/components/options/select-notation.js"></script>
 <script type="text/javascript" src="javascripts/components/options/select-theme.js"></script>
+<script type="text/javascript" src="javascripts/components/options/notation-wheel.js"></script>
 
 <script type="text/javascript" src="javascripts/components/statistics/statistics-tab.js"></script>
 <script type="text/javascript" src="javascripts/components/statistics/challenges/challenge-records-list.js"></script>

javascripts/components/options/notation-wheel.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Vue.component("notation-wheel", {
+  props: {
+    segments: {
+      default() {
+        return [
+          {
+            textFillStyle: '#fff',
+            fillStyle: '#000',
+            text: 'Prize 1'
+          },
+          {
+            textFillStyle: '#000',
+            fillStyle: '#fadede',
+            text: 'Prize 2'
+          },
+          {
+            textFillStyle: '#fff',
+            fillStyle: '#000',
+            text: 'Prize 3'
+          },
+          {
+            textFillStyle: '#000',
+            fillStyle: '#fadede',
+            text: 'Prize 4'
+          },
+          {
+            textFillStyle: '#fff',
+            fillStyle: '#000',
+            text: 'Prize 5'
+          },
+          {
+            textFillStyle: '#000',
+            fillStyle: '#fadede',
+            text: 'Prize 6'
+          },
+          {
+            textFillStyle: '#fff',
+            fillStyle: '#000',
+            text: 'Prize 7'
+          },
+          {
+            textFillStyle: '#000',
+            fillStyle: '#fadede',
+            text: 'Prize 8'
+          }
+        ]
+      }
+    }
+  },
+  data() {
+    return {
+      loadingPrize: false,
+      theWheel: null,
+      modalPrize: false,
+      wheelPower: 1,
+      wheelSpinning: false,
+      prizeName: 'BUY 1 GET 1',
+      WinWheelOptions: {
+        textFontSize: 14,
+        outterRadius: 410,
+        innerRadius: 25,
+        lineWidth: 8,
+        animation: {
+          type: 'spinOngoing',
+          duration: 0.5
+        }
+      }
+    }
+  },
+  computed: {
+    notations: () => Notations.all,
+    segments: () => {
+      const ret = [];
+      for (const notation of notations) {
+        const color = Math.floor(Math.random()*16777215).toString(16);
+        ret.push(
+          {
+            text: notation.name,
+            textFillStyle: `#${color}`,
+            fillStyle: `#${(Number(`0x1${color}`) ^ 0xFFFFFF).toString(16).substr(1)}`,
+          }
+        )
+      }
+    }
+  },
+  mounted() {
+    this.initSpin()
+  },
+  updated() { },
+  created() { },
+  methods: {
+    showPrize() {
+      this.modalPrize = true
+    },
+    hidePrize() {
+      this.modalPrize = false
+    },
+    startSpin() {
+      if (this.wheelSpinning === false) {
+        this.theWheel.startAnimation()
+        this.wheelSpinning = true
+        this.theWheel = new Winwheel({
+          ...this.WinWheelOptions,
+          numSegments: this.segments.length,
+          segments: this.segments,
+          animation: {
+            type: 'spinToStop',
+            duration: 5,
+            spins: 5,
+            callbackFinished: this.onFinishSpin
+          }
+        })
+
+        // example input prize number get from Backend
+        // Important thing is to set the stopAngle of the animation before stating the spin.
+
+        var prizeNumber = Math.floor(Math.random() * this.segments.length) // or just get from Backend
+        var stopAt = 360 / this.segments.length * prizeNumber - 360 / this.segments.length / 2 // center pin
+        // var stopAt = 360 / this.segments.length * prizeNumber - Math.floor(Math.random() * 60) //random location
+        this.theWheel.animation.stopAngle = stopAt
+        this.theWheel.startAnimation()
+        this.wheelSpinning = false
+      }
+    },
+    resetWheel() {
+      this.theWheel = new Winwheel({
+        ...this.WinWheelOptions,
+        numSegments: this.segments.length,
+        segments: this.segments
+      })
+
+      if (this.wheelSpinning) {
+        this.theWheel.stopAnimation(false) // Stop the animation, false as param so does not call callback function.
+      }
+
+      this.theWheel.rotationAngle = 0 // Re-set the wheel angle to 0 degrees.
+      this.theWheel.draw() // Call draw to render changes to the wheel.
+      this.wheelSpinning = false // Reset to false to power buttons and spin can be clicked again.
+    },
+    initSpin() {
+      this.loadingPrize = true
+      this.resetWheel()
+      this.loadingPrize = false
+    },
+    onFinishSpin(indicatedSegment) {
+      this.prizeName = indicatedSegment.text
+      this.showPrize()
+    }
+  },
+  template: `
+    <div class="vue-winwheel">
+      <div class="mobile-container">
+        <div class="wheel-wrapper">
+          <div class="canvas-wrapper">
+            <canvas id="canvas" width="310" height="310">
+              <p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try Google Chrome.</p>
+            </canvas>
+          </div>
+          <div class="button-wrapper">
+            <a class="btn btn-play" href="#" @click.prevent="startSpin()" v-if="!loadingPrize && !wheelSpinning">SPIN!</a>
+          </div>
+        </div>
+      </div>
+      <div class="custom-modal modal-mask" id="modalSpinwheel" v-if="modalPrize">
+        <div slot="body">
+          <a href="" @click.prevent="hidePrize()" class="modal-dismiss">
+            <i class="icon_close"></i>
+          </a>
+          <h2>
+            Yay you got the prize!!
+          </h2>
+          <h1> {{prizeName}}</h1>
+        </div>
+      </div>
+    </div>
+  `
+});

javascripts/components/options/options-button-grid.js

@@ -146,5 +146,8 @@ Vue.component("options-button-grid", {
           onclick="Modal.animationOptions.show();"
         >Animations</options-button>
       </div>
+      <div class="l-options-grid__row">
+        <notation-wheel/>
+      </div>
     </div>`
 });

javascripts/core/extensions.js

@@ -1,9 +1,7 @@
 "use strict";
 
 Array.prototype.distinct = function() {
-    return this.filter(function (value, index, self) {
+  return this.filter((value, index, self) => { return self.indexOf(value) === index });
-        return self.indexOf(value) === index;
-    });
 };
 
 Math.wrap = function(number, min, max) {

stylesheets/winwheel.css

@@ -0,0 +1,121 @@
+.vue-winwheel {
+	text-align: center;
+	background-size: cover;
+	background-position: center bottom;
+	background-repeat: no-repeat;
+}
+.vue-winwheel h1 {
+	color: #b32656;
+	font-family: 'Avenir', Helvetica, Arial, sans-serif;
+	font-size: 36px;
+	line-height: 90px;
+	letter-spacing: 4px;
+	margin: 0;
+}
+.vue-winwheel h2 {
+	margin: 0;
+}
+.vue-winwheel #modalSpinwheel.custom-modal .content-wrapper .content {
+	width: calc(100vw - 30px);
+	padding-top: 52px;
+}
+.vue-winwheel #modalSpinwheel.custom-modal .content-wrapper .content h2 {
+	text-transform: uppercase;
+	color: #b32656;
+	margin-bottom: 16px;
+	margin-top: 0;
+	font-family: 'Avenir', Helvetica, Arial, sans-serif;
+	font-size: 18px;
+	letter-spacing: 1.1px;
+	margin: 0;
+}
+.vue-winwheel #modalSpinwheel.custom-modal .content-wrapper .content p {
+	font-family: 'Avenir', Helvetica, Arial, sans-serif;
+	font-size: 14px;
+	color: black;
+	text-align: center;
+	line-height: 25px;
+}
+.vue-winwheel #modalSpinwheel.custom-modal .content-wrapper .content p strong {
+	font-family: 'Avenir', Helvetica, Arial, sans-serif;
+}
+.vue-winwheel #modalSpinwheel.custom-modal .content-wrapper .content .modal-dismiss {
+	top: 12px;
+	right: 12px;
+}
+.vue-winwheel #modalSpinwheel.custom-modal .content-wrapper .content .modal-dismiss i.icon_close {
+	font-size: 30px;
+	color: #da2a52;
+}
+.vue-winwheel canvas#canvas {
+	position: relative;
+}
+.vue-winwheel .canvas-wrapper {
+	position: relative;
+}
+.vue-winwheel .canvas-wrapper:after {
+	content: '';
+	display: block;
+	width: 42px;
+	background: #c4376f;
+	height: 42px;
+	position: absolute;
+	left: calc(50% - 25px);
+	margin: auto;
+	border-radius: 100%;
+	top: calc(50% - 29px);
+	border: 5px solid white;
+	box-sizing: content-box;
+}
+.vue-winwheel .canvas-wrapper:before {
+	content: '';
+	display: block;
+	width: 310px;
+	background: #0f0f0f;
+	height: 310px;
+	position: absolute;
+	left: 0;
+	right: 0;
+	margin: 0 auto;
+	border-radius: 100%;
+	top: 0;
+}
+.vue-winwheel .wheel-wrapper {
+	position: relative;
+}
+.vue-winwheel .wheel-wrapper:before {
+	content: '';
+	width: 62px;
+	height: 47px;
+	position: absolute;
+	top: -10px;
+	left: calc(50% - 31px);
+	right: 0;
+	display: block;
+	z-index: 99999;
+	background-image: url('../images/wheel-marker.svg');
+	background-repeat: no-repeat;
+	background-size: contain;
+	background-position: center;
+}
+.vue-winwheel .wheel-wrapper .button-wrapper {
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 231px;
+	height: 118px;
+}
+.vue-winwheel .wheel-wrapper .btn.btn-play {
+	padding: 0 58px !important;
+	background: #c4376f;
+	height: 40px;
+	line-height: 40px;
+	color: white;
+	font-weight: bold;
+	text-decoration: none;
+	border-radius: 2px;
+	font-family: 'Avenir', Helvetica, Arial, sans-serif;
+	letter-spacing: 2px;
+}