Chore/bump packages (#50)

* initial

* fix opacity

* bump
This commit is contained in:
Viktor Rådberg
2025-11-17 20:56:52 +01:00
committed by GitHub
parent ea5da632a8
commit b6a402bc9f
7 changed files with 1366 additions and 877 deletions

View File

@@ -1,7 +1,7 @@
{
"name": "life-trinket",
"private": true,
"version": "1.0.4",
"version": "1.0.5",
"type": "commonjs",
"engines": {
"node": ">=20",
@@ -31,24 +31,24 @@
"devDependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@savvywombat/tailwindcss-grid-areas": "^4.0.0",
"@svgr/cli": "^8.1.0",
"@tailwindcss/postcss": "^4.1.17",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@types/semver": "^7.5.8",
"@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.18.0",
"@vitejs/plugin-react-swc": "^3.8.0",
"autoprefixer": "^10.4.20",
"autoprefixer": "^10.4.22",
"eslint": "^8.57.1",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.19",
"firebase-tools": "^13.31.2",
"install": "^0.13.0",
"postcss": "^8.5.3",
"postcss": "^8.5.6",
"prettier": "2.8.8",
"prop-types": "^15.8.1",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.1.17",
"typescript": "^5.7.3",
"vite": "^5.4.14",
"vite-plugin-pwa": "^0.20.5"

2099
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
'@tailwindcss/postcss': {},
autoprefixer: {},
},
}

View File

@@ -2,10 +2,7 @@ import { Rotation } from '../../Types/Player';
import { twc } from 'react-twc';
//TODO Create provider for this
import tailwindConfig from './../../../tailwind.config';
import resolveConfig from 'tailwindcss/resolveConfig';
const fullConfig = resolveConfig(tailwindConfig);
import { baseColors } from './../../../tailwind.config';
const Container = twc.div`
flex
@@ -59,12 +56,12 @@ export const OutlinedText: React.FC<OutlinedTextProps> = ({
fontSize,
fontWeight,
strokeWidth: strokeWidth || '1vmin',
color: fillColor || fullConfig.theme.colors.common.black,
color: fillColor || baseColors.common.black,
WebkitTextStroke: `${strokeWidth || '1vmin'} ${
strokeColor || fullConfig.theme.colors.common.white
strokeColor || baseColors.common.white
}`,
WebkitTextFillColor:
fillColor || fullConfig.theme.colors.common.black,
fillColor || baseColors.common.black,
rotate: `${calcRotation}deg`,
}}
>

View File

@@ -18,7 +18,7 @@ import { Orientation } from '../../../Types/Settings';
const LayoutsRadioGroup = twc.div`flex flex-row justify-center items-center gap-4 self-center w-full`;
const Label = twc.label`flex flex-row relative max-w-[118px] hover:bg-primary-main hover:bg-opacity-5 rounded-2xl cursor-pointer`;
const Label = twc.label`flex flex-row relative max-w-[118px] hover:bg-white/[0.03] rounded-2xl cursor-pointer`;
const Input = twc.input`peer sr-only`;

View File

@@ -1,6 +1,32 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@theme {
--color-primary-main: #78A083;
--color-primary-dark: #608069;
--color-secondary-main: #5D7965;
--color-secondary-dark: #4a6151;
--color-background-default: #2E3041;
--color-background-spotlight: #777BA7;
--color-background-backdrop: rgba(0, 0, 0, 0.3);
--color-background-settings: rgba(0, 0, 0, 0.8);
--color-icons-dark: #000000;
--color-icons-light: #F9FFE3;
--color-icons-gold: #FFD700;
--color-text-primary: #F9FFE3;
--color-text-secondary: #c7ccb6;
--color-common-white: #F9FFE3;
--color-common-black: #000000;
--color-lifeCounter-text: rgba(0, 0, 0, 0.4);
--color-lifeCounter-lostWrapper: #000000;
--color-interface-loseButton-background: #43434380;
--color-interface-recentDifference-background: rgba(255, 255, 255, 0.6);
--color-interface-recentDifference-text: #333333;
--font-size-xxs: 0.625rem;
--line-height-xxs: 1rem;
--breakpoint-modalSm: 548px;
}
html {
overflow: hidden;
@@ -14,7 +40,7 @@ html,
body {
height: 100%;
position: relative;
background-color: theme('colors.background.default');
background-color: var(--color-background-default);
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -31,7 +57,7 @@ code {
monospace;
}
// hide scrollbar globally
/* hide scrollbar globally */
::-webkit-scrollbar {
display: none;
}
@@ -43,18 +69,18 @@ code {
/* Track */
::-webkit-scrollbar-track {
background-color: theme('colors.background.default');
background-color: var(--color-background-default);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: theme('colors.primary.dark');
background: var(--color-primary-dark);
border-radius: 32px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: theme('colors.primary.main');
background: var(--color-primary-main);
}
* {
@@ -79,6 +105,67 @@ code {
scrollbar-width: auto;
-ms-overflow-style: auto;
}
/* Grid template areas */
.grid-areas-onePlayerLandscape {
grid-template-areas: 'player0 player0';
}
.grid-areas-onePlayerPortrait {
grid-template-areas: 'player0' 'player0';
}
.grid-areas-twoPlayersOppositeLandscape {
grid-template-areas: 'player0' 'player1';
}
.grid-areas-twoPlayersOppositePortrait {
grid-template-areas: 'player0 player1' 'player0 player1';
}
.grid-areas-twoPlayersSameSideLandscape {
grid-template-areas: 'player0 player1';
}
.grid-areas-threePlayers {
grid-template-areas: 'player0 player0' 'player1 player2';
}
.grid-areas-threePlayersSide {
grid-template-areas: 'player0 player0 player0 player2' 'player1 player1 player1 player2';
}
.grid-areas-fourPlayerPortrait {
grid-template-areas: 'player0 player1 player1 player1 player1 player3' 'player0 player2 player2 player2 player2 player3';
}
.grid-areas-fourPlayer {
grid-template-areas: 'player0 player1' 'player2 player3';
}
.grid-areas-fivePlayers {
grid-template-areas: 'player0 player0 player0 player1 player1 player1' 'player2 player2 player3 player3 player4 player4';
}
.grid-areas-fivePlayersSide {
grid-template-areas: 'player0 player0 player0 player0 player0 player1 player1 player1 player1 player1 player2' 'player3 player3 player3 player3 player3 player4 player4 player4 player4 player4 player2';
}
.grid-areas-sixPlayers {
grid-template-areas: 'player0 player1 player2' 'player3 player4 player5';
}
.grid-areas-sixPlayersSide {
grid-template-areas: 'player0 player1 player1 player1 player1 player1 player1 player2 player2 player2 player2 player2 player2 player3' 'player0 player4 player4 player4 player4 player4 player4 player5 player5 player5 player5 player5 player5 player3';
}
/* Grid area assignments */
.grid-in-player0 {
grid-area: player0;
}
.grid-in-player1 {
grid-area: player1;
}
.grid-in-player2 {
grid-area: player2;
}
.grid-in-player3 {
grid-area: player3;
}
.grid-in-player4 {
grid-area: player4;
}
.grid-in-player5 {
grid-area: player5;
}
}
@keyframes background-orb {
@@ -120,7 +207,7 @@ code {
}
.spotlight1 {
background: theme('colors.background.default');
background: var(--color-background-default);
position: fixed;
height: 10vmax;
@@ -142,7 +229,7 @@ code {
}
.spotlight2 {
background: theme('colors.background.default');
background: var(--color-background-default);
position: fixed;
height: 30vmax;
@@ -166,7 +253,7 @@ input[type='range'] {
transition: background 0ms ease-in;
margin: 10px 0;
width: 100%;
background: theme('colors.secondary.main');
background: var(--color-secondary-main);
}
input[type='range']:focus {
outline: none;
@@ -187,7 +274,7 @@ input[type='range']::-webkit-slider-thumb {
height: 20px;
width: 20px;
border-radius: 100px;
background: theme('colors.primary.main');
background: var(--color-primary-main);
cursor: pointer;
margin-top: -3px;
}
@@ -207,7 +294,7 @@ input[type='range']::-moz-range-thumb {
height: 20px;
width: 20px;
border-radius: 100px;
background: theme('colors.primary.main');
background: var(--color-primary-main);
cursor: pointer;
}
@@ -225,7 +312,7 @@ input[type='range']::-ms-thumb {
height: 20px;
width: 20px;
border-radius: 100px;
background: theme('colors.primary.main');
background: var(--color-primary-main);
cursor: pointer;
margin-top: -3px;
}

View File

@@ -1,5 +1,3 @@
//@ts-expect-error - tailwindcss-grid-areas does not have typescript support
import tailwindcssGridAreas from '@savvywombat/tailwindcss-grid-areas';
import type { Config } from 'tailwindcss';
export const baseColors = {
@@ -107,6 +105,6 @@ export default {
},
},
},
plugins: [tailwindcssGridAreas],
plugins: [],
} satisfies Config;
// #98FF98