mirror of
https://github.com/kevinveenbirkenbach/roulette-wheel.git
synced 2024-11-22 02:01:05 +01:00
fix colors on wheel & rotating
This commit is contained in:
p-wojt
parent
0f955e3ce2
commit
a8ce06c3b8
345
src/app.ts
345
src/app.ts
@ -18,12 +18,16 @@ const counterEl = document.getElementsByClassName(
|
|||||||
const removeAllItemsButtonEl = document.getElementsByClassName(
|
const removeAllItemsButtonEl = document.getElementsByClassName(
|
||||||
"remove-all-items-button"
|
"remove-all-items-button"
|
||||||
)[0]! as HTMLButtonElement;
|
)[0]! as HTMLButtonElement;
|
||||||
const lightDarkModeEl = document.getElementsByClassName('light-dark-mode')[0]! as HTMLDivElement;
|
const lightDarkModeEl = document.getElementsByClassName(
|
||||||
const canvasEl = document.querySelector('canvas')! as HTMLCanvasElement;
|
"light-dark-mode"
|
||||||
const ctx = canvasEl.getContext('2d')!;
|
)[0]! as HTMLDivElement;
|
||||||
const bodyEl = document.querySelector('body')! as HTMLBodyElement;
|
const canvasEl = document.querySelector("canvas")! as HTMLCanvasElement;
|
||||||
const modeEl = lightDarkModeEl.querySelector('img')! as HTMLImageElement;
|
const ctx = canvasEl.getContext("2d")!;
|
||||||
const canvasWrapper = document.getElementsByClassName('roulette-wheel')[0]! as HTMLDivElement;
|
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;
|
const MAXIMUM_SIZE = 16;
|
||||||
|
|
||||||
@ -35,13 +39,13 @@ const items: MenuItem[] = [];
|
|||||||
configure();
|
configure();
|
||||||
|
|
||||||
function configure() {
|
function configure() {
|
||||||
LightDarkMode.currentMode = 'dark';
|
LightDarkMode.currentMode = "dark";
|
||||||
IdPool.initializeIdsPool(MAXIMUM_SIZE);
|
IdPool.initializeIdsPool(MAXIMUM_SIZE);
|
||||||
addRemoveItem();
|
addRemoveItem();
|
||||||
addItemByEnter();
|
addItemByEnter();
|
||||||
removeAllItems();
|
removeAllItems();
|
||||||
lightDarkMode();
|
lightDarkMode();
|
||||||
drawRouletteWheel();
|
drawRouletteWheel(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addRemoveItem() {
|
function addRemoveItem() {
|
||||||
@ -60,7 +64,7 @@ function addRemoveItem() {
|
|||||||
itemsList.remove(item);
|
itemsList.remove(item);
|
||||||
IdPool.addId(item.id);
|
IdPool.addId(item.id);
|
||||||
updateCounter();
|
updateCounter();
|
||||||
drawRouletteWheel();
|
drawRouletteWheel(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
registerChangeColorByClick(item, menuItem);
|
registerChangeColorByClick(item, menuItem);
|
||||||
@ -69,28 +73,34 @@ function addRemoveItem() {
|
|||||||
items.push(menuItem);
|
items.push(menuItem);
|
||||||
itemListEl.appendChild(menuItem.el);
|
itemListEl.appendChild(menuItem.el);
|
||||||
updateCounter();
|
updateCounter();
|
||||||
drawRouletteWheel();
|
guessItemIndex = Math.floor(Math.random() * items.length);
|
||||||
|
maxAngle = 360 * rotations + segmentAngle * guessItemIndex;
|
||||||
|
segmentAngle = 360 / items.length;
|
||||||
|
drawRouletteWheel(0);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function addItemByEnter() {
|
function addItemByEnter() {
|
||||||
bodyEl.addEventListener('keyup', (event: KeyboardEvent) => {
|
bodyEl.addEventListener("keyup", (event: KeyboardEvent) => {
|
||||||
if(event.key !== 'Enter'){
|
if (event.key !== "Enter") {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
addButtonEl.click();
|
addButtonEl.click();
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function registerChangeColorByClick(item: Item, menuItem: MenuItem) {
|
function registerChangeColorByClick(item: Item, menuItem: MenuItem) {
|
||||||
menuItem.el.addEventListener('click', () => {
|
menuItem.el.addEventListener("click", () => {
|
||||||
const actualColorIndex = avaliableRGBs.indexOf(menuItem.el.style.backgroundColor);
|
const actualColorIndex = avaliableRGBs.indexOf(
|
||||||
|
menuItem.el.style.backgroundColor
|
||||||
|
);
|
||||||
if (actualColorIndex !== -1) {
|
if (actualColorIndex !== -1) {
|
||||||
const color = avaliableRGBs[(actualColorIndex + 1) % avaliableRGBs.length];
|
const color =
|
||||||
|
avaliableRGBs[(actualColorIndex + 1) % avaliableRGBs.length];
|
||||||
menuItem.el.style.backgroundColor = color;
|
menuItem.el.style.backgroundColor = color;
|
||||||
item.color = color;
|
item.color = color;
|
||||||
drawRouletteWheel();
|
drawRouletteWheel(0);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -103,7 +113,7 @@ function removeAllItems() {
|
|||||||
itemsList.clear();
|
itemsList.clear();
|
||||||
IdPool.initializeIdsPool(MAXIMUM_SIZE);
|
IdPool.initializeIdsPool(MAXIMUM_SIZE);
|
||||||
updateCounter();
|
updateCounter();
|
||||||
drawRouletteWheel();
|
drawRouletteWheel(0);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -123,255 +133,112 @@ function animateCounter() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function lightDarkMode() {
|
function lightDarkMode() {
|
||||||
lightDarkModeEl.addEventListener('click', () => {
|
lightDarkModeEl.addEventListener("click", () => {
|
||||||
modeEl.animate(
|
modeEl.animate([{ transform: "rotate(360deg)" }], {
|
||||||
[
|
duration: 500,
|
||||||
{ transform: 'rotate(360deg)' }
|
});
|
||||||
],
|
|
||||||
{
|
|
||||||
duration: 500
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if(LightDarkMode.currentMode == 'dark'){
|
if (LightDarkMode.currentMode == "dark") {
|
||||||
modeEl.src = 'static/sun.png';
|
modeEl.src = "static/sun.png";
|
||||||
bodyEl.style.backgroundColor = 'snow';
|
bodyEl.style.backgroundColor = "snow";
|
||||||
bodyEl.style.color = 'black';
|
bodyEl.style.color = "black";
|
||||||
} else {
|
} else {
|
||||||
modeEl.src = 'static/moon.png';
|
modeEl.src = "static/moon.png";
|
||||||
bodyEl.style.backgroundColor = '#121212';
|
bodyEl.style.backgroundColor = "#121212";
|
||||||
bodyEl.style.color = 'white';
|
bodyEl.style.color = "white";
|
||||||
}
|
}
|
||||||
|
|
||||||
LightDarkMode.changeMode();
|
LightDarkMode.changeMode();
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawRouletteWheel(){
|
function drawRouletteWheel(angle: number) {
|
||||||
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
|
|
||||||
canvasEl.width = canvasWrapper.offsetWidth;
|
canvasEl.width = canvasWrapper.offsetWidth;
|
||||||
canvasEl.height = canvasWrapper.offsetHeight;
|
canvasEl.height = canvasWrapper.offsetHeight;
|
||||||
const x = canvasEl.width / 2;
|
const x = canvasEl.width / 2;
|
||||||
const y = canvasEl.height / 2;
|
const y = canvasEl.height / 2;
|
||||||
const radius = 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.beginPath();
|
||||||
ctx.arc(x, y, radius, 0, Math.PI * 2, true);
|
ctx.arc(x, y, radius, 0, Math.PI * 2, true);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
const segmentWidth = 360 / items.length;
|
const segmentWidth = 360 / items.length;
|
||||||
let endAngle = segmentWidth;
|
let endAngle = segmentWidth + startAngle;
|
||||||
console.log(items.length);
|
|
||||||
for (let i = 0; i < items.length; i++) {
|
for (let i = 0; i < items.length; i++) {
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
if(i === 1){
|
ctx.lineTo(x, y)
|
||||||
ctx.lineTo(x, y);
|
ctx.arc(
|
||||||
}
|
x,
|
||||||
ctx.arc(x, y, radius, (startAngle * Math.PI / 180), (endAngle * Math.PI / 180), false);
|
y,
|
||||||
ctx.lineTo(x, y);
|
radius,
|
||||||
|
(startAngle * Math.PI) / 180,
|
||||||
|
(endAngle * Math.PI) / 180,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
ctx.lineTo(x, y)
|
||||||
ctx.fillStyle = itemsList.items[i].color;
|
ctx.fillStyle = itemsList.items[i].color;
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
ctx.stroke();
|
if (items.length !== 1) ctx.stroke();
|
||||||
startAngle += segmentWidth;
|
startAngle += segmentWidth;
|
||||||
endAngle += segmentWidth;
|
endAngle += segmentWidth;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// // import { MenuItem } from "./components/menu-item";
|
let angleSpeed = 1;
|
||||||
// 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";
|
|
||||||
|
|
||||||
// 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;
|
let guessItemIndex = Math.floor(Math.random() * items.length);
|
||||||
// const MAX_ITEMS = 16;
|
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();
|
function startRoulette(){
|
||||||
// openCloseMenuEl.appendChild(openCloseItem.el);
|
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);
|
function beginAnimateRoulette(){;
|
||||||
// counterEl.appendChild(counterItem.el);canvasEl
|
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();
|
canvasEl.addEventListener('click', startRoulette);
|
||||||
// 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);
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
|
|
||||||
// import { Component } from "./base-component";
|
|
||||||
|
|
||||||
// export class CounterItem extends Component<HTMLElement>{
|
|
||||||
// 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
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
@ -10,8 +10,4 @@ export class ItemRemoval extends Component<HTMLImageElement>{
|
|||||||
el.id = `${id}-delete`
|
el.id = `${id}-delete`
|
||||||
super(el);
|
super(el);
|
||||||
}
|
}
|
||||||
|
|
||||||
configure(){
|
|
||||||
// TODO: make icon rotation after mouse over event
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@ -18,16 +18,6 @@ export class MenuItem extends Component<HTMLLIElement> {
|
|||||||
this.appearAnimation();
|
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(){
|
appearAnimation(){
|
||||||
this.el.animate(
|
this.el.animate(
|
||||||
[{ transform: "scale(1.25)" }, { transform: "scale(1.00)" }],
|
[{ transform: "scale(1.25)" }, { transform: "scale(1.00)" }],
|
||||||
|
|||||||
@ -1,12 +0,0 @@
|
|||||||
import { Component } from "./base-component";
|
|
||||||
|
|
||||||
export class OpenCloseArrow extends Component<HTMLImageElement> {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
const arrow = document.createElement('img');
|
|
||||||
arrow.src = 'static/right-arrow.png';
|
|
||||||
arrow.alt = 'open-close-arrow';
|
|
||||||
arrow.className = 'open-close-arrow';
|
|
||||||
super(arrow);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Loading…
Reference in New Issue
Block a user