+
+ New Chat
+
+
+
+
+
+
+
+
+
+
+ ${cartElement.name}
`) + }); +}; diff --git a/Q2-Game/monopoly-game/dice/dice-1.png b/Q2-Game/monopoly-game/dice/dice-1.png new file mode 100644 index 0000000..f727878 Binary files /dev/null and b/Q2-Game/monopoly-game/dice/dice-1.png differ diff --git a/Q2-Game/monopoly-game/dice/dice-2.png b/Q2-Game/monopoly-game/dice/dice-2.png new file mode 100644 index 0000000..015c86e Binary files /dev/null and b/Q2-Game/monopoly-game/dice/dice-2.png differ diff --git a/Q2-Game/monopoly-game/dice/dice-3.png b/Q2-Game/monopoly-game/dice/dice-3.png new file mode 100644 index 0000000..b531aba Binary files /dev/null and b/Q2-Game/monopoly-game/dice/dice-3.png differ diff --git a/Q2-Game/monopoly-game/dice/dice-4.png b/Q2-Game/monopoly-game/dice/dice-4.png new file mode 100644 index 0000000..15bf09c Binary files /dev/null and b/Q2-Game/monopoly-game/dice/dice-4.png differ diff --git a/Q2-Game/monopoly-game/dice/dice-5.png b/Q2-Game/monopoly-game/dice/dice-5.png new file mode 100644 index 0000000..5adabdb Binary files /dev/null and b/Q2-Game/monopoly-game/dice/dice-5.png differ diff --git a/Q2-Game/monopoly-game/dice/dice-6.png b/Q2-Game/monopoly-game/dice/dice-6.png new file mode 100644 index 0000000..2cc7d7c Binary files /dev/null and b/Q2-Game/monopoly-game/dice/dice-6.png differ diff --git a/Q2-Game/monopoly-game/index.html b/Q2-Game/monopoly-game/index.html new file mode 100644 index 0000000..833e1b3 --- /dev/null +++ b/Q2-Game/monopoly-game/index.html @@ -0,0 +1,139 @@ + + + + + +
+
+
+
+
+
+ 
+
+
+
+
+
+
+ $10000
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ green gala
+
+ MGCL
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ gate no.1
+
+ guest house
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Q2-Game/monopoly-game/page.css b/Q2-Game/monopoly-game/page.css
new file mode 100644
index 0000000..7b178a8
--- /dev/null
+++ b/Q2-Game/monopoly-game/page.css
@@ -0,0 +1,120 @@
+html, body{
+ height: 100%;
+ margin: 0;
+}
+.page {
+ display: grid;
+ grid-template-columns: 250px 1fr 250px;
+
+
+}
+.player {
+ background-color: black;
+ align-items: stretch;
+ position: relative;
+}
+.board {
+ background-color: rgb(4, 110, 4);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+
+}
+.row{
+ display : grid ;
+ grid-template-columns: 140px repeat(6, 1fr) 140px;
+ height: 115px;
+
+}
+.asset {
+ background-color: white;
+ border: .5px solid black;
+ position: relative;
+
+
+}
+.corner {
+ background-color: #8d98a1;
+ position: relative;
+}
+.column {
+ display : flex ;
+ flex-direction: row ;
+ justify-content: space-between;
+ flex :1;
+
+}
+.column-element1 , .column-element2 {
+width: 140px;
+display: grid;
+ grid-template-rows: repeat(6, 1fr);
+
+
+}
+.dice-button {
+ background-color: white;
+ position:absolute;
+ height: 90px;
+ width: 90px;
+ z-index: 100;
+ padding: 0px;
+ border: 1px;
+ border-radius: 20px;
+ bottom: 20px;
+ left: 85px;
+
+}
+.dice-button img {
+ height: 90px;
+ width: 90px;
+position: relative;
+
+}
+.red {
+ height: 15px;
+ width: 15px;
+ background-color: red;
+ position: absolute;
+ z-index: 1000;
+ top: 10px;
+
+}
+.green {
+ height: 15px;
+ width: 15px;
+ background-color: rgb(0, 255, 0);
+ position: absolute;
+ z-index: 1000;
+ top: 25px;
+}
+.asset-info div {
+ width: 88px;
+ text-align: center;
+}
+.asset-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items : center;
+ width: 100%;
+ height: 100%;
+
+}
+.column-element1 .asset-info {
+transform: rotate(-90deg);
+
+
+
+
+}
+.column-element2 .asset-info {
+transform: rotate(90deg);
+
+
+}
+.color-bar {
+ z-index : 2000;
+ width : 20px;
+ height: 10px;
+}
\ No newline at end of file
diff --git a/Q2-Game/monopoly-game/page.js b/Q2-Game/monopoly-game/page.js
new file mode 100644
index 0000000..32b9709
--- /dev/null
+++ b/Q2-Game/monopoly-game/page.js
@@ -0,0 +1,341 @@
+
+let oldRed = 1;
+let oldGreen = 1;
+let dieFace = 0;
+let redMoney = 20000;
+let greenMoney = 20000;
+
+document.querySelector('.red-player .money').textContent = `$${redMoney}`;
+document.querySelector('.green-player .money').textContent = `$${greenMoney}`;
+function rollDie() {
+ return Math.floor(Math.random() * 6) + 1;
+}
+
+const diceButton1 = document.querySelector('.dice-1');
+const diceButton2 = document.querySelector('.dice-2');
+let isRed = true;
+let isGreen = true;
+let nextplay = true;
+function greenMOVE() {
+
+ const currentPosition = document.getElementById(`${oldGreen}`);
+ const greenElement = document.querySelector('.green');
+ if (greenElement) {
+ greenElement.remove();
+ }
+
+ dieFace = rollDie();
+ const newPosition = (oldGreen + dieFace) % 28;
+
+
+ const assetLand = document.getElementById(`${newPosition}`);
+
+
+ const diceImg = diceButton2.querySelector('img');
+
+ diceImg.src = `dice/dice-${dieFace}.png`;
+
+
+
+ if (assetLand) {
+ assetLand.innerHTML += '';
+ }
+
+ const isRedOwned = redcart.find(ir => ir.id === newPosition);
+
+ if (isRedOwned) {
+ offerSale(newPosition, 'green-player', 'red-player');
+ } else {
+ const isGreenOwned = greencart.find(ig => ig.id === newPosition);
+ if (isGreenOwned) {
+
+ } else {
+
+ buyORnot(newPosition, 'green-player');
+ }
+ }
+
+ oldGreen = newPosition;
+ isGreen = false
+ isRed = true
+}
+function redMOVE() {
+
+ const currentPosition = document.getElementById(`${oldRed}`);
+ const redElement = document.querySelector('.red');
+ if (redElement) {
+ redElement.remove();
+ }
+ dieFace = rollDie();
+ const newPosition = (oldRed + dieFace) % 28;
+ const assetLand = document.getElementById(`${newPosition}`);
+ const diceImg = diceButton1.querySelector('img');
+
+ diceImg.src = `dice/dice-${dieFace}.png`;
+
+ if (assetLand) {
+ assetLand.innerHTML += '';
+ }
+ const isGreenOwned = greencart.find(ig => ig.id === newPosition);
+
+ if (isGreenOwned) {
+ offerSale(newPosition, 'red-player', 'green-player');
+ } else {
+ const isRedOwned = redcart.find(ir => ir.id === newPosition);
+ if (isRedOwned) {
+
+ } else {
+
+ buyORnot(newPosition, 'red-player');
+ }
+ }
+
+
+ oldRed = newPosition;
+ isGreen = true;
+ isRed = false;
+
+}
+diceButton1.addEventListener('click', () => {
+ if (isRed && nextplay) redMOVE();
+});
+
+diceButton2.addEventListener('click', () => {
+ if (isGreen && nextplay) greenMOVE();
+});
+const redInput = document.getElementById('redp');
+const greenInput = document.getElementById('greenp');
+redInput.addEventListener('keydown', function (event) {
+ if (event.key === 'Enter') {
+ const playerName = document.querySelector('.redp');
+ playerName.textContent = redInput.value;
+ redInput.remove();
+
+ }
+});
+greenInput.addEventListener('keydown', function (event) {
+ if (event.key === 'Enter') {
+ const playerName = document.querySelector('.greenp');
+ playerName.textContent = greenInput.value;
+ greenInput.remove();
+
+ }
+});
+function buyORnot(newposition, playercolor) {
+ const parent = document.querySelector(`.${playercolor}`);
+ parent.insertAdjacentHTML('beforeend',
+ ``
+
+ );
+ nextplay = false;
+ const buydes = parent.querySelector('.buy-button');
+ const desButton = buydes.querySelectorAll('button');
+
+ desButton.forEach(btn => {
+ btn.addEventListener('click', () => {
+ buydes.remove();
+ nextplay = true;
+ });
+ });
+};
+function bought(newposition, playercolor) {
+ const partiasset = assetArray.find(element => element.id === parseInt(newposition));
+ if (!partiasset) return;
+ const parent = document.querySelector(`.${playercolor}`);
+ if (playercolor === 'red-player') {
+ if (redMoney - partiasset.price < 0) {
+ alert("insufficient money");
+
+ return;
+ }
+ redMoney -= partiasset.price;
+ document.querySelector('.red-player .money').textContent = `$${redMoney}`;
+ redcart.push(partiasset);
+ renderRedCart();
+
+ } else {
+ if (greenMoney - partiasset.price < 0) {
+ alert("insufficient money");
+ return;
+ }
+ greenMoney -= partiasset.price;
+ document.querySelector('.green-player .money').textContent = `$${greenMoney}`;
+ greencart.push(partiasset);
+ renderGreenCart();
+ };
+
+
+
+
+document.body.addEventListener('click', (event) => {
+ if (!event.target.matches('.sell')) return;
+
+ const sellButton = event.target;
+ const assetId = sellButton.dataset.assetId;
+
+
+ const cartContainer = sellButton.closest('.player');
+ const playerColor = cartContainer.classList.contains('red-player')
+ ? 'red-player'
+ : 'green-player';
+
+
+ const cart = playerColor === 'red-player' ? redcart : greencart;
+ const partiasset = cart.find(item => item.id === parseInt(assetId));
+
+ if (!partiasset) return;
+
+ if (playerColor === 'red-player') {
+ redMoney += partiasset.price;
+ document.querySelector('.red-player .money').textContent = `$${redMoney}`;
+ const index = cart.findIndex(item => item.id === partiasset.id);
+ if (index > -1) redcart.splice(index, 1);
+ } else {
+ greenMoney += partiasset.price;
+ document.querySelector('.green-player .money').textContent = `$${greenMoney}`;
+ const index = cart.findIndex(item => item.id === partiasset.id);
+ if (index > -1) greencart.splice(index, 1);
+ }
+
+
+ if (playerColor === 'red-player') renderRedCart();
+ else renderGreenCart();
+});
+
+}
+;
+function offerSale(newPosition, landingColor, ownerColor) {
+ let landingMoney;
+ let ownerMoney;
+ let asset;
+ if (ownerColor === 'red-player') {
+ asset = redcart.find(a => a.id === newPosition);
+ }
+ else {
+ asset = greencart.find(a => a.id === newPosition);
+ }
+
+ if (!asset) return;
+
+ const oparent = document.querySelector(`.${ownerColor}`);
+ const lparent = document.querySelector(`.${landingColor}`);
+ let selldes = null;
+ let buydes = null;
+
+
+ oparent.insertAdjacentHTML('beforeend',
+ ``
+ );
+ selldes = oparent.querySelector('.sell-button');
+
+ selldes.querySelector('.sell-yes').addEventListener('click', sellrequest);
+ selldes.querySelector('.sell-no').addEventListener('click', buyNo);
+
+ function sellrequest() {
+
+ lparent.insertAdjacentHTML('beforeend',
+ ``
+ );
+ buydes = lparent.querySelector('.buy-button');
+
+
+ buydes.querySelector('.buy-yes').addEventListener('click', sellYes);
+ buydes.querySelector('.buy-no').addEventListener('click', sellNo);
+ };
+
+ function sellYes() {
+
+ const salePrice = asset.price * 1.1;
+
+
+ if (landingColor === 'red-player') {
+ redMoney -= salePrice;
+ greenMoney += salePrice;
+ } else {
+ greenMoney -= salePrice;
+ redMoney += salePrice;
+ }
+
+ let sellerCart;
+ let buyerCart;
+
+
+ if (ownerColor === 'red-player') {
+ sellerCart = redcart;
+ } else {
+ sellerCart = greencart;
+ }
+
+
+ if (landingColor === 'red-player') {
+ buyerCart = redcart;
+ } else {
+ buyerCart = greencart;
+ }
+
+
+ const sellerIndex = sellerCart.findIndex(item => item.id === asset.id);
+ if (sellerIndex > -1) sellerCart.splice(sellerIndex, 1);
+
+
+ buyerCart.push({ ...asset});
+
+
+ document.querySelector('.red-player .money').textContent = `$${redMoney}`;
+ document.querySelector('.green-player .money').textContent = `$${greenMoney}`;
+ renderRedCart();
+ renderGreenCart();
+
+
+ selldes.remove();
+ if (buydes) buydes.remove();
+ nextplay = true;
+ }
+
+ function sellNo() {
+
+ applyTax();
+ if (buydes) buydes.remove();
+ nextplay = true;
+ }
+
+ function buyNo() {
+ applyTax();
+ if (selldes) selldes.remove();
+ nextplay = true;
+ }
+
+ function applyTax() {
+ const colorGroup = asset.color;
+const totalnum = assetArray.filter(a => a.color === colorGroup).length;
+const ownerCart = (ownerColor==='red-player') ? redcart : greencart;
+const ownednum = ownerCart.filter(a => a.color === colorGroup).length;
+
+const taxpercent = (ownednum === totalnum) ? 0.20 : 0.05;
+const tax = Math.floor(asset.price * taxpercent);
+ if (landingColor === 'red-player') {
+ redMoney -= tax;
+ greenMoney += tax;
+ } else {
+ greenMoney -= tax;
+ redMoney += tax;
+ }
+ document.querySelector('.red-player .money').textContent = `$${redMoney}`;
+ document.querySelector('.green-player .money').textContent = `$${greenMoney}`;
+ }
+
+ nextplay = false;
+}
+
diff --git a/Q2-Game/monopoly-game/player-info.css b/Q2-Game/monopoly-game/player-info.css
new file mode 100644
index 0000000..76d8c20
--- /dev/null
+++ b/Q2-Game/monopoly-game/player-info.css
@@ -0,0 +1,85 @@
+.player-info {
+ width: 100%;
+ height: 100px;
+ display: flex;
+z-index: 100;
+margin-top:12px ;
+
+color: rgb(131, 255, 127);
+}
+.player p {
+ color: white;
+}
+.pfp img {
+ height: 80px;
+}
+.redp {
+ color: white;
+ font-size: 20px;
+
+}
+#redp , #greenp {
+ width: 100%
+}
+.info {
+ padding-left: 10px;
+ width: 120px;
+ object-fit: contain;
+}
+.money {
+ margin-top: 10px;
+}
+.greenp {
+ color: white;
+ font-size: 20px;
+}
+.buy-button {
+ position: absolute;
+ bottom :150px;
+
+}
+.buy-button p {
+ font-size: 20px;
+ color: wheat;
+ margin-left: 50px;
+}
+.buy-button button {
+ margin: 0px 30px 0px 30px;
+height: 40px;
+width: 60px;
+}
+.owned {
+ width: 100%;
+}
+.asset-element {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+
+ align-items: center;
+ font-size: 17px;
+}
+.asset-element button {
+ height: 30px;
+ color: white;
+ background-color: rgb(188, 11, 11);
+ margin : 15px;
+}
+.asset-element p {
+ padding-left: 15px;
+}
+.sell-button {
+ position: absolute;
+ bottom :150px;
+
+}
+.sell-button p {
+ font-size: 20px;
+ color: wheat;
+ margin-left: 50px;
+}
+.sell-button button {
+ margin: 0px 30px 0px 30px;
+height: 40px;
+width: 60px;
+}
\ No newline at end of file
diff --git a/Q2-Game/monopoly-game/player/pfp.webp b/Q2-Game/monopoly-game/player/pfp.webp
new file mode 100644
index 0000000..8986e52
Binary files /dev/null and b/Q2-Game/monopoly-game/player/pfp.webp differ
diff --git a/Q2-Game/monopoly-game/player/playericon.jpg b/Q2-Game/monopoly-game/player/playericon.jpg
new file mode 100644
index 0000000..db14b7c
Binary files /dev/null and b/Q2-Game/monopoly-game/player/playericon.jpg differ
diff --git a/Q2-Game/monopoly-game/player/playerimage.png b/Q2-Game/monopoly-game/player/playerimage.png
new file mode 100644
index 0000000..4e312dd
Binary files /dev/null and b/Q2-Game/monopoly-game/player/playerimage.png differ
diff --git a/snappy site/.vscode/settings.json b/snappy site/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/snappy site/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/snappy site/index.html b/snappy site/index.html
new file mode 100644
index 0000000..0763733
--- /dev/null
+++ b/snappy site/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $10000
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/snappy site/script.js b/snappy site/script.js
new file mode 100644
index 0000000..f6b6735
--- /dev/null
+++ b/snappy site/script.js
@@ -0,0 +1,131 @@
+const API_URL = 'http://43.205.110.71:8000';
+
+const categoryEl = document.getElementById('category-list');
+const productGridEl = document.getElementById('product-grid');
+const cache = { categories: null, items: {} };
+
+
+let currentPage = 1;
+const itemsPerPage = 16;
+let currentItems = [];
+
+
+const prevBtn = document.getElementById('prev-btn');
+const nextBtn = document.getElementById('next-btn');
+const pageInfo = document.getElementById('page-info');
+
+
+prevBtn.addEventListener('click', () => {
+ if (currentPage > 1) {
+ currentPage--;
+ displayPage();
+ }
+});
+nextBtn.addEventListener('click', () => {
+ const totalPages = Math.ceil(currentItems.length / itemsPerPage);
+ if (currentPage < totalPages) {
+ currentPage++;
+ displayPage();
+ }
+});
+function displayPage() {
+ const totalPages = Math.ceil(currentItems.length / itemsPerPage);
+ const start = (currentPage - 1) * itemsPerPage;
+ const end = currentPage * itemsPerPage;
+ const pageItems = currentItems.slice(start, end);
+
+ renderItems(pageItems);
+
+ pageInfo.textContent = `${currentPage} `;
+ prevBtn.disabled = (currentPage === 1);
+ nextBtn.disabled = (currentPage === totalPages);
+}
+
+
+async function fetchItems(categoryId) {
+ if (cache.items[categoryId]) return cache.items[categoryId];
+ try {
+ const res = await fetch(`${API_URL}/categories/${categoryId}/items`);
+ const data = await res.json();
+ cache.items[categoryId] = Array.isArray(data) ? data : (data.items || []);
+ return cache.items[categoryId];
+ } catch (err) {
+ console.error(`Error fetching items ${categoryId}:`, err);
+ return [];
+ }
+};
+async function fetchCategories() {
+ if (cache.categories) return cache.categories;
+ try {
+ const res = await fetch(`${API_URL}/categories`);
+ const data = await res.json();
+ cache.categories = data;
+ return data;
+ } catch (err) {
+ console.error('Error fetching categories:', err);
+ return [];
+ }
+};
+function renderCategories(categories) {
+ categoryEl.innerHTML = '';
+ categories.forEach(element => {
+ let categoryId, name;
+ for (const key in element) {
+ if (typeof element[key] === 'string') {
+ categoryId = element[key];
+ name = element[key];
+ break;
+ }
+ }
+ const btn = document.createElement('button');
+ btn.textContent = name;
+ btn.addEventListener('click', () => loadCategoryItems(categoryId));
+ categoryEl.appendChild(btn);
+ });
+}
+function renderItems(items) {
+ productGridEl.innerHTML = '';
+ if (!Array.isArray(items) || items.length === 0) {
+ productGridEl.innerHTML = 'Products
+
+
+ Page 1 of 1
+
+
+
+
+
+
+
+ No items found in this category.
'; + return; + } + items.forEach(item => { + const card = document.createElement('div'); + card.className = 'product-card'; + const img = document.createElement('img'); + img.src = `https://picsum.photos/seed/${item.id || Math.random()}/200`; + const title = document.createElement('h3'); + title.textContent = item.name || 'Unnamed'; + const price = document.createElement('p'); + price.className = 'price'; + const numericPrice = Number(item.price); + price.textContent = `₹${numericPrice.toFixed(2)}`; + card.append(img, title); + if (price.textContent) { + card.appendChild(price); + } + productGridEl.appendChild(card); + }); +}; +async function loadCategoryItems(categoryId) { + const items = await fetchItems(categoryId); + currentItems = items; + currentPage = 1; + displayPage(); +}; +async function init() { + let categories = await fetchCategories(); + renderCategories(categories); + let firstel = categories[0]; + let first; + for (const key in firstel) { + if (typeof firstel[key] === 'string') { + first = firstel[key]; + break; + } + } + if (first) { + loadCategoryItems(first); + } +} +document.addEventListener('DOMContentLoaded', init); diff --git a/snappy site/style.css b/snappy site/style.css new file mode 100644 index 0000000..9ad50f2 --- /dev/null +++ b/snappy site/style.css @@ -0,0 +1,101 @@ + +body, html { + font-family: Arial, sans-serif; +} + + +.container { + display: flex; + min-height: 100vh; +} + + +#sidebar { + flex: 0 0 200px; + background-color: #f4f4f4; + padding: 1rem; +} + + +#category-list button { + display: block; + width: 100%; + padding: 1rem; + margin-bottom: 0.5rem; + border: 1px solid #ccc; + border-radius: 4px; + cursor: pointer; + font-size: 1rem; +} + +#category-list button:hover { + background-color: #e0e0e0; +} + + +#main-content { + flex: 1; + padding: 1rem; + +} + +#main-content h1 { + margin-top: 0; +} + +#product-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 1rem; +} + + +.product-card { + border: 1px solid #ccc; + border-radius: 4px; + padding: 1rem; + text-align: center; + background-color: #ffffff; + +} + +.product-card:hover { + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.product-card img { + max-width: 100%; + height: auto; +} + +.product-card h3 { + margin: 0.5rem 0; + font-size: 1rem; + color: #333; +} + +.product-card p.price { + margin: 0.5rem 0; + font-weight: bold; + color: #0e8f15; +} + +@media (max-width: 600px) { + .container { + flex-direction: column; + } + #sidebar { + width: 100%; + } +} + + +#pagination { + text-align: center; + margin-bottom: 1rem; +} +#pagination button { + margin: 0 0.5rem; + padding: 0.5rem 1rem; + cursor: pointer; +}