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).
+# [SCRAPEBOARD] is an arcade game in development by [@diskmem] and [@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
+# It requires custom hardware to play but can be tested in keyboard mode without the hardware.
-# on the game in general, visit https://scrape.nugget.fun
+# 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
+    The main game object. It initializes and updates the title screen, boss manager, platform, dialog manager, screen wipe manager,
-    object like the title screen, boss manager, platform, dialog manager, screen wipe manager, main character, and more (see
+    main character, and more (see the objects initialized in __init__). It initializes and watches the Arduino serial port and
-    the objects initialized in __init__). It initializes and manages the serial input from the Arduino, and it listens for and
+    listens for and responds to keyboard input.
-    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.
     """
 
+    # 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, \
+            self.location.center = ds.get_width() / 2 + NS.FRONT_WIDTH / 2 - 85, \
-                                   NS.FRONT + NS.LENGTH * NS.STEP - 75 + dy
+                                   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, \
+            self.location.center = ds.get_width() / 2 - NS.FRONT_WIDTH / 2 + 90, \
-                                   NS.FRONT + NS.LENGTH * NS.STEP - 85 + dy
+                                   NS.FRONT + NS.LENGTH * NS.STEP - 30 + dy
             self.orientation = NS.W
         elif edge == NS.NW:
-            self.location.center = ds.get_width() / 2 + 5, \
+            self.location.center = ds.get_width() / 2 - 15, \
-                                   NS.FRONT + NS.LENGTH * NS.STEP - 75 + dy
+                                   NS.FRONT + NS.LENGTH * NS.STEP + dy - 45
             self.orientation = NS.NW
         elif edge == NS.NE:
-            self.location.center = ds.get_width() / 2 + 10, \
+            self.location.center = ds.get_width() / 2 + 5, \
-                                   NS.FRONT + NS.LENGTH * NS.STEP - 80 + dy
+                                   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"),
+            self.play(self.brandish, delay=self.get_configuration("time", "sword-delay"), play_once=True)
-                      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).
+# [SCRAPEBOARD] is an arcade game in development by [@diskmem] and [@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
+# It requires custom hardware to play but can be tested in keyboard mode without the hardware.
-# on the game in general, visit https://scrape.nugget.fun
+# 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.
+# This file contains configurable values that can adjust things like visual effects, performance,
-# A lot of these values are closely tied to how the game is expected to run (for example, the screen resolution),
+# and audio. A lot of these values are closely tied to how the game is expected to run (for example,
-# but they can still be played around with. There are also a lot of values currently hardcoded in NS.py that
+# the screen resolution), so adjust at your own risk. There are also a lot of values currently
-# should be moved into here eventually.
+# 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 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>
+        <p class="emotes">
-            <a href="www/Boarding_0.gif"><img id="boarding_1" src="www/Boarding_0_thumb.gif" /></a>
+            （*＾ワ＾*） o(〃＾▽＾〃)o ヾ(＠⌒ー⌒＠)ノ ヽ(*⌒∇⌒*)ﾉ (≧∇≦)/ (ﾉ´ヮ´)ﾉ*: ･ﾟ ≧﹏≦ ( ´ ▽ ` )b
-            <a href="www/Multiplay_Closing-Flan.gif"><img id="boarding_2" src="www/Multiplay_Closing-Flan_thumb.gif" /></a>
+        </p>
-            <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>
+        <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">
+        <div id="mailing-list-join">
-             <img id="plank" src="resource/Title_plank.png" />
+            <span style="background: #ffa; border-radius: 5px; padding-left: 10px; padding-right: 10px;">
-             <img id="board" src="resource/Introduction_skateboard.png" />
+                Join the Scrapeboard events and news mailing list!
-             <img id="lizard" src="resource/littleSlimeGoop/1_downRight.png" />
+            </div>
-             </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>
-        <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';">
+            &nbsp;
+            <input style="cursor: pointer; background: #4f8; font-weight: bold" type="submit" name="email-button" value="Join">
+        </form>
+
+        <p class="emotes">
+            d(⌒ー⌒) (❁´◡`❁) ヽ(＾Д＾)ﾉ （｡>‿‿<｡ ）(*´∇｀)ﾉ (●⌒ｖ⌒●) ´･ᴗ･` （✿＾－＾) ヾ（＾ヮ＾)ﾉ
+        </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
+        <style>
-            <a href="http://twitter.com/snakesandrews">@snakesandrews</a><br/>
+
-            with engineering by <a href="http://twitter.com/clementshimizu">@ClementShimizu</a><br/>
+         /* 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>

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
+img#safety
-{
-    display: block;
-    margin: auto;
-    width: 60%;
-    margin-top: 40px;
-    border-radius: 30px;
-}
-
-img#description
 {
     display: block;
     margin: 40px auto;
-    width: 75%;
+    border-radius: 30px;
 }
 
-/* div#description */
+img#pip
-/* { */
+{
-/*     width: 75%; */
+    display: block;
-/*     margin: auto; */
+    margin: 40px auto 0px auto;
-/*     margin-top: 20px; */
+    border-radius: 8px;
-/* } */
+}
 
-/* div#description */
+div#demo
-/* { */
+{
-/*     position: relative; */
+    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 */
+div#demo div#demo_link
-/* { */
+{
-/*     width: 100%; */
+    text-align: right;
-/* } */
+}
 
-/* div#description div.text */
+div#description
-/* { */
+{
-/*     text-align: justify; */
+    display: grid;
-/*     text-align-last: center; */
+    margin: auto;
-/* } */
+    margin-bottom: 40px;
+}
 
-/* div#description div.text:after */
+div#description img
-/* { */
+{
-/*     content: ""; */
+    display: block;
-/*     display: inline-block; */
+    width: 100%;
-/*     width: 100%; */
+}
-/* } */
 
-/* div#description div#first */
+p.emotes
-/* { */
+{
-/*     font-size: 55px; */
+    width: 100%;
-/*     font-weight: bold; */
+    padding: 10px 0px;
-/* } */
+    font-family: NotCourierSans;
+    overflow: hidden;
+    font-weight: bold;
+    background: #fff;
+    margin: 0px;
+    white-space: nowrap;
+}
 
-/* div#description div#second */
+div#calendar
-/* { */
+{
-/*     font-size: 36px; */
+    width: 100%;
-/* } */
+    background: #fff;
+    display: grid;
+}
 
-/* div#description div#third */
+div#calendar p
-/* { */
-/*     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
 {
     text-align: center;
-    margin-top: 20px;
+    width: 65%;
+    font-family: Cantarell;
+    margin: 30px auto;
 }
 
-div#photo img
+div#calendar div.date
 {
-    width: 300px;
+    border: 1px solid #000;
-    border: 18px ridge pink;
+    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-family: Cantarell;
-    font-size: 24px;
+    font-size: 34px;
+    font-weight: bold;
     text-align: center;
 }
 
-div.credits a
+div#credits
 {
-    font-weight: bold;
+    margin: auto;
-    font-family: Cantarell;
+}
-    font-size: 28px;
+
+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