Skip to content

Instantly share code, notes, and snippets.

View whoisryosuke's full-sized avatar
👾
Going deep with game development

Ryosuke whoisryosuke

👾
Going deep with game development
327 followers · 78 following
View GitHub Profile
@whoisryosuke
whoisryosuke / TwitchChatExamplePage.tsx
Created June 9, 2022 01:34
Twitch API + NextJS example. Requires OAuth secret key (see: https://dev.twitch.tv/docs/irc/get-started)
import { useState, useEffect } from "react"
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
// Example from Twitch API docs
// @see: https://dev.twitch.tv/docs/irc/get-started
import tmi from 'tmi.js';
// Define configuration options
@whoisryosuke
whoisryosuke / Box.tsx
Created May 27, 2022 02:04
Shader / GLSL / OpenGL - Inner border fragment shader (better version with lighter grid inside). Resembles a "prototype" box for "grid"-like level debugging in game development.
import * as THREE from 'three'
import { useFrame, extend, MeshProps } from '@react-three/fiber'
import { useRef, useState } from 'react'
import useStore from '@/helpers/store'
import { shaderMaterial } from '@react-three/drei'
import { Color, Mesh } from "three"
import vertex from './glsl/shader.vert'
import fragment from './glsl/shader.frag'
@whoisryosuke
whoisryosuke / Box.tsx
Created May 27, 2022 00:24
Shader / GLSL / OpenGL - Inner border fragment shader. Resembles a "prototype" box for "grid"-like level debugging in game development.
import * as THREE from 'three'
import { useFrame, extend } from '@react-three/fiber'
import { useRef, useState } from 'react'
import useStore from '@/helpers/store'
import { shaderMaterial } from '@react-three/drei'
import { Mesh } from "three"
import vertex from './glsl/shader.vert'
import fragment from './glsl/shader.frag'
@whoisryosuke
whoisryosuke / border.frag
Created May 27, 2022 00:17
Shader / GLSL / OpenGL - Inner border fragment shader - only border color (not inside)
uniform vec3 color;
uniform float borderWidth;
varying vec2 vUv;
void main() {
// We basically go through the X and Y values to see if they're less than the threshold
// UV goes from 0 to 1, so as X travels from 0 to 1
// we "limit" the color to when X is less than the borderWidth
@whoisryosuke
whoisryosuke / vscode-recommended-extensions.md
Created May 18, 2022 19:44
VSCode - Workspace - Recommended Extensions -- via: https://dev.to/askrishnapravin/recommend-vs-code-extensions-to-your-future-teammates-4gkb
@whoisryosuke
whoisryosuke / whoisryosuke-v1.osm.json
Created May 17, 2022 19:24
Oh My Posh - My Custom Theme (based on powerlevel10k + night-owl)
{
"$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
"blocks": [
{
"alignment": "left",
"segments": [
{
"background": "#ffffff",
"foreground": "#000000",
"leading_diamond": "",
@whoisryosuke
whoisryosuke / index.html
Last active April 30, 2022 00:31
JS - Simulate keyboard events declaratively using the KeyboardEvent API - @see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent -- @example: https://stackoverflow.com/a/11885974 --- DOES NOT WORK WITH TAB!: https://stackoverflow.com/questions/1601593/fire-tab-keypress-event-in-javascript
<div id="output" style="background:green;min-height:40px">
</div>
@whoisryosuke
whoisryosuke / useKeyPress.tsx
Last active April 27, 2022 20:33
React - useKeyPress hook modified with pressed / down / up callbacks - see example: https://codesandbox.io/s/r3f-gamepad-and-keyboard-input-in-component-usekeypress-method-clsbsv?file=/src/hooks/useKeyPress.tsx
import { useEffect, useState } from "react"
// Modified the useKeyPress from useHooks: https://usehooks.com/useKeyPress/
// Takes a `pressMethod` that will run continuously "every frame" (1/60 second - not locked tho)
// And also accepts a `downMethod` and `upMethod` for a single call
// And still returns a simple true/false for the keypress for convenience/use in React
// Ideally all the methods should be an properties of 1 object so user doesn't have to set noop functions to get deeper params
export default function useKeyPress(targetKey: string, pressMethod?: () => void, downMethod?: () => void, upMethod?: () => void): boolean {
// State for keeping track of whether key is pressed
const [keyPressed, setKeyPressed] = useState(false)
@whoisryosuke
whoisryosuke / platform-check.js
Created December 29, 2021 19:28
JS - Check user platform OS - client side / frontend only - https://stackoverflow.com/a/19176790
var OSName = "Unknown";
if (window.navigator.userAgent.indexOf("Windows NT 10.0")!= -1) OSName="Windows 10";
if (window.navigator.userAgent.indexOf("Windows NT 6.3") != -1) OSName="Windows 8.1";
if (window.navigator.userAgent.indexOf("Windows NT 6.2") != -1) OSName="Windows 8";
if (window.navigator.userAgent.indexOf("Windows NT 6.1") != -1) OSName="Windows 7";
if (window.navigator.userAgent.indexOf("Windows NT 6.0") != -1) OSName="Windows Vista";
if (window.navigator.userAgent.indexOf("Windows NT 5.1") != -1) OSName="Windows XP";
if (window.navigator.userAgent.indexOf("Windows NT 5.0") != -1) OSName="Windows 2000";
if (window.navigator.userAgent.indexOf("Mac") != -1) OSName="Mac/iOS";
if (window.navigator.userAgent.indexOf("X11") != -1) OSName="UNIX";
@whoisryosuke
whoisryosuke / index.html
Created December 28, 2021 19:31 — forked from vhashimotoo/index.html
Dialog Invoke Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dialog Example</title>
</head>
<body>
<h1>Dialog Example</h1>
<button id="execute-dialog">Click to show dialog</button>