new chameleon; alien sword smears; website updates

.gitignore

@@ -8,3 +8,4 @@ venv/
 lib/fonts
 favicon.ico
 scrapeboard_new.webm
+Scrapeboard_Gameplay_Demo_picture_in_picture.webp

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):

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

resource/scores

@@ -8,3 +8,6 @@
 5999999
 5999999
 5999999
+52586
+54614
+52434

www/blend_video.sh

@@ -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

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 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>
+            <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>
-        <!-- <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> -->
+
+        <!-- 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%;
+             }