Nixyri/AntimatterDimensionsSourceCode
1
0
Fork 0
mirror of https://github.com/IvarK/AntimatterDimensionsSourceCode.git synced 2024-11-21 11:31:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

notation wheel basis

Browse Source
This commit is contained in:
Omsi 2019-08-14 11:39:12 -07:00
parent 270d22cea1
commit 560882d1e3
8 changed files with 2509 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
images/wheel-marker.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

4
index.html
View File

@ -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>

179
javascripts/components/options/notation-wheel.js Normal file
View File

@ -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>
`
});

3
javascripts/components/options/options-button-grid.js
View File

@ -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>`
});

4
javascripts/core/extensions.js
View File

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

17
javascripts/lib/tweenmax.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2154
javascripts/lib/winwheel.js Normal file
View File

File diff suppressed because it is too large Load Diff

121
stylesheets/winwheel.css Normal file
View File

@ -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;
}