jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-19 18:27:29 -05:00
Code Issues Projects Releases Wiki Activity

remove examples folder (#1884)

Browse Source 
* remove examples folder

* remove examples tests
This commit is contained in:
Fabio Pliger
2023-12-05 15:19:11 -06:00
committed by GitHub
parent 8e5605fa42
commit 8b6b055681
93 changed files with 0 additions and 6239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
examples/assets/css/examples.css
View File

@@ -1,91 +0,0 @@
body {
margin: 0;
}
.pyscript {
margin: 0.5rem;
}
.code {
display: flex;
position: absolute;
right: 0px;
z-index: 9998;
top: 7rem;
}
@media (max-width: 1300px) {
.code:has(> .code-section-visible) {
width: 90%;
/* Absolute position is messing up the layout on small screens */
right: 70px;
}
}
.code-section-hidden {
width: 0px;
display: none;
}
.code-section-visible {
display: flex;
flex-direction: column;
width: 100%;
background-color: rgb(45 46 53 / 90%);
padding: 1rem;
border-radius: 10px 0px 0px 10px;
color: #c6c6c8;
}
.code-section-visible p {
margin: 0;
font-style: italic;
font-size: small;
}
.language-html,
.language-python {
float: left;
}
#view-code-button {
writing-mode: tb-rl;
text-orientation: sideways-right;
background-color: #1d1d22;
color: white;
padding: 0.5rem;
border-radius: 5px;
cursor: pointer;
height: 81px;
}
nav {
position: sticky;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.logo {
padding-right: 10px;
font-size: 28px;
height: 30px;
max-width: inherit;
}
.title {
text-decoration: none;
text-decoration-line: none;
text-decoration-style: initial;
text-decoration-color: initial;
font-weight: 400;
font-size: 1.5em;
line-height: 2em;
white-space: nowrap;
}
.app-header {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}

74
examples/assets/css/index.css
View File

@@ -1,74 +0,0 @@
.example {
margin-bottom: 5rem;
}
.example h2 {
/* color: #000000; */
font-family: "Inconsolata", monospace;
font-size: 2.25rem;
margin-bottom: 1rem;
}
.card {
height: 15rem;
background-color: var(--color-secondary);
padding: 1rem;
border-radius: 10px;
}
.card:hover,
.card:hover a,
.card:hover a:visited,
.card:hover h2 {
background-color: var(--color-primary);
color: #1d1d22;
}
.card a h2 {
color: var(--color-primary);
margin: 0;
font-family: "Inconsolata", monospace;
font-size: 2.25rem;
}
.card a p {
color: var(--text-color);
}
a .card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-content a,
.card-content a:visited {
color: var(--color-primary);
}
.container-card {
max-width: 1500px;
margin: 0 auto;
display: grid;
gap: 1rem;
}
@media (min-width: 600px) {
.container-card {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.container-card {
grid-template-columns: repeat(4, 1fr);
}
}

25
examples/assets/css/main.css
View File

@@ -1,25 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap");
@import "./variables.css";
@import "./reset.css";
body {
background: #2d2e35
url("https://assets.anaconda.com/production/Content/1650828148240.png?w=3240&auto=compress%2Cformat&fit=crop&dm=1650828161&s=c558dc55e0ed1f8419a892e842a5728f")
repeat-x center bottom / 250px;
background-attachment: fixed;
overflow-x: hidden;
color: var(--text-color);
}
.container {
max-width: 1510px;
margin: auto;
padding: 0 2rem;
}
.title-main {
font-size: 4.25rem;
font-family: "Inconsolata", monospace;
text-align: center;
margin: 2rem 0;
}

22
examples/assets/css/reset.css
View File

@@ -1,22 +0,0 @@
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
body {
font-size: 100%;
list-style-type: none;
}
p {
font-family: "Inconsolata", monospace;
font-weight: 400;
}
a {
text-decoration: none;
}

6
examples/assets/css/variables.css
View File

@@ -1,6 +0,0 @@
:root {
--color-primary: #fda703;
--color-secondary: #1d1d22;
--text-color: white;
--card-shadow: 0px 5px 11px 0px rgb(0 0 0 / 15%);
}

3
examples/assets/prism/prism.min.css vendored
View File

@@ -1,3 +0,0 @@
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+clike+javascript+python */
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

7
examples/assets/prism/prism.min.js vendored
View File

File diff suppressed because one or more lines are too long

29
examples/await/await0.html
View File

@@ -1,29 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await BLOCKING LOOP Pyscript Twice</title>
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-script>
import js
import asyncio
for i in range(3):
js.console.log('A', i)
await asyncio.sleep(0.1)
</py-script>
<py-script>
import js
import asyncio
for i in range(3):
js.console.log('B', i)
await asyncio.sleep(0.1)
</py-script>
</body>
</html>

45
examples/await/await1.html
View File

@@ -1,45 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await BLOCKING LOOP Pyscript Twice</title>
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<div>
Pyscript - FIRST ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
async def asyncCallLoop1():
for i in range(3):
js.console.log('A', i)
await asyncio.sleep(2)
asyncCallLoop1()
</py-script>
</div>
<div>
Pyscript - SECOND ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
async def asyncCallLoop2():
for i in range(3):
js.console.log('B', i)
await asyncio.sleep(2)
asyncCallLoop2()
</py-script>
</div>
</body>
</html>

42
examples/await/await2.html
View File

@@ -1,42 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await BLOCKING LOOP Pyscript Twice</title>
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<div>
Pyscript - FIRST ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
async def asyncCallLoop1():
for i in range(3):
js.console.log('A', i)
await asyncio.sleep(2)
asyncCallLoop1()
</py-script>
</div>
<div>
Pyscript - SECOND ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
for i in range(3):
js.console.log('B', i)
await asyncio.sleep(2)
</py-script>
</div>
</body>
</html>

45
examples/await/await3.html
View File

@@ -1,45 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await NON-BLOCKING Pyscript Twice</title>
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<div>
Pyscript - FIRST ASYNC WITH NON-BLOCKING AWAIT AT ONE LEVEL LOWER
THAN LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
async def asyncCall1():
await asyncio.sleep(2)
for i in range(3):
js.console.log('A', i)
asyncCall1()
</py-script>
</div>
<div>
Pyscript - SECOND ASYNC WITH NON-BLOCKING AWAIT AT ONE LEVEL LOWER
THAN LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
async def asyncCall2():
await asyncio.sleep(2)
for i in range(3):
js.console.log('B', i)
asyncCall2()
</py-script>
</div>
</body>
</html>

39
examples/await/await4.html
View File

@@ -1,39 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await BLOCKING LOOP Pyscript Twice</title>
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<div>
Pyscript - FIRST ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
for i in range(3):
js.console.log('A', i)
await asyncio.sleep(2)
</py-script>
</div>
<div>
Pyscript - SECOND ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
for i in range(3):
js.console.log('B', i)
await asyncio.sleep(2)
</py-script>
</div>
</body>
</html>

22
examples/await/await5.html
View File

@@ -1,22 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await BLOCKING LOOP Pyscript Twice</title>
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-script>
import asyncio
from itertools import count
for i in count():
print(f"Count: {i}")
await asyncio.sleep(1)
</py-script>
</body>
</html>

138
examples/d3.html
View File

@@ -1,138 +0,0 @@
<html>
<head>
<title>d3: JavaScript & PyScript visualizations side-by-side</title>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.loading {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: black;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<nav class="navbar" style="background-color: #000000">
<div class="app-header">
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" href="" style="color: #f0ab3c"
>Simple d3 visualization</a
>
</div>
</nav>
<section class="pyscript">
<py-tutor modules="d3.py">
<py-config>
plugins = [
"https://pyscript.net/latest/plugins/python/py_tutor.py"
]
[[fetch]]
files = ["./d3.py"]
</py-config>
</py-tutor>
<b>
Based on
<i
><a
href="https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3>"
>Learn D3: Shapes</a
></i
>
tutorial.
</b>
<div style="display: flex; flex-direction: row">
<div>
<div style="text-align: center">JavaScript version</div>
<div id="js" style="width: 400px; height: 400px">
<div class="loading"></div>
</div>
</div>
<div>
<div style="text-align: center">PyScript version</div>
<div id="py" style="width: 400px; height: 400px">
<div class="loading"></div>
</div>
</div>
</div>
<py-script src="d3.py"></py-script>
</section>
<script type="module">
const fruits = [
{ name: "🍊", count: 21 },
{ name: "🍇", count: 13 },
{ name: "🍏", count: 8 },
{ name: "🍌", count: 5 },
{ name: "🍐", count: 3 },
{ name: "🍋", count: 2 },
{ name: "🍎", count: 1 },
{ name: "🍉", count: 1 },
];
const fn = (d) => d.count;
const data = d3.pie().value(fn)(fruits);
const arc = d3
.arc()
.innerRadius(210)
.outerRadius(310)
.padRadius(300)
.padAngle(2 / 300)
.cornerRadius(8);
const js = d3.select("#js");
js.select(".loading").remove();
const svg = js
.append("svg")
.attr("viewBox", "-320 -320 640 640")
.attr("width", "400")
.attr("height", "400");
for (const d of data) {
svg.append("path").style("fill", "steelblue").attr("d", arc(d));
const text = svg
.append("text")
.style("fill", "white")
.attr(
"transform",
`translate(${arc.centroid(d).join(",")})`,
)
.attr("text-anchor", "middle");
text.append("tspan")
.style("font-size", "24")
.attr("x", "0")
.text(d.data.name);
text.append("tspan")
.style("font-size", "18")
.attr("x", "0")
.attr("dy", "1.3em")
.text(d.value);
}
</script>
</body>
</html>

64
examples/d3.py
View File

@@ -1,64 +0,0 @@
import js
from pyodide.ffi import create_proxy, to_js
d3 = js.d3
fruits = [
{"name": "🍊", "count": 21},
{"name": "🍇", "count": 13},
{"name": "🍏", "count": 8},
{"name": "🍌", "count": 5},
{"name": "🍐", "count": 3},
{"name": "🍋", "count": 2},
{"name": "🍎", "count": 1},
{"name": "🍉", "count": 1},
]
fn = create_proxy(lambda d, *_: d["count"])
data = d3.pie().value(fn)(to_js(fruits))
arc = (
d3.arc()
.innerRadius(210)
.outerRadius(310)
.padRadius(300)
.padAngle(2 / 300)
.cornerRadius(8)
)
py = d3.select("#py")
py.select(".loading").remove()
svg = (
py.append("svg")
.attr("viewBox", "-320 -320 640 640")
.attr("width", "400")
.attr("height", "400")
)
for d in data:
d_py = d.to_py()
(svg.append("path").style("fill", "steelblue").attr("d", arc(d)))
text = (
svg.append("text")
.style("fill", "white")
.attr("transform", f"translate({arc.centroid(d).join(',')})")
.attr("text-anchor", "middle")
)
(
text.append("tspan")
.style("font-size", "24")
.attr("x", "0")
.text(d_py["data"]["name"])
)
(
text.append("tspan")
.style("font-size", "18")
.attr("x", "0")
.attr("dy", "1.3em")
.text(d_py["value"])
)

2
examples/handtrack/lib/handtrack.min.js vendored
View File

File diff suppressed because one or more lines are too long

137
examples/handtrack/say_hello.html
View File

@@ -1,137 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Say Hello</title>
<link rel="icon" type="image/png" href="../favicon.png" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-script>
from js import handTrack, requestAnimationFrame, console
from pyodide import create_once_callable
import asyncio
update_note = Element("update-note")
canvas = Element("canvas")
video = Element("myvideo")
context = canvas.element.getContext("2d")
isVideo = False
model = None
modelParams = {
"flipHorizontal": True, # flip e.g for video
"maxNumBoxes": 20, # maximum number of boxes to detect
"iouThreshold": 0.5, # ioU threshold for non-max suppression
"scoreThreshold": 0.6, # confidence threshold for predictions.
}
def toggle_video():
global isVideo
if (not isVideo):
update_note.write("Starting video")
pyscript.run_until_complete(start_video())
else:
update_note.write("Stopping video")
handTrack.stopVideo(video.element)
isVideo = False
update_note.write("Video stopped")
async def start_video():
global isVideo
update_note.write("Inside sstart video")
status = await handTrack.startVideo(video.element)
console.log("video started", status)
if status:
update_note.write("Video started. Now tracking")
isVideo = True
console.log( "Calling RUN DETECTION")
y = await run_detection()
else:
update_note.write( "Please enable video")
def sync_run_detection(evt):
pyscript.run_until_complete(run_detection())
async def run_detection():
console.log("in RUN DETECTION: ");
global model
global isVideo
console.log("...1")
predictions = await model.detect(video.element)
console.log("done...1")
console.log("Predictions: ", predictions);
model.renderPredictions(predictions, canvas.element, context, video.element);
console.log("is Video?", isVideo)
if (isVideo):
console.log("requestingAnimation!")
await requestAnimationFrame(create_once_callable(sync_run_detection));
console.log("...2")
def run_detection_image(img):
console.log("in RUN DETECTION IMAGE", predictions);
global model
def detect(predition):
console.log("Predictions: ", predictions);
model.renderPredictions(predictions, canvas, context, img);
console.log("...3")
model.detect(img).then(detect)
console.log("...4")
def handle_model(lmodel):
global model
model = lmodel
update_note.write("Loaded Model!")
async def start():
console.log("creating x")
console.log("calling x")
model = await handTrack.load(modelParams)#.then(handle_model)
console.log("loaded model!")
console.log(model)
handle_model(model)
print(dir(x))
print(x)
pyscript.run_until_complete(start())
#});
</py-script>
<div class="mb10">
<button
id="trackbutton"
class="bx--btn bx--btn--secondary"
type="button"
py-click="toggle_video()"
>
Toggle Video
</button>
<button
id="nextimagebutton"
class="mt10 bx--btn bx--btn--secondary"
type="button"
disabled
>
Next Image
</button>
<div id="update-note" class="updatenote mt10">loading model ..</div>
</div>
<div>
<video autoplay="autoplay" id="myvideo" py-mount="video"></video>
<canvas id="canvas" class="border canvasbox"></canvas>
</div>
<script src="lib/handtrack.min.js"></script>
</body>
</html>

35
examples/mario/css/game.css
View File

@@ -1,35 +0,0 @@
html,
body,
ul,
li {
margin: 0;
border: 0;
padding: 0;
}
canvas {
display: block;
width: 762;
margin: 0 auto;
background-color: blue;
}
p {
text-align: center;
}
body {
overflow: hidden;
height: 100%;
}
html {
overflow: hidden;
height: 100%;
}
.info {
position: absolute;
top: 0;
left: 0;
}

43
examples/mario/js/bcoin.js
View File

@@ -1,43 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Bcoin = (Mario.Bcoin = function (pos) {
Mario.Entity.call(this, {
pos: pos,
sprite: level.bcoinSprite(),
hitbox: [0, 0, 16, 16],
});
});
Mario.Util.inherits(Bcoin, Mario.Entity);
//I'm not sure whether it makes sense to use an array for vel and acc here
//in order to keep with convention, or to just use a single value, since
//it's literally impossible for these to move left or right.
Bcoin.prototype.spawn = function () {
sounds.coin.currentTime = 0.05;
sounds.coin.play();
this.idx = level.items.length;
level.items.push(this);
this.active = true;
this.vel = -12;
this.targetpos = this.pos[1] - 32;
};
Bcoin.prototype.update = function (dt) {
if (!this.active) return;
if (this.vel > 0 && this.pos[1] >= this.targetpos) {
player.coins += 1;
//spawn a score thingy.
delete level.items[this.idx];
}
this.acc = 0.75;
this.vel += this.acc;
this.pos[1] += this.vel;
this.sprite.update(dt);
};
Bcoin.prototype.checkCollisions = function () {};
})();

84
examples/mario/js/block.js
View File

@@ -1,84 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
//TODO: clean up the logic for sprite switching.
//TODO: There's a weird bug with the collision logic. Look into it.
var Block = (Mario.Block = function (options) {
this.item = options.item;
this.usedSprite = options.usedSprite;
this.bounceSprite = options.bounceSprite;
this.breakable = options.breakable;
Mario.Entity.call(this, {
pos: options.pos,
sprite: options.sprite,
hitbox: [0, 0, 16, 16],
});
this.standing = true;
});
Mario.Util.inherits(Block, Mario.Floor);
Block.prototype.break = function () {
sounds.breakBlock.play();
new Mario.Rubble().spawn(this.pos);
var x = this.pos[0] / 16,
y = this.pos[1] / 16;
delete level.blocks[y][x];
};
Block.prototype.bonk = function (power) {
sounds.bump.play();
if (power > 0 && this.breakable) {
this.break();
} else if (this.standing) {
this.standing = false;
if (this.item) {
this.item.spawn();
this.item = null;
}
this.opos = [];
this.opos[0] = this.pos[0];
this.opos[1] = this.pos[1];
if (this.bounceSprite) {
this.osprite = this.sprite;
this.sprite = this.bounceSprite;
} else {
this.sprite = this.usedSprite;
}
this.vel[1] = -2;
}
};
Block.prototype.update = function (dt, gameTime) {
if (!this.standing) {
if (this.pos[1] < this.opos[1] - 8) {
this.vel[1] = 2;
}
if (this.pos[1] > this.opos[1]) {
this.vel[1] = 0;
this.pos = this.opos;
if (this.osprite) {
this.sprite = this.osprite;
}
this.standing = true;
}
} else {
if (this.sprite === this.usedSprite) {
var x = this.pos[0] / 16,
y = this.pos[1] / 16;
level.statics[y][x] = new Mario.Floor(
this.pos,
this.usedSprite,
);
delete level.blocks[y][x];
}
}
this.pos[1] += this.vel[1];
this.sprite.update(dt, gameTime);
};
})();

62
examples/mario/js/coin.js
View File

@@ -1,62 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Coin = (Mario.Coin = function (pos, sprite) {
Mario.Entity.call(this, {
pos: pos,
sprite: sprite,
hitbox: [0, 0, 16, 16],
});
this.idx = level.items.length;
});
Mario.Util.inherits(Coin, Mario.Entity);
Coin.prototype.isPlayerCollided = function () {
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [
player.pos[0] + player.hitbox[0],
player.pos[1] + player.hitbox[1],
];
//if the hitboxes actually overlap
if (
!(
hpos1[0] > hpos2[0] + player.hitbox[2] ||
hpos1[0] + this.hitbox[2] < hpos2[0]
)
) {
if (
!(
hpos1[1] > hpos2[1] + player.hitbox[3] ||
hpos1[1] + this.hitbox[3] < hpos2[1]
)
) {
this.collect();
}
}
};
Coin.prototype.render = function (ctx, vX, vY) {
this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
};
//money is not affected by gravity, you see.
Coin.prototype.update = function (dt) {
this.sprite.update(dt);
};
Coin.prototype.checkCollisions = function () {
this.isPlayerCollided();
};
Coin.prototype.collect = function () {
sounds.coin.currentTime = 0.05;
sounds.coin.play();
player.coins += 1;
delete level.items[this.idx];
};
})();

34
examples/mario/js/entity.js
View File

@@ -1,34 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Entity = (Mario.Entity = function (options) {
this.vel = [0, 0];
this.acc = [0, 0];
this.standing = true;
this.pos = options.pos;
this.sprite = options.sprite;
this.hitbox = options.hitbox;
this.left = false;
});
Entity.prototype.render = function (ctx, vX, vY) {
this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
};
Entity.prototype.collideWall = function (wall) {
//the wall will always be a 16x16 block with hitbox = [0,0,16,16].
if (this.pos[0] > wall.pos[0]) {
//from the right
this.pos[0] = wall.pos[0] + wall.hitbox[2] - this.hitbox[0];
this.vel[0] = Math.max(0, this.vel[0]);
this.acc[0] = Math.max(0, this.acc[0]);
} else {
this.pos[0] =
wall.pos[0] + wall.hitbox[0] - this.hitbox[2] - this.hitbox[0];
this.vel[0] = Math.min(0, this.vel[0]);
this.acc[0] = Math.min(0, this.acc[0]);
}
};
Entity.prototype.bump = function () {};
})();

145
examples/mario/js/fireball.js
View File

@@ -1,145 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Fireball = (Mario.Fireball = function (pos) {
this.hit = 0;
this.standing = false;
Mario.Entity.call(this, {
pos: pos,
sprite: new Mario.Sprite(
"sprites/items.png",
[96, 144],
[8, 8],
5,
[0, 1, 2, 3],
),
hitbox: [0, 0, 8, 8],
});
});
Mario.Util.inherits(Fireball, Mario.Entity);
Fireball.prototype.spawn = function (left) {
sounds.fireball.currentTime = 0;
sounds.fireball.play();
if (fireballs[0]) {
this.idx = 1;
fireballs[1] = this;
} else {
this.idx = 0;
fireballs[0] = this;
}
this.vel[0] = left ? -5 : 5;
this.standing = false;
this.vel[1] = 0;
};
Fireball.prototype.render = function (ctx, vX, vY) {
this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
};
Fireball.prototype.update = function (dt) {
if (this.hit == 1) {
this.sprite.pos = [96, 160];
this.sprite.size = [16, 16];
this.sprite.frames = [0, 1, 2];
this.sprite.speed = 8;
this.hit += 1;
return;
} else if (this.hit == 5) {
delete fireballs[this.idx];
player.fireballs -= 1;
return;
} else if (this.hit) {
this.hit += 1;
return;
}
//In retrospect, the way collision is being handled is RIDICULOUS
//but I don't have to use some horrible kludge for this.
if (this.standing) {
this.standing = false;
this.vel[1] = -4;
}
this.acc[1] = 0.5;
this.vel[1] += this.acc[1];
this.pos[0] += this.vel[0];
this.pos[1] += this.vel[1];
if (this.pos[0] < vX || this.pos[0] > vX + 256) {
this.hit = 1;
}
this.sprite.update(dt);
};
Fireball.prototype.collideWall = function () {
if (!this.hit) this.hit = 1;
};
Fireball.prototype.checkCollisions = function () {
if (this.hit) return;
var h = this.pos[1] % 16 < 8 ? 1 : 2;
var w = this.pos[0] % 16 < 8 ? 1 : 2;
var baseX = Math.floor(this.pos[0] / 16);
var baseY = Math.floor(this.pos[1] / 16);
if (baseY + h > 15) {
delete fireballs[this.idx];
player.fireballs -= 1;
return;
}
for (var i = 0; i < h; i++) {
for (var j = 0; j < w; j++) {
if (level.statics[baseY + i][baseX + j]) {
level.statics[baseY + i][baseX + j].isCollideWith(this);
}
if (level.blocks[baseY + i][baseX + j]) {
level.blocks[baseY + i][baseX + j].isCollideWith(this);
}
}
}
var that = this;
level.enemies.forEach(function (enemy) {
if (enemy.flipping || enemy.pos[0] - vX > 336) {
//stop checking once we get to far away dudes.
return;
} else {
that.isCollideWith(enemy);
}
});
};
Fireball.prototype.isCollideWith = function (ent) {
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [ent.pos[0] + ent.hitbox[0], ent.pos[1] + ent.hitbox[1]];
//if the hitboxes actually overlap
if (
!(
hpos1[0] > hpos2[0] + ent.hitbox[2] ||
hpos1[0] + this.hitbox[2] < hpos2[0]
)
) {
if (
!(
hpos1[1] > hpos2[1] + ent.hitbox[3] ||
hpos1[1] + this.hitbox[3] < hpos2[1]
)
) {
this.hit = 1;
ent.bump();
}
}
};
Fireball.prototype.bump = function () {};
})();

90
examples/mario/js/fireflower.js
View File

@@ -1,90 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Fireflower = (Mario.Fireflower = function (pos) {
this.spawning = false;
this.waiting = 0;
Mario.Entity.call(this, {
pos: pos,
sprite: level.fireFlowerSprite,
hitbox: [0, 0, 16, 16],
});
});
Mario.Util.inherits(Fireflower, Mario.Entity);
Fireflower.prototype.render = function (ctx, vX, vY) {
if (this.spawning > 1) return;
this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
};
Fireflower.prototype.spawn = function () {
sounds.itemAppear.play();
this.idx = level.items.length;
level.items.push(this);
this.spawning = 12;
this.targetpos = [];
this.targetpos[0] = this.pos[0];
this.targetpos[1] = this.pos[1] - 16;
};
Fireflower.prototype.update = function (dt) {
if (this.spawning > 1) {
this.spawning -= 1;
if (this.spawning == 1) this.vel[1] = -0.5;
return;
}
if (this.spawning) {
if (this.pos[1] <= this.targetpos[1]) {
this.pos[1] = this.targetpos[1];
this.vel[1] = 0;
this.spawning = 0;
}
}
this.vel[1] += this.acc[1];
this.pos[0] += this.vel[0];
this.pos[1] += this.vel[1];
this.sprite.update(dt);
};
Fireflower.prototype.checkCollisions = function () {
if (this.spawning) {
return;
}
this.isPlayerCollided();
};
Fireflower.prototype.isPlayerCollided = function () {
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [
player.pos[0] + player.hitbox[0],
player.pos[1] + player.hitbox[1],
];
//if the hitboxes actually overlap
if (
!(
hpos1[0] > hpos2[0] + player.hitbox[2] ||
hpos1[0] + this.hitbox[2] < hpos2[0]
)
) {
if (
!(
hpos1[1] > hpos2[1] + player.hitbox[3] ||
hpos1[1] + this.hitbox[3] < hpos2[1]
)
) {
player.powerUp(this.idx);
}
}
};
//This should never be called, but just in case.
Fireflower.prototype.bump = function () {};
})();

51
examples/mario/js/flag.js
View File

@@ -1,51 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
Flag = Mario.Flag = function (pos) {
//afaik flags always have the same height and Y-position
this.pos = [pos, 49];
this.hitbox = [0, 0, 0, 0];
this.vel = [0, 0];
this.acc = [0, 0];
};
Flag.prototype.collideWall = function () {};
Flag.prototype.update = function (dt) {
if (!this.done && this.pos[1] >= 170) {
this.vel = [0, 0];
this.pos[1] = 170;
player.exit();
this.done = true;
}
this.pos[1] += this.vel[1];
};
Flag.prototype.checkCollisions = function () {
this.isPlayerCollided();
};
Flag.prototype.isPlayerCollided = function () {
if (this.hit) return;
if (player.pos[0] + 8 >= this.pos[0]) {
music.overworld.pause();
sounds.flagpole.play();
setTimeout(function () {
music.clear.play();
}, 2000);
this.hit = true;
player.flag();
this.vel = [0, 2];
}
};
Flag.prototype.render = function () {
level.flagpoleSprites[2].render(
ctx,
this.pos[0] - 8,
this.pos[1],
vX,
vY,
);
};
})();

83
examples/mario/js/floor.js
View File

@@ -1,83 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Floor = (Mario.Floor = function (pos, sprite) {
Mario.Entity.call(this, {
pos: pos,
sprite: sprite,
hitbox: [0, 0, 16, 16],
});
});
Mario.Util.inherits(Floor, Mario.Entity);
Floor.prototype.isCollideWith = function (ent) {
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [
Math.floor(this.pos[0] + this.hitbox[0]),
Math.floor(this.pos[1] + this.hitbox[1]),
];
var hpos2 = [
Math.floor(ent.pos[0] + ent.hitbox[0]),
Math.floor(ent.pos[1] + ent.hitbox[1]),
];
//if the hitboxes actually overlap
if (
!(
hpos1[0] > hpos2[0] + ent.hitbox[2] ||
hpos1[0] + this.hitbox[2] < hpos2[0]
)
) {
if (
!(
hpos1[1] > hpos2[1] + ent.hitbox[3] ||
hpos1[1] + this.hitbox[3] < hpos2[1]
)
) {
if (!this.standing) {
ent.bump();
} else {
//if the entity is over the block, it's basically floor
var center = hpos2[0] + ent.hitbox[2] / 2;
if (
Math.abs(hpos2[1] + ent.hitbox[3] - hpos1[1]) <=
ent.vel[1]
) {
if (
level.statics[this.pos[1] / 16 - 1][
this.pos[0] / 16
]
) {
return;
}
ent.vel[1] = 0;
ent.pos[1] = hpos1[1] - ent.hitbox[3] - ent.hitbox[1];
ent.standing = true;
if (ent instanceof Mario.Player) {
ent.jumping = 0;
}
} else if (
Math.abs(hpos2[1] - hpos1[1] - this.hitbox[3]) >
ent.vel[1] &&
center + 2 >= hpos1[0] &&
center - 2 <= hpos1[0] + this.hitbox[2]
) {
//ent is under the block.
ent.vel[1] = 0;
ent.pos[1] = hpos1[1] + this.hitbox[3];
if (ent instanceof Mario.Player) {
this.bonk(ent.power);
ent.jumping = 0;
}
} else {
//entity is hitting it from the side, we're a wall
ent.collideWall(this);
}
}
}
}
};
Floor.prototype.bonk = function () {};
})();

253
examples/mario/js/game.js
View File

@@ -1,253 +0,0 @@
var requestAnimFrame = (function () {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
})();
//create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var updateables = [];
var fireballs = [];
var player = new Mario.Player([0, 0]);
//we might have to get the size and calculate the scaling
//but this method should let us make it however big.
//Cool!
//TODO: Automatically scale the game to work and look good on widescreen.
//TODO: fiddling with scaled sprites looks BETTER, but not perfect. Hmm.
canvas.width = 762;
canvas.height = 720;
ctx.scale(3, 3);
document.body.appendChild(canvas);
//viewport
var vX = 0,
vY = 0,
vWidth = 256,
vHeight = 240;
//load our images
resources.load([
"sprites/player.png",
"sprites/enemy.png",
"sprites/tiles.png",
"sprites/playerl.png",
"sprites/items.png",
"sprites/enemyr.png",
]);
resources.onReady(init);
var level;
var sounds;
var music;
//initialize
var lastTime;
function init() {
music = {
overworld: new Audio("sounds/aboveground_bgm.ogg"),
underground: new Audio("sounds/underground_bgm.ogg"),
clear: new Audio("sounds/stage_clear.wav"),
death: new Audio("sounds/mariodie.wav"),
};
sounds = {
smallJump: new Audio("sounds/jump-small.wav"),
bigJump: new Audio("sounds/jump-super.wav"),
breakBlock: new Audio("sounds/breakblock.wav"),
bump: new Audio("sounds/bump.wav"),
coin: new Audio("sounds/coin.wav"),
fireball: new Audio("sounds/fireball.wav"),
flagpole: new Audio("sounds/flagpole.wav"),
kick: new Audio("sounds/kick.wav"),
pipe: new Audio("sounds/pipe.wav"),
itemAppear: new Audio("sounds/itemAppear.wav"),
powerup: new Audio("sounds/powerup.wav"),
stomp: new Audio("sounds/stomp.wav"),
};
Mario.oneone();
lastTime = Date.now();
main();
}
var gameTime = 0;
//set up the game loop
function main() {
var now = Date.now();
var dt = (now - lastTime) / 1000.0;
update(dt);
render();
lastTime = now;
requestAnimFrame(main);
}
function update(dt) {
gameTime += dt;
handleInput(dt);
updateEntities(dt, gameTime);
checkCollisions();
}
function handleInput(dt) {
if (player.piping || player.dying || player.noInput) return; //don't accept input
if (input.isDown("RUN")) {
player.run();
} else {
player.noRun();
}
if (input.isDown("JUMP")) {
player.jump();
} else {
//we need this to handle the timing for how long you hold it
player.noJump();
}
if (input.isDown("DOWN")) {
player.crouch();
} else {
player.noCrouch();
}
if (input.isDown("LEFT")) {
// 'd' or left arrow
player.moveLeft();
} else if (input.isDown("RIGHT")) {
// 'k' or right arrow
player.moveRight();
} else {
player.noWalk();
}
}
//update all the moving stuff
function updateEntities(dt, gameTime) {
player.update(dt, vX);
updateables.forEach(function (ent) {
ent.update(dt, gameTime);
});
//This should stop the jump when he switches sides on the flag.
if (player.exiting) {
if (player.pos[0] > vX + 96) vX = player.pos[0] - 96;
} else if (level.scrolling && player.pos[0] > vX + 80) {
vX = player.pos[0] - 80;
}
if (player.powering.length !== 0 || player.dying) {
return;
}
level.items.forEach(function (ent) {
ent.update(dt);
});
level.enemies.forEach(function (ent) {
ent.update(dt, vX);
});
fireballs.forEach(function (fireball) {
fireball.update(dt);
});
level.pipes.forEach(function (pipe) {
pipe.update(dt);
});
}
//scan for collisions
function checkCollisions() {
if (player.powering.length !== 0 || player.dying) {
return;
}
player.checkCollisions();
//Apparently for each will just skip indices where things were deleted.
level.items.forEach(function (item) {
item.checkCollisions();
});
level.enemies.forEach(function (ent) {
ent.checkCollisions();
});
fireballs.forEach(function (fireball) {
fireball.checkCollisions();
});
level.pipes.forEach(function (pipe) {
pipe.checkCollisions();
});
}
//draw the game!
function render() {
updateables = [];
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = level.background;
ctx.fillRect(0, 0, canvas.width, canvas.height);
//scenery gets drawn first to get layering right.
for (var i = 0; i < 15; i++) {
for (
var j = Math.floor(vX / 16) - 1;
j < Math.floor(vX / 16) + 20;
j++
) {
if (level.scenery[i][j]) {
renderEntity(level.scenery[i][j]);
}
}
}
//then items
level.items.forEach(function (item) {
renderEntity(item);
});
level.enemies.forEach(function (enemy) {
renderEntity(enemy);
});
fireballs.forEach(function (fireball) {
renderEntity(fireball);
});
//then we draw every static object.
for (var i = 0; i < 15; i++) {
for (
var j = Math.floor(vX / 16) - 1;
j < Math.floor(vX / 16) + 20;
j++
) {
if (level.statics[i][j]) {
renderEntity(level.statics[i][j]);
}
if (level.blocks[i][j]) {
renderEntity(level.blocks[i][j]);
updateables.push(level.blocks[i][j]);
}
}
}
//then the player
if (player.invincibility % 2 === 0) {
renderEntity(player);
}
//Mario goes INTO pipes, so naturally they go after.
level.pipes.forEach(function (pipe) {
renderEntity(pipe);
});
}
function renderEntity(entity) {
entity.render(ctx, vX, vY);
}

147
examples/mario/js/goomba.js
View File

@@ -1,147 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
//TODO: On console the hitbox is smaller. Measure it and edit this.
var Goomba = (Mario.Goomba = function (pos, sprite) {
this.dying = false;
Mario.Entity.call(this, {
pos: pos,
sprite: sprite,
hitbox: [0, 0, 16, 16],
});
this.vel[0] = -0.5;
this.idx = level.enemies.length;
});
Goomba.prototype.render = function (ctx, vX, vY) {
this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
};
Goomba.prototype.update = function (dt, vX) {
if (this.pos[0] - vX > 336) {
//if we're too far away, do nothing.
return;
} else if (this.pos[0] - vX < -32) {
delete level.enemies[this.idx];
}
if (this.dying) {
this.dying -= 1;
if (!this.dying) {
delete level.enemies[this.idx];
}
}
this.acc[1] = 0.2;
this.vel[1] += this.acc[1];
this.pos[0] += this.vel[0];
this.pos[1] += this.vel[1];
this.sprite.update(dt);
};
Goomba.prototype.collideWall = function () {
this.vel[0] = -this.vel[0];
};
Goomba.prototype.checkCollisions = function () {
if (this.flipping) {
return;
}
var h = this.pos[1] % 16 === 0 ? 1 : 2;
var w = this.pos[0] % 16 === 0 ? 1 : 2;
var baseX = Math.floor(this.pos[0] / 16);
var baseY = Math.floor(this.pos[1] / 16);
if (baseY + h > 15) {
delete level.enemies[this.idx];
return;
}
for (var i = 0; i < h; i++) {
for (var j = 0; j < w; j++) {
if (level.statics[baseY + i][baseX + j]) {
level.statics[baseY + i][baseX + j].isCollideWith(this);
}
if (level.blocks[baseY + i][baseX + j]) {
level.blocks[baseY + i][baseX + j].isCollideWith(this);
}
}
}
var that = this;
level.enemies.forEach(function (enemy) {
if (enemy === that) {
//don't check collisions with ourselves.
return;
} else if (enemy.pos[0] - vX > 336) {
//stop checking once we get to far away dudes.
return;
} else {
that.isCollideWith(enemy);
}
});
this.isCollideWith(player);
};
Goomba.prototype.isCollideWith = function (ent) {
if (ent instanceof Mario.Player && (this.dying || ent.invincibility)) {
return;
}
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [ent.pos[0] + ent.hitbox[0], ent.pos[1] + ent.hitbox[1]];
//if the hitboxes actually overlap
if (
!(
hpos1[0] > hpos2[0] + ent.hitbox[2] ||
hpos1[0] + this.hitbox[2] < hpos2[0]
)
) {
if (
!(
hpos1[1] > hpos2[1] + ent.hitbox[3] ||
hpos1[1] + this.hitbox[3] < hpos2[1]
)
) {
if (ent instanceof Mario.Player) {
//if we hit the player
if (ent.vel[1] > 0) {
//then the goomba dies
this.stomp();
} else if (ent.starTime) {
this.bump();
} else {
//or the player gets hit
ent.damage();
}
} else {
this.collideWall();
}
}
}
};
Goomba.prototype.stomp = function () {
sounds.stomp.play();
player.bounce = true;
this.sprite.pos[0] = 32;
this.sprite.speed = 0;
this.vel[0] = 0;
this.dying = 10;
};
Goomba.prototype.bump = function () {
sounds.kick.play();
this.sprite.img = "sprites/enemyr.png";
this.flipping = true;
this.pos[1] -= 1;
this.vel[0] = 0;
this.vel[1] = -2.5;
};
})();

61
examples/mario/js/input.js
View File

@@ -1,61 +0,0 @@
(function () {
var pressedKeys = {};
function setKey(event, status) {
var code = event.keyCode;
var key;
switch (code) {
case 32:
key = "SPACE";
break;
case 37:
key = "LEFT";
break;
case 38:
key = "UP";
break;
case 39:
key = "RIGHT";
break;
case 40:
key = "DOWN";
break;
case 88:
key = "JUMP";
break;
case 90:
key = "RUN";
break;
default:
key = String.fromCharCode(code);
}
pressedKeys[key] = status;
}
document.addEventListener("keydown", function (e) {
setKey(e, true);
});
document.addEventListener("keyup", function (e) {
setKey(e, false);
});
window.addEventListener("blur", function () {
pressedKeys = {};
});
window.input = {
isDown: function (key) {
return pressedKeys[key.toUpperCase()];
},
reset: function () {
pressedKeys["RUN"] = false;
pressedKeys["LEFT"] = false;
pressedKeys["RIGHT"] = false;
pressedKeys["DOWN"] = false;
pressedKeys["JUMP"] = false;
},
};
})();

228
examples/mario/js/koopa.js
View File

@@ -1,228 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Koopa = (Mario.Koopa = function (pos, sprite, para) {
this.dying = false;
this.shell = false;
this.para = para; //para. As in, is it a paratroopa?
//So, funny story. The actual hitboxes don't reach all the way to the ground.
//What that means is, as long as I use them to keep things on the floor
//making the hitboxes accurate will make enemies sink into the ground.
Mario.Entity.call(this, {
pos: pos,
sprite: sprite,
hitbox: [2, 8, 12, 24],
});
this.vel[0] = -0.5;
this.idx = level.enemies.length;
});
Koopa.prototype.render = function (ctx, vX, vY) {
this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
};
Koopa.prototype.update = function (dt, vX) {
if (this.turn) {
this.vel[0] = -this.vel[0];
if (this.shell) sounds.bump.play();
this.turn = false;
}
if (this.vel[0] != 0) {
this.left = this.vel[0] < 0;
}
if (this.left) {
this.sprite.img = "sprites/enemy.png";
} else {
this.sprite.img = "sprites/enemyr.png";
}
if (this.pos[0] - vX > 336) {
//if we're too far away, do nothing.
return;
} else if (this.pos[0] - vX < -32) {
delete level.enemies[this.idx];
}
if (this.dying) {
this.dying -= 1;
if (!this.dying) {
delete level.enemies[this.idx];
}
}
if (this.shell) {
if (this.vel[0] == 0) {
this.shell -= 1;
if (this.shell < 120) {
this.sprite.speed = 5;
}
if (this.shell == 0) {
this.sprite = level.koopaSprite();
this.hitbox = [2, 8, 12, 24];
if (this.left) {
this.sprite.img = "sprites/enemyr.png";
this.vel[0] = 0.5;
this.left = false;
} else {
this.vel[0] = -0.5;
this.left = true;
}
this.pos[1] -= 16;
}
} else {
this.shell = 360;
this.sprite.speed = 0;
this.sprite.setFrame(0);
}
}
this.acc[1] = 0.2;
this.vel[1] += this.acc[1];
this.pos[0] += this.vel[0];
this.pos[1] += this.vel[1];
this.sprite.update(dt);
};
Koopa.prototype.collideWall = function () {
//This stops us from flipping twice on the same frame if we collide
//with multiple wall tiles simultaneously.
this.turn = true;
};
Koopa.prototype.checkCollisions = function () {
var h = this.shell ? 1 : 2;
if (this.pos[1] % 16 !== 0) {
h += 1;
}
var w = this.pos[0] % 16 === 0 ? 1 : 2;
var baseX = Math.floor(this.pos[0] / 16);
var baseY = Math.floor(this.pos[1] / 16);
if (baseY + h > 15) {
delete level.enemies[this.idx];
return;
}
if (this.flipping) {
return;
}
for (var i = 0; i < h; i++) {
for (var j = 0; j < w; j++) {
if (level.statics[baseY + i][baseX + j]) {
level.statics[baseY + i][baseX + j].isCollideWith(this);
}
if (level.blocks[baseY + i][baseX + j]) {
level.blocks[baseY + i][baseX + j].isCollideWith(this);
}
}
}
var that = this;
level.enemies.forEach(function (enemy) {
if (enemy === that) {
//don't check collisions with ourselves.
return;
} else if (enemy.pos[0] - vX > 336) {
//stop checking once we get to far away dudes.
return;
} else {
that.isCollideWith(enemy);
}
});
this.isCollideWith(player);
};
Koopa.prototype.isCollideWith = function (ent) {
if (ent instanceof Mario.Player && (this.dying || ent.invincibility)) {
return;
}
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [ent.pos[0] + ent.hitbox[0], ent.pos[1] + ent.hitbox[1]];
//if the hitboxes actually overlap
if (
!(
hpos1[0] > hpos2[0] + ent.hitbox[2] ||
hpos1[0] + this.hitbox[2] < hpos2[0]
)
) {
if (
!(
hpos1[1] > hpos2[1] + ent.hitbox[3] ||
hpos1[1] + this.hitbox[3] < hpos2[1]
)
) {
if (ent instanceof Mario.Player) {
if (ent.vel[1] > 0) {
player.bounce = true;
}
if (this.shell) {
sounds.kick.play();
if (this.vel[0] === 0) {
if (ent.left) {
//I'm pretty sure this isn't the real logic.
this.vel[0] = -4;
} else {
this.vel[0] = 4;
}
} else {
if (ent.bounce) {
this.vel[0] = 0;
} else ent.damage();
}
} else if (ent.vel[1] > 0) {
//then we get BOPPED.
this.stomp();
} else {
//or the player gets hit
ent.damage();
}
} else {
if (this.shell && ent instanceof Mario.Goomba) {
ent.bump();
} else this.collideWall();
}
}
}
};
Koopa.prototype.stomp = function () {
//Turn this thing into a shell if it isn't already. Kick it if it is.
player.bounce = true;
if (this.para) {
this.para = false;
this.sprite.pos[0] -= 32;
} else {
sounds.stomp.play();
this.shell = 360;
this.sprite.pos[0] += 64;
this.sprite.pos[1] += 16;
this.sprite.size = [16, 16];
this.hitbox = [2, 0, 12, 16];
this.sprite.speed = 0;
this.frames = [0, 1];
this.vel = [0, 0];
this.pos[1] += 16;
}
};
Koopa.prototype.bump = function () {
sounds.kick.play();
if (this.flipping) return;
this.flipping = true;
this.sprite.pos = [160, 0];
this.sprite.size = [16, 16];
this.hitbox = [2, 0, 12, 16];
this.sprite.speed = 0;
this.vel[0] = 0;
this.vel[1] = -2.5;
};
})();

341
examples/mario/js/levels/11.js
View File

@@ -1,341 +0,0 @@
var oneone = (Mario.oneone = function () {
//The things that need to be passed in are basically just dependent on what
//tileset we're in, so it makes more sense to just make one variable for that, so
//TODO: put as much of this in the Level object definition as possible.
level = new Mario.Level({
playerPos: [56, 192],
loader: Mario.oneone,
background: "#7974FF",
scrolling: true,
invincibility: [144, 192, 240],
exit: 204,
floorSprite: new Mario.Sprite("sprites/tiles.png", [0, 0], [16, 16], 0),
cloudSprite: new Mario.Sprite(
"sprites/tiles.png",
[0, 320],
[48, 32],
0,
),
wallSprite: new Mario.Sprite("sprites/tiles.png", [0, 16], [16, 16], 0),
brickSprite: new Mario.Sprite(
"sprites/tiles.png",
[16, 0],
[16, 16],
0,
),
brickBounceSprite: new Mario.Sprite(
"sprites/tiles.png",
[32, 0],
[16, 16],
0,
),
rubbleSprite: function () {
return new Mario.Sprite(
"sprites/items.png",
[64, 0],
[8, 8],
3,
[0, 1],
);
},
ublockSprite: new Mario.Sprite(
"sprites/tiles.png",
[48, 0],
[16, 16],
0,
),
superShroomSprite: new Mario.Sprite(
"sprites/items.png",
[0, 0],
[16, 16],
0,
),
fireFlowerSprite: new Mario.Sprite(
"sprites/items.png",
[0, 32],
[16, 16],
20,
[0, 1, 2, 3],
),
starSprite: new Mario.Sprite(
"sprites/items.png",
[0, 48],
[16, 16],
20,
[0, 1, 2, 3],
),
pipeLEndSprite: new Mario.Sprite(
"sprites/tiles.png",
[0, 128],
[16, 16],
0,
),
pipeREndSprite: new Mario.Sprite(
"sprites/tiles.png",
[16, 128],
[16, 16],
0,
),
pipeLMidSprite: new Mario.Sprite(
"sprites/tiles.png",
[0, 144],
[16, 16],
0,
),
pipeRMidSprite: new Mario.Sprite(
"sprites/tiles.png",
[16, 144],
[16, 16],
0,
),
pipeUpMid: new Mario.Sprite("sprites/tiles.png", [0, 144], [32, 16], 0),
pipeSideMid: new Mario.Sprite(
"sprites/tiles.png",
[48, 128],
[16, 32],
0,
),
pipeLeft: new Mario.Sprite("sprites/tiles.png", [32, 128], [16, 32], 0),
pipeTop: new Mario.Sprite("sprites/tiles.png", [0, 128], [32, 16], 0),
qblockSprite: new Mario.Sprite(
"sprites/tiles.png",
[384, 0],
[16, 16],
8,
[0, 0, 0, 0, 1, 2, 1],
),
bcoinSprite: function () {
return new Mario.Sprite(
"sprites/items.png",
[0, 112],
[16, 16],
20,
[0, 1, 2, 3],
);
},
cloudSprites: [
new Mario.Sprite("sprites/tiles.png", [0, 320], [16, 32], 0),
new Mario.Sprite("sprites/tiles.png", [16, 320], [16, 32], 0),
new Mario.Sprite("sprites/tiles.png", [32, 320], [16, 32], 0),
],
hillSprites: [
new Mario.Sprite("sprites/tiles.png", [128, 128], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [144, 128], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [160, 128], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [128, 144], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [144, 144], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [160, 144], [16, 16], 0),
],
bushSprite: new Mario.Sprite(
"sprites/tiles.png",
[176, 144],
[48, 16],
0,
),
bushSprites: [
new Mario.Sprite("sprites/tiles.png", [176, 144], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [192, 144], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [208, 144], [16, 16], 0),
],
goombaSprite: function () {
return new Mario.Sprite(
"sprites/enemy.png",
[0, 16],
[16, 16],
3,
[0, 1],
);
},
koopaSprite: function () {
return new Mario.Sprite(
"sprites/enemy.png",
[96, 0],
[16, 32],
2,
[0, 1],
);
},
flagPoleSprites: [
new Mario.Sprite("sprites/tiles.png", [256, 128], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [256, 144], [16, 16], 0),
new Mario.Sprite("sprites/items.png", [128, 32], [16, 16], 0),
],
});
ground = [
[0, 69],
[71, 86],
[89, 153],
[155, 212],
];
player.pos[0] = level.playerPos[0];
player.pos[1] = level.playerPos[1];
vX = 0;
//build THE GROUND
ground.forEach(function (loc) {
level.putFloor(loc[0], loc[1]);
});
//build scenery
clouds = [
[7, 3],
[19, 2],
[56, 3],
[67, 2],
[87, 2],
[103, 2],
[152, 3],
[163, 2],
[200, 3],
];
clouds.forEach(function (cloud) {
level.putCloud(cloud[0], cloud[1]);
});
twoClouds = [
[36, 2],
[132, 2],
[180, 2],
];
twoClouds.forEach(function (cloud) {
level.putTwoCloud(cloud[0], cloud[1]);
});
threeClouds = [
[27, 3],
[75, 3],
[123, 3],
[171, 3],
];
threeClouds.forEach(function (cloud) {
level.putThreeCloud(cloud[0], cloud[1]);
});
bHills = [0, 48, 96, 144, 192];
bHills.forEach(function (hill) {
level.putBigHill(hill, 12);
});
sHills = [16, 64, 111, 160];
sHills.forEach(function (hill) {
level.putSmallHill(hill, 12);
});
bushes = [23, 71, 118, 167];
bushes.forEach(function (bush) {
level.putBush(bush, 12);
});
twoBushes = [41, 89, 137];
twoBushes.forEach(function (bush) {
level.putTwoBush(bush, 12);
});
threeBushes = [11, 59, 106];
threeBushes.forEach(function (bush) {
level.putThreeBush(bush, 12);
});
//interactable terrain
level.putQBlock(16, 9, new Mario.Bcoin([256, 144]));
level.putBrick(20, 9, null);
level.putQBlock(21, 9, new Mario.Mushroom([336, 144]));
level.putBrick(22, 9, null);
level.putQBlock(22, 5, new Mario.Bcoin([352, 80]));
level.putQBlock(23, 9, new Mario.Bcoin([368, 144]));
level.putBrick(24, 9, null);
level.putPipe(28, 13, 2);
level.putPipe(38, 13, 3);
level.putPipe(46, 13, 4);
level.putRealPipe(57, 9, 4, "DOWN", Mario.oneonetunnel);
level.putBrick(77, 9, null);
level.putQBlock(78, 9, new Mario.Mushroom([1248, 144]));
level.putBrick(79, 9, null);
level.putBrick(80, 5, null);
level.putBrick(81, 5, null);
level.putBrick(82, 5, null);
level.putBrick(83, 5, null);
level.putBrick(84, 5, null);
level.putBrick(85, 5, null);
level.putBrick(86, 5, null);
level.putBrick(87, 5, null);
level.putBrick(91, 5, null);
level.putBrick(92, 5, null);
level.putBrick(93, 5, null);
level.putQBlock(94, 5, new Mario.Bcoin([1504, 80]));
level.putBrick(94, 9, null);
level.putBrick(100, 9, new Mario.Star([1600, 144]));
level.putBrick(101, 9, null);
level.putQBlock(105, 9, new Mario.Bcoin([1680, 144]));
level.putQBlock(108, 9, new Mario.Bcoin([1728, 144]));
level.putQBlock(108, 5, new Mario.Mushroom([1728, 80]));
level.putQBlock(111, 9, new Mario.Bcoin([1776, 144]));
level.putBrick(117, 9, null);
level.putBrick(120, 5, null);
level.putBrick(121, 5, null);
level.putBrick(122, 5, null);
level.putBrick(123, 5, null);
level.putBrick(128, 5, null);
level.putQBlock(129, 5, new Mario.Bcoin([2074, 80]));
level.putBrick(129, 9, null);
level.putQBlock(130, 5, new Mario.Bcoin([2080, 80]));
level.putBrick(130, 9, null);
level.putBrick(131, 5, null);
level.putWall(134, 13, 1);
level.putWall(135, 13, 2);
level.putWall(136, 13, 3);
level.putWall(137, 13, 4);
level.putWall(140, 13, 4);
level.putWall(141, 13, 3);
level.putWall(142, 13, 2);
level.putWall(143, 13, 1);
level.putWall(148, 13, 1);
level.putWall(149, 13, 2);
level.putWall(150, 13, 3);
level.putWall(151, 13, 4);
level.putWall(152, 13, 4);
level.putWall(155, 13, 4);
level.putWall(156, 13, 3);
level.putWall(157, 13, 2);
level.putWall(158, 13, 1);
level.putPipe(163, 13, 2);
level.putBrick(168, 9, null);
level.putBrick(169, 9, null);
level.putQBlock(170, 9, new Mario.Bcoin([2720, 144]));
level.putBrick(171, 9, null);
level.putPipe(179, 13, 2);
level.putWall(181, 13, 1);
level.putWall(182, 13, 2);
level.putWall(183, 13, 3);
level.putWall(184, 13, 4);
level.putWall(185, 13, 5);
level.putWall(186, 13, 6);
level.putWall(187, 13, 7);
level.putWall(188, 13, 8);
level.putWall(189, 13, 8);
level.putFlagpole(198);
//and enemies
level.putGoomba(22, 12);
level.putGoomba(40, 12);
level.putGoomba(50, 12);
level.putGoomba(51, 12);
level.putGoomba(82, 4);
level.putGoomba(84, 4);
level.putGoomba(100, 12);
level.putGoomba(102, 12);
level.putGoomba(114, 12);
level.putGoomba(115, 12);
level.putGoomba(122, 12);
level.putGoomba(123, 12);
level.putGoomba(125, 12);
level.putGoomba(126, 12);
level.putGoomba(170, 12);
level.putGoomba(172, 12);
level.putKoopa(35, 11);
music.underground.pause();
// music.overworld.currentTime = 0;
music.overworld.play();
});

138
examples/mario/js/levels/11tunnel.js
View File

@@ -1,138 +0,0 @@
var oneonetunnel = (Mario.oneonetunnel = function () {
level = new Mario.Level({
playerPos: [40, 16],
loader: Mario.oneonetunnel,
background: "#000000",
scrolling: false,
coinSprite: function () {
return new Mario.Sprite(
"sprites/items.png",
[0, 96],
[16, 16],
6,
[0, 0, 0, 0, 1, 2, 1],
);
},
floorSprite: new Mario.Sprite(
"sprites/tiles.png",
[0, 32],
[16, 16],
0,
),
wallSprite: new Mario.Sprite(
"sprites/tiles.png",
[32, 32],
[16, 16],
0,
),
brickSprite: new Mario.Sprite(
"sprites/tiles.png",
[16, 0],
[16, 16],
0,
),
brickBounceSprite: new Mario.Sprite(
"sprites/tiles.png",
[32, 0],
[16, 16],
0,
),
ublockSprite: new Mario.Sprite(
"sprites/tiles.png",
[48, 0],
[16, 16],
0,
),
pipeLMidSprite: new Mario.Sprite(
"sprites/tiles.png",
[0, 144],
[16, 16],
0,
),
pipeRMidSprite: new Mario.Sprite(
"sprites/tiles.png",
[16, 144],
[16, 16],
0,
),
pipeLEndSprite: new Mario.Sprite(
"sprites/tiles.png",
[0, 128],
[16, 16],
0,
),
pipeREndSprite: new Mario.Sprite(
"sprites/tiles.png",
[16, 128],
[16, 16],
0,
),
pipeUpMid: new Mario.Sprite("sprites/tiles.png", [0, 144], [32, 16], 0),
pipeSideMid: new Mario.Sprite(
"sprites/tiles.png",
[48, 128],
[16, 32],
0,
),
pipeLeft: new Mario.Sprite("sprites/tiles.png", [32, 128], [16, 32], 0),
pipeTop: new Mario.Sprite("sprites/tiles.png", [0, 128], [32, 16], 0),
LPipeSprites: [
new Mario.Sprite("sprites/tiles.png", [32, 128], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [32, 144], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [48, 128], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [48, 144], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [64, 128], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [64, 144], [16, 16], 0),
],
});
player.pos[0] = level.playerPos[0];
player.pos[1] = level.playerPos[1];
vX = 0;
level.putFloor(0, 16);
level.putWall(0, 13, 11);
walls = [4, 5, 6, 7, 8, 9, 10];
walls.forEach(function (loc) {
level.putWall(loc, 13, 3);
level.putWall(loc, 3, 1);
});
coins = [
[5, 5],
[6, 5],
[7, 5],
[8, 5],
[9, 5],
[4, 7],
[5, 7],
[6, 7],
[7, 7],
[8, 7],
[9, 7],
[10, 7],
[4, 9],
[5, 9],
[6, 9],
[7, 9],
[8, 9],
[9, 9],
[10, 9],
];
coins.forEach(function (pos) {
level.putCoin(pos[0], pos[1]);
});
//level.putLeftPipe(13,11);
level.putRealPipe(13, 11, 3, "RIGHT", function () {
Mario.oneone.call();
player.pos = [2616, 177];
player.pipe("UP", function () {});
});
level.putPipe(15, 13, 13);
music.overworld.pause();
music.underground.currentTime = 0;
music.underground.play();
});

348
examples/mario/js/levels/level.js
View File

@@ -1,348 +0,0 @@
(function () {
var Level = (Mario.Level = function (options) {
this.playerPos = options.playerPos;
this.scrolling = options.scrolling;
this.loader = options.loader;
this.background = options.background;
this.exit = options.exit;
this.floorSprite = options.floorSprite;
this.cloudSprite = options.cloudSprite;
this.wallSprite = options.wallSprite;
this.brickSprite = options.brickSprite;
this.rubbleSprite = options.rubbleSprite;
this.brickBounceSprite = options.brickBounceSprite;
this.ublockSprite = options.ublockSprite;
this.superShroomSprite = options.superShroomSprite;
this.fireFlowerSprite = options.fireFlowerSprite;
this.starSprite = options.starSprite;
this.coinSprite = options.coinSprite;
this.bcoinSprite = options.bcoinSprite;
this.goombaSprite = options.goombaSprite;
this.koopaSprite = options.koopaSprite;
//prop pipe sprites, to be phased out
this.pipeLEndSprite = options.pipeLEndSprite;
this.pipeREndSprite = options.pipeREndSprite;
this.pipeLMidSprite = options.pipeLMidSprite;
this.pipeRMidSprite = options.pipeRMidSprite;
//real pipe sprites, use these.
this.pipeUpMid = options.pipeUpMid;
this.pipeSideMid = options.pipeSideMid;
this.pipeLeft = options.pipeLeft;
this.pipeTop = options.pipeTop;
this.flagpoleSprites = options.flagPoleSprites;
this.LPipeSprites = options.LPipeSprites;
this.cloudSprites = options.cloudSprites;
this.hillSprites = options.hillSprites;
this.bushSprite = options.bushSprite;
this.bushSprites = options.bushSprites;
this.qblockSprite = options.qblockSprite;
this.invincibility = options.invincibility;
this.statics = [];
this.scenery = [];
this.blocks = [];
this.enemies = [];
this.items = [];
this.pipes = [];
for (var i = 0; i < 15; i++) {
this.statics[i] = [];
this.scenery[i] = [];
this.blocks[i] = [];
}
});
Level.prototype.putFloor = function (start, end) {
for (var i = start; i < end; i++) {
this.statics[13][i] = new Mario.Floor(
[16 * i, 208],
this.floorSprite,
);
this.statics[14][i] = new Mario.Floor(
[16 * i, 224],
this.floorSprite,
);
}
};
Level.prototype.putGoomba = function (x, y) {
this.enemies.push(
new Mario.Goomba([16 * x, 16 * y], this.goombaSprite()),
);
};
Level.prototype.putKoopa = function (x, y) {
this.enemies.push(
new Mario.Koopa([16 * x, 16 * y], this.koopaSprite(), false),
);
};
Level.prototype.putWall = function (x, y, height) {
//y is the bottom of the wall in this case.
for (var i = y - height; i < y; i++) {
this.statics[i][x] = new Mario.Floor(
[16 * x, 16 * i],
this.wallSprite,
);
}
};
Level.prototype.putPipe = function (x, y, height) {
for (var i = y - height; i < y; i++) {
if (i === y - height) {
this.statics[i][x] = new Mario.Floor(
[16 * x, 16 * i],
this.pipeLEndSprite,
);
this.statics[i][x + 1] = new Mario.Floor(
[16 * x + 16, 16 * i],
this.pipeREndSprite,
);
} else {
this.statics[i][x] = new Mario.Floor(
[16 * x, 16 * i],
this.pipeLMidSprite,
);
this.statics[i][x + 1] = new Mario.Floor(
[16 * x + 16, 16 * i],
this.pipeRMidSprite,
);
}
}
};
//sometimes, pipes don't go straight up and down.
Level.prototype.putLeftPipe = function (x, y) {
this.statics[y][x] = new Mario.Floor(
[16 * x, 16 * y],
this.LPipeSprites[0],
);
this.statics[y + 1][x] = new Mario.Floor(
[16 * x, 16 * (y + 1)],
this.LPipeSprites[1],
);
this.statics[y][x + 1] = new Mario.Floor(
[16 * (x + 1), 16 * y],
this.LPipeSprites[2],
);
this.statics[y + 1][x + 1] = new Mario.Floor(
[16 * (x + 1), 16 * (y + 1)],
this.LPipeSprites[3],
);
this.statics[y][x + 2] = new Mario.Floor(
[16 * (x + 2), 16 * y],
this.LPipeSprites[4],
);
this.statics[y + 1][x + 2] = new Mario.Floor(
[16 * (x + 2), 16 * (y + 1)],
this.LPipeSprites[5],
);
};
Level.prototype.putCoin = function (x, y) {
this.items.push(new Mario.Coin([x * 16, y * 16], this.coinSprite()));
};
Level.prototype.putCloud = function (x, y) {
this.scenery[y][x] = new Mario.Prop([x * 16, y * 16], this.cloudSprite);
};
Level.prototype.putQBlock = function (x, y, item) {
this.blocks[y][x] = new Mario.Block({
pos: [x * 16, y * 16],
item: item,
sprite: this.qblockSprite,
usedSprite: this.ublockSprite,
});
};
Level.prototype.putBrick = function (x, y, item) {
this.blocks[y][x] = new Mario.Block({
pos: [x * 16, y * 16],
item: item,
sprite: this.brickSprite,
bounceSprite: this.brickBounceSprite,
usedSprite: this.ublockSprite,
breakable: !item,
});
};
Level.prototype.putBigHill = function (x, y) {
var px = x * 16,
py = y * 16;
this.scenery[y][x] = new Mario.Prop([px, py], this.hillSprites[0]);
this.scenery[y][x + 1] = new Mario.Prop(
[px + 16, py],
this.hillSprites[3],
);
this.scenery[y - 1][x + 1] = new Mario.Prop(
[px + 16, py - 16],
this.hillSprites[0],
);
this.scenery[y][x + 2] = new Mario.Prop(
[px + 32, py],
this.hillSprites[4],
);
this.scenery[y - 1][x + 2] = new Mario.Prop(
[px + 32, py - 16],
this.hillSprites[3],
);
this.scenery[y - 2][x + 2] = new Mario.Prop(
[px + 32, py - 32],
this.hillSprites[1],
);
this.scenery[y][x + 3] = new Mario.Prop(
[px + 48, py],
this.hillSprites[5],
);
this.scenery[y - 1][x + 3] = new Mario.Prop(
[px + 48, py - 16],
this.hillSprites[2],
);
this.scenery[y][x + 4] = new Mario.Prop(
[px + 64, py],
this.hillSprites[2],
);
};
Level.prototype.putBush = function (x, y) {
this.scenery[y][x] = new Mario.Prop([x * 16, y * 16], this.bushSprite);
};
Level.prototype.putThreeBush = function (x, y) {
px = x * 16;
py = y * 16;
this.scenery[y][x] = new Mario.Prop([px, py], this.bushSprites[0]);
this.scenery[y][x + 1] = new Mario.Prop(
[px + 16, py],
this.bushSprites[1],
);
this.scenery[y][x + 2] = new Mario.Prop(
[px + 32, py],
this.bushSprites[1],
);
this.scenery[y][x + 3] = new Mario.Prop(
[px + 48, py],
this.bushSprites[1],
);
this.scenery[y][x + 4] = new Mario.Prop(
[px + 64, py],
this.bushSprites[2],
);
};
Level.prototype.putTwoBush = function (x, y) {
px = x * 16;
py = y * 16;
this.scenery[y][x] = new Mario.Prop([px, py], this.bushSprites[0]);
this.scenery[y][x + 1] = new Mario.Prop(
[px + 16, py],
this.bushSprites[1],
);
this.scenery[y][x + 2] = new Mario.Prop(
[px + 32, py],
this.bushSprites[1],
);
this.scenery[y][x + 3] = new Mario.Prop(
[px + 48, py],
this.bushSprites[2],
);
};
Level.prototype.putSmallHill = function (x, y) {
var px = x * 16,
py = y * 16;
this.scenery[y][x] = new Mario.Prop([px, py], this.hillSprites[0]);
this.scenery[y][x + 1] = new Mario.Prop(
[px + 16, py],
this.hillSprites[3],
);
this.scenery[y - 1][x + 1] = new Mario.Prop(
[px + 16, py - 16],
this.hillSprites[1],
);
this.scenery[y][x + 2] = new Mario.Prop(
[px + 32, py],
this.hillSprites[2],
);
};
Level.prototype.putTwoCloud = function (x, y) {
px = x * 16;
py = y * 16;
this.scenery[y][x] = new Mario.Prop([px, py], this.cloudSprites[0]);
this.scenery[y][x + 1] = new Mario.Prop(
[px + 16, py],
this.cloudSprites[1],
);
this.scenery[y][x + 2] = new Mario.Prop(
[px + 32, py],
this.cloudSprites[1],
);
this.scenery[y][x + 3] = new Mario.Prop(
[px + 48, py],
this.cloudSprites[2],
);
};
Level.prototype.putThreeCloud = function (x, y) {
px = x * 16;
py = y * 16;
this.scenery[y][x] = new Mario.Prop([px, py], this.cloudSprites[0]);
this.scenery[y][x + 1] = new Mario.Prop(
[px + 16, py],
this.cloudSprites[1],
);
this.scenery[y][x + 2] = new Mario.Prop(
[px + 32, py],
this.cloudSprites[1],
);
this.scenery[y][x + 3] = new Mario.Prop(
[px + 48, py],
this.cloudSprites[1],
);
this.scenery[y][x + 4] = new Mario.Prop(
[px + 64, py],
this.cloudSprites[2],
);
};
Level.prototype.putRealPipe = function (
x,
y,
length,
direction,
destination,
) {
px = x * 16;
py = y * 16;
this.pipes.push(
new Mario.Pipe({
pos: [px, py],
length: length,
direction: direction,
destination: destination,
}),
);
};
Level.prototype.putFlagpole = function (x) {
this.statics[12][x] = new Mario.Floor([16 * x, 192], this.wallSprite);
for (i = 3; i < 12; i++) {
this.scenery[i][x] = new Mario.Prop(
[16 * x, 16 * i],
this.flagpoleSprites[1],
);
}
this.scenery[2][x] = new Mario.Prop(
[16 * x, 32],
this.flagpoleSprites[0],
);
this.items.push(new Mario.Flag(16 * x));
};
})();

132
examples/mario/js/mushroom.js
View File

@@ -1,132 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Mushroom = (Mario.Mushroom = function (pos) {
this.spawning = false;
this.waiting = 0;
Mario.Entity.call(this, {
pos: pos,
sprite: level.superShroomSprite,
hitbox: [0, 0, 16, 16],
});
});
Mario.Util.inherits(Mushroom, Mario.Entity);
Mushroom.prototype.render = function (ctx, vX, vY) {
if (this.spawning > 1) return;
this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
};
Mushroom.prototype.spawn = function () {
if (player.power > 0) {
//replace this with a fire flower
var ff = new Mario.Fireflower(this.pos);
ff.spawn();
return;
}
sounds.itemAppear.play();
this.idx = level.items.length;
level.items.push(this);
this.spawning = 12;
this.targetpos = [];
this.targetpos[0] = this.pos[0];
this.targetpos[1] = this.pos[1] - 16;
};
Mushroom.prototype.update = function (dt) {
if (this.spawning > 1) {
this.spawning -= 1;
if (this.spawning == 1) this.vel[1] = -0.5;
return;
}
if (this.spawning) {
if (this.pos[1] <= this.targetpos[1]) {
this.pos[1] = this.targetpos[1];
this.vel[1] = 0;
this.waiting = 5;
this.spawning = 0;
this.vel[0] = 1;
}
} else {
this.acc[1] = 0.2;
}
if (this.waiting) {
this.waiting -= 1;
} else {
this.vel[1] += this.acc[1];
this.pos[0] += this.vel[0];
this.pos[1] += this.vel[1];
this.sprite.update(dt);
}
};
Mushroom.prototype.collideWall = function () {
this.vel[0] = -this.vel[0];
};
Mushroom.prototype.checkCollisions = function () {
if (this.spawning) {
return;
}
var h = this.pos[1] % 16 == 0 ? 1 : 2;
var w = this.pos[0] % 16 == 0 ? 1 : 2;
var baseX = Math.floor(this.pos[0] / 16);
var baseY = Math.floor(this.pos[1] / 16);
if (baseY + h > 15) {
delete level.items[this.idx];
return;
}
for (var i = 0; i < h; i++) {
for (var j = 0; j < w; j++) {
if (level.statics[baseY + i][baseX + j]) {
level.statics[baseY + i][baseX + j].isCollideWith(this);
}
if (level.blocks[baseY + i][baseX + j]) {
level.blocks[baseY + i][baseX + j].isCollideWith(this);
}
}
}
this.isPlayerCollided();
};
//we have access to player everywhere, so let's just do this.
Mushroom.prototype.isPlayerCollided = function () {
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [
player.pos[0] + player.hitbox[0],
player.pos[1] + player.hitbox[1],
];
//if the hitboxes actually overlap
if (
!(
hpos1[0] > hpos2[0] + player.hitbox[2] ||
hpos1[0] + this.hitbox[2] < hpos2[0]
)
) {
if (
!(
hpos1[1] > hpos2[1] + player.hitbox[3] ||
hpos1[1] + this.hitbox[3] < hpos2[1]
)
) {
player.powerUp(this.idx);
}
}
};
Mushroom.prototype.bump = function () {
this.vel[1] = -2;
};
})();

45
examples/mario/js/outline.txt
View File

@@ -1,45 +0,0 @@
Enemy:
#collideWith
checks collision. Bounces off of walls and other enemies. Kills marios.
gets killed by block bonk from below
Specific enemy behaviors:
koopas get replaced with shells
shells get kicked if touched from the side, instead of killing
Mario:
#collideWith
gets expelled from walls, bonks blocks, destroys blocks as big Mario
note: collision with blocks is determined by which one is over the center
if you're slightly to the side, you slip past it.
Crazy-ass sprite shifting if you're in star mode!
Item
#collideWith
item pickup logic
Mushroom
#update
movement logic for mushrooms
get impulse from being block bonked
this can be implemented by giving them the appropriate accel
just if they overlap a block from the bottom.
of course, only AFTER they finish sliding out of the block.
Water levels:
make a separate class for water Marios
less gravity
swimming sprite
fireballs are the same
jump works when not on the ground
different enemies
TODO: Make level loader use hashes instead of arrays where possible.
Should be a free performance gain.
Should also make item deletion less weird.
TODO: Make gravity exist higher up instead of having a magic number.
Note from the future: Nope. Different objects have different gravity.

228
examples/mario/js/pipe.js
View File

@@ -1,228 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
//there are too many possible configurations of pipe to capture in a reasonable
//set of simple variables. Joints, etc. are just too much.
//To that end, the pipe class handles simple pipes, and we'll put together
//anything more complex with individual props. OK? OK.
Pipe = Mario.Pipe = function (options) {
this.pos = options.pos;
//NOTE: direction is the direction you move INTO the pipe.
this.direction = options.direction;
this.destination = options.destination;
this.length = options.length;
if (this.direction === "UP" || this.direction === "DOWN") {
this.hitbox = [0, 0, 32, this.length * 16];
this.midsection = level.pipeUpMid;
this.endsection = level.pipeTop;
} else {
this.hitbox = [0, 0, 16 * this.length, 32];
this.midsection = level.pipeSideMid;
this.endsection = level.pipeLeft;
}
};
Pipe.prototype.checkPipe = function () {
if (this.destination === undefined || !input.isDown(this.direction))
return;
var h = player.power === 0 ? 16 : 32;
var x = Math.floor(player.pos[0]);
var y = Math.floor(player.pos[1]);
switch (this.direction) {
case "RIGHT":
if (
x === this.pos[0] - 16 &&
y >= this.pos[1] &&
y + h <= this.pos[1] + 32
) {
player.pipe(this.direction, this.destination);
}
break;
case "LEFT":
if (
x === this.pos[0] + 16 * this.length &&
y >= this.pos[1] &&
y + h <= this.pos[1] + 32
) {
player.pipe(this.direction, this.destination);
}
break;
case "UP":
if (
y === this.pos[1] + 16 * this.length &&
x >= this.pos[0] &&
x + 16 <= this.pos[0] + 32
) {
player.pipe(this.direction, this.destination);
}
break;
case "DOWN":
if (
y + h === this.pos[1] &&
x >= this.pos[0] &&
x + 16 <= this.pos[0] + 32
) {
player.pipe(this.direction, this.destination);
}
break;
}
};
//Note to self: next time, decide on a convention for which thing checks for collisions
//and stick to it. This is a pain.
Pipe.prototype.checkCollisions = function () {
var that = this;
level.enemies.forEach(function (ent) {
that.isCollideWith(ent);
});
level.items.forEach(function (ent) {
that.isCollideWith(ent);
});
fireballs.forEach(function (ent) {
that.isCollideWith(ent);
});
if (!player.piping) this.isCollideWith(player);
};
Pipe.prototype.isCollideWith = function (ent) {
//long story short: because we scan every item, and and one 'rubble' item is four things with separate positions
//we'll crash without this line as soon as we destroy a block. OOPS.
if (ent.pos === undefined) return;
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [
Math.floor(this.pos[0] + this.hitbox[0]),
Math.floor(this.pos[1] + this.hitbox[1]),
];
var hpos2 = [
Math.floor(ent.pos[0] + ent.hitbox[0]),
Math.floor(ent.pos[1] + ent.hitbox[1]),
];
//if the hitboxes actually overlap
if (
!(
hpos1[0] > hpos2[0] + ent.hitbox[2] ||
hpos1[0] + this.hitbox[2] < hpos2[0]
)
) {
if (
!(
hpos1[1] > hpos2[1] + ent.hitbox[3] ||
hpos1[1] + this.hitbox[3] < hpos2[1]
)
) {
//if the entity is over the block, it's basically floor
var center = hpos2[0] + ent.hitbox[2] / 2;
if (
Math.abs(hpos2[1] + ent.hitbox[3] - hpos1[1]) <= ent.vel[1]
) {
ent.vel[1] = 0;
ent.pos[1] = hpos1[1] - ent.hitbox[3] - ent.hitbox[1];
ent.standing = true;
if (ent instanceof Mario.Player) {
ent.jumping = 0;
}
} else if (
Math.abs(hpos2[1] - hpos1[1] - this.hitbox[3]) >
ent.vel[1] &&
center + 2 >= hpos1[0] &&
center - 2 <= hpos1[0] + this.hitbox[2]
) {
//ent is under the block.
ent.vel[1] = 0;
ent.pos[1] = hpos1[1] + this.hitbox[3];
if (ent instanceof Mario.Player) {
ent.jumping = 0;
}
} else {
//entity is hitting it from the side, we're a wall
ent.collideWall(this);
}
}
}
};
//we COULD try to write some shenanigans so that the check gets put into the
//collision code, but there won't ever be more than a handful of pipes in a level
//so the performance hit of scanning all of them is miniscule.
Pipe.prototype.update = function (dt) {
if (this.destination) this.checkPipe();
};
//http://stackoverflow.com/questions/11227809/why-is-processing-a-sorted-array-faster-than-an-unsorted-array
//I honestly have no idea if javascript does this, but I feel like it makes sense
//stylistically to prefer branching outside of loops when possible as convention
//TODO: edit the spritesheet so UP and LEFT pipes aren't backwards.
Pipe.prototype.render = function (ctx, vX, vY) {
switch (this.direction) {
case "DOWN":
this.endsection.render(ctx, this.pos[0], this.pos[1], vX, vY);
for (var i = 1; i < this.length; i++) {
this.midsection.render(
ctx,
this.pos[0],
this.pos[1] + i * 16,
vX,
vY,
);
}
break;
case "UP":
this.endsection.render(
ctx,
this.pos[0],
this.pos[1] + 16 * (this.length - 1),
vX,
vY,
);
for (var i = 0; i < this.length - 1; i++) {
this.midsection.render(
ctx,
this.pos[0],
this.pos[1] + i * 16,
vX,
vY,
);
}
break;
case "RIGHT":
this.endsection.render(ctx, this.pos[0], this.pos[1], vX, vY);
for (var i = 1; i < this.length; i++) {
this.midsection.render(
ctx,
this.pos[0] + 16 * i,
this.pos[1],
vX,
vY,
);
}
break;
case "LEFT":
this.endsection.render(
ctx,
this.pos[0] + 16 * (this.length - 1),
this.pos[1],
vX,
vY,
);
for (var i = 0; i < this.legth - 1; i++) {
this.midsection.render(
ctx,
this.pos[0],
this.pos[1] + i * 16,
vX,
vY,
);
}
break;
}
};
})();

505
examples/mario/js/player.js
View File

@@ -1,505 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Player = (Mario.Player = function (pos) {
//I know, I know, there are a lot of variables tracking Mario's state.
//Maybe these can be consolidated some way? We'll see once they're all in.
this.power = 0;
this.coins = 0;
this.powering = [];
this.bounce = false;
this.jumping = 0;
this.canJump = true;
this.invincibility = 0;
this.crouching = false;
this.fireballs = 0;
this.runheld = false;
this.noInput = false;
this.targetPos = [];
Mario.Entity.call(this, {
pos: pos,
sprite: new Mario.Sprite(
"sprites/player.png",
[80, 32],
[16, 16],
0,
),
hitbox: [0, 0, 16, 16],
});
});
Mario.Util.inherits(Player, Mario.Entity);
Player.prototype.run = function () {
this.maxSpeed = 2.5;
if (this.power == 2 && !this.runheld) {
this.shoot();
}
this.runheld = true;
};
Player.prototype.shoot = function () {
if (this.fireballs >= 2) return; //Projectile limit!
this.fireballs += 1;
var fb = new Mario.Fireball([this.pos[0] + 8, this.pos[1]]); //I hate you, Javascript.
fb.spawn(this.left);
this.shooting = 2;
};
Player.prototype.noRun = function () {
this.maxSpeed = 1.5;
this.moveAcc = 0.07;
this.runheld = false;
};
Player.prototype.moveRight = function () {
//we're on the ground
if (this.vel[1] === 0 && this.standing) {
if (this.crouching) {
this.noWalk();
return;
}
this.acc[0] = this.moveAcc;
this.left = false;
} else {
this.acc[0] = this.moveAcc;
}
};
Player.prototype.moveLeft = function () {
if (this.vel[1] === 0 && this.standing) {
if (this.crouching) {
this.noWalk();
return;
}
this.acc[0] = -this.moveAcc;
this.left = true;
} else {
this.acc[0] = -this.moveAcc;
}
};
Player.prototype.noWalk = function () {
this.maxSpeed = 0;
if (this.vel[0] === 0) return;
if (Math.abs(this.vel[0]) <= 0.1) {
this.vel[0] = 0;
this.acc[0] = 0;
}
};
Player.prototype.crouch = function () {
if (this.power === 0) {
this.crouching = false;
return;
}
if (this.standing) this.crouching = true;
};
Player.prototype.noCrouch = function () {
this.crouching = false;
};
Player.prototype.jump = function () {
if (this.vel[1] > 0) {
return;
}
if (this.jumping) {
this.jumping -= 1;
} else if (this.standing && this.canJump) {
this.jumping = 20;
this.canJump = false;
this.standing = false;
this.vel[1] = -6;
if (this.power === 0) {
sounds.smallJump.currentTime = 0;
sounds.smallJump.play();
} else {
sounds.bigJump.currentTime = 0;
sounds.bigJump.play();
}
}
};
Player.prototype.noJump = function () {
this.canJump = true;
if (this.jumping) {
if (this.jumping <= 16) {
this.vel[1] = 0;
this.jumping = 0;
} else this.jumping -= 1;
}
};
Player.prototype.setAnimation = function () {
if (this.dying) return;
if (this.starTime) {
var index;
if (this.starTime > 60) index = Math.floor(this.starTime / 2) % 3;
else index = Math.floor(this.starTime / 8) % 3;
this.sprite.pos[1] = level.invincibility[index];
if (this.power == 0) {
this.sprite.pos[1] += 32;
}
this.starTime -= 1;
if (this.starTime == 0) {
switch (this.power) {
case 0:
this.sprite.pos[1] = 32;
break;
case 1:
this.sprite.pos[1] = 0;
break;
case 2:
this.sprite.pos[1] = 96;
break;
}
}
}
//okay cool, now set the sprite
if (this.crouching) {
this.sprite.pos[0] = 176;
this.sprite.speed = 0;
return;
}
if (this.jumping) {
this.sprite.pos[0] = 160;
this.sprite.speed = 0;
} else if (this.standing) {
if (Math.abs(this.vel[0]) > 0) {
if (this.vel[0] * this.acc[0] >= 0) {
this.sprite.pos[0] = 96;
this.sprite.frames = [0, 1, 2];
if (this.vel[0] < 0.2) {
this.sprite.speed = 5;
} else {
this.sprite.speed = Math.abs(this.vel[0]) * 8;
}
} else if (
(this.vel[0] > 0 && this.left) ||
(this.vel[0] < 0 && !this.left)
) {
this.sprite.pos[0] = 144;
this.sprite.speed = 0;
}
} else {
this.sprite.pos[0] = 80;
this.sprite.speed = 0;
}
if (this.shooting) {
this.sprite.pos[0] += 160;
this.shooting -= 1;
}
}
if (this.flagging) {
this.sprite.pos[0] = 192;
this.sprite.frames = [0, 1];
this.sprite.speed = 10;
if (this.vel[1] === 0) this.sprite.frames = [0];
}
//which way are we facing?
if (this.left) {
this.sprite.img = "sprites/playerl.png";
} else {
this.sprite.img = "sprites/player.png";
}
};
Player.prototype.update = function (dt, vX) {
if (this.powering.length !== 0) {
var next = this.powering.shift();
if (next == 5) return;
this.sprite.pos = this.powerSprites[next];
this.sprite.size = this.powerSizes[next];
this.pos[1] += this.shift[next];
if (this.powering.length === 0) {
delete level.items[this.touchedItem];
}
return;
}
if (this.invincibility) {
this.invincibility -= Math.round(dt * 60);
}
if (this.waiting) {
this.waiting -= dt;
if (this.waiting <= 0) {
this.waiting = 0;
} else return;
}
if (this.bounce) {
this.bounce = false;
this.standing = false;
this.vel[1] = -3;
}
if (this.pos[0] <= vX) {
this.pos[0] = vX;
this.vel[0] = Math.max(this.vel[0], 0);
}
if (Math.abs(this.vel[0]) > this.maxSpeed) {
this.vel[0] -= (0.05 * this.vel[0]) / Math.abs(this.vel[0]);
this.acc[0] = 0;
}
if (this.dying) {
if (this.pos[1] < this.targetPos[1]) {
this.vel[1] = 1;
}
this.dying -= 1 * dt;
if (this.dying <= 0) {
player = new Mario.Player(level.playerPos);
level.loader.call();
input.reset();
}
} else {
this.acc[1] = 0.25;
if (this.pos[1] > 240) {
this.die();
}
}
if (this.piping) {
this.acc = [0, 0];
var pos = [Math.round(this.pos[0]), Math.round(this.pos[1])];
if (pos[0] === this.targetPos[0] && pos[1] === this.targetPos[1]) {
this.piping = false;
this.pipeLoc.call();
}
}
if (this.flagging) {
this.acc = [0, 0];
}
if (this.exiting) {
this.left = false;
this.flagging = false;
this.vel[0] = 1.5;
if (this.pos[0] >= this.targetPos[0]) {
this.sprite.size = [0, 0];
this.vel = [0, 0];
window.setTimeout(function () {
player.sprite.size =
player.power === 0 ? [16, 16] : [16, 32];
player.exiting = false;
player.noInput = false;
level.loader();
if (player.power !== 0) player.pos[1] -= 16;
music.overworld.currentTime = 0;
}, 5000);
}
}
//approximate acceleration
this.vel[0] += this.acc[0];
this.vel[1] += this.acc[1];
this.pos[0] += this.vel[0];
this.pos[1] += this.vel[1];
this.setAnimation();
this.sprite.update(dt);
};
Player.prototype.checkCollisions = function () {
if (this.piping || this.dying) return;
//x-axis first!
var h = this.power > 0 ? 2 : 1;
var w = 1;
if (this.pos[1] % 16 !== 0) {
h += 1;
}
if (this.pos[0] % 16 !== 0) {
w += 1;
}
var baseX = Math.floor(this.pos[0] / 16);
var baseY = Math.floor(this.pos[1] / 16);
for (var i = 0; i < h; i++) {
if (baseY + i < 0 || baseY + i >= 15) continue;
for (var j = 0; j < w; j++) {
if (baseY < 0) {
i++;
}
if (level.statics[baseY + i][baseX + j]) {
level.statics[baseY + i][baseX + j].isCollideWith(this);
}
if (level.blocks[baseY + i][baseX + j]) {
level.blocks[baseY + i][baseX + j].isCollideWith(this);
}
}
}
};
Player.prototype.powerUp = function (idx) {
sounds.powerup.play();
this.powering = [
0, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2, 5, 3, 5, 1, 5, 2, 5, 3, 5, 1, 5, 4,
];
this.touchedItem = idx;
if (this.power === 0) {
this.sprite.pos[0] = 80;
var newy = this.sprite.pos[1] - 32;
this.powerSprites = [
[80, newy + 32],
[80, newy + 32],
[320, newy],
[80, newy],
[128, newy],
];
this.powerSizes = [
[16, 16],
[16, 16],
[16, 32],
[16, 32],
[16, 32],
];
this.shift = [0, 16, -16, 0, -16];
this.power = 1;
this.hitbox = [0, 0, 16, 32];
} else if (this.power == 1) {
var curx = this.sprite.pos[0];
this.powerSprites = [
[curx, 96],
[curx, level.invincibility[0]],
[curx, level.invincibility[1]],
[curx, level.invincibility[2]],
[curx, 96],
];
this.powerSizes[([16, 32], [16, 32], [16, 32], [16, 32], [16, 32])];
this.shift = [0, 0, 0, 0, 0];
this.power = 2;
} else {
this.powering = [];
delete level.items[idx];
//no animation, but we play the sound and you get 5000 points.
}
};
Player.prototype.damage = function () {
if (this.power === 0) {
//if you're already small, you dead!
this.die();
} else {
//otherwise, you get turned into small mario
sounds.pipe.play();
this.powering = [
0, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2,
5, 3,
];
this.shift = [0, 16, -16, 16];
this.sprite.pos = [160, 0];
this.powerSprites = [
[160, 0],
[240, 32],
[240, 0],
[160, 32],
];
this.powerSizes = [
[16, 32],
[16, 16],
[16, 32],
[16, 16],
];
this.invincibility = 120;
this.power = 0;
this.hitbox = [0, 0, 16, 16];
}
};
Player.prototype.die = function () {
//TODO: rewrite the way sounds work to emulate the channels of an NES.
music.overworld.pause();
music.underground.pause();
music.overworld.currentTime = 0;
music.death.play();
this.noWalk();
this.noRun();
this.noJump();
this.acc[0] = 0;
this.sprite.pos = [176, 32];
this.sprite.speed = 0;
this.power = 0;
this.waiting = 0.5;
this.dying = 2;
if (this.pos[1] < 240) {
//falling into a pit doesn't do the animation.
this.targetPos = [this.pos[0], this.pos[1] - 128];
this.vel = [0, -5];
} else {
this.vel = [0, 0];
this.targetPos = [this.pos[0], this.pos[1] - 16];
}
};
Player.prototype.star = function (idx) {
delete level.items[idx];
this.starTime = 660;
};
Player.prototype.pipe = function (direction, destination) {
sounds.pipe.play();
this.piping = true;
this.pipeLoc = destination;
switch (direction) {
case "LEFT":
this.vel = [-1, 0];
this.targetPos = [
Math.round(this.pos[0] - 16),
Math.round(this.pos[1]),
];
break;
case "RIGHT":
this.vel = [1, 0];
this.targetPos = [
Math.round(this.pos[0] + 16),
Math.round(this.pos[1]),
];
break;
case "DOWN":
this.vel = [0, 1];
this.targetPos = [
Math.round(this.pos[0]),
Math.round(this.pos[1] + this.hitbox[3]),
];
break;
case "UP":
this.vel = [0, -1];
this.targetPos = [
Math.round(this.pos[0]),
Math.round(this.pos[1] - this.hitbox[3]),
];
break;
}
};
Player.prototype.flag = function () {
this.noInput = true;
this.flagging = true;
this.vel = [0, 2];
this.acc = [0, 0];
};
Player.prototype.exit = function () {
this.pos[0] += 16;
this.targetPos[0] = level.exit * 16;
this.left = true;
this.setAnimation();
this.waiting = 1;
this.exiting = true;
};
})();

14
examples/mario/js/prop.js
View File

@@ -1,14 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
//props do even less than entities, so they don't need to inherit really
var Prop = (Mario.Prop = function (pos, sprite) {
this.pos = pos;
this.sprite = sprite;
});
//but we will be using the same Render, more or less.
Prop.prototype.render = function (ctx, vX, vY) {
this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
};
})();

61
examples/mario/js/resources.js
View File

@@ -1,61 +0,0 @@
//simple resource loader
(function () {
var resourceCache = {};
var loading = [];
var readyCallbacks = [];
// Load an image url or an array of image urls
function load(urlOrArr) {
if (urlOrArr instanceof Array) {
urlOrArr.forEach(function (url) {
_load(url);
});
} else {
_load(urlOrArr);
}
}
function _load(url) {
if (resourceCache[url]) {
return resourceCache[url];
} else {
var img = new Image();
img.onload = function () {
resourceCache[url] = img;
if (isReady()) {
readyCallbacks.forEach(function (func) {
func();
});
}
};
resourceCache[url] = false;
img.src = url;
}
}
function get(url) {
return resourceCache[url];
}
function isReady() {
var ready = true;
for (var k in resourceCache) {
if (resourceCache.hasOwnProperty(k) && !resourceCache[k]) {
ready = false;
}
}
return ready;
}
function onReady(func) {
readyCallbacks.push(func);
}
window.resources = {
load: load,
get: get,
onReady: onReady,
isReady: isReady,
};
})();

64
examples/mario/js/rubble.js
View File

@@ -1,64 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
//TODO: make each rubble an entity, use that render and write in Entity.update
var Rubble = (Mario.Rubble = function () {
this.sprites = [];
this.poss = [];
this.vels = [];
});
Rubble.prototype.spawn = function (pos) {
this.idx = level.items.length;
level.items.push(this);
this.sprites[0] = level.rubbleSprite();
this.sprites[1] = level.rubbleSprite();
this.sprites[2] = level.rubbleSprite();
this.sprites[3] = level.rubbleSprite();
this.poss[0] = pos;
this.poss[1] = [pos[0] + 8, pos[1]];
this.poss[2] = [pos[0], pos[1] + 8];
this.poss[3] = [pos[0] + 8, pos[1] + 8];
this.vels[0] = [-1.25, -5];
this.vels[1] = [1.25, -5];
this.vels[2] = [-1.25, -3];
this.vels[3] = [1.25, -3];
};
Rubble.prototype.update = function (dt) {
for (var i = 0; i < 4; i++) {
if (this.sprites[i] === undefined) continue;
this.vels[i][1] += 0.3;
this.poss[i][0] += this.vels[i][0];
this.poss[i][1] += this.vels[i][1];
this.sprites[i].update(dt);
if (this.poss[i][1] > 256) {
delete this.sprites[i];
}
}
if (
this.sprites.every(function (el) {
return !el;
})
) {
delete level.items[this.idx];
}
};
//You might argue that things that can't collide are more like scenery
//but these move and need to be deleted, and i'd rather deal with the 1d array.
Rubble.prototype.checkCollisions = function () {};
Rubble.prototype.render = function () {
for (var i = 0; i < 4; i++) {
if (this.sprites[i] === undefined) continue;
this.sprites[i].render(
ctx,
this.poss[i][0],
this.poss[i][1],
vX,
vY,
);
}
};
})();

63
examples/mario/js/sprite.js
View File

@@ -1,63 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Sprite = (Mario.Sprite = function (
img,
pos,
size,
speed,
frames,
once,
) {
this.pos = pos;
this.size = size;
this.speed = speed;
this._index = 0;
this.img = img;
this.once = once;
this.frames = frames;
});
Sprite.prototype.update = function (dt, gameTime) {
if (gameTime && gameTime == this.lastUpdated) return;
this._index += this.speed * dt;
if (gameTime) this.lastUpdated = gameTime;
};
Sprite.prototype.setFrame = function (frame) {
this._index = frame;
};
Sprite.prototype.render = function (ctx, posx, posy, vX, vY) {
var frame;
if (this.speed > 0) {
var max = this.frames.length;
var idx = Math.floor(this._index);
frame = this.frames[idx % max];
if (this.once && idx >= max) {
this.done = true;
return;
}
} else {
frame = 0;
}
var x = this.pos[0];
var y = this.pos[1];
x += frame * this.size[0];
ctx.drawImage(
resources.get(this.img),
x + 1 / 3,
y + 1 / 3,
this.size[0] - 2 / 3,
this.size[1] - 2 / 3,
Math.round(posx - vX),
Math.round(posy - vY),
this.size[0],
this.size[1],
);
};
})();

130
examples/mario/js/star.js
View File

@@ -1,130 +0,0 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Star = (Mario.Star = function (pos) {
this.spawning = false;
this.waiting = 0;
Mario.Entity.call(this, {
pos: pos,
sprite: level.starSprite,
hitbox: [0, 0, 16, 16],
});
});
Mario.Util.inherits(Star, Mario.Entity);
Star.prototype.render = function (ctx, vX, vY) {
if (this.spawning > 1) return;
this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
};
Star.prototype.spawn = function () {
this.idx = level.items.length;
level.items.push(this);
this.spawning = 12;
this.targetpos = [];
this.targetpos[0] = this.pos[0];
this.targetpos[1] = this.pos[1] - 16;
};
Star.prototype.update = function (dt) {
if (this.spawning > 1) {
this.spawning -= 1;
if (this.spawning == 1) this.vel[1] = -0.5;
return;
}
if (this.spawning) {
if (this.pos[1] <= this.targetpos[1]) {
this.pos[1] = this.targetpos[1];
this.vel[1] = 0;
this.waiting = 5;
this.spawning = 0;
this.vel[0] = 1;
}
} else {
this.acc[1] = 0.2;
}
if (this.standing) {
this.standing = false;
this.vel[1] = -3;
}
if (this.waiting) {
this.waiting -= 1;
} else {
this.vel[1] += this.acc[1];
this.pos[0] += this.vel[0];
this.pos[1] += this.vel[1];
this.sprite.update(dt);
}
};
Star.prototype.collideWall = function () {
this.vel[0] = -this.vel[0];
};
Star.prototype.checkCollisions = function () {
if (this.spawning) {
return;
}
var h = this.pos[1] % 16 == 0 ? 1 : 2;
var w = this.pos[0] % 16 == 0 ? 1 : 2;
var baseX = Math.floor(this.pos[0] / 16);
var baseY = Math.floor(this.pos[1] / 16);
if (baseY + h > 15) {
delete level.items[this.idx];
return;
}
for (var i = 0; i < h; i++) {
for (var j = 0; j < w; j++) {
if (level.statics[baseY + i][baseX + j]) {
level.statics[baseY + i][baseX + j].isCollideWith(this);
}
if (level.blocks[baseY + i][baseX + j]) {
level.blocks[baseY + i][baseX + j].isCollideWith(this);
}
}
}
this.isPlayerCollided();
};
//we have access to player everywhere, so let's just do this.
Star.prototype.isPlayerCollided = function () {
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [
player.pos[0] + player.hitbox[0],
player.pos[1] + player.hitbox[1],
];
//if the hitboxes actually overlap
if (
!(
hpos1[0] > hpos2[0] + player.hitbox[2] ||
hpos1[0] + this.hitbox[2] < hpos2[0]
)
) {
if (
!(
hpos1[1] > hpos2[1] + player.hitbox[3] ||
hpos1[1] + this.hitbox[3] < hpos2[1]
)
) {
player.star(this.idx);
}
}
};
Star.prototype.bump = function () {
this.vel[1] = -2;
};
})();

14
examples/mario/js/util.js
View File

@@ -1,14 +0,0 @@
(function () {
if (typeof Mario === "undefined") {
window.Mario = {};
}
var Util = (Mario.Util = {});
Util.inherits = function (subclass, superclass) {
function Surrogate() {}
Surrogate.prototype = superclass.prototype;
subclass.prototype = new Surrogate();
};
})();

160
examples/mario/play_mario.html
View File

@@ -1,160 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Mario</title>
<link rel="icon" type="image/png" href="../favicon.png" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/input.js"></script>
<script type="text/javascript" src="js/resources.js"></script>
<script type="text/javascript" src="js/sprite.js"></script>
<script type="text/javascript" src="js/entity.js"></script>
<script type="text/javascript" src="js/pipe.js"></script>
<script type="text/javascript" src="js/mushroom.js"></script>
<script type="text/javascript" src="js/fireflower.js"></script>
<script type="text/javascript" src="js/star.js"></script>
<script type="text/javascript" src="js/fireball.js"></script>
<script type="text/javascript" src="js/coin.js"></script>
<script type="text/javascript" src="js/bcoin.js"></script>
<script type="text/javascript" src="js/goomba.js"></script>
<script type="text/javascript" src="js/koopa.js"></script>
<script type="text/javascript" src="js/floor.js"></script>
<script type="text/javascript" src="js/block.js"></script>
<script type="text/javascript" src="js/rubble.js"></script>
<script type="text/javascript" src="js/prop.js"></script>
<script type="text/javascript" src="js/player.js"></script>
<script type="text/javascript" src="js/flag.js"></script>
<script type="text/javascript" src="js/levels/level.js"></script>
<script type="text/javascript" src="js/levels/11.js"></script>
<script type="text/javascript" src="js/levels/11tunnel.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<py-script>
from js import handTrack, setTimeout, requestAnimationFrame, player
from pyodide import create_once_callable
import asyncio
update_note = Element("update-note")
canvas = Element("canvas")
video = Element("myvideo")
context = canvas.element.getContext("2d")
isVideo = False
model = None
last_position = 0
direction = "stop"
modelParams = {
"flipHorizontal": True, # flip e.g for video
"maxNumBoxes": 20, # maximum number of boxes to detect
"iouThreshold": 0.5, # ioU threshold for non-max suppression
"scoreThreshold": 0.6, # confidence threshold for predictions.
}
def toggle_video():
global isVideo
player.jump()
if (not isVideo):
update_note.write("Starting video")
pyscript.run_until_complete(start_video())
else:
update_note.write("Stopping video")
handTrack.stopVideo(video.element)
isVideo = False
update_note.write("Video stopped")
async def start_video():
global isVideo
update_note.write("Inside start video")
status = await handTrack.startVideo(video.element)
console.log("video started", status)
if status:
update_note.write("Video started. Now tracking")
isVideo = True
console.log( "Calling RUN DETECTION")
y = await run_detection()
else:
update_note.write( "Please enable video")
def sync_run_detection(evt):
pyscript.run_until_complete(run_detection())
async def run_detection():
global model
global isVideo
global last_position
global direction
predictions = await model.detect(video.element)
model.renderPredictions(predictions, canvas.element, context, video.element);
if predictions:
curr_position = predictions[0].bbox[0] + (predictions[0].bbox[2] / 2)
delta = last_position - curr_position
last_position = curr_position
#console.log(delta, curr_position, last_position)
if abs(delta) < 2:
direction = "stop"
elif delta > 0:
direction = "left"
else:
direction = "right"
for prediction in predictions:
if prediction.label == 'open':
player.jump()
elif prediction.label == 'close':
player.crouch()
if (isVideo):
await requestAnimationFrame(create_once_callable(sync_run_detection));
def handle_model(lmodel):
global model
model = lmodel
update_note.write("Loaded Model!")
async def start():
model = await handTrack.load(modelParams)#.then(handle_model)
handle_model(model)
pyscript.run_until_complete(start())
</py-script>
<div class="mb10">
<p>
Use < > to move, ↓ to crouch and x to jump. If video is enabled,
say hi to jump as well!
</p>
<button
id="trackbutton"
class="bx--btn bx--btn--secondary"
type="button"
py-click="toggle_video()"
>
Start Video
</button>
<div id="update-note" py-mount class="updatenote mt10">
loading model ..
</div>
</div>
<div>
<video autoplay="autoplay" id="myvideo" py-mount="video"></video>
<canvas id="canvas" py-mount class="border canvasbox"></canvas>
</div>
<script src="../handtrack/lib/handtrack.min.js"></script>
</body>
</html>

BIN
examples/mario/sounds/aboveground_bgm.ogg
View File

Binary file not shown.

BIN
examples/mario/sounds/breakblock.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/bump.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/coin.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/fireball.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/flagpole.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/itemAppear.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/jump-small.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/jump-super.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/kick.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/mariodie.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/pipe.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/powerup.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/stage_clear.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/stomp.wav
View File

Binary file not shown.

BIN
examples/mario/sounds/underground_bgm.ogg
View File

Binary file not shown.

BIN
examples/mario/sprites/1-1 reference.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
examples/mario/sprites/enemy.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
examples/mario/sprites/enemyr.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
examples/mario/sprites/items.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 50 KiB

BIN
examples/mario/sprites/player.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 74 KiB

BIN
examples/mario/sprites/playerl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 74 KiB

BIN
examples/mario/sprites/tiles.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

33
examples/markdown-plugin.html
View File

@@ -1,33 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PyMarkdown</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<link rel="stylesheet" href="./assets/css/examples.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-tutor>
<py-config>
packages = [
"markdown"
]
plugins = [
"https://pyscript.net/latest/plugins/python/py_markdown.py",
"https://pyscript.net/latest/plugins/python/py_tutor.py"
]
</py-config>
<py-md>#Hello world!</py-md>
</py-tutor>
</body>
</html>

69
examples/message_passing.html
View File

@@ -1,69 +0,0 @@
<html>
<head>
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>
<body>
<py-tutor>
<py-config>
packages = [
"numpy",
"networkx",
"matplotlib"
]
plugins = [
"https://pyscript.net/latest/plugins/python/py_tutor.py"
]
</py-config>
<py-script>
import numpy as np
import networkx as nx
</py-script>
<p>Message passing with linear algebra: a demo.</p>
<p>Imagine we have a chain graph that looks like this:</p>
<pre><code>O --> 1 --> 2 --> 3</code></pre>
<p>In NetworkX this graph would look like the following:</p>
<pre>
<py-script>
G = nx.Graph()
nodes = list(range(4))
G.add_edges_from(zip(nodes[0:-1], nodes[1:]))
print(G.edges())
</py-script>
</pre>
<p>This chain graph has the following adjacency matrix:</p>
<pre>
<py-script>
adj_mat = np.eye(4, k=1)
print(f"A: {adj_mat}")
</py-script>
</pre>
<p>And imagine that we have a message that lives on the graph:</p>
<pre>
<py-script>
message = np.array([1.0, 0.0, 0.0, 0.0])
print(f"message: {message}")
</py-script>
</pre>
<p>
Try out message passing below by doing any one of the following
steps:
</p>
<pre><code>message @ adj_mat</code></pre>
<pre><code>message @ adj_mat @ adj_mat</code></pre>
<pre><code>message @ adj_mat @ adj_mat @ adj_mat</code></pre>
<div>
<py-repl id="my-repl" auto-generate="true"> </py-repl>
</div>
</py-tutor>
</body>
</html>

196
examples/micrograd_ai.html
View File

@@ -1,196 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<title>micrograd</title>
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
</head>
<body
style="
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
"
>
<h1>Micrograd - A tiny Autograd engine (with a bite! :))</h1>
<br />
<py-config>
packages = [
"micrograd",
"numpy",
"matplotlib"
]
</py-config>
<div>
<p>
<a href="https://github.com/karpathy/micrograd">Micrograd</a> is
a tiny Autograd engine created by
<a href="https://twitter.com/karpathy">Andrej Karpathy</a>. This
app recreates the
<a
href="https://github.com/karpathy/micrograd/blob/master/demo.ipynb"
>demo</a
>
he prepared for this package using pyscript to train a basic
model, written in Python, natively in the browser. <br />
</p>
</div>
<div>
<p>
You may run each Python REPL cell interactively by pressing
(Shift + Enter) or (Ctrl + Enter). You can also modify the code
directly as you wish. If you want to run all the code at once,
not each cell individually, you may instead click the 'Run All'
button. Training the model takes between 1-2 min if you decide
to 'Run All' at once. 'Run All' is your only option if you are
running this on a mobile device where you cannot press (Shift +
Enter). After the model is trained, a plot image should be
displayed depicting the model's ability to classify the data.
<br />
</p>
<p>
Currently the <code>&gt;</code> symbol is being imported
incorrectly as <code>&amp;gt;</code> into the REPL's. In this
app the <code>&gt;</code> symbol has been replaced with
<code>().__gt__()</code> so you can run the code without issue.
Ex: instead of <code>a &gt; b</code>, you will see
<code>(a).__gt__(b)</code> instead. <br />
</p>
<py-script>
import js; js.document.getElementById('python-status').innerHTML = 'Python is now ready. You may proceed.'
</py-script>
<div id="python-status">
Python is currently starting. Please wait...
</div>
<button
id="run-all-button"
class="btn btn-primary"
type="submit"
py-click="run_all_micrograd_demo()"
>
Run All</button
><br />
<py-script src="/micrograd_ai.py"></py-script>
<div id="micrograd-run-all-print-div"></div>
<br />
<div id="micrograd-run-all-fig1-div"></div>
<div id="micrograd-run-all-fig2-div"></div>
<br />
</div>
<py-repl auto-generate="false">
import random import numpy as np import matplotlib.pyplot as plt </py-repl
><br />
<py-repl auto-generate="false">
from micrograd.engine import Value from micrograd.nn import Neuron,
Layer, MLP </py-repl
><br />
<py-repl auto-generate="true">
np.random.seed(1337) random.seed(1337) </py-repl
><br />
<py-repl auto-generate="true">
#An adaptation of sklearn's make_moons function
https://scikit-learn.org/stable/modules/generated/sklearn.datasets.make_moons.html
def make_moons(n_samples=100, noise=None): n_samples_out,
n_samples_in = n_samples, n_samples outer_circ_x =
np.cos(np.linspace(0, np.pi, n_samples_out)) outer_circ_y =
np.sin(np.linspace(0, np.pi, n_samples_out)) inner_circ_x = 1 -
np.cos(np.linspace(0, np.pi, n_samples_in)) inner_circ_y = 1 -
np.sin(np.linspace(0, np.pi, n_samples_in)) - 0.5 X =
np.vstack([np.append(outer_circ_x, inner_circ_x),
np.append(outer_circ_y, inner_circ_y)]).T y =
np.hstack([np.zeros(n_samples_out, dtype=np.intp),
np.ones(n_samples_in, dtype=np.intp)]) if noise is not None: X +=
np.random.normal(loc=0.0, scale=noise, size=X.shape) return X, y X,
y = make_moons(n_samples=100, noise=0.1) </py-repl
><br />
<py-repl auto-generate="true">
y = y*2 - 1 # make y be -1 or 1 # visualize in 2D
plt.figure(figsize=(5,5)) plt.scatter(X[:,0], X[:,1], c=y, s=20,
cmap='jet') plt </py-repl
><br />
<py-repl auto-generate="true">
model = MLP(2, [16, 16, 1]) # 2-layer neural network print(model)
print("number of parameters", len(model.parameters())) </py-repl
><br />
<div>
Line 24 has been changed from: <br />
<code
>accuracy = [(yi &gt; 0) == (scorei.data &gt; 0) for yi, scorei
in zip(yb, scores)]</code
><br />
to: <br />
<code
>accuracy = [((yi).__gt__(0)) == ((scorei.data).__gt__(0)) for
yi, scorei in zip(yb, scores)]</code
><br />
</div>
<py-repl auto-generate="true">
# loss function def loss(batch_size=None): # inline DataLoader :) if
batch_size is None: Xb, yb = X, y else: ri =
np.random.permutation(X.shape[0])[:batch_size] Xb, yb = X[ri], y[ri]
inputs = [list(map(Value, xrow)) for xrow in Xb] # forward the model
to get scores scores = list(map(model, inputs)) # svm "max-margin"
loss losses = [(1 + -yi*scorei).relu() for yi, scorei in zip(yb,
scores)] data_loss = sum(losses) * (1.0 / len(losses)) # L2
regularization alpha = 1e-4 reg_loss = alpha * sum((p*p for p in
model.parameters())) total_loss = data_loss + reg_loss # also get
accuracy accuracy = [((yi).__gt__(0)) == ((scorei.data).__gt__(0))
for yi, scorei in zip(yb, scores)] return total_loss, sum(accuracy)
/ len(accuracy) total_loss, acc = loss() print(total_loss, acc) </py-repl
><br />
<py-repl auto-generate="true">
# optimization for k in range(20): #was 100. Accuracy can be further
improved w/ more epochs (to 100%). # forward total_loss, acc =
loss() # backward model.zero_grad() total_loss.backward() # update
(sgd) learning_rate = 1.0 - 0.9*k/100 for p in model.parameters():
p.data -= learning_rate * p.grad if k % 1 == 0: print(f"step {k}
loss {total_loss.data}, accuracy {acc*100}%") </py-repl
><br />
<div>
<p>
Please wait for the training loop above to complete. It will not
print out stats until it has completely finished. This typically
takes 1-2 min. <br /><br />
Line 9 has been changed from: <br />
<code>Z = np.array([s.data &gt; 0 for s in scores])</code><br />
to: <br />
<code>Z = np.array([(s.data).__gt__(0) for s in scores])</code
><br />
</p>
</div>
<py-repl auto-generate="true">
h = 0.25 x_min, x_max = X[:, 0].min() - 1, X[:, 0].max() + 1 y_min,
y_max = X[:, 1].min() - 1, X[:, 1].max() + 1 xx, yy =
np.meshgrid(np.arange(x_min, x_max, h), np.arange(y_min, y_max, h))
Xmesh = np.c_[xx.ravel(), yy.ravel()] inputs = [list(map(Value,
xrow)) for xrow in Xmesh] scores = list(map(model, inputs)) Z =
np.array([(s.data).__gt__(0) for s in scores]) Z =
Z.reshape(xx.shape) fig = plt.figure() plt.contourf(xx, yy, Z,
cmap=plt.cm.Spectral, alpha=0.8) plt.scatter(X[:, 0], X[:, 1], c=y,
s=40, cmap=plt.cm.Spectral) plt.xlim(xx.min(), xx.max())
plt.ylim(yy.min(), yy.max()) plt </py-repl
><br />
<py-repl auto-generate="true"> 1+1 </py-repl><br />
</body>
</html>
<!-- Adapted by Mat Miller -->

161
examples/micrograd_ai.py
View File

@@ -1,161 +0,0 @@
# Credit: https://github.com/karpathy/micrograd/blob/master/demo.ipynb
# cell
import datetime
import random
import matplotlib.pyplot as plt
import numpy as np
# cell
from micrograd.engine import Value
from micrograd.nn import MLP
print_statements = []
def run_all_micrograd_demo(*args, **kwargs):
result = micrograd_demo()
pyscript.write("micrograd-run-all-fig2-div", result)
def print_div(o):
o = str(o)
print_statements.append(o + " \n<br>")
pyscript.write("micrograd-run-all-print-div", "".join(print_statements))
# All code is wrapped in this run_all function so it optionally executed (called)
# from pyscript when a button is pressed.
def micrograd_demo(*args, **kwargs):
"""
Runs the micrograd demo.
*args and **kwargs do nothing and are only there to capture any parameters passed
from pyscript when this function is called when a button is clicked.
"""
# cell
start = datetime.datetime.now()
print_div("Starting...")
# cell
np.random.seed(1337)
random.seed(1337)
# cell
# An adaptation of sklearn's make_moons function
# https://scikit-learn.org/stable/modules/generated/sklearn.datasets.make_moons.html
def make_moons(n_samples=100, noise=None):
n_samples_out, n_samples_in = n_samples, n_samples
outer_circ_x = np.cos(np.linspace(0, np.pi, n_samples_out))
outer_circ_y = np.sin(np.linspace(0, np.pi, n_samples_out))
inner_circ_x = 1 - np.cos(np.linspace(0, np.pi, n_samples_in))
inner_circ_y = 1 - np.sin(np.linspace(0, np.pi, n_samples_in)) - 0.5
X = np.vstack(
[
np.append(outer_circ_x, inner_circ_x),
np.append(outer_circ_y, inner_circ_y),
]
).T
y = np.hstack(
[
np.zeros(n_samples_out, dtype=np.intp),
np.ones(n_samples_in, dtype=np.intp),
]
)
if noise is not None:
X += np.random.normal(loc=0.0, scale=noise, size=X.shape)
return X, y
X, y = make_moons(n_samples=100, noise=0.1)
# cell
y = y * 2 - 1 # make y be -1 or 1
# visualize in 2D
plt.figure(figsize=(5, 5))
plt.scatter(X[:, 0], X[:, 1], c=y, s=20, cmap="jet")
plt
pyscript.write("micrograd-run-all-fig1-div", plt)
# cell
model = MLP(2, [16, 16, 1]) # 2-layer neural network
print_div(model)
print_div(("number of parameters", len(model.parameters())))
# cell
# loss function
def loss(batch_size=None):
# inline DataLoader :)
if batch_size is None:
Xb, yb = X, y
else:
ri = np.random.permutation(X.shape[0])[:batch_size]
Xb, yb = X[ri], y[ri]
inputs = [list(map(Value, xrow)) for xrow in Xb]
# forward the model to get scores
scores = list(map(model, inputs))
# svm "max-margin" loss
losses = [
(1 + -yi * scorei).relu() for yi, scorei in zip(yb, scores, strict=True)
]
data_loss = sum(losses) * (1.0 / len(losses))
# L2 regularization
alpha = 1e-4
reg_loss = alpha * sum(p * p for p in model.parameters())
total_loss = data_loss + reg_loss
# also get accuracy
accuracy = [
((yi).__gt__(0)) == ((scorei.data).__gt__(0))
for yi, scorei in zip(yb, scores, strict=True)
]
return total_loss, sum(accuracy) / len(accuracy)
total_loss, acc = loss()
print((total_loss, acc))
# cell
# optimization
for k in range(20): # was 100
# forward
total_loss, _ = loss()
# backward
model.zero_grad()
total_loss.backward()
# update (sgd)
learning_rate = 1.0 - 0.9 * k / 100
for p in model.parameters():
p.data -= learning_rate * p.grad
if k % 1 == 0:
# print(f"step {k} loss {total_loss.data}, accuracy {acc*100}%")
print_div(f"step {k} loss {total_loss.data}, accuracy {acc*100}%")
# cell
h = 0.25
x_min, x_max = X[:, 0].min() - 1, X[:, 0].max() + 1
y_min, y_max = X[:, 1].min() - 1, X[:, 1].max() + 1
xx, yy = np.meshgrid(np.arange(x_min, x_max, h), np.arange(y_min, y_max, h))
Xmesh = np.c_[xx.ravel(), yy.ravel()]
inputs = [list(map(Value, xrow)) for xrow in Xmesh]
scores = list(map(model, inputs))
Z = np.array([(s.data).__gt__(0) for s in scores])
Z = Z.reshape(xx.shape)
_ = plt.figure()
plt.contourf(xx, yy, Z, cmap=plt.cm.Spectral, alpha=0.8)
plt.scatter(X[:, 0], X[:, 1], c=y, s=40, cmap=plt.cm.Spectral)
plt.xlim(xx.min(), xx.max())
plt.ylim(yy.min(), yy.max())
finish = datetime.datetime.now()
print_div(f"It took {(finish-start).seconds} seconds to run this code.")
plt
return plt

170
examples/py_list.py
View File

@@ -1,170 +0,0 @@
import time
from datetime import datetime as dt
from textwrap import dedent
import js
from pyscript import Element, Plugin, create
plugin = Plugin("PyList")
class PyItemTemplate(Element):
label_fields = None
def __init__(self, data, labels=None, state_key=None, parent=None):
self.data = data
self.register_parent(parent)
if not labels:
labels = list(self.data.keys())
self.labels = labels
self.state_key = state_key
super().__init__(self._id)
def register_parent(self, parent):
self._parent = parent
if parent:
self._id = f"{self._parent._id}-c-{len(self._parent._children)}"
self.data["id"] = self._id
else:
self._id = None
def create(self):
new_child = create("div", self._id, "py-li-element")
new_child._element.innerHTML = dedent(
f"""
<label id="{self._id}" for="flex items-center p-2 ">
<input class="mr-2" type="checkbox" class="task-check">
<p>{self.render_content()}</p>
</label>
"""
)
return new_child
def on_click(self, evt):
pass
def pre_append(self):
pass
def post_append(self):
self.element.click = self.on_click
self.element.onclick = self.on_click
self._post_append()
def _post_append(self):
pass
def strike(self, value, extra=None):
if value:
self.add_class("line-through")
else:
self.remove_class("line-through")
def render_content(self):
return " - ".join([self.data[f] for f in self.labels])
class PyListTemplate:
item_class = PyItemTemplate
def __init__(self, parent):
self.parent = parent
self._children = []
self._id = self.parent.id
self.main_style_classes = "py-li-element"
@property
def children(self):
return self._children
@property
def data(self):
return [c.data for c in self._children]
def render_children(self):
binds = {}
for i, c in enumerate(self._children):
txt = c.element.innerHTML
rnd = str(time.time()).replace(".", "")[-5:]
new_id = f"{c.element.id}-{i}-{rnd}"
binds[new_id] = c.element.id
txt = txt.replace(">", f" id='{new_id}'>")
print(txt)
def foo(evt):
evtEl = evt.srcElement
srcEl = Element(binds[evtEl.id])
srcEl.element.onclick()
evtEl.classList = srcEl.element.classList
for new_id in binds:
Element(new_id).element.onclick = foo
def connect(self):
self.md = main_div = js.document.createElement("div")
main_div.id = self._id + "-list-tasks-container"
if self.main_style_classes:
for klass in self.main_style_classes.split(" "):
main_div.classList.add(klass)
self.parent.appendChild(main_div)
def add(self, *args, **kws):
if not isinstance(args[0], self.item_class):
child = self.item_class(*args, **kws)
else:
child = args[0]
child.register_parent(self)
return self._add(child)
def _add(self, child_elem):
self.pre_child_append(child_elem)
child_elem.pre_append()
self._children.append(child_elem)
self.md.appendChild(child_elem.create().element)
child_elem.post_append()
self.child_appended(child_elem)
return child_elem
def pre_child_append(self, child):
pass
def child_appended(self, child):
"""Overwrite me to define logic"""
pass
class PyItem(PyItemTemplate):
def on_click(self, evt=None):
self.data["done"] = not self.data["done"]
self.strike(self.data["done"])
self.select("input").element.checked = self.data["done"]
class PyList(PyListTemplate):
item_class = PyItem
def add(self, item):
if isinstance(item, str):
item = {"content": item, "done": False, "created_at": dt.now()}
super().add(item, labels=["content"], state_key="done")
@plugin.register_custom_element("py-list")
class PyListPlugin:
def __init__(self, element):
self.element = element
self.py_list = PyList(self.element)
def add(self, item):
self.py_list.add(item)
def connect(self):
self.py_list.connect()

1
examples/readme.md
View File

@@ -1 +0,0 @@
# [Pyscript Examples](https://pyscript.net/examples/)

16
examples/repl.css
View File

@@ -1,16 +0,0 @@
#output > div {
font-family: "monospace";
background-color: #e5e5e5;
border: 1px solid lightgray;
border-top: 0;
font-size: 0.875rem;
padding: 0.5rem;
}
#output > div:first-child {
border-top: 1px solid lightgray;
}
#output > div:nth-child(even) {
border: 0;
}

47
examples/repl.html
View File

@@ -1,47 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>REPL</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>
<body>
<nav class="navbar" style="background-color: #000000">
<div class="app-header">
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" href="" style="color: #f0ab3c"
>PyScript REPL</a
>
</div>
</nav>
<section class="pyscript">
<h1><b>PyScript REPL</b></h1>
Tip: press Shift-ENTER to evaluate a cell
<br />
<py-tutor modules="antigravity.py">
<py-config>
plugins = [
"https://pyscript.net/latest/plugins/python/py_tutor.py"
]
[[fetch]]
files = ["./antigravity.py"]
</py-config>
<div style="margin-right: 3rem">
<py-repl id="my-repl" auto-generate="true"> </py-repl>
</div>
</py-tutor>
</section>
</body>
</html>

50
examples/repl2.html
View File

@@ -1,50 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Custom REPL Example</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<link rel="stylesheet" href="repl.css" />
<link rel="stylesheet" href="./assets/css/examples.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<nav class="navbar" style="background-color: #000000">
<div class="app-header">
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" href="" style="color: #f0ab3c">Custom REPL</a>
</div>
</nav>
<section class="pyscript">
<h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
<py-tutor modules="utils.py;antigravity.py">
<py-config>
packages = [
"bokeh",
"numpy"
]
plugins = [
"https://pyscript.net/latest/plugins/python/py_tutor.py"
]
[[fetch]]
files = ["./utils.py", "./antigravity.py"]
</py-config>
<div style="margin-right: 3rem">
<py-repl id="my-repl" auto-generate="true"> </py-repl>
<div id="output" class="p-4"></div>
</div>
</py-tutor>
</section>
</body>
</html>

179
examples/simple_bioinformatics_tool.html
View File

@@ -1,179 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>PyScript — Simple Bioinformatics Example</title>
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
type="text/css"
media="screen"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
/>
<link
rel="icon"
type="image/png"
href="https://user-images.githubusercontent.com/49681382/166738771-d0c26557-426c-4688-9641-8db5e6b08348.png"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<!-- Header -->
<section class="hero is-primary is-small">
<div class="hero-body">
<p class="title is-3">
PyScript — Simple Bioinformatics Example
<span class="tag is-white">v.1</span>
</p>
<p class="subtitle is-6">
Demonstrates the simple use of
<a href="https://pyscript.net/" target="_blank"
><code>PyScript</code></a
>
in
<strong>Bioinformatics/Computational Biology</strong>
fields!
</p>
</div>
</section>
<!-- Main Content -->
<div class="container is-white is-fluid" style="margin-top: 45px">
<p class="title is-3">🧬 DNA Sequence Tool</p>
<!--- DNA Sequence Input -->
<div class="field">
<label class="label">Input DNA Sequence</label>
<div class="control">
<textarea
class="textarea"
placeholder="GATTACA"
id="dna_seq"
></textarea>
</div>
</div>
<!-- Operation Selection -->
<label class="label">Pick the operation to be applied</label>
<div class="field has-addons">
<div class="control is-expanded">
<div class="select is-fullwidth">
<select name="operation" id="operation">
<option value="Reverse">
Compute the reverse counterpart
</option>
<option value="Complement">
Compute the complement counterpart
</option>
<option value="ReverseComplement">
Compute the reverse complement counterpart
</option>
</select>
</div>
</div>
<div class="control">
<button
id="run"
type="button"
class="button is-primary"
py-click="run()"
>
Run!
</button>
<button
id="clear"
type="button"
class="button is-danger"
py-click="clear()"
>
Clear
</button>
</div>
</div>
<hr />
<!--- DNA Sequence Output -->
<label class="label"
>Output for the
<code id="operation_name_output">given operation</code></label
>
<div id="output"></div>
</div>
<br /><br />
<!-- Footer -->
<footer class="footer">
<div class="content has-text-centered">
<p>
Developed by
<a href="mailto:furkanmtorun@gmail.com"
><strong>Furkan M. Torun (@furkanmtorun)</strong></a
>
<br />
<a href="https://github.com/furkanmtorun">GitHub</a>
|
<a
href="https://scholar.google.com/citations?user=d5ZyOZ4AAAAJ"
>Google Scholar</a
>
| <a href="https://twitter.com/furkanmtorun">Twitter</a> |
<a href="https://www.linkedin.com/in/furkanmtorun/"
>LinkedIn</a
>
</p>
</div>
</footer>
<py-script>
# Define HTML elements and inputs
dna_alphabet = "ATGC"
output = Element("output")
dna_seq_element = Element("dna_seq")
operation_element = Element("operation")
operation_name_output_element = Element("operation_name_output")
# DNA Sequene Operations
def return_reverse(dna_seq):
return dna_seq[::-1]
def return_complement(dna_seq):
return dna_seq.translate(str.maketrans("ATCG", "TAGC"))
def return_reverse_complement(dna_seq):
return dna_seq.translate(str.maketrans("ATCG", "TAGC"))[::-1]
# Check DNA seq is valid
def check_dna_seq(dna_seq):
return all(letter in dna_alphabet for letter in dna_seq.upper())
# Clear the form and output
def clear(*args, **kwargs):
dna_seq_element.clear()
output.clear()
# Run
def run(*args, **kwargs):
dna_seq = dna_seq_element.value
is_dna_seq_valid = check_dna_seq(dna_seq)
if is_dna_seq_valid:
operation_name = operation_element.value
operation_name_output_element.write(operation_name)
# Compute the desired outputs
if operation_name == "Reverse":
output_dna_seq = return_reverse(dna_seq)
elif operation_name == "Complement":
output_dna_seq = return_complement(dna_seq)
elif operation_name == "ReverseComplement":
output_dna_seq = return_reverse_complement(dna_seq)
# Output the result
output.write(output_dna_seq)
elif (dna_seq.strip() == "") or (dna_seq is None):
output.write("No DNA sequence provided")
else:
output.write("Invalid DNA sequence entered")
</py-script>
</body>
</html>

88
examples/todo-pylist.html
View File

@@ -1,88 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Todo App</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>
<body>
<nav class="navbar" style="background-color: #000000">
<div class="app-header">
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" href="" style="color: #f0ab3c"
>Pyscript Native TODO App</a
>
</div>
</nav>
<section class="pyscript">
<h1>To Do List</h1>
<py-tutor modules="utils.py">
<py-config>
plugins = [
"https://pyscript.net/latest/plugins/python/py_tutor.py",
"./py_list.py"
]
[[fetch]]
files = ["./utils.py"]
</py-config>
<py-script>
from js import document
from datetime import datetime as dt
from pyodide.ffi.wrappers import add_event_listener
def add_task(*args, **kws):
# create a new dictionary representing the new task
new_task_content = Element("new-task-content")
task = { "content": new_task_content.value, "done": False, "created_at": dt.now() }
# add a new task to the list and tell it to use the `content` key to show in the UI
# and to use the key `done` to sync the task status with a checkbox element in the UI
myList = Element("myList")
myList.element.pyElementInstance.add(task)
# clear the inputbox element used to create the new task
new_task_content.clear()
def on_click(evt):
add_task()
def handle_keypress(evt):
if evt.key == "Enter":
add_task()
add_event_listener(
document.getElementById("new-task-content"),
"keypress",
handle_keypress
)
</py-script>
<div class="py-box">
<input id="new-task-content" />
<button
py-click="add_task()"
id="new-task-btn"
class="py-button"
>
Add Task!
</button>
</div>
<py-list id="myList"></py-list>
<py-repl id="my-repl" auto-generate="true"> </py-repl>
</py-tutor>
</section>
</body>
</html>

87
examples/todo.html
View File

@@ -1,87 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Todo App</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<link rel="stylesheet" href="./assets/css/examples.css" />
<script
type="module"
src="https://esm.sh/@pyscript/core@latest/core.js"
></script>
</head>
<body>
<nav class="navbar" style="background-color: #000000">
<div class="app-header">
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" href="" style="color: #f0ab3c">Todo App</a>
</div>
</nav>
<section class="pyscript">
<py-tutor modules="./todo.py">
<py-config>
plugins = [
"https://pyscript.net/latest/plugins/python/py_tutor.py",
"./py_list.py"
]
[[fetch]]
files = ["./todo.py"]
</py-config>
<py-script src="./todo.py"></py-script>
</py-tutor>
<main>
<section>
<div class="text-center w-full mb-8">
<h1
class="text-3xl font-bold text-gray-800 uppercase tracking-tight"
>
To Do List
</h1>
</div>
<div>
<input
id="new-task-content"
class="py-input"
type="text"
/>
<button
id="new-task-btn"
class="py-button"
type="submit"
py-click="add_task"
>
Add task
</button>
</div>
<py-list id="myList"></py-list>
<div
id="list-tasks-container"
class="flex flex-col-reverse mt-4"
></div>
<template id="task-template">
<section class="task py-li-element">
<label for="flex items-center p-2 ">
<input class="mr-2" type="checkbox" />
<p class="m-0 inline"></p>
</label>
</section>
</template>
</section>
</main>
</section>
</body>
</html>

56
examples/todo.py
View File

@@ -1,56 +0,0 @@
from datetime import datetime as dt
from pyscript import document
tasks = []
def q(selector, root=document):
return root.querySelector(selector)
# define the task template that will be use to render new templates to the page
task_template = q("#task-template").content.querySelector(".task")
task_list = q("#list-tasks-container")
new_task_content = q("#new-task-content")
def add_task(e):
# ignore empty task
if not new_task_content.value:
return None
# create task
task_id = f"task-{len(tasks)}"
task = {
"id": task_id,
"content": new_task_content.value,
"done": False,
"created_at": dt.now(),
}
tasks.append(task)
# add the task element to the page as new node in the list by cloning from a
# template
task_html = task_template.cloneNode(True)
task_html.id = task_id
task_html_check = q("input", root=task_html)
task_html_content = q("p", root=task_html)
task_html_content.textContent = task["content"]
task_list.append(task_html)
def check_task(evt=None):
task["done"] = not task["done"]
task_html_content.classList.toggle("line-through", task["done"])
new_task_content.value = ""
task_html_check.onclick = check_task
def add_task_event(e):
if e.key == "Enter":
add_task(e)
new_task_content.onkeypress = add_task_event

53
examples/toga/README.md
View File

@@ -1,53 +0,0 @@
# Freedom Units!
This is a demo Toga app implementing a Fahrenheit to Celsius converter.
It can be served as a Single Page App from a static web server.
## Initial setup
1. Create and activate a virtual environment, and move into the `freedom`
project directory:
$ python -m venv venv
$ . ./venv/bin/activate
$ cd freedom
2. Install Briefcase:
$ pip install briefcase
## Web app
This app can be viewed as a Single Page App (SPA); this version of the app is
linked from the main PyScript demo pages. To re-build the app and start a
local webserver, run:
$ briefcase run web
## Desktop app
To run this app as a desktop app in development mode:
$ briefcase dev
To build and run it as an app bundle:
$ briefcase run
## Mobile app
To run this in the iOS simulator, run:
$ briefcase run iOS
To run this in the Android simulator, run:
$ briefcase run android
Note that these builds have extensive requirements that must be installed -
Xcode for iOS, and the Android SDKs for Android. These are multiple gigabyte
downloads. Briefcase will detect when these tools aren't available, and either
prompt you to download them, or perform a download for you. As a result, your
first build may take up to 20 minutes to complete, depending on the speed of
your connection.

62
examples/toga/freedom.html
View File

@@ -1,62 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Freedom Units</title>
<link rel="icon" type="image/png" href="/static/logo-32.png" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="/static/css/briefcase.css" />
</head>
<body>
<div id="app-placeholder"></div>
<script
src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
<py-config>
name = "Freedom Units"
description = "A testing app"
version = "0.0.1"
terminal = false
packages = [
"./static/wheels/freedom-0.0.1-py3-none-any.whl",
"toga_core==0.3.0",
"toga_web==0.3.0",
"travertino==0.1.3",
]
[splashscreen]
autoclose = true
</py-config>
<py-script>
import runpy
result = runpy.run_module("freedom", run_name="__main__", alter_sys=True)
</py-script>
</body>
</html>

72
examples/toga/freedom/pyproject.toml
View File

@@ -1,72 +0,0 @@
[build-system]
requires = ["briefcase"]
[tool.briefcase]
project_name = "Freedom Units"
bundle = "org.beeware"
version = "0.0.1"
url = "https://beeware.org"
license = "BSD license"
author = "Tiberius Yak"
author_email = "tiberius@beeware.org"
[tool.briefcase.app.freedom]
formal_name = "Freedom Units"
description = "A testing app"
sources = ["src/freedom"]
requires = [
]
[tool.briefcase.app.freedom.macOS]
requires = [
"toga-cocoa~=0.3.0",
"std-nslog>=1.0.0",
]
[tool.briefcase.app.freedom.linux]
requires = [
"toga-gtk~=0.3.0",
]
[tool.briefcase.app.freedom.linux.appimage]
system_requires = [
"gir1.2-webkit2-4.0",
"libcairo2-dev",
"libgirepository1.0-dev",
"libgtk-3-dev",
"libpango1.0-dev",
"librsvg2-dev",
"libwebkit2gtk-4.0-dev",
]
linuxdeploy_plugins = [
"DEPLOY_GTK_VERSION=3 gtk",
]
[tool.briefcase.app.freedom.linux.flatpak]
flatpak_runtime = "org.gnome.Platform"
flatpak_runtime_version = "42"
flatpak_sdk = "org.gnome.Sdk"
[tool.briefcase.app.freedom.windows]
requires = [
"toga-winforms~=0.3.0",
]
# Mobile deployments
[tool.briefcase.app.freedom.iOS]
requires = [
"toga-iOS~=0.3.0",
"std-nslog>=1.0.0",
]
[tool.briefcase.app.freedom.android]
requires = [
"toga-android~=0.3.0",
]
# Web deployments
[tool.briefcase.app.freedom.web]
requires = [
"toga-web~=0.3.0",
]
style_framework = "Bootstrap v4.6"

0
examples/toga/freedom/src/freedom/__init__.py
View File

4
examples/toga/freedom/src/freedom/__main__.py
View File

@@ -1,4 +0,0 @@
from freedom.app import main
if __name__ == "__main__":
main().main_loop()

60
examples/toga/freedom/src/freedom/app.py
View File

@@ -1,60 +0,0 @@
import toga
from toga.style.pack import COLUMN, LEFT, RIGHT, ROW, Pack
class FreedomApp(toga.App):
def calculate(self, widget):
try:
self.c_input.value = (float(self.f_input.value) - 32.0) * 5.0 / 9.0
except ValueError:
self.c_input.value = "???"
def startup(self):
self.main_window = toga.MainWindow(title=self.name)
c_box = toga.Box()
f_box = toga.Box()
box = toga.Box()
self.c_input = toga.TextInput(id="c_input", readonly=True)
self.f_input = toga.TextInput(id="f_input")
c_label = toga.Label("Celsius", style=Pack(text_align=LEFT))
f_label = toga.Label("Fahrenheit", style=Pack(text_align=LEFT))
join_label = toga.Label("is equivalent to", style=Pack(text_align=RIGHT))
button = toga.Button("Calculate", id="calculate", on_press=self.calculate)
f_box.add(self.f_input)
f_box.add(f_label)
c_box.add(join_label)
c_box.add(self.c_input)
c_box.add(c_label)
box.add(f_box)
box.add(c_box)
box.add(button)
box.style.update(direction=COLUMN, padding_top=10)
f_box.style.update(direction=ROW, padding=5)
c_box.style.update(direction=ROW, padding=5)
self.c_input.style.update(flex=1)
self.f_input.style.update(flex=1, padding_left=160)
c_label.style.update(width=100, padding_left=10)
f_label.style.update(width=100, padding_left=10)
join_label.style.update(width=150, padding_right=10)
button.style.update(padding=15, flex=1)
self.main_window.content = box
self.main_window.show()
def main():
return FreedomApp("Freedom Units", "org.beeware.freedom", version="0.0.1")
if __name__ == "__main__":
main().main_loop()

9
examples/toga/requirements.txt
View File

@@ -1,9 +0,0 @@
setuptools
wheel
check-manifest
briefcase
flask==2.1.1
static/wheels/toga_core-0.3.0.dev33-py3-none-any.whl
static/wheels/toga_flask-0.3.0.dev33-py3-none-any.whl
static/wheels/toga_web-0.3.0.dev33-py3-none-any.whl
static/wheels/travertino-0.1.3-py3-none-any.whl

11
examples/toga/server/demo.py
View File

@@ -1,11 +0,0 @@
from flask import Flask
from freedom import app as freedom
from toga_flask import TogaApp
app = Flask(__name__, static_folder="../static")
app.add_url_rule("/", view_func=TogaApp.as_view("foo", app_module=freedom))
if __name__ == "__main__":
app.run(port=8081, debug=True)

35
examples/toga/static/css/briefcase.css
View File

@@ -1,35 +0,0 @@
/* Unset the overly generic pyscript .label style */
#app-placeholder .label {
margin-top: inherit;
color: inherit;
text-align: inherit;
width: inherit;
display: inherit;
color: inherit;
font-size: inherit;
margin-top: inherit;
}
/*******************************************************************
* WARNING: Do not remove or modify this comment block, or add any
* content below this block. Briefcase will add content here during
* the build step.
******************* Wheel contributed styles **********************/
/*******************************************************
* toga_web 0.3.0::toga.css
*******************************************************/
main.toga.window {
margin-top: 5em;
display: flex;
flex-direction: column;
}
div.toga.box {
display: flex;
}
span.toga.label {
white-space: nowrap;
}

BIN
examples/toga/static/logo-32.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
examples/toga/static/wheels/freedom-0.0.1-py3-none-any.whl
View File

Binary file not shown.

17
examples/utils.py
View File

@@ -1,17 +0,0 @@
from datetime import datetime as dt
def format_date(dt_, fmt="%m/%d/%Y, %H:%M:%S"):
return f"{dt_:{fmt}}"
def now(fmt="%m/%d/%Y, %H:%M:%S"):
return format_date(dt.now(), fmt)
def remove_class(element, class_name):
element.classList.remove(class_name)
def add_class(element, class_name):
element.classList.add(class_name)

413
pyscript.core/tests/integration/test_zz_examples.py
View File

@@ -1,413 +0,0 @@
import base64
import io
import os
import re
import time
import numpy as np
import pytest
from PIL import Image
from .support import ROOT, PyScriptTest, wait_for_render, with_execution_thread
@pytest.mark.skip(
reason="SKIPPING EXAMPLES: these should be moved elsewhere and updated"
)
@with_execution_thread(None)
class TestExamples(PyScriptTest):
"""
Each example requires the same three tests:
- Test that the initial markup loads properly (currently done by
testing the <title> tag's content)
- Testing that pyscript is loading properly
- Testing that the page contains appropriate content after rendering
"""
def test_hello_world(self):
self.goto("examples/hello_world.html")
self.wait_for_pyscript()
assert self.page.title() == "PyScript Hello World"
content = self.page.content()
pattern = "\\d+/\\d+/\\d+, \\d+:\\d+:\\d+" # e.g. 08/09/2022 15:57:32
assert re.search(pattern, content)
self.assert_no_banners()
self.check_tutor_generated_code()
def test_simple_clock(self):
self.goto("examples/simple_clock.html")
self.wait_for_pyscript()
assert self.page.title() == "Simple Clock Demo"
pattern = r"\d{2}/\d{2}/\d{4}, \d{2}:\d{2}:\d{2}"
# run for 5 seconds to be sure that we see the page with "It's
# espresso time!"
for _ in range(5):
content = self.page.inner_html("#outputDiv2")
if re.match(pattern, content) and int(content[-1]) in (0, 4, 8):
assert self.page.inner_html("#outputDiv3") == "It's espresso time!"
break
else:
time.sleep(1)
else:
raise AssertionError("Espresso time not found :(")
self.assert_no_banners()
self.check_tutor_generated_code()
def test_altair(self):
self.goto("examples/altair.html")
self.wait_for_pyscript(timeout=90 * 1000)
assert self.page.title() == "Altair"
wait_for_render(self.page, "*", '<canvas.*?class=\\"marks\\".*?>')
save_as_png_link = self.page.locator("text=Save as PNG")
see_source_link = self.page.locator("text=View Source")
# These shouldn't be visible since we didn't click the menu
assert not save_as_png_link.is_visible()
assert not see_source_link.is_visible()
self.page.locator("summary").click()
# Let's confirm that the links are visible now after clicking the menu
assert save_as_png_link.is_visible()
assert see_source_link.is_visible()
self.assert_no_banners()
self.check_tutor_generated_code()
def test_antigravity(self):
self.goto("examples/antigravity.html")
self.wait_for_pyscript()
assert self.page.title() == "Antigravity"
# confirm that svg added to page
wait_for_render(self.page, "*", '<svg.*id="svg8".*>')
# Get svg layer of flying character
char = self.page.wait_for_selector("#python")
assert char is not None
# check that character moves in negative-y direction over time
ycoord_pattern = r"translate\(-?\d*\.\d*,\s(?P<ycoord>-?[\d.]+)\)"
starting_y_coord = float(
re.match(ycoord_pattern, char.get_attribute("transform")).group("ycoord")
)
time.sleep(2)
later_y_coord = float(
re.match(ycoord_pattern, char.get_attribute("transform")).group("ycoord")
)
assert later_y_coord < starting_y_coord
self.check_tutor_generated_code(modules_to_check=["antigravity.py"])
def test_bokeh(self):
# XXX improve this test
self.goto("examples/bokeh.html")
self.wait_for_pyscript(timeout=90 * 1000)
assert self.page.title() == "Bokeh Example"
wait_for_render(self.page, "*", '<div.*?class="bk.*".*?>')
self.assert_no_banners()
self.check_tutor_generated_code()
def test_bokeh_interactive(self):
# XXX improve this test
self.goto("examples/bokeh_interactive.html")
self.wait_for_pyscript(timeout=90 * 1000)
assert self.page.title() == "Bokeh Example"
wait_for_render(self.page, "*", '<div.*?class=\\"bk\\".*?>')
self.assert_no_banners()
self.check_tutor_generated_code()
@pytest.mark.skip("flaky, see issue 759")
def test_d3(self):
self.goto("examples/d3.html")
self.wait_for_pyscript()
assert (
self.page.title() == "d3: JavaScript & PyScript visualizations side-by-side"
)
wait_for_render(self.page, "*", "<svg.*?>")
assert "PyScript version" in self.page.content()
pyscript_chart = self.page.wait_for_selector("#py")
# Let's simply assert that the text of the chart is as expected which
# means that the chart rendered successfully and with the right text
assert "🍊21\n🍇13\n🍏8\n🍌5\n🍐3\n🍋2\n🍎1\n🍉1" in pyscript_chart.inner_text()
self.assert_no_banners()
self.check_tutor_generated_code(modules_to_check=["d3.py"])
def test_folium(self):
self.goto("examples/folium.html")
self.wait_for_pyscript(timeout=90 * 1000)
assert self.page.title() == "Folium"
wait_for_render(self.page, "*", "<iframe srcdoc=")
# We need to look into the iframe first
iframe = self.page.frame_locator("iframe")
# Just checking that legend was rendered correctly
legend = iframe.locator("#legend")
assert "Unemployment Rate (%)" in legend.inner_html()
# Let's check that the zoom buttons are rendered and clickable
# Note: if element is not clickable it will timeout
zoom_in = iframe.locator("[aria-label='Zoom in']")
assert "+" in zoom_in.inner_text()
zoom_in.click()
zoom_out = iframe.locator("[aria-label='Zoom out']")
assert "−" in zoom_out.inner_text()
zoom_out.click()
self.assert_no_banners()
self.check_tutor_generated_code()
def test_markdown_plugin(self):
# Given the example page with:
# * <title>PyMarkdown</title>
# * <py-md>#Hello world!</py-md>
self.goto("examples/markdown-plugin.html")
self.wait_for_pyscript()
# ASSERT title is rendered correctly
assert self.page.title() == "PyMarkdown"
# ASSERT markdown is rendered to the corresponding HTML tag
wait_for_render(self.page, "*", "<h1>Hello world!</h1>")
self.check_tutor_generated_code()
def test_matplotlib(self):
self.goto("examples/matplotlib.html")
self.wait_for_pyscript(timeout=90 * 1000)
assert self.page.title() == "Matplotlib"
wait_for_render(self.page, "*", "<img src=['\"]data:image")
# The image is being rended using base64, lets fetch its source
# and replace everything but the actual base64 string.
# Note: The first image on the page is the logo, so we are lookin
# at the mpl-1 div which is rendered once the image is in the page
# if this test fails, confirm that the div has the right id using
# the --dev flag when running the tests
test = self.page.wait_for_selector("#mpl >> img")
img_src = test.get_attribute("src").replace(
"data:image/png;charset=utf-8;base64,", ""
)
# Finally, let's get the np array from the previous data
img_data = np.asarray(Image.open(io.BytesIO(base64.b64decode(img_src))))
with Image.open(
os.path.join(os.path.dirname(__file__), "test_assets", "tripcolor.png"),
) as image:
ref_data = np.asarray(image)
# Now that we have both images data as a numpy array
# let's confirm that they are the same
deviation = np.mean(np.abs(img_data - ref_data))
assert deviation == 0.0
self.assert_no_banners()
self.check_tutor_generated_code()
def test_numpy_canvas_fractals(self):
self.goto("examples/numpy_canvas_fractals.html")
self.wait_for_pyscript(timeout=90 * 1000)
assert (
self.page.title()
== "Visualization of Mandelbrot, Julia and Newton sets with NumPy and HTML5 canvas"
)
wait_for_render(
self.page, "*", "<div.*?id=['\"](mandelbrot|julia|newton)['\"].*?>"
)
# Assert that we get the title and canvas for each element
mandelbrot = self.page.wait_for_selector("#mandelbrot")
assert "Mandelbrot set" in mandelbrot.inner_text()
assert "<canvas" in mandelbrot.inner_html()
julia = self.page.wait_for_selector("#julia")
assert "Julia set" in julia.inner_text()
assert "<canvas" in julia.inner_html()
newton = self.page.wait_for_selector("#newton")
assert "Newton set" in newton.inner_text()
assert "<canvas" in newton.inner_html()
# Confirm that all fieldsets are rendered correctly
poly = newton.wait_for_selector("#poly")
assert poly.input_value() == "z**3 - 2*z + 2"
coef = newton.wait_for_selector("#coef")
assert coef.input_value() == "1"
# Let's now change some x/y values to confirm that they
# are editable (is it the best way to test this?)
x0 = newton.wait_for_selector("#x0")
y0 = newton.wait_for_selector("#y0")
x0.fill("50")
assert x0.input_value() == "50"
y0.fill("-25")
assert y0.input_value() == "-25"
# This was the first computation with the default values
assert self.console.log.lines[-2] == "Computing Newton set ..."
# Confirm that changing the input values, triggered a new computation
assert self.console.log.lines[-1] == "Computing Newton set ..."
self.assert_no_banners()
self.check_tutor_generated_code()
def test_panel(self):
self.goto("examples/panel.html")
self.wait_for_pyscript(timeout=90 * 1000)
assert self.page.title() == "Panel Example"
wait_for_render(self.page, "*", "<div.*?class=['\"]bk-root['\"].*?>")
slider_title = self.page.wait_for_selector(".bk-slider-title")
assert slider_title.inner_text() == "Amplitude: 0"
slider_result = self.page.wait_for_selector(".bk-clearfix")
assert slider_result.inner_text() == "Amplitude is: 0"
amplitude_bar = self.page.wait_for_selector(".noUi-connects")
amplitude_bar.click()
# Let's confirm that slider title changed
assert slider_title.inner_text() == "Amplitude: 5"
self.assert_no_banners()
self.check_tutor_generated_code()
def test_panel_deckgl(self):
# XXX improve this test
self.goto("examples/panel_deckgl.html")
self.wait_for_pyscript(timeout=90 * 1000)
assert self.page.title() == "PyScript/Panel DeckGL Demo"
wait_for_render(self.page, "*", "<div.*?class=['\"]bk-root['\"].*?>")
self.assert_no_banners()
self.check_tutor_generated_code()
def test_panel_kmeans(self):
# XXX improve this test>>>>>>> main
self.goto("examples/panel_kmeans.html")
self.wait_for_pyscript(timeout=120 * 1000)
assert self.page.title() == "Pyscript/Panel KMeans Demo"
wait_for_render(
self.page, "*", "<div.*?class=['\"]bk-root['\"].*?>", timeout_seconds=60 * 2
)
self.assert_no_banners()
self.check_tutor_generated_code()
def test_panel_stream(self):
# XXX improve this test
self.goto("examples/panel_stream.html")
self.wait_for_pyscript(timeout=3 * 60 * 1000)
assert self.page.title() == "PyScript/Panel Streaming Demo"
wait_for_render(self.page, "*", "<div.*?class=['\"]bk-root['\"].*?>")
self.assert_no_banners()
self.check_tutor_generated_code()
def test_repl(self):
self.goto("examples/repl.html")
self.wait_for_pyscript()
assert self.page.title() == "REPL"
self.page.wait_for_selector("py-repl")
self.page.locator("py-repl").type("display('Hello, World!')")
self.page.wait_for_selector(".py-repl-run-button").click()
self.page.wait_for_selector("#my-repl-repl-output")
assert (
self.page.locator("#my-repl-repl-output").text_content() == "Hello, World!"
)
# Confirm that using the second repl still works properly
self.page.locator("#my-repl-1").type("display(2*2)")
self.page.keyboard.press("Shift+Enter")
my_repl_1 = self.page.wait_for_selector("#my-repl-1-repl-output")
assert my_repl_1.inner_text() == "4"
self.assert_no_banners()
self.check_tutor_generated_code(modules_to_check=["antigravity.py"])
def test_repl2(self):
self.goto("examples/repl2.html")
self.wait_for_pyscript(timeout=1.5 * 60 * 1000)
assert self.page.title() == "Custom REPL Example"
wait_for_render(self.page, "*", "<py-repl.*?>")
# confirm we can import utils and run one command
self.page.locator("py-repl").type("import utils\ndisplay(utils.now())")
self.page.wait_for_selector("py-repl .py-repl-run-button").click()
# Make sure the output is in the page
self.page.wait_for_selector("#my-repl-1")
# utils.now returns current date time
content = self.page.content()
pattern = "\\d+/\\d+/\\d+, \\d+:\\d+:\\d+" # e.g. 08/09/2022 15:57:32
assert re.search(pattern, content)
self.assert_no_banners()
self.check_tutor_generated_code(modules_to_check=["antigravity.py"])
def test_todo(self):
self.goto("examples/todo.html")
self.wait_for_pyscript()
assert self.page.title() == "Todo App"
wait_for_render(self.page, "*", "<input.*?id=['\"]new-task-content['\"].*?>")
todo_input = self.page.locator("input")
submit_task_button = self.page.locator("button")
todo_input.type("Fold laundry")
submit_task_button.click()
first_task = self.page.locator("#task-0")
assert "Fold laundry" in first_task.inner_text()
task_checkbox = first_task.locator("input")
# Confirm that the new task isn't checked
assert not task_checkbox.is_checked()
# Let's mark it as done now
task_checkbox.check()
# Basic check that the task has the line-through class
assert (
'<p class="m-0 inline line-through">Fold laundry</p>'
in first_task.inner_html()
)
self.assert_no_banners()
self.check_tutor_generated_code(modules_to_check=["./utils.py", "./todo.py"])
def test_todo_pylist(self):
self.goto("examples/todo-pylist.html")
self.wait_for_pyscript()
assert self.page.title() == "Todo App"
wait_for_render(self.page, "*", "<input.*?id=['\"]new-task-content['\"].*?>")
todo_input = self.page.locator("input")
submit_task_button = self.page.locator("button#new-task-btn")
todo_input.type("Fold laundry")
submit_task_button.click()
first_task = self.page.locator("div#myList-c-0")
assert "Fold laundry" in first_task.inner_text()
task_checkbox = first_task.locator("input")
# Confirm that the new task isn't checked
assert not task_checkbox.is_checked()
# Let's mark it as done now
task_checkbox.check()
# Basic check that the task has the line-through class
assert "line-through" in first_task.get_attribute("class")
self.assert_no_banners()
self.check_tutor_generated_code(modules_to_check=["utils.py"])
@pytest.mark.xfail(reason="To be moved to collective and updated, see issue #686")
def test_toga_freedom(self):
self.goto("examples/toga/freedom.html")
self.wait_for_pyscript()
assert self.page.title() in ["Loading...", "Freedom Units"]
wait_for_render(self.page, "*", "<(main|div).*?id=['\"]toga_\\d+['\"].*?>")
page_content = self.page.content()
assert "Fahrenheit" in page_content
assert "Celsius" in page_content
self.page.locator("#toga_f_input").fill("105")
self.page.locator("button#toga_calculate").click()
result = self.page.locator("#toga_c_input")
assert "40.555" in result.input_value()
self.assert_no_banners()
self.check_tutor_generated_code()
def test_webgl_raycaster_index(self):
# XXX improve this test
self.goto("examples/webgl/raycaster/index.html")
self.wait_for_pyscript()
assert self.page.title() == "Raycaster"
wait_for_render(self.page, "*", "<canvas.*?>")
self.assert_no_banners()