Initial commit of Kanban board, testing to see if it so far works

zkfazal · Apr 19, 2024 · e5efff8 · e5efff8
1 parent 8c542aa
commit e5efff8
Show file tree

Hide file tree

Showing 11 changed files with 269 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -47,9 +47,11 @@ The project structure is as follows:
 
 A Kanban Board listing all the To-Do tasks is here. Note that this is for my convenience, so that I can actually plan this out before diving in without a plan.
 
+To access the Kanban board, simply go [here](kanban/index.html)
+
 ## Accessing the game:
 
-To access the game, simply go [here](https://zkfazal.github.io/phaser-games/)
+To access the game, simply go [here](index.html)
 
 ## Code and Other Stuff That Looks Useful
 

diff --git a/public/bundle.min.js b/public/bundle.min.js
@@ -89360,7 +89360,7 @@ function isCollidingObject(obj) {\r
       this.selectButton(index);
     }
     confirmSelection() {
-      console.log("uwu");
+      console.log("confirmed selection");
       this.scene.start("Game");
     }
     update(time, delta) {

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/kanban/css/main.css b/public/kanban/css/main.css
@@ -0,0 +1,59 @@
+.kanban {
+    display: flex;
+    padding: 30 px;
+    width: 750px;
+    background: #009578;
+    border-radius: 5px;
+
+}
+
+.kanban * {
+    font-family: sans-serif;
+}
+
+.kanban__column {
+    flex: 1; /* ensures an equal column width*/
+}
+
+.kanban__column:not(:last-child) {
+    margin-right: 30px; /* give space between every column*/
+}
+
+.kanban__column-title {
+    margin-bottom: 20px;
+    font-size: 30px;
+    color: white
+    user-select none; /* prevent accidental highlights*/
+}
+
+/* stylize the items themselves */
+.kanban__item-input {
+    padding: 10px 15px; /* padding between each item in a column*/
+    box-sizing: border-box; /* prevent an item from going over its bounds */
+    background: white;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+/* this changes the background and height of drop zones to
+let the user know they can drop an item here */
+.kanban__dropzone {
+    height: 10px;
+    transition: background 0.15s, height 0.15s;
+}
+
+.kanban__dropzone--active {
+    height: 20px;
+    background: rgba(0,0,0,0.25);
+}
+
+.kanban__add-item {
+    width: 100%;
+    padding: 10px 0;
+    font-size: 16px;
+    color: white;
+    background: rgba(0,0,0,0.1);
+    border: none; /* gets rid of existing border */
+    border-radius: 5px;
+    cursor: pointer;
+}
diff --git a/public/kanban/index.html b/public/kanban/index.html
@@ -0,0 +1,24 @@
+<!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">
+    <title>Kanban Board</title>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <div class="kanban">
+        <!-- <div class="kanban__column">
+            <div class="kanban__column-title">Not started</div>
+            <div class="kanban__items">
+                <div contenteditable class="kanban__item-input">Wash the dishes</div>
+                <div class="kanban__dropzone"></div>
+            </div>
+            <button class="kanban__add-item" type="button">+ Add</button>
+
+        </div> -->
+    </div>
+    <script src="js/main.js" type="module"></script>
+</body>
+</html>
diff --git a/public/kanban/js/api/KanbanAPI.js b/public/kanban/js/api/KanbanAPI.js
@@ -0,0 +1,119 @@
+export default class KanbanAPI {
+    /* gets all items from a particular column */
+    static getItems(columnId) {
+        const column = read().find(column => column.id == columnId);
+
+        if(!column) {
+            return [];
+        }
+
+        return column.items;
+    }
+
+    /* inserts an item */
+    static insertItem(columnId, content) {
+        const data = read();
+        const column = data.find(column => column.id == columnId);
+        const item = {
+            id: Math.floor(Math.random() * 1000000),
+            content
+        };
+
+        // Now insert our new item
+        if(!column) {
+            throw new Error("Column does not exist");
+        }
+        column.items.push(item);
+
+        // Save the data. Modifying column also modifies data since column is a part of data
+        save(data);
+
+        return item;
+    }
+
+    // Where props contains:
+    // columnId, the column number to move the item to
+    // position, where in the column the item gets moved to (position 0 means the first item in the column)
+    // content, the updated content of the item
+    static updateItem(itemId, newProps) {
+        // grab the data from the local storage
+        const data = read();
+
+        // loop through each column to find the item to update based on the item's ID.
+        // Return the item and the column it was found in
+        const [item, currentColumn] = (() => {
+            for (const column of data) {
+                const item = column.items.find(item => item.id = itemId);
+
+                if(item) {
+                    return [item, column];
+                }
+            }
+        })();
+
+        if(!item) {
+            throw new Error("Item not found")
+        }
+
+        item.content = newProps.content === undefined ? item.content : newProps.content;
+
+        // Update column and position
+        if (newProps.columnId !== undefined
+            && newProps.position !== undefined) {
+
+            const targetColumn = data.find(column => column.id == newProps.columnId);
+
+            if(!targetColumn) {
+                throw new Error("Target column not found.")
+            }
+
+            // Delete the item from its current column
+            currentColumn.items.splice(currentColumn.items.indexOf(item), 1)
+
+            // Then move the item into its new column and position:
+            targetColumn.items.splice(newProps.position, 0, item);
+        }
+
+        save(data);
+    }
+
+    static deleteItem(itemId) {
+        const data = read();
+        for(const column of data) {
+            const item = column.items.find(item => item.id == itemId);
+
+            if(item) {
+                column.items.splice(column.items.indexOf(item), 1);
+            }
+        }
+
+        save(data);
+    }
+}
+
+function read() {
+    const json = localStorage.getItem("kanban-data")
+
+    if(!json) { // first time user is using kanban board
+        return [
+            {
+                id:1,
+                items: []
+            },
+            {
+                id:2,
+                items: []
+            },
+            {
+                id:3,
+                items: []
+            },
+        ];
+    }
+
+    return JSON.parse(json);
+}
+
+function save(data) {
+    localStorage.setItem("kanban-data", JSON.stringify(data))
+}
diff --git a/public/kanban/js/main.js b/public/kanban/js/main.js
@@ -0,0 +1,6 @@
+import KanbanAPI from "./api/KanbanAPI.js"
+import Kanban from "./view/Kanban.js"
+
+new Kanban(
+    document.querySelector(".kanban")
+);
diff --git a/public/kanban/js/view/Column.js b/public/kanban/js/view/Column.js
@@ -0,0 +1,24 @@
+export default class Column {
+    constructor(id, title) {
+        this.elements = {};
+        this.elements.root = Column.createRoot();
+        this.elements.title = this.elements.root.querySelector(".kanban__column-title");
+        this.elements.item = this.elements.root.querySelector(".kanban__column-items");
+        this.elements.addItem = this.elements.root.querySelector(".kanban__add-item");
+    }
+
+    // Return an HTML element as an object containting the basic structure for a column
+    static createRoot() {
+        const range = document.createRange();
+
+        range.selectNode(document.body);
+
+        return range.createContextualFragment(`
+            <div class="kanban__column">
+                <div class="kanban__column-title"></div>
+                <div class="kanban__column-items"></div>
+                <button class="kanban__add-item" type="button">+ Add</button>
+            </div>
+        `).children[0];
+    }
+}
diff --git a/public/kanban/js/view/Kanban.js b/public/kanban/js/view/Kanban.js
@@ -0,0 +1,32 @@
+import Column from "./Column.js";
+
+export default class Kanban {
+    // root refers to the div with class of kanban in index.html
+    constructor(root) {
+        this.root = root;
+
+        Kanban.columns().forEach(column => {
+            // Create an instance of column class
+            const columnView = new Column(column.id, column.title);
+
+            this.root.appendChild(columnView.elements.root);
+        });
+    }
+
+    static columns() {
+        return [
+            {
+                id:1,
+                title: "Not Started"
+            },
+            {
+                id:2,
+                title: "In Progress"
+            },
+            {
+                id:3,
+                title: "Completed"
+            }
+        ];
+    }
+}
diff --git a/public/old_favicon.png b/public/old_favicon.png
diff --git a/src/scenes/MainMenu.ts b/src/scenes/MainMenu.ts
@@ -118,7 +118,7 @@ export class MainMenu extends Scene
 
     confirmSelection()
     {
-        console.log('uwu')
+        console.log('confirmed selection')
         this.scene.start('Game');
     }