ChrisCrossCrash

import React, {useEffect, useRef} from 'react'
import {gsap} from 'gsap'
import {ScrollTrigger} from 'gsap/ScrollTrigger'
import Img from 'gatsby-image'

gsap.registerPlugin(ScrollTrigger)

const ParallaxBG = (props) => {

  const bgRef = useRef(null)

ChrisCrossCrash

/* React contact form with Formik, Yup, and Tailwind CSS

Copyright 2021 Christopher Kumm

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:

ChrisCrossCrash

import * as React from 'react'
import {useEffect} from 'react'

type Jsonable = null | boolean | number | string | Jsonable[] | { [prop: string]: Jsonable }

export const useLocalStorage = <T extends Jsonable>(
  key: string,
  initialValue: T | (() => T),
) => {
  const [value, setValue] = React.useState(() => {

ChrisCrossCrash

from time import sleep
from typing import Union
from ctypes import Structure, windll, c_uint, sizeof, byref


class IdleWatcher:
    """Used for instancing 'idle watchers', which handle the
     user going idle or becoming active after a set amount of time."""
    def __init__(self, timeout_seconds: Union[int, float]):
        self.timeout_seconds = timeout_seconds

ChrisCrossCrash

import requests
import json
from functools import wraps

from django.conf import settings
from rest_framework.exceptions import PermissionDenied


def ip_is_abusive(ip_addr: str, api_key: str, threshold: int = 50) -> bool:
    """Check if the given IP has an abuse confidence score greater than the given threshold percentage."""

ChrisCrossCrash

/** Shows the current width breakpont on the screen. */
export const SizeUtil = () => {
  if (process.env.NODE_ENV === 'development') {
    return (
      <div className='fixed-top m-3'>
        <div
          className='d-inline d-sm-none p-2 fw-bold'
          style={{ background: 'red' }}
        >
          xs

ChrisCrossCrash

Initial setup

1. Set up a new Next JS app with TypeScript (docs):

   yarn create next-app --typescript
   

VS Code Settings

Copy and paste these settings into the project's .vscode directory:

ChrisCrossCrash

/** Get the equivalent of 100vh, which is not always the same as window.innerHeight (see article linked in JSDoc comment)
 *
 * https://developers.google.com/web/updates/2016/12/url-bar-resizing
 *
 * You'll also need to put this in the top-level of the `body` element:
 * ```html
 * <!-- See: `getFullVh()` -->
 * <div style="overflow: hidden; height: 0">
 *   <div id="measure-vh" style="position: fixed; height: 100vh"></div>
 * </div>

ChrisCrossCrash

# To add this to the project's Git config, execute the following:
# git config blame.ignoreRevsFile .git-blame-ignore-revs

# Migrate code style to Black
b763d7220ffbd5638cf67fa4cc7d75458df55055

# pre-commit initial run
2f3e47841be596e503c599cd31621aac8d5bc1cf

ChrisCrossCrash

We need a custom implementation of PointerLockControls.js so we can set the mouse sensitivity (using lookSens)

// CustomThreePLControls.js
import { Euler, EventDispatcher, Vector3 } from 'three'

const _euler = new Euler(0, 0, 0, 'YXZ')
const _vector = new Vector3()

const _changeEvent = { type: 'change' }