Merge branch 'master' into build

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: epicyoshimaster
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.gitignore

@@ -4,4 +4,5 @@ bower_components
 .parcel-cache
 /dashboard
 /graphics
-/extension
+/extension
+.timetracker

README.md

@@ -1,17 +1,34 @@
 # twinsquiddies-layouts
 
-twinsquiddies-layouts is a [NodeCG](http://github.com/nodecg/nodecg) bundle.
-It works with NodeCG versions which satisfy this [semver](https://docs.npmjs.com/getting-started/semantic-versioning) range: `^2.0.0`
-You will need to have an appropriate version of NodeCG installed to use it.
+twinsquiddies-layouts is a [NodeCG](http://github.com/nodecg/nodecg) bundle made for [Twin Squiddies](https://bsky.app/profile/twinsquiddies.bsky.social), a Minneapolis-based Splatoon LAN, in association with [SquidWest](https://bsky.app/profile/squidwest.bsky.social).
 
+This repository contains the associated event graphics and must be used in tandem with [squidwest-layout-controls](https://github.com/EpicYoshiMaster/squidwest-layout-controls).
 
-## Developing
+The graphics included are:
 
-Use the following commands:
+- Starting Soon scene
+- Be Right Back scene
+- Commentary Lower Thirds
+- Omnibar
+- Three Screen Intermission
+- Credits sequence
 
--   `npm run build`: Build the project once.
--   `npm run watch`: Build the project and automatically rebuild on changes.
--   `npm run dev`: Build the project, automatically rebuild on changes, launch the NodeCG server, and automatically restart the NodeCG server on changes.
-    -   Only restarts the NodeCG server when server-side (i.e. extension) code changes. Changes to client-side code (i.e. dashboard panels and graphics) will not cause the server to restart, nor will they cause browser tabs to automatically refresh.
+The break screen artwork was made by [Lilalychi](https://bsky.app/profile/lilalychi.bsky.social).
 
+## Images
 
+![Twin Squiddies Starting Soon](./screenshots/GraphicsStartingSoon.png)
+
+![Twin Squiddies Three Screen Intermission](./screenshots/GraphicsThreeScreen.png)
+
+![Twin Squiddies Commentary Lower Thirds](./screenshots/GraphicsCommentary.png)
+
+## Install
+
+1. Complete the steps to obtain [NodeCG](https://www.nodecg.dev/) and [nodecg-cli](https://github.com/nodecg/nodecg-cli).
+
+2. Install the bundle: `nodecg install EpicYoshiMaster/twinsquiddies-layouts`.
+
+## Support
+
+If you like the things I make, consider supporting me on my ko-fi page: [https://ko-fi.com/epicyoshimaster](https://ko-fi.com/epicyoshimaster)!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twinsquiddies-layouts",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "NodeCG bundle with graphics for the Twin Squiddies event.",
   "homepage": "",
   "author": {
@@ -53,6 +53,12 @@
         "width": 1920,
         "height": 1080,
         "singleInstance": false
+      },
+      {
+        "file": "game.html",
+        "width": 1920,
+        "height": 1080,
+        "singleInstance": false
       }
     ],
     "mount": [
@@ -92,10 +98,12 @@
     "@phosphor-icons/react": "^2.1.7",
     "@types/react": "*",
     "@types/react-dom": "*",
+    "fontfaceobserver": "^2.3.0",
     "react": "*",
     "react-dom": "*",
     "styled-components": "^6.1.13",
-    "ts-node": "*"
+    "ts-node": "*",
+    "type-fest": "^4.31.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.25.9",
@@ -105,6 +113,7 @@
     "@parcel/core": "*",
     "@parcel/reporter-cli": "*",
     "@parcel/validator-typescript": "*",
+    "@types/fontfaceobserver": "^2.1.3",
     "@types/node": "^18",
     "babel-plugin-styled-components": "^2.1.4",
     "concurrently": "*",

src/graphics/Credits.tsx

@@ -91,7 +91,11 @@ export function Credits() {
                     </CreditsRow>
                     <CreditsRow>
                         <HeaderText>Stream Overlays and Design</HeaderText>
-                        <NameText>EpicYoshiMaster</NameText>
+                        <YoshiRow>
+                            <img src="/bundles/twinsquiddies-layouts/images/misc/harmonypixel.gif" alt="Harmony Pixel" />
+                            <YoshiSpan><YoshiText>EpicYoshiMaster</YoshiText></YoshiSpan>
+                            <img src="/bundles/twinsquiddies-layouts/images/misc/harmonypixel.gif" alt="Harmony Pixel" />
+                        </YoshiRow>
                         <Divider />
                         <NameText>Need stream overlays for your event?</NameText>
                         <NameText>Contact me!</NameText>
@@ -227,6 +231,10 @@ const EventLogo = styled.img`
 `;
 
 const YoshiRow = styled(LogoRow)`
+
+    & img {
+        height: 5rem;
+    }
     
     svg {
     width: 1em;
@@ -236,6 +244,25 @@ const YoshiRow = styled(LogoRow)`
    } 
 `;
 
+const YoshiText = styled(NameText)`
+    position: relative;
+    font-size: 5rem;
+    font-weight: bold;
+
+    color: #fff;
+    background: #000;
+
+    mix-blend-mode: multiply;
+`;
+
+const YoshiSpan = styled.span`
+    background: linear-gradient(to right, transparent 0% 13%, #424fff 13% 16%, transparent 16% 17%, #65b5ff 17% 19%, transparent 19% 100%), 
+    linear-gradient(to right, transparent 0% 41%, #65b5ff 41% 43%, transparent 43% 100%),
+    linear-gradient(to right, transparent 0% 56%, #fe64ab 56% 59%, #a1b4a8 59%, 61%, transparent 61% 100%),
+    linear-gradient(to right, #ff86d5 0% 25%, #00ddab 25% 50%, #ff86d5 50% 75%, #00ddab 75% 100%);
+    background-size: 25%;
+`;
+
 const Divider = styled.div`
     width: 100%;
     height: 10%;