Skip to content

Commit

Permalink
Add “Wanna try” option.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lord-Kamina
Lord-Kamina committed Dec 14, 2018
1 parent aa4cbd3 commit d88d2ae
Show file tree
Hide file tree
Showing 2 changed files with 1,705 additions and 13 deletions.
88 changes: 75 additions & 13 deletions v1.0.2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMjEvMTV5ehY1AAAAZElEQVQ4jaWTwQ3AIAwDbcT+I9f9hjYQA/mAkO7igKAACWdFAF0A2gb0hP0uCyTATyAJSoaK5xGyEmTC9lktmORUdAQvBQ5cJshktoDk0HkmKRNUEmuE6ztYVXe7bT+jW7z9zi8qYiodCjCHKgAAAABJRU5ErkJggg==">
<style>
body {
Expand Down Expand Up @@ -33,7 +34,7 @@
}
th.choicesCol {
box-sizing: border-box;
width: 125px;
width: 146px;
}
th + th {
border-left: none;
Expand Down Expand Up @@ -520,6 +521,7 @@ <h1>Kink list</h1>
<div><span data-color="#FDFD6B" class="choice okay"></span> <span class="legend-text">Okay</span></div>
<div><span data-color="#DB6C00" class="choice maybe"></span> <span class="legend-text">Maybe</span></div>
<div><span data-color="#920000" class="choice no"></span> <span class="legend-text">No</span></div>
<div><span data-color="pattern" class="choice try"></span> <span class="legend-text">Want To Try</span></div>
</div>
<div id="ExportWrapper">
<input type="text" id="URL">
Expand Down Expand Up @@ -709,7 +711,6 @@ <h3 id="InputField"></h3>
</div>
</div>
<script>

var log = function(val, base) {
return Math.log(val) / Math.log(base);
};
Expand Down Expand Up @@ -742,10 +743,28 @@ <h3 id="InputField"></h3>
};

var kinks = {};
var inputKinks = {}
var colors = {}
var inputKinks = {};
var colors = {};
var level = {};

var hatchPattern = function(patCanvas, x1, y1, dx, dy, delta){
var patContext = patCanvas.getContext('2d');
patContext.rect(x1, y1, dx, dy);
patContext.save();
patContext.clip();
var majorAxe = _.max([dx, dy]);
patContext.strokeStyle = 'rgba(0, 0, 0, 0.5)';

_.each(_.range(-1*(majorAxe) , majorAxe, delta), function(n, i){

patContext.beginPath();
patContext.moveTo(dy - n + x1 , y1);
patContext.lineTo(-n + x1, y1+ dy);
patContext.stroke();
})
patContext.restore();
};

$(function(){

var imgurClientId = '9db53e5936cd02f';
Expand Down Expand Up @@ -869,6 +888,28 @@ <h3 id="InputField"></h3>
// Read hash
inputKinks.parseHash();

var patCanvas = document.createElement('canvas');
patCanvas.height = 30;
patCanvas.width = 30;
hatchPattern(patCanvas, 0,0,30,30,5);
patCanvas.toBlob(function(blob) {
var patternImg = document.createElement('img');
patternImg.crossOrigin = 'Anonymous';
var url = URL.createObjectURL(blob);

patternImg.onload = function() {
// no longer need to read the blob so it's revoked
URL.revokeObjectURL(url);
};

patternImg.src = url;
patternImg.setAttribute('id', 'patternImg');
patternImg.setAttribute('hidden','true');
// var body = document.getElementsByTagName('body')[0]
document.body.appendChild(patternImg);
},'image/png');


// Make export button work
$('#Export').on('click', inputKinks.export);
$('#URL').on('click', function(){ this.select(); });
Expand Down Expand Up @@ -909,11 +950,18 @@ <h3 id="InputField"></h3>
context.fillStyle = '#000000';

var levels = Object.keys(colors);
var x = context.canvas.width - 15 - (120 * levels.length);
var x = context.canvas.width - 15 - (120 * levels.length);
var patternImg = document.getElementById('patternImg');
var pattern = context.createPattern(patternImg,'repeat');
for(var i = 0; i < levels.length; i++) {
context.beginPath();
context.arc(x + (120 * i), 17, 8, 0, 2 * Math.PI, false);
context.fillStyle = colors[levels[i]];
if (colors[levels[i]] != 'pattern') {
context.fillStyle = colors[levels[i]];
}
else {
context.fillStyle = pattern;
}
context.fill();
context.strokeStyle = 'rgba(0, 0, 0, 0.5)'
context.lineWidth = 1;
Expand All @@ -924,12 +972,13 @@ <h3 id="InputField"></h3>
}
},
setupCanvas: function(width, height, username){
$('canvas').remove();
$('#mainCanvas').remove();
var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'mainCanvas');
canvas.width = width;
canvas.height = height;

var $canvas = $(canvas);
var $canvas = $('#mainCanvas');
$canvas.css({
width: width,
height: height
Expand Down Expand Up @@ -969,7 +1018,8 @@ <h3 id="InputField"></h3>
var x = drawCall.x + 5 + (drawCall.data.choices.length * 20);
var y = drawCall.y - 6;
context.fillText(drawCall.data.text, x, y);

var patternImg = document.getElementById('patternImg');
var pattern = context.createPattern(patternImg,'repeat');
// Circles
for(var i = 0; i < drawCall.data.choices.length; i++){
var choice = drawCall.data.choices[i];
Expand All @@ -980,7 +1030,12 @@ <h3 id="InputField"></h3>

context.beginPath();
context.arc(x, y, 8, 0, 2 * Math.PI, false);
context.fillStyle = color;
if (color != 'pattern') {
context.fillStyle = color;
}
else {
context.fillStyle = pattern;
}
context.fill();
context.strokeStyle = 'rgba(0, 0, 0, 0.5)'
context.lineWidth = 1;
Expand Down Expand Up @@ -1114,7 +1169,7 @@ <h3 id="InputField"></h3>
}
}

//return $(canvas).insertBefore($('#InputList'));
// return $(canvas).insertBefore($('#InputList'));

// Send canvas to imgur
$.ajax({
Expand Down Expand Up @@ -1363,8 +1418,15 @@ <h3 id="InputField"></h3>
var color = $choice.data('color');
var cssClass = this.className.replace('choice ', '').trim();

addCssRule('.choice.' + cssClass, 'background-color: ' + color + ';');
colors[text] = color;
if (color != 'pattern') {
addCssRule('.choice.' + cssClass, 'background-color: ' + color + ';');
colors[text] = color;
}
else {
addCssRule('.choice.' + cssClass, 'background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNScgaGVpZ2h0PScxNSc+CiAgPHJlY3Qgd2lkdGg9JzE1JyBoZWlnaHQ9JzE1JyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsNSBsMTUsLTE1CiAgICAgICAgICAgTTAsMTAgbDE1LC0xNQogICAgICAgICAgIE0wLDE1IGwxNSwtMTUKICAgICAgICAgICBNMCwyMCBsMTUsLTE1CiAgICAgICAgICAgTTAsMjUgbDE1LC0xNQogICAgICAgICAgIE0xNCwxNiBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo="); background-repeat: repeat');

colors[text] = 'pattern';
}
level[text] = cssClass;
});

Expand Down
Loading

0 comments on commit d88d2ae

Please sign in to comment.