Merge pull request #1516 from TacticalReader/main
Upgraded typing game, chat backend, and main index filespull/1526/head
Lee Stott
11 months ago
committed by
GitHub
commit
6934238552
@ -1,11 +1,17 @@
|
|||||||
# Reading the Docs
|
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
|
|
||||||
There are many tools that a web developer may need that are on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select 3 tools not covered in the lesson, explain why a web developer would use it, and search for a tool that falls under this category and share its documentation. Do not use the same tool example on MDN docs.
|
There are many tools that a web developer may need that are listed on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select **three tools** that are **not covered in this lesson** (excluding [list specific tools or refer to lesson content]), explain **why** a web developer would use each tool, and find a tool that fits each category. For each, share a link to its official documentation (not the example used on MDN).
|
||||||
|
|
||||||
|
**Format:**
|
||||||
|
- Tool name
|
||||||
|
- Why a web developer would use it (2-3 sentences)
|
||||||
|
- Link to documentation
|
||||||
|
|
||||||
|
**Length:**
|
||||||
|
- Each explanation should be 2-3 sentences.
|
||||||
|
|
||||||
## Rubric
|
## Rubric
|
||||||
|
|
||||||
Exemplary | Adequate | Needs Improvement
|
Exemplary | Adequate | Needs Improvement
|
||||||
--- | --- | -- |
|
--- | --- | -- |
|
||||||
|Explained why web developer would use tool| Explained how, but not why developer would use tool| Did not mention how or why a developer would use tool |
|
Explained why web developer would use tool | Explained how, but not why developer would use tool | Did not mention how or why a developer would use tool |
|
||||||
@ -1,11 +1,27 @@
|
|||||||
# CSS Refactoring
|
# CSS Refactoring Assignment
|
||||||
|
|
||||||
|
## Objective
|
||||||
|
|
||||||
|
Refactor the terrarium project to use **Flexbox** or **CSS Grid** for layout. Update the HTML and CSS as needed to achieve a modern, responsive design. You do not need to implement draggable elements—focus on layout and styling only.
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
|
|
||||||
Restyle the terrarium using either Flexbox or CSS Grid, and take screenshots to show that you have tested it on several browsers. You might need to change the markup so create a new version of the app with the art in place for your refactor. Don't worry about making the elements draggable; only refactor the HTML and CSS for now.
|
1. **Create a new version** of the terrarium app. Update the markup and CSS to use Flexbox or CSS Grid for layout.
|
||||||
|
2. **Ensure the art and elements are in place** as in the original version.
|
||||||
|
3. **Test your design** in at least two different browsers (e.g., Chrome, Firefox, Edge).
|
||||||
|
4. **Take screenshots** of your terrarium in each browser to demonstrate cross-browser compatibility.
|
||||||
|
5. **Submit** your updated code and screenshots.
|
||||||
|
|
||||||
## Rubric
|
## Rubric
|
||||||
|
|
||||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
||||||
| | Present a completely restyled terrarium using Flexbox or CSS Grid | Restyle a few of the elements | Fail to restyle the terrarium at all |
|
| Layout | Fully refactored using Flexbox or CSS Grid; visually appealing and responsive | Some elements refactored; partial use of Flexbox or Grid | Little or no use of Flexbox or Grid; layout unchanged |
|
||||||
|
| Cross-Browser | Screenshots provided for multiple browsers; consistent appearance | Screenshots for one browser; minor inconsistencies | No screenshots or major inconsistencies |
|
||||||
|
| Code Quality | Clean, well-organized HTML/CSS; clear comments | Some organization; few comments | Disorganized code; lacks comments |
|
||||||
|
|
||||||
|
## Tips
|
||||||
|
|
||||||
|
- Review [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) guides.
|
||||||
|
- Use browser developer tools to test responsiveness.
|
||||||
|
- Comment your code for clarity.
|
||||||
@ -1,76 +1,109 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Welcome to my Virtual Terrarium</title>
|
<title>Welcome to my Virtual Terrarium</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<!-- import the webpage's stylesheet -->
|
<!-- Font Awesome CDN for icons -->
|
||||||
<link rel="stylesheet" href="./style.css" />
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
|
||||||
<!-- import the webpage's JavaScript file -->
|
<!-- import the webpage's stylesheet -->
|
||||||
<script src="./script.js" defer></script>
|
<link rel="stylesheet" href="./style.css" />
|
||||||
</head>
|
<!-- import the webpage's JavaScript file -->
|
||||||
|
<script src="./script.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page">
|
||||||
|
<!-- Navigation Bar -->
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#"><i class="fas fa-home"></i> Home</a></li>
|
||||||
|
<li><a href="#"><i class="fas fa-leaf"></i> Plants</a></li>
|
||||||
|
<li><a href="#"><i class="fas fa-seedling"></i> Care Tips</a></li>
|
||||||
|
<li><a href="#"><i class="fas fa-info-circle"></i> About</a></li>
|
||||||
|
<li><a href="#"><i class="fas fa-envelope"></i> Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<body>
|
<header>
|
||||||
<div id="page">
|
<h1><i class="fas fa-jar"></i> My Terrarium</h1>
|
||||||
<h1>My Terrarium</h1>
|
<p>Welcome to your virtual plant paradise! <i class="fas fa-smile-beam"></i></p>
|
||||||
|
</header>
|
||||||
|
|
||||||
<div id="left-container" class="container">
|
<main>
|
||||||
<div class="plant-holder">
|
<section id="plant-selection">
|
||||||
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
<div id="left-container" class="container">
|
||||||
</div>
|
<!-- Left-side plants -->
|
||||||
<div class="plant-holder">
|
<div class="plant-holder">
|
||||||
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
|
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="plant-holder">
|
<div class="plant-holder">
|
||||||
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
|
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="plant-holder">
|
<div class="plant-holder">
|
||||||
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
|
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="plant-holder">
|
<div class="plant-holder">
|
||||||
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
|
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="plant-holder">
|
<div class="plant-holder">
|
||||||
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
|
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="plant-holder">
|
<div class="plant-holder">
|
||||||
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
|
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="plant-holder">
|
||||||
<div id="right-container" class="container">
|
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
|
||||||
<div class="plant-holder">
|
</div>
|
||||||
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
|
</div>
|
||||||
</div>
|
<div id="right-container" class="container">
|
||||||
<div class="plant-holder">
|
<!-- Right-side plants -->
|
||||||
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
|
<div class="plant-holder">
|
||||||
</div>
|
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
|
||||||
<div class="plant-holder">
|
</div>
|
||||||
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
|
<div class="plant-holder">
|
||||||
</div>
|
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
|
||||||
<div class="plant-holder">
|
</div>
|
||||||
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
|
<div class="plant-holder">
|
||||||
</div>
|
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
|
||||||
<div class="plant-holder">
|
</div>
|
||||||
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
|
<div class="plant-holder">
|
||||||
</div>
|
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
|
||||||
<div class="plant-holder">
|
</div>
|
||||||
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
|
<div class="plant-holder">
|
||||||
</div>
|
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
|
||||||
<div class="plant-holder">
|
</div>
|
||||||
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
|
<div class="plant-holder">
|
||||||
</div>
|
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div id="terrarium">
|
<section id="terrarium-section">
|
||||||
<div class="jar-top"></div>
|
<div id="terrarium">
|
||||||
<div class="jar-walls">
|
<div class="jar-top"></div>
|
||||||
<div class="jar-glossy-long"></div>
|
<div class="jar-walls">
|
||||||
<div class="jar-glossy-short"></div>
|
<div class="jar-glossy-long"></div>
|
||||||
</div>
|
<div class="jar-glossy-short"></div>
|
||||||
<div class="dirt"></div>
|
</div>
|
||||||
<div class="jar-bottom"></div>
|
<div class="dirt"></div>
|
||||||
</div>
|
<div class="jar-bottom"></div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</section>
|
||||||
</html>
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
<i class="fas fa-copyright"></i> 2025 My Terrarium. All rights reserved.
|
||||||
|
|
|
||||||
|
<a href="https://github.com/" target="_blank"><i class="fab fa-github"></i> GitHub</a>
|
||||||
|
|
|
||||||
|
<a href="mailto:info@myterrarium.com"><i class="fas fa-envelope"></i> Email</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,23 +1,110 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Typing</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" href="./index.css" />
|
<title>Typing</title>
|
||||||
</head>
|
<!-- Font Awesome CDN for icons -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
|
||||||
|
<link rel="stylesheet" href="./index.css" />
|
||||||
|
<style>
|
||||||
|
|
||||||
|
|
||||||
|
#datetime {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #2d7c6f;
|
||||||
|
}
|
||||||
|
|
||||||
|
#datetime .fas {
|
||||||
|
margin-right: 0.3rem;
|
||||||
|
color: #3a241d;
|
||||||
|
font-size: 1.1em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide label visually but keep for accessibility */
|
||||||
|
.hidden-label {
|
||||||
|
position: absolute;
|
||||||
|
left: -10000px;
|
||||||
|
top: auto;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ...existing code... */
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Practice your typing</h1>
|
<h1>
|
||||||
<div>Click start to have a quote displayed. Type the quote as fast as you can!</div>
|
<i class="fas fa-keyboard"></i> Practice your typing
|
||||||
|
</h1>
|
||||||
|
<div>
|
||||||
|
<i class="fas fa-info-circle"></i>
|
||||||
|
Click start to have a quote displayed. Type the quote as fast as you can!
|
||||||
|
</div>
|
||||||
|
|
||||||
<p id="quote"></p>
|
<p id="quote"></p>
|
||||||
<p id="message"></p>
|
<p id="message"></p>
|
||||||
<div>
|
<div>
|
||||||
<input type="text" aria-label="current word" id="typed-value" />
|
<label for="typed-value" class="hidden-label">Current word</label>
|
||||||
</div>
|
<input type="text" aria-label="current word" id="typed-value" placeholder="Type here..." />
|
||||||
<div>
|
<i class="fas fa-pen"></i>
|
||||||
<button id="start" type="button">Start</button>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<script src="./index.js"></script>
|
<button id="start" type="button">
|
||||||
</body>
|
<i class="fas fa-play"></i> Start
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
<!-- ...existing code... -->
|
||||||
|
<body>
|
||||||
|
<h1>
|
||||||
|
<i class="fas fa-keyboard"></i> Practice your typing
|
||||||
|
</h1>
|
||||||
|
<div id="datetime">
|
||||||
|
<i class="fas fa-calendar-day"></i>
|
||||||
|
<span id="current-date"></span>
|
||||||
|
|
|
||||||
|
<i class="fas fa-clock"></i>
|
||||||
|
<span id="current-time"></span>
|
||||||
|
</div>
|
||||||
|
<!-- ...existing code... -->
|
||||||
|
</body>
|
||||||
|
<!-- ...existing code... -->
|
||||||
|
<script>
|
||||||
|
// ...existing code...
|
||||||
|
|
||||||
|
function updateDateTime() {
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
// Format date as DD/MM/YYYY
|
||||||
|
const day = String(now.getDate()).padStart(2, '0');
|
||||||
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||||
|
const year = now.getFullYear();
|
||||||
|
const formattedDate = `${day}/${month}/${year}`;
|
||||||
|
|
||||||
|
// Format time as HH:MM AM/PM (12-hour)
|
||||||
|
let hours = now.getHours();
|
||||||
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||||
|
const ampm = hours >= 12 ? 'PM' : 'AM';
|
||||||
|
hours = hours % 12;
|
||||||
|
hours = hours ? hours : 12; // 0 should be 12
|
||||||
|
const formattedTime = `${hours}:${minutes} ${ampm}`;
|
||||||
|
|
||||||
|
document.getElementById('current-date').textContent = formattedDate;
|
||||||
|
document.getElementById('current-time').textContent = formattedTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initial call and update every minute
|
||||||
|
updateDateTime();
|
||||||
|
setInterval(updateDateTime, 60000);
|
||||||
|
|
||||||
|
// ...existing code...
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@ -1,94 +1,94 @@
|
|||||||
|
// Typing Game - Modern ES6+ Version
|
||||||
|
|
||||||
|
// Quotes pool
|
||||||
const quotes = [
|
const quotes = [
|
||||||
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
|
"When you have eliminated the impossible, whatever remains, however improbable, must be the truth.",
|
||||||
'There is nothing more deceptive than an obvious fact.',
|
"There is nothing more deceptive than an obvious fact.",
|
||||||
'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
|
"I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.",
|
||||||
'I never make exceptions. An exception disproves the rule.',
|
"I never make exceptions. An exception disproves the rule.",
|
||||||
'What one man can invent another can discover.',
|
"What one man can invent another can discover.",
|
||||||
'Nothing clears up a case so much as stating it to another person.',
|
"Nothing clears up a case so much as stating it to another person.",
|
||||||
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
|
"Education never ends, Watson. It is a series of lessons, with the greatest for the last."
|
||||||
];
|
];
|
||||||
|
|
||||||
// array for storing the words of the current challenge
|
// State
|
||||||
let words = [];
|
let words = [];
|
||||||
// stores the index of the word the player is currently typing
|
|
||||||
let wordIndex = 0;
|
let wordIndex = 0;
|
||||||
// default value for startTime (will be set on start)
|
let startTime = 0;
|
||||||
let startTime = Date.now();
|
|
||||||
|
// UI Elements
|
||||||
|
const quoteElement = document.querySelector("#quote");
|
||||||
|
const messageElement = document.querySelector("#message");
|
||||||
|
const typedValueElement = document.querySelector("#typed-value");
|
||||||
|
const startButton = document.querySelector("#start");
|
||||||
|
|
||||||
|
// Messages system
|
||||||
|
const messages = {
|
||||||
|
success: (seconds) => `🎉 Congratulations! You finished in ${seconds.toFixed(2)} seconds.`,
|
||||||
|
error: "⚠️ Oops! There's a mistake.",
|
||||||
|
start: "⌨️ Start typing to begin the game."
|
||||||
|
};
|
||||||
|
|
||||||
// grab UI items
|
// Utility: pick random quote
|
||||||
const quoteElement = document.getElementById('quote');
|
const getRandomQuote = () => quotes[Math.floor(Math.random() * quotes.length)];
|
||||||
const messageElement = document.getElementById('message')
|
|
||||||
const typedValueElement = document.getElementById('typed-value');
|
|
||||||
|
|
||||||
document.getElementById('start').addEventListener('click', function () {
|
// Utility: render quote as spans
|
||||||
// get a quote
|
const renderQuote = (quote) => {
|
||||||
const quoteIndex = Math.floor(Math.random() * quotes.length);
|
quoteElement.innerHTML = quote
|
||||||
const quote = quotes[quoteIndex];
|
.split(" ")
|
||||||
// Put the quote into an array of words
|
.map((word, i) => `<span ${i === 0 ? 'class="highlight"' : ""}>${word}</span>`)
|
||||||
words = quote.split(' ');
|
.join(" ");
|
||||||
// reset the word index for tracking
|
};
|
||||||
wordIndex = 0;
|
|
||||||
|
|
||||||
// UI updates
|
// Utility: highlight current word
|
||||||
// Create an array of span elements so we can set a class
|
const highlightWord = (index) => {
|
||||||
const spanWords = words.map(function (word) { return `<span>${word} </span>` });
|
[...quoteElement.children].forEach((el, i) => {
|
||||||
// Convert into string and set as innerHTML on quote display
|
el.classList.toggle("highlight", i === index);
|
||||||
quoteElement.innerHTML = spanWords.join('');
|
});
|
||||||
// Highlight the first word
|
};
|
||||||
quoteElement.childNodes[0].className = 'highlight';
|
|
||||||
// Clear any prior messages
|
|
||||||
messageElement.innerText = '';
|
|
||||||
|
|
||||||
// Setup the textbox
|
// Game start
|
||||||
// Clear the textbox
|
const startGame = () => {
|
||||||
typedValueElement.value = '';
|
const quote = getRandomQuote();
|
||||||
// set focus
|
words = quote.split(" ");
|
||||||
typedValueElement.focus();
|
wordIndex = 0;
|
||||||
// set the event handler
|
renderQuote(quote);
|
||||||
|
|
||||||
// Start the timer
|
messageElement.textContent = messages.start;
|
||||||
startTime = new Date().getTime();
|
typedValueElement.value = "";
|
||||||
});
|
typedValueElement.focus();
|
||||||
|
|
||||||
typedValueElement.addEventListener('input', (e) => {
|
startTime = Date.now();
|
||||||
// Get the current word
|
};
|
||||||
const currentWord = words[wordIndex];
|
|
||||||
// get the current value
|
|
||||||
const typedValue = typedValueElement.value;
|
|
||||||
|
|
||||||
if (typedValue === currentWord && wordIndex === words.length - 1) {
|
// Typing logic
|
||||||
// end of quote
|
const handleTyping = () => {
|
||||||
// Display success
|
const currentWord = words[wordIndex];
|
||||||
const elapsedTime = new Date().getTime() - startTime;
|
const typedValue = typedValueElement.value;
|
||||||
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
|
|
||||||
messageElement.innerText = message;
|
|
||||||
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
|
|
||||||
// end of word
|
|
||||||
// clear the typedValueElement for the new word
|
|
||||||
typedValueElement.value = '';
|
|
||||||
// move to the next word
|
|
||||||
wordIndex++;
|
|
||||||
// reset the class name for all elements in quote
|
|
||||||
for (const wordElement of quoteElement.childNodes) {
|
|
||||||
wordElement.className = '';
|
|
||||||
}
|
|
||||||
// highlight the new word
|
|
||||||
quoteElement.childNodes[wordIndex].className = 'highlight';
|
|
||||||
} else if (currentWord.startsWith(typedValue)) {
|
|
||||||
// currently correct
|
|
||||||
// highlight the next word
|
|
||||||
typedValueElement.className = '';
|
|
||||||
} else {
|
|
||||||
// error state
|
|
||||||
typedValueElement.className = 'error';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add this at the end of the file
|
if (typedValue === currentWord && wordIndex === words.length - 1) {
|
||||||
const messages = {
|
// Game finished
|
||||||
success: "CONGRATULATIONS! You finished in {seconds} seconds.",
|
const elapsedTime = (Date.now() - startTime) / 1000;
|
||||||
error: "Oops! There's a mistake.",
|
messageElement.textContent = messages.success(elapsedTime);
|
||||||
start: "Start typing to begin the game."
|
typedValueElement.disabled = true;
|
||||||
|
} else if (typedValue.endsWith(" ") && typedValue.trim() === currentWord) {
|
||||||
|
// Word completed
|
||||||
|
typedValueElement.value = "";
|
||||||
|
wordIndex++;
|
||||||
|
highlightWord(wordIndex);
|
||||||
|
} else if (currentWord.startsWith(typedValue)) {
|
||||||
|
// Correct so far
|
||||||
|
typedValueElement.classList.remove("error");
|
||||||
|
} else {
|
||||||
|
// Error
|
||||||
|
typedValueElement.classList.add("error");
|
||||||
|
messageElement.textContent = messages.error;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default messages;
|
// Event Listeners
|
||||||
|
startButton.addEventListener("click", startGame);
|
||||||
|
typedValueElement.addEventListener("input", handleTyping);
|
||||||
|
|
||||||
|
// Default state
|
||||||
|
messageElement.textContent = "👉 Click Start to begin!";
|
||||||
|
|||||||
@ -1,34 +1,47 @@
|
|||||||
function loadTexture(path) {
|
async function loadTexture(path) {
|
||||||
return new Promise((resolve) => {
|
return new Promise(resolve => {
|
||||||
const img = new Image();
|
const img = new Image();
|
||||||
img.src = path;
|
img.src = path;
|
||||||
img.onload = () => {
|
img.onload = () => resolve(img);
|
||||||
resolve(img);
|
});
|
||||||
}
|
}
|
||||||
})
|
function drawText(ctx, text, x, y, fontSize = 40, color = "#ff007f", align = "center") {
|
||||||
}
|
ctx.save();
|
||||||
|
ctx.font = `${fontSize}px Orbitron, monospace`;
|
||||||
function createEnemies(ctx, canvas, enemyImg) {
|
ctx.fillStyle = color;
|
||||||
const MONSTER_TOTAL = 5;
|
ctx.textAlign = align;
|
||||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
ctx.shadowColor = "#181733";
|
||||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
ctx.shadowBlur = 12;
|
||||||
const STOP_X = START_X + MONSTER_WIDTH;
|
ctx.fillText(text, x, y);
|
||||||
|
ctx.restore();
|
||||||
for (let x = START_X; x < STOP_X; x += 98) {
|
|
||||||
for (let y = 0; y < 50 * 5; y += 50) {
|
|
||||||
ctx.drawImage(enemyImg, x, y);
|
|
||||||
}
|
}
|
||||||
}
|
function createEnemies(ctx, canvas, enemyImg) {
|
||||||
}
|
const MONSTER_TOTAL = 7;
|
||||||
|
const MONSTER_ROWS = 5;
|
||||||
window.onload = async() => {
|
const ENEMY_SIZE = 65;
|
||||||
canvas = document.getElementById("canvas");
|
const START_X = (canvas.width - (MONSTER_TOTAL * ENEMY_SIZE)) / 2;
|
||||||
ctx = canvas.getContext("2d");
|
for (let row = 0; row < MONSTER_ROWS; row++) {
|
||||||
const heroImg = await loadTexture('assets/player.png')
|
for (let col = 0; col < MONSTER_TOTAL; col++) {
|
||||||
const enemyImg = await loadTexture('assets/enemyShip.png')
|
const x = START_X + col * ENEMY_SIZE;
|
||||||
|
const y = 60 + row * ENEMY_SIZE;
|
||||||
ctx.fillStyle = 'black';
|
ctx.drawImage(enemyImg, x, y, ENEMY_SIZE, ENEMY_SIZE);
|
||||||
ctx.fillRect(0,0, canvas.width, canvas.height);
|
}
|
||||||
ctx.drawImage(heroImg, canvas.width/2 - 45, canvas.height - (canvas.height /4));
|
}
|
||||||
createEnemies(ctx, canvas, enemyImg);
|
}
|
||||||
};
|
window.onload = async () => {
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
// Use emoji icons as game characters if images aren't available
|
||||||
|
const heroImg = await loadTexture('assets/player.png');
|
||||||
|
const enemyImg = await loadTexture('assets/enemyShip.png');
|
||||||
|
ctx.fillStyle = '#181733';
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
drawText(ctx, "Prepare for Battle!", canvas.width/2, 70, 48, "#fff");
|
||||||
|
// Draw hero
|
||||||
|
ctx.drawImage(heroImg, canvas.width/2 - 45, canvas.height - (canvas.height / 4), 90, 90);
|
||||||
|
createEnemies(ctx, canvas, enemyImg);
|
||||||
|
// Example: Draw power up icon beside hero
|
||||||
|
ctx.font = "38px FontAwesome";
|
||||||
|
ctx.fillStyle = "#ffd700";
|
||||||
|
ctx.fillText("\uf059", canvas.width/2 + 60, canvas.height - (canvas.height / 4) + 42); // Star icon
|
||||||
|
};
|
||||||
|
|||||||
@ -1,6 +1,49 @@
|
|||||||
<html>
|
<!DOCTYPE html>
|
||||||
<body>
|
<html lang="en">
|
||||||
<canvas id ="canvas" width="1024" height="768"></canvas>
|
<head>
|
||||||
<script src="app.js"></script>
|
<meta charset="UTF-8">
|
||||||
</body>
|
<title>Enhanced Canvas Game</title>
|
||||||
</html>
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: linear-gradient(135deg, #2d2a4a 0%, #181733 100%);
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Orbitron', 'Arial', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
margin-top: 32px;
|
||||||
|
font-size: 2.7rem;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-shadow: 0 3px 12px #ff007f;
|
||||||
|
}
|
||||||
|
.info-bar {
|
||||||
|
margin: 20px 0;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
#canvas {
|
||||||
|
border: 4px solid #ff007f;
|
||||||
|
box-shadow: 0 0 40px #ff007f22;
|
||||||
|
display: block;
|
||||||
|
margin: 20px auto;
|
||||||
|
background: #12121c;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>
|
||||||
|
<i class="fa-solid fa-rocket"></i>
|
||||||
|
Arcade Monster Attack
|
||||||
|
<i class="fa-solid fa-skull-crossbones"></i>
|
||||||
|
</h1>
|
||||||
|
<div class="info-bar">
|
||||||
|
<i class="fa-solid fa-star"></i> Score: <span id="score">0</span>
|
||||||
|
<i class="fa-solid fa-heart"></i> Lives: <span id="lives">3</span>
|
||||||
|
</div>
|
||||||
|
<canvas id="canvas" width="1024" height="768"></canvas>
|
||||||
|
</html>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,20 +1,523 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Space Game</title>
|
<title>Space Game</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="description" content="Canvas-based Space Game with accessible controls, HUD, and settings." />
|
||||||
|
<meta name="theme-color" content="#0b1023" />
|
||||||
|
|
||||||
|
<!-- Google Fonts: performance preconnect + fonts (apply via CSS later) -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<!-- Swap or add families as desired -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Font Awesome 6 (Free) via cdnjs -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-bWn0gM3Yx6w5OV6v4p+WB6l3Zl9sJ2jQ4kN0N1bK2qgkvI6l3F8Vd6k1oB7f/0g0a9Qyxgkq+K6X1JQmJv9zYg==" crossorigin="anonymous" referrerpolicy="no-referrer">
|
||||||
|
|
||||||
|
<!-- Optional PWA hooks (files to be created later) -->
|
||||||
|
<link rel="manifest" href="manifest.webmanifest">
|
||||||
</head>
|
</head>
|
||||||
|
<style>
|
||||||
|
/* Space Game — CSS */
|
||||||
|
/* Typography + Theme */
|
||||||
|
:root {
|
||||||
|
--bg: #070a1a;
|
||||||
|
--bg-2: #0b1023;
|
||||||
|
--panel: rgba(12, 17, 38, 0.75);
|
||||||
|
--panel-solid: #0c1126;
|
||||||
|
--primary: #5ac8fa;
|
||||||
|
--accent: #a78bfa;
|
||||||
|
--danger: #ff6b6b;
|
||||||
|
--success: #34d399;
|
||||||
|
--warning: #fbbf24;
|
||||||
|
--text: #e6eaf2;
|
||||||
|
--muted: #9aa4bf;
|
||||||
|
--border: #192243;
|
||||||
|
--shadow: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 10%, #0f1533 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 80% 30%, #0b1b3a 0%, transparent 40%),
|
||||||
|
radial-gradient(circle at 30% 80%, #111a39 0%, transparent 40%),
|
||||||
|
var(--bg);
|
||||||
|
font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header + Nav */
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 20;
|
||||||
|
background: linear-gradient(180deg, rgba(7,10,26,0.85) 0%, rgba(7,10,26,0.6) 100%);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Orbitron", "Poppins", sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[aria-label="Primary"] {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[aria-label="Primary"] button {
|
||||||
|
appearance: none;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: linear-gradient(180deg, #121a3a 0%, #0d1430 100%);
|
||||||
|
color: var(--text);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.55rem 0.85rem;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.06s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||||
|
box-shadow: 0 2px 12px var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[aria-label="Primary"] button:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 4px 18px rgba(90, 200, 250, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[aria-label="Primary"] button:active {
|
||||||
|
transform: translateY(1px) scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav [data-action="start"] { background: linear-gradient(180deg, #10314a 0%, #0d2438 100%); }
|
||||||
|
nav [data-action="pause"] { background: linear-gradient(180deg, #1a1f3f 0%, #131936 100%); }
|
||||||
|
nav [data-action="reset"] { background: linear-gradient(180deg, #3b0d0d 0%, #2a0a0a 100%); }
|
||||||
|
nav [data-action="mute"][aria-pressed="true"] { background: linear-gradient(180deg, #3f1a1a 0%, #2a0e0e 100%); }
|
||||||
|
nav [data-action="fullscreen"] { background: linear-gradient(180deg, #162c3a 0%, #0f2331 100%); }
|
||||||
|
nav [data-action="open-settings"] { background: linear-gradient(180deg, #1a1440 0%, #13103a 100%); }
|
||||||
|
|
||||||
|
/* Main Layout */
|
||||||
|
main {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HUD overlay */
|
||||||
|
#hud {
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
top: 64px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: min(100% - 2rem, 1180px);
|
||||||
|
z-index: 15;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hud [role="status"] {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem 1rem;
|
||||||
|
align-items: center;
|
||||||
|
background: var(--panel);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#hud span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hud output {
|
||||||
|
color: var(--primary);
|
||||||
|
font-family: "Orbitron", "Poppins", sans-serif;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Canvas section */
|
||||||
|
#play {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#play figure {
|
||||||
|
margin: 0;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
background:
|
||||||
|
radial-gradient(1200px 600px at 70% 30%, rgba(70, 78, 150, 0.15), transparent 60%),
|
||||||
|
radial-gradient(800px 400px at 20% 70%, rgba(88, 131, 186, 0.12), transparent 60%),
|
||||||
|
#081022;
|
||||||
|
box-shadow: 0 8px 28px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.02);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#play figcaption {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 5;
|
||||||
|
inset: 0 auto auto 0;
|
||||||
|
margin: 0.5rem 0 0 0.5rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
background: rgba(8, 16, 34, 0.7);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#myCanvas {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
background: linear-gradient(180deg, #000814 0%, #001d3d 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Help + Leaderboard */
|
||||||
|
#help, #leaderboard {
|
||||||
|
margin-top: 1rem;
|
||||||
|
background: var(--panel);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#help h2, #leaderboard h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: "Orbitron", "Poppins", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#help ul {
|
||||||
|
margin: 0.5rem 0 0 1rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scores {
|
||||||
|
margin: 0.5rem 0 0 1rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scores li {
|
||||||
|
margin: 0.25rem 0;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dialogs */
|
||||||
|
dialog {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--panel-solid);
|
||||||
|
color: var(--text);
|
||||||
|
width: min(520px, calc(100% - 2rem));
|
||||||
|
box-shadow: 0 24px 60px rgba(0,0,0,0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog header h2 {
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
font-family: "Orbitron", "Poppins", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog section {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog label {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog input[type="range"],
|
||||||
|
dialog select,
|
||||||
|
dialog input[type="url"],
|
||||||
|
dialog input[type="file"] {
|
||||||
|
width: 100%;
|
||||||
|
color: var(--text);
|
||||||
|
background: #0f1733;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog menu {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.5rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog button {
|
||||||
|
appearance: none;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: linear-gradient(180deg, #121a3a 0%, #0d1430 100%);
|
||||||
|
color: var(--text);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.5rem 0.85rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog::backdrop {
|
||||||
|
background: rgba(3, 6, 20, 0.6);
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
margin: 1rem 0;
|
||||||
|
color: var(--muted);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus styles */
|
||||||
|
:focus-visible {
|
||||||
|
outline: 2px solid var(--primary);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fullscreen adjustments */
|
||||||
|
#play:fullscreen, /* section fullscreen */
|
||||||
|
#myCanvas:fullscreen {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#play:fullscreen #myCanvas,
|
||||||
|
#myCanvas:fullscreen {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small screens */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
#hud [role="status"] {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
nav[aria-label="Primary"] {
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
nav[aria-label="Primary"] button {
|
||||||
|
padding: 0.5rem 0.65rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<p>Image to use:</p>
|
<a href="#play" aria-label="Skip to game">Skip to Game</a>
|
||||||
<p>Canvas:</p>
|
|
||||||
|
<header>
|
||||||
|
<h1 aria-label="Space Game">
|
||||||
|
<i class="fa-solid fa-rocket" aria-hidden="true"></i>
|
||||||
|
Space Game
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<nav aria-label="Primary">
|
||||||
|
<button type="button" data-action="start" aria-label="Start">
|
||||||
|
<i class="fa-solid fa-play" aria-hidden="true"></i> Start
|
||||||
|
</button>
|
||||||
|
<button type="button" data-action="pause" aria-label="Pause">
|
||||||
|
<i class="fa-solid fa-circle-pause" aria-hidden="true"></i> Pause
|
||||||
|
</button>
|
||||||
|
<button type="button" data-action="reset" aria-label="Reset">
|
||||||
|
<i class="fa-solid fa-rotate-right" aria-hidden="true"></i> Reset
|
||||||
|
</button>
|
||||||
|
<button type="button" data-action="mute" aria-pressed="false" aria-label="Mute">
|
||||||
|
<i class="fa-solid fa-volume-xmark" aria-hidden="true"></i> Mute
|
||||||
|
</button>
|
||||||
|
<button type="button" data-action="fullscreen" aria-label="Toggle fullscreen">
|
||||||
|
<i class="fa-solid fa-expand" aria-hidden="true"></i> Fullscreen
|
||||||
|
</button>
|
||||||
|
<button type="button" data-action="open-settings" aria-controls="settingsDialog" aria-haspopup="dialog">
|
||||||
|
<i class="fa-solid fa-gear" aria-hidden="true"></i> Settings
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="main" tabindex="-1">
|
||||||
|
|
||||||
|
<!-- HUD -->
|
||||||
|
<section id="hud" aria-label="Game HUD">
|
||||||
|
<div role="status" aria-live="polite">
|
||||||
|
<span><i class="fa-solid fa-trophy" aria-hidden="true"></i> Score: <output id="score" name="score">0</output></span>
|
||||||
|
<span><i class="fa-solid fa-layer-group" aria-hidden="true"></i> Level: <output id="level" name="level">1</output></span>
|
||||||
|
<span><i class="fa-solid fa-heart" aria-hidden="true"></i> Lives: <output id="lives" name="lives">3</output></span>
|
||||||
|
<span><i class="fa-solid fa-shield-halved" aria-hidden="true"></i> Shield: <output id="shield" name="shield">100%</output></span>
|
||||||
|
<span><i class="fa-solid fa-gauge" aria-hidden="true"></i> FPS: <output id="fps" name="fps">0</output></span>
|
||||||
|
<span><i class="fa-regular fa-clock" aria-hidden="true"></i> Time: <output id="time" name="time">00:00</output></span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Game Canvas -->
|
||||||
|
<section id="play" aria-label="Game Canvas">
|
||||||
|
<figure>
|
||||||
|
<figcaption>Canvas</figcaption>
|
||||||
|
<canvas id="myCanvas" width="1024" height="768">
|
||||||
|
Your browser does not support the HTML5 canvas tag.
|
||||||
|
</canvas>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Controls Help -->
|
||||||
|
<section id="help" aria-label="Controls Guide">
|
||||||
|
<h2><i class="fa-solid fa-gamepad" aria-hidden="true"></i> Controls</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Move: Arrow keys or WASD</li>
|
||||||
|
<li>Fire: Space</li>
|
||||||
|
<li>Special: Shift</li>
|
||||||
|
<li>Pause: P</li>
|
||||||
|
<li>Toggle Fullscreen: F</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Assets and Audio Hooks (managed by app.js) -->
|
||||||
|
<section id="assets" hidden aria-hidden="true">
|
||||||
|
<h2><i class="fa-regular fa-image" aria-hidden="true"></i> Assets</h2>
|
||||||
|
|
||||||
|
<!-- Optional: let players provide an image URL for background/sprites (read by app.js) -->
|
||||||
|
<label for="bgImageUrl">Background image URL</label>
|
||||||
|
<input id="bgImageUrl" type="url" placeholder="https://example.com/space.jpg" inputmode="url">
|
||||||
|
|
||||||
|
<label for="spriteUpload">Upload sprite images</label>
|
||||||
|
<input id="spriteUpload" type="file" accept="image/*" multiple>
|
||||||
|
|
||||||
|
<!-- Preloadable audio (sources to be provided) -->
|
||||||
|
<audio id="sfxShoot" preload="auto">
|
||||||
|
<source src="assets/audio/shoot.mp3" type="audio/mpeg">
|
||||||
|
</audio>
|
||||||
|
<audio id="sfxExplosion" preload="auto">
|
||||||
|
<source src="assets/audio/explosion.mp3" type="audio/mpeg">
|
||||||
|
</audio>
|
||||||
|
<audio id="bgMusic" preload="auto" loop>
|
||||||
|
<source src="assets/audio/music.mp3" type="audio/mpeg">
|
||||||
|
</audio>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Leaderboard -->
|
||||||
|
<section id="leaderboard" aria-label="Leaderboard">
|
||||||
|
<h2><i class="fa-solid fa-ranking-star" aria-hidden="true"></i> Leaderboard</h2>
|
||||||
|
<ol id="scores">
|
||||||
|
<li data-initials="AAA" data-score="10000">AAA — 10,000</li>
|
||||||
|
<li data-initials="BBB" data-score="8000">BBB — 8,000</li>
|
||||||
|
<li data-initials="CCC" data-score="5000">CCC — 5,000</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Settings Dialog (open via Settings button; JS can call showModal()) -->
|
||||||
|
<dialog id="settingsDialog" aria-labelledby="settingsTitle">
|
||||||
|
<form method="dialog">
|
||||||
|
<header>
|
||||||
|
<h2 id="settingsTitle">
|
||||||
|
<i class="fa-solid fa-sliders" aria-hidden="true"></i>
|
||||||
|
Settings
|
||||||
|
</h2>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<label for="difficulty">Difficulty</label>
|
||||||
|
<select id="difficulty" name="difficulty">
|
||||||
|
<option value="easy">Easy</option>
|
||||||
|
<option value="normal" selected>Normal</option>
|
||||||
|
<option value="hard">Hard</option>
|
||||||
|
<option value="insane">Insane</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<label for="graphics">Graphics</label>
|
||||||
|
<select id="graphics" name="graphics">
|
||||||
|
<option value="low">Low</option>
|
||||||
|
<option value="medium" selected>Medium</option>
|
||||||
|
<option value="high">High</option>
|
||||||
|
<option value="ultra">Ultra</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<label for="musicVolume">Music Volume</label>
|
||||||
|
<input id="musicVolume" name="musicVolume" type="range" min="0" max="100" value="60" />
|
||||||
|
|
||||||
|
<label for="sfxVolume">SFX Volume</label>
|
||||||
|
<input id="sfxVolume" name="sfxVolume" type="range" min="0" max="100" value="80" />
|
||||||
|
|
||||||
|
<label for="controlScheme">Control Scheme</label>
|
||||||
|
<select id="controlScheme" name="controlScheme">
|
||||||
|
<option value="wasd" selected>WASD + Space</option>
|
||||||
|
<option value="arrows">Arrows + Space</option>
|
||||||
|
<option value="custom">Custom</option>
|
||||||
|
</select>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<menu>
|
||||||
|
<button value="cancel" aria-label="Close settings">
|
||||||
|
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
<button value="apply" data-action="apply-settings" aria-label="Apply settings">
|
||||||
|
<i class="fa-solid fa-check" aria-hidden="true"></i>
|
||||||
|
Apply
|
||||||
|
</button>
|
||||||
|
</menu>
|
||||||
|
</form>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
<!-- Pause Overlay (can be shown via JS) -->
|
||||||
|
<dialog id="pauseDialog" aria-labelledby="pauseTitle">
|
||||||
|
<form method="dialog">
|
||||||
|
<h2 id="pauseTitle"><i class="fa-solid fa-circle-pause" aria-hidden="true"></i> Paused</h2>
|
||||||
|
<p>Game is paused.</p>
|
||||||
|
<menu>
|
||||||
|
<button value="resume" data-action="resume">
|
||||||
|
<i class="fa-solid fa-play" aria-hidden="true"></i>
|
||||||
|
Resume
|
||||||
|
</button>
|
||||||
|
<button value="restart" data-action="reset">
|
||||||
|
<i class="fa-solid fa-rotate-right" aria-hidden="true"></i>
|
||||||
|
Restart
|
||||||
|
</button>
|
||||||
|
</menu>
|
||||||
|
</form>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
<canvas id="myCanvas" width="1024" height="768" style="border:1px solid #d3d3d3;">
|
</main>
|
||||||
Your browser does not support the HTML5 canvas tag.</canvas>
|
|
||||||
|
|
||||||
<script src="app.js">
|
<footer>
|
||||||
|
<small>
|
||||||
|
<i class="fa-regular fa-circle-question" aria-hidden="true"></i>
|
||||||
|
Tip: Ensure app.js wires up data-action buttons, dialog show/close, audio, and canvas rendering.
|
||||||
|
</small>
|
||||||
|
</footer>
|
||||||
|
|
||||||
</script>
|
<noscript>
|
||||||
|
JavaScript is required to play this game.
|
||||||
|
</noscript>
|
||||||
|
|
||||||
|
<!-- Keep your game logic here -->
|
||||||
|
<script defer src="app.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,30 +1,56 @@
|
|||||||
# api
|
|
||||||
|
|
||||||
from flask import Flask, request, jsonify
|
from flask import Flask, request, jsonify
|
||||||
from llm import call_llm
|
from llm import call_llm
|
||||||
from flask_cors import CORS
|
from flask_cors import CORS
|
||||||
|
import logging
|
||||||
|
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
CORS(app) # * example.com
|
|
||||||
|
# Configure CORS (allow all origins for development; restrict in production)
|
||||||
|
CORS(app, resources={r"/*": {"origins": "*"}})
|
||||||
|
|
||||||
|
# Set up logging
|
||||||
|
logging.basicConfig(level=logging.INFO)
|
||||||
|
|
||||||
@app.route("/", methods=["GET"])
|
@app.route("/", methods=["GET"])
|
||||||
def index():
|
def index():
|
||||||
return "Welcome to this lesson"
|
"""Root endpoint for API status."""
|
||||||
|
return jsonify({
|
||||||
|
"status": "ok",
|
||||||
|
"message": "Welcome to the Chat Project API"
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.route("/health", methods=["GET"])
|
||||||
|
def health():
|
||||||
|
"""Health check endpoint."""
|
||||||
|
return jsonify({"status": "healthy"}), 200
|
||||||
|
|
||||||
@app.route("/test", methods=["GET"])
|
@app.route("/test", methods=["GET"])
|
||||||
def test():
|
def test():
|
||||||
return "Test"
|
"""Simple test endpoint."""
|
||||||
|
return jsonify({"result": "Test successful"}), 200
|
||||||
|
|
||||||
@app.route("/hello", methods=["POST"])
|
@app.route("/hello", methods=["POST"])
|
||||||
def hello():
|
def hello():
|
||||||
# get message from request body { "message": "do this taks for me" }
|
"""
|
||||||
data = request.get_json()
|
Chat endpoint.
|
||||||
message = data.get("message", "")
|
Expects JSON: { "message": "your message" }
|
||||||
|
Returns: { "response": "LLM response" }
|
||||||
|
"""
|
||||||
|
try:
|
||||||
|
data = request.get_json(force=True)
|
||||||
|
message = data.get("message", "").strip()
|
||||||
|
if not message:
|
||||||
|
logging.warning("No message provided in request.")
|
||||||
|
return jsonify({"error": "No message provided."}), 400
|
||||||
|
|
||||||
response = call_llm(message, "You are a helpful assistant.")
|
logging.info(f"Received message: {message}")
|
||||||
return jsonify({
|
response = call_llm(message, "You are a helpful assistant.")
|
||||||
"response": response
|
return jsonify({"response": response}), 200
|
||||||
})
|
|
||||||
|
except Exception as e:
|
||||||
|
logging.error(f"Error in /hello endpoint: {e}")
|
||||||
|
return jsonify({"error": "Internal server error."}), 500
|
||||||
|
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
app.run(host="0.0.0.0", port=5000)
|
# Run the app with debug mode for development
|
||||||
|
app.run(host="0.0.0.0", port=5000, debug=True)
|
||||||
@ -1,29 +1,53 @@
|
|||||||
import os
|
import os
|
||||||
|
import logging
|
||||||
from openai import OpenAI
|
from openai import OpenAI
|
||||||
|
|
||||||
# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings.
|
# Configure logging
|
||||||
# Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
|
logging.basicConfig(level=logging.INFO)
|
||||||
|
logger = logging.getLogger(__name__)
|
||||||
|
|
||||||
|
# Environment variable check for GitHub token
|
||||||
|
GITHUB_TOKEN = os.environ.get("GITHUB_TOKEN")
|
||||||
|
if not GITHUB_TOKEN:
|
||||||
|
logger.error("GITHUB_TOKEN environment variable not set.")
|
||||||
|
raise EnvironmentError("GITHUB_TOKEN environment variable not set.")
|
||||||
|
|
||||||
|
# Model and endpoint configuration
|
||||||
|
MODEL_NAME = os.environ.get("LLM_MODEL", "openai/gpt-4o-mini")
|
||||||
|
BASE_URL = os.environ.get("LLM_BASE_URL", "https://models.github.ai/inference")
|
||||||
|
|
||||||
|
# Initialize OpenAI client
|
||||||
client = OpenAI(
|
client = OpenAI(
|
||||||
base_url="https://models.github.ai/inference",
|
base_url=BASE_URL,
|
||||||
api_key=os.environ["GITHUB_TOKEN"],
|
api_key=GITHUB_TOKEN,
|
||||||
)
|
)
|
||||||
|
|
||||||
def call_llm(prompt: str, system_message: str):
|
def call_llm(prompt: str, system_message: str, temperature: float = 1.0, max_tokens: int = 4096, top_p: float = 1.0) -> str:
|
||||||
response = client.chat.completions.create(
|
"""
|
||||||
messages=[
|
Calls the LLM with the given prompt and system message.
|
||||||
{
|
Returns the model's response as a string.
|
||||||
"role": "system",
|
"""
|
||||||
"content": system_message,
|
try:
|
||||||
},
|
logger.info(f"Calling LLM model '{MODEL_NAME}' with prompt: {prompt}")
|
||||||
{
|
response = client.chat.completions.create(
|
||||||
"role": "user",
|
messages=[
|
||||||
"content": prompt,
|
{"role": "system", "content": system_message},
|
||||||
}
|
{"role": "user", "content": prompt}
|
||||||
],
|
],
|
||||||
model="openai/gpt-4o-mini",
|
model=MODEL_NAME,
|
||||||
temperature=1,
|
temperature=temperature,
|
||||||
max_tokens=4096,
|
max_tokens=max_tokens,
|
||||||
top_p=1
|
top_p=top_p
|
||||||
)
|
)
|
||||||
|
content = response.choices[0].message.content
|
||||||
|
logger.info("LLM response received successfully.")
|
||||||
|
return content
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"Error calling LLM: {e}")
|
||||||
|
return "Sorry, there was an error processing your request."
|
||||||
|
|
||||||
return response.choices[0].message.content
|
# Example usage (for testing)
|
||||||
|
if __name__ == "__main__":
|
||||||
|
test_prompt = "Hello, how are you?"
|
||||||
|
test_system = "You are a friendly assistant."
|
||||||
|
print(call_llm(test_prompt, test_system))
|
||||||
@ -1,3 +1,108 @@
|
|||||||
.app-nav ul li {
|
.app-nav ul li {
|
||||||
width: max-content;
|
width: max-content;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
/* Body and Typography */
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', Arial, sans-serif;
|
||||||
|
background: #f7f8fa;
|
||||||
|
color: #222;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header Styling */
|
||||||
|
h1, h2, h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 1.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 i, h2 i, h3 i {
|
||||||
|
color: #0078d4;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation Bar */
|
||||||
|
.app-nav {
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||||
|
padding: 1em 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-nav ul {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
gap: 2em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-nav ul li {
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #0078d4;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-nav a:hover {
|
||||||
|
color: #005fa3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card Component */
|
||||||
|
.card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0,0,0,0.07);
|
||||||
|
padding: 2em;
|
||||||
|
margin: 2em 0;
|
||||||
|
transition: box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button Styling */
|
||||||
|
.button {
|
||||||
|
background: #0078d4;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.75em 1.5em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background: #005fa3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font Awesome Icon Styling */
|
||||||
|
.fa {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Layout */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.app-nav ul {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in new issue