run prettier
This commit is contained in:
@@ -6,7 +6,8 @@
|
||||
<body>
|
||||
<h1>contenteditable can be applied to visible style tags</h1>
|
||||
<p contenteditable="true">
|
||||
This paragraph is editable, as is the style tag below. Edit it to see the layout change in real time.
|
||||
This paragraph is editable, as is the style tag below. Edit it to see the
|
||||
layout change in real time.
|
||||
</p>
|
||||
<pre>
|
||||
<style contenteditable="true">
|
||||
|
||||
211
static/game.html
211
static/game.html
@@ -1,124 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Test Canvas Game</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="gc">
|
||||
</canvas>
|
||||
<body>
|
||||
<canvas id="gc"> </canvas>
|
||||
<script>
|
||||
//setup
|
||||
c = document.getElementById("gc");
|
||||
cc = c.getContext('2d');
|
||||
c.height = window.innerHeight;
|
||||
c.width = window.innerWidth;
|
||||
c.addEventListener('mousemove', function(e) {
|
||||
p1y = e.clientY - ph / 2;
|
||||
});
|
||||
//setup
|
||||
c = document.getElementById("gc");
|
||||
cc = c.getContext("2d");
|
||||
c.height = window.innerHeight;
|
||||
c.width = window.innerWidth;
|
||||
c.addEventListener("mousemove", function (e) {
|
||||
p1y = e.clientY - ph / 2;
|
||||
});
|
||||
|
||||
lastTime = Date.now();
|
||||
deltaTime = 0;
|
||||
fps = 0;
|
||||
lastTime = Date.now();
|
||||
deltaTime = 0;
|
||||
fps = 0;
|
||||
|
||||
//gameplay variables
|
||||
p1y = p2y = 40;
|
||||
pt = 10;
|
||||
ph = 100;
|
||||
bx = by = xv = yv = 500;//just making sure bx and by exist, they'll be reset when the game first starts
|
||||
bd = 12;
|
||||
score1 = score2 = 0;
|
||||
ais = 5;
|
||||
//gameplay variables
|
||||
p1y = p2y = 40;
|
||||
pt = 10;
|
||||
ph = 100;
|
||||
bx = by = xv = yv = 500; //just making sure bx and by exist, they'll be reset when the game first starts
|
||||
bd = 12;
|
||||
score1 = score2 = 0;
|
||||
ais = 5;
|
||||
|
||||
function reset() {
|
||||
bx = c.width / 2;
|
||||
by = c.height / 2;
|
||||
xv = -xv;
|
||||
yv = 4;
|
||||
}
|
||||
|
||||
|
||||
function reset() {
|
||||
bx = c.width / 2;
|
||||
by = c.height / 2;
|
||||
function update() {
|
||||
//measure timing
|
||||
now = Date.now();
|
||||
deltaTime = (now - lastTime) / 1000;
|
||||
lastTime = now;
|
||||
fps = 1 / deltaTime;
|
||||
//move ball
|
||||
bx += xv * deltaTime;
|
||||
by += yv * deltaTime;
|
||||
if (by < 0 && yv < 0) {
|
||||
yv = -yv;
|
||||
}
|
||||
if (by > c.height && yv > 0) {
|
||||
yv = -yv;
|
||||
}
|
||||
//check collision with sides for scoring
|
||||
if (bx > c.width) {
|
||||
if (by > p2y && by < p2y + ph) {
|
||||
xv = -xv;
|
||||
yv = 4;
|
||||
dy = by - (p2y + ph / 2);
|
||||
yv = dy * 10;
|
||||
} else {
|
||||
score1++;
|
||||
reset();
|
||||
}
|
||||
}
|
||||
|
||||
function update() {
|
||||
//measure timing
|
||||
now = Date.now();
|
||||
deltaTime = (now-lastTime)/1000;
|
||||
lastTime = now;
|
||||
fps = 1/deltaTime;
|
||||
//move ball
|
||||
bx += xv * deltaTime;
|
||||
by += yv * deltaTime;
|
||||
if (by < 0 && yv < 0) {
|
||||
yv = -yv;
|
||||
}
|
||||
if (by > c.height && yv > 0) {
|
||||
yv = -yv;
|
||||
}
|
||||
//check collision with sides for scoring
|
||||
if (bx > c.width) {
|
||||
if (by > p2y && by < p2y + ph) {
|
||||
xv = -xv;
|
||||
dy = by - (p2y + ph / 2);
|
||||
yv = dy * 10;
|
||||
} else {
|
||||
score1++;
|
||||
reset();
|
||||
}
|
||||
}
|
||||
if (bx < 0) {
|
||||
if (by > p1y && by < p1y + ph) {
|
||||
xv = -xv;
|
||||
dy = by - (p1y + ph / 2);
|
||||
yv = dy * 10;//.3
|
||||
} else {
|
||||
score2++
|
||||
reset();
|
||||
}
|
||||
}
|
||||
//ai
|
||||
if (p2y + ph / 2 < by) {
|
||||
p2y += ais;
|
||||
} else {
|
||||
p2y -= ais;
|
||||
}
|
||||
//draw background
|
||||
var gradient=cc.createLinearGradient(0,0,c.width,c.height);
|
||||
gradient.addColorStop("0","#ff146e");
|
||||
gradient.addColorStop("1","#145aff");
|
||||
cc.fillStyle=gradient;
|
||||
// cc.fillStyle="white";
|
||||
cc.fillRect(0, 0, c.width, c.height);
|
||||
//draw paddles
|
||||
cc.fillStyle = 'cyan';
|
||||
cc.fillRect(0, p1y, pt, ph);
|
||||
cc.fillStyle = 'red';
|
||||
cc.fillRect(c.width - pt, p2y, pt, ph);
|
||||
//draw ball
|
||||
cc.fillStyle = 'lightgreen';
|
||||
cc.fillRect(bx - bd / 2, by - bd / 2, bd, bd);
|
||||
//draw scores
|
||||
cc.fillStyle = 'white';
|
||||
cc.font = '20px Times'
|
||||
cc.fillText(score1, 100, 100);
|
||||
cc.fillText(score2, c.width - 100, 100);
|
||||
//draw framerate
|
||||
cc.fillText("framerate: " + fps, c.width/2 - 100, 100);
|
||||
|
||||
window.requestAnimationFrame(update); //Keep the game running
|
||||
if (bx < 0) {
|
||||
if (by > p1y && by < p1y + ph) {
|
||||
xv = -xv;
|
||||
dy = by - (p1y + ph / 2);
|
||||
yv = dy * 10; //.3
|
||||
} else {
|
||||
score2++;
|
||||
reset();
|
||||
}
|
||||
}
|
||||
reset() //prepare the game
|
||||
update() //start the game
|
||||
//ai
|
||||
if (p2y + ph / 2 < by) {
|
||||
p2y += ais;
|
||||
} else {
|
||||
p2y -= ais;
|
||||
}
|
||||
//draw background
|
||||
var gradient = cc.createLinearGradient(0, 0, c.width, c.height);
|
||||
gradient.addColorStop("0", "#ff146e");
|
||||
gradient.addColorStop("1", "#145aff");
|
||||
cc.fillStyle = gradient;
|
||||
// cc.fillStyle="white";
|
||||
cc.fillRect(0, 0, c.width, c.height);
|
||||
//draw paddles
|
||||
cc.fillStyle = "cyan";
|
||||
cc.fillRect(0, p1y, pt, ph);
|
||||
cc.fillStyle = "red";
|
||||
cc.fillRect(c.width - pt, p2y, pt, ph);
|
||||
//draw ball
|
||||
cc.fillStyle = "lightgreen";
|
||||
cc.fillRect(bx - bd / 2, by - bd / 2, bd, bd);
|
||||
//draw scores
|
||||
cc.fillStyle = "white";
|
||||
cc.font = "20px Times";
|
||||
cc.fillText(score1, 100, 100);
|
||||
cc.fillText(score2, c.width - 100, 100);
|
||||
//draw framerate
|
||||
cc.fillText("framerate: " + fps, c.width / 2 - 100, 100);
|
||||
|
||||
window.requestAnimationFrame(update); //Keep the game running
|
||||
}
|
||||
reset(); //prepare the game
|
||||
update(); //start the game
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="link/to/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="">a tags are for links</a>
|
||||
<p>p tags are for paragraphs</p>
|
||||
<h1>h1 through h6 are for headers</h1>
|
||||
<img src="path/to/image.jpg" alt="imgs are for images">
|
||||
<div>divs are just boxes</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="link/to/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="">a tags are for links</a>
|
||||
<p>p tags are for paragraphs</p>
|
||||
<h1>h1 through h6 are for headers</h1>
|
||||
<img src="path/to/image.jpg" alt="imgs are for images" />
|
||||
<div>divs are just boxes</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,77 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Robotic Chuck</title>
|
||||
<style>
|
||||
body {
|
||||
margin: auto;
|
||||
max-width: 800px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
code,
|
||||
#output {
|
||||
padding: 5px;
|
||||
background: #eee;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
/*max-width: 800px;*/
|
||||
}
|
||||
|
||||
#genbutton {
|
||||
color: white;
|
||||
background: #01C106;
|
||||
padding: 1em;
|
||||
border: 1px solid #1E7931;
|
||||
font-size: 1em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
body {
|
||||
margin: auto;
|
||||
max-width: 800px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
<body>
|
||||
code,
|
||||
#output {
|
||||
padding: 5px;
|
||||
background: #eee;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
/*max-width: 800px;*/
|
||||
}
|
||||
|
||||
#genbutton {
|
||||
color: white;
|
||||
background: #01c106;
|
||||
padding: 1em;
|
||||
border: 1px solid #1e7931;
|
||||
font-size: 1em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
console.log("load");
|
||||
function generate() {
|
||||
console.log("go!");
|
||||
var inBox = document.getElementById("in");
|
||||
console.log(inBox.value);
|
||||
var links = JSON.parse(inBox.value);
|
||||
var outBox = document.getElementById("output");
|
||||
var titleBox = document.getElementById("titleIn");
|
||||
var descBox = document.getElementById("description");
|
||||
var tstring = "<style>.here,.invmenu a{font-style:italic}.here{font-size:14px;font-weight:400;color:grey}.invmenu{padding:5px 20px;margin:10px 0}</style>\n";
|
||||
tstring = tstring + "<" + "div class=\"invmenu\" style=\"max-width:100%;background: #f2f2f2;\">\n<h3 style=\"text-align:left;\">" + titleBox.value + "</h3>\n<p><em>";
|
||||
tstring = tstring + descBox.value + "</em></p>\n<hr style=\"border: 1px solid #cfcfcf\">\n"
|
||||
formatter = links.map((object) => "<h4><a href=\"" + object.url + "\">" + object.headline + "</a></h4>\n");
|
||||
tstring = tstring + formatter.join("");
|
||||
tstring = tstring + "</div>"
|
||||
console.log(tstring);
|
||||
outBox.innerText = tstring;
|
||||
outBox.style.minHeight = (formatter.length + 9) + "em";
|
||||
document.getElementById("preview").innerHTML = tstring;
|
||||
}
|
||||
console.log("load");
|
||||
function generate() {
|
||||
console.log("go!");
|
||||
var inBox = document.getElementById("in");
|
||||
console.log(inBox.value);
|
||||
var links = JSON.parse(inBox.value);
|
||||
var outBox = document.getElementById("output");
|
||||
var titleBox = document.getElementById("titleIn");
|
||||
var descBox = document.getElementById("description");
|
||||
var tstring =
|
||||
"<style>.here,.invmenu a{font-style:italic}.here{font-size:14px;font-weight:400;color:grey}.invmenu{padding:5px 20px;margin:10px 0}</style>\n";
|
||||
tstring =
|
||||
tstring +
|
||||
"<" +
|
||||
'div class="invmenu" style="max-width:100%;background: #f2f2f2;">\n<h3 style="text-align:left;">' +
|
||||
titleBox.value +
|
||||
"</h3>\n<p><em>";
|
||||
tstring =
|
||||
tstring +
|
||||
descBox.value +
|
||||
'</em></p>\n<hr style="border: 1px solid #cfcfcf">\n';
|
||||
formatter = links.map(
|
||||
(object) =>
|
||||
'<h4><a href="' +
|
||||
object.url +
|
||||
'">' +
|
||||
object.headline +
|
||||
"</a></h4>\n"
|
||||
);
|
||||
tstring = tstring + formatter.join("");
|
||||
tstring = tstring + "</div>";
|
||||
console.log(tstring);
|
||||
outBox.innerText = tstring;
|
||||
outBox.style.minHeight = formatter.length + 9 + "em";
|
||||
document.getElementById("preview").innerHTML = tstring;
|
||||
}
|
||||
</script>
|
||||
|
||||
<p></p>
|
||||
<p>Title of box:</p> <input type="text" id="titleIn" placeholder="Investigating Hope: The Series">
|
||||
<p>Title of box:</p>
|
||||
<input
|
||||
type="text"
|
||||
id="titleIn"
|
||||
placeholder="Investigating Hope: The Series"
|
||||
/>
|
||||
<p>Description text:</p>
|
||||
<input type="text" id="description" placeholder="This article is one in a series of investigative pieces about a complaint filed with ASU regarding accusations against on-campus ministry Hope Church.">
|
||||
<input
|
||||
type="text"
|
||||
id="description"
|
||||
placeholder="This article is one in a series of investigative pieces about a complaint filed with ASU regarding accusations against on-campus ministry Hope Church."
|
||||
/>
|
||||
<p>Enter the links to generate according to this format:</p>
|
||||
<pre><code class="json">[
|
||||
{
|
||||
@@ -87,20 +111,37 @@
|
||||
"url": "yet-another-url"
|
||||
}
|
||||
]</code></pre>
|
||||
<p>This format is known as JSON, it's an internet standard that's supposed to be easy for humans and computers to read.
|
||||
Note how commas are used to separate multiple items but are never used after the last item in a set. This is important,
|
||||
it will not work if you include a trailing comma where there should not be one.</p>
|
||||
<textarea name="input" id="in" cols="100" rows="30" placeholder="Please be careful, this will not work if you format the JSON incorrectly"></textarea>
|
||||
<p><a id="genbutton" href="#output" onclick="generate()">Generate Code</a></p>
|
||||
<p>
|
||||
This format is known as JSON, it's an internet standard that's supposed to
|
||||
be easy for humans and computers to read. Note how commas are used to
|
||||
separate multiple items but are never used after the last item in a set.
|
||||
This is important, it will not work if you include a trailing comma where
|
||||
there should not be one.
|
||||
</p>
|
||||
<textarea
|
||||
name="input"
|
||||
id="in"
|
||||
cols="100"
|
||||
rows="30"
|
||||
placeholder="Please be careful, this will not work if you format the JSON incorrectly"
|
||||
></textarea>
|
||||
<p>
|
||||
<a id="genbutton" href="#output" onclick="generate()">Generate Code</a>
|
||||
</p>
|
||||
<p>Paste the following code into a safeembed</p>
|
||||
<textarea id="output" cols="100" readonly></textarea>
|
||||
<p><em> Don't forget:</em> For each page you embed on, add the following bit of code just before the <code></h4></code> at the end of the line on the line that corresponds to the current page.</p>
|
||||
<p>
|
||||
<em> Don't forget:</em> For each page you embed on, add the following bit
|
||||
of code just before the <code></h4></code> at the end of the line on
|
||||
the line that corresponds to the current page.
|
||||
</p>
|
||||
<pre><code><span class="here">(You are here)</span></code></pre>
|
||||
|
||||
<p>The code generated will look roughly like this:</P>
|
||||
<div id="preview" style="max-width: 800px;"></div>
|
||||
<p>Gryphon overrides certain styles by default, so make sure to test on your article.</p>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<p>The code generated will look roughly like this:</p>
|
||||
<div id="preview" style="max-width: 800px"></div>
|
||||
<p>
|
||||
Gryphon overrides certain styles by default, so make sure to test on your
|
||||
article.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user