diff --git a/app.css b/app.css index 022f132..478894f 100644 --- a/app.css +++ b/app.css @@ -1,65 +1,103 @@ -html { - font-family: 'Courier New', Courier, monospace; -} -input { - height: 1.5rem; - width: 15rem; +body { + background-color: #121212; + color: snow; + transition-duration: 3s; } -ul { - list-style-type: none; - padding: 0; - text-align: center; +canvas{ + margin-left: 5rem; + height: 50rem; +} + +html { + font-family: "Courier New", Courier, monospace; +} + +input { + height: 1.5rem; + width: 15rem; } li { - padding: 0.75rem; + padding: 0.75rem; } -.open-close-menu{ - display: flex; - justify-content: right; +ul { + padding: 0; + list-style-type: none; + text-align: center; } -.open-close-arrow { - width: 1rem; - height: 1rem; +.add-item-button { + height: 2rem; + width: 15.5rem; + margin-top: 0.5rem; } -.item-delete { - width: 1rem; - height: 1rem; - float: right; -} - -.decreasing { - width: 0.1rem; - transition-duration: 3s; -} - -.normal { - width: 20rem; - transition-duration: 3s; -} - -.menu { - height: 100vh; - width: 20rem; -} - -.new-item-button { - height: 2rem; - width: 10rem; - margin-top: 0.5rem; -} - -#menu-item { - text-align: center; +.close-arrow { + width: 1rem; + height: 1rem; } .counter { - font-size: 24px; + font-size: 24px; + text-align: center; +} + +.light-dark-mode { + float: right; + padding: 1rem; +} + +.remove-all-items-button { + width: 5.4rem; +} + +.roulette-wheel { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: -1; +} + +.menu { + width: 24rem; +} + +.menu-item-list { text-align: center; } +.moon-sun { + width: 3rem; + height: 3rem; +} + +.item-delete { + width: 1rem; + height: 1rem; + float: right; +} + +.open-close-menu { + display: flex; + justify-content: right; +} + +@media screen and (max-width: 940px) { + canvas{ + margin-top: 5rem; + height: 30rem; + margin: auto; + } + + .roulette-wheel { + position: relative; + top: 0; + left: 0; + width: 100%; + transform: translate(0, 0); + } +} \ No newline at end of file diff --git a/index.html b/index.html index e532364..b96233f 100644 --- a/index.html +++ b/index.html @@ -9,17 +9,22 @@ +
+ mode +
-
-
-
-
-
- - - - -
+ +

+ + + + + +
+
+
diff --git a/src/app.ts b/src/app.ts index fbeed23..90ab451 100644 --- a/src/app.ts +++ b/src/app.ts @@ -1,202 +1,377 @@ -// 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 { ItemList } from "./model/item-list"; +import { IdPool } from "./utils/item-id-pool"; +import { LightDarkMode } from "./utils/light-dark-mode"; import { avaliableRGBs } from "./utils/utils"; -// import { OpenCloseArrow } from "./components/open-close-arrow"; +const addButtonEl = document.getElementsByClassName( + "add-item-button" +)[0]! as HTMLButtonElement; +const inputEl = document.querySelector("input")! as HTMLInputElement; +const itemListEl = document.getElementsByClassName( + "menu-item-list" +)[0]! as HTMLUListElement; 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; +)[0]! as HTMLParagraphElement; const removeAllItemsButtonEl = document.getElementsByClassName( "remove-all-items-button" )[0]! as HTMLButtonElement; -HTMLUL +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 MIN_ITEMS = 0; -const MAX_ITEMS = 16; - -const openCloseItem = new OpenCloseArrow(); -openCloseMenuEl.appendChild(openCloseItem.el); - -const counterItem = new CounterItem(MIN_ITEMS, MAX_ITEMS); -counterEl.appendChild(counterItem.el); - -const counter = counterItem.getCounter; - -const items: MenuItemList = new MenuItemList(); -itemMenuEl.appendChild(items.el); +const MAXIMUM_SIZE = 16; +counterEl.textContent = `0/${MAXIMUM_SIZE}`; +const itemsList = new ItemList(MAXIMUM_SIZE); +const items: MenuItem[] = []; configure(); function configure() { - initializeIdsPool(MAX_ITEMS); + LightDarkMode.currentMode = 'dark'; + IdPool.initializeIdsPool(MAXIMUM_SIZE); + addRemoveItem(); + addItemByEnter(); + removeAllItems(); + lightDarkMode(); + drawRouletteWheel(); } -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!"); +function addRemoveItem() { + addButtonEl.addEventListener("click", () => { + const name = inputEl.value; + const id = IdPool.getAnId(); + if (name && id) { + const color = avaliableRGBs[id % avaliableRGBs.length]; + + const item = new Item(id, name, color); + const menuItem = new MenuItem(id, name, color); + + menuItem.deleteItem.el.addEventListener("click", () => { + menuItem.el.remove(); + items.splice(items.indexOf(menuItem), 1); + itemsList.remove(item); + IdPool.addId(item.id); + updateCounter(); + drawRouletteWheel(); + }); + + registerChangeColorByClick(item, menuItem); + + itemsList.add(item); + items.push(menuItem); + itemListEl.appendChild(menuItem.el); + updateCounter(); + drawRouletteWheel(); } - } else { - alert("Maxium number of elements!"); + }); +} + +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(); + } + }); +} + +function removeAllItems() { + removeAllItemsButtonEl.addEventListener("click", () => { + if (items.length > 0) { + items.forEach((menuItem) => menuItem.el.remove()); + items.length = 0; + itemsList.clear(); + IdPool.initializeIdsPool(MAXIMUM_SIZE); + updateCounter(); + drawRouletteWheel(); + } + }); +} + +function updateCounter() { + counterEl.textContent = `${itemsList.items.length}/${MAXIMUM_SIZE}`; + animateCounter(); +} + +function animateCounter() { + counterEl.animate( + [{ transform: "scale(1.25)" }, { transform: "scale(1.00)" }], + { + 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'; + } + + LightDarkMode.changeMode(); + }) +} + +function drawRouletteWheel(){ + ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); + 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.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++){ + 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.fillStyle = itemsList.items[i].color; + ctx.fill(); + ctx.stroke(); + startAngle += segmentWidth; + endAngle += segmentWidth; } -}); +} -removeAllItemsButtonEl.addEventListener("click", () => { - initializeIdsPool(MAX_ITEMS); - items.clear(); - counter.clear(); - counterItem.updateContent(); -}); +// // 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"; +// 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 itemNameInput = document.querySelector("input")! as HTMLInputElement; +// const MIN_ITEMS = 0; +// const MAX_ITEMS = 16; -// const newItemButtonEl = document.getElementById( -// "newItemButton" -// )! as HTMLButtonElement; +// const openCloseItem = new OpenCloseArrow(); +// openCloseMenuEl.appendChild(openCloseItem.el); -// const removeAllItemsButtonEl = document.getElementById( -// "removeAllItemsButton" -// )! as HTMLButtonElement; +// const counterItem = new CounterItem(MIN_ITEMS, MAX_ITEMS); +// counterEl.appendChild(counterItem.el);canvasEl -// // const newItemMenu = document.getElementById('new-item-menu')! as HTMLDivElement; +// const counter = counterItem.getCounter; -// menuEl.appendChild(items.el); -// openCloseMenuEl.appendChild(new OpenCloseArrow().el); +// const items: MenuItemList = new MenuItemList(); +// itemMenuEl.appendChild(items.el); -// const avaliableRGBs = ["255, 0, 0", "0, 255, 0", "0, 0, 255"]; -// const bgOpacity = 0.5; -// let nextColor = avaliableRGBs[0]; +// configure(); -// const idsPool: number[] = []; -// initalizeIdsPool(); +// function configure() { +// initializeIdsPool(MAX_ITEMS); +// } -// 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(); +// 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("Maximum number of items!"); +// alert("Item name cannot be empty!"); // } -// } -// } - -// function removeAllItems() { -// if (items.itemsLength > 0) { -// items.clear(); -// counter = 0; -// initalizeIdsPool(); -// nextColor = avaliableRGBs[0]; -// updateCounter(); // } else { -// alert("Nothing to clear!"); +// alert("Maxium number of elements!"); // } -// } +// }); -// function updateCounter() { -// counterEl.textContent = `${counter}/${maxItems}`; -// counterEl.animate([ -// { transform: 'scale(1.25)'}, -// { transform: 'scale(1.00)'} -// ], -// { -// duration: 500 -// } -// ); -// } +// removeAllItemsButtonEl.addEventListener("click", () => { +// initializeIdsPool(MAX_ITEMS); +// items.clear(); +// counter.clear(); +// counterItem.updateContent(); +// }); -// function setNextColor() { -// nextColor = avaliableRGBs[counter % avaliableRGBs.length]; -// } +// // const openCloseMenuEl = document.getElementsByClassName( +// // "open-close-menu" +// // )[0]! as HTMLDivElement; -// function calculateItemElId(item: MenuItem) { -// return +item.el.id.slice(0, item.el.id.indexOf("-")); -// } +// // const itemNameInput = document.querySelector("input")! as HTMLInputElement; -// const openCloseArrow = document.getElementById("open-close-arrow")!; -// let open = true; +// // const newItemButtonEl = document.getElementById( +// // "newItemButton" +// // )! as HTMLButtonElement; -// function rotateOpenCloseArrow() { -// openCloseArrow.animate([ -// { transform: 'rotate(180deg)' } -// ], -// { -// duration: 500, +// // const removeAllItemsButtonEl = document.getElementById( +// // "removeAllItemsButton" +// // )! as HTMLButtonElement; -// } -// ); -// if(open){ -// menuEl.className = 'decreasing'; -// open = false; -// }else{ -// menuEl.className = 'normal'; -// open = true; -// } +// // // const newItemMenu = document.getElementById('new-item-menu')! as HTMLDivElement; -// } +// // menuEl.appendChild(items.el); +// // openCloseMenuEl.appendChild(new OpenCloseArrow().el); -// function initalizeIdsPool() { -// idsPool.length = 0; -// for (let i = 0; i < maxItems; i++) { -// idsPool.push(i); -// } -// } +// // const avaliableRGBs = ["255, 0, 0", "0, 255, 0", "0, 0, 255"]; +// // const bgOpacity = 0.5; +// // let nextColor = avaliableRGBs[0]; -// newItemButtonEl.addEventListener("click", addNewItem); -// removeAllItemsButtonEl.addEventListener("click", removeAllItems); -// openCloseArrow.addEventListener("click", rotateOpenCloseArrow); +// // 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); diff --git a/src/components/counter-item.ts b/src/components/counter-item.ts index 3807a89..9e7fd2d 100644 --- a/src/components/counter-item.ts +++ b/src/components/counter-item.ts @@ -1,35 +1,35 @@ -import { Counter } from "../model/counter"; -import { Component } from "./base-component"; -export class CounterItem extends Component{ - private counter: Counter; +// import { Component } from "./base-component"; - 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); - } +// export class CounterItem extends Component{ +// private counter: Counter; - get getCounter(){ - return this.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); +// } - updateContent(){ - this.el.textContent = `${Counter.value}/${this.counter.max}` - this.animate(); - } +// get getCounter(){ +// return this.counter; +// } - private animate(): void{ - this.el.animate( - [ - { transform: 'scale(1.25)'}, - { transform: 'scale(1.00)'} - ], - { - duration: 500 - } - ); - } -} \ No newline at end of file +// 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/menu-item.ts b/src/components/menu-item.ts index 3915d73..b01733b 100644 --- a/src/components/menu-item.ts +++ b/src/components/menu-item.ts @@ -5,15 +5,35 @@ export class MenuItem extends Component { deleteItem: ItemRemoval; - constructor(id: number, value: string, color: string){ + constructor(id: number, name: string, color: string){ const deleteItem = new ItemRemoval(id); const el = document.createElement('li'); el.className = 'menu-item'; el.id = `${id}-item`; - el.textContent = value; + el.textContent = name; el.style.backgroundColor = color; el.appendChild(deleteItem.el); super(el); this.deleteItem = deleteItem; + 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)" }], + { + duration: 500, + } + ); } } \ No newline at end of file diff --git a/src/model/counter.ts b/src/model/counter.ts deleted file mode 100644 index 548c0d7..0000000 --- a/src/model/counter.ts +++ /dev/null @@ -1,39 +0,0 @@ -export class Counter { - static value: number; - min: number; - max: number; - - constructor(min: number, max: number){ - Counter.value = min; - this.min = min; - this.max = max; - } - - increment(){ - if(!this.isMax()){ - Counter.value++; - return true; - } - return false; - } - - decrement(){ - if(!this.isMin()){ - Counter.value--; - return true; - } - return false; - } - - clear(){ - Counter.value = 0; - } - - private isMax(){ - return this.max === Counter.value; - } - - private isMin(){ - return this.min === Counter.value; - } -} \ No newline at end of file diff --git a/src/model/item-list.ts b/src/model/item-list.ts new file mode 100644 index 0000000..2e21338 --- /dev/null +++ b/src/model/item-list.ts @@ -0,0 +1,32 @@ +import { Item } from "./item"; +import { List } from "./list"; + +export class ItemList implements List { + items: Item[]; + maximumSize: number; + + constructor(maxSize: number){ + this.items = []; + this.maximumSize = maxSize; + } + + add(item: Item){ + if(this.items.length < this.maximumSize) + this.items.push(item); + } + + removeById(id: number){ + const toRemove = this.items.find(e => e.id === id); + if(toRemove){ + this.remove(toRemove); + } + } + + remove(item: Item){ + this.items.splice(this.items.indexOf(item), 1); + } + + clear(){ + this.items = []; + } +} \ No newline at end of file diff --git a/src/model/item.ts b/src/model/item.ts index 242cda2..a012115 100644 --- a/src/model/item.ts +++ b/src/model/item.ts @@ -1,11 +1,11 @@ export class Item { - id: number; - name: string; - color: string; + id: number; + name: string; + color: string; - constructor(id: number, name: string, color: string){ - this.id = id; - this.name = name; - this.color = color; - } -} \ No newline at end of file + constructor(id: number, name: string, color: string) { + this.id = id; + this.name = name; + this.color = color; + } +} diff --git a/src/model/list.ts b/src/model/list.ts new file mode 100644 index 0000000..c74bdc9 --- /dev/null +++ b/src/model/list.ts @@ -0,0 +1,5 @@ +export interface List { + items: T[]; + + add(item: T): void; +} \ No newline at end of file diff --git a/src/utils/item-id-pool.ts b/src/utils/item-id-pool.ts index 10849fb..7de4747 100644 --- a/src/utils/item-id-pool.ts +++ b/src/utils/item-id-pool.ts @@ -1,7 +1,22 @@ -export const avaliableIds: number[] = []; +export abstract class IdPool { + static avaliableIds: number[] = []; -export function initializeIdsPool(numberOfElements: number){ - for(let i = 1; i <= numberOfElements; i++){ - avaliableIds[i] = i; + static initializeIdsPool(numberOfElements: number) { + for (let i = 1; i <= numberOfElements; i++) { + IdPool.avaliableIds[i] = i; } -} \ No newline at end of file + } + + static getAnId() { + const id = this.avaliableIds.pop(); + if (!id) { + alert("Maxiumum number of items!"); + return; + } + return id; + } + + static addId(id: number){ + this.avaliableIds.push(id); + } +} diff --git a/src/utils/light-dark-mode.ts b/src/utils/light-dark-mode.ts new file mode 100644 index 0000000..5fe5db2 --- /dev/null +++ b/src/utils/light-dark-mode.ts @@ -0,0 +1,13 @@ +type mode = 'dark' | 'light'; + +export abstract class LightDarkMode{ + static currentMode: mode; + + static changeMode(){ + if(this.currentMode == 'light'){ + this.currentMode = 'dark'; + }else{ + this.currentMode = 'light'; + } + } +} diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 188e78b..19cdd27 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,2 +1 @@ -export const avaliableRGBs = ["255, 0, 0", "0, 255, 0", "0, 0, 255"]; - +export const avaliableRGBs = ["rgba(255, 0, 0, 0.5)", "rgba(0, 255, 0, 0.5)", "rgba(0, 0, 255, 0.5)", "rgba(255, 255, 0, 0.5)"]; \ No newline at end of file diff --git a/static/moon.png b/static/moon.png new file mode 100644 index 0000000..8d4f489 Binary files /dev/null and b/static/moon.png differ diff --git a/static/sun.png b/static/sun.png new file mode 100644 index 0000000..633301f Binary files /dev/null and b/static/sun.png differ