├── src
    ├── styles
    │   └── index.scss
    ├── index.js
    └── components
    │   └── Roulette.vue
├── docs
    ├── CNAME
    ├── og-image.jpg
    ├── roulette.png
    ├── assets
    │   ├── favicon.adef23e4.ico
    │   ├── index.019fedf3.css
    │   └── index.58c620c4.js
    ├── 404.html
    └── index.html
├── public
    ├── CNAME
    ├── og-image.jpg
    ├── roulette.png
    └── 404.html
├── .eslintignore
├── favicon.ico
├── postcss.config.js
├── tests
    └── index.test.js
├── pages
    ├── main.js
    ├── views
    │   ├── Docs.vue
    │   ├── Examples.vue
    │   ├── Home.vue
    │   └── Custom.vue
    ├── router.js
    ├── App.vue
    ├── data
    │   ├── homeData.js
    │   └── examplesData.js
    └── components
    │   ├── Footer.vue
    │   ├── ItemsManager.vue
    │   ├── Navbar.vue
    │   ├── Example.vue
    │   └── WheelManager.vue
├── .editorconfig
├── .npmignore
├── .gitignore
├── vite.config.js
├── babel.config.js
├── jest.config.js
├── .eslintrc.js
├── LICENSE
├── package.json
├── index.html
├── README.md
├── rollup.config.js
└── dist
    ├── vue3-roulette.min.js
    └── vue3-roulette.esm.js


/src/styles/index.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/docs/CNAME:
--------------------------------------------------------------------------------
1 | roulette.nitocode.com


--------------------------------------------------------------------------------
/public/CNAME:
--------------------------------------------------------------------------------
1 | roulette.nitocode.com


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /coverage
2 | /dist
3 | /node_modules
4 | /docs
5 | /tests
6 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitocode/vue3-roulette/HEAD/favicon.ico


--------------------------------------------------------------------------------
/docs/og-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitocode/vue3-roulette/HEAD/docs/og-image.jpg


--------------------------------------------------------------------------------
/docs/roulette.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitocode/vue3-roulette/HEAD/docs/roulette.png


--------------------------------------------------------------------------------
/public/og-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitocode/vue3-roulette/HEAD/public/og-image.jpg


--------------------------------------------------------------------------------
/public/roulette.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitocode/vue3-roulette/HEAD/public/roulette.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Roulette from './components/Roulette.vue'
2 | export {
3 |   Roulette,
4 | }
5 | 


--------------------------------------------------------------------------------
/docs/assets/favicon.adef23e4.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitocode/vue3-roulette/HEAD/docs/assets/favicon.adef23e4.ico


--------------------------------------------------------------------------------
/tests/index.test.js:
--------------------------------------------------------------------------------
1 | describe('Test', () => {
2 |   test('you don\'t say', () => {
3 |     expect(true).toBe(true)
4 |   })
5 | })
6 | 


--------------------------------------------------------------------------------
/pages/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import { router } from "./router";
3 | import App from "./App.vue";
4 | 
5 | const app = createApp(App).use(router);
6 | 
7 | app.mount("#app");


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .editorconfig
 2 | .eslintignore
 3 | .eslintrc.js
 4 | .gitlab-ci.yml
 5 | babel.config.js
 6 | coverage
 7 | jest.config.js
 8 | postcss.config.js
 9 | sample
10 | src
11 | tests
12 | rollup.config.js
13 | vue.config.js
14 | sample
15 | index.html
16 | vite.config.js


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | coverage
 4 | dist
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | /* eslint import/no-extraneous-dependencies: "off" */
 2 | import { defineConfig } from "vite";
 3 | import vue from "@vitejs/plugin-vue";
 4 | import mdPlugin from "vite-plugin-markdown";
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [vue(), mdPlugin({mode: "vue"})],
 9 |   build: {
10 |     outDir: './docs'
11 |   }
12 | });


--------------------------------------------------------------------------------
/pages/views/Docs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="markdown-body text-left">
 3 |     <markdown-content />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { VueComponent } from "./../../README.md"
 9 | export default {
10 |   name: "Docs",
11 |   components: { MarkdownContent: VueComponent }
12 | }
13 | </script>
14 | 
15 | <style scoped>
16 | @import url("https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.0.0/github-markdown-light.min.css");
17 | :deep(img) {
18 |   display: none;
19 | }
20 | </style>


--------------------------------------------------------------------------------
/pages/router.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from "vue-router";
 2 | import Home from "./views/Home.vue"
 3 | import Docs from "./views/Docs.vue"
 4 | import Examples from "./views/Examples.vue"
 5 | import Custom from "./views/Custom.vue"
 6 | 
 7 | export const router = createRouter({
 8 |   history: createWebHistory(),
 9 |   routes: [
10 |     { path: '/', component: Home },
11 |     { path: '/docs', component: Docs },
12 |     { path: '/examples', component: Examples },
13 |     { path: '/custom', component: Custom },
14 |   ],
15 | })
16 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | // Build presets are used when building the component library with Rollup
 2 | const buildPresets = [
 3 |   [
 4 |     '@babel/preset-env',
 5 |     {}
 6 |   ]
 7 | ]
 8 | 
 9 | // Dev presets are used when running a local development server
10 | const devPresets = ['@vue/cli-plugin-babel/preset']
11 | 
12 | // Test presets are used when running unit-tests
13 | const testPresets = [
14 |   [
15 |     'env',
16 |     {
17 |       targets: {
18 |         node: 'current'
19 |       }
20 |     }
21 |   ]
22 | ]
23 | 
24 | module.exports = {
25 |   presets: process.env.NODE_ENV === 'production'
26 |     ? buildPresets : process.env.NODE_ENV === 'development'
27 |       ? devPresets : testPresets
28 | }
29 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   collectCoverage: true,
 3 |   collectCoverageFrom: [
 4 |     '<rootDir>/src/**/*.{js,vue}',
 5 |     '!<rootDir>/src/index.js',
 6 |     '!<rootDir>/pages/**/*'
 7 |   ],
 8 |   moduleFileExtensions: [ 'js', 'json', 'vue' ],
 9 |   transform: {
10 |     '.*\\.(vue)$': 'vue-jest',
11 |     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
12 |     '^.+\\.js$': 'babel-jest'
13 |   },
14 |   moduleNameMapper: {
15 |     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/tests/mocks/file-mock.js'
16 |   },
17 |   transformIgnorePatterns: [],
18 |   snapshotSerializers: [
19 |     'jest-serializer-vue'
20 |   ]
21 | }
22 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 | 
 4 |   extends: ['eslint:recommended', 'plugin:vue/recommended'],
 5 | 
 6 |   env: {
 7 |     node: true,
 8 |   },
 9 | 
10 |   parserOptions: {
11 |     parser: 'babel-eslint',
12 |   },
13 | 
14 |   overrides: [
15 |     {
16 |       files: 'tests/**/*',
17 |       rules: {
18 |         // Disable no-undefined rule for Jest tests because `describe()`, `test()`
19 |         // are methods available under the global NodeJS namespace.
20 |         'no-undef': 'off',
21 |       },
22 |     },
23 |   ],
24 | 
25 |   rules: {
26 |     // allow paren-less arrow functions
27 |     'arrow-parens': 0,
28 |     // allow async-await
29 |     'generator-star-spacing': 0,
30 |     // allow debugger during development
31 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
32 | 
33 |     'vue/no-v-html': 'off',
34 |   },
35 | };
36 | 


--------------------------------------------------------------------------------
/pages/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Navbar />
 4 |     <div class="container mx-auto my-14 px-4 py-16 lg:py-0">
 5 |       <router-view v-slot="{ Component }">
 6 |         <transition
 7 |           name="fade"
 8 |           mode="out-in"
 9 |         >
10 |           <component :is="Component" />
11 |         </transition>
12 |       </router-view>
13 |     </div>
14 |     <Footer />
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import Navbar from "./components/Navbar.vue";
20 | import Footer from "./components/Footer.vue";
21 | export default {
22 |   name: "Container",
23 |   components: { Navbar, Footer },
24 |   mounted() {
25 |     // Github pages SPA workaround
26 |     let path = localStorage.getItem('path');
27 |     if (path) {
28 |       localStorage.removeItem('path');
29 |       this.$router.push(path);
30 |     }
31 |   }
32 | }
33 | </script>
34 | 
35 | <style lang="scss">
36 | .fade-enter-active,
37 | .fade-leave-active {
38 |   transition: opacity 0.5s ease;
39 | }
40 | 
41 | 
42 | .fade-enter-from,
43 | .fade-leave-to {
44 |   opacity: 0;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Ludovic Nitoumbi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/pages/data/homeData.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   items: [
 3 |     { id: 1, name: "Banana", htmlContent: "Banana", textColor: "", background: "" },
 4 |     { id: 2, name: "Apple", htmlContent: "Apple", textColor: "", background: "" },
 5 |     { id: 3, name: "Orange", htmlContent: "Orange", textColor: "", background: "" },
 6 |     { id: 4, name: "Cherry", htmlContent: "Cherry", textColor: "", background: "" },
 7 |     { id: 5, name: "Strawberry", htmlContent: "Strawberry", textColor: "", background: "" },
 8 |     { id: 6, name: "Grape", htmlContent: "Grape", textColor: "", background: "" },
 9 |   ],
10 |   firstItemIndex: { value: 0 },
11 |   wheelSettings: {
12 |     centeredIndicator: true,
13 |     indicatorPosition: "top",
14 |     size: 300,
15 |     displayShadow: true,
16 |     duration: 5,
17 |     resultVariation: 70,
18 |     easing: "bounce",
19 |     counterClockwise: true,
20 |     horizontalContent: false,
21 |     displayBorder: true,
22 |     displayIndicator: true,
23 |     baseDisplay: true,
24 |     baseSize: 100,
25 |     baseDisplayShadow: true,
26 |     baseDisplayIndicator: true,
27 |     baseBackground: "#EEAA33",
28 |     baseHtmlContent: "<strong>Touch<br>Me!</strong>",
29 |   }
30 | }


--------------------------------------------------------------------------------
/pages/views/Examples.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Example
 4 |       class="big-wheel"
 5 |       ref-name="eat"
 6 |       :wheel-data="eatData"
 7 |     />
 8 |     <div class="divider" />
 9 |     <Example
10 |       ref-name="yesno"
11 |       :wheel-data="yesNoData"
12 |     />
13 |     <div class="divider" />
14 |     <Example
15 |       class="big-wheel"
16 |       ref-name="roulette"
17 |       :wheel-data="rouletteData"
18 |     />
19 |     <div class="divider" />
20 |     <Example
21 |       ref-name="names"
22 |       :wheel-data="namesData"
23 |     />
24 |     <div class="divider" />
25 |     <Example
26 |       ref-name="numbers"
27 |       :wheel-data="numbersData"
28 |     />
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | import Example from "../components/Example.vue";
34 | import { yesNoData, namesData, eatData, numbersData, rouletteData } from "../data/examplesData";
35 | export default {
36 |   name: "Examples",
37 |   components: { Example },
38 |   data () {
39 |     return {
40 |       yesNoData,
41 |       namesData,
42 |       eatData,
43 |       numbersData,
44 |       rouletteData
45 |     }
46 |   }
47 | }
48 | </script>
49 | 
50 | <style scoped>
51 | @media screen and (max-width: 450px){
52 |   :deep(.big-wheel .relative) {
53 |     transform: scale(0.7);
54 |   }
55 | }
56 | 
57 | </style>


--------------------------------------------------------------------------------
/docs/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html data-theme="light" lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 7 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 8 |     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
 9 |     <link href="https://cdn.jsdelivr.net/npm/daisyui@1.16.2/dist/full.css" rel="stylesheet" type="text/css" />
10 |     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
11 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
12 |     <title>Vue3 Roulette</title>
13 |     <style>
14 |       html, body {
15 |         font-family: 'Ubuntu', sans-serif;
16 |         -webkit-font-smoothing: antialiased;
17 |         -moz-osx-font-smoothing: grayscale;
18 |         text-align: center;
19 |         overflow-x: hidden;
20 |       }
21 |     </style>
22 |   </head>
23 | <body>
24 |   <script>
25 |     // Sauvegarder le chemin et les paramètres d'URL
26 |     const path = window.location.pathname.slice(1);
27 |     const queryParams = window.location.search;
28 |     const hash = window.location.hash;
29 |     
30 |     // Stocker le chemin et les paramètres dans le sessionStorage
31 |     sessionStorage.setItem('spa-path', path);
32 |     sessionStorage.setItem('spa-query', queryParams);
33 |     sessionStorage.setItem('spa-hash', hash);
34 |     
35 |     // Rediriger vers la racine du site
36 |     window.location.href='../';
37 |     
38 |   </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html data-theme="light" lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 7 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 8 |     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
 9 |     <link href="https://cdn.jsdelivr.net/npm/daisyui@1.16.2/dist/full.css" rel="stylesheet" type="text/css" />
10 |     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
11 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
12 |     <title>Vue3 Roulette</title>
13 |     <style>
14 |       html, body {
15 |         font-family: 'Ubuntu', sans-serif;
16 |         -webkit-font-smoothing: antialiased;
17 |         -moz-osx-font-smoothing: grayscale;
18 |         text-align: center;
19 |         overflow-x: hidden;
20 |       }
21 |     </style>
22 |   </head>
23 | <body>
24 |   <script>
25 |     // Sauvegarder le chemin et les paramètres d'URL
26 |     const path = window.location.pathname.slice(1);
27 |     const queryParams = window.location.search;
28 |     const hash = window.location.hash;
29 |     
30 |     // Stocker le chemin et les paramètres dans le sessionStorage
31 |     sessionStorage.setItem('spa-path', path);
32 |     sessionStorage.setItem('spa-query', queryParams);
33 |     sessionStorage.setItem('spa-hash', hash);
34 |     
35 |     // Rediriger vers la racine du site
36 |     window.location.href='../';
37 |     
38 |   </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-roulette",
 3 |   "version": "0.3.3",
 4 |   "main": "dist/vue3-roulette.js",
 5 |   "browser": "dist/vue3-roulette.esm.js",
 6 |   "module": "dist/vue3-roulette.esm.js",
 7 |   "unpkg": "dist/vue3-roulette.min.js",
 8 |   "scripts": {
 9 |     "serve": "vite",
10 |     "prebuild": "rimraf ./dist",
11 |     "build": "cross-env NODE_ENV=production rollup --config rollup.config.js",
12 |     "buildpages": "vite build",
13 |     "test": "cross-env NODE_ENV=test jest"
14 |   },
15 |   "devDependencies": {
16 |     "@babel/core": "^7.15.5",
17 |     "@babel/preset-env": "^7.15.6",
18 |     "@rollup/plugin-babel": "^5.3.0",
19 |     "@rollup/plugin-buble": "^0.21.3",
20 |     "@rollup/plugin-commonjs": "^20.0.0",
21 |     "@rollup/plugin-node-resolve": "^13.0.4",
22 |     "@rollup/plugin-replace": "^3.0.0",
23 |     "@types/jest": "^26.0.22",
24 |     "@vitejs/plugin-vue": "^1.3.0",
25 |     "@vue/cli-plugin-babel": "^4.5.4",
26 |     "@vue/cli-plugin-eslint": "^4.5.4",
27 |     "@vue/cli-service": "^4.5.4",
28 |     "@vue/compiler-sfc": "^3.1.5",
29 |     "@vue/eslint-config-standard": "^4.0.0",
30 |     "@vue/test-utils": "^1.0.4",
31 |     "babel-core": "^6.26.3",
32 |     "babel-eslint": "^10.0.3",
33 |     "babel-jest": "^25.5.1",
34 |     "babel-preset-env": "^1.7.0",
35 |     "cross-env": "^7.0.3",
36 |     "eslint": "^6.8.0",
37 |     "eslint-plugin-vue": "^5.2.3",
38 |     "jest": "^25.5.4",
39 |     "jest-serializer-vue": "^2.0.2",
40 |     "jest-transform-stub": "^2.0.0",
41 |     "postcss": "^8.3.6",
42 |     "rimraf": "^3.0.2",
43 |     "rollup": "^2.55.1",
44 |     "rollup-plugin-postcss": "^4.0.0",
45 |     "rollup-plugin-svg": "^2.0.0",
46 |     "rollup-plugin-terser": "^7.0.2",
47 |     "rollup-plugin-vue": "^6.0.0",
48 |     "sass": "^1.37.2",
49 |     "sass-loader": "^8.0.0",
50 |     "vite": "^2.4.4",
51 |     "vite-plugin-markdown": "^2.0.2",
52 |     "vue": "^3.2.11",
53 |     "vue-jest": "^5.0.0-alpha.10",
54 |     "vue-router": "^4.0.12"
55 |   },
56 |   "peerDependencies": {
57 |     "vue": "^3.2.11"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html data-theme="light" lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta property=og:image itemprop=image content=/og-image.jpg>
 6 |     <meta property=og:type content=website>
 7 |     <meta property=og:site_name content="Vue3 roulette">
 8 |     <meta property=og:title content="Vue3 Roulette">
 9 |     <meta property=og:description content="A customizable and flexible fortune wheel made with vue3">
10 |     <meta property=og:updated_time content=3600000>
11 |     <meta name=description content="A customizable and flexible fortune wheel made with vue3">
12 |     <link rel="icon" href="/favicon.ico" />
13 |     <link rel="preconnect" href="https://fonts.googleapis.com">
14 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15 |     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
16 |     <link href="https://cdn.jsdelivr.net/npm/daisyui@1.16.2/dist/full.css" rel="stylesheet" type="text/css" />
17 |     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
18 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19 |     <title>Vue3 Roulette</title>
20 |     <style>
21 |       html, body {
22 |         font-family: 'Ubuntu', sans-serif;
23 |         -webkit-font-smoothing: antialiased;
24 |         -moz-osx-font-smoothing: grayscale;
25 |         text-align: center;
26 |         overflow-x: hidden;
27 |       }
28 |     </style>
29 |   </head>
30 |   <body>
31 |     <div id="app"></div>
32 |     <script>
33 |       // Récupérer les informations stockées par la page 404.html
34 |       const spaPath = sessionStorage.getItem('spa-path');
35 |       const spaQuery = sessionStorage.getItem('spa-query');
36 |       const spaHash = sessionStorage.getItem('spa-hash');
37 |       
38 |       // Si des informations ont été stockées, reconstruire l'URL et rediriger
39 |       if (spaPath) {
40 |         // Nettoyer le sessionStorage
41 |         sessionStorage.removeItem('spa-path');
42 |         sessionStorage.removeItem('spa-query');
43 |         sessionStorage.removeItem('spa-hash');
44 |         
45 |         // Reconstruire l'URL et rediriger
46 |         const url = '/' + spaPath + (spaQuery || '') + (spaHash || '');
47 |         window.history.replaceState(null, null, url);
48 |       }
49 |     </script>
50 |     <script type="module" src="/pages/main.js"></script>
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html data-theme="light" lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta property=og:image itemprop=image content=/og-image.jpg>
 6 |     <meta property=og:type content=website>
 7 |     <meta property=og:site_name content="Vue3 roulette">
 8 |     <meta property=og:title content="Vue3 Roulette">
 9 |     <meta property=og:description content="A customizable and flexible fortune wheel made with vue3">
10 |     <meta property=og:updated_time content=3600000>
11 |     <meta name=description content="A customizable and flexible fortune wheel made with vue3">
12 |     <link rel="icon" href="/assets/favicon.adef23e4.ico" />
13 |     <link rel="preconnect" href="https://fonts.googleapis.com">
14 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15 |     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
16 |     <link href="https://cdn.jsdelivr.net/npm/daisyui@1.16.2/dist/full.css" rel="stylesheet" type="text/css" />
17 |     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
18 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19 |     <title>Vue3 Roulette</title>
20 |     <style>
21 |       html, body {
22 |         font-family: 'Ubuntu', sans-serif;
23 |         -webkit-font-smoothing: antialiased;
24 |         -moz-osx-font-smoothing: grayscale;
25 |         text-align: center;
26 |         overflow-x: hidden;
27 |       }
28 |     </style>
29 |     <script type="module" crossorigin src="/assets/index.58c620c4.js"></script>
30 |     <link rel="modulepreload" href="/assets/vendor.aed0c264.js">
31 |     <link rel="stylesheet" href="/assets/index.019fedf3.css">
32 |   </head>
33 |   <body>
34 |     <div id="app"></div>
35 |     <script>
36 |       // Récupérer les informations stockées par la page 404.html
37 |       const spaPath = sessionStorage.getItem('spa-path');
38 |       const spaQuery = sessionStorage.getItem('spa-query');
39 |       const spaHash = sessionStorage.getItem('spa-hash');
40 |       
41 |       // Si des informations ont été stockées, reconstruire l'URL et rediriger
42 |       if (spaPath) {
43 |         // Nettoyer le sessionStorage
44 |         sessionStorage.removeItem('spa-path');
45 |         sessionStorage.removeItem('spa-query');
46 |         sessionStorage.removeItem('spa-hash');
47 |         
48 |         // Reconstruire l'URL et rediriger
49 |         const url = '/' + spaPath + (spaQuery || '') + (spaHash || '');
50 |         window.history.replaceState(null, null, url);
51 |       }
52 |     </script>
53 |     
54 |   </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/pages/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="items-center p-4 footer bg-neutral text-neutral-content">
 3 |     <div class="items-center grid-flow-col">
 4 |       <svg
 5 |         width="36"
 6 |         height="36"
 7 |         viewBox="0 0 24 24"
 8 |         xmlns="http://www.w3.org/2000/svg"
 9 |         fill-rule="evenodd"
10 |         clip-rule="evenodd"
11 |         class="fill-current"
12 |       >
13 |         <path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z" />
14 |       </svg> 
15 |       <p>Made with love by Nitocode</p>
16 |     </div> 
17 |     <div class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
18 |       <a
19 |         href="https://twitter.com/nitocode"
20 |         target="_blank"
21 |       >
22 |         <svg
23 |           xmlns="http://www.w3.org/2000/svg"
24 |           width="24"
25 |           height="24"
26 |           viewBox="0 0 24 24"
27 |           class="fill-current"
28 |         >
29 |           <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
30 |         </svg>
31 |       </a>
32 |       <a
33 |         href="https://github.com/nitocode/vue3-roulette"
34 |         target="_blank"
35 |       >
36 |         <svg
37 |           xmlns="http://www.w3.org/2000/svg"
38 |           viewBox="0 0 512 512"
39 |           class="inline-block w-6 h-6 fill-current"
40 |         ><path d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z" /></svg>
41 |       </a>
42 |     </div>
43 |   </footer>
44 | </template>
45 | 
46 | <script>
47 | export default {
48 | 
49 | }
50 | </script>
51 | 
52 | <style>
53 | 
54 | </style>


--------------------------------------------------------------------------------
/docs/assets/index.019fedf3.css:
--------------------------------------------------------------------------------
1 | @import"https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.0.0/github-markdown-light.min.css";.item{display:flex;flex-direction:row;justify-content:center;align-items:center}.wheel-container[data-v-313a8203],.wheel-base[data-v-313a8203],.wheel-base-container[data-v-313a8203],.wheel-base-indicator[data-v-313a8203]{transition:transform 1s ease-in-out}.wheel-container[data-v-313a8203]{position:relative;display:inline-block;overflow:hidden;border-radius:50%;cursor:pointer}.wheel-container-indicator[data-v-313a8203]:before{content:"";position:absolute;z-index:4;width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:20px solid black;transform:translate(-50%)}.wheel-container.indicator-top[data-v-313a8203]{transform:rotate(0)}.wheel-container.indicator-right[data-v-313a8203]{transform:rotate(90deg)}.wheel-container.indicator-right .wheel-base[data-v-313a8203]{transform:rotate(-90deg)}.wheel-container.indicator-bottom[data-v-313a8203]{transform:rotate(180deg)}.wheel-container.indicator-bottom .wheel-base[data-v-313a8203]{transform:rotate(-180deg)}.wheel-container.indicator-left[data-v-313a8203]{transform:rotate(270deg)}.wheel-container.indicator-left .wheel-base[data-v-313a8203]{transform:rotate(-270deg)}.wheel-container-border[data-v-313a8203]{border:8px solid black}.wheel-container-shadow[data-v-313a8203]{box-shadow:5px 5px 15px -5px #000}.wheel-base-container[data-v-313a8203]{position:absolute;z-index:2;top:50%;left:50%;border-radius:50%;border:5px solid black;transform:translate(-50%,-50%)}.wheel-base-container-shadow[data-v-313a8203]{box-shadow:5px 5px 15px -5px #000}.wheel-base-container .wheel-base[data-v-313a8203]{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;overflow:hidden;width:100%;height:100%;border-radius:50%}.wheel-base-container .wheel-base-indicator[data-v-313a8203]{position:absolute;z-index:1;width:100%;height:100%}.wheel-base-container .wheel-base-indicator[data-v-313a8203]:before{content:"";position:absolute;z-index:1;top:-20px;width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid black;transform:translate(-50%)}.wheel[data-v-313a8203]{background:white;border-radius:50%;margin:auto;overflow:hidden}.wheel.easing-ease[data-v-313a8203]{transition:transform cubic-bezier(.65,0,.35,1)}.wheel.easing-bounce[data-v-313a8203]{transition:transform cubic-bezier(.49,.02,.52,1.12)}.wheel-border[data-v-313a8203]:after{content:"";width:100%;height:100%;position:absolute;left:0;top:0;z-index:3;border-radius:50%;background-image:linear-gradient(to left,black 33%,rgba(255,255,255,0) 0%);background-position:bottom;background-size:3px 1px;-webkit-mask:radial-gradient(transparent 65%,#000 66%);mask:radial-gradient(transparent 65%,#000 66%)}.wheel-item[data-v-313a8203]{overflow:hidden;position:absolute;top:0;right:0;width:50%;height:50%;transform-origin:0% 100%;border:1px solid black}.wheel-item[data-v-313a8203]:nth-child(odd){background-color:#87ceeb}.wheel-item[data-v-313a8203]:nth-child(even){background-color:pink}.wheel .content[data-v-313a8203]{position:absolute;left:-100%;width:200%;height:200%;text-align:center;transform:skewY(30deg) rotate(0);padding-top:20px}.wheel .content.horizontal-content[data-v-313a8203]{left:initial;right:100%;width:50%;height:250%;text-align:right}.wheel .content.horizontal-content span[data-v-313a8203]{display:block;transform:rotate(270deg)}.wheel-anim{transition:transform 4s cubic-bezier(.58,-.26,.24,1.11);transform:rotate(-1800deg) scale(1.25)}.wheel-anim-started{transform:rotate(0) scale(1)}[data-v-65fe6d42] img{display:none}@media screen and (max-width: 450px){[data-v-2a21abdc] .big-wheel .relative{transform:scale(.7)}}.drawer-toggle:checked~.drawer-content{z-index:100}.drawer-toggle:checked~.drawer-side{z-index:101}.fade-enter-active,.fade-leave-active{transition:opacity .5s ease}.fade-enter-from,.fade-leave-to{opacity:0}
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue3 Roulette
  2 | 
  3 | > A customizable and flexible fortune wheel for vue3
  4 | 
  5 | ## Demo
  6 | 
  7 | https://roulette.nitocode.com/
  8 | 
  9 | See also: [codesandbox template](https://codesandbox.io/s/vue3-roulette-c8tml)
 10 | 
 11 | ## Installation
 12 | 
 13 | ### Using npm
 14 | 
 15 | `npm i --save vue3-roulette`
 16 | 
 17 | ## Usage
 18 | 
 19 | #### main.js
 20 | ```js
 21 | import { createApp } from 'vue'
 22 | import App from './App.vue'
 23 | import { Roulette } from 'vue3-roulette'
 24 | 
 25 | createApp(App).component("roulette", Roulette).mount('#app')
 26 | ```
 27 | 
 28 | #### vuejs html template
 29 | ```html
 30 | <Roulette ref="wheel" :items="items" @click="launchWheel" />
 31 | ```
 32 | 
 33 | #### vuejs script 
 34 | 
 35 | Using the [sfc syntax](https://v3.vuejs.org/api/sfc-script-setup.html)
 36 | ```html 
 37 | <script setup>
 38 | import { ref } from 'vue'
 39 | const wheel = ref(null);
 40 | const items = [
 41 |   { id: 1, name: "Banana", htmlContent: "Banana", textColor: "", background: "" },
 42 |   { id: 2, name: "Apple", htmlContent: "Apple", textColor: "", background: "" },
 43 |   { id: 3, name: "Orange and Purple", htmlContent: "Orange<br>and Purple", textColor: "", background: "" },
 44 |   { id: 4, name: "Cherry", htmlContent: "Cherry", textColor: "", background: "" },
 45 | ];
 46 | 
 47 | function launchWheel (){
 48 |   wheel.value.launchWheel();
 49 | }
 50 | </script>
 51 | ```
 52 | 
 53 | ## Events API 
 54 | 
 55 | `wheel-start` and `wheel-end` which provide the item selected
 56 | 
 57 | ```html
 58 | <Roulette 
 59 |   ref="wheel" :items="items" @click="launchWheel" 
 60 |   @wheel-start="wheelStartedCallback"
 61 |   @wheel-end="wheelEndedCallback"
 62 | />
 63 | ```
 64 | 
 65 | ## Methods API
 66 | 
 67 | Composition API
 68 | ```javascript
 69 | wheel.value.launchWheel();
 70 | wheel.value.reset();
 71 | ```
 72 | Option API
 73 | ```javascript
 74 | this.$refs.wheel.launchWheel();
 75 | this.$refs.wheel.reset();
 76 | ```
 77 | 
 78 | ## Props API (Wheel)
 79 | 
 80 | | Props      | Type       | Required | Default    | Options        | Details |
 81 | |------------|------------|----------|------------|----------------|--|
 82 | | items    | Object | yes     | -          |               | 4 items minimum |
 83 | | first-item-index      | Object     | no    | { value: 0 } |               |
 84 | | wheel-result-index      | Object     | no    | { value: null } | from 0 to items length      |
 85 | | centered-indicator      | Boolean     | no    | false |               |
 86 | | indicator-position       | String     | no       | "top"       | "top" \| "right" \| "bottom" \| "left" |
 87 | | size | Number   | no       | 300      |                | size unit: pixel |
 88 | | display-shadow | Boolean   | no       | false      |                |
 89 | | duration       | Number       | no       | 4   | | duration unit: seconds       |                |
 90 | | result-variation | Number    | no       | 0 | number between 0 and 100 | varies the result angle to fake wheel smoothness |
 91 | | easing | String    | no       | "ease"      | "ease" \| "bounce"        | wheel animation |
 92 | | counter-clockwise                   | Boolean      | no       | false  | | rotation direction
 93 | | horizontal-content | Boolean    | no       | false      |                | text item orientation
 94 | | display-border | Boolean    | no       | false      |                |
 95 | | display-indicator | Boolean    | no       | false      |                |
 96 | 
 97 | ## Props API (Wheel base)
 98 | 
 99 | | Props      | Type       | Required | Default    | Options        | Details |
100 | |------------|------------|----------|------------|----------------|--|
101 | | base-display    | Boolean | no     | false          |               |  |
102 | | base-size    | Number | no     | 100          |               | size unit: pixel |
103 | | base-display-shadow    | Boolean | no     | false          |               |  |
104 | | base-display-indicator    | Boolean | no     | false          |               |  |
105 | | base-background    | String | no     | ""          | rgb(100,0,0) \| red \| #FF0000              |  |
106 | 
107 | 
108 | ## Slots
109 | 
110 | You can use your own html for the wheel base
111 | 
112 | ```html
113 | <Roulette ref="wheel" :items="items" @click="launchWheel">
114 |   <template #baseContent>
115 |     <div v-html="yourHtml"></div>
116 |   </template>
117 | </Roulette>
118 | ```
119 | 
120 | ## Contribution
121 | 
122 | ### Project setup
123 | 
124 | ```bash
125 | npm install
126 | ```
127 | 
128 | ### Compiles and hot-reloads for development
129 | 
130 | ```bash
131 | npm run serve
132 | ```
133 | 


--------------------------------------------------------------------------------
/pages/components/ItemsManager.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <table class="table w-full">
  4 |       <thead class="text-center">
  5 |         <tr>
  6 |           <th v-if="initialFirstItemIndex != null">
  7 |             First Item
  8 |           </th>
  9 |           <th>Name</th>
 10 |           <th>Html content</th>
 11 |           <th>Text color</th>
 12 |           <th>Background</th>
 13 |           <th>Delete</th>
 14 |         </tr>
 15 |       </thead>
 16 |       <tbody>
 17 |         <tr
 18 |           v-for="(item, index) in items"
 19 |           :key="item.id"
 20 |         >
 21 |           <td v-if="initialFirstItemIndex != null">
 22 |             <input
 23 |               v-model="firstItemIndex.value"
 24 |               name="firstItem"
 25 |               class="block mx-auto radio radio-primary"
 26 |               type="radio"
 27 |               :value="index"
 28 |             >
 29 |           </td>
 30 |           <td>
 31 |             <input
 32 |               v-model="item.name"
 33 |               class="input input-bordered w-full"
 34 |               type="text"
 35 |             >
 36 |           </td>
 37 |           <td>
 38 |             <textarea
 39 |               v-model="item.htmlContent"
 40 |               class="textarea h-12 textarea-bordered textarea-primary w-full"
 41 |             />
 42 |           </td>
 43 |           <td>
 44 |             <input
 45 |               v-model="item.textColor"
 46 |               class="input input-bordered w-full"
 47 |               type="text"
 48 |             >
 49 |           </td>
 50 |           <td>
 51 |             <input
 52 |               v-model="item.background"
 53 |               class="input input-bordered w-full"
 54 |               type="text"
 55 |             >
 56 |           </td>
 57 |           <td class="text-center">
 58 |             <button
 59 |               class="btn btn-error btn-outline btn-circle btn-sm"
 60 |               @click="remove(index)"
 61 |             >
 62 |               <svg
 63 |                 xmlns="http://www.w3.org/2000/svg"
 64 |                 fill="none"
 65 |                 viewBox="0 0 24 24"
 66 |                 class="inline-block w-4 h-4 stroke-current"
 67 |               >   
 68 |                 <path
 69 |                   stroke-linecap="round"
 70 |                   stroke-linejoin="round"
 71 |                   stroke-width="2"
 72 |                   d="M6 18L18 6M6 6l12 12"
 73 |                 />                       
 74 |               </svg>
 75 |             </button>
 76 |           </td>
 77 |         </tr>
 78 |       </tbody>
 79 |       <tfoot class="text-center">
 80 |         <tr>
 81 |           <th v-if="initialFirstItemIndex != null">
 82 |             First Item
 83 |           </th>
 84 |           <th>Name</th>
 85 |           <th>Html content</th>
 86 |           <th>Text color</th>
 87 |           <th>Background</th>
 88 |           <th>Delete</th>
 89 |         </tr>
 90 |       </tfoot>
 91 |     </table>
 92 |     
 93 |     <div class="divider" /> 
 94 | 
 95 |     <div>
 96 |       <button
 97 |         class="btn btn-primary"
 98 |         @click="add"
 99 |       >
100 |         Add Item
101 |       </button>
102 |     </div>
103 |   </div>
104 | </template>
105 | 
106 | <script>
107 | export default {
108 |   name: "ItemsManager",
109 |   emits: ["updateItems"],
110 |   props: {
111 |     initialFirstItemIndex: {
112 |       type: Object,
113 |       required: false,
114 |       default: null
115 |     },
116 |     initialItems: {
117 |       type: Object,
118 |       required: true,
119 |     },
120 |   },
121 |   data() {
122 |     return {
123 |       firstItemIndex: null,
124 |       items: [],
125 |     };
126 |   },
127 |   mounted() {
128 |     this.items = this.initialItems;
129 |     this.firstItemIndex = this.initialFirstItemIndex;
130 |   },
131 |   methods: {
132 |     add() {
133 |       const lastItem = this.items[this.items.length - 1];
134 |       this.items.push({
135 |         id: lastItem.id + 1,
136 |         name: "",
137 |         htmlContent: "",
138 |         textColor: "",
139 |         background: "",
140 |       });
141 |     },
142 |     remove(index) {
143 |       if (this.items.length < 5) {
144 |         return;
145 |       }
146 |       this.items.splice(index, 1);
147 |     },
148 |     removeAll() {
149 |       this.items = [];
150 |     },
151 |     update() {
152 |       this.$emit("update-items", this.items);
153 |     },
154 |   },
155 | };
156 | </script>
157 | 
158 | <style lang="scss">
159 | .item {
160 |   display: flex;
161 |   flex-direction: row;
162 |   justify-content: center;
163 |   align-items: center;
164 | }
165 | </style>


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Rollup configuration inspired by: https://github.com/team-innovation/vue-sfc-rollup
  3 |  */
  4 | 
  5 | import resolve from '@rollup/plugin-node-resolve' // NodeJS node_modules resolution algorithm
  6 | import commonjs from '@rollup/plugin-commonjs' // Convert CommonJS modules to ES6
  7 | import babel from '@rollup/plugin-babel' // Babel rollup plugin
  8 | import replace from '@rollup/plugin-replace' // Replace strings in the source-code
  9 | import postcss from 'rollup-plugin-postcss' // Extract SCSS as CSS with PostCSS and inject it in JavaScript
 10 | import vue from 'rollup-plugin-vue' // Handle the compilation of .vue SFC files
 11 | import { terser } from 'rollup-plugin-terser' // Minify generated bundle
 12 | import svg from 'rollup-plugin-svg' // Handle .svg files imports
 13 | 
 14 | const esmConfig = {
 15 |   input: 'src/index.js',
 16 | 
 17 |   // Dependencies to exclude in the build output.
 18 |   external: ['vue'],
 19 | 
 20 |   output: {
 21 |     file: 'dist/vue3-roulette.esm.js',
 22 |     format: 'esm',
 23 |     exports: 'named',
 24 |     // Provide global variable names to replace your external imports.
 25 |     globals: {
 26 |       vue: 'Vue'
 27 |     }
 28 |   },
 29 | 
 30 |   plugins: [
 31 |     replace({
 32 |       'process.env.NODE_ENV': JSON.stringify('production'),
 33 |       preventAssignment: true
 34 |     }),
 35 | 
 36 |     svg(),
 37 | 
 38 |     vue({
 39 |       // Required to extract and re-inject SCSS styles as CSS
 40 |       preprocessStyles: true,
 41 |       css: true,
 42 |       template: {
 43 |         isProduction: true
 44 |       }
 45 |     }),
 46 | 
 47 |     resolve({
 48 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
 49 |     }),
 50 | 
 51 |     postcss(),
 52 | 
 53 |     commonjs(),
 54 | 
 55 |     babel({
 56 |       exclude: 'node_modules/**',
 57 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 58 |       babelHelpers: 'bundled',
 59 |       presets: [
 60 |         ['@babel/preset-env', {}]
 61 |       ]
 62 |     })
 63 |   ]
 64 | }
 65 | 
 66 | const umdConfig = {
 67 |   input: 'src/index.js',
 68 | 
 69 |   // Dependencies to exclude in the build output.
 70 |   external: ['vue'],
 71 | 
 72 |   output: {
 73 |     compact: true,
 74 |     sourcemap: true,
 75 |     file: 'dist/vue3-roulette.js',
 76 |     format: 'cjs',
 77 |     name: 'vue3-roulette',
 78 |     exports: 'auto',
 79 |     // Provide global variable names to replace your external imports.
 80 |     globals: {
 81 |       vue: 'Vue'
 82 |     }
 83 |   },
 84 | 
 85 |   plugins: [
 86 |     replace({
 87 |       'process.env.NODE_ENV': JSON.stringify('production'),
 88 |       preventAssignment: true
 89 |     }),
 90 | 
 91 |     svg(),
 92 | 
 93 |     vue({
 94 |       // Required to extract and re-inject SCSS styles as CSS
 95 |       preprocessStyles: true,
 96 |       css: true,
 97 |       template: {
 98 |         isProduction: true,
 99 |         optimizeSSR: true
100 |       }
101 |     }),
102 | 
103 |     resolve({
104 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
105 |     }),
106 | 
107 |     postcss(),
108 | 
109 |     commonjs(),
110 | 
111 |     babel({
112 |       exclude: 'node_modules/**',
113 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
114 |       babelHelpers: 'bundled',
115 |       presets: [
116 |         ['@babel/preset-env', {}]
117 |       ]
118 |     }),
119 | 
120 |     terser({
121 |       output: { ecma: 5 }
122 |     })
123 |   ]
124 | }
125 | 
126 | const iifeConfig = {
127 |   input: 'src/index.js',
128 | 
129 |   // Dependencies to exclude in the build output.
130 |   external: ['vue'],
131 | 
132 |   output: {
133 |     compact: true,
134 |     file: 'dist/vue3-roulette.min.js',
135 |     format: 'iife',
136 |     name: 'vue3Roulette',
137 |     exports: 'auto',
138 |     // Provide global variable names to replace your external imports.
139 |     globals: {
140 |       vue: 'Vue'
141 |     }
142 |   },
143 | 
144 |   plugins: [
145 |     replace({
146 |       'process.env.NODE_ENV': JSON.stringify('production'),
147 |       preventAssignment: true
148 |     }),
149 | 
150 |     svg(),
151 | 
152 |     vue({
153 |       // Required to extract and re-inject SCSS styles as CSS
154 |       preprocessStyles: true,
155 |       css: true,
156 |       template: {
157 |         isProduction: true
158 |       }
159 |     }),
160 | 
161 |     resolve({
162 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
163 |     }),
164 | 
165 |     postcss(),
166 | 
167 |     commonjs(),
168 | 
169 |     babel({
170 |       exclude: 'node_modules/**',
171 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
172 |       babelHelpers: 'bundled',
173 |       presets: [
174 |         ['@babel/preset-env', {}]
175 |       ]
176 |     }),
177 | 
178 |     terser({
179 |       output: { ecma: 5 }
180 |     })
181 |   ]
182 | }
183 | 
184 | export default [esmConfig, umdConfig, iifeConfig]
185 | 


--------------------------------------------------------------------------------
/pages/components/Navbar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="drawer fixed top-0 w-full lg:relative lg:h-16"
  4 |     :class="[{'z-20 h-screen': drawerOpen}, {'z-20 h-16': !drawerOpen}]"
  5 |   >
  6 |     <input
  7 |       id="my-drawer-3"
  8 |       v-model="drawerOpen"
  9 |       type="checkbox"
 10 |       class="drawer-toggle"
 11 |     >
 12 |     <div class="drawer-content">
 13 |       <div class="navbar mb-2 shadow-lg bg-neutral text-neutral-content ">
 14 |         <div class="flex-none lg:hidden">
 15 |           <label
 16 |             for="my-drawer-3"
 17 |             class="btn btn-square btn-ghost"
 18 |           >
 19 |             <svg
 20 |               xmlns="http://www.w3.org/2000/svg"
 21 |               fill="none"
 22 |               viewBox="0 0 24 24"
 23 |               class="inline-block w-6 h-6 stroke-current"
 24 |             >
 25 |               <path
 26 |                 stroke-linecap="round"
 27 |                 stroke-linejoin="round"
 28 |                 stroke-width="2"
 29 |                 d="M4 6h16M4 12h16M4 18h16"
 30 |               />
 31 |             </svg>
 32 |           </label>
 33 |         </div> 
 34 |         <div class="px-2 mx-2 navbar-start">
 35 |           <span class="text-lg font-bold">
 36 |             Vue3 roulette
 37 |           </span>
 38 |         </div> 
 39 |         <div class="hidden px-2 mx-2 navbar-center lg:flex">
 40 |           <div class="flex items-stretch">
 41 |             <router-link to="/">
 42 |               <a class="btn btn-ghost btn-sm rounded-btn">
 43 |                 Home
 44 |               </a>
 45 |             </router-link>
 46 |             <router-link to="/docs">
 47 |               <a class="btn btn-ghost btn-sm rounded-btn">
 48 |                 Docs
 49 |               </a>
 50 |             </router-link>
 51 |             <router-link to="/examples">
 52 |               <a class="btn btn-ghost btn-sm rounded-btn">
 53 |                 Demo
 54 |               </a>
 55 |             </router-link>
 56 |             <router-link to="/custom">
 57 |               <a class="btn btn-ghost btn-sm rounded-btn">
 58 |                 Custom
 59 |               </a>
 60 |             </router-link>
 61 |           </div>
 62 |         </div> 
 63 |         <div class="navbar-end">
 64 |           <a
 65 |             href="https://github.com/nitocode/vue3-roulette"
 66 |             target="_blank"
 67 |             class="btn btn-square btn-ghost"
 68 |           >
 69 |             <svg
 70 |               xmlns="http://www.w3.org/2000/svg"
 71 |               viewBox="0 0 512 512"
 72 |               class="inline-block w-6 h-6 fill-current"
 73 |             ><path d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z" /></svg>
 74 |           </a>
 75 |         </div>
 76 |       </div>
 77 |     </div>
 78 |     <div class="drawer-side">
 79 |       <label
 80 |         for="my-drawer-3"
 81 |         class="drawer-overlay"
 82 |       /> 
 83 |       <ul class="p-4 overflow-y-auto menu w-80 bg-base-100">
 84 |         <li>
 85 |           <router-link
 86 |             to="/"
 87 |             @click="drawerOpen = false"
 88 |           >
 89 |             <a>Home</a>
 90 |           </router-link>
 91 |         </li> 
 92 |         <li>
 93 |           <router-link
 94 |             to="/docs"
 95 |             @click="drawerOpen = false"
 96 |           >
 97 |             <a>Docs</a>
 98 |           </router-link>
 99 |         </li>
100 |         <li>
101 |           <router-link
102 |             to="/examples"
103 |             @click="drawerOpen = false"
104 |           >
105 |             <a>Demo</a>
106 |           </router-link>
107 |         </li>
108 |         <li>
109 |           <router-link
110 |             to="/custom"
111 |             @click="drawerOpen = false"
112 |           >
113 |             <a>Custom</a>
114 |           </router-link>
115 |         </li>
116 |       </ul>
117 |     </div>
118 |   </div>
119 | </template>
120 | 
121 | <script>
122 | export default {
123 |   name: "Navbar",
124 |   data () {
125 |     return {
126 |       drawerOpen: false
127 |     }
128 |   }
129 | }
130 | </script>
131 | 
132 | <style>
133 | .drawer-toggle:checked~.drawer-content {
134 |   z-index: 100;
135 | }
136 | .drawer-toggle:checked~.drawer-side {
137 |   z-index: 101;
138 | }
139 | </style>


--------------------------------------------------------------------------------
/pages/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h1 class="text-4xl">
  4 |       Vue3 Roulette
  5 |     </h1>
  6 |     <div class="py-10 relative">
  7 |       <div
  8 |         class="wheel-anim"
  9 |         :class="{'wheel-anim-started': startAnim}"
 10 |       >
 11 |         <Roulette
 12 |           v-if="wheelActive"
 13 |           ref="wheel"
 14 |           :items="items"
 15 |           :first-item-index="firstItemIndex"
 16 |           :centered-indicator="wheelSettings.centeredIndicator"
 17 |           :indicator-position="wheelSettings.indicatorPosition"
 18 |           :size="wheelSettings.size"
 19 |           :display-shadow="wheelSettings.displayShadow"
 20 |           :display-border="wheelSettings.displayBorder"
 21 |           :display-indicator="wheelSettings.displayIndicator"
 22 |           :duration="wheelSettings.duration"
 23 |           :result-variation="wheelSettings.resultVariation"
 24 |           :easing="wheelSettings.easing"
 25 |           :counter-clockwise="wheelSettings.counterClockwise"
 26 |           :horizontal-content="wheelSettings.horizontalContent"
 27 |           :base-display="wheelSettings.baseDisplay"
 28 |           :base-size="wheelSettings.baseSize"
 29 |           :base-display-indicator="wheelSettings.baseDisplayIndicator"
 30 |           :base-display-shadow="wheelSettings.baseDisplayShadow"
 31 |           :base-background="wheelSettings.baseBackground"
 32 |           @click="launchWheel"
 33 |           @wheel-start="wheelStartedCallback"
 34 |           @wheel-end="wheelEndedCallback"
 35 |         >
 36 |           <template #baseContent>
 37 |             <div
 38 |               v-if="wheelSettings.baseHtmlContent"
 39 |               v-html="wheelSettings.baseHtmlContent"
 40 |             />
 41 |           </template>
 42 |         </Roulette>
 43 |       </div>
 44 | 
 45 |       <div 
 46 |         v-show="result"
 47 |         class="absolute bottom-2 left-1/2 transform -translate-x-1/2"
 48 |       >
 49 |         <button
 50 |           class="btn btn-xs mx-2"
 51 |           @click="onHardReset()"
 52 |         >
 53 |           Hard reset
 54 |         </button>
 55 |         <button
 56 |           class="btn btn-xs mx-2"
 57 |           @click="onSoftReset()"
 58 |         >
 59 |           Soft reset
 60 |         </button>
 61 |       </div>
 62 |     </div>
 63 | 
 64 |     <p class="text-xl text-gray-500 italic mb-10">
 65 |       A customizable and flexible fortune wheel made with vue3
 66 |     </p>
 67 | 
 68 |     <div class="tabs tabs-boxed justify-center">
 69 |       <a
 70 |         class="tab"
 71 |         :class="{'tab-active': managerId === 1 }"
 72 |         @click="managerId = 1"
 73 |       >Items manager</a> 
 74 |       <a
 75 |         class="tab"
 76 |         :class="{'tab-active': managerId === 2 }"
 77 |         @click="managerId = 2"
 78 |       >Wheel manager</a>
 79 |     </div>
 80 | 
 81 |     <div class="divider" /> 
 82 | 
 83 |     <ItemsManager
 84 |       v-if="managerId === 1"
 85 |       class="item-manager overflow-scroll lg:overflow-auto"
 86 |       :initial-items="items"
 87 |       :initial-first-item-index="firstItemIndex"
 88 |       @update-items="onSoftReset"
 89 |     />
 90 |     <WheelManager
 91 |       v-if="managerId === 2"
 92 |       :initial-settings="wheelSettings"
 93 |       @hard-reset="onHardReset"
 94 |     />
 95 |   </div>
 96 | </template>
 97 | 
 98 | <script>
 99 | import ItemsManager from "../components/ItemsManager.vue";
100 | import WheelManager from "../components/WheelManager.vue";
101 | import Roulette from "../../src/components/Roulette.vue";
102 | import wheelData from "../data/homeData";
103 | 
104 | export default {
105 |   name: "Home",
106 | 
107 |   components: {
108 |     Roulette,
109 |     ItemsManager,
110 |     WheelManager
111 |   },
112 | 
113 |   data () {
114 |     return {
115 |       ...wheelData,
116 |       wheelActive: true,
117 |       startAnim: false,
118 |       managerId: 1,
119 |       result: null
120 |     }
121 |   },
122 | 
123 |   mounted () {
124 |     setTimeout(() =>{
125 |       this.startAnim = true;
126 |     }, 500)
127 |   },
128 | 
129 |   methods: {
130 |     launchWheel() {
131 |       this.$refs.wheel.launchWheel();
132 |     },
133 |     wheelStartedCallback(resultItem) {
134 |       console.log("wheel started !", resultItem);
135 |     },
136 |     wheelEndedCallback(resultItem) {
137 |       console.log("wheel ended !", resultItem);
138 |       this.result = resultItem;
139 |     },
140 |     onSoftReset(newItemList) {
141 |       this.items = newItemList || this.items;
142 |       this.$refs.wheel.reset();
143 |     },
144 |     onHardReset() {
145 |       this.wheelActive = false;
146 |       this.result = null;
147 |       setTimeout(() => {
148 |         this.wheelActive = true;
149 |       }, 10);
150 |     },
151 |   }
152 | }
153 | </script>
154 | 
155 | <style lang="scss">
156 | .wheel-anim {
157 |   transition: transform 4s cubic-bezier(.58,-0.26,.24,1.11);
158 |   transform: rotate(-1800deg) scale(1.25);
159 | 
160 |   &-started {
161 |     transform: rotate(0deg) scale(1);
162 |   }
163 | }
164 | 
165 | </style>


--------------------------------------------------------------------------------
/pages/components/Example.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="relative pb-12">
  4 |       <Roulette
  5 |         v-if="wheelActive"
  6 |         :ref="refName"
  7 |         :items="items"
  8 |         :first-item-index="wheelData.firstItemIndex"
  9 |         :centered-indicator="wheelData.wheelSettings.centeredIndicator"
 10 |         :indicator-position="wheelData.wheelSettings.indicatorPosition"
 11 |         :size="wheelData.wheelSettings.size"
 12 |         :display-shadow="wheelData.wheelSettings.displayShadow"
 13 |         :display-border="wheelData.wheelSettings.displayBorder"
 14 |         :display-indicator="wheelData.wheelSettings.displayIndicator"
 15 |         :duration="wheelData.wheelSettings.duration"
 16 |         :result-variation="wheelData.wheelSettings.resultVariation"
 17 |         :easing="wheelData.wheelSettings.easing"
 18 |         :counter-clockwise="wheelData.wheelSettings.counterClockwise"
 19 |         :horizontal-content="wheelData.wheelSettings.horizontalContent"
 20 |         :base-display="wheelData.wheelSettings.baseDisplay"
 21 |         :base-size="wheelData.wheelSettings.baseSize"
 22 |         :base-display-indicator="wheelData.wheelSettings.baseDisplayIndicator"
 23 |         :base-display-shadow="wheelData.wheelSettings.baseDisplayShadow"
 24 |         :base-background="wheelData.wheelSettings.baseBackground"
 25 |         @click="launchWheel"
 26 |         @wheel-start="wheelStartedCallback"
 27 |         @wheel-end="wheelEndedCallback"
 28 |       >
 29 |         <template #baseContent>
 30 |           <div
 31 |             v-if="wheelData.wheelSettings.baseHtmlContent"
 32 |             v-html="wheelData.wheelSettings.baseHtmlContent"
 33 |           />
 34 |         </template>
 35 |       </Roulette>
 36 | 
 37 |       <div 
 38 |         v-show="result"
 39 |         class="absolute bottom-2 left-1/2 transform -translate-x-1/2"
 40 |       >
 41 |         <button
 42 |           class="btn btn-xs mx-2"
 43 |           @click="onHardReset()"
 44 |         >
 45 |           Hard reset
 46 |         </button>
 47 |         <button
 48 |           class="btn btn-xs mx-2"
 49 |           @click="onSoftReset()"
 50 |         >
 51 |           Soft reset
 52 |         </button>
 53 |       </div>
 54 |     </div>
 55 |     
 56 |     <div>
 57 |       <button
 58 |         class="btn btn-primary"
 59 |         @click="showCustomization = !showCustomization"
 60 |       >
 61 |         <span v-if="!showCustomization">Customize me!</span>
 62 |         <span v-else>Hide Customization</span>
 63 |       </button> 
 64 |     </div>
 65 | 
 66 |     <div
 67 |       v-if="showCustomization"
 68 |       class="mt-10"
 69 |     >
 70 |       <div class="tabs tabs-boxed justify-center">
 71 |         <a
 72 |           class="tab"
 73 |           :class="{'tab-active': managerId === 1 }"
 74 |           @click="managerId = 1"
 75 |         >Items manager</a> 
 76 |         <a
 77 |           class="tab"
 78 |           :class="{'tab-active': managerId === 2 }"
 79 |           @click="managerId = 2"
 80 |         >Wheel manager</a>
 81 |       </div>
 82 | 
 83 |       <div class="divider" /> 
 84 | 
 85 |       <ItemsManager
 86 |         v-if="managerId === 1"
 87 |         class="item-manager overflow-scroll lg:overflow-auto"
 88 |         :initial-items="wheelData.items"
 89 |         :initial-first-item-index="wheelData.firstItemIndex"
 90 |         @update-items="onSoftReset"
 91 |       />
 92 |       <WheelManager
 93 |         v-if="managerId === 2"
 94 |         :initial-settings="wheelData.wheelSettings"
 95 |         @hard-reset="onHardReset"
 96 |       />
 97 | 
 98 |       <div class="mt-4">
 99 |         <button
100 |           class="btn btn-primary"
101 |           @click="showCustomization = false"
102 |         >
103 |           <span>Hide Customization</span>
104 |         </button> 
105 |       </div>
106 |     </div>
107 |   </div>
108 | </template>
109 | 
110 | <script>
111 | import Roulette from "../../src/components/Roulette.vue";
112 | import ItemsManager from "../components/ItemsManager.vue";
113 | import WheelManager from "../components/WheelManager.vue";
114 | export default {
115 |   name: "Example",
116 |   components: { Roulette, ItemsManager, WheelManager },
117 |   props: {
118 |     wheelData: {
119 |       type: Object,
120 |       required: true
121 |     },
122 |     refName: {
123 |       type: String,
124 |       required: true
125 |     }
126 |   },
127 |   data() {
128 |     return {
129 |       wheelActive: true,
130 |       result: null,
131 |       items: {},
132 |       showCustomization: false,
133 |       managerId: 1
134 |     }
135 |   },
136 |   mounted () {
137 |     this.items = this.wheelData.items;
138 |   },
139 |   methods: {
140 |     launchWheel() {
141 |       this.$refs[this.refName].launchWheel();
142 |     },
143 |     wheelStartedCallback(resultItem) {
144 |       console.log("wheel started !", resultItem);
145 |     },
146 |     wheelEndedCallback(resultItem) {
147 |       console.log("wheel ended !", resultItem);
148 |       this.result = resultItem;
149 |     },
150 |     onSoftReset(newItemList) {
151 |       this.items = newItemList || this.items;
152 |       this.$refs[this.refName].reset();
153 |     },
154 |     onHardReset() {
155 |       this.wheelActive = false;
156 |       this.result = null;
157 |       setTimeout(() => {
158 |         this.wheelActive = true;
159 |       }, 10);
160 |     },
161 |   }
162 | }
163 | </script>
164 | 
165 | <style>
166 | 
167 | </style>


--------------------------------------------------------------------------------
/dist/vue3-roulette.min.js:
--------------------------------------------------------------------------------
1 | var vue3Roulette=function(e,t){"use strict";var n=t.defineComponent({name:"Roulette",emits:["wheelStart","wheelEnd"],props:{items:{type:Object,required:!0,validator:function(e){return e.length>=4}},firstItemIndex:{type:Object,required:!1,default:function(){return{value:0}}},wheelResultIndex:{type:Object,required:!1,default:function(){return{value:null}},validator:function(e){return"number"==typeof e.value}},centeredIndicator:{type:Boolean,required:!1,default:!1},indicatorPosition:{type:String,required:!1,default:"top",validator:function(e){return["top","right","bottom","left"].includes(e)}},size:{type:Number,required:!1,default:300},displayShadow:{type:Boolean,required:!1,default:!1},duration:{type:Number,required:!1,default:4},resultVariation:{type:Number,required:!1,default:0,validator:function(e){return e>=0&&e<=100}},easing:{type:String,required:!1,default:"ease",validator:function(e){return["ease","bounce"].includes(e)}},counterClockwise:{type:Boolean,required:!1,default:!1},horizontalContent:{type:Boolean,required:!1,default:!1},displayBorder:{type:Boolean,required:!1,default:!1},displayIndicator:{type:Boolean,required:!1,default:!0},baseDisplay:{type:Boolean,required:!1,default:!1},baseSize:{type:Number,required:!1,default:100},baseDisplayShadow:{type:Boolean,required:!1,default:!1},baseDisplayIndicator:{type:Boolean,required:!1,default:!1},baseBackground:{type:String,required:!1,default:""}},data:function(){return{randomIdRoulette:0,itemSelected:null,processingLock:!1}},computed:{itemAngle:function(){return 360/this.items.length},startingAngle:function(){return this.centeredIndicator?-1*this.firstItemIndex.value*this.itemAngle-this.itemAngle/2:-1*this.firstItemIndex.value*this.itemAngle},degreesVariation:function(){if(!this.resultVariation)return 0;var e=this.itemAngle/2*this.resultVariation/100*-1,t=this.itemAngle/2*this.resultVariation/100;return Number((Math.random()*(t-e)+e).toFixed(2))},counterClockWiseOperator:function(){return this.counterClockwise?-1:1}},mounted:function(){var e=this;this.randomIdRoulette=Number((999998*Math.random()+1).toFixed(0)),this.$nextTick((function(){e.reset(),document.querySelector("#wheel-container-".concat(e.randomIdRoulette," .wheel")).addEventListener("transitionend",(function(){e.processingLock=!1,e.$emit("wheel-end",e.itemSelected)}))}))},methods:{reset:function(){this.itemSelected=null,document.querySelector("#wheel-container-".concat(this.randomIdRoulette," .wheel")).style.transform="rotate(".concat(this.startingAngle,"deg)")},launchWheel:function(){if(!this.processingLock||null==this.itemSelected){var e;this.processingLock=!0,e=null!==this.wheelResultIndex.value?this.wheelResultIndex.value%this.items.length:Math.floor(Math.random()*this.items.length+1)-1;var t=document.querySelector("#wheel-container-".concat(this.randomIdRoulette," .wheel"));this.itemSelected=this.items[e],t.style.transform="rotate(".concat(1080*this.counterClockWiseOperator+-e*this.itemAngle-this.itemAngle/2+this.degreesVariation,"deg)"),this.$emit("wheel-start",this.itemSelected)}}}}),a=["id"],o={class:"wheel-base"},r={key:0,class:"wheel-base-indicator"},i=["innerHTML"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('.wheel-container[data-v-2d0cf945],\n.wheel-base[data-v-2d0cf945],\n.wheel-base-container[data-v-2d0cf945],\n.wheel-base-indicator[data-v-2d0cf945] {\n  transition: transform 1s ease-in-out;\n}\n.wheel-container[data-v-2d0cf945] {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n  border-radius: 50%;\n  cursor: pointer;\n}\n.wheel-container-indicator[data-v-2d0cf945]:before {\n  content: "";\n  position: absolute;\n  z-index: 4;\n  width: 0;\n  height: 0;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  border-top: 20px solid black;\n  transform: translateX(-50%);\n}\n.wheel-container.indicator-top[data-v-2d0cf945] {\n  transform: rotate(0deg);\n}\n.wheel-container.indicator-right[data-v-2d0cf945] {\n  transform: rotate(90deg);\n}\n.wheel-container.indicator-right .wheel-base[data-v-2d0cf945] {\n  transform: rotate(-90deg);\n}\n.wheel-container.indicator-bottom[data-v-2d0cf945] {\n  transform: rotate(180deg);\n}\n.wheel-container.indicator-bottom .wheel-base[data-v-2d0cf945] {\n  transform: rotate(-180deg);\n}\n.wheel-container.indicator-left[data-v-2d0cf945] {\n  transform: rotate(270deg);\n}\n.wheel-container.indicator-left .wheel-base[data-v-2d0cf945] {\n  transform: rotate(-270deg);\n}\n.wheel-container-border[data-v-2d0cf945] {\n  border: 8px solid black;\n}\n.wheel-container-shadow[data-v-2d0cf945] {\n  box-shadow: 5px 5px 15px -5px #000000;\n}\n.wheel-base-container[data-v-2d0cf945] {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 50%;\n  border-radius: 50%;\n  border: 5px solid black;\n  transform: translate(-50%, -50%);\n}\n.wheel-base-container-shadow[data-v-2d0cf945] {\n  box-shadow: 5px 5px 15px -5px #000000;\n}\n.wheel-base-container .wheel-base[data-v-2d0cf945] {\n  position: absolute;\n  z-index: 2;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n}\n.wheel-base-container .wheel-base-indicator[data-v-2d0cf945] {\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n}\n.wheel-base-container .wheel-base-indicator[data-v-2d0cf945]:before {\n  content: "";\n  position: absolute;\n  z-index: 1;\n  top: -20px;\n  width: 0;\n  height: 0;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  border-bottom: 20px solid black;\n  transform: translateX(-50%);\n}\n.wheel[data-v-2d0cf945] {\n  background: white;\n  border-radius: 50%;\n  margin: auto;\n  overflow: hidden;\n}\n.wheel.easing-ease[data-v-2d0cf945] {\n  transition: transform cubic-bezier(0.65, 0, 0.35, 1);\n}\n.wheel.easing-bounce[data-v-2d0cf945] {\n  transition: transform cubic-bezier(0.49, 0.02, 0.52, 1.12);\n}\n.wheel-border[data-v-2d0cf945]:after {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 3;\n  border-radius: 50%;\n  background-image: linear-gradient(to left, black 33%, rgba(255, 255, 255, 0) 0%);\n  background-position: bottom;\n  background-size: 3px 1px;\n  /* background:linear-gradient(red,purple,orange); */\n  -webkit-mask: radial-gradient(transparent 65%, #000 66%);\n  mask: radial-gradient(transparent 65%, #000 66%);\n}\n.wheel-item[data-v-2d0cf945] {\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 50%;\n  height: 50%;\n  transform-origin: 0% 100%;\n  border: 1px solid black;\n}\n.wheel-item[data-v-2d0cf945]:nth-child(odd) {\n  background-color: skyblue;\n}\n.wheel-item[data-v-2d0cf945]:nth-child(even) {\n  background-color: pink;\n}\n.wheel .content[data-v-2d0cf945] {\n  position: absolute;\n  left: -100%;\n  width: 200%;\n  height: 200%;\n  text-align: center;\n  transform: skewY(30deg) rotate(0deg);\n  padding-top: 20px;\n}\n.wheel .content.horizontal-content[data-v-2d0cf945] {\n  left: initial;\n  right: 100%;\n  width: 50%;\n  height: 250%;\n  text-align: right;\n}\n.wheel .content.horizontal-content span[data-v-2d0cf945] {\n  display: block;\n  transform: rotate(270deg);\n}'),n.render=function(e,n,d,l,s,c){return t.openBlock(),t.createElementBlock("div",{id:"wheel-container-".concat(e.randomIdRoulette),class:t.normalizeClass(["wheel-container",["indicator-".concat(e.indicatorPosition),{"wheel-container-indicator":e.displayIndicator},{"wheel-container-shadow":e.displayShadow},{"wheel-container-border":e.displayBorder}]])},[e.baseDisplay?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["wheel-base-container",[{"wheel-base-container-shadow":e.baseDisplayShadow}]]),style:t.normalizeStyle({width:"".concat(e.baseSize,"px"),height:"".concat(e.baseSize,"px"),background:"".concat(e.baseBackground)})},[t.createElementVNode("div",o,[t.renderSlot(e.$slots,"baseContent")]),e.baseDisplayIndicator?(t.openBlock(),t.createElementBlock("div",r)):t.createCommentVNode("",!0)],6)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(["wheel",["easing-".concat(e.easing),{"wheel-border":e.displayBorder}]]),style:t.normalizeStyle({width:"".concat(e.size,"px"),height:"".concat(e.size,"px"),transitionDuration:"".concat(e.duration,"s"),transform:"rotate(".concat(e.startingAngle,"deg)")})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.items,(function(n,a){return t.openBlock(),t.createElementBlock("div",{key:n.id,class:"wheel-item",style:t.normalizeStyle({transform:"rotate(".concat(e.itemAngle*a,"deg) skewY(").concat(-(90-e.itemAngle),"deg)"),background:n.background})},[t.createElementVNode("div",{class:t.normalizeClass(["content",{"horizontal-content":e.horizontalContent}]),style:t.normalizeStyle({transform:"skewY(".concat(90-e.itemAngle,"deg) rotate(").concat(e.itemAngle/2,"deg)")})},[t.createElementVNode("span",{style:t.normalizeStyle({color:n.textColor}),innerHTML:n.htmlContent},null,12,i)],6)],4)})),128))],6)],10,a)},n.__scopeId="data-v-2d0cf945",e.Roulette=n,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);


--------------------------------------------------------------------------------
/pages/components/WheelManager.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flex flex-col lg:flex-row items-top justify-around">
  3 |     <div>
  4 |       <p class="text-xl mb-4">
  5 |         Wheel manager
  6 |       </p>
  7 |       
  8 |       <!-- DISPLAY SHADOW -->
  9 |       <div class="form-control">
 10 |         <label class="cursor-pointer label">
 11 |           <span class="label-text">Display Shadow</span> 
 12 |           <input
 13 |             id="shadow"
 14 |             v-model="settings.displayShadow"
 15 |             class="toggle toggle-primary"
 16 |             type="checkbox"
 17 |           >
 18 |         </label>
 19 |       </div>
 20 |       <!-- DISPLAY BORDER -->      
 21 |       <div class="form-control">
 22 |         <label class="cursor-pointer label">
 23 |           <span class="label-text">Display Border</span> 
 24 |           <input
 25 |             id="border"
 26 |             v-model="settings.displayBorder"
 27 |             class="toggle toggle-primary"
 28 |             type="checkbox"
 29 |           >
 30 |         </label>
 31 |       </div>
 32 |       <!-- DISPLAY INDICATOR -->
 33 |       <div class="form-control">
 34 |         <label class="cursor-pointer label">
 35 |           <span class="label-text">Display Indicator</span> 
 36 |           <input
 37 |             id="indicator"
 38 |             v-model="settings.displayIndicator"
 39 |             class="toggle toggle-primary"
 40 |             type="checkbox"
 41 |           >
 42 |         </label>
 43 |       </div>
 44 |       <!-- CENTERED INDICATOR -->
 45 |       <div class="form-control">
 46 |         <label class="cursor-pointer label">
 47 |           <span class="label-text">Centered indicator</span> 
 48 |           <input
 49 |             id="centered"
 50 |             v-model="settings.centeredIndicator"
 51 |             type="checkbox"
 52 |             class="checkbox checkbox-primary"
 53 |           >
 54 |         </label>
 55 |       </div>
 56 |       <!-- COUNTER CLOCKWISE -->
 57 |       <div class="form-control">
 58 |         <label class="cursor-pointer label">
 59 |           <span class="label-text">Counter clockwise</span> 
 60 |           <input
 61 |             id="clock"
 62 |             v-model="settings.counterClockwise"
 63 |             type="checkbox"
 64 |             class="checkbox checkbox-primary"
 65 |           >
 66 |         </label>
 67 |       </div>
 68 |       <!-- CENTERED INDICATOR -->      
 69 |       <div class="form-control">
 70 |         <label class="cursor-pointer label">
 71 |           <span class="label-text">Horizontal content</span> 
 72 |           <input
 73 |             id="horizontal"
 74 |             v-model="settings.horizontalContent"
 75 |             type="checkbox"
 76 |             class="checkbox checkbox-primary"
 77 |           >
 78 |         </label>
 79 |       </div>
 80 |       <!-- SIZE -->
 81 |       <div class="form-control">
 82 |         <label class="label">
 83 |           <span class="label-text">Size</span>
 84 |         </label> 
 85 |         <label class="input-group input-group-md">
 86 |           <input
 87 |             id="size"
 88 |             v-model="settings.size"
 89 |             class="input input-primary input-bordered input-md w-full"
 90 |             type="number"
 91 |           >
 92 |           <span>px</span>
 93 |         </label>
 94 |       </div> 
 95 |       <!-- DURATION -->
 96 |       <div class="form-control">
 97 |         <label class="label">
 98 |           <span class="label-text">Duration</span>
 99 |         </label> 
100 |         <label class="input-group input-group-md">
101 |           <input
102 |             id="duration"
103 |             v-model="settings.duration"
104 |             class="input input-primary input-bordered input-md w-full"
105 |             type="number"
106 |           >
107 |           <span>&nbsp;s&nbsp;</span>
108 |         </label>
109 |       </div> 
110 |       <!-- VARIATION -->      
111 |       <div class="form-control">
112 |         <label class="label">
113 |           <span class="label-text">Variation</span>
114 |         </label> 
115 |         <label class="input-group input-group-md">
116 |           <input
117 |             id="variation"
118 |             v-model="settings.resultVariation"
119 |             class="input input-primary input-bordered input-md w-full"
120 |             type="number"
121 |           >
122 |           <span>%&nbsp;</span>
123 |         </label>
124 | 
125 |         <input
126 |           v-model="settings.resultVariation"
127 |           type="range"
128 |           max="100"
129 |           class="range range-primary mt-2"
130 |         > 
131 |       </div> 
132 |       <!-- INDICATOR POSITION -->
133 |       <div class="form-control w-full max-w-xs">
134 |         <label
135 |           for="position"
136 |           class="label"
137 |         >
138 |           <span class="label-text">Indicator position</span> 
139 |         </label> 
140 |         <select
141 |           id="position"
142 |           v-model="settings.indicatorPosition"
143 |           name="position"
144 |           class="select select-bordered select-primary w-full max-w-xs"
145 |         >
146 |           <option value="top">
147 |             Top
148 |           </option>
149 |           <option value="right">
150 |             Right
151 |           </option>
152 |           <option value="bottom">
153 |             Bottom
154 |           </option>
155 |           <option value="left">
156 |             Left
157 |           </option>
158 |         </select>
159 |       </div>
160 | 
161 |       <!-- EASING -->
162 |       <div class="form-control w-full max-w-xs">
163 |         <label
164 |           for="easing"
165 |           class="label"
166 |         >
167 |           <span class="label-text">Easing</span> 
168 |         </label> 
169 |         <select
170 |           id="easing"
171 |           v-model="settings.easing"
172 |           name="easing"
173 |           class="select select-bordered select-primary w-full max-w-xs"
174 |         >
175 |           <option value="ease">
176 |             Ease
177 |           </option>
178 |           <option value="bounce">
179 |             Bounce
180 |           </option>
181 |         </select>
182 |       </div>
183 |     </div>
184 | 
185 |     <div class="divider lg:divider-vertical" /> 
186 | 
187 |     <div>
188 |       <p class="text-xl mb-4">
189 |         Wheel base manager
190 |       </p>
191 |       <!-- DISPLAY BASE -->      
192 |       <div class="form-control">
193 |         <label class="cursor-pointer label">
194 |           <span class="label-text">Display base</span> 
195 |           <input
196 |             id="base"
197 |             v-model="settings.baseDisplay"
198 |             class="toggle toggle-primary"
199 |             type="checkbox"
200 |           >
201 |         </label>
202 |       </div>
203 |       <div :class="{'opacity-50': !settings.baseDisplay}">
204 |         <!-- DISPLAY BASE SHADOW -->          
205 |         <div class="form-control">
206 |           <label class="cursor-pointer label">
207 |             <span class="label-text">Display base shadow</span> 
208 |             <input
209 |               id="baseShadow"
210 |               v-model="settings.baseDisplayShadow"
211 |               class="toggle toggle-primary"
212 |               type="checkbox"
213 |             >
214 |           </label>
215 |         </div>
216 |         <!-- DISPLAY BASE INDICATOR -->
217 |         <div class="form-control">
218 |           <label class="cursor-pointer label">
219 |             <span class="label-text">Display base indicator</span> 
220 |             <input
221 |               id="baseIndicator"
222 |               v-model="settings.baseDisplayIndicator"
223 |               class="toggle toggle-primary"
224 |               type="checkbox"
225 |             >
226 |           </label>
227 |         </div>
228 | 
229 |         <!-- BASE SIZE -->      
230 |         <div class="form-control">
231 |           <label class="label">
232 |             <span class="label-text">Base size</span>
233 |           </label> 
234 |           <label class="input-group input-group-md">
235 |             <input
236 |               id="baseSize"
237 |               v-model="settings.baseSize"
238 |               class="input input-primary input-bordered input-md w-full"
239 |               type="number"
240 |             >
241 |             <span>px</span>
242 |           </label>
243 |         </div> 
244 |         <!-- BASE BACKGROUND -->
245 |         <div class="form-control">
246 |           <label class="label">
247 |             <span class="label-text">Base background</span>
248 |           </label> 
249 |           <input
250 |             id="baseBackground"
251 |             v-model="settings.baseBackground"
252 |             class="input input-primary input-bordered"
253 |             type="text"
254 |           >
255 |         </div> 
256 |         <!-- BASE HTML CONTENT -->
257 |         <div class="form-control">
258 |           <label class="label">
259 |             <span class="label-text">Base HTML Content</span>
260 |           </label> 
261 |           <textarea
262 |             v-model="settings.baseHtmlContent"
263 |             class="textarea h-24 textarea-bordered textarea-primary"
264 |           />
265 |         </div> 
266 |       </div>
267 |     </div>
268 |   </div>
269 | </template>
270 | 
271 | <script>
272 | export default {
273 |   name: "WheelManager",
274 |   props: {
275 |     initialSettings: {
276 |       type: Object,
277 |       required: true,
278 |     },
279 |   },
280 |   data() {
281 |     return {
282 |       settings: {},
283 |     };
284 |   },
285 |   mounted() {
286 |     this.settings = this.initialSettings;
287 |   },
288 | };
289 | </script>
290 | 
291 | <style lang="scss">
292 | </style>


--------------------------------------------------------------------------------
/pages/data/examplesData.js:
--------------------------------------------------------------------------------
  1 | const yesNoData = {
  2 |   items: [
  3 |     { id: 1, name: "Yes", htmlContent: "Yes", textColor: "", background: "#9deb9e" },
  4 |     { id: 2, name: "No", htmlContent: "No", textColor: "", background: "#acacac" },
  5 |     { id: 3, name: "Yes", htmlContent: "Yes", textColor: "", background: "#9deb9e" },
  6 |     { id: 4, name: "No", htmlContent: "No", textColor: "", background: "#acacac" },
  7 |     { id: 5, name: "Yes", htmlContent: "Yes", textColor: "", background: "#9deb9e" },
  8 |     { id: 6, name: "No", htmlContent: "No", textColor: "", background: "#acacac" },
  9 |     { id: 7, name: "Yes", htmlContent: "Yes", textColor: "", background: "#9deb9e" },
 10 |     { id: 8, name: "No", htmlContent: "No", textColor: "", background: "#acacac" },
 11 |     { id: 9, name: "Yes", htmlContent: "Yes", textColor: "", background: "#9deb9e" },
 12 |     { id: 10, name: "No", htmlContent: "No", textColor: "", background: "#acacac" }
 13 |   ],
 14 |   firstItemIndex: { value: 0 },
 15 |   wheelSettings: {
 16 |     centeredIndicator: true,
 17 |     indicatorPosition: "top",
 18 |     size: 300,
 19 |     displayShadow: true,
 20 |     duration: 5,
 21 |     resultVariation: 95,
 22 |     easing: "ease",
 23 |     counterClockwise: true,
 24 |     horizontalContent: false,
 25 |     displayBorder: true,
 26 |     displayIndicator: true,
 27 |     baseDisplay: true,
 28 |     baseSize: 180,
 29 |     baseDisplayShadow: true,
 30 |     baseDisplayIndicator: true,
 31 |     baseBackground: "rgb(255 69 69)",
 32 |     baseHtmlContent: "<strong class=\"text-white\">Ask yourself<br>a question</strong>",
 33 |   }
 34 | };
 35 | const namesData = {
 36 |   items: [
 37 |     { id: 1, name: "Jean", htmlContent: "<strong>Jean</strong>", textColor: "", background: "#de3923" },
 38 |     { id: 2, name: "Marie", htmlContent: "<strong>Marie</strong>", textColor: "", background: "#de9c21" },
 39 |     { id: 3, name: "Louis", htmlContent: "<strong>Louis</strong>", textColor: "", background: "#c2de21" },
 40 |     { id: 4, name: "Max", htmlContent: "<strong>Max</strong>", textColor: "", background: "#de3923" },
 41 |     { id: 5, name: "Caroline", htmlContent: "<strong>Caroline</strong>", textColor: "", background: "#de9c21" },
 42 |     { id: 6, name: "Lando", htmlContent: "<strong>Lando</strong>", textColor: "", background: "#c2de21" },
 43 |     { id: 7, name: "Anna", htmlContent: "<strong>Anna</strong>", textColor: "", background: "#de3923" },
 44 |     { id: 8, name: "Pierre", htmlContent: "<strong>Pierre</strong>", textColor: "", background: "#de9c21" },
 45 |   ],
 46 |   firstItemIndex: { value: 0 },
 47 |   wheelSettings: {
 48 |     centeredIndicator: false,
 49 |     indicatorPosition: "top",
 50 |     size: 250,
 51 |     displayShadow: true,
 52 |     duration: 3,
 53 |     resultVariation: 70,
 54 |     easing: "bounce",
 55 |     counterClockwise: false,
 56 |     horizontalContent: false,
 57 |     displayBorder: true,
 58 |     displayIndicator: true,
 59 |     baseDisplay: false,
 60 |     baseSize: 100,
 61 |     baseDisplayShadow: true,
 62 |     baseDisplayIndicator: true,
 63 |     baseBackground: "#EEAA33",
 64 |     baseHtmlContent: "<strong>Pick a<br>name!</strong>",
 65 |   }
 66 | };
 67 | const eatData = {
 68 |   items: [
 69 |     { id: 1, name: "Burger", htmlContent: "<strong>Burger</strong>", textColor: "white", background: "#f2831b" },
 70 |     { id: 2, name: "Veggie", htmlContent: "<strong>Veggie</strong>", textColor: "white", background: "#37e307" },
 71 |     { id: 3, name: "Pizza", htmlContent: "<strong>Pizza</strong>", textColor: "white", background: "#3ab3f0" },
 72 |     { id: 4, name: "Pokebowl", htmlContent: "<strong>Pokebowl</strong>", textColor: "white", background: "#f0403a" },
 73 |     { id: 5, name: "Kebab", htmlContent: "<strong>Kebab</strong>", textColor: "white", background: "#f2831b" },
 74 |     { id: 6, name: "Salads", htmlContent: "<strong>Salads</strong>", textColor: "white", background: "#37e307" },
 75 |     { id: 7, name: "Japanese", htmlContent: "<strong>Japanese</strong>", textColor: "white", background: "#3ab3f0" },
 76 |     { id: 8, name: "Pokebowl", htmlContent: "<strong>Pokebowl</strong>", textColor: "white", background: "#f0403a" },
 77 |     { id: 9, name: "Thai", htmlContent: "<strong>Burger</strong>", textColor: "white", background: "#f2831b" },
 78 |     { id: 10, name: "Sandwich", htmlContent: "<strong>Sandwich</strong>", textColor: "white", background: "#37e307" },
 79 |     { id: 11, name: "French", htmlContent: "<strong>French</strong>", textColor: "white", background: "#3ab3f0" },
 80 |     { id: 12, name: "Pasta", htmlContent: "<strong>Pasta</strong>", textColor: "white", background: "#f0403a" },
 81 |   ],
 82 |   firstItemIndex: { value: 0 },
 83 |   wheelSettings: {
 84 |     centeredIndicator: false,
 85 |     indicatorPosition: "right",
 86 |     size: 400,
 87 |     displayShadow: true,
 88 |     duration: 8,
 89 |     resultVariation: 70,
 90 |     easing: "bounce",
 91 |     counterClockwise: false,
 92 |     horizontalContent: false,
 93 |     displayBorder: true,
 94 |     displayIndicator: false,
 95 |     baseDisplay: true,
 96 |     baseSize: 100,
 97 |     baseDisplayShadow: true,
 98 |     baseDisplayIndicator: true,
 99 |     baseBackground: "#444",
100 |     baseHtmlContent: "<strong class=\"text-white\">What to<br>eat?</strong>",
101 |   }
102 | }
103 | 
104 | const numbersData = {
105 |   items: [
106 |     { id: 1, name: "1", htmlContent: "1", textColor: "white", background: "#aa64fa" },
107 |     { id: 2, name: "2", htmlContent: "2", textColor: "white", background: "#6475fa" },
108 |     { id: 3, name: "3", htmlContent: "3", textColor: "white", background: "#aa64fa" },
109 |     { id: 4, name: "4", htmlContent: "4", textColor: "white", background: "#6475fa" },
110 |     { id: 5, name: "5", htmlContent: "5", textColor: "white", background: "#aa64fa" },
111 |     { id: 6, name: "6", htmlContent: "6", textColor: "white", background: "#6475fa" },
112 |     { id: 7, name: "7", htmlContent: "7", textColor: "white", background: "#aa64fa" },
113 |     { id: 8, name: "8", htmlContent: "8", textColor: "white", background: "#6475fa" },
114 |     { id: 9, name: "9", htmlContent: "9", textColor: "white", background: "#aa64fa" },
115 |     { id: 10, name: "10", htmlContent: "10", textColor: "white", background: "#6475fa" },
116 |   ],
117 |   firstItemIndex: { value: 0 },
118 |   wheelSettings: {
119 |     centeredIndicator: true,
120 |     indicatorPosition: "top",
121 |     size: 300,
122 |     displayShadow: true,
123 |     duration: 5,
124 |     resultVariation: 70,
125 |     easing: "ease",
126 |     counterClockwise: true,
127 |     horizontalContent: false,
128 |     displayBorder: false,
129 |     displayIndicator: true,
130 |     baseDisplay: false,
131 |     baseSize: 100,
132 |     baseDisplayShadow: true,
133 |     baseDisplayIndicator: true,
134 |     baseBackground: "#EEAA33",
135 |     baseHtmlContent: "<strong>Touch<br>Me!</strong>",
136 |   }
137 | }
138 | 
139 | const rouletteData = {
140 |   items: [
141 |     { id: 1, name: "0", htmlContent: "0", textColor: "white", background: "#68BB45" },
142 |     { id: 2, name: "32", htmlContent: "32", textColor: "white", background: "#EE2D2E" },
143 |     { id: 3, name: "15", htmlContent: "15", textColor: "white", background: "#000" },
144 |     { id: 4, name: "19", htmlContent: "19", textColor: "white", background: "#EE2D2E" },
145 |     { id: 5, name: "4", htmlContent: "4", textColor: "white", background: "#000" },
146 |     { id: 6, name: "21", htmlContent: "21", textColor: "white", background: "#EE2D2E" },
147 |     { id: 7, name: "2", htmlContent: "2", textColor: "white", background: "#000" },
148 |     { id: 8, name: "25", htmlContent: "25", textColor: "white", background: "#EE2D2E" },
149 |     { id: 9, name: "17", htmlContent: "17", textColor: "white", background: "#000" },
150 |     { id: 10, name: "34", htmlContent: "34", textColor: "white", background: "#EE2D2E" },
151 |     { id: 9, name: "6", htmlContent: "6", textColor: "white", background: "#000" },
152 |     { id: 10, name: "27", htmlContent: "27", textColor: "white", background: "#EE2D2E" },
153 |     { id: 9, name: "13", htmlContent: "13", textColor: "white", background: "#000" },
154 |     { id: 10, name: "36", htmlContent: "36", textColor: "white", background: "#EE2D2E" },
155 |     { id: 9, name: "11", htmlContent: "11", textColor: "white", background: "#000" },
156 |     { id: 10, name: "30", htmlContent: "30", textColor: "white", background: "#EE2D2E" },
157 |     { id: 9, name: "8", htmlContent: "8", textColor: "white", background: "#000" },
158 |     { id: 10, name: "23", htmlContent: "23", textColor: "white", background: "#EE2D2E" },
159 |     { id: 9, name: "10", htmlContent: "10", textColor: "white", background: "#000" },
160 |     { id: 10, name: "5", htmlContent: "5", textColor: "white", background: "#EE2D2E" },
161 |     { id: 9, name: "24", htmlContent: "24", textColor: "white", background: "#000" },
162 |     { id: 10, name: "16", htmlContent: "16", textColor: "white", background: "#EE2D2E" },
163 |     { id: 9, name: "33", htmlContent: "33", textColor: "white", background: "#000" },
164 |     { id: 10, name: "1", htmlContent: "1", textColor: "white", background: "#EE2D2E" },
165 |     { id: 9, name: "20", htmlContent: "20", textColor: "white", background: "#000" },
166 |     { id: 10, name: "14", htmlContent: "14", textColor: "white", background: "#EE2D2E" },
167 |     { id: 9, name: "31", htmlContent: "31", textColor: "white", background: "#000" },
168 |     { id: 10, name: "9", htmlContent: "9", textColor: "white", background: "#EE2D2E" },
169 |     { id: 9, name: "22", htmlContent: "22", textColor: "white", background: "#000" },
170 |     { id: 10, name: "18", htmlContent: "18", textColor: "white", background: "#EE2D2E" },
171 |     { id: 9, name: "29", htmlContent: "29", textColor: "white", background: "#000" },
172 |     { id: 10, name: "7", htmlContent: "7", textColor: "white", background: "#EE2D2E" },
173 |     { id: 9, name: "28", htmlContent: "28", textColor: "white", background: "#000" },
174 |     { id: 10, name: "12", htmlContent: "12", textColor: "white", background: "#EE2D2E" },
175 |     { id: 9, name: "35", htmlContent: "35", textColor: "white", background: "#000" },
176 |     { id: 10, name: "3", htmlContent: "3", textColor: "white", background: "#EE2D2E" },
177 |     { id: 9, name: "26", htmlContent: "26", textColor: "white", background: "#000" },
178 |   ],
179 |   firstItemIndex: { value: 0 },
180 |   wheelSettings: {
181 |     centeredIndicator: true,
182 |     indicatorPosition: "top",
183 |     size: 400,
184 |     displayShadow: true,
185 |     duration: 10,
186 |     resultVariation: 70,
187 |     easing: "ease",
188 |     counterClockwise: true,
189 |     horizontalContent: false,
190 |     displayBorder: false,
191 |     displayIndicator: true,
192 |     baseDisplay: true,
193 |     baseSize: 300,
194 |     baseDisplayShadow: false,
195 |     baseDisplayIndicator: false,
196 |     baseBackground: "#EEAA33",
197 |     baseHtmlContent: "<img src=\"./roulette.png\">",
198 |   }
199 | }
200 | 
201 | export { yesNoData, namesData, eatData, numbersData, rouletteData };


--------------------------------------------------------------------------------
/src/components/Roulette.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :id="`wheel-container-${randomIdRoulette}`"
  4 |     class="wheel-container"
  5 |     :class="[
  6 |       `indicator-${indicatorPosition}`,
  7 |       { 'wheel-container-indicator': displayIndicator },
  8 |       { 'wheel-container-shadow': displayShadow },
  9 |       { 'wheel-container-border': displayBorder },
 10 |     ]"
 11 |   >
 12 |     <!-- BASE WHEEL -->
 13 |     <div
 14 |       v-if="baseDisplay"
 15 |       class="wheel-base-container"
 16 |       :class="[{ 'wheel-base-container-shadow': baseDisplayShadow }]"
 17 |       :style="{
 18 |         width: `${baseSize}px`,
 19 |         height: `${baseSize}px`,
 20 |         background: `${baseBackground}`,
 21 |       }"
 22 |     >
 23 |       <div class="wheel-base">
 24 |         <slot name="baseContent" />
 25 |       </div>
 26 |       <div
 27 |         v-if="baseDisplayIndicator"
 28 |         class="wheel-base-indicator"
 29 |       />
 30 |     </div>
 31 |     <!-- WHEEL -->
 32 |     <div
 33 |       class="wheel"
 34 |       :class="[`easing-${easing}`, { 'wheel-border': displayBorder }]"
 35 |       :style="{
 36 |         width: `${size}px`,
 37 |         height: `${size}px`,
 38 |         transitionDuration: `${duration}s`,
 39 |         transform: `rotate(${startingAngle}deg)`,
 40 |       }"
 41 |     >
 42 |       <div
 43 |         v-for="(item, index) in items"
 44 |         :key="item.id"
 45 |         class="wheel-item"
 46 |         :style="{
 47 |           transform: `rotate(${itemAngle * index}deg) skewY(${-(
 48 |             90 - itemAngle
 49 |           )}deg)`,
 50 |           background: item.background,
 51 |         }"
 52 |       >
 53 |         <div
 54 |           class="content"
 55 |           :class="{ 'horizontal-content': horizontalContent }"
 56 |           :style="{
 57 |             transform: `skewY(${90 - itemAngle}deg) rotate(${
 58 |               itemAngle / 2
 59 |             }deg)`,
 60 |           }"
 61 |         >
 62 |           <span
 63 |             :style="{ color: item.textColor }"
 64 |             v-html="item.htmlContent"
 65 |           />
 66 |         </div>
 67 |       </div>
 68 |     </div>
 69 |   </div>
 70 | </template>
 71 | 
 72 | <script>
 73 | import { defineComponent } from 'vue'
 74 | export default defineComponent ({
 75 |   name: "Roulette",
 76 |   emits: ["wheelStart", "wheelEnd"],
 77 |   props: {
 78 |     items: {
 79 |       type: Object,
 80 |       required: true,
 81 |       validator(value) {
 82 |         return value.length >= 4;
 83 |       },
 84 |     },
 85 |     firstItemIndex: {
 86 |       type: Object,
 87 |       required: false,
 88 |       default() {
 89 |         return { value: 0 };
 90 |       },
 91 |     },
 92 |     wheelResultIndex: {
 93 |       type: Object,
 94 |       required: false,
 95 |       default() {
 96 |         return { value: null };
 97 |       },
 98 |       validator(obj) {
 99 |         return typeof obj.value === "number";
100 |       },
101 |     },
102 |     centeredIndicator: {
103 |       type: Boolean,
104 |       required: false,
105 |       default: false,
106 |     },
107 |     indicatorPosition: {
108 |       type: String,
109 |       required: false,
110 |       default: "top",
111 |       validator(value) {
112 |         return ["top", "right", "bottom", "left"].includes(value);
113 |       },
114 |     },
115 |     size: {
116 |       type: Number,
117 |       required: false,
118 |       default: 300,
119 |     },
120 |     displayShadow: {
121 |       type: Boolean,
122 |       required: false,
123 |       default: false,
124 |     },
125 |     duration: {
126 |       type: Number,
127 |       required: false,
128 |       default: 4,
129 |     },
130 |     resultVariation: {
131 |       type: Number,
132 |       required: false,
133 |       default: 0,
134 |       validator(value) {
135 |         return value >= 0 && value <= 100;
136 |       },
137 |     },
138 |     easing: {
139 |       type: String,
140 |       required: false,
141 |       default: "ease",
142 |       validator(value) {
143 |         return ["ease", "bounce"].includes(value);
144 |       },
145 |     },
146 |     counterClockwise: {
147 |       type: Boolean,
148 |       required: false,
149 |       default: false,
150 |     },
151 |     horizontalContent: {
152 |       type: Boolean,
153 |       required: false,
154 |       default: false,
155 |     },
156 |     displayBorder: {
157 |       type: Boolean,
158 |       required: false,
159 |       default: false,
160 |     },
161 |     displayIndicator: {
162 |       type: Boolean,
163 |       required: false,
164 |       default: true,
165 |     },
166 |     baseDisplay: {
167 |       type: Boolean,
168 |       required: false,
169 |       default: false,
170 |     },
171 |     baseSize: {
172 |       type: Number,
173 |       required: false,
174 |       default: 100,
175 |     },
176 |     baseDisplayShadow: {
177 |       type: Boolean,
178 |       required: false,
179 |       default: false,
180 |     },
181 |     baseDisplayIndicator: {
182 |       type: Boolean,
183 |       required: false,
184 |       default: false,
185 |     },
186 | 
187 |     baseBackground: {
188 |       type: String,
189 |       required: false,
190 |       default: "",
191 |     },
192 |   },
193 |   data() {
194 |     return {
195 |       randomIdRoulette: 0,
196 |       itemSelected: null,
197 |       processingLock: false,
198 |     };
199 |   },
200 |   computed: {
201 |     itemAngle: function () {
202 |       return 360 / this.items.length;
203 |     },
204 |     startingAngle: function () {
205 |       if (this.centeredIndicator) {
206 |         return (
207 |           -1 * this.firstItemIndex.value * this.itemAngle - this.itemAngle / 2
208 |         );
209 |       } else {
210 |         return -1 * this.firstItemIndex.value * this.itemAngle;
211 |       }
212 |     },
213 |     degreesVariation: function () {
214 |       if (!this.resultVariation) {
215 |         return 0;
216 |       }
217 |       const minDegreesVariation =
218 |         (((this.itemAngle / 2) * this.resultVariation) / 100) * -1;
219 |       const maxDegreesVariation =
220 |         ((this.itemAngle / 2) * this.resultVariation) / 100;
221 |       // Return random value between min and max degrees variation
222 |       return Number(
223 |         (
224 |           Math.random() * (maxDegreesVariation - minDegreesVariation) +
225 |           minDegreesVariation
226 |         ).toFixed(2)
227 |       );
228 |     },
229 |     counterClockWiseOperator: function () {
230 |       return this.counterClockwise ? -1 : 1;
231 |     },
232 |   },
233 |   mounted() {
234 |     this.randomIdRoulette = Number((Math.random() * (999999 - 1) +1).toFixed(0));
235 |     this.$nextTick(() => {
236 |       this.reset();
237 |       document.querySelector(`#wheel-container-${this.randomIdRoulette} .wheel`).addEventListener("transitionend", () => {
238 |         this.processingLock = false;
239 |         this.$emit("wheel-end", this.itemSelected);
240 |       });
241 |     })
242 |   },
243 |   methods: {
244 |     reset() {
245 |       this.itemSelected = null;
246 |       document.querySelector(
247 |         `#wheel-container-${this.randomIdRoulette} .wheel`
248 |       ).style.transform = `rotate(${this.startingAngle}deg)`;
249 |     },
250 |     launchWheel() {
251 |       if (this.processingLock && this.itemSelected != null) {
252 |         return;
253 |       }
254 |       this.processingLock = true;
255 |       let wheelResult;
256 |       if (this.wheelResultIndex.value !== null) {
257 |         wheelResult = this.wheelResultIndex.value % this.items.length;
258 |       } else {
259 |         wheelResult = Math.floor(Math.random() * this.items.length + 1) - 1;
260 |       }
261 |       const wheelElt = document.querySelector(`#wheel-container-${this.randomIdRoulette} .wheel`);
262 | 
263 |       this.itemSelected = this.items[wheelResult];
264 | 
265 |       wheelElt.style.transform = `rotate(${
266 |         this.counterClockWiseOperator * (360 * 3) +
267 |         -(wheelResult) * this.itemAngle -
268 |         this.itemAngle / 2 +
269 |         this.degreesVariation
270 |       }deg)`;
271 |       this.$emit("wheel-start", this.itemSelected);
272 |     },
273 |   },
274 | });
275 | </script>
276 | 
277 | <style lang="scss" scoped>
278 | .wheel-container,
279 | .wheel-base,
280 | .wheel-base-container,
281 | .wheel-base-indicator {
282 |   transition: transform 1s ease-in-out;
283 | }
284 | .wheel-container {
285 |   position: relative;
286 |   display: inline-block;
287 |   overflow: hidden;
288 |   border-radius: 50%;
289 |   cursor: pointer;
290 | 
291 |   &-indicator:before {
292 |     content: "";
293 |     position: absolute;
294 |     z-index: 4;
295 |     width: 0;
296 |     height: 0;
297 |     border-left: 20px solid transparent;
298 |     border-right: 20px solid transparent;
299 |     border-top: 20px solid black;
300 |     transform: translateX(-50%);
301 |   }
302 | 
303 |   &.indicator-top {
304 |     transform: rotate(0deg);
305 |   }
306 |   &.indicator-right {
307 |     transform: rotate(90deg);
308 |     .wheel-base {
309 |       transform: rotate(-90deg);
310 |     }
311 |   }
312 |   &.indicator-bottom {
313 |     transform: rotate(180deg);
314 |     .wheel-base {
315 |       transform: rotate(-180deg);
316 |     }
317 |   }
318 |   &.indicator-left {
319 |     transform: rotate(270deg);
320 |     .wheel-base {
321 |       transform: rotate(-270deg);
322 |     }
323 |   }
324 | 
325 |   &-border {
326 |     border: 8px solid black;
327 |   }
328 | 
329 |   &-shadow {
330 |     box-shadow: 5px 5px 15px -5px #000000;
331 |   }
332 | }
333 | .wheel-base-container {
334 |   position: absolute;
335 |   z-index: 2;
336 |   top: 50%;
337 |   left: 50%;
338 |   border-radius: 50%;
339 |   border: 5px solid black;
340 |   transform: translate(-50%, -50%);
341 | 
342 |   &-shadow {
343 |     box-shadow: 5px 5px 15px -5px #000000;
344 |   }
345 | 
346 |   .wheel-base {
347 |     position: absolute;
348 |     z-index: 2;
349 |     display: flex;
350 |     justify-content: center;
351 |     align-items: center;
352 |     overflow: hidden;
353 |     width: 100%;
354 |     height: 100%;
355 |     border-radius: 50%;
356 |   }
357 |   .wheel-base-indicator {
358 |     position: absolute;
359 |     z-index: 1;
360 |     width: 100%;
361 |     height: 100%;
362 |   }
363 |   .wheel-base-indicator:before {
364 |     content: "";
365 |     position: absolute;
366 |     z-index: 1;
367 |     top: -20px;
368 |     width: 0;
369 |     height: 0;
370 |     border-left: 20px solid transparent;
371 |     border-right: 20px solid transparent;
372 |     border-bottom: 20px solid black;
373 |     transform: translateX(-50%);
374 |   }
375 | }
376 | 
377 | .wheel {
378 |   background: white;
379 |   border-radius: 50%;
380 |   margin: auto;
381 |   overflow: hidden;
382 | 
383 |   &.easing-ease {
384 |     transition: transform cubic-bezier(0.65, 0, 0.35, 1);
385 |   }
386 |   &.easing-bounce {
387 |     transition: transform cubic-bezier(0.49, 0.02, 0.52, 1.12);
388 |   }
389 | 
390 |   &-border:after {
391 |     content: "";
392 |     width: 100%;
393 |     height: 100%;
394 |     position: absolute;
395 |     left: 0;
396 |     top: 0;
397 |     z-index: 3;
398 |     border-radius: 50%;
399 |     background-image: linear-gradient(
400 |       to left,
401 |       black 33%,
402 |       rgba(255, 255, 255, 0) 0%
403 |     );
404 |     background-position: bottom;
405 |     background-size: 3px 1px;
406 |     /* background:linear-gradient(red,purple,orange); */
407 |     -webkit-mask: radial-gradient(transparent 65%, #000 66%);
408 |     mask: radial-gradient(transparent 65%, #000 66%);
409 |   }
410 | 
411 |   &-item {
412 |     overflow: hidden;
413 |     position: absolute;
414 |     top: 0;
415 |     right: 0;
416 |     width: 50%;
417 |     height: 50%;
418 |     transform-origin: 0% 100%;
419 |     border: 1px solid black;
420 |   }
421 |   &-item:nth-child(odd) {
422 |     background-color: skyblue;
423 |   }
424 |   &-item:nth-child(even) {
425 |     background-color: pink;
426 |   }
427 | 
428 |   .content {
429 |     position: absolute;
430 |     left: -100%;
431 |     width: 200%;
432 |     height: 200%;
433 |     text-align: center;
434 |     transform: skewY(30deg) rotate(0deg);
435 |     padding-top: 20px;
436 | 
437 |     &.horizontal-content {
438 |       left: initial;
439 |       right: 100%;
440 |       width: 50%;
441 |       height: 250%;
442 |       text-align: right;
443 |       span {
444 |         display: block;
445 |         transform: rotate(270deg);
446 |       }
447 |     }
448 |   }
449 | }
450 | </style>


--------------------------------------------------------------------------------
/dist/vue3-roulette.esm.js:
--------------------------------------------------------------------------------
  1 | import { defineComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode, Fragment, renderList } from 'vue';
  2 | 
  3 | var script = defineComponent({
  4 |   name: "Roulette",
  5 |   emits: ["wheelStart", "wheelEnd"],
  6 |   props: {
  7 |     items: {
  8 |       type: Object,
  9 |       required: true,
 10 |       validator: function validator(value) {
 11 |         return value.length >= 4;
 12 |       }
 13 |     },
 14 |     firstItemIndex: {
 15 |       type: Object,
 16 |       required: false,
 17 |       "default": function _default() {
 18 |         return {
 19 |           value: 0
 20 |         };
 21 |       }
 22 |     },
 23 |     wheelResultIndex: {
 24 |       type: Object,
 25 |       required: false,
 26 |       "default": function _default() {
 27 |         return {
 28 |           value: null
 29 |         };
 30 |       },
 31 |       validator: function validator(obj) {
 32 |         return typeof obj.value === "number";
 33 |       }
 34 |     },
 35 |     centeredIndicator: {
 36 |       type: Boolean,
 37 |       required: false,
 38 |       "default": false
 39 |     },
 40 |     indicatorPosition: {
 41 |       type: String,
 42 |       required: false,
 43 |       "default": "top",
 44 |       validator: function validator(value) {
 45 |         return ["top", "right", "bottom", "left"].includes(value);
 46 |       }
 47 |     },
 48 |     size: {
 49 |       type: Number,
 50 |       required: false,
 51 |       "default": 300
 52 |     },
 53 |     displayShadow: {
 54 |       type: Boolean,
 55 |       required: false,
 56 |       "default": false
 57 |     },
 58 |     duration: {
 59 |       type: Number,
 60 |       required: false,
 61 |       "default": 4
 62 |     },
 63 |     resultVariation: {
 64 |       type: Number,
 65 |       required: false,
 66 |       "default": 0,
 67 |       validator: function validator(value) {
 68 |         return value >= 0 && value <= 100;
 69 |       }
 70 |     },
 71 |     easing: {
 72 |       type: String,
 73 |       required: false,
 74 |       "default": "ease",
 75 |       validator: function validator(value) {
 76 |         return ["ease", "bounce"].includes(value);
 77 |       }
 78 |     },
 79 |     counterClockwise: {
 80 |       type: Boolean,
 81 |       required: false,
 82 |       "default": false
 83 |     },
 84 |     horizontalContent: {
 85 |       type: Boolean,
 86 |       required: false,
 87 |       "default": false
 88 |     },
 89 |     displayBorder: {
 90 |       type: Boolean,
 91 |       required: false,
 92 |       "default": false
 93 |     },
 94 |     displayIndicator: {
 95 |       type: Boolean,
 96 |       required: false,
 97 |       "default": true
 98 |     },
 99 |     baseDisplay: {
100 |       type: Boolean,
101 |       required: false,
102 |       "default": false
103 |     },
104 |     baseSize: {
105 |       type: Number,
106 |       required: false,
107 |       "default": 100
108 |     },
109 |     baseDisplayShadow: {
110 |       type: Boolean,
111 |       required: false,
112 |       "default": false
113 |     },
114 |     baseDisplayIndicator: {
115 |       type: Boolean,
116 |       required: false,
117 |       "default": false
118 |     },
119 |     baseBackground: {
120 |       type: String,
121 |       required: false,
122 |       "default": ""
123 |     }
124 |   },
125 |   data: function data() {
126 |     return {
127 |       randomIdRoulette: 0,
128 |       itemSelected: null,
129 |       processingLock: false
130 |     };
131 |   },
132 |   computed: {
133 |     itemAngle: function itemAngle() {
134 |       return 360 / this.items.length;
135 |     },
136 |     startingAngle: function startingAngle() {
137 |       if (this.centeredIndicator) {
138 |         return -1 * this.firstItemIndex.value * this.itemAngle - this.itemAngle / 2;
139 |       } else {
140 |         return -1 * this.firstItemIndex.value * this.itemAngle;
141 |       }
142 |     },
143 |     degreesVariation: function degreesVariation() {
144 |       if (!this.resultVariation) {
145 |         return 0;
146 |       }
147 | 
148 |       var minDegreesVariation = this.itemAngle / 2 * this.resultVariation / 100 * -1;
149 |       var maxDegreesVariation = this.itemAngle / 2 * this.resultVariation / 100; // Return random value between min and max degrees variation
150 | 
151 |       return Number((Math.random() * (maxDegreesVariation - minDegreesVariation) + minDegreesVariation).toFixed(2));
152 |     },
153 |     counterClockWiseOperator: function counterClockWiseOperator() {
154 |       return this.counterClockwise ? -1 : 1;
155 |     }
156 |   },
157 |   mounted: function mounted() {
158 |     var _this = this;
159 | 
160 |     this.randomIdRoulette = Number((Math.random() * (999999 - 1) + 1).toFixed(0));
161 |     this.$nextTick(function () {
162 |       _this.reset();
163 | 
164 |       document.querySelector("#wheel-container-".concat(_this.randomIdRoulette, " .wheel")).addEventListener("transitionend", function () {
165 |         _this.processingLock = false;
166 | 
167 |         _this.$emit("wheel-end", _this.itemSelected);
168 |       });
169 |     });
170 |   },
171 |   methods: {
172 |     reset: function reset() {
173 |       this.itemSelected = null;
174 |       document.querySelector("#wheel-container-".concat(this.randomIdRoulette, " .wheel")).style.transform = "rotate(".concat(this.startingAngle, "deg)");
175 |     },
176 |     launchWheel: function launchWheel() {
177 |       if (this.processingLock && this.itemSelected != null) {
178 |         return;
179 |       }
180 | 
181 |       this.processingLock = true;
182 |       var wheelResult;
183 | 
184 |       if (this.wheelResultIndex.value !== null) {
185 |         wheelResult = this.wheelResultIndex.value % this.items.length;
186 |       } else {
187 |         wheelResult = Math.floor(Math.random() * this.items.length + 1) - 1;
188 |       }
189 | 
190 |       var wheelElt = document.querySelector("#wheel-container-".concat(this.randomIdRoulette, " .wheel"));
191 |       this.itemSelected = this.items[wheelResult];
192 |       wheelElt.style.transform = "rotate(".concat(this.counterClockWiseOperator * (360 * 3) + -wheelResult * this.itemAngle - this.itemAngle / 2 + this.degreesVariation, "deg)");
193 |       this.$emit("wheel-start", this.itemSelected);
194 |     }
195 |   }
196 | });
197 | 
198 | var _hoisted_1 = ["id"];
199 | var _hoisted_2 = {
200 |   "class": "wheel-base"
201 | };
202 | var _hoisted_3 = {
203 |   key: 0,
204 |   "class": "wheel-base-indicator"
205 | };
206 | var _hoisted_4 = ["innerHTML"];
207 | function render(_ctx, _cache, $props, $setup, $data, $options) {
208 |   return openBlock(), createElementBlock("div", {
209 |     id: "wheel-container-".concat(_ctx.randomIdRoulette),
210 |     "class": normalizeClass(["wheel-container", ["indicator-".concat(_ctx.indicatorPosition), {
211 |       'wheel-container-indicator': _ctx.displayIndicator
212 |     }, {
213 |       'wheel-container-shadow': _ctx.displayShadow
214 |     }, {
215 |       'wheel-container-border': _ctx.displayBorder
216 |     }]])
217 |   }, [_ctx.baseDisplay ? (openBlock(), createElementBlock("div", {
218 |     key: 0,
219 |     "class": normalizeClass(["wheel-base-container", [{
220 |       'wheel-base-container-shadow': _ctx.baseDisplayShadow
221 |     }]]),
222 |     style: normalizeStyle({
223 |       width: "".concat(_ctx.baseSize, "px"),
224 |       height: "".concat(_ctx.baseSize, "px"),
225 |       background: "".concat(_ctx.baseBackground)
226 |     })
227 |   }, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "baseContent")]), _ctx.baseDisplayIndicator ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), createElementVNode("div", {
228 |     "class": normalizeClass(["wheel", ["easing-".concat(_ctx.easing), {
229 |       'wheel-border': _ctx.displayBorder
230 |     }]]),
231 |     style: normalizeStyle({
232 |       width: "".concat(_ctx.size, "px"),
233 |       height: "".concat(_ctx.size, "px"),
234 |       transitionDuration: "".concat(_ctx.duration, "s"),
235 |       transform: "rotate(".concat(_ctx.startingAngle, "deg)")
236 |     })
237 |   }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, function (item, index) {
238 |     return openBlock(), createElementBlock("div", {
239 |       key: item.id,
240 |       "class": "wheel-item",
241 |       style: normalizeStyle({
242 |         transform: "rotate(".concat(_ctx.itemAngle * index, "deg) skewY(").concat(-(90 - _ctx.itemAngle), "deg)"),
243 |         background: item.background
244 |       })
245 |     }, [createElementVNode("div", {
246 |       "class": normalizeClass(["content", {
247 |         'horizontal-content': _ctx.horizontalContent
248 |       }]),
249 |       style: normalizeStyle({
250 |         transform: "skewY(".concat(90 - _ctx.itemAngle, "deg) rotate(").concat(_ctx.itemAngle / 2, "deg)")
251 |       })
252 |     }, [createElementVNode("span", {
253 |       style: normalizeStyle({
254 |         color: item.textColor
255 |       }),
256 |       innerHTML: item.htmlContent
257 |     }, null, 12, _hoisted_4)], 6)], 4);
258 |   }), 128))], 6)], 10, _hoisted_1);
259 | }
260 | 
261 | function styleInject(css, ref) {
262 |   if ( ref === void 0 ) ref = {};
263 |   var insertAt = ref.insertAt;
264 | 
265 |   if (!css || typeof document === 'undefined') { return; }
266 | 
267 |   var head = document.head || document.getElementsByTagName('head')[0];
268 |   var style = document.createElement('style');
269 |   style.type = 'text/css';
270 | 
271 |   if (insertAt === 'top') {
272 |     if (head.firstChild) {
273 |       head.insertBefore(style, head.firstChild);
274 |     } else {
275 |       head.appendChild(style);
276 |     }
277 |   } else {
278 |     head.appendChild(style);
279 |   }
280 | 
281 |   if (style.styleSheet) {
282 |     style.styleSheet.cssText = css;
283 |   } else {
284 |     style.appendChild(document.createTextNode(css));
285 |   }
286 | }
287 | 
288 | var css_248z = ".wheel-container[data-v-2d0cf945],\n.wheel-base[data-v-2d0cf945],\n.wheel-base-container[data-v-2d0cf945],\n.wheel-base-indicator[data-v-2d0cf945] {\n  transition: transform 1s ease-in-out;\n}\n.wheel-container[data-v-2d0cf945] {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n  border-radius: 50%;\n  cursor: pointer;\n}\n.wheel-container-indicator[data-v-2d0cf945]:before {\n  content: \"\";\n  position: absolute;\n  z-index: 4;\n  width: 0;\n  height: 0;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  border-top: 20px solid black;\n  transform: translateX(-50%);\n}\n.wheel-container.indicator-top[data-v-2d0cf945] {\n  transform: rotate(0deg);\n}\n.wheel-container.indicator-right[data-v-2d0cf945] {\n  transform: rotate(90deg);\n}\n.wheel-container.indicator-right .wheel-base[data-v-2d0cf945] {\n  transform: rotate(-90deg);\n}\n.wheel-container.indicator-bottom[data-v-2d0cf945] {\n  transform: rotate(180deg);\n}\n.wheel-container.indicator-bottom .wheel-base[data-v-2d0cf945] {\n  transform: rotate(-180deg);\n}\n.wheel-container.indicator-left[data-v-2d0cf945] {\n  transform: rotate(270deg);\n}\n.wheel-container.indicator-left .wheel-base[data-v-2d0cf945] {\n  transform: rotate(-270deg);\n}\n.wheel-container-border[data-v-2d0cf945] {\n  border: 8px solid black;\n}\n.wheel-container-shadow[data-v-2d0cf945] {\n  box-shadow: 5px 5px 15px -5px #000000;\n}\n.wheel-base-container[data-v-2d0cf945] {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 50%;\n  border-radius: 50%;\n  border: 5px solid black;\n  transform: translate(-50%, -50%);\n}\n.wheel-base-container-shadow[data-v-2d0cf945] {\n  box-shadow: 5px 5px 15px -5px #000000;\n}\n.wheel-base-container .wheel-base[data-v-2d0cf945] {\n  position: absolute;\n  z-index: 2;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n}\n.wheel-base-container .wheel-base-indicator[data-v-2d0cf945] {\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n}\n.wheel-base-container .wheel-base-indicator[data-v-2d0cf945]:before {\n  content: \"\";\n  position: absolute;\n  z-index: 1;\n  top: -20px;\n  width: 0;\n  height: 0;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  border-bottom: 20px solid black;\n  transform: translateX(-50%);\n}\n.wheel[data-v-2d0cf945] {\n  background: white;\n  border-radius: 50%;\n  margin: auto;\n  overflow: hidden;\n}\n.wheel.easing-ease[data-v-2d0cf945] {\n  transition: transform cubic-bezier(0.65, 0, 0.35, 1);\n}\n.wheel.easing-bounce[data-v-2d0cf945] {\n  transition: transform cubic-bezier(0.49, 0.02, 0.52, 1.12);\n}\n.wheel-border[data-v-2d0cf945]:after {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 3;\n  border-radius: 50%;\n  background-image: linear-gradient(to left, black 33%, rgba(255, 255, 255, 0) 0%);\n  background-position: bottom;\n  background-size: 3px 1px;\n  /* background:linear-gradient(red,purple,orange); */\n  -webkit-mask: radial-gradient(transparent 65%, #000 66%);\n  mask: radial-gradient(transparent 65%, #000 66%);\n}\n.wheel-item[data-v-2d0cf945] {\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 50%;\n  height: 50%;\n  transform-origin: 0% 100%;\n  border: 1px solid black;\n}\n.wheel-item[data-v-2d0cf945]:nth-child(odd) {\n  background-color: skyblue;\n}\n.wheel-item[data-v-2d0cf945]:nth-child(even) {\n  background-color: pink;\n}\n.wheel .content[data-v-2d0cf945] {\n  position: absolute;\n  left: -100%;\n  width: 200%;\n  height: 200%;\n  text-align: center;\n  transform: skewY(30deg) rotate(0deg);\n  padding-top: 20px;\n}\n.wheel .content.horizontal-content[data-v-2d0cf945] {\n  left: initial;\n  right: 100%;\n  width: 50%;\n  height: 250%;\n  text-align: right;\n}\n.wheel .content.horizontal-content span[data-v-2d0cf945] {\n  display: block;\n  transform: rotate(270deg);\n}";
289 | styleInject(css_248z);
290 | 
291 | script.render = render;
292 | script.__scopeId = "data-v-2d0cf945";
293 | 
294 | export { script as Roulette };
295 | 


--------------------------------------------------------------------------------
/pages/views/Custom.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h1 class="text-4xl">
  4 |       {{ activeConfigName ? activeConfigName : 'Custom Roulette' }}
  5 |     </h1>
  6 |     <div class="py-10 relative">
  7 |       <Roulette
  8 |         v-if="wheelActive"
  9 |         ref="wheel"
 10 |         :items="items"
 11 |         :first-item-index="firstItemIndex"
 12 |         :centered-indicator="wheelSettings.centeredIndicator"
 13 |         :indicator-position="wheelSettings.indicatorPosition"
 14 |         :size="wheelSettings.size"
 15 |         :display-shadow="wheelSettings.displayShadow"
 16 |         :display-border="wheelSettings.displayBorder"
 17 |         :display-indicator="wheelSettings.displayIndicator"
 18 |         :duration="wheelSettings.duration"
 19 |         :result-variation="wheelSettings.resultVariation"
 20 |         :easing="wheelSettings.easing"
 21 |         :counter-clockwise="wheelSettings.counterClockwise"
 22 |         :horizontal-content="wheelSettings.horizontalContent"
 23 |         :base-display="wheelSettings.baseDisplay"
 24 |         :base-size="wheelSettings.baseSize"
 25 |         :base-display-indicator="wheelSettings.baseDisplayIndicator"
 26 |         :base-display-shadow="wheelSettings.baseDisplayShadow"
 27 |         :base-background="wheelSettings.baseBackground"
 28 |         @click="launchWheel"
 29 |         @wheel-start="wheelStartedCallback"
 30 |         @wheel-end="wheelEndedCallback"
 31 |       >
 32 |         <template #baseContent>
 33 |           <div
 34 |             v-if="wheelSettings.baseHtmlContent"
 35 |             v-html="wheelSettings.baseHtmlContent"
 36 |           />
 37 |         </template>
 38 |       </Roulette>
 39 |   
 40 |       <div 
 41 |         v-show="result"
 42 |         class="absolute bottom-2 left-1/2 transform -translate-x-1/2"
 43 |       >
 44 |         <button
 45 |           class="btn btn-xs mx-2"
 46 |           @click="onHardReset()"
 47 |         >
 48 |           Hard reset
 49 |         </button>
 50 |         <button
 51 |           class="btn btn-xs mx-2"
 52 |           @click="onSoftReset()"
 53 |         >
 54 |           Soft reset
 55 |         </button>
 56 |       </div>
 57 |     </div>
 58 |   
 59 |     <div class="flex justify-center space-x-4 mb-6">
 60 |       <div class="form-control">
 61 |         <label class="label">
 62 |           <span class="label-text">Configuration Name</span>
 63 |         </label>
 64 |         <input 
 65 |           v-model="configName" 
 66 |           type="text" 
 67 |           placeholder="My Custom Wheel" 
 68 |           class="input input-bordered"
 69 |         >
 70 |       </div>
 71 |         
 72 |       <div class="flex items-end space-x-2">
 73 |         <button 
 74 |           class="btn btn-primary" 
 75 |           @click="saveConfiguration"
 76 |         >
 77 |           Save Configuration
 78 |         </button>
 79 |         <button 
 80 |           class="btn btn-secondary" 
 81 |           @click="shareConfiguration"
 82 |         >
 83 |           Share Configuration
 84 |         </button>
 85 |       </div>
 86 |     </div>
 87 |   
 88 |     <div
 89 |       v-if="savedConfigurations.length > 0"
 90 |       class="mb-6"
 91 |     >
 92 |       <h3 class="text-xl mb-2">
 93 |         Saved Configurations
 94 |       </h3>
 95 |       <div class="flex flex-wrap gap-2 justify-center">
 96 |         <div 
 97 |           v-for="config in savedConfigurations" 
 98 |           :key="config.id"
 99 |           class="flex items-center"
100 |         >
101 |           <button 
102 |             class="btn btn-sm" 
103 |             @click="loadConfiguration(config)"
104 |           >
105 |             {{ config.name }}
106 |           </button>
107 |           <button 
108 |             class="btn btn-sm btn-error ml-1"
109 |             @click="deleteConfiguration(config)"
110 |           >
111 |             <svg
112 |               xmlns="http://www.w3.org/2000/svg"
113 |               fill="none"
114 |               viewBox="0 0 24 24"
115 |               class="inline-block w-4 h-4 stroke-current"
116 |             >   
117 |               <path
118 |                 stroke-linecap="round"
119 |                 stroke-linejoin="round"
120 |                 stroke-width="2"
121 |                 d="M6 18L18 6M6 6l12 12"
122 |               />                       
123 |             </svg>
124 |           </button>
125 |         </div>
126 |       </div>
127 |     </div>
128 |   
129 |     <div
130 |       v-if="shareUrl"
131 |       class="mb-6"
132 |     >
133 |       <h3 class="text-xl mb-2">
134 |         Share URL
135 |       </h3>
136 |       <div class="flex items-center space-x-2">
137 |         <input 
138 |           ref="shareUrlInput"
139 |           type="text" 
140 |           readonly 
141 |           :value="shareUrl" 
142 |           class="input input-bordered flex-grow"
143 |         >
144 |         <button 
145 |           class="btn btn-sm" 
146 |           @click="copyShareUrl"
147 |         >
148 |           Copy
149 |         </button>
150 |       </div>
151 |       <p
152 |         v-if="copySuccess"
153 |         class="text-green-500 mt-1"
154 |       >
155 |         URL copied to clipboard!
156 |       </p>
157 |     </div>
158 |   
159 |     <div class="tabs tabs-boxed justify-center">
160 |       <a
161 |         class="tab"
162 |         :class="{'tab-active': managerId === 1 }"
163 |         @click="managerId = 1"
164 |       >Items manager</a> 
165 |       <a
166 |         class="tab"
167 |         :class="{'tab-active': managerId === 2 }"
168 |         @click="managerId = 2"
169 |       >Wheel manager</a>
170 |     </div>
171 |   
172 |     <div class="divider" /> 
173 |   
174 |     <ItemsManager
175 |       v-if="managerId === 1"
176 |       :key="itemsKey"
177 |       class="item-manager overflow-scroll lg:overflow-auto"
178 |       :initial-items="items"
179 |       :initial-first-item-index="firstItemIndex"
180 |       @update-items="onSoftReset"
181 |     />
182 |     <WheelManager
183 |       v-if="managerId === 2"
184 |       :key="wheelSettingsKey"
185 |       :initial-settings="wheelSettings"
186 |       @hard-reset="onHardReset"
187 |     />
188 |   </div>
189 | </template>
190 |   
191 |   <script>
192 |   import ItemsManager from "../components/ItemsManager.vue";
193 |   import WheelManager from "../components/WheelManager.vue";
194 |   import Roulette from "../../src/components/Roulette.vue";
195 |   import wheelData from "../data/homeData";
196 | 
197 |   // Fonctions utilitaires pour compresser/décompresser les données
198 |   const compressData = (data) => {
199 |     // Optimiser la structure JSON en supprimant les clés redondantes
200 |     const optimizedData = optimizeConfigData(data);
201 |     
202 |     // Convertir en chaîne JSON
203 |     const jsonString = JSON.stringify(optimizedData);
204 |     
205 |     // Utiliser une compression avancée de type JWT
206 |     return btoa64(jsonString);
207 |   };
208 | 
209 |   const decompressData = (compressed) => {
210 |     try {
211 |       // Décoder avec notre encodage de type JWT
212 |       const jsonString = atob64(compressed);
213 |       
214 |       // Convertir en objet
215 |       const data = JSON.parse(jsonString);
216 |       
217 |       // Restaurer la structure complète
218 |       return restoreConfigData(data);
219 |     } catch (error) {
220 |       console.error('Failed to decompress data', error);
221 |       return null;
222 |     }
223 |   };
224 |   
225 |   // Implémentation d'encodage/décodage Base64 URL-safe (similaire à JWT)
226 |   const btoa64 = (str) => {
227 |     // Convertir la chaîne en UTF-8 puis en Base64
228 |     const utf8Bytes = new TextEncoder().encode(str);
229 |     const binaryString = Array.from(utf8Bytes)
230 |       .map(byte => String.fromCharCode(byte))
231 |       .join('');
232 |     
233 |     // Utiliser notre implémentation personnalisée de btoa
234 |     let base64;
235 |     if (typeof btoa === 'undefined') {
236 |       // Utiliser notre implémentation personnalisée
237 |       base64 = window.btoa(binaryString);
238 |     } else {
239 |       // Utiliser l'implémentation personnalisée directement
240 |       const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
241 |       let output = '';
242 |       for (
243 |         let block = 0, charCode, i = 0, map = chars;
244 |         binaryString.charAt(i | 0) || (map = '=', i % 1);
245 |         output += map.charAt(63 & block >> 8 - i % 1 * 8)
246 |       ) {
247 |         charCode = binaryString.charCodeAt(i += 3/4);
248 |         block = block << 8 | charCode;
249 |       }
250 |       base64 = output;
251 |     }
252 |     
253 |     // Rendre le Base64 URL-safe (comme JWT)
254 |     return base64
255 |       .replace(/\+/g, '-')
256 |       .replace(/\//g, '_')
257 |       .replace(/=/g, '');
258 |   };
259 |   
260 |   const atob64 = (str) => {
261 |     // Restaurer le padding Base64 standard si nécessaire
262 |     let base64 = str;
263 |     if (base64.length % 4 !== 0) {
264 |       base64 += '='.repeat(4 - (base64.length % 4));
265 |     }
266 |     
267 |     // Restaurer les caractères Base64 standard
268 |     base64 = base64
269 |       .replace(/-/g, '+')
270 |       .replace(/_/g, '/');
271 |     
272 |     // Utiliser notre implémentation personnalisée de atob
273 |     let binaryString;
274 |     if (typeof atob === 'undefined') {
275 |       // Utiliser notre implémentation personnalisée
276 |       binaryString = window.atob(base64);
277 |     } else {
278 |       // Utiliser l'implémentation personnalisée directement
279 |       const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
280 |       base64 = String(base64).replace(/=+$/, '');
281 |       let output = '';
282 |       
283 |       let bc = 0, bs = 0, buffer, i = 0;
284 |       while (i < base64.length) {
285 |         buffer = base64.charAt(i++);
286 |         buffer = chars.indexOf(buffer);
287 |         ~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer,
288 |           bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0;
289 |       }
290 |       binaryString = output;
291 |     }
292 |     
293 |     // Convertir le binaire UTF-8 en chaîne de caractères
294 |     try {
295 |       // Méthode moderne pour décoder UTF-8
296 |       const bytes = new Uint8Array(binaryString.length);
297 |       for (let i = 0; i < binaryString.length; i++) {
298 |         bytes[i] = binaryString.charCodeAt(i);
299 |       }
300 |       return new TextDecoder().decode(bytes);
301 |     } catch (e) {
302 |       // Fallback pour les navigateurs plus anciens
303 |       let result = '';
304 |       const len = binaryString.length;
305 |       let i = 0;
306 |       while (i < len) {
307 |         const c = binaryString.charCodeAt(i++);
308 |         if (c <= 0x7F) {
309 |           result += String.fromCharCode(c);
310 |         } else if (c <= 0xDF && i < len) {
311 |           const c2 = binaryString.charCodeAt(i++);
312 |           result += String.fromCharCode(((c & 0x1F) << 6) | (c2 & 0x3F));
313 |         } else if (c <= 0xEF && i + 1 < len) {
314 |           const c2 = binaryString.charCodeAt(i++);
315 |           const c3 = binaryString.charCodeAt(i++);
316 |           result += String.fromCharCode(((c & 0x0F) << 12) | ((c2 & 0x3F) << 6) | (c3 & 0x3F));
317 |         } else if (c <= 0xF7 && i + 2 < len) {
318 |           const c2 = binaryString.charCodeAt(i++);
319 |           const c3 = binaryString.charCodeAt(i++);
320 |           const c4 = binaryString.charCodeAt(i++);
321 |           const codepoint = ((c & 0x07) << 18) | ((c2 & 0x3F) << 12) | ((c3 & 0x3F) << 6) | (c4 & 0x3F);
322 |           if (codepoint <= 0xFFFF) {
323 |             result += String.fromCharCode(codepoint);
324 |           } else {
325 |             const highSurrogate = ((codepoint - 0x10000) >> 10) + 0xD800;
326 |             const lowSurrogate = ((codepoint - 0x10000) & 0x3FF) + 0xDC00;
327 |             result += String.fromCharCode(highSurrogate, lowSurrogate);
328 |           }
329 |         }
330 |       }
331 |       return result;
332 |     }
333 |   };
334 |   
335 |   // Fonction de secours pour les navigateurs qui ne supportent pas btoa/atob
336 |   if (typeof btoa === 'undefined' || typeof atob === 'undefined') {
337 |     // Implémentation personnalisée de btoa
338 |     window.btoa = function(str) {
339 |       const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
340 |       let output = '';
341 |       for (
342 |         let block = 0, charCode, i = 0, map = chars;
343 |         str.charAt(i | 0) || (map = '=', i % 1);
344 |         output += map.charAt(63 & block >> 8 - i % 1 * 8)
345 |       ) {
346 |         charCode = str.charCodeAt(i += 3/4);
347 |         block = block << 8 | charCode;
348 |       }
349 |       return output;
350 |     };
351 |     
352 |     // Implémentation personnalisée de atob
353 |     window.atob = function(str) {
354 |       const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
355 |       str = String(str).replace(/=+$/, '');
356 |       let output = '';
357 |       
358 |       let bc = 0, bs = 0, buffer, i = 0;
359 |       while (i < str.length) {
360 |         buffer = str.charAt(i++);
361 |         buffer = chars.indexOf(buffer);
362 |         ~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer,
363 |           bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0;
364 |       }
365 |       
366 |       return output;
367 |     };
368 |   }
369 | 
370 |   // Optimiser la structure des données pour réduire la taille
371 |   const optimizeConfigData = (config) => {
372 |     // Créer une version optimisée avec des noms de propriétés courts
373 |     const optimized = {
374 |       i: [], // items
375 |       f: config.firstItemIndex, // firstItemIndex
376 |       s: {}, // settings
377 |       n: config.name // name
378 |     };
379 | 
380 |     // Optimiser les items en ne conservant que les valeurs non vides
381 |     config.items.forEach(item => {
382 |       const optimizedItem = {
383 |         i: item.id,
384 |         n: item.name
385 |       };
386 |       
387 |       // N'ajouter les propriétés que si elles ont une valeur
388 |       if (item.htmlContent) optimizedItem.h = item.htmlContent;
389 |       if (item.textColor) optimizedItem.t = item.textColor;
390 |       if (item.background) optimizedItem.b = item.background;
391 |       
392 |       optimized.i.push(optimizedItem);
393 |     });
394 | 
395 |     // Optimiser les paramètres en ne conservant que ceux qui diffèrent des valeurs par défaut
396 |     const settings = config.wheelSettings;
397 |     const defaultSettings = {
398 |       centeredIndicator: false,
399 |       indicatorPosition: "top",
400 |       size: 300,
401 |       displayShadow: false,
402 |       displayBorder: false,
403 |       displayIndicator: true,
404 |       duration: 4,
405 |       resultVariation: 0,
406 |       easing: "ease",
407 |       counterClockwise: false,
408 |       horizontalContent: false,
409 |       baseDisplay: false,
410 |       baseSize: 100,
411 |       baseDisplayShadow: false,
412 |       baseDisplayIndicator: false,
413 |       baseBackground: "",
414 |       baseHtmlContent: ""
415 |     };
416 |     
417 |     // Ne conserver que les paramètres qui diffèrent des valeurs par défaut
418 |     const s = {};
419 |     if (settings.centeredIndicator !== defaultSettings.centeredIndicator) s.c = settings.centeredIndicator;
420 |     if (settings.indicatorPosition !== defaultSettings.indicatorPosition) s.p = settings.indicatorPosition;
421 |     if (settings.size !== defaultSettings.size) s.z = settings.size;
422 |     if (settings.displayShadow !== defaultSettings.displayShadow) s.ds = settings.displayShadow;
423 |     if (settings.displayBorder !== defaultSettings.displayBorder) s.db = settings.displayBorder;
424 |     if (settings.displayIndicator !== defaultSettings.displayIndicator) s.di = settings.displayIndicator;
425 |     if (settings.duration !== defaultSettings.duration) s.d = settings.duration;
426 |     if (settings.resultVariation !== defaultSettings.resultVariation) s.r = settings.resultVariation;
427 |     if (settings.easing !== defaultSettings.easing) s.e = settings.easing;
428 |     if (settings.counterClockwise !== defaultSettings.counterClockwise) s.cc = settings.counterClockwise;
429 |     if (settings.horizontalContent !== defaultSettings.horizontalContent) s.hc = settings.horizontalContent;
430 |     if (settings.baseDisplay !== defaultSettings.baseDisplay) s.bd = settings.baseDisplay;
431 |     if (settings.baseSize !== defaultSettings.baseSize) s.bs = settings.baseSize;
432 |     if (settings.baseDisplayShadow !== defaultSettings.baseDisplayShadow) s.bds = settings.baseDisplayShadow;
433 |     if (settings.baseDisplayIndicator !== defaultSettings.baseDisplayIndicator) s.bdi = settings.baseDisplayIndicator;
434 |     if (settings.baseBackground !== defaultSettings.baseBackground) s.bb = settings.baseBackground;
435 |     if (settings.baseHtmlContent !== defaultSettings.baseHtmlContent) s.bhc = settings.baseHtmlContent;
436 |     
437 |     optimized.s = s;
438 | 
439 |     return optimized;
440 |   };
441 | 
442 |   // Restaurer la structure complète des données
443 |   const restoreConfigData = (optimized) => {
444 |     // Valeurs par défaut
445 |     const defaultSettings = {
446 |       centeredIndicator: false,
447 |       indicatorPosition: "top",
448 |       size: 300,
449 |       displayShadow: false,
450 |       displayBorder: false,
451 |       displayIndicator: true,
452 |       duration: 4,
453 |       resultVariation: 0,
454 |       easing: "ease",
455 |       counterClockwise: false,
456 |       horizontalContent: false,
457 |       baseDisplay: false,
458 |       baseSize: 100,
459 |       baseDisplayShadow: false,
460 |       baseDisplayIndicator: false,
461 |       baseBackground: "",
462 |       baseHtmlContent: ""
463 |     };
464 |     
465 |     // Créer une structure complète
466 |     const config = {
467 |       items: [],
468 |       firstItemIndex: optimized.f,
469 |       wheelSettings: { ...defaultSettings },
470 |       name: optimized.n
471 |     };
472 | 
473 |     // Restaurer les items
474 |     optimized.i.forEach(item => {
475 |       config.items.push({
476 |         id: item.i,
477 |         name: item.n,
478 |         htmlContent: item.h || "",
479 |         textColor: item.t || "",
480 |         background: item.b || ""
481 |       });
482 |     });
483 | 
484 |     // Restaurer les paramètres
485 |     const s = optimized.s;
486 |     if (s.c !== undefined) config.wheelSettings.centeredIndicator = s.c;
487 |     if (s.p !== undefined) config.wheelSettings.indicatorPosition = s.p;
488 |     if (s.z !== undefined) config.wheelSettings.size = s.z;
489 |     if (s.ds !== undefined) config.wheelSettings.displayShadow = s.ds;
490 |     if (s.db !== undefined) config.wheelSettings.displayBorder = s.db;
491 |     if (s.di !== undefined) config.wheelSettings.displayIndicator = s.di;
492 |     if (s.d !== undefined) config.wheelSettings.duration = s.d;
493 |     if (s.r !== undefined) config.wheelSettings.resultVariation = s.r;
494 |     if (s.e !== undefined) config.wheelSettings.easing = s.e;
495 |     if (s.cc !== undefined) config.wheelSettings.counterClockwise = s.cc;
496 |     if (s.hc !== undefined) config.wheelSettings.horizontalContent = s.hc;
497 |     if (s.bd !== undefined) config.wheelSettings.baseDisplay = s.bd;
498 |     if (s.bs !== undefined) config.wheelSettings.baseSize = s.bs;
499 |     if (s.bds !== undefined) config.wheelSettings.baseDisplayShadow = s.bds;
500 |     if (s.bdi !== undefined) config.wheelSettings.baseDisplayIndicator = s.bdi;
501 |     if (s.bb !== undefined) config.wheelSettings.baseBackground = s.bb;
502 |     if (s.bhc !== undefined) config.wheelSettings.baseHtmlContent = s.bhc;
503 | 
504 |     return config;
505 |   };
506 | 
507 |   export default {
508 |     name: "Custom",
509 |   
510 |     components: {
511 |       Roulette,
512 |       ItemsManager,
513 |       WheelManager
514 |     },
515 |   
516 |     data() {
517 |       return {
518 |         ...this.getInitialData(),
519 |         wheelActive: true,
520 |         startAnim: false,
521 |         managerId: 1,
522 |         result: null,
523 |         configName: "",
524 |         savedConfigurations: [],
525 |         shareUrl: "",
526 |         copySuccess: false,
527 |         itemsKey: 0,
528 |         wheelSettingsKey: 0,
529 |         activeConfigName: null
530 |       };
531 |     },
532 |   
533 |     mounted() {
534 |       // Charger les configurations sauvegardées
535 |       this.loadSavedConfigurations();
536 |   
537 |       // Vérifier s'il y a une configuration dans l'URL
538 |       this.checkUrlForConfiguration();
539 |     },
540 |   
541 |     methods: {
542 |       getInitialData() {
543 |         // Récupérer les données depuis l'URL ou utiliser les données par défaut
544 |         return wheelData;
545 |       },
546 |   
547 |       launchWheel() {
548 |         this.$refs.wheel.launchWheel();
549 |       },
550 |   
551 |       wheelStartedCallback(resultItem) {
552 |         console.log("wheel started !", resultItem);
553 |       },
554 |   
555 |       wheelEndedCallback(resultItem) {
556 |         console.log("wheel ended !", resultItem);
557 |         this.result = resultItem;
558 |       },
559 |   
560 |       onSoftReset(newItemList) {
561 |         this.items = newItemList || this.items;
562 |         this.$refs.wheel.reset();
563 |       },
564 |   
565 |       onHardReset() {
566 |         this.wheelActive = false;
567 |         this.result = null;
568 |         setTimeout(() => {
569 |           this.wheelActive = true;
570 |         }, 10);
571 |       },
572 |   
573 |       saveConfiguration() {
574 |         // Vérifier si le nom est vide
575 |         if (!this.configName.trim()) {
576 |           this.configName = `Custom Wheel ${new Date().toLocaleString()}`;
577 |         }
578 |   
579 |         // Créer l'objet de configuration
580 |         const config = {
581 |           id: Date.now(),
582 |           name: this.configName,
583 |           data: {
584 |             items: this.items,
585 |             firstItemIndex: this.firstItemIndex,
586 |             wheelSettings: this.wheelSettings
587 |           }
588 |         };
589 |   
590 |         // Récupérer les configurations existantes
591 |         let configs = JSON.parse(localStorage.getItem('wheelConfigurations') || '[]');
592 |         
593 |         // Ajouter la nouvelle configuration
594 |         configs.push(config);
595 |         
596 |         // Sauvegarder dans le localStorage
597 |         localStorage.setItem('wheelConfigurations', JSON.stringify(configs));
598 |         
599 |         // Mettre à jour la liste des configurations sauvegardées
600 |         this.savedConfigurations = configs;
601 |         
602 |         // Mettre à jour le nom de la configuration active
603 |         this.activeConfigName = this.configName;
604 |         
605 |         // Réinitialiser le nom de la configuration
606 |         this.configName = "";
607 |       },
608 |   
609 |       loadSavedConfigurations() {
610 |         // Charger les configurations depuis le localStorage
611 |         const configs = JSON.parse(localStorage.getItem('wheelConfigurations') || '[]');
612 |         this.savedConfigurations = configs;
613 |       },
614 |   
615 |       loadConfiguration(config) {
616 |         // Charger la configuration sélectionnée
617 |         this.items = config.data.items;
618 |         this.firstItemIndex = config.data.firstItemIndex;
619 |         this.wheelSettings = config.data.wheelSettings;
620 |         
621 |         // Mettre à jour le nom de la configuration active
622 |         this.activeConfigName = config.name;
623 |         
624 |         // Forcer la réinitialisation des composants
625 |         this.itemsKey++;
626 |         this.wheelSettingsKey++;
627 |         
628 |         // Réinitialiser la roue
629 |         this.onHardReset();
630 |       },
631 |   
632 |       deleteConfiguration(config) {
633 |         // Récupérer les configurations existantes
634 |         let configs = JSON.parse(localStorage.getItem('wheelConfigurations') || '[]');
635 |         
636 |         // Filtrer pour supprimer la configuration sélectionnée
637 |         configs = configs.filter(c => c.id !== config.id);
638 |         
639 |         // Sauvegarder dans le localStorage
640 |         localStorage.setItem('wheelConfigurations', JSON.stringify(configs));
641 |         
642 |         // Mettre à jour la liste des configurations sauvegardées
643 |         this.savedConfigurations = configs;
644 |         
645 |         // Si la configuration active est supprimée, réinitialiser le nom
646 |         if (this.activeConfigName === config.name) {
647 |           this.activeConfigName = null;
648 |         }
649 |       },
650 |   
651 |       shareConfiguration() {
652 |         // Créer un objet avec les données à partager
653 |         const shareData = {
654 |           items: this.items,
655 |           firstItemIndex: this.firstItemIndex,
656 |           wheelSettings: this.wheelSettings,
657 |           name: this.activeConfigName || (this.configName ? this.configName : "Shared Configuration")
658 |         };
659 |         
660 |         // Compresser les données pour obtenir une URL plus courte
661 |         const encodedData = compressData(shareData);
662 |         
663 |         // Créer l'URL de partage
664 |         const url = new URL(window.location.href);
665 |         url.searchParams.set('config', encodedData);
666 |         
667 |         // Mettre à jour l'URL de partage
668 |         this.shareUrl = url.toString();
669 |       },
670 |   
671 |       copyShareUrl() {
672 |         // Copier l'URL dans le presse-papier en utilisant l'API moderne
673 |         navigator.clipboard.writeText(this.shareUrl)
674 |           .then(() => {
675 |             // Afficher un message de succès
676 |             this.copySuccess = true;
677 |             setTimeout(() => {
678 |               this.copySuccess = false;
679 |             }, 3000);
680 |           })
681 |           .catch(err => {
682 |             console.error('Erreur lors de la copie dans le presse-papier: ', err);
683 |           });
684 |       },
685 |   
686 |       checkUrlForConfiguration() {
687 |         // Vérifier si l'URL contient une configuration
688 |         const urlParams = new URLSearchParams(window.location.search);
689 |         const encodedConfig = urlParams.get('config');
690 |         
691 |         if (encodedConfig) {
692 |           try {
693 |             // Décompresser la configuration
694 |             const config = decompressData(encodedConfig);
695 |             
696 |             if (!config) {
697 |               console.error('Invalid configuration data');
698 |               return;
699 |             }
700 |             
701 |             // Appliquer la configuration
702 |             this.items = config.items;
703 |             this.firstItemIndex = config.firstItemIndex;
704 |             this.wheelSettings = config.wheelSettings;
705 |             
706 |             // Mettre à jour le nom de la configuration active si disponible
707 |             this.activeConfigName = config.name || "Shared Configuration";
708 |             
709 |             // Forcer la réinitialisation des composants
710 |             this.itemsKey++;
711 |             this.wheelSettingsKey++;
712 |             
713 |             // Réinitialiser la roue
714 |             this.onHardReset();
715 |           } catch (error) {
716 |             console.error('Failed to load configuration from URL', error);
717 |           }
718 |         }
719 |       }
720 |     }
721 |   };
722 |   </script>


--------------------------------------------------------------------------------
/docs/assets/index.58c620c4.js:
--------------------------------------------------------------------------------
 1 | var L=Object.defineProperty,T=Object.defineProperties;var Y=Object.getOwnPropertyDescriptors;var M=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,K=Object.prototype.propertyIsEnumerable;var U=(t,o,s)=>o in t?L(t,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[o]=s,S=(t,o)=>{for(var s in o||(o={}))J.call(o,s)&&U(t,s,o[s]);if(M)for(var s of M(o))K.call(o,s)&&U(t,s,o[s]);return t},B=(t,o)=>T(t,Y(o));import{o as r,c as h,a as e,b as g,F as I,r as A,w as m,v as G,d as C,e as y,f as q,n as f,g as Z,h as k,i as Q,j as b,k as v,l as w,m as $,p as D,q as N,s as p,t as X,u as ee,x as W,y as te,z as ne,T as oe,A as se,B as ae}from"./vendor.aed0c264.js";const ie=function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const n of document.querySelectorAll('link[rel="modulepreload"]'))l(n);new MutationObserver(n=>{for(const i of n)if(i.type==="childList")for(const a of i.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&l(a)}).observe(document,{childList:!0,subtree:!0});function s(n){const i={};return n.integrity&&(i.integrity=n.integrity),n.referrerpolicy&&(i.referrerPolicy=n.referrerpolicy),n.crossorigin==="use-credentials"?i.credentials="include":n.crossorigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function l(n){if(n.ep)return;n.ep=!0;const i=s(n);fetch(n.href,i)}};ie();var _=(t,o)=>{for(const[s,l]of o)t[s]=l;return t};const le={name:"ItemsManager",emits:["updateItems"],props:{initialFirstItemIndex:{type:Object,required:!1,default:null},initialItems:{type:Object,required:!0}},data(){return{firstItemIndex:null,items:[]}},mounted(){this.items=this.initialItems,this.firstItemIndex=this.initialFirstItemIndex},methods:{add(){const t=this.items[this.items.length-1];this.items.push({id:t.id+1,name:"",htmlContent:"",textColor:"",background:""})},remove(t){this.items.length<5||this.items.splice(t,1)},removeAll(){this.items=[]},update(){this.$emit("update-items",this.items)}}},re={class:"table w-full"},de={class:"text-center"},ce={key:0},ue=e("th",null,"Name",-1),he=e("th",null,"Html content",-1),me=e("th",null,"Text color",-1),ge=e("th",null,"Background",-1),pe=e("th",null,"Delete",-1),be={key:0},fe=["value"],we=["onUpdate:modelValue"],Ce=["onUpdate:modelValue"],_e=["onUpdate:modelValue"],ye=["onUpdate:modelValue"],ve={class:"text-center"},ke=["onClick"],xe=e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",class:"inline-block w-4 h-4 stroke-current"},[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 18L18 6M6 6l12 12"})],-1),Se=[xe],Ie={class:"text-center"},De={key:0},ze=e("th",null,"Name",-1),Ee=e("th",null,"Html content",-1),Be=e("th",null,"Text color",-1),Ae=e("th",null,"Background",-1),$e=e("th",null,"Delete",-1),Ne=e("div",{class:"divider"},null,-1);function Ve(t,o,s,l,n,i){return r(),h("div",null,[e("table",re,[e("thead",de,[e("tr",null,[s.initialFirstItemIndex!=null?(r(),h("th",ce," First Item ")):g("",!0),ue,he,me,ge,pe])]),e("tbody",null,[(r(!0),h(I,null,A(n.items,(a,d)=>(r(),h("tr",{key:a.id},[s.initialFirstItemIndex!=null?(r(),h("td",be,[m(e("input",{"onUpdate:modelValue":o[0]||(o[0]=u=>n.firstItemIndex.value=u),name:"firstItem",class:"block mx-auto radio radio-primary",type:"radio",value:d},null,8,fe),[[G,n.firstItemIndex.value]])])):g("",!0),e("td",null,[m(e("input",{"onUpdate:modelValue":u=>a.name=u,class:"input input-bordered w-full",type:"text"},null,8,we),[[C,a.name]])]),e("td",null,[m(e("textarea",{"onUpdate:modelValue":u=>a.htmlContent=u,class:"textarea h-12 textarea-bordered textarea-primary w-full"},null,8,Ce),[[C,a.htmlContent]])]),e("td",null,[m(e("input",{"onUpdate:modelValue":u=>a.textColor=u,class:"input input-bordered w-full",type:"text"},null,8,_e),[[C,a.textColor]])]),e("td",null,[m(e("input",{"onUpdate:modelValue":u=>a.background=u,class:"input input-bordered w-full",type:"text"},null,8,ye),[[C,a.background]])]),e("td",ve,[e("button",{class:"btn btn-error btn-outline btn-circle btn-sm",onClick:u=>i.remove(d)},Se,8,ke)])]))),128))]),e("tfoot",Ie,[e("tr",null,[s.initialFirstItemIndex!=null?(r(),h("th",De," First Item ")):g("",!0),ze,Ee,Be,Ae,$e])])]),Ne,e("div",null,[e("button",{class:"btn btn-primary",onClick:o[1]||(o[1]=(...a)=>i.add&&i.add(...a))}," Add Item ")])])}var V=_(le,[["render",Ve]]);const Re={name:"WheelManager",props:{initialSettings:{type:Object,required:!0}},data(){return{settings:{}}},mounted(){this.settings=this.initialSettings}},He={class:"flex flex-col lg:flex-row items-top justify-around"},Me=e("p",{class:"text-xl mb-4"}," Wheel manager ",-1),Ue={class:"form-control"},qe={class:"cursor-pointer label"},We=e("span",{class:"label-text"},"Display Shadow",-1),Pe={class:"form-control"},Fe={class:"cursor-pointer label"},Oe=e("span",{class:"label-text"},"Display Border",-1),je={class:"form-control"},Le={class:"cursor-pointer label"},Te=e("span",{class:"label-text"},"Display Indicator",-1),Ye={class:"form-control"},Je={class:"cursor-pointer label"},Ke=e("span",{class:"label-text"},"Centered indicator",-1),Ge={class:"form-control"},Ze={class:"cursor-pointer label"},Qe=e("span",{class:"label-text"},"Counter clockwise",-1),Xe={class:"form-control"},et={class:"cursor-pointer label"},tt=e("span",{class:"label-text"},"Horizontal content",-1),nt={class:"form-control"},ot=e("label",{class:"label"},[e("span",{class:"label-text"},"Size")],-1),st={class:"input-group input-group-md"},at=e("span",null,"px",-1),it={class:"form-control"},lt=e("label",{class:"label"},[e("span",{class:"label-text"},"Duration")],-1),rt={class:"input-group input-group-md"},dt=e("span",null,"\xA0s\xA0",-1),ct={class:"form-control"},ut=e("label",{class:"label"},[e("span",{class:"label-text"},"Variation")],-1),ht={class:"input-group input-group-md"},mt=e("span",null,"%\xA0",-1),gt={class:"form-control w-full max-w-xs"},pt=e("label",{for:"position",class:"label"},[e("span",{class:"label-text"},"Indicator position")],-1),bt=e("option",{value:"top"}," Top ",-1),ft=e("option",{value:"right"}," Right ",-1),wt=e("option",{value:"bottom"}," Bottom ",-1),Ct=e("option",{value:"left"}," Left ",-1),_t=[bt,ft,wt,Ct],yt={class:"form-control w-full max-w-xs"},vt=e("label",{for:"easing",class:"label"},[e("span",{class:"label-text"},"Easing")],-1),kt=e("option",{value:"ease"}," Ease ",-1),xt=e("option",{value:"bounce"}," Bounce ",-1),St=[kt,xt],It=e("div",{class:"divider lg:divider-vertical"},null,-1),Dt=e("p",{class:"text-xl mb-4"}," Wheel base manager ",-1),zt={class:"form-control"},Et={class:"cursor-pointer label"},Bt=e("span",{class:"label-text"},"Display base",-1),At={class:"form-control"},$t={class:"cursor-pointer label"},Nt=e("span",{class:"label-text"},"Display base shadow",-1),Vt={class:"form-control"},Rt={class:"cursor-pointer label"},Ht=e("span",{class:"label-text"},"Display base indicator",-1),Mt={class:"form-control"},Ut=e("label",{class:"label"},[e("span",{class:"label-text"},"Base size")],-1),qt={class:"input-group input-group-md"},Wt=e("span",null,"px",-1),Pt={class:"form-control"},Ft=e("label",{class:"label"},[e("span",{class:"label-text"},"Base background")],-1),Ot={class:"form-control"},jt=e("label",{class:"label"},[e("span",{class:"label-text"},"Base HTML Content")],-1);function Lt(t,o,s,l,n,i){return r(),h("div",He,[e("div",null,[Me,e("div",Ue,[e("label",qe,[We,m(e("input",{id:"shadow","onUpdate:modelValue":o[0]||(o[0]=a=>n.settings.displayShadow=a),class:"toggle toggle-primary",type:"checkbox"},null,512),[[y,n.settings.displayShadow]])])]),e("div",Pe,[e("label",Fe,[Oe,m(e("input",{id:"border","onUpdate:modelValue":o[1]||(o[1]=a=>n.settings.displayBorder=a),class:"toggle toggle-primary",type:"checkbox"},null,512),[[y,n.settings.displayBorder]])])]),e("div",je,[e("label",Le,[Te,m(e("input",{id:"indicator","onUpdate:modelValue":o[2]||(o[2]=a=>n.settings.displayIndicator=a),class:"toggle toggle-primary",type:"checkbox"},null,512),[[y,n.settings.displayIndicator]])])]),e("div",Ye,[e("label",Je,[Ke,m(e("input",{id:"centered","onUpdate:modelValue":o[3]||(o[3]=a=>n.settings.centeredIndicator=a),type:"checkbox",class:"checkbox checkbox-primary"},null,512),[[y,n.settings.centeredIndicator]])])]),e("div",Ge,[e("label",Ze,[Qe,m(e("input",{id:"clock","onUpdate:modelValue":o[4]||(o[4]=a=>n.settings.counterClockwise=a),type:"checkbox",class:"checkbox checkbox-primary"},null,512),[[y,n.settings.counterClockwise]])])]),e("div",Xe,[e("label",et,[tt,m(e("input",{id:"horizontal","onUpdate:modelValue":o[5]||(o[5]=a=>n.settings.horizontalContent=a),type:"checkbox",class:"checkbox checkbox-primary"},null,512),[[y,n.settings.horizontalContent]])])]),e("div",nt,[ot,e("label",st,[m(e("input",{id:"size","onUpdate:modelValue":o[6]||(o[6]=a=>n.settings.size=a),class:"input input-primary input-bordered input-md w-full",type:"number"},null,512),[[C,n.settings.size]]),at])]),e("div",it,[lt,e("label",rt,[m(e("input",{id:"duration","onUpdate:modelValue":o[7]||(o[7]=a=>n.settings.duration=a),class:"input input-primary input-bordered input-md w-full",type:"number"},null,512),[[C,n.settings.duration]]),dt])]),e("div",ct,[ut,e("label",ht,[m(e("input",{id:"variation","onUpdate:modelValue":o[8]||(o[8]=a=>n.settings.resultVariation=a),class:"input input-primary input-bordered input-md w-full",type:"number"},null,512),[[C,n.settings.resultVariation]]),mt]),m(e("input",{"onUpdate:modelValue":o[9]||(o[9]=a=>n.settings.resultVariation=a),type:"range",max:"100",class:"range range-primary mt-2"},null,512),[[C,n.settings.resultVariation]])]),e("div",gt,[pt,m(e("select",{id:"position","onUpdate:modelValue":o[10]||(o[10]=a=>n.settings.indicatorPosition=a),name:"position",class:"select select-bordered select-primary w-full max-w-xs"},_t,512),[[q,n.settings.indicatorPosition]])]),e("div",yt,[vt,m(e("select",{id:"easing","onUpdate:modelValue":o[11]||(o[11]=a=>n.settings.easing=a),name:"easing",class:"select select-bordered select-primary w-full max-w-xs"},St,512),[[q,n.settings.easing]])])]),It,e("div",null,[Dt,e("div",zt,[e("label",Et,[Bt,m(e("input",{id:"base","onUpdate:modelValue":o[12]||(o[12]=a=>n.settings.baseDisplay=a),class:"toggle toggle-primary",type:"checkbox"},null,512),[[y,n.settings.baseDisplay]])])]),e("div",{class:f({"opacity-50":!n.settings.baseDisplay})},[e("div",At,[e("label",$t,[Nt,m(e("input",{id:"baseShadow","onUpdate:modelValue":o[13]||(o[13]=a=>n.settings.baseDisplayShadow=a),class:"toggle toggle-primary",type:"checkbox"},null,512),[[y,n.settings.baseDisplayShadow]])])]),e("div",Vt,[e("label",Rt,[Ht,m(e("input",{id:"baseIndicator","onUpdate:modelValue":o[14]||(o[14]=a=>n.settings.baseDisplayIndicator=a),class:"toggle toggle-primary",type:"checkbox"},null,512),[[y,n.settings.baseDisplayIndicator]])])]),e("div",Mt,[Ut,e("label",qt,[m(e("input",{id:"baseSize","onUpdate:modelValue":o[15]||(o[15]=a=>n.settings.baseSize=a),class:"input input-primary input-bordered input-md w-full",type:"number"},null,512),[[C,n.settings.baseSize]]),Wt])]),e("div",Pt,[Ft,m(e("input",{id:"baseBackground","onUpdate:modelValue":o[16]||(o[16]=a=>n.settings.baseBackground=a),class:"input input-primary input-bordered",type:"text"},null,512),[[C,n.settings.baseBackground]])]),e("div",Ot,[jt,m(e("textarea",{"onUpdate:modelValue":o[17]||(o[17]=a=>n.settings.baseHtmlContent=a),class:"textarea h-24 textarea-bordered textarea-primary"},null,512),[[C,n.settings.baseHtmlContent]])])],2)])])}var R=_(Re,[["render",Lt]]);const Tt=Z({name:"Roulette",emits:["wheelStart","wheelEnd"],props:{items:{type:Object,required:!0,validator(t){return t.length>=4}},firstItemIndex:{type:Object,required:!1,default(){return{value:0}}},wheelResultIndex:{type:Object,required:!1,default(){return{value:null}},validator(t){return typeof t.value=="number"}},centeredIndicator:{type:Boolean,required:!1,default:!1},indicatorPosition:{type:String,required:!1,default:"top",validator(t){return["top","right","bottom","left"].includes(t)}},size:{type:Number,required:!1,default:300},displayShadow:{type:Boolean,required:!1,default:!1},duration:{type:Number,required:!1,default:4},resultVariation:{type:Number,required:!1,default:0,validator(t){return t>=0&&t<=100}},easing:{type:String,required:!1,default:"ease",validator(t){return["ease","bounce"].includes(t)}},counterClockwise:{type:Boolean,required:!1,default:!1},horizontalContent:{type:Boolean,required:!1,default:!1},displayBorder:{type:Boolean,required:!1,default:!1},displayIndicator:{type:Boolean,required:!1,default:!0},baseDisplay:{type:Boolean,required:!1,default:!1},baseSize:{type:Number,required:!1,default:100},baseDisplayShadow:{type:Boolean,required:!1,default:!1},baseDisplayIndicator:{type:Boolean,required:!1,default:!1},baseBackground:{type:String,required:!1,default:""}},data(){return{randomIdRoulette:0,itemSelected:null,processingLock:!1}},computed:{itemAngle:function(){return 360/this.items.length},startingAngle:function(){return this.centeredIndicator?-1*this.firstItemIndex.value*this.itemAngle-this.itemAngle/2:-1*this.firstItemIndex.value*this.itemAngle},degreesVariation:function(){if(!this.resultVariation)return 0;const t=this.itemAngle/2*this.resultVariation/100*-1,o=this.itemAngle/2*this.resultVariation/100;return Number((Math.random()*(o-t)+t).toFixed(2))},counterClockWiseOperator:function(){return this.counterClockwise?-1:1}},mounted(){this.randomIdRoulette=Number((Math.random()*(999999-1)+1).toFixed(0)),this.$nextTick(()=>{this.reset(),document.querySelector(`#wheel-container-${this.randomIdRoulette} .wheel`).addEventListener("transitionend",()=>{this.processingLock=!1,this.$emit("wheel-end",this.itemSelected)})})},methods:{reset(){this.itemSelected=null,document.querySelector(`#wheel-container-${this.randomIdRoulette} .wheel`).style.transform=`rotate(${this.startingAngle}deg)`},launchWheel(){if(this.processingLock&&this.itemSelected!=null)return;this.processingLock=!0;let t;this.wheelResultIndex.value!==null?t=this.wheelResultIndex.value%this.items.length:t=Math.floor(Math.random()*this.items.length+1)-1;const o=document.querySelector(`#wheel-container-${this.randomIdRoulette} .wheel`);this.itemSelected=this.items[t],o.style.transform=`rotate(${this.counterClockWiseOperator*(360*3)+-t*this.itemAngle-this.itemAngle/2+this.degreesVariation}deg)`,this.$emit("wheel-start",this.itemSelected)}}}),Yt=["id"],Jt={class:"wheel-base"},Kt={key:0,class:"wheel-base-indicator"},Gt=["innerHTML"];function Zt(t,o,s,l,n,i){return r(),h("div",{id:`wheel-container-${t.randomIdRoulette}`,class:f(["wheel-container",[`indicator-${t.indicatorPosition}`,{"wheel-container-indicator":t.displayIndicator},{"wheel-container-shadow":t.displayShadow},{"wheel-container-border":t.displayBorder}]])},[t.baseDisplay?(r(),h("div",{key:0,class:f(["wheel-base-container",[{"wheel-base-container-shadow":t.baseDisplayShadow}]]),style:k({width:`${t.baseSize}px`,height:`${t.baseSize}px`,background:`${t.baseBackground}`})},[e("div",Jt,[Q(t.$slots,"baseContent",{},void 0,!0)]),t.baseDisplayIndicator?(r(),h("div",Kt)):g("",!0)],6)):g("",!0),e("div",{class:f(["wheel",[`easing-${t.easing}`,{"wheel-border":t.displayBorder}]]),style:k({width:`${t.size}px`,height:`${t.size}px`,transitionDuration:`${t.duration}s`,transform:`rotate(${t.startingAngle}deg)`})},[(r(!0),h(I,null,A(t.items,(a,d)=>(r(),h("div",{key:a.id,class:"wheel-item",style:k({transform:`rotate(${t.itemAngle*d}deg) skewY(${-(90-t.itemAngle)}deg)`,background:a.background})},[e("div",{class:f(["content",{"horizontal-content":t.horizontalContent}]),style:k({transform:`skewY(${90-t.itemAngle}deg) rotate(${t.itemAngle/2}deg)`})},[e("span",{style:k({color:a.textColor}),innerHTML:a.htmlContent},null,12,Gt)],6)],4))),128))],6)],10,Yt)}var H=_(Tt,[["render",Zt],["__scopeId","data-v-313a8203"]]),P={items:[{id:1,name:"Banana",htmlContent:"Banana",textColor:"",background:""},{id:2,name:"Apple",htmlContent:"Apple",textColor:"",background:""},{id:3,name:"Orange",htmlContent:"Orange",textColor:"",background:""},{id:4,name:"Cherry",htmlContent:"Cherry",textColor:"",background:""},{id:5,name:"Strawberry",htmlContent:"Strawberry",textColor:"",background:""},{id:6,name:"Grape",htmlContent:"Grape",textColor:"",background:""}],firstItemIndex:{value:0},wheelSettings:{centeredIndicator:!0,indicatorPosition:"top",size:300,displayShadow:!0,duration:5,resultVariation:70,easing:"bounce",counterClockwise:!0,horizontalContent:!1,displayBorder:!0,displayIndicator:!0,baseDisplay:!0,baseSize:100,baseDisplayShadow:!0,baseDisplayIndicator:!0,baseBackground:"#EEAA33",baseHtmlContent:"<strong>Touch<br>Me!</strong>"}};const Qt={name:"Home",components:{Roulette:H,ItemsManager:V,WheelManager:R},data(){return B(S({},P),{wheelActive:!0,startAnim:!1,managerId:1,result:null})},mounted(){setTimeout(()=>{this.startAnim=!0},500)},methods:{launchWheel(){this.$refs.wheel.launchWheel()},wheelStartedCallback(t){console.log("wheel started !",t)},wheelEndedCallback(t){console.log("wheel ended !",t),this.result=t},onSoftReset(t){this.items=t||this.items,this.$refs.wheel.reset()},onHardReset(){this.wheelActive=!1,this.result=null,setTimeout(()=>{this.wheelActive=!0},10)}}},Xt=e("h1",{class:"text-4xl"}," Vue3 Roulette ",-1),en={class:"py-10 relative"},tn=["innerHTML"],nn={class:"absolute bottom-2 left-1/2 transform -translate-x-1/2"},on=e("p",{class:"text-xl text-gray-500 italic mb-10"}," A customizable and flexible fortune wheel made with vue3 ",-1),sn={class:"tabs tabs-boxed justify-center"},an=e("div",{class:"divider"},null,-1);function ln(t,o,s,l,n,i){const a=b("Roulette"),d=b("ItemsManager"),u=b("WheelManager");return r(),h("div",null,[Xt,e("div",en,[e("div",{class:f(["wheel-anim",{"wheel-anim-started":n.startAnim}])},[n.wheelActive?(r(),v(a,{key:0,ref:"wheel",items:t.items,"first-item-index":t.firstItemIndex,"centered-indicator":t.wheelSettings.centeredIndicator,"indicator-position":t.wheelSettings.indicatorPosition,size:t.wheelSettings.size,"display-shadow":t.wheelSettings.displayShadow,"display-border":t.wheelSettings.displayBorder,"display-indicator":t.wheelSettings.displayIndicator,duration:t.wheelSettings.duration,"result-variation":t.wheelSettings.resultVariation,easing:t.wheelSettings.easing,"counter-clockwise":t.wheelSettings.counterClockwise,"horizontal-content":t.wheelSettings.horizontalContent,"base-display":t.wheelSettings.baseDisplay,"base-size":t.wheelSettings.baseSize,"base-display-indicator":t.wheelSettings.baseDisplayIndicator,"base-display-shadow":t.wheelSettings.baseDisplayShadow,"base-background":t.wheelSettings.baseBackground,onClick:i.launchWheel,onWheelStart:i.wheelStartedCallback,onWheelEnd:i.wheelEndedCallback},{baseContent:w(()=>[t.wheelSettings.baseHtmlContent?(r(),h("div",{key:0,innerHTML:t.wheelSettings.baseHtmlContent},null,8,tn)):g("",!0)]),_:1},8,["items","first-item-index","centered-indicator","indicator-position","size","display-shadow","display-border","display-indicator","duration","result-variation","easing","counter-clockwise","horizontal-content","base-display","base-size","base-display-indicator","base-display-shadow","base-background","onClick","onWheelStart","onWheelEnd"])):g("",!0)],2),m(e("div",nn,[e("button",{class:"btn btn-xs mx-2",onClick:o[0]||(o[0]=c=>i.onHardReset())}," Hard reset "),e("button",{class:"btn btn-xs mx-2",onClick:o[1]||(o[1]=c=>i.onSoftReset())}," Soft reset ")],512),[[$,n.result]])]),on,e("div",sn,[e("a",{class:f(["tab",{"tab-active":n.managerId===1}]),onClick:o[2]||(o[2]=c=>n.managerId=1)},"Items manager",2),e("a",{class:f(["tab",{"tab-active":n.managerId===2}]),onClick:o[3]||(o[3]=c=>n.managerId=2)},"Wheel manager",2)]),an,n.managerId===1?(r(),v(d,{key:0,class:"item-manager overflow-scroll lg:overflow-auto","initial-items":t.items,"initial-first-item-index":t.firstItemIndex,onUpdateItems:i.onSoftReset},null,8,["initial-items","initial-first-item-index","onUpdateItems"])):g("",!0),n.managerId===2?(r(),v(u,{key:1,"initial-settings":t.wheelSettings,onHardReset:i.onHardReset},null,8,["initial-settings","onHardReset"])):g("",!0)])}var rn=_(Qt,[["render",ln]]);const dn=D('<h1>Vue3 Roulette</h1><blockquote><p>A customizable and flexible fortune wheel for vue3</p></blockquote><h2>Demo</h2><p>https://roulette.nitocode.com/</p><p>See also: <a href="https://codesandbox.io/s/vue3-roulette-c8tml">codesandbox template</a></p><h2>Installation</h2><h3>Using npm</h3><p><code>npm i --save vue3-roulette</code></p><h2>Usage</h2><h4>main.js</h4>',10),cn=e("pre",null,[e("code",{class:"language-js","v-pre":"true"},`import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import { Roulette } from 'vue3-roulette'
 4 | 
 5 | createApp(App).component("roulette", Roulette).mount('#app')
 6 | `)],-1),un=e("h4",null,"vuejs html template",-1),hn=e("pre",null,[e("code",{class:"language-html","v-pre":"true"},`<Roulette ref="wheel" :items="items" @click="launchWheel" />
 7 | `)],-1),mn=e("h4",null,"vuejs script",-1),gn=e("p",null,[N("Using the "),e("a",{href:"https://v3.vuejs.org/api/sfc-script-setup.html"},"sfc syntax")],-1),pn=e("pre",null,[e("code",{class:"language-html","v-pre":"true"},`<script setup>
 8 | import { ref } from 'vue'
 9 | const wheel = ref(null);
10 | const items = [
11 |   { id: 1, name: "Banana", htmlContent: "Banana", textColor: "", background: "" },
12 |   { id: 2, name: "Apple", htmlContent: "Apple", textColor: "", background: "" },
13 |   { id: 3, name: "Orange and Purple", htmlContent: "Orange<br>and Purple", textColor: "", background: "" },
14 |   { id: 4, name: "Cherry", htmlContent: "Cherry", textColor: "", background: "" },
15 | ];
16 | 
17 | function launchWheel (){
18 |   wheel.value.launchWheel();
19 | }
20 | <\/script>
21 | `)],-1),bn=e("h2",null,"Events API",-1),fn=e("p",null,[e("code",null,"wheel-start"),N(" and "),e("code",null,"wheel-end"),N(" which provide the item selected")],-1),wn=e("pre",null,[e("code",{class:"language-html","v-pre":"true"},`<Roulette 
22 |   ref="wheel" :items="items" @click="launchWheel" 
23 |   @wheel-start="wheelStartedCallback"
24 |   @wheel-end="wheelEndedCallback"
25 | />
26 | `)],-1),Cn=e("h2",null,"Methods API",-1),_n=e("p",null,"Composition API",-1),yn=e("pre",null,[e("code",{class:"language-javascript","v-pre":"true"},`wheel.value.launchWheel();
27 | wheel.value.reset();
28 | `)],-1),vn=e("p",null,"Option API",-1),kn=e("pre",null,[e("code",{class:"language-javascript","v-pre":"true"},`this.$refs.wheel.launchWheel();
29 | this.$refs.wheel.reset();
30 | `)],-1),xn=D("<h2>Props API (Wheel)</h2><table><thead><tr><th>Props</th><th>Type</th><th>Required</th><th>Default</th><th>Options</th><th>Details</th></tr></thead><tbody><tr><td>items</td><td>Object</td><td>yes</td><td>-</td><td></td><td>4 items minimum</td></tr><tr><td>first-item-index</td><td>Object</td><td>no</td><td>{ value: 0 }</td><td></td><td></td></tr><tr><td>wheel-result-index</td><td>Object</td><td>no</td><td>{ value: null }</td><td>from 0 to items length</td><td></td></tr><tr><td>centered-indicator</td><td>Boolean</td><td>no</td><td>false</td><td></td><td></td></tr><tr><td>indicator-position</td><td>String</td><td>no</td><td>&quot;top&quot;</td><td>&quot;top&quot; | &quot;right&quot; | &quot;bottom&quot; | &quot;left&quot;</td><td></td></tr><tr><td>size</td><td>Number</td><td>no</td><td>300</td><td></td><td>size unit: pixel</td></tr><tr><td>display-shadow</td><td>Boolean</td><td>no</td><td>false</td><td></td><td></td></tr><tr><td>duration</td><td>Number</td><td>no</td><td>4</td><td></td><td>duration unit: seconds</td></tr><tr><td>result-variation</td><td>Number</td><td>no</td><td>0</td><td>number between 0 and 100</td><td>varies the result angle to fake wheel smoothness</td></tr><tr><td>easing</td><td>String</td><td>no</td><td>&quot;ease&quot;</td><td>&quot;ease&quot; | &quot;bounce&quot;</td><td>wheel animation</td></tr><tr><td>counter-clockwise</td><td>Boolean</td><td>no</td><td>false</td><td></td><td>rotation direction</td></tr><tr><td>horizontal-content</td><td>Boolean</td><td>no</td><td>false</td><td></td><td>text item orientation</td></tr><tr><td>display-border</td><td>Boolean</td><td>no</td><td>false</td><td></td><td></td></tr><tr><td>display-indicator</td><td>Boolean</td><td>no</td><td>false</td><td></td><td></td></tr></tbody></table><h2>Props API (Wheel base)</h2><table><thead><tr><th>Props</th><th>Type</th><th>Required</th><th>Default</th><th>Options</th><th>Details</th></tr></thead><tbody><tr><td>base-display</td><td>Boolean</td><td>no</td><td>false</td><td></td><td></td></tr><tr><td>base-size</td><td>Number</td><td>no</td><td>100</td><td></td><td>size unit: pixel</td></tr><tr><td>base-display-shadow</td><td>Boolean</td><td>no</td><td>false</td><td></td><td></td></tr><tr><td>base-display-indicator</td><td>Boolean</td><td>no</td><td>false</td><td></td><td></td></tr><tr><td>base-background</td><td>String</td><td>no</td><td>&quot;&quot;</td><td>rgb(100,0,0) | red | #FF0000</td><td></td></tr></tbody></table><h2>Slots</h2><p>You can use your own html for the wheel base</p>",6),Sn=e("pre",null,[e("code",{class:"language-html","v-pre":"true"},`<Roulette ref="wheel" :items="items" @click="launchWheel">
31 |   <template #baseContent>
32 |     <div v-html="yourHtml"></div>
33 |   </template>
34 | </Roulette>
35 | `)],-1),In=e("h2",null,"Contribution",-1),Dn=e("h3",null,"Project setup",-1),zn=e("pre",null,[e("code",{class:"language-bash","v-pre":"true"},`npm install
36 | `)],-1),En=e("h3",null,"Compiles and hot-reloads for development",-1),Bn=e("pre",null,[e("code",{class:"language-bash","v-pre":"true"},`npm run serve
37 | `)],-1);function An(t,o){return r(),h(I,null,[dn,cn,un,hn,mn,gn,pn,bn,fn,wn,Cn,_n,yn,vn,kn,xn,Sn,In,Dn,zn,En,Bn],64)}const F={render:An};F.__hmrId="C:/Users/lunit/Documents/nitocode/vue3-roulette/README.md";const $n={name:"Docs",components:{MarkdownContent:F}},Nn={class:"markdown-body text-left"};function Vn(t,o,s,l,n,i){const a=b("markdown-content");return r(),h("div",Nn,[p(a)])}var Rn=_($n,[["render",Vn],["__scopeId","data-v-65fe6d42"]]);const Hn={name:"Example",components:{Roulette:H,ItemsManager:V,WheelManager:R},props:{wheelData:{type:Object,required:!0},refName:{type:String,required:!0}},data(){return{wheelActive:!0,result:null,items:{},showCustomization:!1,managerId:1}},mounted(){this.items=this.wheelData.items},methods:{launchWheel(){this.$refs[this.refName].launchWheel()},wheelStartedCallback(t){console.log("wheel started !",t)},wheelEndedCallback(t){console.log("wheel ended !",t),this.result=t},onSoftReset(t){this.items=t||this.items,this.$refs[this.refName].reset()},onHardReset(){this.wheelActive=!1,this.result=null,setTimeout(()=>{this.wheelActive=!0},10)}}},Mn={class:"relative pb-12"},Un=["innerHTML"],qn={class:"absolute bottom-2 left-1/2 transform -translate-x-1/2"},Wn={key:0},Pn={key:1},Fn={key:0,class:"mt-10"},On={class:"tabs tabs-boxed justify-center"},jn=e("div",{class:"divider"},null,-1),Ln={class:"mt-4"},Tn=e("span",null,"Hide Customization",-1),Yn=[Tn];function Jn(t,o,s,l,n,i){const a=b("Roulette"),d=b("ItemsManager"),u=b("WheelManager");return r(),h("div",null,[e("div",Mn,[n.wheelActive?(r(),v(a,{key:0,ref:s.refName,items:n.items,"first-item-index":s.wheelData.firstItemIndex,"centered-indicator":s.wheelData.wheelSettings.centeredIndicator,"indicator-position":s.wheelData.wheelSettings.indicatorPosition,size:s.wheelData.wheelSettings.size,"display-shadow":s.wheelData.wheelSettings.displayShadow,"display-border":s.wheelData.wheelSettings.displayBorder,"display-indicator":s.wheelData.wheelSettings.displayIndicator,duration:s.wheelData.wheelSettings.duration,"result-variation":s.wheelData.wheelSettings.resultVariation,easing:s.wheelData.wheelSettings.easing,"counter-clockwise":s.wheelData.wheelSettings.counterClockwise,"horizontal-content":s.wheelData.wheelSettings.horizontalContent,"base-display":s.wheelData.wheelSettings.baseDisplay,"base-size":s.wheelData.wheelSettings.baseSize,"base-display-indicator":s.wheelData.wheelSettings.baseDisplayIndicator,"base-display-shadow":s.wheelData.wheelSettings.baseDisplayShadow,"base-background":s.wheelData.wheelSettings.baseBackground,onClick:i.launchWheel,onWheelStart:i.wheelStartedCallback,onWheelEnd:i.wheelEndedCallback},{baseContent:w(()=>[s.wheelData.wheelSettings.baseHtmlContent?(r(),h("div",{key:0,innerHTML:s.wheelData.wheelSettings.baseHtmlContent},null,8,Un)):g("",!0)]),_:1},8,["items","first-item-index","centered-indicator","indicator-position","size","display-shadow","display-border","display-indicator","duration","result-variation","easing","counter-clockwise","horizontal-content","base-display","base-size","base-display-indicator","base-display-shadow","base-background","onClick","onWheelStart","onWheelEnd"])):g("",!0),m(e("div",qn,[e("button",{class:"btn btn-xs mx-2",onClick:o[0]||(o[0]=c=>i.onHardReset())}," Hard reset "),e("button",{class:"btn btn-xs mx-2",onClick:o[1]||(o[1]=c=>i.onSoftReset())}," Soft reset ")],512),[[$,n.result]])]),e("div",null,[e("button",{class:"btn btn-primary",onClick:o[2]||(o[2]=c=>n.showCustomization=!n.showCustomization)},[n.showCustomization?(r(),h("span",Pn,"Hide Customization")):(r(),h("span",Wn,"Customize me!"))])]),n.showCustomization?(r(),h("div",Fn,[e("div",On,[e("a",{class:f(["tab",{"tab-active":n.managerId===1}]),onClick:o[3]||(o[3]=c=>n.managerId=1)},"Items manager",2),e("a",{class:f(["tab",{"tab-active":n.managerId===2}]),onClick:o[4]||(o[4]=c=>n.managerId=2)},"Wheel manager",2)]),jn,n.managerId===1?(r(),v(d,{key:0,class:"item-manager overflow-scroll lg:overflow-auto","initial-items":s.wheelData.items,"initial-first-item-index":s.wheelData.firstItemIndex,onUpdateItems:i.onSoftReset},null,8,["initial-items","initial-first-item-index","onUpdateItems"])):g("",!0),n.managerId===2?(r(),v(u,{key:1,"initial-settings":s.wheelData.wheelSettings,onHardReset:i.onHardReset},null,8,["initial-settings","onHardReset"])):g("",!0),e("div",Ln,[e("button",{class:"btn btn-primary",onClick:o[5]||(o[5]=c=>n.showCustomization=!1)},Yn)])])):g("",!0)])}var Kn=_(Hn,[["render",Jn]]);const Gn={items:[{id:1,name:"Yes",htmlContent:"Yes",textColor:"",background:"#9deb9e"},{id:2,name:"No",htmlContent:"No",textColor:"",background:"#acacac"},{id:3,name:"Yes",htmlContent:"Yes",textColor:"",background:"#9deb9e"},{id:4,name:"No",htmlContent:"No",textColor:"",background:"#acacac"},{id:5,name:"Yes",htmlContent:"Yes",textColor:"",background:"#9deb9e"},{id:6,name:"No",htmlContent:"No",textColor:"",background:"#acacac"},{id:7,name:"Yes",htmlContent:"Yes",textColor:"",background:"#9deb9e"},{id:8,name:"No",htmlContent:"No",textColor:"",background:"#acacac"},{id:9,name:"Yes",htmlContent:"Yes",textColor:"",background:"#9deb9e"},{id:10,name:"No",htmlContent:"No",textColor:"",background:"#acacac"}],firstItemIndex:{value:0},wheelSettings:{centeredIndicator:!0,indicatorPosition:"top",size:300,displayShadow:!0,duration:5,resultVariation:95,easing:"ease",counterClockwise:!0,horizontalContent:!1,displayBorder:!0,displayIndicator:!0,baseDisplay:!0,baseSize:180,baseDisplayShadow:!0,baseDisplayIndicator:!0,baseBackground:"rgb(255 69 69)",baseHtmlContent:'<strong class="text-white">Ask yourself<br>a question</strong>'}},Zn={items:[{id:1,name:"Jean",htmlContent:"<strong>Jean</strong>",textColor:"",background:"#de3923"},{id:2,name:"Marie",htmlContent:"<strong>Marie</strong>",textColor:"",background:"#de9c21"},{id:3,name:"Louis",htmlContent:"<strong>Louis</strong>",textColor:"",background:"#c2de21"},{id:4,name:"Max",htmlContent:"<strong>Max</strong>",textColor:"",background:"#de3923"},{id:5,name:"Caroline",htmlContent:"<strong>Caroline</strong>",textColor:"",background:"#de9c21"},{id:6,name:"Lando",htmlContent:"<strong>Lando</strong>",textColor:"",background:"#c2de21"},{id:7,name:"Anna",htmlContent:"<strong>Anna</strong>",textColor:"",background:"#de3923"},{id:8,name:"Pierre",htmlContent:"<strong>Pierre</strong>",textColor:"",background:"#de9c21"}],firstItemIndex:{value:0},wheelSettings:{centeredIndicator:!1,indicatorPosition:"top",size:250,displayShadow:!0,duration:3,resultVariation:70,easing:"bounce",counterClockwise:!1,horizontalContent:!1,displayBorder:!0,displayIndicator:!0,baseDisplay:!1,baseSize:100,baseDisplayShadow:!0,baseDisplayIndicator:!0,baseBackground:"#EEAA33",baseHtmlContent:"<strong>Pick a<br>name!</strong>"}},Qn={items:[{id:1,name:"Burger",htmlContent:"<strong>Burger</strong>",textColor:"white",background:"#f2831b"},{id:2,name:"Veggie",htmlContent:"<strong>Veggie</strong>",textColor:"white",background:"#37e307"},{id:3,name:"Pizza",htmlContent:"<strong>Pizza</strong>",textColor:"white",background:"#3ab3f0"},{id:4,name:"Pokebowl",htmlContent:"<strong>Pokebowl</strong>",textColor:"white",background:"#f0403a"},{id:5,name:"Kebab",htmlContent:"<strong>Kebab</strong>",textColor:"white",background:"#f2831b"},{id:6,name:"Salads",htmlContent:"<strong>Salads</strong>",textColor:"white",background:"#37e307"},{id:7,name:"Japanese",htmlContent:"<strong>Japanese</strong>",textColor:"white",background:"#3ab3f0"},{id:8,name:"Pokebowl",htmlContent:"<strong>Pokebowl</strong>",textColor:"white",background:"#f0403a"},{id:9,name:"Thai",htmlContent:"<strong>Burger</strong>",textColor:"white",background:"#f2831b"},{id:10,name:"Sandwich",htmlContent:"<strong>Sandwich</strong>",textColor:"white",background:"#37e307"},{id:11,name:"French",htmlContent:"<strong>French</strong>",textColor:"white",background:"#3ab3f0"},{id:12,name:"Pasta",htmlContent:"<strong>Pasta</strong>",textColor:"white",background:"#f0403a"}],firstItemIndex:{value:0},wheelSettings:{centeredIndicator:!1,indicatorPosition:"right",size:400,displayShadow:!0,duration:8,resultVariation:70,easing:"bounce",counterClockwise:!1,horizontalContent:!1,displayBorder:!0,displayIndicator:!1,baseDisplay:!0,baseSize:100,baseDisplayShadow:!0,baseDisplayIndicator:!0,baseBackground:"#444",baseHtmlContent:'<strong class="text-white">What to<br>eat?</strong>'}},Xn={items:[{id:1,name:"1",htmlContent:"1",textColor:"white",background:"#aa64fa"},{id:2,name:"2",htmlContent:"2",textColor:"white",background:"#6475fa"},{id:3,name:"3",htmlContent:"3",textColor:"white",background:"#aa64fa"},{id:4,name:"4",htmlContent:"4",textColor:"white",background:"#6475fa"},{id:5,name:"5",htmlContent:"5",textColor:"white",background:"#aa64fa"},{id:6,name:"6",htmlContent:"6",textColor:"white",background:"#6475fa"},{id:7,name:"7",htmlContent:"7",textColor:"white",background:"#aa64fa"},{id:8,name:"8",htmlContent:"8",textColor:"white",background:"#6475fa"},{id:9,name:"9",htmlContent:"9",textColor:"white",background:"#aa64fa"},{id:10,name:"10",htmlContent:"10",textColor:"white",background:"#6475fa"}],firstItemIndex:{value:0},wheelSettings:{centeredIndicator:!0,indicatorPosition:"top",size:300,displayShadow:!0,duration:5,resultVariation:70,easing:"ease",counterClockwise:!0,horizontalContent:!1,displayBorder:!1,displayIndicator:!0,baseDisplay:!1,baseSize:100,baseDisplayShadow:!0,baseDisplayIndicator:!0,baseBackground:"#EEAA33",baseHtmlContent:"<strong>Touch<br>Me!</strong>"}},eo={items:[{id:1,name:"0",htmlContent:"0",textColor:"white",background:"#68BB45"},{id:2,name:"32",htmlContent:"32",textColor:"white",background:"#EE2D2E"},{id:3,name:"15",htmlContent:"15",textColor:"white",background:"#000"},{id:4,name:"19",htmlContent:"19",textColor:"white",background:"#EE2D2E"},{id:5,name:"4",htmlContent:"4",textColor:"white",background:"#000"},{id:6,name:"21",htmlContent:"21",textColor:"white",background:"#EE2D2E"},{id:7,name:"2",htmlContent:"2",textColor:"white",background:"#000"},{id:8,name:"25",htmlContent:"25",textColor:"white",background:"#EE2D2E"},{id:9,name:"17",htmlContent:"17",textColor:"white",background:"#000"},{id:10,name:"34",htmlContent:"34",textColor:"white",background:"#EE2D2E"},{id:9,name:"6",htmlContent:"6",textColor:"white",background:"#000"},{id:10,name:"27",htmlContent:"27",textColor:"white",background:"#EE2D2E"},{id:9,name:"13",htmlContent:"13",textColor:"white",background:"#000"},{id:10,name:"36",htmlContent:"36",textColor:"white",background:"#EE2D2E"},{id:9,name:"11",htmlContent:"11",textColor:"white",background:"#000"},{id:10,name:"30",htmlContent:"30",textColor:"white",background:"#EE2D2E"},{id:9,name:"8",htmlContent:"8",textColor:"white",background:"#000"},{id:10,name:"23",htmlContent:"23",textColor:"white",background:"#EE2D2E"},{id:9,name:"10",htmlContent:"10",textColor:"white",background:"#000"},{id:10,name:"5",htmlContent:"5",textColor:"white",background:"#EE2D2E"},{id:9,name:"24",htmlContent:"24",textColor:"white",background:"#000"},{id:10,name:"16",htmlContent:"16",textColor:"white",background:"#EE2D2E"},{id:9,name:"33",htmlContent:"33",textColor:"white",background:"#000"},{id:10,name:"1",htmlContent:"1",textColor:"white",background:"#EE2D2E"},{id:9,name:"20",htmlContent:"20",textColor:"white",background:"#000"},{id:10,name:"14",htmlContent:"14",textColor:"white",background:"#EE2D2E"},{id:9,name:"31",htmlContent:"31",textColor:"white",background:"#000"},{id:10,name:"9",htmlContent:"9",textColor:"white",background:"#EE2D2E"},{id:9,name:"22",htmlContent:"22",textColor:"white",background:"#000"},{id:10,name:"18",htmlContent:"18",textColor:"white",background:"#EE2D2E"},{id:9,name:"29",htmlContent:"29",textColor:"white",background:"#000"},{id:10,name:"7",htmlContent:"7",textColor:"white",background:"#EE2D2E"},{id:9,name:"28",htmlContent:"28",textColor:"white",background:"#000"},{id:10,name:"12",htmlContent:"12",textColor:"white",background:"#EE2D2E"},{id:9,name:"35",htmlContent:"35",textColor:"white",background:"#000"},{id:10,name:"3",htmlContent:"3",textColor:"white",background:"#EE2D2E"},{id:9,name:"26",htmlContent:"26",textColor:"white",background:"#000"}],firstItemIndex:{value:0},wheelSettings:{centeredIndicator:!0,indicatorPosition:"top",size:400,displayShadow:!0,duration:10,resultVariation:70,easing:"ease",counterClockwise:!0,horizontalContent:!1,displayBorder:!1,displayIndicator:!0,baseDisplay:!0,baseSize:300,baseDisplayShadow:!1,baseDisplayIndicator:!1,baseBackground:"#EEAA33",baseHtmlContent:'<img src="./roulette.png">'}};const to={name:"Examples",components:{Example:Kn},data(){return{yesNoData:Gn,namesData:Zn,eatData:Qn,numbersData:Xn,rouletteData:eo}}},z=t=>(X("data-v-2a21abdc"),t=t(),ee(),t),no=z(()=>e("div",{class:"divider"},null,-1)),oo=z(()=>e("div",{class:"divider"},null,-1)),so=z(()=>e("div",{class:"divider"},null,-1)),ao=z(()=>e("div",{class:"divider"},null,-1));function io(t,o,s,l,n,i){const a=b("Example");return r(),h("div",null,[p(a,{class:"big-wheel","ref-name":"eat","wheel-data":n.eatData},null,8,["wheel-data"]),no,p(a,{"ref-name":"yesno","wheel-data":n.yesNoData},null,8,["wheel-data"]),oo,p(a,{class:"big-wheel","ref-name":"roulette","wheel-data":n.rouletteData},null,8,["wheel-data"]),so,p(a,{"ref-name":"names","wheel-data":n.namesData},null,8,["wheel-data"]),ao,p(a,{"ref-name":"numbers","wheel-data":n.numbersData},null,8,["wheel-data"])])}var lo=_(to,[["render",io],["__scopeId","data-v-2a21abdc"]]);const ro=t=>{const o=mo(t),s=JSON.stringify(o);return uo(s)},co=t=>{try{const o=ho(t),s=JSON.parse(o);return go(s)}catch(o){return console.error("Failed to decompress data",o),null}},uo=t=>{const o=new TextEncoder().encode(t),s=Array.from(o).map(n=>String.fromCharCode(n)).join("");let l;if(typeof btoa=="undefined")l=window.btoa(s);else{const n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";let i="";for(let a=0,d,u=0,c=n;s.charAt(u|0)||(c="=",u%1);i+=c.charAt(63&a>>8-u%1*8))d=s.charCodeAt(u+=3/4),a=a<<8|d;l=i}return l.replace(/\+/g,"-").replace(/\//g,"_").replace(/=/g,"")},ho=t=>{let o=t;o.length%4!=0&&(o+="=".repeat(4-o.length%4)),o=o.replace(/-/g,"+").replace(/_/g,"/");let s;if(typeof atob=="undefined")s=window.atob(o);else{const l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";o=String(o).replace(/=+$/,"");let n="",i=0,a=0,d,u=0;for(;u<o.length;)d=o.charAt(u++),d=l.indexOf(d),~d&&(a=i%4?a*64+d:d,i++%4)&&(n+=String.fromCharCode(255&a>>(-2*i&6)));s=n}try{const l=new Uint8Array(s.length);for(let n=0;n<s.length;n++)l[n]=s.charCodeAt(n);return new TextDecoder().decode(l)}catch{let n="";const i=s.length;let a=0;for(;a<i;){const d=s.charCodeAt(a++);if(d<=127)n+=String.fromCharCode(d);else if(d<=223&&a<i){const u=s.charCodeAt(a++);n+=String.fromCharCode((d&31)<<6|u&63)}else if(d<=239&&a+1<i){const u=s.charCodeAt(a++),c=s.charCodeAt(a++);n+=String.fromCharCode((d&15)<<12|(u&63)<<6|c&63)}else if(d<=247&&a+2<i){const u=s.charCodeAt(a++),c=s.charCodeAt(a++),E=s.charCodeAt(a++),x=(d&7)<<18|(u&63)<<12|(c&63)<<6|E&63;if(x<=65535)n+=String.fromCharCode(x);else{const O=(x-65536>>10)+55296,j=(x-65536&1023)+56320;n+=String.fromCharCode(O,j)}}}return n}};(typeof btoa=="undefined"||typeof atob=="undefined")&&(window.btoa=function(t){const o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";let s="";for(let l=0,n,i=0,a=o;t.charAt(i|0)||(a="=",i%1);s+=a.charAt(63&l>>8-i%1*8))n=t.charCodeAt(i+=3/4),l=l<<8|n;return s},window.atob=function(t){const o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";t=String(t).replace(/=+$/,"");let s="",l=0,n=0,i,a=0;for(;a<t.length;)i=t.charAt(a++),i=o.indexOf(i),~i&&(n=l%4?n*64+i:i,l++%4)&&(s+=String.fromCharCode(255&n>>(-2*l&6)));return s});const mo=t=>{const o={i:[],f:t.firstItemIndex,s:{},n:t.name};t.items.forEach(i=>{const a={i:i.id,n:i.name};i.htmlContent&&(a.h=i.htmlContent),i.textColor&&(a.t=i.textColor),i.background&&(a.b=i.background),o.i.push(a)});const s=t.wheelSettings,l={centeredIndicator:!1,indicatorPosition:"top",size:300,displayShadow:!1,displayBorder:!1,displayIndicator:!0,duration:4,resultVariation:0,easing:"ease",counterClockwise:!1,horizontalContent:!1,baseDisplay:!1,baseSize:100,baseDisplayShadow:!1,baseDisplayIndicator:!1,baseBackground:"",baseHtmlContent:""},n={};return s.centeredIndicator!==l.centeredIndicator&&(n.c=s.centeredIndicator),s.indicatorPosition!==l.indicatorPosition&&(n.p=s.indicatorPosition),s.size!==l.size&&(n.z=s.size),s.displayShadow!==l.displayShadow&&(n.ds=s.displayShadow),s.displayBorder!==l.displayBorder&&(n.db=s.displayBorder),s.displayIndicator!==l.displayIndicator&&(n.di=s.displayIndicator),s.duration!==l.duration&&(n.d=s.duration),s.resultVariation!==l.resultVariation&&(n.r=s.resultVariation),s.easing!==l.easing&&(n.e=s.easing),s.counterClockwise!==l.counterClockwise&&(n.cc=s.counterClockwise),s.horizontalContent!==l.horizontalContent&&(n.hc=s.horizontalContent),s.baseDisplay!==l.baseDisplay&&(n.bd=s.baseDisplay),s.baseSize!==l.baseSize&&(n.bs=s.baseSize),s.baseDisplayShadow!==l.baseDisplayShadow&&(n.bds=s.baseDisplayShadow),s.baseDisplayIndicator!==l.baseDisplayIndicator&&(n.bdi=s.baseDisplayIndicator),s.baseBackground!==l.baseBackground&&(n.bb=s.baseBackground),s.baseHtmlContent!==l.baseHtmlContent&&(n.bhc=s.baseHtmlContent),o.s=n,o},go=t=>{const o={centeredIndicator:!1,indicatorPosition:"top",size:300,displayShadow:!1,displayBorder:!1,displayIndicator:!0,duration:4,resultVariation:0,easing:"ease",counterClockwise:!1,horizontalContent:!1,baseDisplay:!1,baseSize:100,baseDisplayShadow:!1,baseDisplayIndicator:!1,baseBackground:"",baseHtmlContent:""},s={items:[],firstItemIndex:t.f,wheelSettings:S({},o),name:t.n};t.i.forEach(n=>{s.items.push({id:n.i,name:n.n,htmlContent:n.h||"",textColor:n.t||"",background:n.b||""})});const l=t.s;return l.c!==void 0&&(s.wheelSettings.centeredIndicator=l.c),l.p!==void 0&&(s.wheelSettings.indicatorPosition=l.p),l.z!==void 0&&(s.wheelSettings.size=l.z),l.ds!==void 0&&(s.wheelSettings.displayShadow=l.ds),l.db!==void 0&&(s.wheelSettings.displayBorder=l.db),l.di!==void 0&&(s.wheelSettings.displayIndicator=l.di),l.d!==void 0&&(s.wheelSettings.duration=l.d),l.r!==void 0&&(s.wheelSettings.resultVariation=l.r),l.e!==void 0&&(s.wheelSettings.easing=l.e),l.cc!==void 0&&(s.wheelSettings.counterClockwise=l.cc),l.hc!==void 0&&(s.wheelSettings.horizontalContent=l.hc),l.bd!==void 0&&(s.wheelSettings.baseDisplay=l.bd),l.bs!==void 0&&(s.wheelSettings.baseSize=l.bs),l.bds!==void 0&&(s.wheelSettings.baseDisplayShadow=l.bds),l.bdi!==void 0&&(s.wheelSettings.baseDisplayIndicator=l.bdi),l.bb!==void 0&&(s.wheelSettings.baseBackground=l.bb),l.bhc!==void 0&&(s.wheelSettings.baseHtmlContent=l.bhc),s},po={name:"Custom",components:{Roulette:H,ItemsManager:V,WheelManager:R},data(){return B(S({},this.getInitialData()),{wheelActive:!0,startAnim:!1,managerId:1,result:null,configName:"",savedConfigurations:[],shareUrl:"",copySuccess:!1,itemsKey:0,wheelSettingsKey:0,activeConfigName:null})},mounted(){this.loadSavedConfigurations(),this.checkUrlForConfiguration()},methods:{getInitialData(){return P},launchWheel(){this.$refs.wheel.launchWheel()},wheelStartedCallback(t){console.log("wheel started !",t)},wheelEndedCallback(t){console.log("wheel ended !",t),this.result=t},onSoftReset(t){this.items=t||this.items,this.$refs.wheel.reset()},onHardReset(){this.wheelActive=!1,this.result=null,setTimeout(()=>{this.wheelActive=!0},10)},saveConfiguration(){this.configName.trim()||(this.configName=`Custom Wheel ${new Date().toLocaleString()}`);const t={id:Date.now(),name:this.configName,data:{items:this.items,firstItemIndex:this.firstItemIndex,wheelSettings:this.wheelSettings}};let o=JSON.parse(localStorage.getItem("wheelConfigurations")||"[]");o.push(t),localStorage.setItem("wheelConfigurations",JSON.stringify(o)),this.savedConfigurations=o,this.activeConfigName=this.configName,this.configName=""},loadSavedConfigurations(){const t=JSON.parse(localStorage.getItem("wheelConfigurations")||"[]");this.savedConfigurations=t},loadConfiguration(t){this.items=t.data.items,this.firstItemIndex=t.data.firstItemIndex,this.wheelSettings=t.data.wheelSettings,this.activeConfigName=t.name,this.itemsKey++,this.wheelSettingsKey++,this.onHardReset()},deleteConfiguration(t){let o=JSON.parse(localStorage.getItem("wheelConfigurations")||"[]");o=o.filter(s=>s.id!==t.id),localStorage.setItem("wheelConfigurations",JSON.stringify(o)),this.savedConfigurations=o,this.activeConfigName===t.name&&(this.activeConfigName=null)},shareConfiguration(){const t={items:this.items,firstItemIndex:this.firstItemIndex,wheelSettings:this.wheelSettings,name:this.activeConfigName||(this.configName?this.configName:"Shared Configuration")},o=ro(t),s=new URL(window.location.href);s.searchParams.set("config",o),this.shareUrl=s.toString()},copyShareUrl(){navigator.clipboard.writeText(this.shareUrl).then(()=>{this.copySuccess=!0,setTimeout(()=>{this.copySuccess=!1},3e3)}).catch(t=>{console.error("Erreur lors de la copie dans le presse-papier: ",t)})},checkUrlForConfiguration(){const o=new URLSearchParams(window.location.search).get("config");if(o)try{const s=co(o);if(!s){console.error("Invalid configuration data");return}this.items=s.items,this.firstItemIndex=s.firstItemIndex,this.wheelSettings=s.wheelSettings,this.activeConfigName=s.name||"Shared Configuration",this.itemsKey++,this.wheelSettingsKey++,this.onHardReset()}catch(s){console.error("Failed to load configuration from URL",s)}}}},bo={class:"text-4xl"},fo={class:"py-10 relative"},wo=["innerHTML"],Co={class:"absolute bottom-2 left-1/2 transform -translate-x-1/2"},_o={class:"flex justify-center space-x-4 mb-6"},yo={class:"form-control"},vo=e("label",{class:"label"},[e("span",{class:"label-text"},"Configuration Name")],-1),ko={class:"flex items-end space-x-2"},xo={key:0,class:"mb-6"},So=e("h3",{class:"text-xl mb-2"}," Saved Configurations ",-1),Io={class:"flex flex-wrap gap-2 justify-center"},Do=["onClick"],zo=["onClick"],Eo=e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",class:"inline-block w-4 h-4 stroke-current"},[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 18L18 6M6 6l12 12"})],-1),Bo=[Eo],Ao={key:1,class:"mb-6"},$o=e("h3",{class:"text-xl mb-2"}," Share URL ",-1),No={class:"flex items-center space-x-2"},Vo=["value"],Ro={key:0,class:"text-green-500 mt-1"},Ho={class:"tabs tabs-boxed justify-center"},Mo=e("div",{class:"divider"},null,-1);function Uo(t,o,s,l,n,i){const a=b("Roulette"),d=b("ItemsManager"),u=b("WheelManager");return r(),h("div",null,[e("h1",bo,W(n.activeConfigName?n.activeConfigName:"Custom Roulette"),1),e("div",fo,[n.wheelActive?(r(),v(a,{key:0,ref:"wheel",items:t.items,"first-item-index":t.firstItemIndex,"centered-indicator":t.wheelSettings.centeredIndicator,"indicator-position":t.wheelSettings.indicatorPosition,size:t.wheelSettings.size,"display-shadow":t.wheelSettings.displayShadow,"display-border":t.wheelSettings.displayBorder,"display-indicator":t.wheelSettings.displayIndicator,duration:t.wheelSettings.duration,"result-variation":t.wheelSettings.resultVariation,easing:t.wheelSettings.easing,"counter-clockwise":t.wheelSettings.counterClockwise,"horizontal-content":t.wheelSettings.horizontalContent,"base-display":t.wheelSettings.baseDisplay,"base-size":t.wheelSettings.baseSize,"base-display-indicator":t.wheelSettings.baseDisplayIndicator,"base-display-shadow":t.wheelSettings.baseDisplayShadow,"base-background":t.wheelSettings.baseBackground,onClick:i.launchWheel,onWheelStart:i.wheelStartedCallback,onWheelEnd:i.wheelEndedCallback},{baseContent:w(()=>[t.wheelSettings.baseHtmlContent?(r(),h("div",{key:0,innerHTML:t.wheelSettings.baseHtmlContent},null,8,wo)):g("",!0)]),_:1},8,["items","first-item-index","centered-indicator","indicator-position","size","display-shadow","display-border","display-indicator","duration","result-variation","easing","counter-clockwise","horizontal-content","base-display","base-size","base-display-indicator","base-display-shadow","base-background","onClick","onWheelStart","onWheelEnd"])):g("",!0),m(e("div",Co,[e("button",{class:"btn btn-xs mx-2",onClick:o[0]||(o[0]=c=>i.onHardReset())}," Hard reset "),e("button",{class:"btn btn-xs mx-2",onClick:o[1]||(o[1]=c=>i.onSoftReset())}," Soft reset ")],512),[[$,n.result]])]),e("div",_o,[e("div",yo,[vo,m(e("input",{"onUpdate:modelValue":o[2]||(o[2]=c=>n.configName=c),type:"text",placeholder:"My Custom Wheel",class:"input input-bordered"},null,512),[[C,n.configName]])]),e("div",ko,[e("button",{class:"btn btn-primary",onClick:o[3]||(o[3]=(...c)=>i.saveConfiguration&&i.saveConfiguration(...c))}," Save Configuration "),e("button",{class:"btn btn-secondary",onClick:o[4]||(o[4]=(...c)=>i.shareConfiguration&&i.shareConfiguration(...c))}," Share Configuration ")])]),n.savedConfigurations.length>0?(r(),h("div",xo,[So,e("div",Io,[(r(!0),h(I,null,A(n.savedConfigurations,c=>(r(),h("div",{key:c.id,class:"flex items-center"},[e("button",{class:"btn btn-sm",onClick:E=>i.loadConfiguration(c)},W(c.name),9,Do),e("button",{class:"btn btn-sm btn-error ml-1",onClick:E=>i.deleteConfiguration(c)},Bo,8,zo)]))),128))])])):g("",!0),n.shareUrl?(r(),h("div",Ao,[$o,e("div",No,[e("input",{ref:"shareUrlInput",type:"text",readonly:"",value:n.shareUrl,class:"input input-bordered flex-grow"},null,8,Vo),e("button",{class:"btn btn-sm",onClick:o[5]||(o[5]=(...c)=>i.copyShareUrl&&i.copyShareUrl(...c))}," Copy ")]),n.copySuccess?(r(),h("p",Ro," URL copied to clipboard! ")):g("",!0)])):g("",!0),e("div",Ho,[e("a",{class:f(["tab",{"tab-active":n.managerId===1}]),onClick:o[6]||(o[6]=c=>n.managerId=1)},"Items manager",2),e("a",{class:f(["tab",{"tab-active":n.managerId===2}]),onClick:o[7]||(o[7]=c=>n.managerId=2)},"Wheel manager",2)]),Mo,n.managerId===1?(r(),v(d,{key:n.itemsKey,class:"item-manager overflow-scroll lg:overflow-auto","initial-items":t.items,"initial-first-item-index":t.firstItemIndex,onUpdateItems:i.onSoftReset},null,8,["initial-items","initial-first-item-index","onUpdateItems"])):g("",!0),n.managerId===2?(r(),v(u,{key:n.wheelSettingsKey,"initial-settings":t.wheelSettings,onHardReset:i.onHardReset},null,8,["initial-settings","onHardReset"])):g("",!0)])}var qo=_(po,[["render",Uo]]);const Wo=te({history:ne(),routes:[{path:"/",component:rn},{path:"/docs",component:Rn},{path:"/examples",component:lo},{path:"/custom",component:qo}]});const Po={name:"Navbar",data(){return{drawerOpen:!1}}},Fo={class:"drawer-content"},Oo={class:"navbar mb-2 shadow-lg bg-neutral text-neutral-content"},jo=D('<div class="flex-none lg:hidden"><label for="my-drawer-3" class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg></label></div><div class="px-2 mx-2 navbar-start"><span class="text-lg font-bold"> Vue3 roulette </span></div>',2),Lo={class:"hidden px-2 mx-2 navbar-center lg:flex"},To={class:"flex items-stretch"},Yo=e("a",{class:"btn btn-ghost btn-sm rounded-btn"}," Home ",-1),Jo=e("a",{class:"btn btn-ghost btn-sm rounded-btn"}," Docs ",-1),Ko=e("a",{class:"btn btn-ghost btn-sm rounded-btn"}," Demo ",-1),Go=e("a",{class:"btn btn-ghost btn-sm rounded-btn"}," Custom ",-1),Zo=e("div",{class:"navbar-end"},[e("a",{href:"https://github.com/nitocode/vue3-roulette",target:"_blank",class:"btn btn-square btn-ghost"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",class:"inline-block w-6 h-6 fill-current"},[e("path",{d:"M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"})])])],-1),Qo={class:"drawer-side"},Xo=e("label",{for:"my-drawer-3",class:"drawer-overlay"},null,-1),es={class:"p-4 overflow-y-auto menu w-80 bg-base-100"},ts=e("a",null,"Home",-1),ns=e("a",null,"Docs",-1),os=e("a",null,"Demo",-1),ss=e("a",null,"Custom",-1);function as(t,o,s,l,n,i){const a=b("router-link");return r(),h("div",{class:f(["drawer fixed top-0 w-full lg:relative lg:h-16",[{"z-20 h-screen":n.drawerOpen},{"z-20 h-16":!n.drawerOpen}]])},[m(e("input",{id:"my-drawer-3","onUpdate:modelValue":o[0]||(o[0]=d=>n.drawerOpen=d),type:"checkbox",class:"drawer-toggle"},null,512),[[y,n.drawerOpen]]),e("div",Fo,[e("div",Oo,[jo,e("div",Lo,[e("div",To,[p(a,{to:"/"},{default:w(()=>[Yo]),_:1}),p(a,{to:"/docs"},{default:w(()=>[Jo]),_:1}),p(a,{to:"/examples"},{default:w(()=>[Ko]),_:1}),p(a,{to:"/custom"},{default:w(()=>[Go]),_:1})])]),Zo])]),e("div",Qo,[Xo,e("ul",es,[e("li",null,[p(a,{to:"/",onClick:o[1]||(o[1]=d=>n.drawerOpen=!1)},{default:w(()=>[ts]),_:1})]),e("li",null,[p(a,{to:"/docs",onClick:o[2]||(o[2]=d=>n.drawerOpen=!1)},{default:w(()=>[ns]),_:1})]),e("li",null,[p(a,{to:"/examples",onClick:o[3]||(o[3]=d=>n.drawerOpen=!1)},{default:w(()=>[os]),_:1})]),e("li",null,[p(a,{to:"/custom",onClick:o[4]||(o[4]=d=>n.drawerOpen=!1)},{default:w(()=>[ss]),_:1})])])])],2)}var is=_(Po,[["render",as]]);const ls={},rs={class:"items-center p-4 footer bg-neutral text-neutral-content"},ds=D('<div class="items-center grid-flow-col"><svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="fill-current"><path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path></svg><p>Made with love by Nitocode</p></div><div class="grid-flow-col gap-4 md:place-self-center md:justify-self-end"><a href="https://twitter.com/nitocode" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg></a><a href="https://github.com/nitocode/vue3-roulette" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="inline-block w-6 h-6 fill-current"><path d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"></path></svg></a></div>',2),cs=[ds];function us(t,o,s,l,n,i){return r(),h("footer",rs,cs)}var hs=_(ls,[["render",us]]);const ms={name:"Container",components:{Navbar:is,Footer:hs},mounted(){let t=localStorage.getItem("path");t&&(localStorage.removeItem("path"),this.$router.push(t))}},gs={class:"container mx-auto my-14 px-4 py-16 lg:py-0"};function ps(t,o,s,l,n,i){const a=b("Navbar"),d=b("router-view"),u=b("Footer");return r(),h("div",null,[p(a),e("div",gs,[p(d,null,{default:w(({Component:c})=>[p(oe,{name:"fade",mode:"out-in"},{default:w(()=>[(r(),v(se(c)))]),_:2},1024)]),_:1})]),p(u)])}var bs=_(ms,[["render",ps]]);const fs=ae(bs).use(Wo);fs.mount("#app");
38 | 


--------------------------------------------------------------------------------