Skip to content

Commit

Permalink
Merge pull request #359 from Zekiah-A/main
Browse files Browse the repository at this point in the history 
BIG: Loading screen display server disconnect message, flesh out :help command with live chat help page, semantic HTML fixes, WIP: Start reimplementing posts account dialog and logic
  • Loading branch information
@Zekiah-A
Zekiah-A authored Nov 20, 2024
2 parents dc4993c + 3061e95 commit db5b8bc
Show file tree
Hide file tree
Showing 12 changed files with 1,790 additions and 1,617 deletions.
10 changes: 5 additions & 5 deletions august21-event.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ const eventDate = 1724238000000
//popup.showModal()

setInterval(() => {
august21PopupTimer.textContent = ` (${toCountdownString(eventDate)})`
august21PopupTimer.textContent = ` (${toCountdownString(eventDate)})`
}, 1000)

startCountDown(eventDate, false).then((async) => {
august21PopupTimer.style.display = "none"
// TODO: Reimplement on game release
august21PopupLabel.style.display = "none"
august21PopupButton.style.display = "flex"
august21PopupTimer.style.display = "none"
// TODO: Reimplement on game release
august21PopupLabel.style.display = "none"
august21PopupButton.style.display = "flex"
})
258 changes: 129 additions & 129 deletions captcha-canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,151 +2,151 @@
let captchaCanvasHandle = null

function updateImgCaptchaCanvas(imageData) {
const ctx = setTargetCanvas(captchaCanvas)
const patternImg = Texture().fromSrc("./images/pattern.png", _, REPEAT | MIPMAPS | UPSCALE_PIXELATED)
const img = Texture()
img.from(imageData, _, MIPMAPS)
const ctx = setTargetCanvas(captchaCanvas)
const patternImg = Texture().fromSrc("./images/pattern.png", _, REPEAT | MIPMAPS | UPSCALE_PIXELATED)
const img = Texture()
img.from(imageData, _, MIPMAPS)

const cornerShader = Shader(`
void main()
{
float u_radius = 0.02;
vec3 u_colour = u.rgb;
float u_edgeFeather = 0.002;
vec2 rectSize = vec2(0.9, 0.9);
const cornerShader = Shader(`
void main()
{
float u_radius = 0.02;
vec3 u_colour = u.rgb;
float u_edgeFeather = 0.002;
vec2 rectSize = vec2(0.9, 0.9);
vec2 fragCoordNorm = abs(uv.xy - 0.5);
float distance = length(max(fragCoordNorm - rectSize * 0.5 + u_radius, 0.0)) - u_radius;
float alpha = 1.0 - smoothstep(u_radius - u_edgeFeather, u_radius + u_edgeFeather, distance) *
smoothstep(0.0 - u_edgeFeather, 0.0 + u_edgeFeather, length(fragCoordNorm - 0.5 * rectSize));
vec2 fragCoordNorm = abs(uv.xy - 0.5);
float distance = length(max(fragCoordNorm - rectSize * 0.5 + u_radius, 0.0)) - u_radius;
float alpha = 1.0 - smoothstep(u_radius - u_edgeFeather, u_radius + u_edgeFeather, distance) *
smoothstep(0.0 - u_edgeFeather, 0.0 + u_edgeFeather, length(fragCoordNorm - 0.5 * rectSize));
color = vec4(u_colour * alpha, alpha);
}
`)
const cornerTextureShader = Shader(`
void main()
{
float u_radius = 0.02;
vec3 u_colour = texture(tex0, uv.xy).rgb;
float u_edgeFeather = 0.002;
vec2 rectSize = vec2(0.9, 0.9);
color = vec4(u_colour * alpha, alpha);
}
`)
const cornerTextureShader = Shader(`
void main()
{
float u_radius = 0.02;
vec3 u_colour = texture(tex0, uv.xy).rgb;
float u_edgeFeather = 0.002;
vec2 rectSize = vec2(0.9, 0.9);
vec2 fragCoordNorm = abs(uv.xy - 0.5);
float distance = length(max(fragCoordNorm - rectSize * 0.5 + u_radius, 0.0)) - u_radius;
float alpha = 1.0 - smoothstep(u_radius - u_edgeFeather, u_radius + u_edgeFeather, distance) *
smoothstep(0.0 - u_edgeFeather, 0.0 + u_edgeFeather, length(fragCoordNorm - 0.5 * rectSize));
vec2 fragCoordNorm = abs(uv.xy - 0.5);
float distance = length(max(fragCoordNorm - rectSize * 0.5 + u_radius, 0.0)) - u_radius;
float alpha = 1.0 - smoothstep(u_radius - u_edgeFeather, u_radius + u_edgeFeather, distance) *
smoothstep(0.0 - u_edgeFeather, 0.0 + u_edgeFeather, length(fragCoordNorm - 0.5 * rectSize));
color = vec4(u_colour * alpha, alpha);
}
`)
function cubicBezier(t, initial, p1, p2, final) {
return ((1 - t) * (1 - t) * (1 - t) * initial
+ 3 * (1 - t) * (1 - t) * t * p1
+ 3 * (1 - t) * t * t * p2
+ t * t * t * final)
}
function ease(start, end, weight) {
return start + (end - start) * cubicBezier(weight, 0, 1.1, 0.2, 1);
}
function drawCaptcha() {
if (captchaCanvasHandle === null) {
return
}
captchaCanvas.width = captchaPopup.offsetWidth
captchaCanvas.height = captchaPopup.offsetHeight
const now = performance.now()
const hRatio = captchaCanvas.width / captchaCanvas.height
color = vec4(u_colour * alpha, alpha);
}
`)
function cubicBezier(t, initial, p1, p2, final) {
return ((1 - t) * (1 - t) * (1 - t) * initial
+ 3 * (1 - t) * (1 - t) * t * p1
+ 3 * (1 - t) * t * t * p2
+ t * t * t * final)
}
function ease(start, end, weight) {
return start + (end - start) * cubicBezier(weight, 0, 1.1, 0.2, 1);
}
function drawCaptcha() {
if (captchaCanvasHandle === null) {
return
}
captchaCanvas.width = captchaPopup.offsetWidth
captchaCanvas.height = captchaPopup.offsetHeight
const now = performance.now()
const hRatio = captchaCanvas.width / captchaCanvas.height

const patternTexSize = 64
const scaleX = patternTexSize / captchaCanvas.width
const scaleY = patternTexSize / captchaCanvas.height
const patternRepeatsX = 12
const patternRepeatsY = 16
const patternTexSize = 64
const scaleX = patternTexSize / captchaCanvas.width
const scaleY = patternTexSize / captchaCanvas.height
const patternRepeatsX = 12
const patternRepeatsY = 16

const weight = (now / 2200) % 1
const shift = ease(0, patternTexSize, weight)
const patternMesh = Mesh()
patternMesh.translate(shift / captchaCanvas.width - scaleX, -shift / captchaCanvas.height)
patternMesh.addRect(0, 0, scaleX * patternRepeatsX, scaleY * patternRepeatsY,
uv(0, 0, patternRepeatsX, patternRepeatsY), _, 1, 1, 1, 0.96)
ctx.draw(patternMesh, patternImg)
const weight = (now / 2200) % 1
const shift = ease(0, patternTexSize, weight)
const patternMesh = Mesh()
patternMesh.translate(shift / captchaCanvas.width - scaleX, -shift / captchaCanvas.height)
patternMesh.addRect(0, 0, scaleX * patternRepeatsX, scaleY * patternRepeatsY,
uv(0, 0, patternRepeatsX, patternRepeatsY), _, 1, 1, 1, 0.96)
ctx.draw(patternMesh, patternImg)

const imgSize = 210
const imgWidth = imgSize / captchaCanvas.width
const imgHeight = imgWidth * hRatio
const imageX = 0.5 - imgWidth * 0.5
const imgBotttom = captchaImagePositon.offsetTop + captchaImagePositon.offsetHeight
const imageY = (captchaCanvas.height - imgBotttom) / captchaCanvas.height
const imgSize = 210
const imgWidth = imgSize / captchaCanvas.width
const imgHeight = imgWidth * hRatio
const imageX = 0.5 - imgWidth * 0.5
const imgBotttom = captchaImagePositon.offsetTop + captchaImagePositon.offsetHeight
const imageY = (captchaCanvas.height - imgBotttom) / captchaCanvas.height

let prevShader = ctx.useShader(cornerShader)
ctx.setU(0.6, 0.6, 0.6, 1.0)
const borderSize = 1
const borderWidth = borderSize / captchaCanvas.width
const bx = imageX - borderWidth
const by = imageY - (borderWidth * hRatio)
const bw = imgWidth + (borderWidth * 2)
const bh = imgHeight + (borderWidth * hRatio * 2)
const borderMesh = Mesh.singleRect(bx, by, bw, bh)
ctx.draw(borderMesh)
ctx.useShader(prevShader)
let prevShader = ctx.useShader(cornerShader)
ctx.setU(0.6, 0.6, 0.6, 1.0)
const borderSize = 1
const borderWidth = borderSize / captchaCanvas.width
const bx = imageX - borderWidth
const by = imageY - (borderWidth * hRatio)
const bw = imgWidth + (borderWidth * 2)
const bh = imgHeight + (borderWidth * hRatio * 2)
const borderMesh = Mesh.singleRect(bx, by, bw, bh)
ctx.draw(borderMesh)
ctx.useShader(prevShader)

prevShader = ctx.useShader(cornerTextureShader)
const imgMesh = Mesh.singleRect(imageX, imageY, imgWidth, imgHeight)
ctx.draw(imgMesh, img)
ctx.useShader(prevShader)
prevShader = ctx.useShader(cornerTextureShader)
const imgMesh = Mesh.singleRect(imageX, imageY, imgWidth, imgHeight)
ctx.draw(imgMesh, img)
ctx.useShader(prevShader)

captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
}
captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
}
captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
}

function updateImgCaptchaCanvasFallback(imageData) {
const ctx = captchaCanvas.getContext("2d")
captchaCanvas.width = captchaPopup.offsetWidth
captchaCanvas.height = captchaPopup.offsetHeight
const captchaImg = new Image()
const url = URL.createObjectURL(imageData)
captchaImg.src = url
const captchaImgRadius = 8
const ctx = captchaCanvas.getContext("2d")
captchaCanvas.width = captchaPopup.offsetWidth
captchaCanvas.height = captchaPopup.offsetHeight
const captchaImg = new Image()
const url = URL.createObjectURL(imageData)
captchaImg.src = url
const captchaImgRadius = 8

captchaImg.onload = function() {
function drawCaptcha() {
if (captchaCanvasHandle === null) {
return
}
captchaCanvas.width = captchaPopup.offsetWidth
captchaCanvas.height = captchaPopup.offsetHeight
const canvasImageSize = 196
const x = captchaImagePositon.offsetLeft
const y = captchaImagePositon.offsetTop
ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height)
ctx.save()
ctx.beginPath()
ctx.moveTo(x + captchaImgRadius, y)
ctx.arcTo(x + canvasImageSize, y, x + canvasImageSize, y + canvasImageSize, captchaImgRadius)
ctx.arcTo(x + canvasImageSize, y + canvasImageSize, x, y + canvasImageSize, captchaImgRadius)
ctx.arcTo(x, y + canvasImageSize, x, y, captchaImgRadius)
ctx.arcTo(x, y, x + canvasImageSize, y, captchaImgRadius)
ctx.closePath()
ctx.clip()
ctx.drawImage(captchaImg, x, y, canvasImageSize, canvasImageSize)
ctx.restore()
const captchaImageBottom = captchaImagePositon.offsetTop + canvasImageSize
const captchaImageCentreX = captchaCanvas.width / 2
ctx.fillStyle = "#ff0000a3"
ctx.font = "16px reddit"
ctx.textAlign = "center"
ctx.fillText("Warning: Your browser doesn't support WebGL 2,",
captchaImageCentreX, captchaImageBottom + 16)
ctx.fillText("this can cause some site features to break!",
captchaImageCentreX, captchaImageBottom + 52)
captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
}
captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
}
captchaImg.onload = function() {
function drawCaptcha() {
if (captchaCanvasHandle === null) {
return
}
captchaCanvas.width = captchaPopup.offsetWidth
captchaCanvas.height = captchaPopup.offsetHeight
const canvasImageSize = 196
const x = captchaImagePositon.offsetLeft
const y = captchaImagePositon.offsetTop
ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height)
ctx.save()
ctx.beginPath()
ctx.moveTo(x + captchaImgRadius, y)
ctx.arcTo(x + canvasImageSize, y, x + canvasImageSize, y + canvasImageSize, captchaImgRadius)
ctx.arcTo(x + canvasImageSize, y + canvasImageSize, x, y + canvasImageSize, captchaImgRadius)
ctx.arcTo(x, y + canvasImageSize, x, y, captchaImgRadius)
ctx.arcTo(x, y, x + canvasImageSize, y, captchaImgRadius)
ctx.closePath()
ctx.clip()
ctx.drawImage(captchaImg, x, y, canvasImageSize, canvasImageSize)
ctx.restore()
const captchaImageBottom = captchaImagePositon.offsetTop + canvasImageSize
const captchaImageCentreX = captchaCanvas.width / 2
ctx.fillStyle = "#ff0000a3"
ctx.font = "16px reddit"
ctx.textAlign = "center"
ctx.fillText("Warning: Your browser doesn't support WebGL 2,",
captchaImageCentreX, captchaImageBottom + 16)
ctx.fillText("this can cause some site features to break!",
captchaImageCentreX, captchaImageBottom + 52)
captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
}
captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
}
}

function clearCaptchaCanvas() {
window.cancelAnimationFrame(captchaCanvasHandle)
captchaCanvasHandle = null
window.cancelAnimationFrame(captchaCanvasHandle)
captchaCanvasHandle = null
}
Loading

0 comments on commit db5b8bc

Please sign in to comment.