Merge pull request 'main' (#25) from sageTheDm/pages:main into main
Reviewed-on: https://interstellardevelopment.org/code/code/interstellar_development/interstellar_website/pulls/25
This commit is contained in:
commit
a86124a754
20 changed files with 339 additions and 30 deletions
6
favicon_io/about.txt
Normal file
6
favicon_io/about.txt
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
This favicon was generated using the following graphics from Twitter Twemoji:
|
||||||
|
|
||||||
|
- Graphics Title: 1f680.svg
|
||||||
|
- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
|
||||||
|
- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f680.svg
|
||||||
|
- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
|
BIN
favicon_io/android-chrome-192x192.png
Normal file
BIN
favicon_io/android-chrome-192x192.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
BIN
favicon_io/android-chrome-512x512.png
Normal file
BIN
favicon_io/android-chrome-512x512.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 47 KiB |
BIN
favicon_io/apple-touch-icon.png
Normal file
BIN
favicon_io/apple-touch-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 13 KiB |
BIN
favicon_io/favicon-16x16.png
Normal file
BIN
favicon_io/favicon-16x16.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 751 B |
BIN
favicon_io/favicon-32x32.png
Normal file
BIN
favicon_io/favicon-32x32.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.6 KiB |
BIN
favicon_io/favicon.ico
Normal file
BIN
favicon_io/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
1
favicon_io/site.webmanifest
Normal file
1
favicon_io/site.webmanifest
Normal file
|
@ -0,0 +1 @@
|
||||||
|
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
15
footer.js
15
footer.js
|
@ -45,7 +45,6 @@ class Footer extends HTMLElement {
|
||||||
|
|
||||||
customElements.define('footer-component', Footer);
|
customElements.define('footer-component', Footer);
|
||||||
|
|
||||||
// @license-end
|
|
||||||
|
|
||||||
// CSS for the hidden button
|
// CSS for the hidden button
|
||||||
const style = document.createElement('style');
|
const style = document.createElement('style');
|
||||||
|
@ -59,10 +58,12 @@ style.textContent = `
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-content:hover .secret-button {
|
.footer-content:hover .secret-button {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
document.head.appendChild(style);
|
document.head.appendChild(style);
|
||||||
|
|
||||||
|
// @license-end
|
18
index.html
18
index.html
|
@ -24,6 +24,24 @@
|
||||||
<script src="header.js" type="text/javascript" defer></script>
|
<script src="header.js" type="text/javascript" defer></script>
|
||||||
<script src="footer.js" type="text/javascript" defer></script>
|
<script src="footer.js" type="text/javascript" defer></script>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="favicon_io/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="favicon_io/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="favicon_io/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="favicon_io/site.webmanifest" />
|
||||||
<title>Interstellar Development</title>
|
<title>Interstellar Development</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,24 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Game Landing Page</title>
|
<title>Game Landing Page</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="../../favicon_io/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="../../favicon_io/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="../../favicon_io/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="../../favicon_io/site.webmanifest" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="landing-page">
|
<div class="landing-page">
|
||||||
|
|
|
@ -5,6 +5,24 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Asteroid Shooter</title>
|
<title>Asteroid Shooter</title>
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="../../favicon_io/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="../../favicon_io/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="../../favicon_io/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="../../favicon_io/site.webmanifest" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="gameCanvas"></canvas>
|
<canvas id="gameCanvas"></canvas>
|
||||||
|
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Endless runner</title>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="../../favicon_io/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="../../favicon_io/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="../../favicon_io/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="../../favicon_io/site.webmanifest" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="game-container">
|
||||||
|
<canvas id="gameCanvas"></canvas>
|
||||||
|
<button id="restartBtn" onclick="restartGame()">Restart</button>
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,78 @@
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
|
export default function EndlessRunner() {
|
||||||
|
const canvasRef = useRef(null);
|
||||||
|
const [running, setRunning] = useState(true);
|
||||||
|
const player = { x: 50, y: 150, width: 20, height: 20, dy: 0 };
|
||||||
|
const gravity = 0.5;
|
||||||
|
let obstacles = [];
|
||||||
|
let score = 0;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const canvas = canvasRef.current;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = 300;
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
if (!running) return;
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Player physics
|
||||||
|
player.dy += gravity;
|
||||||
|
player.y += player.dy;
|
||||||
|
if (player.y > 150) {
|
||||||
|
player.y = 150;
|
||||||
|
player.dy = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw player
|
||||||
|
ctx.fillStyle = "blue";
|
||||||
|
ctx.fillRect(player.x, player.y, player.width, player.height);
|
||||||
|
|
||||||
|
// Obstacles
|
||||||
|
if (Math.random() < 0.02) {
|
||||||
|
obstacles.push({ x: canvas.width, y: 150, width: 20, height: 20 });
|
||||||
|
}
|
||||||
|
obstacles = obstacles.map(obstacle => ({ ...obstacle, x: obstacle.x - 5 }));
|
||||||
|
obstacles = obstacles.filter(obstacle => obstacle.x + obstacle.width > 0);
|
||||||
|
|
||||||
|
obstacles.forEach(obstacle => {
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
|
||||||
|
|
||||||
|
// Collision detection
|
||||||
|
if (
|
||||||
|
player.x < obstacle.x + obstacle.width &&
|
||||||
|
player.x + player.width > obstacle.x &&
|
||||||
|
player.y < obstacle.y + obstacle.height &&
|
||||||
|
player.y + player.height > obstacle.y
|
||||||
|
) {
|
||||||
|
setRunning(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Score
|
||||||
|
score++;
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillText("Score: " + score, 10, 20);
|
||||||
|
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
|
||||||
|
update();
|
||||||
|
}, [running]);
|
||||||
|
|
||||||
|
function jump() {
|
||||||
|
if (player.y >= 150) {
|
||||||
|
player.dy = -10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<canvas ref={canvasRef} className="border" onClick={jump}></canvas>
|
||||||
|
{!running && <button onClick={() => window.location.reload()} className="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Restart</button>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,34 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-container {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
border: 2px solid black;
|
||||||
|
background-color: white;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#restartBtn {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: #007bff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#restartBtn:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
}
|
|
@ -5,6 +5,24 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Guess My Number</title>
|
<title>Guess My Number</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="../../favicon_io/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="../../favicon_io/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="../../favicon_io/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="../../favicon_io/site.webmanifest" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="gameboy">
|
<div class="gameboy">
|
||||||
|
|
|
@ -5,6 +5,24 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Secret Game Collection</title>
|
<title>Secret Game Collection</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="../favicon_io/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="../favicon_io/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="../favicon_io/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="../favicon_io/site.webmanifest" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
|
@ -1,30 +1,60 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Minesweeper</title>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="../../favicon_io/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="../../favicon_io/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="../../favicon_io/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="../../favicon_io/site.webmanifest" />
|
||||||
|
</head>
|
||||||
|
|
||||||
<head>
|
<body>
|
||||||
<meta charset="UTF-8" />
|
<div id="settings">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<h1>Minesweeper</h1>
|
||||||
<title>Minesweeper</title>
|
<label for="gridSize">Grid Size:</label>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<input
|
||||||
</head>
|
type="number"
|
||||||
|
id="gridSize"
|
||||||
|
min="6"
|
||||||
|
max="25"
|
||||||
|
value="9"
|
||||||
|
aria-label="Grid Size"
|
||||||
|
/>
|
||||||
|
|
||||||
<body>
|
<label for="bombs">Number of Bombs:</label>
|
||||||
<div id="settings">
|
<input
|
||||||
<h1>Minesweeper</h1>
|
type="number"
|
||||||
<label for="gridSize">Grid Size:</label>
|
id="bombs"
|
||||||
<input type="number" id="gridSize" min="6" max="25" value="9" aria-label="Grid Size" />
|
min="1"
|
||||||
|
max="300"
|
||||||
|
value="9"
|
||||||
|
aria-label="Number of Bombs"
|
||||||
|
/>
|
||||||
|
|
||||||
<label for="bombs">Number of Bombs:</label>
|
<button id="startGame">Start Game</button>
|
||||||
<input type="number" id="bombs" min="1" max="300" value="9" aria-label="Number of Bombs" />
|
</div>
|
||||||
|
|
||||||
<button id="startGame">Start Game</button>
|
<div class="container">
|
||||||
</div>
|
<canvas id="game"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<script src="script.js"></script>
|
||||||
<canvas id="game"></canvas>
|
</body>
|
||||||
</div>
|
</html>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
|
@ -5,6 +5,24 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Snake - Game</title>
|
<title>Snake - Game</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="../../favicon_io/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="../../favicon_io/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="../../favicon_io/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="../../favicon_io/site.webmanifest" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="gameboy">
|
<div class="gameboy">
|
||||||
|
|
|
@ -5,6 +5,24 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Game Collection</title>
|
<title>Game Collection</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="../favicon_io/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="../favicon_io/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="../favicon_io/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="../favicon_io/site.webmanifest" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
Loading…
Add table
Reference in a new issue