feat: initial home page
This commit is contained in:
parent
72e6dd30ae
commit
7c3381549c
9 changed files with 17 additions and 198 deletions
|
|
@ -1,24 +0,0 @@
|
||||||
BSD 2-Clause License
|
|
||||||
|
|
||||||
Copyright (c) 2023, Ayo Ayco
|
|
||||||
|
|
||||||
Redistribution and use in source and binary forms, with or without
|
|
||||||
modification, are permitted provided that the following conditions are met:
|
|
||||||
|
|
||||||
1. Redistributions of source code must retain the above copyright notice, this
|
|
||||||
list of conditions and the following disclaimer.
|
|
||||||
|
|
||||||
2. Redistributions in binary form must reproduce the above copyright notice,
|
|
||||||
this list of conditions and the following disclaimer in the documentation
|
|
||||||
and/or other materials provided with the distribution.
|
|
||||||
|
|
||||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
||||||
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
||||||
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
||||||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
|
||||||
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
|
||||||
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
||||||
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
|
||||||
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
|
||||||
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
||||||
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
# A crazy invention by Kahel and Ayo
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Twists and Shapes and Turns</title>
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
background: black;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script src="./node_modules/matter-js/build/matter.min.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Hello Kahel!</h1>
|
|
||||||
<button onclick="kaboom()">Kaboom!</button>
|
|
||||||
<button onclick="addShape()">Add Shape!</button>
|
|
||||||
<button onclick="clearTheWorld()">Clear the world!</button>
|
|
||||||
<hr />
|
|
||||||
<br />
|
|
||||||
<div id="canvas"></div>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
// module aliases
|
|
||||||
let { Engine, Render, Runner, Bodies, Composite } = Matter;
|
|
||||||
|
|
||||||
// create an engine
|
|
||||||
let engine = Engine.create({
|
|
||||||
timing: {
|
|
||||||
timeScale: 0.3,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const width = window.innerWidth > 0 ? window.innerWidth : screen.width;
|
|
||||||
const height = window.innerHeight > 0 ? window.innerHeight : screen.height;
|
|
||||||
|
|
||||||
// create runner
|
|
||||||
let runner = Runner.create();
|
|
||||||
let ground = Bodies.rectangle(width / 2, height - 300, width / 2, 60, {
|
|
||||||
isStatic: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
// create a renderer
|
|
||||||
let render = Render.create({
|
|
||||||
element: document.getElementById("canvas"),
|
|
||||||
engine: engine,
|
|
||||||
options: {
|
|
||||||
width: width - 18,
|
|
||||||
height: height - 150,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
generateWorld();
|
|
||||||
|
|
||||||
function clearTheWorld() {
|
|
||||||
Composite.clear(engine.world);
|
|
||||||
Composite.add(engine.world, ground);
|
|
||||||
}
|
|
||||||
|
|
||||||
function kaboom() {
|
|
||||||
let manyShapes = new Array(50)
|
|
||||||
.fill()
|
|
||||||
.map(() =>
|
|
||||||
Bodies.polygon(
|
|
||||||
Math.random() * 1 + width / 2,
|
|
||||||
Math.random() * 450 + 1,
|
|
||||||
Math.random() * 16 + 1,
|
|
||||||
Math.random() * 80 + 1
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
// add all of the bodies to the world
|
|
||||||
Composite.add(engine.world, manyShapes);
|
|
||||||
|
|
||||||
// run the engine
|
|
||||||
Runner.run(runner, engine);
|
|
||||||
}
|
|
||||||
|
|
||||||
function addShape() {
|
|
||||||
// to be continued
|
|
||||||
// let oneShape = Bodies.circle(80, 80, 80);
|
|
||||||
let oneShape = Bodies.polygon(
|
|
||||||
// Math.random() * (width / 2) + 1,
|
|
||||||
width / 2,
|
|
||||||
0,
|
|
||||||
Math.random() * 12 + 1,
|
|
||||||
Math.random() * 150 + 100
|
|
||||||
);
|
|
||||||
Composite.add(engine.world, oneShape);
|
|
||||||
|
|
||||||
// run the engine
|
|
||||||
Runner.run(runner, engine);
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateWorld() {
|
|
||||||
Composite.add(engine.world, ground);
|
|
||||||
|
|
||||||
// run the renderer
|
|
||||||
Render.run(render);
|
|
||||||
|
|
||||||
// run the engine
|
|
||||||
Runner.run(runner, engine);
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 977 KiB |
28
static/package-lock.json
generated
28
static/package-lock.json
generated
|
|
@ -1,28 +0,0 @@
|
||||||
{
|
|
||||||
"name": "twists-and-shapes-and-turns",
|
|
||||||
"version": "0.0.1",
|
|
||||||
"lockfileVersion": 2,
|
|
||||||
"requires": true,
|
|
||||||
"packages": {
|
|
||||||
"": {
|
|
||||||
"name": "twists-and-shapes-and-turns",
|
|
||||||
"version": "0.0.1",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"matter-js": "^0.18.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/matter-js": {
|
|
||||||
"version": "0.18.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/matter-js/-/matter-js-0.18.0.tgz",
|
|
||||||
"integrity": "sha512-/ZVem4WygUnbmo/iE4oHZpZS97btfBtYy5Iwn1396vUZU7YhgVEN8J4UWwfZwY1ZqoTYlPgjvSw9WXauuXL0mg=="
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"matter-js": {
|
|
||||||
"version": "0.18.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/matter-js/-/matter-js-0.18.0.tgz",
|
|
||||||
"integrity": "sha512-/ZVem4WygUnbmo/iE4oHZpZS97btfBtYy5Iwn1396vUZU7YhgVEN8J4UWwfZwY1ZqoTYlPgjvSw9WXauuXL0mg=="
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
{
|
|
||||||
"name": "twists-and-shapes-and-turns",
|
|
||||||
"version": "0.0.1",
|
|
||||||
"description": "This is a game about crazy inventions",
|
|
||||||
"main": "index.js",
|
|
||||||
"scripts": {
|
|
||||||
"start": "npx http-server .",
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
|
||||||
"deploy": "scp -r . ayo@ayco.io:~/kaboom/"
|
|
||||||
},
|
|
||||||
"author": "Ayo and Kahel",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"matter-js": "^0.18.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 238 KiB |
|
|
@ -1,26 +1,22 @@
|
||||||
<!DOCTYPE html>
|
<html>
|
||||||
<html lang="en">
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<title>Ayo Ayco</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Twists and Shapes and Turns</title>
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
background: black;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script src="./node_modules/matter-js/build/matter.min.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Hello Kahel!</h1>
|
<header>
|
||||||
<button onclick="kaboom()">Kaboom!</button>
|
<h1>Ayo Ayco</h1>
|
||||||
<button onclick="addShape()">Add Shape!</button>
|
</header>
|
||||||
<button onclick="clearTheWorld()">Clear the world!</button>
|
<main>
|
||||||
<hr />
|
<p></p>
|
||||||
<br />
|
<ul>
|
||||||
<div id="canvas"></div>
|
<li>social: <a href="https://social.ayco.io/@ayo">@ayo@ayco.io</a></li>
|
||||||
<script src="index.js"></script>
|
<li>email: <a href="mailto:ayo@ayco.io">ayo@ayco.io</a></li>
|
||||||
|
<li>blog: <a href="https://ayos.blog">ayos.blog</a></li>
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
© 2022-2024 Ayo Ayco. All Rights Reserved
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue