Skip to content

Commit

Permalink
Update package dependencies, adjust build scripts, and refactor code …
Browse files Browse the repository at this point in the history 
…for stricter types and enhanced animations
  • Loading branch information
Caspar Oostendorp committed Jun 19, 2024
1 parent 3c5d735 commit 842efb0
Show file tree
Hide file tree
Showing 7 changed files with 168 additions and 154 deletions.
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"build-prod": "tsc && vite build",
"build": "vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"test": "vitest",
Expand Down Expand Up @@ -35,6 +36,7 @@
"react-router-dom": "^6.23.1",
"starknet": "^6.9.0",
"tailwindcss": "^3.4.4",
"tailwindcss-animate": "^1.0.7",
"upng-js": "^2.1.0",
"zustand": "^4.5.2"
},
Expand Down
2 changes: 1 addition & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function App() {
setClickedCell
} = useViewStateStore();

useDojoInteractHandler(pixelStore, gameData);
useDojoInteractHandler(pixelStore, gameData!);
useSyncedViewStateStore();
//</editor-fold>

Expand Down
5 changes: 4 additions & 1 deletion src/webtools/hooks/SimpleTileStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ export function useSimpleTileStore(baseUrl: string): TileStore {

}, []);

const prepare = (_scaleFactor: number, _bounds: Bounds): void => {
// TODO not yet implemented
}
const getTileset = (_scaleFactor: number, bounds: Bounds): Tileset | undefined => {

const [topLeft, bottomRight] = bounds
Expand Down Expand Up @@ -169,7 +172,7 @@ export function useSimpleTileStore(baseUrl: string): TileStore {
setState(newTiles);
};

return {getTile, setTile, setTiles, getTileset};
return {getTile, setTile, setTiles, getTileset, prepare};
}


Expand Down
2 changes: 1 addition & 1 deletion src/webtools/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export interface AppStore {
}

export interface TileStore {
prepare: (bounds: Bounds) => void;
prepare: (scaleFactor: number, bounds: Bounds) => void;
getTile: (key: string) => Tile | undefined | "";
setTile: (key: string, tile: Tile) => Promise<void>;
setTiles: (tiles: { key: string, tile: Tile }[]) => Promise<void>;
Expand Down
2 changes: 2 additions & 0 deletions src/webtools/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export const numRGBAToHex = (rgba: number | undefined) => {
const color = rgba >>> 8
return '#' + (color).toString(16).padStart(6, "0")
}
/*
export async function fillPixelData(imageUrl: string, setPixels: (pixels: { key: string, pixel: Pixel }[]) => void) {
// Fetch PNG file
Expand Down Expand Up @@ -156,6 +157,7 @@ export async function fillPixelData(imageUrl: string, setPixels: (pixels: { key:
}
setPixels(pixels)
}
*/


export async function clearIdb() {
Expand Down
302 changes: 152 additions & 150 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,157 +1,159 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
'new-primary': 'hsl(var(--new-primary))',
'brand-blackAccent': 'hsl(var(--brand-blackAccent))',
'brand-redAccent': 'hsl(var(--brand-redAccent))',
'brand-body': 'hsl(var(--brand-body))',
'brand-yellow': 'hsl(var(--brand-yellow))',
'brand-violet': 'hsl(var(--brand-violet))',
'brand-violetAccent': 'hsl(var(--brand-violetAccent))',
'brand-violetAccent01': 'hsl(var(--brand-violetAccent01))',
'brand-violetAccent02': 'hsl(var(--brand-violetAccent02))',
'brand-violetAccent03': 'hsl(var(--brand-violetAccent03))',
'brand-violetAccent04': 'hsl(var(--brand-violetAccent04))',
'brand-skyblue': 'hsl(var(--brand-skyblue))',
'brand-danger': 'hsl(var(--brand-danger))',
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
padding: {
'xs': '15px',
'sm': '30px',
'md': '40px',
'lg': '60px',
'xl': '100px'
},
margin: {
'xs': '15px',
'sm': '30px',
'md': '40px',
'lg': '60px',
'xl': '100px'
},
spacing: {
'xs': '15px',
'sm': '30px',
'md': '40px',
'lg': '60px',
'xl': '100px'
},
fontFamily: {
'silkscreen': ["Silkscreen", 'cursive'],
'noto-sans': ["Noto Sans", 'sans-serif'],
'emoji': ["Noto Emoji", 'sans-serif']
},
backgroundImage:{
'main': "url('/assets/background/main.png')",
'gradient-default': "linear-gradient(90deg, #00000000 0%, #000000 37%, #000000 62%, #00000000 100%)"
},
dropShadow: {
'card': '0px 3px 12px #0000008A',
'btn-default': '0px 3px 12px #000000A6'
},
keyframes: {
"accordion-down": {
from: {height: 0},
to: {height: "var(--radix-accordion-content-height)"},
},
"accordion-up": {
from: {height: "var(--radix-accordion-content-height)"},
to: {height: 0},
},
"fade-in": {
from: {opacity:0},
to: {opacity:1},
extend: {
colors: {
'bg-primary': "#2f1643",
'header-primary': "#171717",
'new-primary': 'hsl(var(--new-primary))',
'brand-blackAccent': 'hsl(var(--brand-blackAccent))',
'brand-redAccent': 'hsl(var(--brand-redAccent))',
'brand-body': 'hsl(var(--brand-body))',
'brand-yellow': 'hsl(var(--brand-yellow))',
'brand-violet': 'hsl(var(--brand-violet))',
'brand-violetAccent': 'hsl(var(--brand-violetAccent))',
'brand-violetAccent01': 'hsl(var(--brand-violetAccent01))',
'brand-violetAccent02': 'hsl(var(--brand-violetAccent02))',
'brand-violetAccent03': 'hsl(var(--brand-violetAccent03))',
'brand-violetAccent04': 'hsl(var(--brand-violetAccent04))',
'brand-skyblue': 'hsl(var(--brand-skyblue))',
'brand-danger': 'hsl(var(--brand-danger))',
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
padding: {
'xs': '15px',
'sm': '30px',
'md': '40px',
'lg': '60px',
'xl': '100px'
},
margin: {
'xs': '15px',
'sm': '30px',
'md': '40px',
'lg': '60px',
'xl': '100px'
},
spacing: {
'xs': '15px',
'sm': '30px',
'md': '40px',
'lg': '60px',
'xl': '100px'
},
fontFamily: {
'silkscreen': ["Silkscreen", 'cursive'],
'noto-sans': ["Noto Sans", 'sans-serif'],
'emoji': ["Noto Emoji", 'sans-serif']
},
backgroundImage: {
'main': "url('/assets/background/main.png')",
'gradient-default': "linear-gradient(90deg, #00000000 0%, #000000 37%, #000000 62%, #00000000 100%)"
},
dropShadow: {
'card': '0px 3px 12px #0000008A',
'btn-default': '0px 3px 12px #000000A6'
},
keyframes: {
"accordion-down": {
from: {height: 0},
to: {height: "var(--radix-accordion-content-height)"},
},
"accordion-up": {
from: {height: "var(--radix-accordion-content-height)"},
to: {height: 0},
},
"fade-in": {
from: {opacity: 0},
to: {opacity: 1},

},
"fade-out": {
from: {opacity: 1},
to: {opacity: 0}
},
"slide-left": {
'0%': {width: '72px', display: 'none'},
'100%': {width: '237px'},
},
"slide-right": {
'0%': {width: '237px'},
'100%': {width: '72px'},
},
"slide-left-icon": {
'0%': {width: '72px'},
'100%': {width: '253px'},
},
"slide-right-icon": {
'0': {width: '253px'},
'100': {width: '72px'},
}
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"fade-in": "fade-in 0.3s ease-in-out forwards",
"fade-out": "fade-out 0.3s ease-in-out forwards",
"slide-left": "slide-left 0.3s linear forwards",
"slide-right": "slide-right 0.3s linear forwards",
"slide-left-icon": "slide-left-icon 0.3s linear forwards",
"slide-right-icon": "slide-right-icon 0.3s linear forwards",
},
boxShadow: {
glow: '0 0 10px 0 rgba(255, 255, 255, 1)',
}
},
"fade-out": {
from: {opacity:1},
to: {opacity:0}
},
"slide-left": {
'0%': {width: '72px', display: 'none'},
'100%': {width: '237px'},
},
"slide-right": {
'0%': {width: '237px'},
'100%': {width: '72px'},
},
"slide-left-icon": {
'0%': {width: '72px'},
'100%': {width: '253px'},
},
"slide-right-icon": {
'0': {width: '253px'},
'100': {width: '72px'},
}
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"fade-in": "fade-in 0.3s ease-in-out forwards",
"fade-out": "fade-out 0.3s ease-in-out forwards",
"slide-left": "slide-left 0.3s linear forwards",
"slide-right": "slide-right 0.3s linear forwards",
"slide-left-icon": "slide-left-icon 0.3s linear forwards",
"slide-right-icon": "slide-right-icon 0.3s linear forwards",
},
boxShadow: {
glow: '0 0 10px 0 rgba(255, 255, 255, 1)',
}
},
},
plugins: [require("tailwindcss-animate")],
plugins: [require("tailwindcss-animate")],
}
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3805,6 +3805,11 @@ symbol-observable@^4.0.0:
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==

tailwindcss-animate@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==

tailwindcss@^3.4.4:
version "3.4.4"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.4.tgz#351d932273e6abfa75ce7d226b5bf3a6cb257c05"
Expand Down

0 comments on commit 842efb0

Please sign in to comment.