��

RPG CULT Grimoire | ��

mybb@mybb.ru (Esymeo) — Thu, 20 Mar 2025 14:17:34 +0300

�� , �� :

�� , �� , �� .
�� , �� .
�� , ��, �� .
��, ��, �� , �� .

�� !
�� , �� , �� . �� !

��:

[url=https://t.me/rpg_grimoire][img]https://forumstatic.ru/files/001b/9d/37/38926.gif[/img][/url]

��:

[url=https://t.me/rpg_grimoire][img]https://forumstatic.ru/files/001b/9d/37/98216.gif[/img][/url]

��:

<a href='https://t.me/rpg_grimoire' target='blank' title="RPG CULT Grimoire � ��������� ������� ������"><img src="https://forumstatic.ru/files/001b/9d/37/38926.gif" border="0" width="88" height="31" ></a>

��:

<a href='https://t.me/rpg_grimoire' target='blank' title="RPG CULT Grimoire � ��������� ������� ������"><img src="https://forumstatic.ru/files/001b/9d/37/98216.gif" border="0" width="88" height="31" ></a>

��

mybb@mybb.ru (Esymeo) — Mon, 03 Jun 2024 20:37:35 +0300

��

� �� (��)

��

� ��¨��!!!

�� , �� . �� , � �� . �� , �� . �� , �� .

�� , �� . �� .

� �� (��) �� . �� , � �� . �� , �� .

��! �� . �� -�� . �� , � �� . � �� . �� , � �� .

�� , �� , �� . �� . � �� , �� . ��! �� . �� , �� , �� -�� . ��! �� .

�� , �� , �� . �� , � �� , �� . �� , �� , �� .

�� , �� , �� . � �� (��) �� . �� , �� .

�� . ��! �� , �� . �� , � �� , �� . �� , � �� , �� . �� . �� .

�� 1

�� . ��! �� , �� . �� , � �� , �� . �� , � �� , �� . �� . �� .

�� 2

�� . ��! �� , �� . �� , � �� , �� . �� , � �� , �� . �� . �� .

Test form script

mybb@mybb.ru (Esymeo) — Mon, 22 Apr 2024 16:09:42 +0300

tab 1

tab 2

tab 1 content

tab 2 content

�� 1

mybb@mybb.ru (Esymeo) — Mon, 04 Mar 2024 11:30:34 +0300

[html]
<style>

#container {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 800px;
}

.a-title {
position: absolute;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: conic-gradient(#ed0101, blue);
pointer-events: none;
mix-blend-mode: difference;
filter: drop-shadow(2px 4px 6px black);
}
.a-second-title {
position: absolute;
margin-top: 25vh;
pointer-events: none;
-webkit-text-stroke: 1.3px white;
letter-spacing: 1.125px;
font-size: -webkit-xxx-large;
font-weight: 900;
mix-blend-mode: color-dodge;
}

canvas {
width: 100%;
height: 100%;
}

</style>
<script>
'use strict';

const canvas = document.getElementsByTagName('canvas')[0];
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

let config = {
TEXTURE_DOWNSAMPLE: 1,
DENSITY_DISSIPATION: 0.98,
VELOCITY_DISSIPATION: 0.99,
PRESSURE_DISSIPATION: 0.8,
PRESSURE_ITERATIONS: 25,
CURL: 28,
SPLAT_RADIUS: 0.004 };

let pointers = [];
let splatStack = [];

const { gl, ext } = getWebGLContext(canvas);

function getWebGLContext(canvas) {
const params = { alpha: false, depth: false, stencil: false, antialias: false };

let gl = canvas.getContext('webgl2', params);
const isWebGL2 = !!gl;
if (!isWebGL2)
gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params);

let halfFloat;
let supportLinearFiltering;
if (isWebGL2) {
gl.getExtension('EXT_color_buffer_float');
supportLinearFiltering = gl.getExtension('OES_texture_float_linear');
} else {
halfFloat = gl.getExtension('OES_texture_half_float');
supportLinearFiltering = gl.getExtension('OES_texture_half_float_linear');
}

gl.clearColor(0.0, 0.0, 0.0, 1.0);

const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;
let formatRGBA;
let formatRG;
let formatR;

if (isWebGL2)
{
formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType);
formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType);
formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType);
} else

{
formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
}

return {
gl,
ext: {
formatRGBA,
formatRG,
formatR,
halfFloatTexType,
supportLinearFiltering } };

}

function getSupportedFormat(gl, internalFormat, format, type)
{
if (!supportRenderTextureFormat(gl, internalFormat, format, type))
{
switch (internalFormat) {

case gl.R16F:
return getSupportedFormat(gl, gl.RG16F, gl.RG, type);
case gl.RG16F:
return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type);
default:
return null;}

}

return {
internalFormat,
format };

}

function supportRenderTextureFormat(gl, internalFormat, format, type) {
let texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null);

let fbo = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (status != gl.FRAMEBUFFER_COMPLETE)
return false;
return true;
}

function pointerPrototype() {
this.id = -1;
this.x = 0;
this.y = 0;
this.dx = 0;
this.dy = 0;
this.down = false;
this.moved = false;
this.color = [30, 0, 300];
}

pointers.push(new pointerPrototype());

class GLProgram {
constructor(vertexShader, fragmentShader) {
this.uniforms = {};
this.program = gl.createProgram();

gl.attachShader(this.program, vertexShader);
gl.attachShader(this.program, fragmentShader);
gl.linkProgram(this.program);

if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
throw gl.getProgramInfoLog(this.program);

const uniformCount = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);
for (let i = 0; i < uniformCount; i++) {
const uniformName = gl.getActiveUniform(this.program, i).name;
this.uniforms[uniformName] = gl.getUniformLocation(this.program, uniformName);
}
}

bind() {
gl.useProgram(this.program);
}}

function compileShader(type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
throw gl.getShaderInfoLog(shader);

return shader;
};

const baseVertexShader = compileShader(gl.VERTEX_SHADER, `
precision highp float;
precision mediump sampler2D;

attribute vec2 aPosition;
varying vec2 vUv;
varying vec2 vL;
varying vec2 vR;
varying vec2 vT;
varying vec2 vB;
uniform vec2 texelSize;

void main () {
vUv = aPosition * 0.5 + 0.5;
vL = vUv - vec2(texelSize.x, 0.0);
vR = vUv + vec2(texelSize.x, 0.0);
vT = vUv + vec2(0.0, texelSize.y);
vB = vUv - vec2(0.0, texelSize.y);
gl_Position = vec4(aPosition, 0.0, 1.0);
}
`);

const clearShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
uniform sampler2D uTexture;
uniform float value;

void main () {
gl_FragColor = value * texture2D(uTexture, vUv);
}
`);

const displayShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
uniform sampler2D uTexture;

void main () {
gl_FragColor = texture2D(uTexture, vUv);
}
`);

const splatShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
uniform sampler2D uTarget;
uniform float aspectRatio;
uniform vec3 color;
uniform vec2 point;
uniform float radius;

void main () {
vec2 p = vUv - point.xy;
p.x *= aspectRatio;
vec3 splat = exp(-dot(p, p) / radius) * color;
vec3 base = texture2D(uTarget, vUv).xyz;
gl_FragColor = vec4(base + splat, 1.0);
}
`);

const advectionManualFilteringShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
uniform sampler2D uVelocity;
uniform sampler2D uSource;
uniform vec2 texelSize;
uniform float dt;
uniform float dissipation;

vec4 bilerp (in sampler2D sam, in vec2 p) {
vec4 st;
st.xy = floor(p - 0.5) + 0.5;
st.zw = st.xy + 1.0;
vec4 uv = st * texelSize.xyxy;
vec4 a = texture2D(sam, uv.xy);
vec4 b = texture2D(sam, uv.zy);
vec4 c = texture2D(sam, uv.xw);
vec4 d = texture2D(sam, uv.zw);
vec2 f = p - st.xy;
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}

void main () {
vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy;
gl_FragColor = dissipation * bilerp(uSource, coord);
gl_FragColor.a = 1.0;
}
`);

const advectionShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
uniform sampler2D uVelocity;
uniform sampler2D uSource;
uniform vec2 texelSize;
uniform float dt;
uniform float dissipation;

void main () {
vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
gl_FragColor = dissipation * texture2D(uSource, coord);
gl_FragColor.a = 1.0;
}
`);

const divergenceShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
varying vec2 vL;
varying vec2 vR;
varying vec2 vT;
varying vec2 vB;
uniform sampler2D uVelocity;

vec2 sampleVelocity (in vec2 uv) {
vec2 multiplier = vec2(1.0, 1.0);
if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; }
if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; }
if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; }
if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; }
return multiplier * texture2D(uVelocity, uv).xy;
}

void main () {
float L = sampleVelocity(vL).x;
float R = sampleVelocity(vR).x;
float T = sampleVelocity(vT).y;
float B = sampleVelocity(vB).y;
float div = 0.5 * (R - L + T - B);
gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
}
`);

const curlShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
varying vec2 vL;
varying vec2 vR;
varying vec2 vT;
varying vec2 vB;
uniform sampler2D uVelocity;

void main () {
float L = texture2D(uVelocity, vL).y;
float R = texture2D(uVelocity, vR).y;
float T = texture2D(uVelocity, vT).x;
float B = texture2D(uVelocity, vB).x;
float vorticity = R - L - T + B;
gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0);
}
`);

const vorticityShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
varying vec2 vT;
varying vec2 vB;
uniform sampler2D uVelocity;
uniform sampler2D uCurl;
uniform float curl;
uniform float dt;

void main () {
float T = texture2D(uCurl, vT).x;
float B = texture2D(uCurl, vB).x;
float C = texture2D(uCurl, vUv).x;
vec2 force = vec2(abs(T) - abs(B), 0.0);
force *= 1.0 / length(force + 0.00001) * curl * C;
vec2 vel = texture2D(uVelocity, vUv).xy;
gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);
}
`);

const pressureShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
varying vec2 vL;
varying vec2 vR;
varying vec2 vT;
varying vec2 vB;
uniform sampler2D uPressure;
uniform sampler2D uDivergence;

vec2 boundary (in vec2 uv) {
uv = min(max(uv, 0.0), 1.0);
return uv;
}

void main () {
float L = texture2D(uPressure, boundary(vL)).x;
float R = texture2D(uPressure, boundary(vR)).x;
float T = texture2D(uPressure, boundary(vT)).x;
float B = texture2D(uPressure, boundary(vB)).x;
float C = texture2D(uPressure, vUv).x;
float divergence = texture2D(uDivergence, vUv).x;
float pressure = (L + R + B + T - divergence) * 0.25;
gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
}
`);

const gradientSubtractShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
varying vec2 vL;
varying vec2 vR;
varying vec2 vT;
varying vec2 vB;
uniform sampler2D uPressure;
uniform sampler2D uVelocity;

vec2 boundary (in vec2 uv) {
uv = min(max(uv, 0.0), 1.0);
return uv;
}

void main () {
float L = texture2D(uPressure, boundary(vL)).x;
float R = texture2D(uPressure, boundary(vR)).x;
float T = texture2D(uPressure, boundary(vT)).x;
float B = texture2D(uPressure, boundary(vB)).x;
vec2 velocity = texture2D(uVelocity, vUv).xy;
velocity.xy -= vec2(R - L, T - B);
gl_FragColor = vec4(velocity, 0.0, 1.0);
}
`);

let textureWidth;
let textureHeight;
let density;
let velocity;
let divergence;
let curl;
let pressure;
initFramebuffers();

const clearProgram = new GLProgram(baseVertexShader, clearShader);
const displayProgram = new GLProgram(baseVertexShader, displayShader);
const splatProgram = new GLProgram(baseVertexShader, splatShader);
const advectionProgram = new GLProgram(baseVertexShader, ext.supportLinearFiltering ? advectionShader : advectionManualFilteringShader);
const divergenceProgram = new GLProgram(baseVertexShader, divergenceShader);
const curlProgram = new GLProgram(baseVertexShader, curlShader);
const vorticityProgram = new GLProgram(baseVertexShader, vorticityShader);
const pressureProgram = new GLProgram(baseVertexShader, pressureShader);
const gradienSubtractProgram = new GLProgram(baseVertexShader, gradientSubtractShader);

function initFramebuffers() {
textureWidth = gl.drawingBufferWidth >> config.TEXTURE_DOWNSAMPLE;
textureHeight = gl.drawingBufferHeight >> config.TEXTURE_DOWNSAMPLE;

const texType = ext.halfFloatTexType;
const rgba = ext.formatRGBA;
const rg = ext.formatRG;
const r = ext.formatR;

density = createDoubleFBO(2, textureWidth, textureHeight, rgba.internalFormat, rgba.format, texType, ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST);
velocity = createDoubleFBO(0, textureWidth, textureHeight, rg.internalFormat, rg.format, texType, ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST);
divergence = createFBO(4, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
curl = createFBO(5, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
pressure = createDoubleFBO(6, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
}

function createFBO(texId, w, h, internalFormat, format, type, param) {
gl.activeTexture(gl.TEXTURE0 + texId);
let texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);

let fbo = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
gl.viewport(0, 0, w, h);
gl.clear(gl.COLOR_BUFFER_BIT);

return [texture, fbo, texId];
}

function createDoubleFBO(texId, w, h, internalFormat, format, type, param) {
let fbo1 = createFBO(texId, w, h, internalFormat, format, type, param);
let fbo2 = createFBO(texId + 1, w, h, internalFormat, format, type, param);

return {
get read() {
return fbo1;
},
get write() {
return fbo2;
},
swap() {
let temp = fbo1;
fbo1 = fbo2;
fbo2 = temp;
} };

}

const blit = (() => {
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(0);

return destination => {
gl.bindFramebuffer(gl.FRAMEBUFFER, destination);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
};
})();

let lastTime = Date.now();
multipleSplats(parseInt(Math.random() * 20) + 5);
update();

function update() {
resizeCanvas();

const dt = Math.min((Date.now() - lastTime) / 1000, 0.016);
lastTime = Date.now();

gl.viewport(0, 0, textureWidth, textureHeight);

if (splatStack.length > 0)
multipleSplats(splatStack.pop());

advectionProgram.bind();
gl.uniform2f(advectionProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read[2]);
gl.uniform1i(advectionProgram.uniforms.uSource, velocity.read[2]);
gl.uniform1f(advectionProgram.uniforms.dt, dt);
gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION);
blit(velocity.write[1]);
velocity.swap();

gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read[2]);
gl.uniform1i(advectionProgram.uniforms.uSource, density.read[2]);
gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION);
blit(density.write[1]);
density.swap();

for (let i = 0; i < pointers.length; i++) {
const pointer = pointers[i];
if (pointer.moved) {
splat(pointer.x, pointer.y, pointer.dx, pointer.dy, pointer.color);
pointer.moved = false;
}
}

curlProgram.bind();
gl.uniform2f(curlProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read[2]);
blit(curl[1]);

vorticityProgram.bind();
gl.uniform2f(vorticityProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read[2]);
gl.uniform1i(vorticityProgram.uniforms.uCurl, curl[2]);
gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
gl.uniform1f(vorticityProgram.uniforms.dt, dt);
blit(velocity.write[1]);
velocity.swap();

divergenceProgram.bind();
gl.uniform2f(divergenceProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read[2]);
blit(divergence[1]);

clearProgram.bind();
let pressureTexId = pressure.read[2];
gl.activeTexture(gl.TEXTURE0 + pressureTexId);
gl.bindTexture(gl.TEXTURE_2D, pressure.read[0]);
gl.uniform1i(clearProgram.uniforms.uTexture, pressureTexId);
gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE_DISSIPATION);
blit(pressure.write[1]);
pressure.swap();

pressureProgram.bind();
gl.uniform2f(pressureProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence[2]);
pressureTexId = pressure.read[2];
gl.uniform1i(pressureProgram.uniforms.uPressure, pressureTexId);
gl.activeTexture(gl.TEXTURE0 + pressureTexId);
for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
gl.bindTexture(gl.TEXTURE_2D, pressure.read[0]);
blit(pressure.write[1]);
pressure.swap();
}

gradienSubtractProgram.bind();
gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read[2]);
gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read[2]);
blit(velocity.write[1]);
velocity.swap();

gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
displayProgram.bind();
gl.uniform1i(displayProgram.uniforms.uTexture, density.read[2]);
blit(null);

requestAnimationFrame(update);
}

function splat(x, y, dx, dy, color) {
splatProgram.bind();
gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read[2]);
gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height);
gl.uniform2f(splatProgram.uniforms.point, x / canvas.width, 1.0 - y / canvas.height);
gl.uniform3f(splatProgram.uniforms.color, dx, -dy, 1.0);
gl.uniform1f(splatProgram.uniforms.radius, config.SPLAT_RADIUS);
blit(velocity.write[1]);
velocity.swap();

gl.uniform1i(splatProgram.uniforms.uTarget, density.read[2]);
gl.uniform3f(splatProgram.uniforms.color, color[0] * 0.3, color[1] * 0.3, color[2] * 0.3);
blit(density.write[1]);
density.swap();
}

function multipleSplats(amount) {
for (let i = 0; i < amount; i++) {
const color = [Math.random() * 10, Math.random() * 10, Math.random() * 10];
const x = canvas.width * Math.random();
const y = canvas.height * Math.random();
const dx = 1000 * (Math.random() - 0.5);
const dy = 1000 * (Math.random() - 0.5);
splat(x, y, dx, dy, color);
}
}

function resizeCanvas() {
if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
initFramebuffers();
}
}

canvas.addEventListener('mousemove', e => {
pointers[0].moved = pointers[0].down;
pointers[0].dx = (e.offsetX - pointers[0].x) * 10.0;
pointers[0].dy = (e.offsetY - pointers[0].y) * 10.0;
pointers[0].x = e.offsetX;
pointers[0].y = e.offsetY;
});

canvas.addEventListener('touchmove', e => {
e.preventDefault();
const touches = e.targetTouches;
for (let i = 0; i < touches.length; i++) {
let pointer = pointers[i];
pointer.moved = pointer.down;
pointer.dx = (touches[i].pageX - pointer.x) * 10.0;
pointer.dy = (touches[i].pageY - pointer.y) * 10.0;
pointer.x = touches[i].pageX;
pointer.y = touches[i].pageY;
}
}, false);

canvas.addEventListener('mousemove', () => {
pointers[0].down = true;
pointers[0].color = [Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2];
});

canvas.addEventListener('touchstart', e => {
e.preventDefault();
const touches = e.targetTouches;
for (let i = 0; i < touches.length; i++) {
if (i >= pointers.length)
pointers.push(new pointerPrototype());

pointers[i].id = touches[i].identifier;
pointers[i].down = true;
pointers[i].x = touches[i].pageX;
pointers[i].y = touches[i].pageY;
pointers[i].color = [Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2];
}
});

window.addEventListener('mouseleave', () => {
pointers[0].down = false;
});

window.addEventListener('touchend', e => {
const touches = e.changedTouches;
for (let i = 0; i < touches.length; i++)
for (let j = 0; j < pointers.length; j++)
if (touches[i].identifier == pointers[j].id)
pointers[j].down = false;
});
</script>

<section id='container'>
<h1 class='a-title'>Move the mouse</h1>
<h2 class='a-second-title'>See the magic</h2>
<canvas></canvas>
</section>

[/html]

�� -��

mybb@mybb.ru (Esymeo) — Fri, 29 Dec 2023 02:10:56 +0300

��-��:

��:

[block=epblock][block=epquote]��� �����-������ ������������ � ���������� �������[/block]

[block=eppicture][img]https://upforme.ru/uploads/001b/9d/37/2/899755.webp[/img][/block]

[block=epplayers] 
[hr]
[block=epava][url=https://esymeo.mybb.ru/profile.php?id=2][img]https://forumavatars.ru/img/avatars/001b/9d/37/2-1654298376.jpg[/img][/url][/block]
[hr]
[block=epava][url=https://esymeo.mybb.ru/profile.php?id=2][img]https://forumavatars.ru/img/avatars/001b/9d/37/2-1654298376.jpg[/img][/url][/block]
[hr]
[block=epava] [url=https://esymeo.mybb.ru/profile.php?id=2][img]https://forumavatars.ru/img/avatars/001b/9d/37/2-1654298376.jpg[/img][/url][/block]
[hr]
[/block]
[block=epinfo][block=eptext] [b]�������, 000 ���[/b]
� ♦ � ♦ � ♦ �
[align=left]� ��� ����� �������� �������[/align]
[/block][/block]
[block=epappendx]��� ������ ������� ����� ���������� ��� ������������� ������� � ��[/block]

[/block]

��:

��:

/* ����� ��� ����� .epblock */
.epblock {
    background: #181818; /* ���� ���� */
}

/* ����� ��� ��������� .eppicture, .epplayers, .epappendx, .epquote, .epinfo */
.eppicture, .epplayers, .epappendx, .epquote, .epinfo {
    display: flex;
    align-items: center; /* ������������� �� ��������� */
    justify-content: center; /* ������������� �� ����������� */
    text-align: center; /* ������������� ������ */
}

/* ����� ��� .epquote � .epappendx */
.epquote, .epappendx {
    padding: 5px; /* ������� ������ ��������� .epquote � .epappendx */
}

/* ����� ��� .epquote */
.epquote {
    font-style: italic; /* ��������� ����� ������ */
    color: #856616; /* ���� ������ */
}

/* ����� ��� ����������� � .eppicture */
.eppicture img {
    width: 650px; /* ������ ����������� */
    height: 200px; /* ������ ����������� */
    border: 2px #856616 solid; /* ������� ����������� */
    border-radius: 10px; /* ����������� ����� ����������� */
}

/* ����� ��� ����������� � .eppicture, .epplayers � .epava � �������� �� ��������� */
.eppicture img, .epplayers img, .epava {
    transition: all .5s ease-in-out 0s; /* ������� ������� ��� ���� ������� � ������������� 0.5 ������� */
    filter: grayscale(100%); /* ��������� ������: ����������� ��������� ����� (���������������) */
}

.eppicture img:hover, .epplayers img:hover, .epava:hover {
    transition: all .5s ease-in-out 0s; /* ������� ������� ��� ���� ������� � ������������� 0.5 ������� ��� ��������� */
    filter: grayscale(0%); /* ������ ��� ���������: �������������� ����� ����������� */
}

/* ����� ��� �������������� ����� � .epplayers */
.epplayers hr {
    width: 50px; /* ������ ����� */
    border: 1px solid #856616; /* ���� � ������� ����� */
}

/* ����� ��� ����������� � .epplayers */
.epplayers img {
    display: inline-flex; /* ��������� ����������� ������ ���������� � ��� */
    height: 50px; /* ������ ����������� */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 50% 0%); /* ����-���� ��� �������� ������� ����� */
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 50% 0%); /* �������������� ����-���� ��� WebKit ��������� */
    border: 4px solid #856616; /* ���� ������� ����������� */
}

/* ����� ��� .epava */
.epava {
    height: 67px; /* ������ ����� .epava */
    padding: 3px; /* ���������� ������ ����� .epava */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 50% 0%); /* ����-���� ��� �������� ������� ����� */
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 50% 0%); /* �������������� ����-���� ��� WebKit ��������� */
    background: #856616; /* ���� ���� ����� .epava */
    margin: 0 30px; /* ������� ������ ����� .epava ������ � ����� */
}

/* ����� ��� .epinfo */
.epinfo {
    margin: 10px; /* ������� ������ ����� .epinfo �� ���� ������ */
}

/* ����� ��� ���������� ����� .eptext */
.eptext {
    padding: 15px; /* ���������� ������ ����� .eptext */
    background: #c6bca8 url(http://forumstatic.ru/files/001b/33/a6/40888.png); /* ��� ����� .eptext � ������������ */
    border: 1px solid #a79c86; /* ���� � ������� ������� ����� .eptext */
    box-shadow: 0 0 0 1px #d4c883 inset, 0 0 0 2px #a79c86 inset, 0 2px 10px 0 #aca596, 0 0 15px 0 #afa89a inset; /* ���� ����� .eptext */
    border-radius: 10px; /* ����������� ����� ����� .eptext */
    width: 95%; /* ������ ����� .eptext */
}

/* ����� ��� .epappendx */
.epappendx {
    font-size: 10px; /* ������ ������ ������ � ����� .epappendx */
    color: #c0c0c0; /* ���� ������ � ����� .epappendx */
}

�� -��

mybb@mybb.ru (Esymeo) — Tue, 12 Dec 2023 16:11:26 +0300

��:

��-��:

��:

[block=newsblock]

[block=newsheader][size=25][b]● news #10[/b][/size]
[size=10]�� ����� ��� �����[/size][/block]
[block=newsava][img]https://forumavatars.ru/img/avatars/001b/9d/37/2-1654298376.jpg[/img][/block]
[block=newstext]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis laoreet leo. Pellentesque bibendum fermentum diam ac mollis. Pellentesque nunc justo, pretium at ultrices ut, faucibus a elit. Nunc consequat, turpis sit amet accumsan rutrum, nunc eros consequat metus, sodales rutrum nulla nunc non eros. Ut elementum non ex sed commodo. Nulla scelerisque orci metus, nec pretium libero congue at. Aenean sit amet ante imperdiet, mattis odio sit amet, interdum tellus. Aenean ut facilisis lorem. Vivamus tincidunt dictum tristique. Phasellus tristique porta massa, vitae sodales orci venenatis eget. Sed efficitur rutrum dolor in semper. Fusce vitae suscipit sapien. Sed finibus diam non euismod lacinia. Vestibulum eget aliquet ex.

Phasellus diam magna, lacinia quis eros eget, vestibulum tincidunt urna. Duis convallis hendrerit leo, vel ornare est rutrum vitae. In laoreet turpis in nibh maximus, ac dapibus quam aliquet. Nullam sit amet velit vel leo euismod efficitur ut et odio. Sed pharetra tincidunt mauris, at dapibus odio sodales sit amet. Donec lacus neque, aliquam eget cursus eget, suscipit ut dolor. Maecenas ac elit et orci vestibulum maximus.

Maecenas consequat est arcu, nec ornare dolor faucibus at. Duis rhoncus imperdiet nibh vel posuere. Proin vehicula urna id rutrum sodales. Pellentesque cursus purus eu augue finibus, et convallis elit placerat. Phasellus ut mi et velit semper porttitor. Nunc diam urna, efficitur eget luctus sit amet, volutpat a metus. Mauris at nisi ac diam gravida pharetra vel sit amet metus. In condimentum sit amet nisl ac rutrum. Curabitur fringilla sem et lacus congue auctor. Aenean rhoncus augue et ante lacinia imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tortor eros, efficitur sed mollis vitae, placerat vitae urna. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Mauris interdum mattis sem, a iaculis eros fringilla non. Praesent efficitur luctus fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin massa ante, rutrum id laoreet et, placerat vitae est. Phasellus volutpat sapien ut sapien bibendum congue ut ut elit. In nec turpis sit amet neque finibus semper. Suspendisse potenti. Curabitur at orci libero.

Nullam scelerisque neque odio, sed tempus sapien sagittis vitae. Integer posuere luctus nibh. Etiam non volutpat tortor, in elementum risus. Donec maximus quam et euismod porta. Sed sollicitudin magna non mi sagittis aliquet. Donec ipsum metus, imperdiet sit amet dictum a, sollicitudin et magna. Phasellus ut odio vel neque consectetur hendrerit. Sed lacus risus, tempus in risus at, consectetur pulvinar lacus. Fusce cursus laoreet nisl, id aliquet dolor maximus in. Etiam id tristique nisi, nec porta dolor. Nulla dapibus, orci a bibendum pharetra, eros elit pharetra metus, in cursus nisi erat vitae nisl. Integer imperdiet nisi sapien, vehicula fermentum justo tempor ac. Curabitur augue eros, aliquam id sagittis sed, molestie sed ligula. Cras efficitur volutpat iaculis. Mauris varius nulla sit amet blandit accumsan.

[align=center][size=30]♥[/size][/align][/block]
[block=newlist]
[block=newlistheader][align=center][b]��������[/b][/align][/block]
[ul]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis laoreet leo. Pellentesque bibendum fermentum diam ac mollis. Pellentesque nunc justo, pretium at ultrices ut, faucibus a elit. Nunc consequat, turpis sit amet accumsan rutrum, nunc eros consequat metus, sodales rutrum nulla nunc non eros. Ut elementum non ex sed commodo. Nulla scelerisque orci metus, nec pretium libero congue at. Aenean sit amet ante imperdiet, mattis odio sit amet, interdum tellus. Aenean ut facilisis lorem. Vivamus tincidunt dictum tristique. Phasellus tristique porta massa, vitae sodales orci venenatis eget. Sed efficitur rutrum dolor in semper. Fusce vitae suscipit sapien. Sed finibus diam non euismod lacinia. Vestibulum eget aliquet ex.
Phasellus diam magna, lacinia quis eros eget, vestibulum tincidunt urna. Duis convallis hendrerit leo, vel ornare est rutrum vitae. In laoreet turpis in nibh maximus, ac dapibus quam aliquet. Nullam sit amet velit vel leo euismod efficitur ut et odio. Sed pharetra tincidunt mauris, at dapibus odio sodales sit amet. Donec lacus neque, aliquam eget cursus eget, suscipit ut dolor. Maecenas ac elit et orci vestibulum maximus.
Maecenas consequat est arcu, nec ornare dolor faucibus at. Duis rhoncus imperdiet nibh vel posuere. Proin vehicula urna id rutrum sodales. Pellentesque cursus purus eu augue finibus, et convallis elit placerat. Phasellus ut mi et velit semper porttitor. Nunc diam urna, efficitur eget luctus sit amet, volutpat a metus. Mauris at nisi ac diam gravida pharetra vel sit amet metus. In condimentum sit amet nisl ac rutrum. Curabitur fringilla sem et lacus congue auctor. Aenean rhoncus augue et ante lacinia imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tortor eros, efficitur sed mollis vitae, placerat vitae urna. Interdum et malesuada fames ac ante ipsum primis in faucibus.[/ul][/block]

[block=newactive]
[block=newactiveheader][align=center][b]���������[/b][/align][/block]
[block=newactivecontent]
[block=activeavaleft]
[img]https://forumavatars.ru/img/avatars/001b/9d/37/2-1654298376.jpg[/img]
[img]https://forumavatars.ru/img/avatars/001b/9d/37/2-1654298376.jpg[/img]
[img]https://forumavatars.ru/img/avatars/001b/9d/37/2-1654298376.jpg[/img][/block]
[block=activeavaright][img]https://forumavatars.ru/img/avatars/001b/9d/37/2-1654298376.jpg[/img]
[img]https://forumavatars.ru/img/avatars/001b/9d/37/2-1654298376.jpg[/img]
[img]https://forumavatars.ru/img/avatars/001b/9d/37/2-1654298376.jpg[/img][/block]

[block=activequote]Mauris interdum mattis sem, a iaculis eros fringilla non. Praesent efficitur luctus fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin massa ante, rutrum id laoreet et, placerat vitae est. Phasellus volutpat sapien ut sapien bibendum congue ut ut elit. In nec turpis sit amet neque finibus semper. Suspendisse potenti. Curabitur at orci libero.
[url=https://esymeo.mybb.ru/][������ ������][/url][/block]

[block=activecouple][align=center][url=https://esymeo.mybb.ru/]Lorem[/url] & [url=https://esymeo.mybb.ru/]Ipsum[/url][/align][/block]

[block=activeep][align=center][url=https://esymeo.mybb.ru/]Lorem Ipsum[/url][/align][/block]

[/block][/block][/block]

��:

��:

/* ����� ����� ��� ����� �������� */
.newsblock {
    width: 70%; /* ������ ����� �������� */
    text-align: justify; /* ������������ ������ �� ������ */
    margin: 0 auto; /* ������������ �� ������ */
    border: 1px solid #e1dfdd; /* ������� ����� �������� */
    border-radius: 25px; /* ����������� ����� */
    background: #bbbbbb; /* ���� ���� */
    position: relative; /* ������������� ���������������� */
}

/* ����� ��������� ������� */
.newsheader {
    background: #bbbbbb; /* ���� ���� */
    border-radius: 25px; /* ����������� ����� */
    padding: 20px 0 0 120px; /* ���������� ������ ������, ������, �����, ����� */
    text-transform: uppercase; /* �������������� ������ � ������� ������� */
}

/* ����� ������� */
.newsava {
    position: absolute; /* ���������� ���������������� */
    top: 20px; /* ������ ������ */
    left: 25px; /* ������ ����� */
}

.newsava img {
    width: 70px; /* ������ ����������� ������� */
    border-radius: 50%; /* ������� ������ */
    padding: 5px; /* ���������� ������ */
    border: 1px solid #e1dfdd; /* ������� ������� */
}

/* ����� ������ ������� */
.newstext {
    padding: 20px 50px; /* ���������� ������ ������, �����, �����, ������ */
    border-radius: 25px 25px 0 0; /* ����������� ����� ������ */
    background: #f9f9f9; /* ���� ���� */
    text-indent: 5em; /* ������ ������ ������ */
}

/* ����� ������ ������� */
.newlist {
    padding: 20px 40px; /* ���������� ������ ������, �����, �����, ������ */
    background: #f9f9f9; /* ���� ���� */
    position: relative; /* ������������� ���������������� */
}

.newlist ul li::marker {color: #b7d8f6;} /* ���� ������� ������ */

/* ����� ��������� ������ */
.newlistheader {
    width: 300px; /* ������ ����� ��������� ������ */
    height: 30px; /* ������ ����� ��������� ������ */
    background: #fbfbfb; /* ���� ���� */
    border: 1px solid #e1dfdd; /* ������� ����� ��������� ������ */
    border-radius: 25px 0 0 25px; /* ����������� ����� */
    position: absolute; /* ���������� ���������������� */
    right: 0; /* ���������� � ������� ���� */
    top: -20px; /* �������� ������ �� 20px */
}

.newlistheader span, .newactiveheader span, .activecouple span, .activeep span {line-height: 30px;} /* ������ ������ */

/* ����� ����� �������� �������� */
.newactive {
    background: #f9f9f9; /* ���� ���� */
    padding: 30px 80px; /* ���������� ������ ������, �����, �����, ������ */
    position: relative; /* ������������� ���������������� */
    margin-bottom: 60px; /* ������� ������ ����� */
}

/* ����� ��������� ����� �������� �������� ����� */
.newactiveheader {
    width: 300px; /* ������ ����� ��������� */
    height: 30px; /* ������ ����� ��������� */
    background: #fbfbfb; /* ���� ���� */
    border: 1px solid #e1dfdd; /* ������� ����� ��������� */
    border-radius: 0 25px 25px 0; /* ����������� ����� */
    position: absolute; /* ���������� ���������������� */
    left: 0; /* ���������� � ������ ���� */
    top: -20px; /* �������� ������ �� 20px */
}

/* ����� �������� ����� �������� �������� */
.newactivecontent {
    border-radius: 25px; /* ����������� ����� */
    border: 1px solid #e1dfdd; /* ������� ����� */
    padding: 0 40px; /* ���������� ������ ������, �����, �����, ������ */
    position: relative; /* ������������� ���������������� */
}

/* ����� �������� � ����� �������� �������� */
.activeavaleft, .activeavaright {position: absolute; top: 10px;} /* ���������������� �������� */
.activeavaleft {left: -20px;} /* ������ ����� */
.activeavaright {right: -20px;} /* ������ ������ */

.activeavaleft img, .activeavaright img {
    width: 40px; /* ������ ����������� ������� */
    border-radius: 50%; /* ������� ������ */
    border: 1px solid #f9f9f9; /* ������� ������� */
}

/* ����� ������ � ����� �������� �������� */
.activequote {
    border: 1px solid #e1dfdd; /* ������� ����� ������ */
    border-radius: 0 0 25px 25px; /* ����������� ����� ����� */
    padding: 5px 10px; /* ���������� ������ ������, �����, �����, ������ */
    font-size: 10px; /* ������ ������ */
}

/* ����� ����� ���� � ����� �������� �������� */
.activecouple {
    margin: 10px 0; /* ������� ������ ������ � ����� */
    height: 30px; /* ������ ����� */
    border: 1px solid #e1dfdd; /* ������� ����� */
    border-radius: 25px; /* ����������� ����� */
}

/* ����� ����� ������� � ����� �������� �������� */
.activeep {
    height: 30px; /* ������ ����� */
    border: 1px solid #e1dfdd; /* ������� ����� */
    border-radius: 25px 25px 0 0; /* ����������� ����� ������ */
}

��

mybb@mybb.ru (Esymeo) — Tue, 09 May 2023 14:48:36 +0300

[html]
<style>
.container {
display: grid;
place-items: center;
height: 100%;
}

.spinner, .spinner__won {
position: relative;
overflow-x: hidden;
background-color: white;
box-shadow: 0px 5px 7px -2px rgba(0, 0, 0, 0.4);
border-radius: 5px;
}

.spinner {
max-width: 610px;
min-width: 610px;
border-top: 5px solid black;
border-bottom: 5px solid black;
}

.spinner__won {
max-width: 590px;
min-width: 590px;
padding: 3px 10px;
font-size: 24px;
letter-spacing: 12px;
}

.spinner-items {
position: relative;
display: inline-flex;
margin: 0;
padding: 0;
margin-left: -246px;
}

.spinner__marker {
position: absolute;
height: 100%;
width: 3px;
background-color: yellow;
transform: translateX(-50%);
left: 50%;
top: 0;
}

.spinner-items__item {
display: block;
list-style-type: none;
padding: 32px 0;
font-size: 32px;
color: #c2c2c2;
border-left: 5px solid black;
width: 117px;
max-width: 117px;
overflow: hidden;
text-align: center;
}

.button3 {
padding: 21px 46px;
border-radius: 10px;
border: none;
box-shadow: 0px 5px 7px -2px rgba(0, 0, 0, 0.4);
cursor: pointer;
background-color: white;
transition: box-shadow 300ms ease;
}

.button3:hover {
box-shadow: 0px 2.5px 3.5px -1px rgba(0, 0, 0, 0.2);
}

.win {
background-color: lemonchiffon;
}
</style>
<script>
/*
* Emoji Spinner inspired by CS:GO Case Opening
*
* I know, the code's a mess. I hope in a few years I'll look back at this and laugh.
* But for now, I'm actually proud of this monster.
*
* With a bit of front-end sprinkles it ain't that bad!
*
* If you're re-using this code. Please refer this as your source.
* Give credit where it's due. With a comment in the code for example.
*/

class SpinnerAnimation {
constructor({container, list}) {
this.tickSound = new Audio("h-ttps://freesound.org/data/previews/269/269026_5094889-lq.mp3");
this.tickSound.playbackRate = 4;

this.winSound = new Audio("h-ttps://freesound.org/data/previews/511/511484_6890478-lq.mp3");

this.firstRound = true;

this.reset();

this.spinnerContainer = document.getElementById(container);
this.spinnerList = spinnerContainer.children.namedItem(list);
this.spinnerMarker = spinnerContainer.children.namedItem("spinnerMarker");
this.spinnerItems = this.spinnerList.children;
this.spinnerWon = document.getElementById("spinnerWon");
}

reset() {
this.started = false;
this.stopped = false;
this.stopAnimation = false;
this.lowerSpeed = 0;
this.ticks = 0;
this.offSet = 0;
this.recycle = false;
this.tick = false;
this.state = null;
this.speed = 0;
this.winningItem = 0;
this.firstRound = false;
}

start(speed = 1200) {
this.started = true;
this.speed = speed;
console.log(this.speed);
this.loop();
}

loop() {
let dt = 0; // Delta Time is the amount of time between two frames
let last = 0; // Last time of frame

// The Animation Loop
function loop(ms) {

if(this.recycle) {
this.recycle = false;
const item = spinnerList.firstElementChild;
spinnerList.append(item);
}

if(this.tick) {
this.tick = false;
this.tickSound.play();
}

this.offSet += this.speed * dt;

const ct = ms / 1000; // MS == The amount of Milliseconds the animation is already going for. Divided by 1000 is the amount of seconds
dt = ct - last;
last = ct;

// Move the item to the left
this.spinnerList.style.right = this.offSet + "px";

if(this.offSet >= 122 ) {
this.recycle = true;
this.offSet = 0;
this.tick = true;
this.ticks += 1;
if(this.ticks >= 20 && (Math.random() * 10) >= 5) {
this.stop();
}
}

if(this.stopped) {
let stopped = false;
if(!stopped) this.speed -= this.lowerSpeed;

if(this.speed <= 0) {
stopped = true;
this.speed = 0;
}

if(stopped) {
if(this.offSet >= 58.6) {
this.offSet += 6;
} else {
this.offSet -= 6;
}

if(this.offSet >= 122 || this.offSet <= 0) {
this.stopAnimation = true;

this.winSound.play();

if(this.offSet >= 122) {
this.winningItem = 5;
this.spinnerItems.item(5).classList.add("win");
this.spinnerWon.innerText += this.spinnerItems.item(5).innerText;
this.offSet = 122;
}

if(this.offSet <= 0) {
this.winningItem = 4;
this.spinnerItems.item(4).classList.add("win");
this.spinnerWon.innerText += this.spinnerItems.item(4).innerText;
this.offSet = 0;
}

}

}
}

if(!this.stopAnimation) {
requestAnimationFrame(loop);
}
}

// Bind Class to loop function
loop = loop.bind(this);
requestAnimationFrame(loop);
}

stop() {
this.stopped = true;

// Calculate a random lower speed
this.lowerSpeed = Math.ceil(Math.random() * 10) + 1;
}
}

const startSpinnerBtn = document.getElementById("startSpinner");

const animation = new SpinnerAnimation({
container: "spinnerContainer",
list: "spinnerList"
});

startSpinnerBtn.addEventListener("click", (e) => {
if(animation.started == "ready") { return; }

if(!animation.firstRound) animation.spinnerItems.item(animation.winningItem).classList.remove("win");
animation.reset();
animation.start();
});
</script>
<div class="container">
<div class="spinner" id="spinnerContainer">
<ul class="spinner-items" id="spinnerList">
<li class="spinner-items__item" id="8">🐶</li>
<li class="spinner-items__item" id="9">🐷</li>
<li class="spinner-items__item" id="1">🐸</li>
<li class="spinner-items__item" id="2">🐹</li>
<li class="spinner-items__item" id="3">🐵</li>
<li class="spinner-items__item" id="4">🐰</li>
<li class="spinner-items__item" id="5">🐭</li>
<li class="spinner-items__item" id="6">🐮</li>
<li class="spinner-items__item" id="7">🐨</li>
</ul>
<div class="spinner__marker" id="spinnerMarker"> </div>
</div>
<div class="spinner__won" id="spinnerWon"></div>
<div class="button3" id="startSpinner">Spin Emoji!</div>
</div>
[/html]

�� 2

mybb@mybb.ru (Esymeo) — Sun, 12 Feb 2023 14:05:02 +0300

��

mybb@mybb.ru (Esymeo) — Fri, 03 Jun 2022 20:43:45 +0300

Esymeo ��(�):

�� !

Lorem Ipsum

mybb@mybb.ru (Esymeo) — Sat, 21 May 2022 19:57:41 +0300

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in justo quis neque auctor tristique nec eget nulla. Duis et ante porttitor, efficitur justo eu, tempus lectus. Nunc id egestas sem. Cras et vulputate lorem. Duis placerat tellus eget enim rhoncus egestas. Vestibulum non posuere felis. Duis a felis ac mi sagittis blandit. Maecenas eleifend accumsan libero a finibus. Nulla faucibus dui diam, nec fermentum risus lobortis sit amet. In ut mauris sed lectus pellentesque scelerisque sit amet sed ex. Fusce placerat lacus lacus, at rutrum purus aliquam ut. Morbi egestas rhoncus vulputate. Vivamus ut nisi hendrerit, suscipit massa in, malesuada purus.

Lorem Ipsum

mybb@mybb.ru (Esymeo) — Sat, 21 May 2022 19:56:11 +0300

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in justo quis neque auctor tristique nec eget nulla. Duis et ante porttitor, efficitur justo eu, tempus lectus. Nunc id egestas sem. Cras et vulputate lorem. Duis placerat tellus eget enim rhoncus egestas. Vestibulum non posuere felis. Duis a felis ac mi sagittis blandit. Maecenas eleifend accumsan libero a finibus. Nulla faucibus dui diam, nec fermentum risus lobortis sit amet. In ut mauris sed lectus pellentesque scelerisque sit amet sed ex. Fusce placerat lacus lacus, at rutrum purus aliquam ut. Morbi egestas rhoncus vulputate. Vivamus ut nisi hendrerit, suscipit massa in, malesuada purus.

��

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in justo quis neque auctor tristique nec eget nulla. Duis et ante porttitor, efficitur justo eu, tempus lectus. Nunc id egestas sem. Cras et vulputate lorem. Duis placerat tellus eget enim rhoncus egestas. Vestibulum non posuere felis. Duis a felis ac mi sagittis blandit. Maecenas eleifend accumsan libero a finibus. Nulla faucibus dui diam, nec fermentum risus lobortis sit amet. In ut mauris sed lectus pellentesque scelerisque sit amet sed ex. Fusce placerat lacus lacus, at rutrum purus aliquam ut. Morbi egestas rhoncus vulputate. Vivamus ut nisi hendrerit, suscipit massa in, malesuada purus.

��:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in justo quis neque auctor tristique nec eget nulla. Duis et ante porttitor, efficitur justo eu, tempus lectus. Nunc id egestas sem. Cras et vulputate lorem. Duis placerat tellus eget enim rhoncus egestas. Vestibulum non posuere felis. Duis a felis ac mi sagittis blandit. Maecenas eleifend accumsan libero a finibus. Nulla faucibus dui diam, nec fermentum risus lobortis sit amet. In ut mauris sed lectus pellentesque scelerisque sit amet sed ex. Fusce placerat lacus lacus, at rutrum purus aliquam ut. Morbi egestas rhoncus vulputate. Vivamus ut nisi hendrerit, suscipit massa in, malesuada purus.

�������� ����� ��� ��������

RPG CULT Grimoire | ������� ��� �����

���� ���� �������

Test form script

�������� ���� 1

���� ��� �������� ��-������� �������

���� ��� �������� ��-������� ��������

�������� ���� ��� ����

�������� ���� 2

�������� ���������

Lorem Ipsum

Lorem Ipsum

��

RPG CULT Grimoire | ��

��

�� 1

�� -��

�� -��

��

�� 2

��