v/3.0.1

TheBlindHawk · Feb 21, 2024 · 604a686 · 604a686
1 parent 652d401
commit 604a686
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -32,10 +32,6 @@ npm install @theblindhawk/roulette
 NB: check out the change log to see what changed from version 2!
 (change log is currently Work In Progress)
 
-## Planned Features
-
-- A casino shaped Roulette to be added as one of the defaults
-
 ## Table of Contents
 - [Features](#features)
 - [Planned Features](#planned-features)
@@ -241,4 +237,19 @@ interface AudioData = {
 
 </br>
 
-## Examples (Work In Progess...)
+## Examples
+
+To try out the code clone the repository then run:
+```
+npm install
+npm run dev
+```
+Then navigate to ```http://localhost:5173/```, there will be three examples available.
+
+If you want to try your own code/settings edit the file ```index.html``` and the changes will be reflected immedeately!
+
+Here is an example of a fully set up Roulette:
+
+```
+// WIP...
+```
diff --git a/index.html b/index.html
@@ -6,20 +6,84 @@
     <title>Roulette</title>
   </head>
   <body>
-    <div id="roulette"></div>
-    <button id="start">start</button>
+    <div style="display:flex;justify-content:center;align-items: center;">
+      <h2>You rolled on: </h2>
+      <div style="border: 2px solid; width: 200px; height: 30px; text-align: center;" id="result"></div>
+    </div>
+    <div style="display:flex;justify-content: space-evenly;align-items: center;">
+      <div>
+        <div id="roulette-standard"></div>
+        <button id="start-standard" style="margin:auto;display:block;">start</button>
+      </div>
+      <div>
+        <div id="roulette-image"></div>
+        <button id="start-image" style="margin:auto;display:block;">start</button>
+      </div>
+      <div>
+        <div id="roulette-doughnut"></div>
+        <button id="start-doughnut" style="margin:auto;display:block;">start</button>
+      </div>
+    </div>
     <script type="module">
         import Roulette from './src/index.ts';
-        const roulette = new Roulette({
-          container: 'roulette',
+
+        const rouletteStandard = new Roulette({
+          container: 'roulette-standard',
           sections: [1, 2, 3],
           colors: ["#AAD7D9", "#FBF9F1", "#E5E1DA"],
         });
-        roulette.onstop = (result) => {
-          console.log("you rolled on:"+result.value);
-        };
-        document.getElementById('start').addEventListener('click', () => {
-          roulette.roll();
+
+        const img = new Image()
+        img.src = 'https://images.vexels.com/media/users/3/151205/isolated/preview/8857efb275fbf2435db40a222d05b1e6-roulette-wheel-icon.png'
+        const rouletteImage = new Roulette({
+          container: 'roulette-image',
+          board: {
+            element: img,
+            padding: 10
+          },
+          sections: [0,32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10,5,24,16,33,1,20,14,31,9,22,18,29,7,28,12,35,3,26],
+          colors: ["#AAD7D9", "#FBF9F1", "#E5E1DA"],
+        });
+
+        const rouletteDoughnut = new Roulette({
+          container: 'roulette-doughnut',
+          sections: [{
+            value: 'grey car',
+            src: 'https://svgsilh.com/svg/1300458-9e9e9e.svg',
+            radius: 50
+          }, {
+            value: 'blue car',
+            src: 'https://svgsilh.com/svg/1300458-3f51b5.svg',
+            radius: 50
+          }, {
+            value: 'red car',
+            src: 'https://svgsilh.com/svg/1300458-f44336.svg',
+            radius: 50
+          }],
+        });
+
+        const resultElem = document.getElementById('result');
+
+        function onstart() { resultElem.innerHTML = ''; }
+
+        rouletteStandard.onstart = onstart;
+        rouletteImage.onstart = onstart;
+        rouletteDoughnut.onstart = onstart;
+
+        function onstop(result) { resultElem.innerHTML = result.value; }
+
+        rouletteStandard.onstop = onstop;
+        rouletteImage.onstop = onstop;
+        rouletteDoughnut.onstop = onstop;
+
+        document.getElementById('start-standard').addEventListener('click', () => {
+          rouletteStandard.roll();
+        });
+        document.getElementById('start-image').addEventListener('click', () => {
+          rouletteImage.roll();
+        });
+        document.getElementById('start-doughnut').addEventListener('click', () => {
+          rouletteDoughnut.roll();
         });
     </script>
   </body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theblindhawk/roulette",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "a thoroughly customizable roulette wheel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/builders/board.ts b/src/builders/board.ts
@@ -16,7 +16,14 @@ export class BoardBuilder {
     this.radius = board.radius
     this.padding = board.padding
     this.doughnut = board.doughnut
-    this.element = board.element ? toHTMLBoard(board.element) : this.createSVGBoard()
+    if (board.element) {
+      this.element = toHTMLBoard(board.element)
+      this.element.style.width = `${this.radius * 2 - this.padding * 2}px`
+      this.element.style.height = `${this.radius * 2 - this.padding * 2}px`
+      this.element.style.padding = `${this.padding}px`
+    } else {
+      this.element = this.createSVGBoard()
+    }
     this.custom_image = !!board.element
   }
 

diff --git a/src/builders/section.ts b/src/builders/section.ts
@@ -60,4 +60,31 @@ export class SectionBuilder {
   public find(index: number) {
     return this.sections[index]
   }
+
+  public getSectionElement(section: RefinedSectionData, translate: string, rotate: string) {
+    if(section.src && section.radius) {
+      const img = document.createElementNS('http://www.w3.org/2000/svg', 'image')
+      img.setAttribute('transform', translate + rotate)
+      img.setAttribute('href', section.src)
+      img.setAttribute('x', `-${section.radius}`)
+      img.setAttribute('y', `-${section.radius}`)
+      img.setAttribute('width', `${section.radius * 2}`)
+      img.setAttribute('height', `${section.radius * 2}`)
+      return img
+    }
+    return this.getSectionText(section, translate, rotate)
+  }
+
+  public getSectionText(section: RefinedSectionData, translate: string, rotate: string) {
+    const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text')
+    txt.setAttribute('transform', translate + rotate)
+    txt.setAttribute('text-anchor', 'middle')
+    txt.setAttribute('dominant-baseline', 'middle')
+    txt.setAttribute('fill', section.font_color)
+    txt.setAttribute('font-family', section.font)
+    txt.setAttribute('font-size', section.font_size.toString())
+    txt.textContent = section.value
+
+    return txt
+  }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -112,7 +112,6 @@ export default class Roulette {
         this.audio.playOnSection()
         audio_counter -= audio_distance
       }
-      console.log(milliseconds, rotation, sprint)
 
       if (rotation >= sprint || milliseconds >= this.settings.roll.duration) {
         clearInterval(ival)
@@ -144,23 +143,16 @@ export default class Roulette {
 
       const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
       const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
-      const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text')
 
       path.setAttribute('d', this.getSector(radius, this.board.padding, this.sections.length, index))
       path.setAttribute('fill', section.background)
       path.setAttribute('stroke', this.settings.border.color)
       path.setAttribute('stroke-width', this.settings.border.width.toString())
 
-      txt.setAttribute('transform', translate + rotate)
-      txt.setAttribute('text-anchor', 'middle')
-      txt.setAttribute('dominant-baseline', 'middle')
-      txt.setAttribute('fill', section.font_color)
-      txt.setAttribute('font-family', section.font)
-      txt.setAttribute('font-size', section.font_size.toString())
-      txt.textContent = section.value
+      const section_element = this.sections.getSectionElement(section, translate, rotate)
 
       g.appendChild(path)
-      g.appendChild(txt)
+      g.appendChild(section_element)
       this.board.element.appendChild(g)
     })