From f22af6b4d468dc4973da9d18642d9904e195fdc3 Mon Sep 17 00:00:00 2001 From: The Blind Hawk Date: Wed, 9 Nov 2022 19:46:26 +0900 Subject: [PATCH 1/3] forgot to put @ in import example... ( how?? ) --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d8d11e2..90f73f7 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ NPM package installation ``` -npm install theblindhawk/roulette +npm install @theblindhawk/roulette ``` ![alt text](https://github.com/TheBlindHawk/Roulette/blob/main/docs/black_white.png?raw=true) ![alt text](https://github.com/TheBlindHawk/Roulette/blob/main/docs/colors.png?raw=true) diff --git a/package.json b/package.json index 708bca8..8edfc45 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@theblindhawk/roulette", - "version": "1.3.3", + "version": "1.3.4", "description": "a simple and easily customizable roulette wheel", "main": "index.js", "dependencies": { From 6cf501ac72965479aeac50c43912091b0e474c0d Mon Sep 17 00:00:00 2001 From: The Blind Hawk Date: Thu, 10 Nov 2022 20:01:32 +0900 Subject: [PATCH 2/3] updated the code to only use d3-selection --- README.md | 8 ++++++++ index.js | 34 ++++++++++++++-------------------- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 90f73f7..e6be6fa 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,14 @@ NB: '/path/soundfile.wav' for custom file, 'default' for default sound, '' to re | onstart | function | runs before rolling the roulette | | onstop | function | runs after rolling the roulette | +
+ +## currently in beta + +| Function | Comment | +| ------------------------ | ------------------------------------------------------- | +| setArrow(Element) | custom element to replace the arrow (coming in v/2.0.0) | + ## Examples Here is a fully set up roulette example diff --git a/index.js b/index.js index 1911e5a..453ce53 100644 --- a/index.js +++ b/index.js @@ -7,8 +7,8 @@ export class Roulette { #rolling = false; #rotation = 0; #addtxt = { before: '', after: '' }; #border = { color: '#808C94', width: 10 }; + #custom_arrow = null; #svg = null; #roulette_id = 'roulette'; - #custom_arrow = null; #text_rotation = 0; #font = { size: '16px', weight: 1, color: 'black'} last_roll = null; @@ -100,7 +100,7 @@ export class Roulette { var slow = Math.min(5, Math.floor((sprint - rotation)/180 * 5)); var increase = Math.floor((sprint - rotation)/sprint * 10) + slow + 1; rotation += increase; audio_counter += increase; - document.getElementById('roulette-circle').style.transform = 'rotate(-'+(rotation%360)+'deg)'; + self.#svg.style('transform', 'rotate(-'+(rotation%360)+'deg)'); if(audio_counter >= audio_distance && self.audio_dir != '') { if(self.audio_dir == 'default') { var audio = new Audio("data:audio/wav;base64," + sound_click); @@ -165,28 +165,23 @@ export class Roulette { }; draw() { - const container = document.getElementById(this.#roulette_id); - container.replaceChildren(); - const roulette = document.createElementNS("http://www.w3.org/2000/svg", 'svg'); - const down_arrow = document.createElementNS("http://www.w3.org/2000/svg", 'svg'); - roulette.setAttribute('width', this.#width); roulette.setAttribute('height', this.#height); - down_arrow.setAttribute('width', this.#width); down_arrow.setAttribute('height', this.#height); - down_arrow.style = "position: absolute; left: 50%; transform: translate(-50%,0); z-index: 1;" - roulette.id = 'roulette-circle'; down_arrow.id = 'roulette-arrow'; - container.append(roulette); container.append(down_arrow); + const container = select('#' + this.#roulette_id); + container.style('position', 'relative').selectAll("*").remove(); + + this.#svg = container.append('svg').attr('id', 'roulette-circle') + .attr('width', this.#width).attr('height', this.#height); const sections = this.#rolls.length; - const svg = select('#roulette-circle'); const padding = this.#shrink / 2; const radius = (Math.min(this.#width, this.#height) - this.#shrink) / 2; const angle = Math.PI * 2 / sections; const rotation = 360 / sections; - svg.style('font-size', this.#font.size); - svg.style('font-weight', this.#font.weight); + this.#svg.style('font-size', this.#font.size); + this.#svg.style('font-weight', this.#font.weight); for (var i = 0; i < sections; i++) { var color = this.#colors.length > 0 ? this.#colors[i % this.#colors.length] : '#fff'; - svg.append('path') + this.#svg.append('path') .attr('d', this.#getSector(radius, padding, sections, i)) .style('fill', color) .style('stroke', this.#border.color) @@ -197,7 +192,7 @@ export class Roulette { const ty = radius + (radius-radius/3) * -Math.cos(angle * (i+0.5)) + padding; const translate = 'translate('+ tx +','+ ty +')'; const rotate = 'rotate(' + degree + ')'; - svg.append('text') + this.#svg.append('text') .style('fill', this.#font.color) .attr('transform', translate + rotate ) .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle') @@ -205,16 +200,15 @@ export class Roulette { } // draw the arrow - const arrow_svg = select('#roulette-arrow'); if(this.#custom_arrow === null) { const p1 = (radius)+',0 '; const p2 = (radius+padding*2)+',0 '; const p3 = radius+padding+','+this.#shrink*2+' '; - arrow_svg.append('polygon') - .attr('points', p1 + p2 + p3) + container.append('svg').style('position', 'absolute').style('left', '0') + .append('polygon').attr('points', p1 + p2 + p3) .attr('style', 'fill:black; stroke:grey; stroke-width:1'); } else { - container.append(this.#custom_arrow); + document.getElementById(this.#roulette_id).append(this.#custom_arrow); } } } From ce1ec108e2498f19bba08c9c19572100731d6b11 Mon Sep 17 00:00:00 2001 From: The Blind Hawk Date: Mon, 14 Nov 2022 13:12:22 +0900 Subject: [PATCH 3/3] improved readme --- README.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index e6be6fa..1297386 100644 --- a/README.md +++ b/README.md @@ -12,11 +12,15 @@ npm install @theblindhawk/roulette ![alt text](https://github.com/TheBlindHawk/Roulette/blob/main/docs/black_white.png?raw=true) ![alt text](https://github.com/TheBlindHawk/Roulette/blob/main/docs/colors.png?raw=true) -## 1.3 Version Updates +## Version 2.0.0 is on its way! -1. you can now rotate the text at will! -2. the default "click" sound not playing has been fixed -3. custom arrow svg element has been tested +1. (coming soon) can shape the roulette as a doughnut +2. (coming soon) better arrow graphics and customization +3. (coming soon) possibility to move the arrow on a different position + +and [more](https://github.com/TheBlindHawk/Roulette/pull/6). + +Also see information regarding other [version updates](https://github.com/TheBlindHawk/Roulette/releases) ## Usage create an html div with ```id=roulette``` @@ -117,7 +121,7 @@ const rolls = [0, 8, 3, 5, 50]; const colors = ["#27296a", "#db5a52"]; // svg element width = 500x500, wheel drawing width = 460x460 var roulette = new Roulette("roulette", rolls, colors, 500, 500, 40); -roulette.audio_dir = 'sounds/my_click.wav"; +roulette.audio_dir = 'sounds/my_click.wav'; roulette.onstop = function() { console.log(roulette.last_roll) } roulette.rollRandom();