kunjgit · kunjgit · Jul 8, 2024 · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024
diff --git a/Games/Makeover_Game/README.md b/Games/Makeover_Game/README.md
@@ -0,0 +1,26 @@
+# **Makeover Game** 
+---
+
+## **Description 📃**
+<!-- add your game description here  -->
+The Makeover Game is a fun and interactive browser-based game where players can design and customize outfits for a virtual character. Players can mix and match different clothing items, accessories, and hairstyles to create their perfect look.
+
+## **Functionalities 🎮**
+<!-- add functionalities over here -->
+1. Choose from a variety of clothing items including tops, bottoms, dresses, and shoes.
+2. Customize hairstyles and hair colors.
+3. Save and download your customized outfit.
+4. Share your design with friends on social media.
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+1. Start the Game: Open the game in your browser and wait for it to load.
+2. Select an Item: Click on the clothing categories to browse through available items.
+3. Mix and Match: You can change the brightness, hue and saturation.
+4. Customize Further: Use the options to change the character's hairstyle and skin colour.
+5. Save Your Design: Once you're happy with the outfit, click the "Capture" button to save an image of your design.
+6. Download and Share: Download the image to your device and share it with your friends.
+
+## **Screenshots 📸**
+![image](https://github.com/abckhush/GameZone/assets/127378920/b155d557-eff1-4731-b3ac-1e89080be0cf)
+![image](https://github.com/abckhush/GameZone/assets/127378920/b9ec77b4-1eb8-451e-b390-c626cd6b93d5)
diff --git a/Games/Makeover_Game/img/base/base_1.png b/Games/Makeover_Game/img/base/base_1.png
diff --git a/Games/Makeover_Game/img/base/base_10.png b/Games/Makeover_Game/img/base/base_10.png
diff --git a/Games/Makeover_Game/img/base/base_2.png b/Games/Makeover_Game/img/base/base_2.png
diff --git a/Games/Makeover_Game/img/base/base_3.png b/Games/Makeover_Game/img/base/base_3.png
diff --git a/Games/Makeover_Game/img/base/base_4.png b/Games/Makeover_Game/img/base/base_4.png
diff --git a/Games/Makeover_Game/img/base/base_5.png b/Games/Makeover_Game/img/base/base_5.png
diff --git a/Games/Makeover_Game/img/base/base_6.png b/Games/Makeover_Game/img/base/base_6.png
diff --git a/Games/Makeover_Game/img/base/base_7.png b/Games/Makeover_Game/img/base/base_7.png
diff --git a/Games/Makeover_Game/img/base/base_8.png b/Games/Makeover_Game/img/base/base_8.png
diff --git a/Games/Makeover_Game/img/base/base_9.png b/Games/Makeover_Game/img/base/base_9.png
diff --git a/Games/Makeover_Game/img/bg.png b/Games/Makeover_Game/img/bg.png
diff --git a/Games/Makeover_Game/img/bottom/bottom_1.png b/Games/Makeover_Game/img/bottom/bottom_1.png
diff --git a/Games/Makeover_Game/img/bottom/bottom_10.png b/Games/Makeover_Game/img/bottom/bottom_10.png
diff --git a/Games/Makeover_Game/img/bottom/bottom_2.png b/Games/Makeover_Game/img/bottom/bottom_2.png
diff --git a/Games/Makeover_Game/img/bottom/bottom_3.png b/Games/Makeover_Game/img/bottom/bottom_3.png
diff --git a/Games/Makeover_Game/img/bottom/bottom_4.png b/Games/Makeover_Game/img/bottom/bottom_4.png
diff --git a/Games/Makeover_Game/img/bottom/bottom_5.png b/Games/Makeover_Game/img/bottom/bottom_5.png
diff --git a/Games/Makeover_Game/img/bottom/bottom_6.png b/Games/Makeover_Game/img/bottom/bottom_6.png
diff --git a/Games/Makeover_Game/img/bottom/bottom_7.png b/Games/Makeover_Game/img/bottom/bottom_7.png
diff --git a/Games/Makeover_Game/img/bottom/bottom_8.png b/Games/Makeover_Game/img/bottom/bottom_8.png
diff --git a/Games/Makeover_Game/img/bottom/bottom_9.png b/Games/Makeover_Game/img/bottom/bottom_9.png
diff --git a/Games/Makeover_Game/img/camera-icon.png b/Games/Makeover_Game/img/camera-icon.png
diff --git a/Games/Makeover_Game/img/hair/hair_1.png b/Games/Makeover_Game/img/hair/hair_1.png
diff --git a/Games/Makeover_Game/img/hair/hair_10.png b/Games/Makeover_Game/img/hair/hair_10.png
diff --git a/Games/Makeover_Game/img/hair/hair_2.png b/Games/Makeover_Game/img/hair/hair_2.png
diff --git a/Games/Makeover_Game/img/hair/hair_3.png b/Games/Makeover_Game/img/hair/hair_3.png
diff --git a/Games/Makeover_Game/img/hair/hair_4.png b/Games/Makeover_Game/img/hair/hair_4.png
diff --git a/Games/Makeover_Game/img/hair/hair_5.png b/Games/Makeover_Game/img/hair/hair_5.png
diff --git a/Games/Makeover_Game/img/hair/hair_6.png b/Games/Makeover_Game/img/hair/hair_6.png
diff --git a/Games/Makeover_Game/img/hair/hair_7.png b/Games/Makeover_Game/img/hair/hair_7.png
diff --git a/Games/Makeover_Game/img/hair/hair_8.png b/Games/Makeover_Game/img/hair/hair_8.png
diff --git a/Games/Makeover_Game/img/hair/hair_9.png b/Games/Makeover_Game/img/hair/hair_9.png
diff --git a/Games/Makeover_Game/img/shoes/shoes_1.png b/Games/Makeover_Game/img/shoes/shoes_1.png
diff --git a/Games/Makeover_Game/img/shoes/shoes_2.png b/Games/Makeover_Game/img/shoes/shoes_2.png
diff --git a/Games/Makeover_Game/img/shoes/shoes_3.png b/Games/Makeover_Game/img/shoes/shoes_3.png
diff --git a/Games/Makeover_Game/img/shoes/shoes_4.png b/Games/Makeover_Game/img/shoes/shoes_4.png
diff --git a/Games/Makeover_Game/img/shoes/shoes_5.png b/Games/Makeover_Game/img/shoes/shoes_5.png
diff --git a/Games/Makeover_Game/img/test/next-btn.png b/Games/Makeover_Game/img/test/next-btn.png
diff --git a/Games/Makeover_Game/img/test/next-btn.psd b/Games/Makeover_Game/img/test/next-btn.psd
diff --git a/Games/Makeover_Game/img/test/prev-btn.png b/Games/Makeover_Game/img/test/prev-btn.png
diff --git a/Games/Makeover_Game/img/test/test-layout-bg.png b/Games/Makeover_Game/img/test/test-layout-bg.png
diff --git a/Games/Makeover_Game/img/test/test-layout.psd b/Games/Makeover_Game/img/test/test-layout.psd
diff --git a/Games/Makeover_Game/img/top/top_1.png b/Games/Makeover_Game/img/top/top_1.png
diff --git a/Games/Makeover_Game/img/top/top_10.png b/Games/Makeover_Game/img/top/top_10.png
diff --git a/Games/Makeover_Game/img/top/top_2.png b/Games/Makeover_Game/img/top/top_2.png
diff --git a/Games/Makeover_Game/img/top/top_3.png b/Games/Makeover_Game/img/top/top_3.png
diff --git a/Games/Makeover_Game/img/top/top_4.png b/Games/Makeover_Game/img/top/top_4.png
diff --git a/Games/Makeover_Game/img/top/top_5.png b/Games/Makeover_Game/img/top/top_5.png
diff --git a/Games/Makeover_Game/img/top/top_6.png b/Games/Makeover_Game/img/top/top_6.png
diff --git a/Games/Makeover_Game/img/top/top_7.png b/Games/Makeover_Game/img/top/top_7.png
diff --git a/Games/Makeover_Game/img/top/top_8.png b/Games/Makeover_Game/img/top/top_8.png
diff --git a/Games/Makeover_Game/img/top/top_9.png b/Games/Makeover_Game/img/top/top_9.png
diff --git a/Games/Makeover_Game/index.html b/Games/Makeover_Game/index.html
@@ -0,0 +1,179 @@
+<!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, minimum-scale=1.0"
+		/>
+		<link href="styles.css" rel="stylesheet" />
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
+		<title>Dress Up</title>
+	</head>
+
+	<body>
+		<main class="game-container">
+			<div id="game-bg">
+				<div id="base"></div>
+				<div id="hair"></div>
+				<div id="top"></div>
+				<div id="bottom"></div>
+				<div id="shoes"></div>
+			</div>
+			<form>
+				<div class="color-section">
+					<label for="hue">Hue Change: </label>
+					<input
+						type="range"
+						value="0"
+						id="hue"
+						min="0"
+						max="360"
+					/>
+					<label for="saturate">Saturation Change: </label>
+					<input
+						type="range"
+						value="100"
+						id="saturate"
+						min="0"
+						max="100"
+						/>
+						<label for="brightness">Brightness Change: </label>
+					<input
+						type="range"
+						value="100"
+						id="brightness"
+						min="0"
+						max="200"
+						/>
+					</div>
+					<div id="warning">
+						<p class="text">
+							No item type selected to change filters of! Select
+							circle below.
+						</p>
+					</div>
+					<!-- BASE -->
+					<input
+						type="button"
+						value="base"
+						id="next-base"
+						onclick="itemSelector(this)"
+					/>
+					<input
+						type="radio"
+						value="base"
+						id="base-color"
+						name="item-color"
+						onchange="itemTypetoColor(this)"
+					/>
+					<input
+						type="button"
+						value="base"
+						id="prev-base"
+						onclick="itemSelector(this)"
+					/>
+					<!-- HAIR -->
+					<input
+					type="button"
+					value="Hair"
+					id="next-hair"
+					onclick="itemSelector(this)"
+					/>
+				<input
+					type="radio"
+					value="hair"
+					id="hair-color"
+					name="item-color"
+					onchange="itemTypetoColor(this)"
+				/>
+				<input
+					type="button"
+					value="Hair"
+					id="prev-hair"
+					onclick="itemSelector(this)"
+				/>
+				<!-- TOP -->
+				<input
+					type="button"
+					value="Top"
+					id="next-top"
+					onclick="itemSelector(this)"
+				/>
+				<input
+					type="radio"
+					value="top"
+					id="top-color"
+					name="item-color"
+					onchange="itemTypetoColor(this)"
+				/>
+				<input
+					type="button"
+					value="Top"
+					id="prev-top"
+					onclick="itemSelector(this)"
+				/>
+				<!-- BOTTOM -->
+				<input
+					type="button"
+					value="Bottom"
+					id="next-bottom"
+					onclick="itemSelector(this)"
+				/>
+				<input
+					type="radio"
+					value="bottom"
+					id="bottom-color"
+					name="item-color"
+					onchange="itemTypetoColor(this)"
+				/>
+				<input
+					type="button"
+					value="Bottom"
+					id="prev-bottom"
+					onclick="itemSelector(this)"
+				/>
+				<!-- SHOE -->
+				<input
+					type="button"
+					value="Shoe"
+					id="next-shoe"
+					onclick="itemSelector(this)"
+				/>
+				<input
+					type="radio"
+					value="shoes"
+					id="shoes-color"
+					name="item-color"
+					onchange="itemTypetoColor(this)"
+				/>
+				<input
+					type="button"
+					value="Shoes"
+					id="prev-shoe"
+					onclick="itemSelector(this)"
+				/>
+			</form>
+			<button id="capture-btn">
+				<img src="img/camera-icon.png" alt="Capture" />
+			</button>
+		</main>
+
+		<footer>
+			<p>
+				Made by 
+				<a
+					href="https://github.com/abckhush"
+					>Khushi Kalra</a
+				>
+				|
+				<a
+					href="https://www.etsy.com/shop/AshariaArts"
+					>Artist: AshariaArts</a
+				>
+			</p>
+		</footer>
+		<script src="script.js"></script>
+	</body>
+</html>