Compare commits
1 Commits
9414b936c7
...
510cbe053b
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
510cbe053b |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
@ -16,18 +16,15 @@ function App() {
|
||||
const [token, setToken] = useState<string>(
|
||||
localStorage.getItem("token") || ""
|
||||
);
|
||||
const [theme, setTheme] = useState<string>("default");
|
||||
const [isShaderTheme, setIsShaderTheme] = useState(false);
|
||||
const [isShaderTheme, setIsShaderTheme] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (theme !== "default") {
|
||||
if (isShaderTheme) {
|
||||
document.body.classList.add("shader-theme");
|
||||
setIsShaderTheme(true);
|
||||
} else {
|
||||
document.body.classList.remove("shader-theme");
|
||||
setIsShaderTheme(false);
|
||||
}
|
||||
}, [theme]);
|
||||
}, [isShaderTheme]);
|
||||
|
||||
const fetchPeople = () => {
|
||||
if (!token) return;
|
||||
@ -79,13 +76,15 @@ function App() {
|
||||
<button onClick={handleLogout} className="btn-secondary">
|
||||
Logout
|
||||
</button>
|
||||
<select value={theme} onChange={(e) => setTheme(e.target.value)}>
|
||||
<option value="default">Default Theme</option>
|
||||
<option value="blackhole">Blackhole Theme</option>
|
||||
<option value="star">Star Theme</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => setIsShaderTheme(!isShaderTheme)}
|
||||
className="btn-secondary"
|
||||
style={{ marginLeft: "1rem" }}
|
||||
>
|
||||
{isShaderTheme ? "Normal Theme" : "Shader Theme"}
|
||||
</button>
|
||||
</div>
|
||||
{isShaderTheme && <ShaderBackground theme= {theme} />}
|
||||
{isShaderTheme && <ShaderBackground />}
|
||||
<Routes>
|
||||
<Route path="/" element={<PersonList people={people} />} />
|
||||
<Route path="/games" element={<GameList />} />
|
||||
|
||||
@ -12,9 +12,6 @@ export function GameFilter() {
|
||||
const [people, setPeople] = useState<Person[]>([]);
|
||||
const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
|
||||
const [filteredGames, setFilteredGames] = useState<string[]>([]);
|
||||
const [gameToPositive, setGameToPositive] = useState<
|
||||
Map<string, Set<string>>
|
||||
>(new Map());
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const [metaData, _setMetaData] = useState<{ [key: string]: GameProto }>({});
|
||||
|
||||
@ -30,7 +27,6 @@ export function GameFilter() {
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedPeople.size === 0) {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setFilteredGames([]);
|
||||
return;
|
||||
}
|
||||
@ -43,31 +39,22 @@ export function GameFilter() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a map of game -> set of people who would not play it
|
||||
const gameToNegative = new Map<string, Set<string>>();
|
||||
const gameToPositiveOpinion = new Map<string, Set<string>>();
|
||||
// Create a map of game -> set of people who would play it
|
||||
const gameToPlayers = new Map<string, Set<string>>();
|
||||
|
||||
selectedPersons.forEach((person) => {
|
||||
person.opinion.forEach((op) => {
|
||||
if (!gameToNegative.has(op.title)) {
|
||||
gameToNegative.set(op.title, new Set());
|
||||
}
|
||||
if (!gameToPositiveOpinion.has(op.title)) {
|
||||
gameToPositiveOpinion.set(op.title, new Set());
|
||||
if (!gameToPlayers.has(op.title)) {
|
||||
gameToPlayers.set(op.title, new Set());
|
||||
}
|
||||
if (!op.wouldPlay) {
|
||||
gameToNegative.get(op.title)!.add(person.name);
|
||||
}
|
||||
if (op.wouldPlay) {
|
||||
gameToPositiveOpinion.get(op.title)!.add(person.name);
|
||||
gameToPlayers.get(op.title)!.add(person.name);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setGameToPositive(gameToPositiveOpinion);
|
||||
|
||||
// Filter games where ALL selected people would play
|
||||
const game_titles = Array.from(gameToNegative.entries())
|
||||
const game_titles = Array.from(gameToPlayers.entries())
|
||||
.filter(([, players]) => players.size === 0)
|
||||
.map(([game]) => game);
|
||||
|
||||
@ -182,21 +169,8 @@ export function GameFilter() {
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
✓ {gameToPositive.get(game)!.size} selected would play
|
||||
✓ All {selectedPeople.size} selected would play
|
||||
</div>
|
||||
{selectedPeople.size - gameToPositive.get(game)!.size >
|
||||
0 && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.9em",
|
||||
color: "#d4d400",
|
||||
marginTop: "0.3rem",
|
||||
}}
|
||||
>
|
||||
? {selectedPeople.size - gameToPositive.get(game)!.size}{" "}
|
||||
{(selectedPeople.size - gameToPositive.get(game)!.size) > 1 ? "are" : "is"} neutral
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<GameImage game={game} />
|
||||
</Link>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
import BLACKHOLE_SHADER_CODE from "./assets/blackhole.glsl?raw";
|
||||
import STAR_SHADER_CODE from "./assets/star.glsl?raw";
|
||||
import SHADER_CODE from "./assets/shader.glsl?raw";
|
||||
|
||||
function buildProgram(
|
||||
ctx: WebGL2RenderingContext,
|
||||
@ -113,11 +112,8 @@ function isPowerOf2(value: number) {
|
||||
return (value & (value - 1)) === 0;
|
||||
}
|
||||
|
||||
type ShaderBackgroundProps = {
|
||||
theme: string;
|
||||
};
|
||||
|
||||
export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({ theme }) => {
|
||||
export const ShaderBackground = () => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@ -131,25 +127,12 @@ export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({ theme }) =>
|
||||
gl.clearColor(0, 0, 0, 1);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
let shader_code;
|
||||
switch (theme) {
|
||||
case "blackhole":
|
||||
shader_code = BLACKHOLE_SHADER_CODE;
|
||||
break;
|
||||
case "star":
|
||||
shader_code = STAR_SHADER_CODE;
|
||||
break;
|
||||
default:
|
||||
console.error("Unknown shader theme:", theme);
|
||||
return;
|
||||
}
|
||||
|
||||
const shader = buildShader(gl, gl.FRAGMENT_SHADER, shader_code);
|
||||
const shader = buildShader(gl, gl.FRAGMENT_SHADER, SHADER_CODE);
|
||||
const vertexShader = buildShader(
|
||||
gl,
|
||||
gl.VERTEX_SHADER,
|
||||
`#version 300 es
|
||||
precision highp float;
|
||||
precision lowp float;
|
||||
|
||||
in vec2 a_position;
|
||||
|
||||
@ -189,7 +172,7 @@ export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({ theme }) =>
|
||||
|
||||
const final_iChannel1 = gl.getUniformLocation(finalProgram, "iChannel1");
|
||||
|
||||
const ichannel1_texture = loadTexture(gl, "assets/small_noise.png");
|
||||
const ichannel1_texture = loadTexture(gl, "assets/ichannel1.png");
|
||||
|
||||
gl!.viewport(0, 0, canvas!.width, canvas!.height);
|
||||
|
||||
@ -203,7 +186,7 @@ export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({ theme }) =>
|
||||
|
||||
function update(now: number) {
|
||||
// time in seconds
|
||||
const time = now / 1000;
|
||||
const time = (now) / 1000;
|
||||
gl!.clear(gl!.COLOR_BUFFER_BIT);
|
||||
|
||||
setTime(finalProgram!, time);
|
||||
@ -214,7 +197,7 @@ export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({ theme }) =>
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
}, [theme]);
|
||||
});
|
||||
|
||||
return (
|
||||
<canvas
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
#version 300 es
|
||||
precision highp float;
|
||||
precision mediump float;
|
||||
uniform vec3 iResolution;
|
||||
uniform float iTime;
|
||||
uniform sampler2D iChannel1;
|
||||
@ -1,200 +0,0 @@
|
||||
#version 300 es
|
||||
precision highp float;
|
||||
uniform vec3 iResolution;
|
||||
uniform float iTime;
|
||||
|
||||
out vec4 FragColor;
|
||||
|
||||
// mix noise for alive animation, full source
|
||||
vec4 hash4(vec4 n) {
|
||||
return fract(sin(n) * 1399763.5453123f);
|
||||
}
|
||||
vec3 hash3(vec3 n) {
|
||||
return fract(sin(n) * 1399763.5453123f);
|
||||
}
|
||||
vec3 hpos(vec3 n) {
|
||||
return hash3(vec3(dot(n, vec3(157.0f, 113.0f, 271.0f)), dot(n, vec3(271.0f, 157.0f, 113.0f)), dot(n, vec3(113.0f, 271.0f, 157.0f))));
|
||||
}
|
||||
|
||||
float noise4q(vec4 x) {
|
||||
vec4 n3 = vec4(0, 0.25f, 0.5f, 0.75f);
|
||||
vec4 p2 = floor(x.wwww + n3);
|
||||
vec4 b = floor(x.xxxx + n3) + floor(x.yyyy + n3) * 157.0f + floor(x.zzzz + n3) * 113.0f;
|
||||
vec4 p1 = b + fract(p2 * 0.00390625f) * vec4(164352.0f, -164352.0f, 163840.0f, -163840.0f);
|
||||
p2 = b + fract((p2 + 1.0f) * 0.00390625f) * vec4(164352.0f, -164352.0f, 163840.0f, -163840.0f);
|
||||
vec4 f1 = fract(x.xxxx + n3);
|
||||
vec4 f2 = fract(x.yyyy + n3);
|
||||
f1 = f1 * f1 * (3.0f - 2.0f * f1);
|
||||
f2 = f2 * f2 * (3.0f - 2.0f * f2);
|
||||
vec4 n1 = vec4(0, 1.0f, 157.0f, 158.0f);
|
||||
vec4 n2 = vec4(113.0f, 114.0f, 270.0f, 271.0f);
|
||||
vec4 vs1 = mix(hash4(p1), hash4(n1.yyyy + p1), f1);
|
||||
vec4 vs2 = mix(hash4(n1.zzzz + p1), hash4(n1.wwww + p1), f1);
|
||||
vec4 vs3 = mix(hash4(p2), hash4(n1.yyyy + p2), f1);
|
||||
vec4 vs4 = mix(hash4(n1.zzzz + p2), hash4(n1.wwww + p2), f1);
|
||||
vs1 = mix(vs1, vs2, f2);
|
||||
vs3 = mix(vs3, vs4, f2);
|
||||
vs2 = mix(hash4(n2.xxxx + p1), hash4(n2.yyyy + p1), f1);
|
||||
vs4 = mix(hash4(n2.zzzz + p1), hash4(n2.wwww + p1), f1);
|
||||
vs2 = mix(vs2, vs4, f2);
|
||||
vs4 = mix(hash4(n2.xxxx + p2), hash4(n2.yyyy + p2), f1);
|
||||
vec4 vs5 = mix(hash4(n2.zzzz + p2), hash4(n2.wwww + p2), f1);
|
||||
vs4 = mix(vs4, vs5, f2);
|
||||
f1 = fract(x.zzzz + n3);
|
||||
f2 = fract(x.wwww + n3);
|
||||
f1 = f1 * f1 * (3.0f - 2.0f * f1);
|
||||
f2 = f2 * f2 * (3.0f - 2.0f * f2);
|
||||
vs1 = mix(vs1, vs2, f1);
|
||||
vs3 = mix(vs3, vs4, f1);
|
||||
vs1 = mix(vs1, vs3, f2);
|
||||
float r = dot(vs1, vec4(0.25f));
|
||||
|
||||
return r * r * (3.0f - 2.0f * r);
|
||||
}
|
||||
|
||||
// body of a star
|
||||
float noiseSpere(vec3 ray, vec3 pos, float r, mat3 mr, float zoom, vec3 subnoise, float anim) {
|
||||
float b = dot(ray, pos);
|
||||
float c = dot(pos, pos) - b * b;
|
||||
|
||||
vec3 r1 = vec3(0.0f);
|
||||
|
||||
float s = 0.0f;
|
||||
float d = 0.03125f;
|
||||
float d2 = zoom / (d * d);
|
||||
float ar = 5.0f;
|
||||
|
||||
for(int i = 0; i < 3; i++) {
|
||||
float rq = r * r;
|
||||
if(c < rq) {
|
||||
float l1 = sqrt(rq - c);
|
||||
r1 = ray * (b - l1) - pos;
|
||||
r1 = r1 * mr;
|
||||
s += abs(noise4q(vec4(r1 * d2 + subnoise * ar, anim * ar)) * d);
|
||||
}
|
||||
ar -= 2.0f;
|
||||
d *= 4.0f;
|
||||
d2 *= 0.0625f;
|
||||
r = r - r * 0.02f;
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
// glow ring
|
||||
float ring(vec3 ray, vec3 pos, float r, float size) {
|
||||
float b = dot(ray, pos);
|
||||
float c = dot(pos, pos) - b * b;
|
||||
|
||||
float s = max(0.0f, (1.0f - size * abs(r - sqrt(c))));
|
||||
|
||||
return s;
|
||||
}
|
||||
|
||||
// rays of a star
|
||||
float ringRayNoise(vec3 ray, vec3 pos, float r, float size, mat3 mr, float anim) {
|
||||
float b = dot(ray, pos);
|
||||
vec3 pr = ray * b - pos;
|
||||
|
||||
float c = length(pr);
|
||||
|
||||
pr *= mr;
|
||||
|
||||
pr = normalize(pr);
|
||||
|
||||
float s = max(0.0f, (1.0f - size * abs(r - c)));
|
||||
|
||||
float nd = noise4q(vec4(pr * 1.0f, -anim + c)) * 2.0f;
|
||||
nd = pow(nd, 2.0f);
|
||||
float n = 0.4f;
|
||||
float ns = 1.0f;
|
||||
if(c > r) {
|
||||
n = noise4q(vec4(pr * 10.0f, -anim + c));
|
||||
ns = noise4q(vec4(pr * 50.0f, -anim * 2.5f + c * 2.0f)) * 2.0f;
|
||||
}
|
||||
n = n * n * nd * ns;
|
||||
|
||||
return pow(s, 4.0f) + s * s * n;
|
||||
}
|
||||
|
||||
vec4 noiseSpace(vec3 ray, vec3 pos, float r, mat3 mr, float zoom, vec3 subnoise, float anim) {
|
||||
float b = dot(ray, pos);
|
||||
float c = dot(pos, pos) - b * b;
|
||||
|
||||
vec3 r1 = vec3(0.0f);
|
||||
|
||||
float s = 0.0f;
|
||||
float d = 0.0625f * 1.5f;
|
||||
float d2 = zoom / d;
|
||||
|
||||
float rq = r * r;
|
||||
float l1 = sqrt(abs(rq - c));
|
||||
r1 = (ray * (b - l1) - pos) * mr;
|
||||
|
||||
r1 *= d2;
|
||||
s += abs(noise4q(vec4(r1 + subnoise, anim)) * d);
|
||||
s += abs(noise4q(vec4(r1 * 0.5f + subnoise, anim)) * d * 2.0f);
|
||||
s += abs(noise4q(vec4(r1 * 0.25f + subnoise, anim)) * d * 4.0f);
|
||||
//return s;
|
||||
return vec4(s * 2.0f, abs(noise4q(vec4(r1 * 0.1f + subnoise, anim))), abs(noise4q(vec4(r1 * 0.1f + subnoise * 6.0f, anim))), abs(noise4q(vec4(r1 * 0.1f + subnoise * 13.0f, anim))));
|
||||
}
|
||||
|
||||
float sphereZero(vec3 ray, vec3 pos, float r) {
|
||||
float b = dot(ray, pos);
|
||||
float c = dot(pos, pos) - b * b;
|
||||
float s = 1.0f;
|
||||
if(c < r * r)
|
||||
s = 0.0f;
|
||||
return s;
|
||||
}
|
||||
|
||||
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
||||
vec2 p = (-iResolution.xy + 2.0f * fragCoord.xy) / iResolution.y;
|
||||
|
||||
float time = iTime * 1.0f;
|
||||
|
||||
float mx = time * 0.025f;
|
||||
float my = -0.6f;
|
||||
vec2 rotate = vec2(mx, my);
|
||||
|
||||
vec2 sins = sin(rotate);
|
||||
vec2 coss = cos(rotate);
|
||||
mat3 mr = mat3(vec3(coss.x, 0.0f, sins.x), vec3(0.0f, 1.0f, 0.0f), vec3(-sins.x, 0.0f, coss.x));
|
||||
mr = mat3(vec3(1.0f, 0.0f, 0.0f), vec3(0.0f, coss.y, sins.y), vec3(0.0f, -sins.y, coss.y)) * mr;
|
||||
|
||||
mat3 imr = mat3(vec3(coss.x, 0.0f, -sins.x), vec3(0.0f, 1.0f, 0.0f), vec3(sins.x, 0.0f, coss.x));
|
||||
imr = imr * mat3(vec3(1.0f, 0.0f, 0.0f), vec3(0.0f, coss.y, -sins.y), vec3(0.0f, sins.y, coss.y));
|
||||
|
||||
vec3 ray = normalize(vec3(p, 2.0f));
|
||||
vec3 pos = vec3(0.0f, 0.0f, 3.0f);
|
||||
|
||||
float s1 = noiseSpere(ray, pos, 1.0f, mr, 0.5f, vec3(0.0f), time);
|
||||
s1 = pow(min(1.0f, s1 * 2.4f), 2.0f);
|
||||
float s2 = noiseSpere(ray, pos, 1.0f, mr, 4.0f, vec3(83.23f, 34.34f, 67.453f), time);
|
||||
s2 = min(1.0f, s2 * 2.2f);
|
||||
fragColor = vec4(mix(vec3(1.0f, 1.0f, 0.0f), vec3(1.0f), pow(s1, 60.0f)) * s1, 1.0f);
|
||||
fragColor += vec4(mix(mix(vec3(1.0f, 0.0f, 0.0f), vec3(1.0f, 0.0f, 1.0f), pow(s2, 2.0f)), vec3(1.0f), pow(s2, 10.0f)) * s2, 1.0f);
|
||||
|
||||
fragColor.xyz -= vec3(ring(ray, pos, 1.03f, 11.0f)) * 2.0f;
|
||||
fragColor = max(vec4(0.0f), fragColor);
|
||||
|
||||
float s3 = ringRayNoise(ray, pos, 0.96f, 1.0f, mr, time);
|
||||
fragColor.xyz += mix(vec3(1.0f, 0.6f, 0.1f), vec3(1.0f, 0.95f, 1.0f), pow(s3, 3.0f)) * s3;
|
||||
|
||||
float zero = sphereZero(ray, pos, 0.9f);
|
||||
if(zero > 0.0f) {
|
||||
|
||||
vec4 s4 = noiseSpace(ray, pos, 100.0f, mr, 0.05f, vec3(1.0f, 2.0f, 4.0f), 0.0f);
|
||||
|
||||
s4.x = pow(s4.x, 3.0f);
|
||||
|
||||
fragColor.xyz += mix(mix(vec3(1.0f, 0.0f, 0.0f), vec3(0.0f, 0.0f, 1.0f), s4.y * 1.9f), vec3(0.9f, 1.0f, 0.1f), s4.w * 0.75f) * s4.x * pow(s4.z * 2.5f, 3.0f) * 0.2f * zero;
|
||||
|
||||
}
|
||||
|
||||
fragColor = max(vec4(0.0f), fragColor);
|
||||
fragColor = min(vec4(1.0f), fragColor);
|
||||
}
|
||||
|
||||
void main() {
|
||||
mainImage(FragColor, gl_FragCoord.xy);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user