Merge branch 'website'

website/src/components/Button.astro

@@ -0,0 +1,45 @@
+---
+const { href, type } = Astro.props
+---
+<div class={['Button', type ? `Button--${type}` : ''].filter(Boolean).join(' ')}>
+  <a class="Button__inner" href={ href }>
+    <slot/>
+  </a>
+</div>
+
+<style lang="scss">
+  .Button {
+    margin: 5px;
+    border-radius: 15px;
+    border: 5px solid $color-bg-invert;
+    box-shadow: $shadow;
+  }
+
+  .Button__inner {
+    font-weight: bold;
+    text-align: center;
+    display: block;
+    cursor: pointer;
+    color: $color-text-invert;
+    background: $color-bg-invert;
+    padding: 6px 20px;
+    border: 3px solid #fff;
+    border-right-color: #B3B5C1;
+    border-bottom-color: #B3B5C1;
+    border-radius: 10px;
+    appearance: none;
+  }
+
+  .Button--inverted {
+    border: 5px solid $color-bg;
+
+    .Button__inner {
+      font-weight: normal;
+      color: $color-text;
+      background: $color-bg;
+      border: 3px solid #9090a1;
+      border-right-color: #000;
+      border-bottom-color: #000;
+    }
+  }
+</style>

website/src/components/Hero.astro

@@ -3,6 +3,7 @@ import { Icon } from 'astro-icon';
 
 import Nav from '../components/Nav.astro';
 import Player from '../components/Player.astro';
+import Button from '../components/Button.astro';
 ---
 <header class="Hero">
   <div class="Hero__head">
@@ -18,8 +19,7 @@ import Player from '../components/Player.astro';
         <Player/>
       </div>
       <div class="Hero__sub">
-        <h2 class="Hero__tagline">Coming Soon</h2>
-        <!-- <button class="Hero__downloadButton Button">Download</button> -->
+        <Button class="Hero__downloadButton" href="#download">Download</Button>
       </div>
     </div>
   </div>
@@ -35,17 +35,8 @@ import Player from '../components/Player.astro';
     z-index: 0;
 
     height: 100vh;
-    // clamp height
     min-height: 760px;
     max-height: 1200px;
-
-    background-position: center top;
-    background-repeat: repeat;
-    background-image: url('data:image/svg+xml;charset=utf8,\
-      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\
-        <rect x="0" y="0" width="33" height="33" fill="white" stroke-width="1" stroke-dashoffset="2" stroke-dasharray="4 4" stroke="%23B5C1CE"/>\
-      </svg>\
-    ');
   }
 
   .Hero__head {
@@ -57,6 +48,7 @@ import Player from '../components/Player.astro';
   }
 
   .Hero__wrap {
+    // margin-top: -$navbar-height;
     display: grid;
     align-items: center;
     grid-template-columns: 1fr;
@@ -80,15 +72,18 @@ import Player from '../components/Player.astro';
     @include breakpoint-tablet {
       // grid-column: 1;
       margin: 0 auto;
-      max-width: 512px;
+      max-width: 480px;
+      margin-top: 1.5rem;
     }
   }
 
   .Hero__tagline {
     color: $color-text-alt;
-    font-weight: normal;
-    font-size: 1.2rem;
-    margin-bottom: .5rem;
+    // font-weight: bold;
+    font-weight: 600;
+    font-size: 1.25rem;
+    margin-top: .75rem;
+    margin-bottom: .75rem;
     max-width: 25ch;
   }
 

website/src/components/Nav.astro

@@ -1,19 +1,33 @@
+---
+import Button from './Button.astro'
+---
 <nav class="NavBar">
   <div class="NavGroup NavGroup--left">
     <div class="NavMenuToggle">menu</div>
     <ul class="NavMenu">
       <li class="NavMenu__item">
-        <a class="NavMenu__link" href="">About</a>
+        <a class="NavMenu__link" href="#features">Features</a>
       </li>
       <li class="NavMenu__item">
-        <a class="NavMenu__link" href="">Help</a>
+        <a class="NavMenu__link" href="#download">Download</a>
       </li>
       <li class="NavMenu__item">
-        <a class="NavMenu__link" href="">Source Code</a>
+        <a class="NavMenu__link" href="#faqs">FAQs</a>
+      </li>
+      <li class="NavMenu__item">
+        <a class="NavMenu__link" href="#credits">Credits</a>
+      </li>
+      <li class="NavMenu__item">
+        <a class="NavMenu__link" href="/filehelp">Help</a>
       </li>
     </ul> 
   </div>
   <div class="NavGroup NavGroup--right">
+    <ul class="NavMenu">
+      <li class="NavMenu__item">
+        <a class="NavMenu__link" href="https://github.com/jaames/playnote-studio">Source Code</a>
+      </li>
+    </ul>
     <!-- <div class="NavItem LangMenu">
       <div class="LangMenu__button">
         <span class="LangMenu__label">English</span> v
@@ -94,7 +108,7 @@
 
   .NavMenu__item {
     margin-left: 16px;
-    font-weight: bold;
+    // font-weight: bold;
 
     @include breakpoint-phone-only {
       height: $navbar-height;

website/src/components/Player.astro

@@ -93,6 +93,7 @@ const pxSize = `${size}px`;
     height: 100%;
     position: absolute;
     z-index: 3;
+    image-rendering: pixelated;
   }
 
   .Demo__video {

website/src/demo/imports/frag.glsl

@@ -1,12 +1,51 @@
 varying vec2 v_uv;
 varying vec2 v_px;
-
 uniform sampler2D u_bgTex;
 uniform sampler2D u_frameTex;
 uniform bool u_showFrame;
 uniform float u_fadeLevel;
 uniform vec4 u_fadeColor;
 
+uniform vec2 u_texSize;
+
+// from http://www.java-gaming.org/index.php?topic=35123.0
+vec4 cubic(float v){
+  vec4 n = vec4(1.0, 2.0, 3.0, 4.0) - v;
+  vec4 s = n * n * n;
+  float x = s.x;
+  float y = s.y - 4.0 * s.x;
+  float z = s.z - 4.0 * s.y + 6.0 * s.x;
+  float w = 6.0 - x - y - z;
+  return vec4(x, y, z, w) * (1.0/6.0);
+}
+
+vec4 textureBicubic(sampler2D sampler, vec2 texCoords, vec2 texSize){
+  vec2 invTexSize = 1.0 / texSize;
+  texCoords = texCoords * texSize - 0.5;
+  vec2 fxy = fract(texCoords);
+  texCoords -= fxy;
+
+  vec4 xcubic = cubic(fxy.x);
+  vec4 ycubic = cubic(fxy.y);
+
+  vec4 c = texCoords.xxyy + vec2 (-0.5, +1.5).xyxy;
+
+  vec4 s = vec4(xcubic.xz + xcubic.yw, ycubic.xz + ycubic.yw);
+  vec4 offset = c + vec4 (xcubic.yw, ycubic.yw) / s;
+
+  offset *= invTexSize.xxyy;
+
+  vec4 sample0 = texture2D(sampler, offset.xz);
+  vec4 sample1 = texture2D(sampler, offset.yz);
+  vec4 sample2 = texture2D(sampler, offset.xw);
+  vec4 sample3 = texture2D(sampler, offset.yw);
+
+  float sx = s.x / (s.x + s.y);
+  float sy = s.z / (s.z + s.w);
+
+  return mix(mix(sample3, sample2, sx), mix(sample1, sample0, sx), sy);
+}
+
 // https://github.com/hughsk/glsl-dither/blob/master/8x8.glsl
 float dither8x8(vec2 position, float brightness) {
   int x = int(mod(position.x, 8.0));
@@ -85,7 +124,7 @@ float dither8x8(vec2 position, float brightness) {
 }
 
 void main() {
-  vec4 foreground = texture2D(u_frameTex, v_uv);
+  vec4 foreground = textureBicubic(u_frameTex, v_uv, u_texSize);
   vec4 background = texture2D(u_bgTex, v_uv);
   vec4 frameColor = foreground * foreground.a + background * (1.0 - foreground.a);
   if (!u_showFrame && u_fadeLevel > 0.0) {

website/src/demo/imports/index.ts

@@ -9,7 +9,8 @@ export {
   Uniform,
   DataTexture,
   TextureLoader,
-  LinearFilter
+  LinearFilter,
+  NearestFilter
 } from 'three';
 export { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 

website/src/demo/imports/vert.glsl

@@ -1,11 +1,11 @@
 varying vec2 v_uv; // uv coord
 varying vec2 v_px; // playdate pixel coord
 
-const float PLAYDATE_WIDTH = 400.0 / 2.0;
-const float PLAYDATE_HEIGHT = 240.0 / 2.0;
+uniform vec2 u_texSize;
+uniform vec2 u_screenSize;
 
 void main() {
   v_uv = uv;
-  v_px = vec2(uv.x * PLAYDATE_WIDTH, uv.y * PLAYDATE_HEIGHT);
+  v_px = vec2(uv.x * u_texSize.x, uv.y * u_texSize.y);
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 }

website/src/demo/player.ts

@@ -19,6 +19,7 @@ const {
   DataTexture,
   TextureLoader,
   LinearFilter,
+  NearestFilter,
   GLTFLoader,
   // shaders and such
   vertexShader,
@@ -157,6 +158,7 @@ overrideMaterials(gltf.scene, new ShaderMaterial({
     u_fadeLevel: fadeLevel,
     u_bgTex: new Uniform(screenTexture),
     u_frameTex: new Uniform(frameTexture),
+    u_texSize: new Uniform([PLAYDATE_WIDTH, PLAYDATE_HEIGHT]),
   }
 }));
 scene.add(gltf.scene);

website/src/layouts/BaseLayout.astro

@@ -0,0 +1,60 @@
+---
+import '../styles/global.scss';
+
+let title = 'Playnote Studio';
+let desc = 'An unofficial Flipnote animation player for the Panic Playdate';
+let websiteUrl = 'https://playnote.studio';
+let imageUrl = '';
+let faviconUrl = '';
+let imageWidth = '';
+let imageHeight = '';
+let imageAlt = '';
+let twitterHandle = '@rakujira';
+
+let locale = 'en';
+
+---
+<html lang={ locale }>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>{ title }</title>
+    <meta name="description" content={ desc }/>
+    <!-- facebook opengraph -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content={ websiteUrl }>
+    <meta property="og:title" content={ title }>
+    <meta property="og:description" content={ desc }>
+    <meta property="og:image" content={ imageUrl }>
+    <meta property="og:image:width" content={ imageWidth }>
+    <meta property="og:image:height" content={ imageHeight }>
+    <meta property="og:image:alt" content={ imageAlt }>
+    <meta property="og:site_name" content={ title }>
+    <meta property="og:locale" content={ locale }>
+    <!-- {altLocales} -->
+    <!-- twitter card -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content={ twitterHandle }>
+    <meta name="twitter:url" content={ websiteUrl }>
+    <meta name="twitter:title" content={ title }>
+    <meta name="twitter:description" content={ desc }>
+    <meta name="twitter:image" content={ imageUrl }>
+    <meta name="twitter:image:width" content={ imageWidth }>
+    <meta name="twitter:image:height" content={ imageHeight }>
+    <meta name="twitter:image:alt" content={ imageAlt }>
+    <!-- misc -->
+    <link rel="shortcut icon" href={ faviconUrl } type="image/png">
+    <meta name="format-detection" content="telephone=no">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;800" rel="stylesheet">
+  </head>
+  <body>
+    <main class="Content">
+      <slot/>
+    </main>
+    <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "19224d7a1dc44932ab159e5f8466b712"}'></script>
+  </body>
+</html>