From a8ce06c3b8eb4be71b39059bd9336979c624d4fe Mon Sep 17 00:00:00 2001 From: p-wojt Date: Sun, 2 Jan 2022 21:15:55 +0100 Subject: [PATCH] fix colors on wheel & rotating --- src/app.ts | 361 +++++++++-------------------- src/components/counter-item.ts | 35 --- src/components/item-removal.ts | 4 - src/components/menu-item.ts | 10 - src/components/open-close-arrow.ts | 12 - static/right-arrow.png | Bin 2601 -> 0 bytes 6 files changed, 114 insertions(+), 308 deletions(-) delete mode 100644 src/components/counter-item.ts delete mode 100644 src/components/open-close-arrow.ts delete mode 100644 static/right-arrow.png diff --git a/src/app.ts b/src/app.ts index 90ab451..3323979 100644 --- a/src/app.ts +++ b/src/app.ts @@ -18,12 +18,16 @@ const counterEl = document.getElementsByClassName( const removeAllItemsButtonEl = document.getElementsByClassName( "remove-all-items-button" )[0]! as HTMLButtonElement; -const lightDarkModeEl = document.getElementsByClassName('light-dark-mode')[0]! as HTMLDivElement; -const canvasEl = document.querySelector('canvas')! as HTMLCanvasElement; -const ctx = canvasEl.getContext('2d')!; -const bodyEl = document.querySelector('body')! as HTMLBodyElement; -const modeEl = lightDarkModeEl.querySelector('img')! as HTMLImageElement; -const canvasWrapper = document.getElementsByClassName('roulette-wheel')[0]! as HTMLDivElement; +const lightDarkModeEl = document.getElementsByClassName( + "light-dark-mode" +)[0]! as HTMLDivElement; +const canvasEl = document.querySelector("canvas")! as HTMLCanvasElement; +const ctx = canvasEl.getContext("2d")!; +const bodyEl = document.querySelector("body")! as HTMLBodyElement; +const modeEl = lightDarkModeEl.querySelector("img")! as HTMLImageElement; +const canvasWrapper = document.getElementsByClassName( + "roulette-wheel" +)[0]! as HTMLDivElement; const MAXIMUM_SIZE = 16; @@ -35,13 +39,13 @@ const items: MenuItem[] = []; configure(); function configure() { - LightDarkMode.currentMode = 'dark'; + LightDarkMode.currentMode = "dark"; IdPool.initializeIdsPool(MAXIMUM_SIZE); addRemoveItem(); addItemByEnter(); removeAllItems(); lightDarkMode(); - drawRouletteWheel(); + drawRouletteWheel(0); } function addRemoveItem() { @@ -60,7 +64,7 @@ function addRemoveItem() { itemsList.remove(item); IdPool.addId(item.id); updateCounter(); - drawRouletteWheel(); + drawRouletteWheel(0); }); registerChangeColorByClick(item, menuItem); @@ -69,29 +73,35 @@ function addRemoveItem() { items.push(menuItem); itemListEl.appendChild(menuItem.el); updateCounter(); - drawRouletteWheel(); + guessItemIndex = Math.floor(Math.random() * items.length); + maxAngle = 360 * rotations + segmentAngle * guessItemIndex; + segmentAngle = 360 / items.length; + drawRouletteWheel(0); } }); } -function addItemByEnter(){ - bodyEl.addEventListener('keyup', (event: KeyboardEvent) => { - if(event.key !== 'Enter'){ +function addItemByEnter() { + bodyEl.addEventListener("keyup", (event: KeyboardEvent) => { + if (event.key !== "Enter") { return; } addButtonEl.click(); - }) + }); } function registerChangeColorByClick(item: Item, menuItem: MenuItem) { - menuItem.el.addEventListener('click', () => { - const actualColorIndex = avaliableRGBs.indexOf(menuItem.el.style.backgroundColor); - if(actualColorIndex !== -1){ - const color = avaliableRGBs[(actualColorIndex + 1) % avaliableRGBs.length]; - menuItem.el.style.backgroundColor = color; - item.color = color; - drawRouletteWheel(); - } + menuItem.el.addEventListener("click", () => { + const actualColorIndex = avaliableRGBs.indexOf( + menuItem.el.style.backgroundColor + ); + if (actualColorIndex !== -1) { + const color = + avaliableRGBs[(actualColorIndex + 1) % avaliableRGBs.length]; + menuItem.el.style.backgroundColor = color; + item.color = color; + drawRouletteWheel(0); + } }); } @@ -103,7 +113,7 @@ function removeAllItems() { itemsList.clear(); IdPool.initializeIdsPool(MAXIMUM_SIZE); updateCounter(); - drawRouletteWheel(); + drawRouletteWheel(0); } }); } @@ -122,256 +132,113 @@ function animateCounter() { ); } -function lightDarkMode(){ - lightDarkModeEl.addEventListener('click', () => { - modeEl.animate( - [ - { transform: 'rotate(360deg)' } - ], - { - duration: 500 - } - ); +function lightDarkMode() { + lightDarkModeEl.addEventListener("click", () => { + modeEl.animate([{ transform: "rotate(360deg)" }], { + duration: 500, + }); - if(LightDarkMode.currentMode == 'dark'){ - modeEl.src = 'static/sun.png'; - bodyEl.style.backgroundColor = 'snow'; - bodyEl.style.color = 'black'; - }else{ - modeEl.src = 'static/moon.png'; - bodyEl.style.backgroundColor = '#121212'; - bodyEl.style.color = 'white'; + if (LightDarkMode.currentMode == "dark") { + modeEl.src = "static/sun.png"; + bodyEl.style.backgroundColor = "snow"; + bodyEl.style.color = "black"; + } else { + modeEl.src = "static/moon.png"; + bodyEl.style.backgroundColor = "#121212"; + bodyEl.style.color = "white"; } LightDarkMode.changeMode(); - }) + }); } -function drawRouletteWheel(){ - ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); +function drawRouletteWheel(angle: number) { canvasEl.width = canvasWrapper.offsetWidth; canvasEl.height = canvasWrapper.offsetHeight; const x = canvasEl.width / 2; const y = canvasEl.height / 2; const radius = canvasEl.height / 2; - let startAngle = 0; + ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); + let startAngle = angle; ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2, true); ctx.stroke(); const segmentWidth = 360 / items.length; - let endAngle = segmentWidth; - console.log(items.length); - for(let i = 0; i < items.length; i++){ + let endAngle = segmentWidth + startAngle; + for (let i = 0; i < items.length; i++) { ctx.beginPath(); - if(i === 1){ - ctx.lineTo(x, y); - } - ctx.arc(x, y, radius, (startAngle * Math.PI / 180), (endAngle * Math.PI / 180), false); - ctx.lineTo(x, y); + ctx.lineTo(x, y) + ctx.arc( + x, + y, + radius, + (startAngle * Math.PI) / 180, + (endAngle * Math.PI) / 180, + false + ); + ctx.lineTo(x, y) ctx.fillStyle = itemsList.items[i].color; ctx.fill(); - ctx.stroke(); + if (items.length !== 1) ctx.stroke(); startAngle += segmentWidth; endAngle += segmentWidth; } } -// // import { MenuItem } from "./components/menu-item"; -// import { CounterItem } from "./components/counter-item"; -// import { MenuItem } from "./components/menu-item"; -// import { MenuItemList } from "./components/menu-item-list"; -// import { OpenCloseArrow } from "./components/open-close-arrow"; -// import { Counter } from "./model/counter"; -// import { Item } from "./model/item"; -// import { avaliableIds, initializeIdsPool } from "./utils/item-id-pool"; -// import { avaliableRGBs } from "./utils/utils"; -// // import { OpenCloseArrow } from "./components/open-close-arrow"; +let angleSpeed = 1; -// const counterEl = document.getElementsByClassName( -// "counter" -// )[0]! as HTMLDivElement; -// const itemMenuEl = document.getElementsByClassName( -// "item-menu" -// )[0]! as HTMLDivElement; -// const openCloseMenuEl = document.getElementsByClassName( -// "open-close-menu" -// )[0]! as HTMLDivElement; -// const inputEl = document.querySelector("input")! as HTMLInputElement; -// const addButtonEl = document.getElementsByClassName( -// "new-item-button" -// )[0]! as HTMLButtonElement; -// const removeAllItemsButtonEl = document.getElementsByClassName( -// "remove-all-items-button" -// )[0]! as HTMLButtonElement; -// const MIN_ITEMS = 0; -// const MAX_ITEMS = 16; +let guessItemIndex = Math.floor(Math.random() * items.length); +let segmentAngle = 360 / items.length; +const rotations = 10; +let maxAngle = 360 * rotations + segmentAngle * guessItemIndex; +let delta = 0.2; +let totalAngle = 0; + let animationId: number | null; -// const openCloseItem = new OpenCloseArrow(); -// openCloseMenuEl.appendChild(openCloseItem.el); +function startRoulette(){ + if(animationId){ + resetRouletteAnimation(); + }else{ + drawRouletteWheel(0); + guessItemIndex = Math.floor(Math.random() * items.length); + segmentAngle = 360 / items.length; + console.log(itemsList.items[guessItemIndex].color); + maxAngle = 360 * rotations + segmentAngle * (guessItemIndex - 1) + segmentAngle * Math.random(); + console.log(guessItemIndex); + delta = 0.2 + beginAnimateRoulette(); + } +} -// const counterItem = new CounterItem(MIN_ITEMS, MAX_ITEMS); -// counterEl.appendChild(counterItem.el);canvasEl +function beginAnimateRoulette(){; + drawRouletteWheel(angleSpeed); + if(totalAngle < maxAngle){ + console.log(angleSpeed); + if(angleSpeed > maxAngle / 2){ + delta = -delta; + } + angleSpeed += angleSpeed * delta; + totalAngle += angleSpeed; + console.log('TOTAL: ' + totalAngle); + animationId = window.requestAnimationFrame(beginAnimateRoulette); + }else{ + window.cancelAnimationFrame(animationId!) + animationId = null; + angleSpeed = 1; + totalAngle = 0; + } +} -// const counter = counterItem.getCounter; +function resetRouletteAnimation(){ + if(animationId){ + window.cancelAnimationFrame(animationId!) + } + drawRouletteWheel(0); + animationId = null; + angleSpeed = 1; + totalAngle = 0; + delta = 0.2; +} -// const items: MenuItemList = new MenuItemList(); -// itemMenuEl.appendChild(items.el); - -// configure(); - -// function configure() { -// initializeIdsPool(MAX_ITEMS); -// } - -// addButtonEl.addEventListener("click", () => { -// const id = avaliableIds.pop(); -// const name = inputEl.value; -// if (id) { -// if (name) { -// if (counter.increment()) { -// const item = new MenuItem(id, name, avaliableRGBs[MAX_ITEMS % Counter.value]); -// console.log(item.deleteItem); -// item.deleteItem.el.addEventListener('click', () => { -// if(counter.decrement()){ -// avaliableIds.push(item.el.id) -// items.removeItem(item); -// counterItem.updateContent(); -// } -// }) -// items.addItem(item); -// counterItem.updateContent(); -// } -// } else { -// alert("Item name cannot be empty!"); -// } -// } else { -// alert("Maxium number of elements!"); -// } -// }); - -// removeAllItemsButtonEl.addEventListener("click", () => { -// initializeIdsPool(MAX_ITEMS); -// items.clear(); -// counter.clear(); -// counterItem.updateContent(); -// }); - -// // const openCloseMenuEl = document.getElementsByClassName( -// // "open-close-menu" -// // )[0]! as HTMLDivElement; - -// // const itemNameInput = document.querySelector("input")! as HTMLInputElement; - -// // const newItemButtonEl = document.getElementById( -// // "newItemButton" -// // )! as HTMLButtonElement; - -// // const removeAllItemsButtonEl = document.getElementById( -// // "removeAllItemsButton" -// // )! as HTMLButtonElement; - -// // // const newItemMenu = document.getElementById('new-item-menu')! as HTMLDivElement; - -// // menuEl.appendChild(items.el); -// // openCloseMenuEl.appendChild(new OpenCloseArrow().el); - -// // const avaliableRGBs = ["255, 0, 0", "0, 255, 0", "0, 0, 255"]; -// // const bgOpacity = 0.5; -// // let nextColor = avaliableRGBs[0]; - -// // const idsPool: number[] = []; -// // initalizeIdsPool(); - -// // function addNewItem() { -// // if (itemNameInput.value.length > 0 && itemNameInput.value.length <= 32) { -// // if (counter < maxItems && idsPool.length > 0) { -// // const item = new MenuItem( -// // idsPool.pop()!, -// // itemNameInput.value, -// // `rgba(${nextColor}, ${bgOpacity})` -// // ); - -// // item.deleteItem.el.addEventListener("click", () => { -// // const itemElId = calculateItemElId(item); -// // idsPool.push(itemElId); -// // setNextColor(); -// // items.removeItem(item); -// // counter--; -// // updateCounter(); -// // }); - -// // items.addItem(item); -// // counter++; -// // updateCounter(); -// // setNextColor(); -// // } else { -// // alert("Maximum number of items!"); -// // } -// // } -// // } - -// // function removeAllItems() { -// // if (items.itemsLength > 0) { -// // items.clear(); -// // counter = 0; -// // initalizeIdsPool(); -// // nextColor = avaliableRGBs[0]; -// // updateCounter(); -// // } else { -// // alert("Nothing to clear!"); -// // } -// // } - -// // function updateCounter() { -// // counterEl.textContent = `${counter}/${maxItems}`; -// // counterEl.animate([ -// // { transform: 'scale(1.25)'}, -// // { transform: 'scale(1.00)'} -// // ], -// // { -// // duration: 500 -// // } -// // ); -// // } - -// // function setNextColor() { -// // nextColor = avaliableRGBs[counter % avaliableRGBs.length]; -// // } - -// // function calculateItemElId(item: MenuItem) { -// // return +item.el.id.slice(0, item.el.id.indexOf("-")); -// // } - -// // const openCloseArrow = document.getElementById("open-close-arrow")!; -// // let open = true; - -// // function rotateOpenCloseArrow() { -// // openCloseArrow.animate([ -// // { transform: 'rotate(180deg)' } -// // ], -// // { -// // duration: 500, - -// // } -// // ); -// // if(open){ -// // menuEl.className = 'decreasing'; -// // open = false; -// // }else{ -// // menuEl.className = 'normal'; -// // open = true; -// // } - -// // } - -// // function initalizeIdsPool() { -// // idsPool.length = 0; -// // for (let i = 0; i < maxItems; i++) { -// // idsPool.push(i); -// // } -// // } - -// // newItemButtonEl.addEventListener("click", addNewItem); -// // removeAllItemsButtonEl.addEventListener("click", removeAllItems); -// // openCloseArrow.addEventListener("click", rotateOpenCloseArrow); +canvasEl.addEventListener('click', startRoulette); \ No newline at end of file diff --git a/src/components/counter-item.ts b/src/components/counter-item.ts deleted file mode 100644 index 9e7fd2d..0000000 --- a/src/components/counter-item.ts +++ /dev/null @@ -1,35 +0,0 @@ - -// import { Component } from "./base-component"; - -// export class CounterItem extends Component{ -// private counter: Counter; - -// constructor(min: number, max: number){ -// const counterEl = document.createElement('p'); -// counterEl.textContent = `${min}/${max}`; -// counterEl.className = 'counter-item'; -// super(counterEl); -// this.counter = new Counter(min, max); -// } - -// get getCounter(){ -// return this.counter; -// } - -// updateContent(){ -// this.el.textContent = `${Counter.value}/${this.counter.max}` -// this.animate(); -// } - -// private animate(): void{ -// this.el.animate( -// [ -// { transform: 'scale(1.25)'}, -// { transform: 'scale(1.00)'} -// ], -// { -// duration: 500 -// } -// ); -// } -// } \ No newline at end of file diff --git a/src/components/item-removal.ts b/src/components/item-removal.ts index fbb7c8d..5033091 100644 --- a/src/components/item-removal.ts +++ b/src/components/item-removal.ts @@ -10,8 +10,4 @@ export class ItemRemoval extends Component{ el.id = `${id}-delete` super(el); } - - configure(){ - // TODO: make icon rotation after mouse over event - } } \ No newline at end of file diff --git a/src/components/menu-item.ts b/src/components/menu-item.ts index b01733b..c32d969 100644 --- a/src/components/menu-item.ts +++ b/src/components/menu-item.ts @@ -18,16 +18,6 @@ export class MenuItem extends Component { this.appearAnimation(); } - // registerChangeColorListener(){ - // this.el.addEventListener('click', () => { - // const actualColorIndex = avaliableRGBs.indexOf(this.el.style.backgroundColor); - // if(actualColorIndex !== -1){ - // const color = avaliableRGBs[(actualColorIndex + 1) % avaliableRGBs.length]; - // this.el.style.backgroundColor = color; - // } - // }); - // } - appearAnimation(){ this.el.animate( [{ transform: "scale(1.25)" }, { transform: "scale(1.00)" }], diff --git a/src/components/open-close-arrow.ts b/src/components/open-close-arrow.ts deleted file mode 100644 index ee1c5bc..0000000 --- a/src/components/open-close-arrow.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from "./base-component"; - -export class OpenCloseArrow extends Component { - - constructor() { - const arrow = document.createElement('img'); - arrow.src = 'static/right-arrow.png'; - arrow.alt = 'open-close-arrow'; - arrow.className = 'open-close-arrow'; - super(arrow); - } -} \ No newline at end of file diff --git a/static/right-arrow.png b/static/right-arrow.png deleted file mode 100644 index f224f62ea8f78f76e3ec92b7bf56775ccbf7a4fa..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2601 zcmeHJSx{3~7{0kgWsy}u1*<7qqb$m3C6+ZZL_jG)Q2|2)q!9KXOA(^IDOzv^$F-OV z0U}aBiWNb&01irVVHY8QQ50ezF`z(#iOKEZp{>sJL9K7?ow@(_pa1**?L3`h-d=9H z+NRnN1nGLXyY7G>7`QN`sR5wr%E}f18VN2QJ2f>m2ZqQ`!BH#D-9G_>^k}m`ChJ(* zeh^%eNb*bcp@$_V2gip($;ruUBVwZxLW1K$*V5x@EUAMj1Yu^pJ$I5&6b1VKzyI0| zFzWKW!On$=JG^`#46K2jJ5N(fTW7wWzJa09LSvIfOH9p{EysPi@+9u{=ZeKrtN&qz|I5dnF9u*xEOOH=xAk4JG=@~~)W@eo| zf8pm#EH)>%;Fsc(tEFYvu9sI--mI#wsjcJHH#9ai-@E^ywWG7E`{ASBKK{Uyp=ZyB zM}#j#qhn&pOX>K;>&dBUnSADrLitvuJ{KQ_K+xO?57*5*5A?qrd~>mN&eG;rOI(9H zazah>Na7<43tU-Sw|my!+p)!L#UAf91*fbc&Ya6mZ*Sn2CAHZkc;RV6WnGT*(Bu#7 zgm#{sLEm=2rT++n!%#gwl%dQ#RIh4Hy5GOYD#G`w#EFUqpl$d<`)&7x(e{+XlC$>g zRl(f^y-N+nV>~l<;V5gWE87lji>YZoX3EPBeDssN`=DFogj7+T-p|qh#wSGXhvpGrej#I`oj$^;0Q-H+nI8#JTxx|!!-kmIkC5F$a)I2J<%>{gf;c4Crt(Lt}1Pq^b zgTs`xI=B#JcA7XQ1b>_f7lkb#LKv*UpC%j5H2Ty3JNkJ%ZW7_IJ|9}K)j00t$1a6q zGQ(o^-dXBHn|+YZCUwqI{CgK|M7a3zBfguV9? ztuU(6Ot$sY_?vAeHoZmVa}HPp4QtPg?1K*U<++VX#kGr}Wr-q@x@WYjQ&rMb#8vvT zC~k7Jsg$ei#r&Qr4P00AeIi;jP|a0xrp!7;>Iyy&Q0wPqNs$gqBA}k!;VKc~{#-z{ z+~q18#)msq4eT-DT@_hjzNrS~--*o`d=jW}L>?#>Dp=|(4Wsl=gt7*;Li`!bCl4?? z_-C0wt*EX3H#b3lZwjQ%WNbN4OdjLZt(iAX7W6Gsaph_1PL^XXGF3C3B`8(U##gAg zy+w#@Z;vy>8K_y)?Seh3@|$E-!tQcTT>y?&s`BIvHJ?(9$aaf3ygMLi6$qVI^UXHo zA~L;E4)0qK!>Gy$)q$vF8fbPYX!NaRYCdBNDxs$Op%O=s+8COjVB`Tl)lL|9{_kF8ia8KrChSqSkZFppbP+Hrur6KDF)C9 zJ1q`FH^%lnIK>Fv^rro4Tv4<1RUSe(IBZLcoUkL$??lEcG9QXs`%?4X7WR_k@~_a< z(#a82Tv5Wt2kXe^UqFHqYP&B-KN`zIRe|vhG5$`i{`s~sDZR~K1TG!7zaeMqMlGT~ c!=ZBZ-0++*Pf@r_$?OxwgXHD