new chameleon; alien sword smears; website updates
|
@ -8,3 +8,4 @@ venv/
|
|||
lib/fonts
|
||||
favicon.ico
|
||||
scrapeboard_new.webm
|
||||
Scrapeboard_Gameplay_Demo_picture_in_picture.webp
|
||||
|
|
120
NS.py
|
@ -1,13 +1,14 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
|
||||
#
|
||||
# Scrapeboard is an arcade game in development by Frank DeMarco (@diskmem) and Blake Andrews (@snakesandrews).
|
||||
# It requires custom hardware to play, but it can be tested in keyboard mode with just the code in this
|
||||
# repository. For more information on setting up and running the game, see the README. For more information
|
||||
# on the game in general, visit https://scrape.nugget.fun
|
||||
# [SCRAPEBOARD] is an arcade game in development by [@diskmem] and [@snakesandrews]
|
||||
#
|
||||
# It requires custom hardware to play but can be tested in keyboard mode without the hardware.
|
||||
# For more information on setting up and running the game, see the README, or for the game in
|
||||
# general, visit https://scrape.nugget.fun/
|
||||
#
|
||||
|
||||
import argparse
|
||||
import argparse, pathlib
|
||||
from random import randint, choice, random
|
||||
from math import pi
|
||||
from copy import copy
|
||||
|
@ -42,15 +43,19 @@ from lib.pgfw.pgfw.gfx_extension import aa_filled_polygon
|
|||
|
||||
class NS(Game, Animation):
|
||||
"""
|
||||
The main game object for Scrapeboard. It initializes and manages most of the other game objects that only have a single
|
||||
object like the title screen, boss manager, platform, dialog manager, screen wipe manager, main character, and more (see
|
||||
the objects initialized in __init__). It initializes and manages the serial input from the Arduino, and it listens for and
|
||||
responds to keyboard input. Its update method is called once per frame by the PGFW code. In its update method it calls the
|
||||
update methods of its child objects.
|
||||
The main game object. It initializes and updates the title screen, boss manager, platform, dialog manager, screen wipe manager,
|
||||
main character, and more (see the objects initialized in __init__). It initializes and watches the Arduino serial port and
|
||||
listens for and responds to keyboard input.
|
||||
"""
|
||||
|
||||
# Class variables that can be used to represent each of the four game pads. The L stands for "light", and the directions
|
||||
# indicate which pad is being identified.
|
||||
LNW, LNE, LSE, LSW = range(4)
|
||||
|
||||
# Class variables that can be used to represent each of the six possible orientations of the board on the four pads: the
|
||||
# four sides of the square and the two diagonals.
|
||||
N, NE, E, NW, S, W = range(6)
|
||||
|
||||
FRONT_WIDTH = 230
|
||||
BACK_WIDTH = 500
|
||||
LENGTH = 150
|
||||
|
@ -1318,27 +1323,27 @@ class Chemtrails(Sprite):
|
|||
else:
|
||||
self.hide()
|
||||
if edge == NS.N:
|
||||
self.location.center = ds.get_width() / 2, NS.FRONT + 15 + dy
|
||||
self.location.center = ds.get_width() / 2, NS.FRONT + dy
|
||||
self.orientation = NS.N
|
||||
elif edge == NS.E:
|
||||
self.location.center = ds.get_width() / 2 + NS.FRONT_WIDTH / 2 - 115, \
|
||||
NS.FRONT + NS.LENGTH * NS.STEP - 75 + dy
|
||||
self.location.center = ds.get_width() / 2 + NS.FRONT_WIDTH / 2 - 85, \
|
||||
NS.FRONT + NS.LENGTH * NS.STEP - 30 + dy
|
||||
self.orientation = NS.E
|
||||
elif edge == NS.S:
|
||||
self.location.center = ds.get_width() / 2, \
|
||||
NS.FRONT + NS.LENGTH - NS.LENGTH * NS.STEP - 110 + dy
|
||||
NS.FRONT + NS.LENGTH - NS.LENGTH * NS.STEP - 50 + dy
|
||||
self.orientation = NS.S
|
||||
elif edge == NS.W:
|
||||
self.location.center = ds.get_width() / 2 - NS.FRONT_WIDTH / 2 + 100, \
|
||||
NS.FRONT + NS.LENGTH * NS.STEP - 85 + dy
|
||||
self.location.center = ds.get_width() / 2 - NS.FRONT_WIDTH / 2 + 90, \
|
||||
NS.FRONT + NS.LENGTH * NS.STEP - 30 + dy
|
||||
self.orientation = NS.W
|
||||
elif edge == NS.NW:
|
||||
self.location.center = ds.get_width() / 2 + 5, \
|
||||
NS.FRONT + NS.LENGTH * NS.STEP - 75 + dy
|
||||
self.location.center = ds.get_width() / 2 - 15, \
|
||||
NS.FRONT + NS.LENGTH * NS.STEP + dy - 45
|
||||
self.orientation = NS.NW
|
||||
elif edge == NS.NE:
|
||||
self.location.center = ds.get_width() / 2 + 10, \
|
||||
NS.FRONT + NS.LENGTH * NS.STEP - 80 + dy
|
||||
self.location.center = ds.get_width() / 2 + 5, \
|
||||
NS.FRONT + NS.LENGTH * NS.STEP - 45 + dy
|
||||
self.orientation = NS.NE
|
||||
else:
|
||||
self.orientation = None
|
||||
|
@ -1405,6 +1410,7 @@ class Boss(Animation):
|
|||
animations that control attacks, effects, and dialog.
|
||||
"""
|
||||
Animation.__init__(self, parent)
|
||||
hue_shift = 30
|
||||
if self.get_configuration("display", "effects"):
|
||||
self.kool_man = RainbowSprite(self, load(self.get_resource("Kool_man_waah.png")).convert_alpha(), hue_shift)
|
||||
self.spoopy = RainbowSprite(self, load(self.get_resource("Spoopy.png")).convert_alpha(), hue_shift)
|
||||
|
@ -1422,6 +1428,7 @@ class Boss(Animation):
|
|||
self.register(self.brandish, self.cancel_flash, self.show_introduction_dialogue,
|
||||
self.show_end_dialogue, self.end_dialogue)
|
||||
self.kool_man.add_frameset([0], name="normal", switch=True)
|
||||
# Set alien's normal frameset to an idle animation
|
||||
self.visitor.add_frameset(list(range(0, len(self.visitor.frames))), name="normal", switch=True)
|
||||
self.spoopy.add_frameset([0], name="normal", switch=True)
|
||||
self.kool_man_avatar = load(self.get_resource("Kool_man_avatar.png")).convert()
|
||||
|
@ -1433,6 +1440,58 @@ class Boss(Animation):
|
|||
self.backgrounds[1].load_from_path(self.get_resource("bg/bg002.png"))
|
||||
self.backgrounds[2].load_from_path(self.get_resource("bg/bg003.png"))
|
||||
self.countdown = Countdown(self)
|
||||
# Set the alien's arm to its own sprite
|
||||
self.alien_arm = Sprite(self, 42)
|
||||
# Map the strings used to indicate direction in the animations directory to the IDs defined in the script
|
||||
name_map = {
|
||||
"U": NS.N,
|
||||
"DR": NS.NE,
|
||||
"R": NS.E,
|
||||
"DL": NS.NW,
|
||||
"D": NS.S,
|
||||
"L": NS.W,
|
||||
}
|
||||
# Set static frames for alien arms, one for each of the 6 board orientations
|
||||
root = pathlib.Path(self.get_resource("alienAnimations/alienArms/Moving"))
|
||||
static_arm_frame_map = {
|
||||
"UtoDR/*05.png": NS.N,
|
||||
"UtoDR/*10.png": NS.NE,
|
||||
"RtoDL/*05.png": NS.E,
|
||||
"RtoDL/*10.png": NS.NW,
|
||||
"DtoL/*05.png": NS.S,
|
||||
"DtoL/*10.png": NS.W
|
||||
}
|
||||
orientation_frame_indices = {}
|
||||
for path, orientation in static_arm_frame_map.items():
|
||||
self.alien_arm.load_from_path(list(root.glob(path))[0], True)
|
||||
frame_index = len(self.alien_arm.frames) - 1
|
||||
self.alien_arm.add_frameset([frame_index], name=str(orientation))
|
||||
orientation_frame_indices[orientation] = frame_index
|
||||
# Add sword smear animations to the alien's arm, one for each of the 30 possible combinations of 6 board orientations
|
||||
for directory in pathlib.Path(self.get_resource("alienAnimations/alienArms/Moving")).iterdir():
|
||||
if directory.is_dir():
|
||||
frame_paths = list(sorted(directory.iterdir()))
|
||||
# Extract board orientation IDs from the directory name
|
||||
orientation_1, orientation_2 = [name_map[orientation] for orientation in directory.name.split("to")]
|
||||
# Alien arm sprite frame indices for each orientation
|
||||
frame_index_orientation_1 = orientation_frame_indices[orientation_1]
|
||||
frame_index_orientation_2 = orientation_frame_indices[orientation_2]
|
||||
# Add orientation_1 -> orientation_2 animation
|
||||
frame_order = [frame_index_orientation_1]
|
||||
for path in frame_paths[5:9]:
|
||||
self.alien_arm.load_from_path(path, True)
|
||||
frame_order.append(len(self.alien_arm.frames) - 1)
|
||||
frame_order.append(frame_index_orientation_2)
|
||||
self.alien_arm.add_frameset(frame_order, name=f"{orientation_1}_{orientation_2}")
|
||||
# Add orientation_2 -> orientation_1 animation
|
||||
frame_order = [frame_index_orientation_2]
|
||||
for path in frame_paths[0:4]:
|
||||
self.alien_arm.load_from_path(path, True)
|
||||
frame_order.append(len(self.alien_arm.frames) - 1)
|
||||
frame_order.append(frame_index_orientation_1)
|
||||
self.alien_arm.add_frameset(frame_order, name=f"{orientation_2}_{orientation_1}")
|
||||
self.alien_arm.location.center = self.visitor.location.center
|
||||
self.alien_arm.hide()
|
||||
|
||||
def cancel_flash(self):
|
||||
if self.level_index == 0:
|
||||
|
@ -1790,6 +1849,7 @@ class Boss(Animation):
|
|||
self.kool_man.update()
|
||||
elif self.level_index == 1:
|
||||
self.visitor.update()
|
||||
self.alien_arm.update()
|
||||
elif self.level_index == 2:
|
||||
self.spoopy.update()
|
||||
self.sword.update()
|
||||
|
@ -1899,15 +1959,17 @@ class Sword(Animation):
|
|||
surface = Surface((300, 300), SRCALPHA)
|
||||
surface.fill((255, 255, 255, alpha))
|
||||
masks.append(surface)
|
||||
self.register(self.brandish, self.lower)
|
||||
self.register(self.brandish, self.lower, self.swab)
|
||||
|
||||
def reset(self):
|
||||
self.halt(self.brandish)
|
||||
self.halt(self.lower)
|
||||
self.halt(self.swab)
|
||||
self.next_index = 0
|
||||
self.sprites = []
|
||||
|
||||
def brandish(self):
|
||||
level_index = self.parent.level_index
|
||||
position = self.parent.unbrandished.pop(0)
|
||||
offset = -self.SHIFT
|
||||
for ii, queued in enumerate(self.parent.queue):
|
||||
|
@ -1916,7 +1978,7 @@ class Sword(Animation):
|
|||
break
|
||||
dsr = self.get_display_surface().get_rect()
|
||||
sprite = Sprite(self)
|
||||
for frame in self.swords[self.parent.level_index][position]:
|
||||
for frame in self.swords[level_index][position]:
|
||||
sprite.add_frame(frame)
|
||||
if position in (NS.W, NS.E):
|
||||
sprite.location.centery = dsr.centery - 100 + offset
|
||||
|
@ -1936,12 +1998,22 @@ class Sword(Animation):
|
|||
self.get_audio().play_sfx("brandish")
|
||||
self.play(self.lower, delay=400, play_once=True)
|
||||
if len(self.parent.unbrandished) > 0:
|
||||
self.play(self.brandish, delay=self.get_configuration("time", "sword-delay"),
|
||||
play_once=True)
|
||||
self.play(self.brandish, delay=self.get_configuration("time", "sword-delay"), play_once=True)
|
||||
if level_index == 1:
|
||||
self.parent.alien_arm.unhide()
|
||||
self.parent.alien_arm.set_frameset(str(position))
|
||||
if len(self.parent.unbrandished) > 0:
|
||||
self.play(self.swab, delay=self.get_configuration("time", "sword-delay") - 42 * 4, play_once=True, position=position)
|
||||
|
||||
def swab(self, position):
|
||||
if self.parent.level_index == 1:
|
||||
self.parent.alien_arm.set_frameset(f"{position}_{self.parent.unbrandished[0]}")
|
||||
|
||||
def lower(self):
|
||||
if len(self.parent.unbrandished) == 0:
|
||||
self.parent.brandish_complete = True
|
||||
if self.parent.level_index == 1:
|
||||
self.parent.alien_arm.hide()
|
||||
|
||||
def block(self):
|
||||
if len(self.sprites):
|
||||
|
|
19
config
|
@ -1,13 +1,14 @@
|
|||
#
|
||||
# Scrapeboard is an arcade game in development by Frank DeMarco (@diskmem) and Blake Andrews (@snakesandrews).
|
||||
# It requires custom hardware to play, but it can be tested in keyboard mode with just the code in this
|
||||
# repository. For more information on setting up and running the game, see the README. For more information
|
||||
# on the game in general, visit https://scrape.nugget.fun
|
||||
# [SCRAPEBOARD] is an arcade game in development by [@diskmem] and [@snakesandrews]
|
||||
#
|
||||
# It requires custom hardware to play but can be tested in keyboard mode without the hardware.
|
||||
# For more information on setting up and running the game, see the README, or for the game in
|
||||
# general, visit https://scrape.nugget.fun/
|
||||
#
|
||||
# This file contains configurable values that can adjust things like visual effects, performance, and audio.
|
||||
# A lot of these values are closely tied to how the game is expected to run (for example, the screen resolution),
|
||||
# but they can still be played around with. There are also a lot of values currently hardcoded in NS.py that
|
||||
# should be moved into here eventually.
|
||||
# This file contains configurable values that can adjust things like visual effects, performance,
|
||||
# and audio. A lot of these values are closely tied to how the game is expected to run (for example,
|
||||
# the screen resolution), so adjust at your own risk. There are also a lot of values currently
|
||||
# hardcoded in NS.py that should be moved into here eventually.
|
||||
#
|
||||
|
||||
[setup]
|
||||
|
@ -29,7 +30,7 @@ effects = yes
|
|||
|
||||
[system]
|
||||
# will force set display->effects to off
|
||||
minimize-load-time = yes
|
||||
minimize-load-time = no
|
||||
|
||||
[mouse]
|
||||
visible = no
|
||||
|
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
@ -8,3 +8,6 @@
|
|||
5999999
|
||||
5999999
|
||||
5999999
|
||||
52586
|
||||
54614
|
||||
52434
|
||||
|
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 8.0 KiB |
|
@ -0,0 +1,92 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
W=1920
|
||||
H=1080
|
||||
|
||||
FILTER="[0:v]trim=start=0.0:end=0.734,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls0];"
|
||||
FILTER+="[0:v]trim=start=0.734:end=4.478,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p0];"
|
||||
FILTER+="[0:v]trim=start=4.478:end=9.784,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p1];"
|
||||
FILTER+="[0:v]trim=start=9.784:end=11.451,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls1];"
|
||||
FILTER+="[0:v]trim=start=11.451:end=15.589,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p2];"
|
||||
FILTER+="[0:v]trim=start=15.589:end=18.526,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p3];"
|
||||
FILTER+="[0:v]trim=start=18.526:end=21.825,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls2];"
|
||||
FILTER+="[0:v]trim=start=21.825:end=24.765,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p4];"
|
||||
FILTER+="[0:v]trim=start=24.765:end=27.201,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p5];"
|
||||
FILTER+="[0:v]trim=start=27.201:end=29.369,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p6];"
|
||||
FILTER+="[0:v]trim=start=29.369:end=34.174,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p7];"
|
||||
FILTER+="[0:v]trim=start=34.174:end=43.517,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p8];"
|
||||
FILTER+="[0:v]trim=start=43.517:end=47.754,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls3];"
|
||||
FILTER+="[0:v]trim=start=47.754:end=53.961,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p9];"
|
||||
FILTER+="[0:v]trim=start=53.961:end=61.401,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls4];"
|
||||
FILTER+="[0:v]trim=start=61.401:end=78.385,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p10];"
|
||||
FILTER+="[0:v]trim=start=78.385:end=85.526,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls5];"
|
||||
FILTER+="[0:v]trim=start=85.526:end=118.326,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p11];"
|
||||
FILTER+="[0:v]trim=start=118.326,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls6];"
|
||||
FILTER+="[ls0]split=3[ls0a][ls0b][ls0c];"
|
||||
FILTER+="[ls0b]crop=w=800:h=450:x=194:y=527,boxblur=luma_radius=10:luma_power=5,scale=w=$W:h=$H[ls0bg];"
|
||||
FILTER+="[ls0c]drawbox=color=white:thickness=fill,drawbox=color=black:y=75:h=931:thickness=fill[ls0mask];"
|
||||
FILTER+="[ls0a][ls0bg][ls0mask]maskedmerge,setpts=PTS-STARTPTS[ls0merged];"
|
||||
FILTER+="[p0]split=3[p0a][p0b][p0c];"
|
||||
FILTER+="[p0b]crop=w=713:h=402:x=603:y=656,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p0bg];"
|
||||
FILTER+="[p0c]drawbox=color=white:thickness=fill,drawbox=color=black:x=605:w=710:thickness=fill[p0mask];"
|
||||
FILTER+="[p0a][p0bg][p0mask]maskedmerge,setpts=PTS-STARTPTS[p0merged];"
|
||||
FILTER+="[p1]split=3[p1a][p1b][p1c];"
|
||||
FILTER+="[p1b]crop=w=437:h=246:x=656:y=202,boxblur=luma_radius=6:luma_power=3,scale=w=$W:h=$H[p1bg];"
|
||||
FILTER+="[p1c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p1mask];"
|
||||
FILTER+="[p1a][p1bg][p1mask]maskedmerge,setpts=PTS-STARTPTS[p1merged];"
|
||||
FILTER+="[ls0merged][p0merged][p1merged][ls1]concat=n=4[concat0];"
|
||||
FILTER+="[p2]split=3[p2a][p2b][p2c];"
|
||||
FILTER+="[p2b]crop=w=380:h=214:x=708:y=158,boxblur=luma_radius=6:luma_power=3,scale=w=$W:h=$H[p2bg];"
|
||||
FILTER+="[p2c]drawbox=color=white:thickness=fill,drawbox=color=black:x=704:w=512:thickness=fill[p2mask];"
|
||||
FILTER+="[p2a][p2bg][p2mask]maskedmerge,setpts=PTS-STARTPTS[p2merged];"
|
||||
FILTER+="[p3]split=3[p3a][p3b][p3c];"
|
||||
FILTER+="[p3b]crop=w=612:h=344:x=652:y=310,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p3bg];"
|
||||
FILTER+="[p3c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p3mask];"
|
||||
FILTER+="[p3a][p3bg][p3mask]maskedmerge,setpts=PTS-STARTPTS[p3merged];"
|
||||
FILTER+="[concat0][p2merged][p3merged][ls2]concat=n=4[concat1];"
|
||||
FILTER+="[p4]split=3[p4a][p4b][p4c];"
|
||||
FILTER+="[p4b]crop=w=516:h=290:x=732:y=690,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p4bg];"
|
||||
FILTER+="[p4c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p4mask];"
|
||||
FILTER+="[p4a][p4bg][p4mask]maskedmerge,setpts=PTS-STARTPTS[p4merged];"
|
||||
FILTER+="[p5]split=3[p5a][p5b][p5c];"
|
||||
FILTER+="[p5b]crop=w=604:h=340:x=654:y=514,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p5bg];"
|
||||
FILTER+="[p5c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p5mask];"
|
||||
FILTER+="[p5a][p5bg][p5mask]maskedmerge,setpts=PTS-STARTPTS[p5merged];"
|
||||
FILTER+="[p6]split=3[p6a][p6b][p6c];"
|
||||
FILTER+="[p6b]crop=w=608:h=342:x=658:y=692,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p6bg];"
|
||||
FILTER+="[p6c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p6mask];"
|
||||
FILTER+="[p6a][p6bg][p6mask]maskedmerge,setpts=PTS-STARTPTS[p6merged];"
|
||||
FILTER+="[p7]split=3[p7a][p7b][p7c];"
|
||||
FILTER+="[p7b]crop=w=601:h=338:x=654:y=444,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p7bg];"
|
||||
FILTER+="[p7c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p7mask];"
|
||||
FILTER+="[p7a][p7bg][p7mask]maskedmerge,setpts=PTS-STARTPTS[p7merged];"
|
||||
FILTER+="[p8]split=3[p8a][p8b][p8c];"
|
||||
FILTER+="[p8b]crop=w=604:h=340:x=654:y=546,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p8bg];"
|
||||
FILTER+="[p8c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p8mask];"
|
||||
FILTER+="[p8a][p8bg][p8mask]maskedmerge,setpts=PTS-STARTPTS[p8merged];"
|
||||
FILTER+="[concat1][p4merged][p5merged][p6merged][p7merged][p8merged][ls3]concat=n=7[concat2];"
|
||||
FILTER+="[p9]split=3[p9a][p9b][p9c];"
|
||||
FILTER+="[p9b]crop=w=480:h=270:x=720:y=664,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p9bg];"
|
||||
FILTER+="[p9c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p9mask];"
|
||||
FILTER+="[p9a][p9bg][p9mask]maskedmerge,setpts=PTS-STARTPTS[p9merged];"
|
||||
FILTER+="[ls4]split=3[ls4a][ls4b][ls4c];"
|
||||
FILTER+="[ls4b]crop=w=800:h=450:x=1194:y=527,boxblur=luma_radius=10:luma_power=5,scale=w=$W:h=$H[ls4bg];"
|
||||
FILTER+="[ls4c]drawbox=color=white:thickness=fill,drawbox=color=black:y=75:h=931:thickness=fill[ls4mask];"
|
||||
FILTER+="[ls4a][ls4bg][ls4mask]maskedmerge,setpts=PTS-STARTPTS[ls4merged];"
|
||||
FILTER+="[p10]split=3[p10a][p10b][p10c];"
|
||||
FILTER+="[p10b]crop=w=606:h=340:x=654:y=638,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p10bg];"
|
||||
FILTER+="[p10c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p10mask];"
|
||||
FILTER+="[p10a][p10bg][p10mask]maskedmerge,setpts=PTS-STARTPTS[p10merged];"
|
||||
FILTER+="[concat2][p9merged][ls4merged][p10merged]concat=n=4[concat3];"
|
||||
FILTER+="[ls5]split=3[ls5a][ls5b][ls5c];"
|
||||
FILTER+="[ls5b]crop=w=800:h=450:x=1194:y=527,boxblur=luma_radius=10:luma_power=5,scale=w=$W:h=$H[ls5bg];"
|
||||
FILTER+="[ls5c]drawbox=color=white:thickness=fill,drawbox=color=black:y=75:h=931:thickness=fill[ls5mask];"
|
||||
FILTER+="[ls5a][ls5bg][ls5mask]maskedmerge,setpts=PTS-STARTPTS[ls5merged];"
|
||||
FILTER+="[p11]split=3[p11a][p11b][p11c];"
|
||||
FILTER+="[p11b]crop=w=444:h=250:x=794:y=780,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p11bg];"
|
||||
FILTER+="[p11c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p11mask];"
|
||||
FILTER+="[p11a][p11bg][p11mask]maskedmerge,setpts=PTS-STARTPTS[p11merged];"
|
||||
FILTER+="[concat3][ls5merged][p11merged][ls6]concat=n=4[out]"
|
||||
|
||||
echo "$FILTER";
|
||||
ffmpeg -i scrapeboard_new.webm -crf 17 -filter_complex "$FILTER" -map "[out]" -map 0:a -c:a copy out.webm
|
456
www/index.php
|
@ -1,6 +1,22 @@
|
|||
<!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">
|
||||
|
@ -18,13 +34,51 @@
|
|||
<meta name="twitter:creator" content="@diskmem">
|
||||
<title>Scrapeboard</title>
|
||||
<link rel="stylesheet" href="www/style.css" type="text/css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<video id="landing_video" autoplay muted disablepictureinpicture disableremoteplayback loop="true"
|
||||
poster="www/scrapeboard_new_cover.jpg">
|
||||
|
||||
<!-- 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">
|
||||
<source src="www/scrapeboard_new.webm">
|
||||
</video>
|
||||
|
||||
<!-- ONE LINE DESCRIPTION -->
|
||||
|
||||
<style>
|
||||
|
||||
@media (min-width: 800px)
|
||||
{
|
||||
div#hero
|
||||
|
@ -49,6 +103,7 @@
|
|||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px)
|
||||
{
|
||||
div#hero
|
||||
|
@ -65,23 +120,27 @@
|
|||
|
||||
div#hero img#head_1
|
||||
{
|
||||
/* width: 90%; */
|
||||
grid-area: 2 / 1 / 3 / 2;
|
||||
}
|
||||
|
||||
div#hero img#head_2
|
||||
{
|
||||
/* width: 90%; */
|
||||
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
|
||||
|
@ -99,84 +158,357 @@
|
|||
{
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
grid-gap: 5%;
|
||||
width: 99%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#boarding img#boarding_4
|
||||
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>
|
||||
|
||||
<style>
|
||||
/* landscape */
|
||||
@media (min-width: 800px)
|
||||
{
|
||||
p.emotes
|
||||
{
|
||||
font-size: 34px;
|
||||
}
|
||||
form#mailing-list input
|
||||
{
|
||||
font-size: 34px;
|
||||
}
|
||||
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;
|
||||
}
|
||||
form#mailing-list 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>
|
||||
<div id="boarding">
|
||||
<a href="www/Boarding_1.gif"><img id="boarding_0" src="www/Boarding_1_thumb.gif" /></a>
|
||||
<a href="www/Boarding_0.gif"><img id="boarding_1" src="www/Boarding_0_thumb.gif" /></a>
|
||||
<a href="www/Multiplay_Closing-Flan.gif"><img id="boarding_2" src="www/Multiplay_Closing-Flan_thumb.gif" /></a>
|
||||
<a href="www/Boarding_2.gif"><img id="boarding_3" src="www/Boarding_2_thumb.gif" /></a>
|
||||
<a href="www/Boarding_3.gif"><img id="boarding_4" src="www/Boarding_3_thumb.gif" /></a>
|
||||
|
||||
<p class="emotes">
|
||||
(*^ワ^*) o(〃^▽^〃)o ヾ(@⌒ー⌒@)ノ ヽ(*⌒∇⌒*)ノ (≧∇≦)/ (ノ´ヮ´)ノ*: ・゚ ≧﹏≦ ( ´ ▽ ` )b
|
||||
</p>
|
||||
|
||||
<div id="calendar">
|
||||
<p>
|
||||
Come play Scrapeboard at one of these events!
|
||||
</p>
|
||||
<div class="date upcoming current">
|
||||
<div class="day-of-week">
|
||||
Wed - Fri
|
||||
</div>
|
||||
<div class="day">
|
||||
Mar. 23 - 25
|
||||
</div>
|
||||
<div class="year">
|
||||
2022
|
||||
</div>
|
||||
<div class="location">
|
||||
<a href="https://gdconf.com">GDC, San Francisco</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="date past">
|
||||
<div class="day-of-week">
|
||||
Thu - Sun
|
||||
</div>
|
||||
<div class="day">
|
||||
Jan. 6 - 9
|
||||
</div>
|
||||
<div class="year">
|
||||
2022
|
||||
</div>
|
||||
<div class="location">
|
||||
<a href="https://super.magfest.org">MAGFest, Maryland</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="date past">
|
||||
<div class="day-of-week">
|
||||
Sunday
|
||||
</div>
|
||||
<div class="day">
|
||||
Oct. 31
|
||||
</div>
|
||||
<div class="year">
|
||||
2021
|
||||
</div>
|
||||
<div class="location">
|
||||
<a href="https://wonderville.nyc">Wonderville, NYC</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<i>If you are interested in having Scrapeboard at your event, bar, arcade, office, school, or home,
|
||||
contact <a href="mailto:scrape@nugget.fun">scrape@nugget.fun</a></i>
|
||||
</p>
|
||||
</div>
|
||||
<!-- <div id="heading">
|
||||
<div id="title">
|
||||
<img id="plank" src="resource/Title_plank.png" />
|
||||
<img id="board" src="resource/Introduction_skateboard.png" />
|
||||
<img id="lizard" src="resource/littleSlimeGoop/1_downRight.png" />
|
||||
</div>
|
||||
<div id="question">
|
||||
So you think you can skateboard, but can you <i>scrape</i>board, you slime bag?
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div id="blob">
|
||||
<div id="detail">
|
||||
We have the <span class="highlight">technology</span> to put you on a board which is a
|
||||
wireless electric <span class="highlight">video game</span> controller. Do you have the
|
||||
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
|
||||
to <i>Tony Hawk</i>?
|
||||
</div>
|
||||
<div id="detail2">
|
||||
We have the <span class="highlight">technology</span> to put you on a board which is a
|
||||
wireless electric <span class="highlight">video game</span> controller. Do you have the
|
||||
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
|
||||
to <i>Tony Hawk</i>?
|
||||
</div>
|
||||
<div id="detail3">
|
||||
We have the <span class="highlight">technology</span> to put you on a board which is a
|
||||
wireless electric <span class="highlight">video game</span> controller. Do you have the
|
||||
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
|
||||
to <i>Tony Hawk</i>?
|
||||
</div>
|
||||
<div id="detail4">
|
||||
We have the <span class="highlight">technology</span> to put you on a board which is a
|
||||
wireless electric <span class="highlight">video game</span> controller. Do you have the
|
||||
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
|
||||
to <i>Tony Hawk</i>?
|
||||
</div>
|
||||
<div id="detail5">
|
||||
We have the <span class="highlight">technology</span> to put you on a board which is a
|
||||
wireless electric <span class="highlight">video game</span> controller. Do you have the
|
||||
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
|
||||
to <i>Tony Hawk</i>?
|
||||
</div>
|
||||
</div> -->
|
||||
<div id="instructions">
|
||||
<img id="line" src="www/hero_instructions_foreground.png" />
|
||||
<img id="diagram" src="www/instructions.png" />
|
||||
|
||||
<div id="mailing-list-join">
|
||||
<span style="background: #ffa; border-radius: 5px; padding-left: 10px; padding-right: 10px;">
|
||||
Join the Scrapeboard events and news mailing list!
|
||||
</div>
|
||||
</div>
|
||||
<img id="description" src="www/hero_description_foreground.png" />
|
||||
|
||||
<form id="mailing-list" method="post" action="https://nugget.fun/mailman/subscribe/scrapeboard">
|
||||
<input 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';">
|
||||
|
||||
<input style="cursor: pointer; background: #4f8; font-weight: bold" type="submit" name="email-button" value="Join">
|
||||
</form>
|
||||
|
||||
<p class="emotes">
|
||||
d(⌒ー⌒) (❁´◡`❁) ヽ(^Д^)ノ (。>‿‿<。 )(*´∇`)ノ (●⌒v⌒●) ´・ᴗ・` (✿^-^) ヾ(^ヮ^)ノ
|
||||
</p>
|
||||
|
||||
<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="http://twitter.com/beachethan">@beachethan</a>
|
||||
</div>
|
||||
<div class="credits">
|
||||
Scrapeboard is created by <a href="http://twitter.com/diskmem">@diskmem</a> and
|
||||
<a href="http://twitter.com/snakesandrews">@snakesandrews</a><br/>
|
||||
with engineering by <a href="http://twitter.com/clementshimizu">@ClementShimizu</a><br/>
|
||||
|
||||
<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);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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>
|
||||
|
||||
<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"
|
||||
data-show-count="true">
|
||||
Follow @diskmem
|
||||
</a>
|
||||
<a href="https://twitter.com/snakesandrews?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-dnt="true"
|
||||
data-show-count="true">
|
||||
Follow @snakesandrews
|
||||
</a>
|
||||
<a href="https://twitter.com/ClementShimizu?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-dnt="true"
|
||||
data-show-count="true">
|
||||
Follow @ClementShimizu
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="ink">
|
||||
<img src="www/Ink.png">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
Before Width: | Height: | Size: 390 KiB After Width: | Height: | Size: 506 KiB |
361
www/style.css
|
@ -22,6 +22,20 @@ body a:hover
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
div#scroll
|
||||
{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 90%;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
opacity: 0.9;
|
||||
padding: 5px 20px 0px 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 34px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
video#landing_video
|
||||
{
|
||||
width: 100%;
|
||||
|
@ -42,245 +56,177 @@ div#hero img
|
|||
|
||||
div#instructions
|
||||
{
|
||||
display: grid;
|
||||
margin: auto;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
div#instructions img#line
|
||||
div#instructions img
|
||||
{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div#instructions img#diagram
|
||||
{
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 60%;
|
||||
margin-top: 40px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
img#description
|
||||
img#safety
|
||||
{
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 75%;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
/* div#description */
|
||||
/* { */
|
||||
/* width: 75%; */
|
||||
/* margin: auto; */
|
||||
/* margin-top: 20px; */
|
||||
/* } */
|
||||
img#pip
|
||||
{
|
||||
display: block;
|
||||
margin: 40px auto 0px auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* div#description */
|
||||
/* { */
|
||||
/* position: relative; */
|
||||
div#demo
|
||||
{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin: 0px auto 40px auto;
|
||||
}
|
||||
|
||||
/* } */
|
||||
div#demo div#demo_title
|
||||
{
|
||||
color: red;
|
||||
font-family: NotCourierSansBold;
|
||||
}
|
||||
|
||||
/* div#description img */
|
||||
/* { */
|
||||
/* width: 100%; */
|
||||
/* } */
|
||||
div#demo div#demo_link
|
||||
{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* div#description div.text */
|
||||
/* { */
|
||||
/* text-align: justify; */
|
||||
/* text-align-last: center; */
|
||||
/* } */
|
||||
div#description
|
||||
{
|
||||
display: grid;
|
||||
margin: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* div#description div.text:after */
|
||||
/* { */
|
||||
/* content: ""; */
|
||||
/* display: inline-block; */
|
||||
/* width: 100%; */
|
||||
/* } */
|
||||
div#description img
|
||||
{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* div#description div#first */
|
||||
/* { */
|
||||
/* font-size: 55px; */
|
||||
/* font-weight: bold; */
|
||||
/* } */
|
||||
p.emotes
|
||||
{
|
||||
width: 100%;
|
||||
padding: 10px 0px;
|
||||
font-family: NotCourierSans;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
background: #fff;
|
||||
margin: 0px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* div#description div#second */
|
||||
/* { */
|
||||
/* font-size: 36px; */
|
||||
/* } */
|
||||
div#calendar
|
||||
{
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* div#description div#third */
|
||||
/* { */
|
||||
/* font-size: 28px; */
|
||||
/* } */
|
||||
|
||||
/* div#description div#fourth */
|
||||
/* { */
|
||||
/* font-size: 24px; */
|
||||
/* } */
|
||||
|
||||
/* div#heading div#title */
|
||||
/* { */
|
||||
/* text-align: center; */
|
||||
/* position: relative; */
|
||||
/* margin-bottom: 40px; */
|
||||
/* overflow: hidden; */
|
||||
/* } */
|
||||
|
||||
/* div#heading div#title img#plank */
|
||||
/* { */
|
||||
/* border-top: 13px dotted lime; */
|
||||
/* border-radius: 100px; */
|
||||
/* border-bottom: 18px dashed lime; */
|
||||
/* z-index: 0; */
|
||||
/* } */
|
||||
|
||||
/* div#heading div#title img#board */
|
||||
/* { */
|
||||
/* width: 100px; */
|
||||
/* transform: rotate(70deg); */
|
||||
/* background-color: yellow; */
|
||||
/* border: 3px groove pink; */
|
||||
/* position: absolute; */
|
||||
/* z-index: 1; */
|
||||
/* top: 50px; */
|
||||
/* left: 52%; */
|
||||
/* border-radius: 40px; */
|
||||
/* } */
|
||||
|
||||
/* div#heading div#title img#lizard */
|
||||
/* { */
|
||||
/* width: 1000px; */
|
||||
/* background-color: rgba(255, 100, 100, .2); */
|
||||
/* opacity: .9; */
|
||||
/* position: absolute; */
|
||||
/* top: 0px; */
|
||||
/* z-index: 2; */
|
||||
/* left: 40%; */
|
||||
/* border-radius: 40px; */
|
||||
/* } */
|
||||
|
||||
/* div#heading div#question */
|
||||
/* { */
|
||||
/* width: 65%; */
|
||||
/* margin: auto; */
|
||||
/* border: 5px double cyan; */
|
||||
/* background: #B0D0D0E0; */
|
||||
/* line-height: 28px; */
|
||||
/* color: #282828; */
|
||||
/* padding: 50px; */
|
||||
/* border-radius: 18px; */
|
||||
/* font-family: NotCourierSansBold; */
|
||||
/* font-size: 34px; */
|
||||
/* margin-bottom: 18px; */
|
||||
/* position: absolute; */
|
||||
/* top: -10px; */
|
||||
/* z-index: 0; */
|
||||
/* } */
|
||||
|
||||
/* div#blob */
|
||||
/* { */
|
||||
/* position: relative; */
|
||||
/* width: 100%; */
|
||||
/* overflow: hidden; */
|
||||
/* word-break: break-all; */
|
||||
/* } */
|
||||
|
||||
/* div#detail */
|
||||
/* { */
|
||||
/* font-family: NotCourierSans; */
|
||||
/* font-size: 80px; */
|
||||
/* text-align: justify; */
|
||||
/* } */
|
||||
|
||||
/* div#detail a */
|
||||
/* { */
|
||||
/* position: absolute; */
|
||||
/* top: 80px; */
|
||||
/* left: 30px; */
|
||||
/* font-size: 12px; */
|
||||
/* z-index: 3; */
|
||||
/* } */
|
||||
|
||||
/* div#detail a#blake */
|
||||
/* { */
|
||||
/* top: 95px; */
|
||||
/* } */
|
||||
|
||||
/* div#detail a#clement */
|
||||
/* { */
|
||||
/* top: 110px; */
|
||||
/* } */
|
||||
|
||||
/* div#detail2 */
|
||||
/* { */
|
||||
/* font-family: NotCourierSans; */
|
||||
/* font-size: 80px; */
|
||||
/* text-align: justify; */
|
||||
/* position: absolute; */
|
||||
/* top: 1px; */
|
||||
/* left: 1px; */
|
||||
/* } */
|
||||
|
||||
/* div#detail3 */
|
||||
/* { */
|
||||
/* font-family: NotCourierSans; */
|
||||
/* font-size: 80px; */
|
||||
/* text-align: justify; */
|
||||
/* position: absolute; */
|
||||
/* top: 2px; */
|
||||
/* left: 2px; */
|
||||
/* } */
|
||||
|
||||
/* div#detail4 */
|
||||
/* { */
|
||||
/* font-family: NotCourierSans; */
|
||||
/* font-size: 80px; */
|
||||
/* text-align: justify; */
|
||||
/* position: absolute; */
|
||||
/* top: 3px; */
|
||||
/* left: 3px; */
|
||||
/* /\* color: gray; *\/ */
|
||||
/* /\* opacity: .5; *\/ */
|
||||
/* } */
|
||||
|
||||
/* div#detail5 */
|
||||
/* { */
|
||||
/* font-family: NotCourierSans; */
|
||||
/* font-size: 80px; */
|
||||
/* text-align: justify; */
|
||||
/* position: absolute; */
|
||||
/* top: 4px; */
|
||||
/* left: 4px; */
|
||||
/* /\* opacity: .3; *\/ */
|
||||
/* } */
|
||||
|
||||
div#photo
|
||||
div#calendar p
|
||||
{
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
width: 65%;
|
||||
font-family: Cantarell;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
div#photo img
|
||||
div#calendar div.date
|
||||
{
|
||||
width: 300px;
|
||||
border: 18px ridge pink;
|
||||
border: 1px solid #000;
|
||||
padding: 5px;
|
||||
font-family: NotCourierSans;
|
||||
}
|
||||
|
||||
div.credits
|
||||
div#calendar div.upcoming
|
||||
{
|
||||
color: #000;
|
||||
}
|
||||
|
||||
div#calendar div.past
|
||||
{
|
||||
color: #888;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
div#calendar div.current
|
||||
{
|
||||
background: #ffa;
|
||||
}
|
||||
|
||||
div#calendar div.date div.day-of-week
|
||||
{
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div#calendar div.date div.day
|
||||
{
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div#calendar div.date div.year
|
||||
{
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div#calendar div.date div.location
|
||||
{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
div#mailing-list-join
|
||||
{
|
||||
font-size: 34px;
|
||||
font-family: Cantarell;
|
||||
margin: 0px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form#mailing-list
|
||||
{
|
||||
background: #fff;
|
||||
margin: auto;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form#mailing-list input
|
||||
{
|
||||
font-family: NotCourierSans;
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
p#credits-heading
|
||||
{
|
||||
margin-top: 40px;
|
||||
font-family: NotCourierSans;
|
||||
font-size: 24px;
|
||||
font-family: Cantarell;
|
||||
font-size: 34px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.credits a
|
||||
div#credits
|
||||
{
|
||||
font-weight: bold;
|
||||
font-family: Cantarell;
|
||||
font-size: 28px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
div#credits p#links
|
||||
{
|
||||
display: grid;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div#boarding
|
||||
|
@ -310,7 +256,6 @@ div#comedy
|
|||
|
||||
div#comedy iframe
|
||||
{
|
||||
/* border: 8px solid black; */
|
||||
border-radius: 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -320,6 +265,10 @@ div#comedy_credits
|
|||
{
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
max-width: 889px;
|
||||
width: 90vw;
|
||||
text-align: right;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
div#ink
|
||||
|
|