Merge pull request #8 from TheBlindHawk/v/1.3.4

v/1.3.4
TheBlindHawk · Nov 14, 2022 · 78412b5 · 78412b5
2 parents 23feb14 + ce1ec10
commit 78412b5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -7,16 +7,20 @@
 
 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)
 
-## 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```
@@ -99,6 +103,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    |
 
+</br>
+
+## 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
@@ -109,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();

diff --git 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,24 +192,23 @@ 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')
                 .text(this.#addtxt.before + this.#rolls[i] + this.#addtxt.after);
         }
 
         // 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); 
         }
     }
 }
diff --git 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": {