Add files via upload

stam4tia · Mar 12, 2024 · c6a0783 · c6a0783
commit c6a0783
Show file tree

Hide file tree

Showing 43 changed files with 251 additions and 0 deletions.
diff --git a/background.png b/background.png
diff --git a/beanie.png b/beanie.png
diff --git a/black_hat.png b/black_hat.png
diff --git a/blue_eyes.png b/blue_eyes.png
diff --git a/blush.png b/blush.png
diff --git a/bow.png b/bow.png
diff --git a/bow_dress.png b/bow_dress.png
diff --git a/brown_boots.png b/brown_boots.png
diff --git a/buttons.PNG b/buttons.PNG
diff --git a/cat_dress.png b/cat_dress.png
diff --git a/cat_dressV1.png b/cat_dressV1.png
diff --git a/clothes_select.png b/clothes_select.png
diff --git a/clothes_selectV3.png b/clothes_selectV3.png
diff --git a/clown_boots.png b/clown_boots.png
diff --git a/clown_dress.png b/clown_dress.png
diff --git a/clown_makeup.png b/clown_makeup.png
diff --git a/eyes_closed.png b/eyes_closed.png
diff --git a/face_select.png b/face_select.png
diff --git a/finish.png b/finish.png
diff --git a/finishV4.png b/finishV4.png
diff --git a/flower_dress.png b/flower_dress.png
diff --git a/flower_hat.png b/flower_hat.png
diff --git a/goth_boots.png b/goth_boots.png
diff --git a/goth_dress.png b/goth_dress.png
diff --git a/hat_select.png b/hat_select.png
diff --git a/heart_boots.png b/heart_boots.png
diff --git a/index.html b/index.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dress Up Kiki</title>
+    <style>
+            body {
+            position: center;
+            margin: 50px;
+            padding: 0;
+            justify-content: center;
+            align-items: center;
+            background-color:#bdc3ff; /* Optional: Set background color */
+            transform: scale(0.4); /* Zoom out by % */
+
+        }
+        #container {
+            position: relative;
+
+
+        }
+
+        #avatar, #background, #start, #clothes-select, #buttons, #finish {
+            position: absolute;
+
+        }
+
+        .dress {
+            position: absolute;
+
+        }
+    </style>
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
+
+
+
+</head>
+<body> 
+    <div id="container">
+
+    <!-- Background image -->
+    <img id="background" src="background.png" alt="Background">
+
+    <!-- Kiki avatar -->
+    <div id="avatarContainer">
+    <img id="avatar" src="kiki.png" alt="Avatar">
+    </div>
+
+    <!-- Start image -->
+    <img id="start" src="start.gif" alt="Start Screen" usemap="#start-map">
+
+    <!-- Define an image map for clickable areas -->
+    <map name="start-map">
+        <!-- Define clickable area for starting the game -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="loadClothes()" coords="810,797,1279,979" shape="rect">
+    </map>
+
+
+    <!-- Clothes selection area -->
+    <img id="clothes-select" src="clothes_select.png" alt="Clothes Select" usemap="#clothes-select-map" style="display: none;">
+    <map name="clothes-select-map">
+
+
+
+        <!-- Finish Screen -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="loadFinishScreen()" coords="12,1287,237,1365" shape="rect">
+
+
+        <!-- Strawberry hat -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('strawberry_hat.png')" coords="875,101,947,206" shape="rect">
+        <!-- Flower hat -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('flower_hat.png')" coords="1161,113,1236,208" shape="rect"  >
+        <!-- Party hat -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('party_hat.png')" coords="856,220,934,355" shape="rect">
+        <!-- Black hat -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('black_hat.png')" coords="1014,349,944,248,1002,221,1031,271,1065,267,1130,188,1109,357,1048,335" shape="poly">
+        <!-- Bow -->
+        <area target="" alt="" title="" href="javascript:void(0);"onclick="toggleDress('bow.png')" coords="981,108,1104,186" shape="rect">
+        <!-- Beanie -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('beanie.png')" coords="1153,250,1254,346" shape="rect">
+
+
+
+        <!-- Strawberry eyes -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('strawberry_eyes.png')" coords="871,541,1009,598" shape="rect">
+        <!-- Blush -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('blush.png')" coords="1199,626,1339,666" shape="rect">
+        <!-- Clown makeup -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('clown_makeup.png')" coords="1187,452,1344,604" shape="rect">
+        <!-- Pale skin -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('pale_skin.png')" coords="1041,480,1173,591" shape="rect">
+        <!-- Blue eyes -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('blue_eyes.png')" coords="864,473,1001,525" shape="rect">
+        <!-- Snow goggles -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('snow_goggles.png')" coords="1035,612,1180,662" shape="rect">
+        <!-- Eyes closed -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('eyes_closed.png')" coords="843,613,997,672" shape="rect">
+
+
+
+        <!-- Strawberry dress -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('strawberry_dress.png')" coords="801,788,910,917" shape="rect">
+        <!-- Flower dress -->
+        <area target="" alt="" title="" href="javascript:void(0);"onclick="toggleDress('flower_dress.png')" coords="1072,824,1175,950" shape="rect">
+        <!-- Clown dress -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('clown_dress.png')" coords="1197,781,1300,907" shape="rect">
+        <!-- Goth dress -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('goth_dress.png')" coords="938,773,1041,899" shape="rect">
+        <!-- Bow dress -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('bow_dress.png')" coords="801,945,904,1071" shape="rect">
+        <!-- Snow jacket -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('snow_jacket.png')" coords="1041,1063,1091,970,1159,978,1195,1069" shape="poly">
+        <!-- Cat dress -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('cat_dress.png')" coords="1216,924,1319,1050" shape="rect">
+        <!-- Pumpkin dress -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('pumpkin_dress.png')" coords="924,928,1034,1036" shape="rect">
+
+
+        <!-- Brown boots -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('brown_boots.png')" coords="739,1186,913,1249" shape="rect" >
+        <!-- Clown boots -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('clown_boots.png')" coords="1132,1175,1371,1240" shape="rect">
+        <!-- Goth boots -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('goth_boots.png')" coords="962,1175,1099,1251" shape="rect">
+        <!-- Heart boots -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('heart_boots.png')" coords="745,1271,935,1345" shape="rect">
+        <!-- Snow boots -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('snow_boots.png')" coords="1148,1270,1338,1344" shape="rect">
+        <!-- White boots -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="toggleDress('white_boots.png')" coords="953,1283,1128,1356" shape="rect">
+
+
+
+</map>
+
+    <!-- Finish image -->
+    <img id="finish" src="finish.png" alt="Finish" usemap="#finish-map" style="display: none;">
+    <map name="finish-map">
+        <!-- Refresh area -->
+        <area target="" alt="" title="" href="javascript:void(0);" onclick="refreshPage()" coords="861,1145,1282,1244" shape="rect">
+         <!-- Screenshot area -->
+         <area target="" alt="" title="" href="javascript:void(0);" onclick="downloadPageAsPNG()" coords="1009,962,1145,1095" shape="rect">
+        </map>
+    </map>
+
+
+
+    <script>
+
+
+var selectedClothes = [];
+
+        // Preload the start audio
+        var startAudio = new Audio('start.mp3');
+        startAudio.loop = true; // Loop the start audio
+
+        // Play the start audio when the document is loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            startAudio.play();
+        });
+
+// Play music.mp3 when clothes_select.png is displayed
+function loadClothes() {
+    // Stop the start audio
+    startAudio.pause();
+    startAudio.currentTime = 0; // Reset the audio to the beginning
+
+    // Start playing music.mp3
+    var musicAudio = new Audio('music.mp3');
+    musicAudio.loop = true; // Loop the music
+    musicAudio.play();
+
+    // Show the clothes select screen
+    document.getElementById('start').style.display = 'none';
+    document.getElementById('clothes-select').style.display = 'block';
+    document.getElementById('buttons').style.display = 'block';
+}
+
+function toggleDress(dress) {
+    var avatarContainer = document.getElementById('avatarContainer');
+
+    // Check if the dress is already selected
+    var existingDress = document.getElementById(dress);
+    if (existingDress) {
+        // If it's selected, remove it
+        existingDress.remove();
+        var index = selectedClothes.indexOf(dress);
+        if (index !== -1) {
+            selectedClothes.splice(index, 1);
+        }
+    } else {
+        // If it's not selected, add it
+        var dressImage = new Image();
+        dressImage.src = dress;
+        dressImage.className = 'dress';
+        dressImage.id = dress;
+        avatarContainer.appendChild(dressImage);
+        selectedClothes.push(dress);
+    }
+}
+
+        function loadStartScreen() {
+            // Implement the logic to load the start screen
+            // Hide other screens if visible
+        }
+
+
+
+        function loadFinishScreen() {
+            document.getElementById('clothes-select').style.display = 'none';
+            document.getElementById('finish').style.display = 'block';
+        }
+
+        function refreshPage() {
+        location.reload(); // This reloads the current page
+    }
+
+    function downloadPageAsPNG() {
+            // Capture the entire body using dom-to-image
+            domtoimage.toPng(document.body)
+                .then(function (dataUrl) {
+                    // Create a temporary anchor element
+                    const link = document.createElement('a');
+                    link.href = dataUrl;
+                    link.download = 'Dressed_Up_Kiki.png'; // Set the filename for the downloaded image
+                    link.click(); // Trigger the download
+                })
+                .catch(function (error) {
+                    console.error('Error capturing page:', error);
+                });
+        }
+
+
+
+ // Play start.mp3 when start.png is displayed
+ var startAudio = new Audio('start.mp3');
+        startAudio.loop = true;
+
+        document.getElementById('start').addEventListener('load', function() {
+            startAudio.play();
+        });
+
+
+    </script>
+
+
+
+
+</body>
+</html>
diff --git a/kiki.png b/kiki.png
diff --git a/music.mp3 b/music.mp3
diff --git a/pale_skin.png b/pale_skin.png
diff --git a/party_hat.png b/party_hat.png
diff --git a/pumpkin_dress.png b/pumpkin_dress.png
diff --git a/select.png b/select.png
diff --git a/shoe_select.png b/shoe_select.png
diff --git a/snow_boots.png b/snow_boots.png
diff --git a/snow_goggles.png b/snow_goggles.png
diff --git a/snow_jacket.png b/snow_jacket.png
diff --git a/start.gif b/start.gif
diff --git a/start.mp3 b/start.mp3
diff --git a/strawberry_dress.png b/strawberry_dress.png
diff --git a/strawberry_eyes.png b/strawberry_eyes.png
diff --git a/strawberry_hat.png b/strawberry_hat.png
diff --git a/white_boots.png b/white_boots.png