diff --git a/README.md b/README.md index 4309351..e9226cc 100644 --- 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 = {
-## 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... +``` \ No newline at end of file diff --git a/index.html b/index.html index 18d8c8c..d168eb3 100644 --- a/index.html +++ b/index.html @@ -6,20 +6,84 @@ Roulette -
- +
+

You rolled on:

+
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
diff --git a/package.json b/package.json index 9377e27..94bba05 100644 --- 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 index d1b96f6..e1bb090 100644 --- 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 index 71fc08f..a98572a 100644 --- 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 index 3eb1764..2674677 100644 --- 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) })