Skip to content

Instantly share code, notes, and snippets.

View mateuszsokola's full-sized avatar

Matéush mateuszsokola

View GitHub Profile
@mateuszsokola
mateuszsokola / mobile-swiper.jsx
Last active February 4, 2024 12:43
MobileSwiper from 2048-in-react
import { useCallback, useEffect, useState, useRef } from "react";
/**
* MobileSwiper component for handling touch swipe gestures on mobile devices.
*
* @component
* @param {Object} props - React component props
* @param {ReactNode} props.children - The content to be wrapped by the swiper
* @param {function} props.onSwipe - Callback function triggered on swipe with an object containing deltaX and deltaY
* @returns {JSX.Element} - React component
@mateuszsokola
mateuszsokola / board.module.css
Created December 25, 2023 10:49
2048-in-react - Desktop CSS
.board {
position: relative;
width: calc(var(--pixel-size) * 8 * 4 + var(--pixel-size) * 5);
}
.grid {
display: flex;
flex-wrap: wrap;
background: var(--secondary-background);
border: calc(var(--pixel-size) * 0.5) solid var(--secondary-background);
@mateuszsokola
mateuszsokola / board.module.css
Last active December 25, 2023 11:07
2048-in-react - Mobile CSS
.board {
position: relative;
width: calc(var(--pixel-size) * 8 * 4 + var(--pixel-size) * 5);
}
.grid {
display: flex;
flex-wrap: wrap;
background: var(--secondary-background);
border: calc(var(--pixel-size) * 0.5) solid var(--secondary-background);
@mateuszsokola
mateuszsokola / score.module.css
Last active December 12, 2023 13:43
2048-in-react
.score {
width: var(--pixel-size) * 75;
background: var(--secondary-background);
border: var(--pixel-size) solid var(--secodary-background);
border-radius: calc(var(--pixel-size) * 0.75);
color: var(--tile-background);
font-weight: bold;
font-size: calc(var(--pixel-size) * 2);
text-align: center;
text-transform: uppercase;
if (process.env.NODE_ENV !== 'production') {
// your unfinished code.
}
import { Matchers } from '@pact-foundation/pact';
import fetchJob from '../fetchJob';
describe('Services', () => {
beforeAll(() => provider.setup());
afterAll(() => provider.finalize());
describe('fetchJob', () => {
/**
* @param {string} string
* @param {RegExp} pattern
*/
export default function split(string:string, pattern: RegExp):Array<string> {
return string.match(pattern) || [];
}
import { curryRight, flow, join } from "lodash";
import split from "./split";
import reverse from "./reverse";
/**
* Thousand Regular Expression
*/
const thousandRegExp:RegExp = /[0-9]{1,3}/g;
// without immutable
initialState.numbers = numbers.filter((num:number):boolean => {
return num % 2 === 0;
})
console.log('after update:', initialState);
// after update: { numbers: [ 2, 4, 6 ] }
type State = {
numbers: Array<number>;
}
const initialState:State = {
numbers: [1, 2, 3, 4, 5, 6]
};
const { numbers } = initialState;