finished house cat simulator decision tree

kmr18006 · Feb 8, 2024 · 0e4f315 · 0e4f315
1 parent cf1ac4b
commit 0e4f315
Show file tree

Hide file tree

Showing 5 changed files with 272 additions and 0 deletions.
diff --git a/week-04/index.html b/week-04/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Week 04</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+
+</head>
+<body>
+
+
+
+    <div class="container mt-5">
+        <div class="row">
+            <main class="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4 ">
+                <h1>House Cat Simulator</h1>
+                <p>Being a house cat is a simple life of eat, sleep, and play. Take a moment out of your busy human life to experience
+                    a day in the life of a house cat.</p>
+            </main>
+        </div>
+
+        <div class="row">
+            <main class="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4 ">
+                <!-- Output goes here -->
+            </main>
+        </div>
+    </div>
+
+    <!-- JS Templates -->
+    <template id="confirm">
+        <div class="card mb-4">
+            <h5 class="card-header">Confirm</h5>
+            <div class="card-body">
+                <h5 class="card-title">Question</h5>
+                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+                <button class="btn btn-primary btn-true">Yes</button>
+                <button class="btn btn-secondary btn-false">No</button>
+            </div>
+        </div>
+    </template>
+
+    <template id="prompt">
+        <div class="card mb-4">
+            <h5 class="card-header">Prompt</h5>
+            <div class="card-body">
+                <div class="mb-3">
+                    <label for="exampleFormControlInput1" class="form-label">
+                        <h5 class="card-title">What is Your Name?</h5>
+                    </label>
+                    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Type your response...">
+                </div>
+                <button class="btn btn-primary btn-true">OK</button>
+                <button class="btn btn-secondary btn-false">Cancel</button>
+            </div>
+        </div>
+    </template>
+
+    <template id="alert">
+        <div class="card mb-4">
+            <h5 class="card-header">Alert</h5>
+            <div class="card-body">
+                <h5 class="card-title">Title</h5>
+                <p class="card-text">text</p>
+                <button class="btn btn-primary btn-true">OK</button>
+                <button class="btn btn-secondary btn-false">Cancel</button>
+            </div>
+        </div>
+    </template>
+
+
+    <!-- Don't touch! We need this script -->
+    <script type="module" src="../.core/js/main.js"></script>
+
+
+    <!-- Game framework -->
+    <script src="js/game-framework.js" type="module"></script>
+
+
+    <!-- Open the following file in an editor to complete your assignment. -->
+    <script src="js/main.js" type="module"></script>
+
+
+</body>
+</html>
diff --git a/week-04/js/game-framework.js b/week-04/js/game-framework.js
@@ -0,0 +1,108 @@
+/**
+ * Game Framework
+ * It's safe to ignore this file. It's just a helper for the game.
+ * 
+ */
+
+// Get the templates
+let confirmTmpl = document.querySelector('#confirm').content;
+let promptTmpl = document.querySelector('#prompt').content;
+let alertTmpl = document.querySelector('#alert').content;
+
+
+
+function Confirm(question = '', helpText='', appendTo = 'main') {
+
+    if (typeof question == 'string' && question !== '') {
+
+        return new Promise((resolve, reject) => {
+
+            // documentFragment from string
+            let df =  confirmTmpl.cloneNode(true);
+
+            df.querySelector('.card-title').textContent = question;
+            df.querySelector('.card-text').textContent = helpText;
+
+
+            df.querySelector('.btn-true').addEventListener('click', (event) => {
+                console.log('Promise Resolved', true)
+                resolve(true)
+            }, {once: true})
+
+            df.querySelector('.btn-false').addEventListener('click', (event) => {
+                console.log('Promise Resolved', false)
+                resolve(false)
+            }, { once: true })
+
+            document.querySelector(appendTo).appendChild(df)
+        });
+    }
+}
+
+
+function Alert(question = '', helpText = '', appendTo = 'main') {
+
+    if (typeof question == 'string' && question !== '') {
+
+        return new Promise((resolve, reject) => {
+
+            // documentFragment from string
+            let df = alertTmpl.cloneNode(true);
+
+            df.querySelector('.card-title').textContent = question;
+            df.querySelector('.card-text').textContent = helpText;
+
+            df.querySelector('.btn-true').addEventListener('click', (event) => {
+                console.log('Promise Resolved', true)
+                resolve(true)
+            }, { once: true })
+
+            df.querySelector('.btn-false').addEventListener('click', (event) => {
+                console.log('Promise Resolved', false)
+                resolve(false)
+            }, { once: true })
+
+            document.querySelector(appendTo).appendChild(df)
+        });
+    }
+}
+
+
+function Prompt(question = '', helpText = '', appendTo = 'main') {
+
+    if (typeof question == 'string' && question !== '') {
+
+        return new Promise((resolve, reject) => {
+
+            // documentFragment from string
+            let df = promptTmpl.cloneNode(true);
+
+            df.querySelector('.card-title').textContent = question;
+            // df.querySelector('.card-text').textContent = helpText;
+            let input = df.querySelector('input');
+
+            df.querySelector('.btn-true').addEventListener('click', (event) => {
+                console.log('Promise Resolved', input.value)
+                resolve(input.value)
+            }, { once: true })
+
+            df.querySelector('.btn-false').addEventListener('click', (event) => {
+                console.log('Promise Resolved', false)
+                resolve(false)
+            }, { once: true })
+
+            document.querySelector(appendTo).appendChild(df)
+        });
+    }
+}
+
+
+// Autoscroll to the bottom of the page
+const resizeObserver = new ResizeObserver(entries =>
+    window.scrollTo(0, document.body.scrollHeight)
+)
+
+// start observing a DOM node
+resizeObserver.observe(document.body)
+
+export { Confirm, Alert, Prompt }
diff --git a/week-04/js/main.js b/week-04/js/main.js
@@ -0,0 +1,43 @@
+import { Alert, Confirm, Prompt } from "./game-framework.js";
+/**
+ * Week 04 - Control Flow
+ */
+
+
+
+// Modify the text for the introduction
+await Alert('Welcome to House Cat Simulator. Make decisions to experience a day in the life of a house cat!')
+
+let name = await Prompt("What is your cat name?")
+
+// Level 1
+if(await Confirm(`Hi ${name}. Do you want to go to sleep?`)) {
+
+    let decision = await Prompt('Do you want to sleep on the windowsill, bed, or in a box?')
+
+    if (decision.toLowerCase() === "windowsill") {
+        await Alert('You find a spot to nap on the windowsill and fall asleep in the warmth of the sun.')
+    } else if (decision.toLowerCase() === "bed") {
+        await Alert('You find a cozy spot on the bed with your human and fall asleep snuggled next to them.')
+    } else if (decision.toLowerCase() === "box") {
+        await Alert('You find a cool box and fall asleep inside of it.')
+    } 
+
+    } else {
+    if (await Confirm('Do you want to play?')) {
+        if (await Confirm('Are there toys nearby?')) {
+            await Alert ('You bat around a toy and chase it around.')
+        } else {
+            await Alert('You play with a makeshift toy made out of crumpled paper.')
+        }
+    } else {
+        if (await Confirm('Are you hungry?')) {
+            await Alert('You eat some food from your bowl, licking your chops. You are happy.')
+        } else {
+            await Alert("Since you don't want to do anything and are bored, you go look for your human to give you some attention.")
+        }
+    }
+
+}
+
+    window.location.reload() 
diff --git a/week-04/test/test.example.js b/week-04/test/test.example.js
@@ -0,0 +1,22 @@
+import { assert } from 'https://unpkg.com/chai/chai.js';
+import * as ctx from '../js/week-01.js';
+
+
+describe("Variables:", function () {
+    describe("firstName", function () {
+        it("should be a valid string", function () {
+            assert.typeOf(ctx.firstName, 'string');
+        });
+    });
+    describe("age", function () {
+        it("should be a valid number", function () {
+            assert(Number.isInteger(ctx.age));
+            assert.isNumber(ctx.age);
+        });
+    });
+    describe("whyImTakingThisCourse", function () {
+        it("should be a valid string", function () {
+            assert.typeOf(ctx.whyImTakingThisCourse, 'string');
+        });
+    });
+});
diff --git a/week-04/tests.html b/week-04/tests.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Results</title>
+</head>
+<body>
+    <script src="../.core/js/test.js"></script>
+    <script>
+        runMochaTests(['example']);
+    </script>
+</body>
+</html>