TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 03:59:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade Guess

Browse Source
This commit is contained in:
TrèsAbhi committed 2025-09-01 19:22:38 -05:00
1 parent 7d164e415a
commit f56c31fb48
5 files changed
+80 -82
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/GuessBackground/index.tsx
+23 -23
View File
@@ -1,13 +1,13 @@
import { Box } from '@radix-ui/themes';
import { useEffect } from 'react';
import { awaitableModelDefinitions } from '../../core/awaitables/modelDefinitions';
import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
import { tankToDuelMember } from '../../core/blitzkit/tankToDuelMember';
import { Var } from '../../core/radix/var';
import { Duel } from '../../stores/duel';
import { GuessEphemeral } from '../../stores/guessEphemeral';
import { TankopediaEphemeral } from '../../stores/tankopediaEphemeral';
import './index.css';
import { Box } from "@radix-ui/themes";
import { useEffect } from "react";
import { awaitableModelDefinitions } from "../../core/awaitables/modelDefinitions";
import { awaitableProvisionDefinitions } from "../../core/awaitables/provisionDefinitions";
import { tankToDuelMember } from "../../core/blitzkit/tankToDuelMember";
import { Var } from "../../core/radix/var";
import { Duel } from "../../stores/duel";
import { Guess } from "../../stores/guessEphemeral";
import { TankopediaEphemeral } from "../../stores/tankopediaEphemeral";
import "./index.css";
const [modelDefinitions, provisionDefinitions] = await Promise.all([
awaitableModelDefinitions,
@@ -15,8 +15,8 @@ const [modelDefinitions, provisionDefinitions] = await Promise.all([
]);
export function GuessBackground() {
const guessState = GuessEphemeral.use((state) => state.guessState);
const tank = GuessEphemeral.use((state) => state.tank);
const guessState = Guess.use((state) => state.guessState);
const tank = Guess.use((state) => state.tank);
const mutateDuel = Duel.useMutation();
useEffect(() => {
@@ -37,13 +37,13 @@ export function GuessBackground() {
top="0"
left="0"
style={{
transitionDuration: '2s',
transitionDuration: "2s",
backgroundColor: Var(
guessState === null
? 'accent-2'
? "accent-2"
: guessState
? 'jade-3'
: 'tomato-3',
? "jade-3"
: "tomato-3"
),
}}
>
@@ -51,7 +51,7 @@ export function GuessBackground() {
width="100%"
height="100%"
style={{
background: `radial-gradient(circle, ${Var('color-panel-translucent')}, ${Var('color-panel-solid')})`,
background: `radial-gradient(circle, ${Var("color-panel-translucent")}, ${Var("color-panel-solid")})`,
}}
/>
</Box>
@@ -65,13 +65,13 @@ export function GuessBackground() {
left="0"
style={{
backgroundImage: `
radial-gradient(circle, ${Var('white-a1')} 20%, transparent 20%),
radial-gradient(circle at 0 0, ${Var('white-a1')} 10%, transparent 10%),
radial-gradient(circle at 100% 0, ${Var('white-a1')} 10%, transparent 10%),
radial-gradient(circle at 0 100%, ${Var('white-a1')} 10%, transparent 10%),
radial-gradient(circle at 100% 100%, ${Var('white-a1')} 10%, transparent 10%)
radial-gradient(circle, ${Var("white-a1")} 20%, transparent 20%),
radial-gradient(circle at 0 0, ${Var("white-a1")} 10%, transparent 10%),
radial-gradient(circle at 100% 0, ${Var("white-a1")} 10%, transparent 10%),
radial-gradient(circle at 0 100%, ${Var("white-a1")} 10%, transparent 10%),
radial-gradient(circle at 100% 100%, ${Var("white-a1")} 10%, transparent 10%)
`,
backgroundSize: '4rem 4rem',
backgroundSize: "4rem 4rem",
}}
/>
</>