forked from bpd01001/2024-spring-dmd-3475
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Game Creating Done
- Loading branch information
Showing
5 changed files
with
277 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
<!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>RETURNING</h1> | ||
<p> ...... | ||
Under the flickering red light, you open your eyes. | ||
Looking around, you find yourself in an old mattress in an unfamiliar dwelling. | ||
Confused, you sit up and search through your pockets. | ||
To your dismay, you can't find any of the belongings you usually carry. | ||
</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">OK</button> | ||
<button class="btn btn-secondary btn-false">Cancel</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import { Alert, Confirm, Prompt } from "./game-framework.js"; | ||
/** | ||
* Week 04 - Control Flow | ||
*/ | ||
|
||
|
||
|
||
// Modify the text for the introduction | ||
await Prompt('You try to think about what happened last night. Where were you? ') | ||
|
||
let name = await Prompt('Do you remember your name?') | ||
|
||
// Level 1 | ||
|
||
let choice = await Prompt(`You remember that your name is ${name}. To escape from this place, you want to:\n1. Head to the door\n2. Search the room`); | ||
|
||
if (choice === "1") { | ||
await Alert('You head to the door you see and try to open it.'); | ||
|
||
await Alert('The door is locked.'); | ||
|
||
} else if (choice === "2") { | ||
await Alert('You searched the room to collect more information.'); | ||
|
||
await Confirm('You found a key inside a table behind you. You opened the door and went outside.'); | ||
|
||
await Alert('You escaped from the house.'); | ||
window.location.reload(); | ||
|
||
|
||
} else { | ||
await Alert('You did nothing until you died of hunger.'); | ||
window.location.reload(); | ||
} | ||
|
||
if (choice === "1") { | ||
Alert('You searched the room to collect more information.'); | ||
|
||
await Confirm('You found a key inside a table behind you. You opened the door and went outside. You escaped from the house.'); | ||
window.location.reload(); | ||
} | ||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |