scrapeboard/www/index.php

1467 lines
52 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US">
<!--
We have the technology to put you on a board which is a wireless electric
video game controller. Do you have the moves to skate through a gauntlet
of goons all the way to Tony Hawk?
-->
<head>
<script>
/* For the scroll button video overlay */
window.addEventListener(
"scroll", function() {
document.getElementById("scroll").style.visibility = "hidden";
});
</script>
<meta charset="utf-8">
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="Scrapeboard is a new kind of arcade game played on a skateboard deck and four pads that combines elements of rhythm, racing, and fighting games to create a unique, challenging, and physically demanding boss rush experience." />
<meta name="keywords" content="arcade, arcade games, diy arcade cabinets, alt ctrl, alternative controllers, video games, indie game, indie games, indie dev, gamedev, game dev, game programming">
<meta name="twitter:title" content="Scrapeboard 🛹💥">
<meta property="og:image" content="https://scrape.nugget.fun/www/open_graph_card.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@diskmem">
<meta name="twitter:creator" content="@diskmem">
<meta property="og:url" content="https://scrape.nugget.fun">
<meta property="og:title" content="Scrapeboard 🛹💥">
<meta property="og:description" content="Scrapeboard is a new kind of arcade game played on a skateboard deck and four pads that combines elements of rhythm, racing, and fighting games to create a unique, challenging, and physically demanding boss rush experience.">
<meta property="og:image" content="https://scrape.nugget.fun/www/open_graph_card.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1292">
<meta property="og:image:height" content="646">
<meta property="og:type" content="website">
<title>Scrapeboard 🛹💥</title>
<link rel="stylesheet" href="www/style.css" type="text/css" />
<link rel="canonical" href="https://scrape.nugget.fun" />
</head>
<body>
<!-- **************************************************** NEWS POP-UP ****************************************************** -->
<style>
div#banner
{
background: yellow;
padding: 5px;
border-bottom: 3px double #000;
}
/* landscape */
@media (min-width: 800px)
{
div#banner
{
font-size: 22px;
text-align: center;
}
}
/* portrait */
@media (max-width: 800px)
{
div#banner
{
font-size: 16px;
text-align: justify;
}
}
</style>
<div id="banner">
Scrapeboard will be in the
<b>
<a href="https://super.magfest.org/indie-arcade">MAGFest Indie Arcade</a> January 23rd - 26th</b>!
<a href="#news">📰</a>
</div>
<!-- *********************************** AUTOPLAY HEADER VIDEO **************************************************** -->
<style>
/* landscape */
@media (min-width: 800px)
{
div#scroll
{
visibility: visible;
}
}
/* portrait */
@media (max-width: 800px)
{
div#scroll
{
visibility: collapse;
}
}
</style>
<div id="scroll">🡃</div>
<script>
document.getElementById("scroll").addEventListener(
"click", function() {
window.scrollBy(0, window.innerHeight);
});
</script>
<video id="landing_video" autoplay muted disablepictureinpicture disableremoteplayback loop="true"
poster="www/Scrapeboard_pictureinpicture_still_1.png">
<source src="www/scrapeboard_new.webm">
</video>
<style>
/* LANDSCAPE */
@media (min-width: 800px)
{
div#links
{
grid-template-columns: repeat(4, 1fr);
font-size: 40px;
}
div#links a
{
border-radius: 0px 0px 2em 2em;
text-shadow: 0px -20px 4px rgba(0,0,0,1.0);
}
}
/* PORTRAIT */
@media (max-width: 800px)
{
div#links
{
grid-template-columns: 40% 60%;
grid-template-rows: repeat(3, 1fr);
font-size: 28px;
}
div#links img
{
grid-row-start: 1;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 3;
}
div#links a
{
border-radius: 0px;
text-shadow: -10px 0px 4px rgba(0,0,0,1.0);
}
}
div#links
{
display: grid;
background: linear-gradient(rgba(0.0, 255.0, 0.0, 1.0), rgba(255.0, 255.0, 0.0, 0.0));
}
div#links a
{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-decoration: none;
}
div#links a:hover
{
color: #FFF;
background: #000;
text-shadow: 0px 0px 0px rgba(0,0,0,0);
text-decoration: wavy underline #0f0;
text-decoration-thickness: 2px;
}
div#links img
{
width: 100%;
}
</style>
<div id="links">
<a href="https://scrapeboard.square.site">SHOP</a>
<a href="https://open.shampoo.ooo/scrape/scrapeboard/wiki">WIKI</a>
<a href="https://ko-fi.com/scrapeboard">KO-FI</a>
<img src="www/koolMan.gif" />
</div>
<!-- ******************************************* ONE LINE DESCRIPTION ********************************************** -->
<style>
@media (min-width: 800px)
{
div#hero
{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
width: 75%;
}
div#hero img#head_0
{
grid-area: 1 / 1 / 2 / 3;
}
div#hero img#head_1
{
grid-area: 2 / 1 / 3 / 2;
}
div#hero img#head_2
{
grid-area: 2 / 2 / 3 / 3;
}
}
@media (max-width: 800px)
{
div#hero
{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 99%;
}
div#hero img#head_0
{
grid-area: 1 / 1 / 2 / 2;
}
div#hero img#head_1
{
grid-area: 2 / 1 / 3 / 2;
}
div#hero img#head_2
{
grid-area: 3 / 1 / 4 / 2;
}
}
</style>
<div id="hero">
<img id="head_0" src="www/ad_head_transparent_0.png" />
<img id="head_1" src="www/ad_head_transparent_1.png" />
<img id="head_2" src="www/ad_head_transparent_2.png" />
</div>
<!-- ************************************************ GIFS ******************************************************** -->
<style>
@media (min-width: 800px)
{
div#boarding
{
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-gap: 3%;
width: 91%;
}
}
@media (max-width: 800px)
{
div#boarding
{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 99%;
text-align: center;
}
div#boarding a
{
padding: 10px 10px;
}
div#boarding a#boarding_4
{
grid-area: auto / 1 / auto / 3;
width: 50%;
margin: auto;
}
}
</style>
<div id="boarding">
<a href="www/Boarding_1.gif"><img src="www/Boarding_1_thumb.gif" /></a>
<a href="www/Boarding_0.gif"><img src="www/Boarding_0_thumb.gif" /></a>
<a href="www/Multiplay_Closing-Flan.gif"><img src="www/Multiplay_Closing-Flan_thumb.gif" /></a>
<a href="www/Boarding_2.gif"><img src="www/Boarding_2_thumb.gif" /></a>
<a href="www/Boarding_3.gif" id="boarding_4"><img src="www/Boarding_3_thumb.gif" /></a>
</div>
<!-- ************************************************ HOW TO PLAY ********************************************************* -->
<style>
/* landscape */
@media (min-width: 800px)
{
div#instructions
{
grid-template-columns: 46% 54%;
grid-template-rows: repeat(1, 1fr);
width: 75%;
}
img#safety
{
width: 50%;
}
img#pip
{
width: 40%;
}
div#demo
{
width: 40%;
}
}
/* portrait */
@media (max-width: 800px)
{
div#instructions
{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(2, 1fr);
width: 90%;
}
div#instructions img
{
padding-top: 10px;
padding-bottom: 10px;
}
img#safety
{
width: 95%;
}
img#pip
{
width: 90%;
}
div#demo
{
width: 90%;
}
}
</style>
<div id="instructions">
<img src="www/ad_instructions_transparent_0.png" />
<img src="www/ad_instructions_transparent_1.png" />
</div>
<img id="safety" src="www/instructions.png" />
<a href="https://youtu.be/spzM9XGLwWk">
<img id="pip" src="www/Scrapeboard_Gameplay_Demo_picture_in_picture.webp" />
</a>
<div id="demo">
<div id="demo_title">
DEMO
</div>
<div id="demo_link">
watch on <a href="https://youtu.be/spzM9XGLwWk">YouTube</a>
</div>
</div>
<style>
/* landscape */
@media (min-width: 800px)
{
div#description
{
grid-template-columns: 49% 51%;
grid-template-rows: repeat(2, 1fr);
width: 75%;
}
}
/* portrait */
@media (max-width: 800px)
{
div#description
{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(4, 1fr);
width: 90%;
}
}
</style>
<div id="description">
<img src="www/ad_description_transparent_0.png" />
<img src="www/ad_description_transparent_1.png" />
<img src="www/ad_description_transparent_2.png" />
<img src="www/ad_description_transparent_3.png" />
</div>
<!-- ***************************************************** CALENDAR ***************************************************** -->
<style>
/* landscape */
@media (min-width: 800px)
{
p.emotes
{
font-size: 34px;
}
div#mailing-list-form .input
{
font-size: 34px;
height: 100px;
}
div#calendar
{
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 1fr);
}
div#calendar p
{
grid-area: auto / 1 / auto / 4;
font-size: 26px;
}
div#calendar div.date
{
width: 70%;
margin: auto;
}
}
/* portrait */
@media (max-width: 800px)
{
p.emotes
{
font-size: 24px;
}
div#mailing-list-form .input
{
font-size: 26px;
}
div#calendar
{
grid-template-columns: repeat(1, 1fr);
grid-gap: 10px;
}
div#calendar p
{
width: 95%;
font-size: 22px;
}
div#calendar div.date
{
width: 75%;
margin: auto;
}
}
</style>
<p class="emotes">
*^ワ^* o(〃^▽^〃)o (@⌒ー⌒@) (*⌒∇⌒*) (≧∇≦)/ (ノ´ヮ´)*: ・゚ ≧﹏≦ ( ´ ` )b *^ワ^* o(〃^▽^〃)o ヾ(@⌒ー⌒@)
</p>
<div id="calendar">
<p>
Play Scrapeboard at an upcoming event!
<!-- Check back soon for upcoming events! -->
</p>
<div class="date current">
<div class="day-of-week">
Thu. - Sun.
</div>
<div class="day">
Jan. 23rd - 26th
</div>
<div class="year">
2025
</div>
<div class="location">
<a href="https://super.magfest.org/">
MAGFest, National Harbor, MD
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Wed.
</div>
<div class="day">
Nov. 20th
</div>
<div class="year">
2024
</div>
<div class="location">
<a href="https://www.eventbrite.com/e/scrapeboards-night-of-family-fun-tickets-1049821593647">
Chinatown Fair Family Fun Center, NYC
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sat.
</div>
<div class="day">
Oct. 26th
</div>
<div class="year">
2024
</div>
<div class="location">
<a href="https://derpycon.com/">
Derpy Con, New Brunswick, NJ
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Thu.
</div>
<div class="day">
Aug. 8th
</div>
<div class="year">
2024
</div>
<div class="location">
<a href="https://www.wonderville.nyc/events/scrapeboard-night-august-2024">
Wonderville, Brooklyn, NY
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Fri. - Sun.
</div>
<div class="day">
Jun. 28th - 30th
</div>
<div class="year">
2024
</div>
<div class="location">
<a href="https://toomanygames.com">
TooManyGames, Oaks, PA
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sat. & Sun.
</div>
<div class="day">
Jun. 22nd & 23rd
</div>
<div class="year">
2024
</div>
<div class="location">
<a href="https://shenanicon.com/">
Shenanicon, Parsippany, NJ
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Fri. - Sun.
</div>
<div class="day">
Mar. 8th - 10th
</div>
<div class="year">
2024
</div>
<div class="location">
<a href="https://awesome-con.com/">
Awesome Con, Washington D.C.
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Thu. - Sun.
</div>
<div class="day">
Jan. 18th - 21st
</div>
<div class="year">
2024
</div>
<div class="location">
<a href="https://super.magfest.org/">
MAGFest, National Harbor, MD
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Mon.
</div>
<div class="day">
Nov. 27th
</div>
<div class="year">
2023
</div>
<div class="location">
<a href="https://twitter.com/boshisplace">
Boshi's Place, Brooklyn, NY
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Fri. - Sun.
</div>
<div class="day">
Oct. 27th - 29th
</div>
<div class="year">
2023
</div>
<div class="location">
<a href="https://derpycon.com/">
Derpy Con, New Brunswick, NJ
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sat. & Sun.
</div>
<div class="day">
Aug. 5th & 6th
</div>
<div class="year">
2023
</div>
<div class="location">
<a href="https://play-nyc.com/">
Play NYC, New York, NY
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Tue.
</div>
<div class="day">
Jun. 20th
</div>
<div class="year">
2023
</div>
<div class="location">
<a href="https://www.wonderville.nyc/events/brooklyn-altctrl-showcase">
Wonderville, Brooklyn, NY
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Fri. & Sat.
</div>
<div class="day">
Jun. 16th & 17th
</div>
<div class="year">
2023
</div>
<div class="location">
<a href="https://derpycon.com/anime-night-out/">
Anime Night Out, New Brunswick, NJ
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sat. - Sun.
</div>
<div class="day">
Apr. 15th & 16th
</div>
<div class="year">
2023
</div>
<div class="location">
<a href="https://www.egdcollective.org/wafflegames2023">
Waffle Games, New York, NY
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Fri.
</div>
<div class="day">
Mar. 24th
</div>
<div class="year">
2023
</div>
<div class="location">
<a href="https://www.eventbrite.com/e/bar-grill-with-pool-table-tickets-588671491277">
Shovels Bar & Grill, San Francisco, CA
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Tue.
</div>
<div class="day">
Mar. 21st
</div>
<div class="year">
2023
</div>
<div class="location">
<a href="https://www.eventbrite.com/e/indie-byog-bring-your-own-game-gdc-2023-by-sub-zero-sound-tickets-532872615337">
Buzzworks, San Francisco, CA
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Thu. - Sun.
</div>
<div class="day">
Jan. 5th - 8th
</div>
<div class="year">
2023
</div>
<div class="location">
<a href="https://super.magfest.org">MAGFest, National Harbor, MD</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Mon
</div>
<div class="day">
Dec. 5th
</div>
<div class="year">
2022
</div>
<div class="location">
<a href="https://wonderville.nyc">Wonderville, Brooklyn, NY</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sat.
</div>
<div class="day">
Nov. 5th
</div>
<div class="year">
2022
</div>
<div class="location">
<a href="https://www.play-nyc.com/">Play NYC, New York, NY</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sun.
</div>
<div class="day">
Jul. 10th
</div>
<div class="year">
2022
</div>
<div class="location">
<a href="https://wonderville.nyc">Wonderville, Brooklyn, NY</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Fri.
</div>
<div class="day">
Jun. 10th
</div>
<div class="year">
2022
</div>
<div class="location">
<a href="https://www.eventbrite.com/e/the-12th-annual-interactive-show-cursed-technology-shop-masksvax-req-tickets-331933611367">
Resistor, Brooklyn, NY
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sat.
</div>
<div class="day">
May 28th
</div>
<div class="year">
2022
</div>
<div class="location">
<a href="https://ra.co/events/1534719">
Wonderville, Brooklyn, NY
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Wed. - Fri.
</div>
<div class="day">
Mar. 23rd - 25th
</div>
<div class="year">
2022
</div>
<div class="location">
<a href="https://gdconf.com">GDC, San Francisco, CA</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Thu. - Sun.
</div>
<div class="day">
Jan. 6th - 9th
</div>
<div class="year">
2022
</div>
<div class="location">
<a href="https://super.magfest.org">MAGFest, National Harbor, MD</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sun.
</div>
<div class="day">
Oct. 31st
</div>
<div class="year">
2020
</div>
<div class="location">
<a href="https://wonderville.nyc">Wonderville, Brooklyn, NY</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sun.
</div>
<div class="day">
Oct. 31st
</div>
<div class="year">
2020
</div>
<div class="location">
<a href="https://wonderville.nyc">Wonderville, Brooklyn, NY</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Thu. - Sun.
</div>
<div class="day">
Jan. 3rd - 6th
</div>
<div class="year">
2019
</div>
<div class="location">
<a href="https://withfriends.co/event/1057219/electroconcierge_babycastles_indie_arcade_at_magfest">
MAGFest, National Harbor, MD
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Mon.
</div>
<div class="day">
Dec. 31st
</div>
<div class="year">
2018
</div>
<div class="location">
<a href="https://withfriends.co/event/1037435/nye_201x_new_year">
Babycastles, New York, NY
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sat. & Sun.
</div>
<div class="day">
Sep. 22nd & 23rd
</div>
<div class="year">
2018
</div>
<div class="location">
<a href="https://makerfaire.com/maker/entry/68090/">
Maker Faire, Queens, NY
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Fri.
</div>
<div class="day">
Aug. 3rd
</div>
<div class="year">
2018
</div>
<div class="location">
<a href="https://withfriends.co/event/517242/multiplay_closing_party">
Babycastles, New York, NY
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Thu. - Sun.
</div>
<div class="day">
Jan. 4th - 7th
</div>
<div class="year">
2018
</div>
<div class="location">
<a href="https://super.magfest.org">
MAGFest, National Harbor, MD
</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sun.
</div>
<div class="day">
Dec. 31st
</div>
<div class="year">
2017
</div>
<div class="location">
<a href="https://withfriends.co/event/160142/absrdst_babycastles_new_years_eve_party_2018">
Babycastles, New York, NY
</a>
</div>
</div>
</div>
<script>
function subscribe(email_address)
{
var request = new Request("https://scrape.nugget.fun/www/subscribe.php", {
method: "POST",
mode: "cors",
body: new URLSearchParams({"email": email_address}),
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}});
fetch(request)
.then(response => response.json())
.then(result => {
console.log(result);
if (result.success)
{
var color = "green";
}
else
{
var color = "red";
}
document.querySelector("#mailing-list-join").innerHTML =
"<span style='color: " + color + "'>" + result.message + "</span>";
});
}
</script>
<div id="mailing-list-join">
<span style="background: #ffa; border-radius: 5px; padding-left: 10px; padding-right: 10px;">
Join the announcements list
</span>
</div>
<div id="mailing-list-form">
<input class="input" id="email-box" style="width: 50%" name="email" value="Your e-mail"
onfocus="if(this.value=='Your e-mail') this.value='';"
onfocusout="if(this.value=='') this.value='Your e-mail';">
&nbsp;
<button class="input" style="cursor: pointer; background: #4f8; font-weight: bold" value="Join"
onclick="subscribe(document.querySelector('#mailing-list-form #email-box').value);">Join</button>
</div>
<!-- <div id="mailing-list-archives">
[<a href="https://nugget.fun/mailman3/hyperkitty/list/scrapeboard-list@nugget.fun/">check past announcements</a>]
</div>
-->
<p class="emotes">
d(⌒ー⌒) (❁´◡`) (^Д^) (。>‿‿< (*´∇`) (●⌒v⌒●) ´・ᴗ・` (✿^-^) ヾ(^ヮ^)ノ d(⌒ー⌒) (❁´◡`) (^Д^)
(。>‿‿< (*´∇`)
</p>
<!-- ************************************************ PROMO VIDEO ***************************************************** -->
<div id="comedy">
<iframe src="https://www.youtube.com/embed/ai9WlJdfbvI" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
<div id="comedy_credits">
video by <a href="https://twitter.com/beachethan">@beachethan</a>
</div>
<style>
/* landscape */
@media (min-width: 800px)
{
div#credits
{
width: 80%;
}
div#credits p#links
{
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 1fr);
}
div#credits p#links iframe
{
margin: auto;
}
}
/* portrait */
@media (max-width: 800px)
{
div#credits
{
width: 50%;
}
div#credits p#links
{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(3, 1fr);
}
div#credits p#links iframe
{
margin-top: 10px;
}
}
</style>
<!-- DONATION WIDGET -->
<!-- <iframe id='kofiframe' src='https://ko-fi.com/scrapeboard/?hidefeed=true&widget=true&embed=true&preview=true' scrolling="no"
style='border:none;padding:0px;margin:auto;margin-top:50px;height:600px;background:rgba(0, 0, 0, 0);overflow:hidden;display:block'
title='scrapeboard'>
</iframe>
-->
<!-- ***************************************** FOLLOW BUTTONS ********************************************* -->
<p id="credits-heading">
Follow the developers!
</p>
<div id="credits">
<p id="links">
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<a href="https://twitter.com/diskmem?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large"
data-dnt="true">
Follow @diskmem
</a>
<a href="https://twitter.com/snakesandrews?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large"
data-dnt="true">
Follow @snakesandrews
</a>
<a href="https://twitter.com/ClementShimizu?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large"
data-dnt="true">
Follow @ClementShimizu
</a>
</p>
</div>
<!-- *************************************************** NEWS ************************************************** -->
<style>
div#news
{
background: rgba(118.0, 212.0, 54.0, 0.8);
text-align: justify;
color: #222;
margin: 0px;
font-family: CantarellRegular;
line-height: 1.8em;
}
div#auction_flyer
{
display: grid;
justify-content: center;
align-items: center;
margin: 0px;
}
img.stretch
{
width: 100%;
aspect-ratio: 10 / 1;
margin: 0px;
margin-top: 40px;
}
div#auction_flyer img
{
width: 100%;
}
div#auction_flyer video
{
width: 70%;
}
div#news summary
{
border-bottom: 3px double #000;
border-top: 3px double #000;
margin-bottom: 20px;
}
div#news img
{
max-width: 100%;
}
/* landscape */
@media (min-width: 800px)
{
div#news
{
padding: 10px 15%;
padding-top: 27px;
font-size: 22px;
}
div#auction_flyer
{
grid-template-columns: 1fr 1fr;
}
}
/* portrait */
@media (max-width: 800px)
{
div#news
{
padding: 6px 3%;
font-size: 18px;
}
div#auction_flyer
{
grid-gap: 20px;
}
div#news img#auction_flyer
{
display: block;
width: 100%;
margin-bottom: 10px;
border-radius: 12px;
}
}
</style>
<img class="stretch" src="www/cat.gif" />
<div id="news">
<h1>Scrapeboard news 📰</h1>
<details>
<summary>
<b>Scrapeboard x Chicken</b> (12.14.2024)
</summary>
<p>
Scrapeboard was joined by Zebra, an urban farm chicken, for a night of arcade games, custom prizes,
vegan nuggets, and chicken poop bingo at <a href="http://mychinatownfair.com">Chinatown Fair</a> in
NYC. Here's a pic from Steph of Zebra at the start of bingo 🐔
</p>
<img src="www/Scrapeboard_Zebra_chicken_bingo.png" /><br/>
<p>
See you at <a href="https://super.magfest.org">MAGFest 2025</a> in the
<a href="https://super.magfest.org/indie-arcade">indie arcade</a>!
</p>
<summary>
<b>New Photos and Videos</b> (10.29.2024)
</summary>
<p>
Here are some photos and videos from the past few months of events, starting with footage of
level 3 being played at Wonderville during Scrapeboard Night this summer.
</p>
<blockquote class="tiktok-embed"
cite="https://www.tiktok.com/@wondervillenyc/video/7400960943460486442"
data-video-id="7400960943460486442"
style="max-width: 605px;min-width: 325px;" >
<section>
<a target="_blank"
title="@wondervillenyc"
href="https://www.tiktok.com/@wondervillenyc?refer=embed">
@wondervillenyc
</a>
Its Scrapbeboard night at Wonderville! Thanks @Blake Andrews and Frank for bringing it out!
</section>
</blockquote>
<script async src="https://www.tiktok.com/embed.js"></script>
<p>
Thanks to Brandon for sending photos of Scrapeboard at the TooManyGames indie arcade!
</p>
<img src="www/Scrapeboard_202406_TMG_Booth_1_lowfi.png" /><br/>
<img src="www/Scrapeboard_202406_TMG_Booth_2_lowfi.png" /><br/>
<img src="www/Scrapeboard_202406_TMG_Booth_3_lowfi.png" /><br/>
<img src="www/Scrapeboard_202406_TMG_Booth_4_lowfi.png" />
<p>
And check out these stills from the Scrapeboard tournament at DerpyCon filmed by Jessi, including
the finalists in action and the Scorpion Sauce trophy.
</p>
<img src="www/Scrapeboard_DerpyCon_tournament0.png" /><br/>
<img src="www/Scrapeboard_DerpyCon_tournament1.png" />
</details>
<details>
<summary>
<b>Upcoming Events</b> (6.17.2024)
</summary>
<p>
If time has taught us anything, it's that the most resilient creature on Earth is neither the human
nor the cockroach it is the anime and gaming convention. In spirit of that, Scrapeboard has
adopted a strict "if you can't beat 'em, join 'em" approach. This is why we are inviting you to
enjoy the pleasure of gaming if you are in, around, or near the NY/NJ tri-state area this June.
</p>
<p style="text-align: center; font-size: 1.3em; line-height: 1.8em;">
<a href="https://shenanicon.com/" target="_blank">Shenanicon, NJ (6/21 - 6/23)</a><br/>
<a href="https://toomanygames.com/" target="_blank">TooManyGames, PA (6/28 - 6/30)</a>
</p>
<p>
At Shenanicon, we'll have Barnyardia set up, with arcade cabinets and chicken nuggets, and at TMG,
we'll be in the big boys arcade, so start stretching because we expect to see you all at both
events.
</p>
<p style="font-size: 1.3em; font-weight: bold; line-height: 1.8em;">
We did a gaming 🙊&#xFE0F;
</p>
<p>
We had a smash at AwesomeCon in March smashing through the scoreboards😤&#xFE0F;💦&#xFE0F;. This
event was hosted by MAGFest (do you know it? 🎵&#xFE0F;music + 🎮&#xFE0F;gaming), so some serious
scrapers were on hand. This was not your father's anime and gaming convention. Here's a view of the
top doggies at the "Scrapeboard tournament". Thanks to Alex from
<a href="https://www.pixelcrushers.com/wilddomaingames/index.html" target="_blank">Crypt Crawlers</a>
for the photo!
</p>
<p>
<img src="doc/img/Scrapeboard_AwesomeCon_2024_Tournament.jpg" />
</p>
<p>
Scrapeboard reached the northern border of its home state, New York, this past April, with a
<a href="https://www.vsw.org/vsw-salon/salon-spring-2024/april-25-hardware-and-software-by-barnyardia/"
target="_blank">
pop-up exhibition
</a>
of the hottest 🔥&#xFE0F; of Barnyardia curated by Nilson Carrol of
<a href="https://visualstudiesworkshop.itch.io/" target="_blank">Visual Studies Workshop</a> who also
provides the following glimpse into the shenanigans.
</p>
<p>
<img src="doc/img//Screenshot_of_VSW_documentation.png" />
</p>
<p style="font-size: 1.3em; font-weight: bold; line-height: 1.8em;">
Scrapeboard is not a TechNOlogy; it's a TechYESlogy 💭&#xFE0F;
</p>
<p>
Checking in on the progress of Scrapeboard at-home aka Scrapeboard plug-and-play. Our last check in
was Cyber Monday, and we had just
<a href="https://twitter.com/alt254/status/1729594154592637073" target="_blank">
auctioned the first official kit for 4 hundred seventy five dollars</a>.
Now months later, we are finally closing in on a design for a platform which can
<b><i>FOLD AND UNFOLD</i></b>, connect to any computer using <b><i>JUST A USB PLUG</i></b>, and can
be paired with an optional <b><i>PRE-BUILT RASPBERRY PI</i></b> to automate running the game on any
HDMI monitor. Just give me a second while I open a thousand tabs in my browser to figure out what an
ampere is 🚣
</p>
</details>
<details>
<summary>
<b>Scrapeboard Breaks $420.69</b> (12/21/2023)
</summary>
<img src="www/42069.jpeg" />
<p>
Scrapeboard sold to <a href="https://twitter.com/alt254" target="_blank">Patrick LeMieux</a> and
<a href="https://twitter.com/chouxsalad" target="_blank">Stephanie Boluk</a> of
<a href="https://twitter.com/ucdavis" target="_blank">UC Davis</a>! For a while the high bid was
<b><i>$420.69</i></b>. In the end, it sold for <b><i>$474.20</i></b>.
</p>
</details>
<details>
<summary>
<b>Auction is Live!</b> (11/27/2023)
</summary>
<div id="auction_flyer">
<video controls loop>
<source src="www/Scrapeboard_Cyber_Monday_auction.mp4">
</video>
<a href="https://www.eventbrite.com/e/barnyardia-direct-cyber-monday-the-first-scrapeboard-kit-auction-live-tickets-754801209737">
<img id="auction_flyer" src="www/Scrapeboard_auction_flyer.png" />
</a>
</div>
<p>
Deals are upon us! It's the one and only Cyber Monday, and the first Scrapeboard for home and shared use is
officially going to sell at 9PM EST tonight. We appreciate your support and hope to be able to provide all of
you with kits in 2024. You have pushed the price past the cost of materials, which is beyond what we were
expecting for the first sale. Tune in for the ending at
<a href="https://twitch.tv/snakesandrews">https://twitch.tv/snakesandrews</a> live from 6PM to 9PM EST tonight.
</p>
<ul>
<li><a href="https://www.ebay.com/itm/235303327614"><b>Auction is now live on eBay</b></a> 📈</li>
<li><a href="https://www.eventbrite.com/e/barnyardia-direct-cyber-monday-the-first-scrapeboard-kit-auction-live-tickets-754801209737">
<b>Free RSVPs for party and tournament</b></a> 🎟
</li>
</ul>
<p>
For reference, this is the current cost of materials, which we are still working on reducing for 2024,
so you can see the value you are getting and confidently
<a href="https://www.ebay.com/itm/235303327614">bid on this cyber deal</a>.
</p>
<p>
<pre>
Birch plywood $68
Raspberry Pi 4 2GB $45
Raspberry Pi power adapter $11
Aluminum plates $30
Skatedeck $25
32GB micro SD card $4
Micro HDMI to HDMI adapter $8
----
total $191
</pre>
</p>
<p>
We're going to make one last push up to the closing, and we'll start by announcing that we're going to
add another piece of equipment: <b>a generously donated Arduino</b> given to us by
<a href="https://artfail.com">JP Bruneau</a>! Our custom adapter fits into both Raspberry Pi and Arduino,
so in addition to TV or projector, you will also be able to play on your own computer and even modify
the open source software and electronics code using this Arduino.
</p>
<p>
We also want to mention that <b>10% of the purchase will be donated</b> to Boshi's Place, a Brooklyn
co-working and event space for independent games where we are hosting
<a href="https://www.eventbrite.com/e/barnyardia-direct-cyber-monday-the-first-scrapeboard-kit-auction-live-tickets-754801209737">
the live event
</a>
tonight.
</p>
<p>
And we are offering <b>free pickup</b> from New York City or MAGFest 2024.
</p>
<p>
Thanks again for your bids and happy Cyber Monday!
</p>
</details>
<details>
<summary>
<b>Cyber Monday</b> (11/6/2023)
</summary>
<p>
We're good and tickled to share with you some exciting news which is also an opportunity for you
and that is that
<b>we are auctioning off the first at-home Scrapeboard kit this CYBER MONDAY live online</b> and
hosted in-person in Brooklyn with special guest appearances and an open entry tournament!
</p>
<p>
There will be prizes, a countdown, and a dance party -- please join us, and share the event with
others. For those interested in participating: you can join a tournament, talk to us about
Scrapeboard on stream, or place a bid for a Scrapeboard kit.
</p>
<p>
The kit builds the same model as our wood and metal platform which has been
<i>played over 1,500 times this year</i>.
Included in the kit are four pre-assembled panels which combine to create the platform. The panels will
come already wired to connect to an included Raspberry Pi which will run the game automatically. A
ready to use Scrapeboard will be included.
</p>
<p>
The kit also comes with guaranteed set up support and maintenance for one year, with any necessary
replacements provided for free, meaning the winner of the auction is guaranteed a running Scrapeboard
system for one year or longer.
</p>
<p>
Scrapeboard is great for personal use, shared use, and it also comes licensed to be modified and/or
used commercially.
</p>
<p>
Follow <a href="https://twitter.com/diskmem">@diskmem</a>,
<a href="https://twitter.com/snakesandrews">@snakesandrews</a>, and
<a href="https://twitch.tv/snakesandrews">
twitch.tv/snakesandrews
</a>
for event, auction, and stream announcements
and tune in at <a href="https://scrape.nugget.fun">scrape.nugget.fun</a> on Nov. 27th,
Cyber Monday, from 6pm - 10pm.
</p>
</details>
</div>
<div id="ink">
<img src="www/Ink.png">
</div>
</body>
</html>