redefine project

2021-12-31 21:42:08 +01:00 · 2021-12-31 21:42:08 +01:00 · 9649216920
parent 656e157f14
commit 9649216920
12 changed files with 359 additions and 154 deletions
--- a/app.css
+++ b/app.css
@ -1,18 +1,6 @@
 html {
    font-family: 'Courier New', Courier, monospace;
 }
-
-canvas {
-    margin: 0;
-    position: absolute;
-    width: 500px;
-    height: 500px;
-    top: 50%;
-    left: 50%;
-    margin-right: -50%;
-    transform: translate(-50%, -50%);
-}
-
 input {
    height: 1.5rem;
    width: 15rem;
@ -28,7 +16,12 @@ li {
    padding: 0.75rem;
 }

-.openCloseMenu {
+.open-close-menu{
+    display: flex;
+    justify-content: right;
+}
+
+.open-close-arrow {
    width: 1rem;
    height: 1rem;
 }
@ -39,12 +32,22 @@ li {
    float: right;
 }

-#menu {
+.decreasing {
+    width: 0.1rem;
+    transition-duration: 3s;
+}
+
+.normal {
+    width: 20rem;
+    transition-duration: 3s;
+}
+
+.menu {
    height: 100vh;
    width: 20rem;
 }

-#newItemButton {
+.new-item-button {
    height: 2rem;
    width: 10rem;
    margin-top: 0.5rem;
@ -54,7 +57,7 @@ li {
    text-align: center;
 }

-#counter {
+.counter {
    font-size: 24px;
    text-align: center;
 }
--- a/index.html
+++ b/index.html
@ -1,25 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Roulette wheel</title>
    <script type="module" src="dist/bundle.js"></script>
-    <link rel="stylesheet" href="app.css">
-</head>
-<body>
-    <div id="menu">
-        <img src="static/right-arrow.png" alt="open-close-arrow" class="openCloseMenu">
-        <p id="counter">0/16</p>
-        <div id="newItem">
-            <label for="newItem">Item name</label>
-            <input name="newItem" minlength="1" maxlength="32">
-            <button id="newItemButton">Add</button>
-            <button id="removeAllItemsButton">Remove all</button>
-        </div>
+    <link rel="stylesheet" href="app.css" />
+  </head>
+  <body>
+    <div class="menu">
+      <div class="open-close-menu">
+      </div>
+      <div class="counter">
+      </div>
+      <div class="item-menu">
+        <label for="new-item">Item name</label>
+        <input name="new-item" minlength="1" maxlength="32">
+        <button class="new-item-button">Add</button>
+        <button class="remove-all-items-button">Remove all</button>
+      </div>
    </div>
-    <canvas></canvas>
-    <footer><div>Icons made by <a href="https://www.flaticon.com/authors/roundicons" title="Roundicons">Roundicons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div></footer>
-</body>
-</html>
+  </body>
+</html>
--- a/src/app.ts
+++ b/src/app.ts
@ -1,99 +1,202 @@
-import { ItemEl } from "./components/menu-item";
-import { ItemElList } from "./components/menu-item-list";
+// 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 canvas = document.querySelector("canvas")! as HTMLCanvasElement;
-const ctx = canvas.getContext("2d")!;
-const centreX = canvas.width / 2;
-const centreY = canvas.height / 2;
+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;
+HTMLUL

-ctx.beginPath();
-ctx.moveTo(centreX, centreY);
-ctx.stroke();
+const MIN_ITEMS = 0;
+const MAX_ITEMS = 16;

-console.log("Works!");
+const openCloseItem = new OpenCloseArrow();
+openCloseMenuEl.appendChild(openCloseItem.el);

-const maxItems = 16;
-const items: ItemElList = new ItemElList();
+const counterItem = new CounterItem(MIN_ITEMS, MAX_ITEMS);
+counterEl.appendChild(counterItem.el);

-const menuEl = document.getElementById("menu")! as HTMLDivElement;
-const counterEl = document.getElementById("counter")!;
-const itemNameInput = document.querySelector("input")! as HTMLInputElement;
-const newItemButtonEl = document.getElementById(
-  "newItemButton"
-)! as HTMLButtonElement;
-const removeAllItemsButtonEl = document.getElementById(
-  "removeAllItemsButton"
-)! as HTMLButtonElement;
+const counter = counterItem.getCounter;

-menuEl.appendChild(items.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];

-let counter = 0;

-const idsPool: number[] = [];
-initalizeIdsPool();
+configure();

-function addNewItem() {
-  if (itemNameInput.value.length > 0 && itemNameInput.value.length <= 32) {
-    if (counter < maxItems && idsPool.length > 0) {
-      const item = new ItemEl(
-        idsPool.pop()!,
-        itemNameInput.value,
-        `rgba(${nextColor}, ${bgOpacity})`
-      );
+function configure() {
+  initializeIdsPool(MAX_ITEMS);
+}

-      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}`;
-}
+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: ItemEl) {
-  return +item.el.id.slice(0, item.el.id.indexOf("-"));
-}
+// const itemNameInput = document.querySelector("input")! as HTMLInputElement;

-function initalizeIdsPool() {
-  idsPool.length = 0;
-  for (let i = 0; i < maxItems; i++) {
-    idsPool.push(i);
-  }
-}
+// const newItemButtonEl = document.getElementById(
+//   "newItemButton"
+// )! as HTMLButtonElement;

-newItemButtonEl.addEventListener("click", addNewItem);
-removeAllItemsButtonEl.addEventListener("click", removeAllItems);
+// 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);
--- a/src/components/counter-item.ts
+++ b/src/components/counter-item.ts
@ -0,0 +1,35 @@
+import { Counter } from "../model/counter";
+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
+            }
+        );
+    }
+}
--- a/src/components/menu-delete-item.ts
+++ b/src/components/menu-delete-item.ts
@ -1,13 +1,13 @@
 import { Component } from "./base-component";

-export class DeleteItemEl extends Component<HTMLImageElement>{
+export class ItemRemoval extends Component<HTMLImageElement>{

    constructor(id: number){
        const el = document.createElement('img');
        el.src = 'static/close.png';
        el.alt = 'delete';
-        el.className = 'item-delete'
-        el.id = `${id}-delete`;
+        el.className = `item-delete`;
+        el.id = `${id}-delete`
        super(el);
    }

--- a/src/components/menu-item-list.ts
+++ b/src/components/menu-item-list.ts
@ -1,40 +1,33 @@
 import { Component } from "./base-component";
-import { ItemEl } from "./menu-item";
+import { MenuItem } from "./menu-item";

-export class ItemElList extends Component<HTMLUListElement> {
-    private items: ItemEl[];
+export class MenuItemList extends Component<HTMLUListElement> {
+  private items: MenuItem[];

-    constructor(){
-        const UList = document.createElement('ul');
-        UList.className = 'item-list';
-        super(UList);
-        this.items = [];
-    }
+  constructor() {
+    const UList = document.createElement("ul");
+    UList.className = "item-list";
+    super(UList);
+    this.items = [];
+  }

-    get itemsLength() {
-        return this.items.length;
-    }
-    
-    addItem(item: ItemEl){
-        this.items.push(item);
-        this.el.appendChild(item.el);
-    }
+  get itemsLength() {
+    return this.items.length;
+  }

-    clear(){
-        this.removeChildren();
-        this.items = [];
-    }
+  addItem(item: MenuItem) {
+    this.items.push(item);
+    this.el.appendChild(item.el);
+  }

-    removeItem(item: ItemEl){
-        item.el.remove();
-        const indexToRemove = this.items.indexOf(item);
-        this.items.splice(indexToRemove, 1);
-    }
+  clear() {
+    this.removeChildren();
+    this.items = [];
+  }

-    findLastItem(){
-        if(this.items.length > 0){
-            return this.items[this.items.length - 1];
-        }
-        return null;
-    }
+  removeItem(item: MenuItem) {
+    item.el.remove();
+    const indexToRemove = this.items.indexOf(item);
+    this.items.splice(indexToRemove, 1);
+  }
 }
--- a/src/components/menu-item.ts
+++ b/src/components/menu-item.ts
@ -1,12 +1,12 @@
 import { Component } from "./base-component";
-import { DeleteItemEl } from "./menu-delete-item";
+import { ItemRemoval } from "./item-removal";

-export class ItemEl extends Component<HTMLLIElement> {
+export class MenuItem extends Component<HTMLLIElement> {

-    deleteItem: DeleteItemEl;
+    deleteItem: ItemRemoval;

    constructor(id: number, value: string, color: string){
-        const deleteItem = new DeleteItemEl(id);
+        const deleteItem = new ItemRemoval(id);
        const el = document.createElement('li');
        el.className = 'menu-item';
        el.id = `${id}-item`;
--- a/src/components/open-close-arrow.ts
+++ b/src/components/open-close-arrow.ts
@ -0,0 +1,12 @@
+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);
+    }
+}
--- a/src/model/counter.ts
+++ b/src/model/counter.ts
@ -0,0 +1,39 @@
+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;
+    }
+}
--- a/src/model/item.ts
+++ b/src/model/item.ts
@ -0,0 +1,11 @@
+export class Item {
+    id: number;
+    name: string;
+    color: string;
+
+    constructor(id: number, name: string, color: string){
+        this.id = id;
+        this.name = name;
+        this.color = color;
+    }
+}
--- a/src/utils/item-id-pool.ts
+++ b/src/utils/item-id-pool.ts
@ -0,0 +1,7 @@
+export const avaliableIds: number[] = [];
+
+export function initializeIdsPool(numberOfElements: number){
+    for(let i = 1; i <= numberOfElements; i++){
+        avaliableIds[i] = i;
+    }
+}
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@ -0,0 +1,2 @@
+export const avaliableRGBs = ["255, 0, 0", "0, 255, 0", "0, 0, 255"];
+
				`@ -0,0 +1,2 @@`
				`export const avaliableRGBs = ["255, 0, 0", "0, 255, 0", "0, 0, 255"];`