From 293d44f6b91c5daa00dd8395d6b87a1fda8d3e08 Mon Sep 17 00:00:00 2001 From: von-steinkirch Date: Thu, 10 Jul 2025 18:45:21 -1000 Subject: [PATCH 1/9] several clean ups with predict --- src/app/predict/page.tsx | 2 +- src/components/LogiaChart.tsx | 1 - .../{PredictCards.tsx => Predict.tsx} | 89 +++--- src/config/logiaChart.ts | 13 - src/i18n/predict.json | 54 +++- src/styles/predict.css | 295 +++++++++++++++-- src/styles/predictCards.css | 299 ------------------ src/utils/chartFilling.ts | 68 +--- 8 files changed, 365 insertions(+), 456 deletions(-) rename src/components/{PredictCards.tsx => Predict.tsx} (56%) delete mode 100644 src/styles/predictCards.css diff --git a/src/app/predict/page.tsx b/src/app/predict/page.tsx index bbd5086..759df69 100644 --- a/src/app/predict/page.tsx +++ b/src/app/predict/page.tsx @@ -1,4 +1,4 @@ -import PredictCards from "../../components/PredictCards"; +import PredictCards from "../../components/Predict"; import predictStrings from "../../i18n/predict.json"; import "../../styles/predict.css"; diff --git a/src/components/LogiaChart.tsx b/src/components/LogiaChart.tsx index 7b5ec15..fad8092 100644 --- a/src/components/LogiaChart.tsx +++ b/src/components/LogiaChart.tsx @@ -198,7 +198,6 @@ async function calculateChartData( const chartData: ChartData = { planets, houses, - aspects: [], birthDate, birthTime, latitude: coordinates.lat, diff --git a/src/components/PredictCards.tsx b/src/components/Predict.tsx similarity index 56% rename from src/components/PredictCards.tsx rename to src/components/Predict.tsx index 61f364b..1a75175 100644 --- a/src/components/PredictCards.tsx +++ b/src/components/Predict.tsx @@ -1,9 +1,8 @@ "use client"; -import React, { useState } from "react"; +import { useState } from "react"; import predictI18n from "../i18n/predict.json"; -import { PREDICTION_TARGETS } from "../config/crypto"; -import "../styles/predictCards.css"; +import "../styles/predict.css"; import { FaChartLine } from "react-icons/fa"; interface PredictCard { @@ -12,24 +11,26 @@ interface PredictCard { subtitle: string; } -const worldEventCards: PredictCard[] = Object.entries(PREDICTION_TARGETS).map( - ([key, value]) => ({ +const worldEventCards: PredictCard[] = Object.entries(predictI18n.finance.targets).map( + ([key, target]) => ({ id: key, - title: value.title, - subtitle: `will ${key} reach ${value.target} by the end of the year?`, + title: predictI18n.finance.assets[key as keyof typeof predictI18n.finance.assets], + subtitle: predictI18n.finance.subtitleTemplate + .replace('{key}', key) + .replace('{target}', target), }), ); const PredictCards: React.FC = () => { const [selectedOptions, setSelectedOptions] = useState< - Record + Record >({}); const [activeTab, setActiveTab] = useState< - "world" | "personal" | "relationships" | "finance" - >("personal"); + typeof predictI18n.tabValues.world | typeof predictI18n.tabValues.personal | typeof predictI18n.tabValues.relationships | typeof predictI18n.tabValues.finance + >(predictI18n.tabValues.personal); const [question, setQuestion] = useState(""); - const handleOptionClick = (cardId: string, option: "yes" | "no") => { + const handleOptionClick = (cardId: string, option: typeof predictI18n.optionValues.yes | typeof predictI18n.optionValues.no) => { setSelectedOptions((prev) => ({ ...prev, [cardId]: prev[cardId] === option ? null : option, @@ -43,31 +44,27 @@ const PredictCards: React.FC = () => { } }; - const handleCalculateSynastry = () => { - // TODO: Implement synastry calculation logic - }; - const renderWorldEventCards = () => (
{worldEventCards.map((card) => (

{card.title}

-

{card.subtitle}

@@ -84,11 +81,11 @@ const PredictCards: React.FC = () => { type="text" value={question} onChange={(e) => setQuestion(e.target.value)} - placeholder="Type your question here..." + placeholder={predictI18n.personal.placeholder} className="question-input" />
@@ -106,15 +103,9 @@ const PredictCards: React.FC = () => { ))}

{predictI18n.synastry.conclusion}

-
-
@@ -123,19 +114,13 @@ const PredictCards: React.FC = () => { const renderWorldCards = () => (
-

World Predictions

+

{predictI18n.world.title}

- Explore predictions about global events, politics, and world affairs. + {predictI18n.world.description}

-
- +
+
@@ -145,35 +130,35 @@ const PredictCards: React.FC = () => {
- {activeTab === "personal" + {activeTab === predictI18n.tabValues.personal ? renderPersonalPredictions() - : activeTab === "relationships" + : activeTab === predictI18n.tabValues.relationships ? renderRelationshipCards() - : activeTab === "finance" + : activeTab === predictI18n.tabValues.finance ? renderWorldEventCards() : renderWorldCards()}
diff --git a/src/config/logiaChart.ts b/src/config/logiaChart.ts index 0c20c71..ede97ee 100644 --- a/src/config/logiaChart.ts +++ b/src/config/logiaChart.ts @@ -1,8 +1,3 @@ -import logiaChartTranslations from "../i18n/logiaChart.json"; - -export const ZODIAC_SIGNS = logiaChartTranslations.en - .zodiacSigns as readonly string[]; - export interface PlanetPosition { name: string; position: number; @@ -10,17 +5,9 @@ export interface PlanetPosition { house: number; } -export interface Aspect { - planet1: string; - planet2: string; - type: string; - orb: number; -} - export interface ChartData { planets: PlanetPosition[]; houses: number[]; - aspects: Aspect[]; birthDate: string; birthTime: string; latitude: number; diff --git a/src/i18n/predict.json b/src/i18n/predict.json index f1353ad..0821663 100644 --- a/src/i18n/predict.json +++ b/src/i18n/predict.json @@ -8,10 +8,61 @@ "relationships": "relationships", "world": "world" }, + "tabValues": { + "finance": "finance", + "personal": "personal", + "relationships": "relationships", + "world": "world" + }, "options": { "yes": "yes", "no": "no" }, + "optionValues": { + "yes": "yes", + "no": "no" + }, + "personal": { + "placeholder": "type your question here...", + "submit": "submit" + }, + "world": { + "title": "world predictions", + "description": "explore predictions about global events, politics, and world affairs.", + "comingSoon": "coming soon" + }, + "finance": { + "subtitleTemplate": "will {key} reach {target} by the end of the year?", + "viewChartTitle": "view chart", + "assets": { + "bitcoin": "bitcoin price", + "ethereum": "ethereum price", + "solana": "solana price", + "cardano": "cardano price", + "pepe": "pepe price", + "tron": "tron price", + "monero": "monero price", + "hyperliquid": "hyperliquid price", + "story": "story price", + "worldcoin": "worldcoin price", + "trump": "trump price", + "bittensor": "bittensor price" + }, + "targets": { + "bitcoin": "$150,000", + "ethereum": "$5,000", + "solana": "$500", + "cardano": "$10", + "pepe": "$0.01", + "tron": "$1", + "monero": "$500", + "hyperliquid": "$100", + "story": "$10", + "worldcoin": "$50", + "trump": "$50", + "bittensor": "$400" + } + }, "synastry": { "title": "understanding synastry", "description": "synastry is the science of comparing two birth charts to understand the dynamics of a relationship. it reveals how two people interact, their compatibility, and potential challenges they might face together.", @@ -23,6 +74,7 @@ "natural strengths in the relationship", "timing of important relationship milestones" ], - "conclusion": "this analysis helps you understand the deeper dynamics of your relationships and provides guidance for building stronger, more harmonious connections." + "conclusion": "this analysis helps you understand the deeper dynamics of your relationships and provides guidance for building stronger, more harmonious connections.", + "calculateButton": "calculate a synastry" } } diff --git a/src/styles/predict.css b/src/styles/predict.css index e9b19cd..006e269 100644 --- a/src/styles/predict.css +++ b/src/styles/predict.css @@ -28,65 +28,306 @@ } } +.predict-cards-container { + width: 100%; + max-width: min(1200px, 95vw); + margin: 0 auto; + padding: clamp(0.5rem, 2vw, 1rem); +} + +.predict-tabs { + display: flex; + width: 100%; + margin-bottom: clamp(2rem, 5vh, 3rem); + border-bottom: 2px solid var(--color-primary); + background-color: var(--card-bg); + border-radius: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 0 0; + overflow: hidden; +} + +.tab-button { + flex: 1; + padding: clamp(0.6rem, 1.5vw, 1rem); + border: none; + background: none; + font-size: clamp(1rem, 2vw, 1.2rem); + font-weight: 600; + color: var(--text-color); + cursor: pointer; + transition: all 0.3s ease; + text-align: center; + position: relative; +} + +.tab-button:hover { + background-color: var(--color-primary); + color: var(--background-color); +} + +.tab-button.active { + color: var(--text-color); + background-color: var(--card-bg); + font-weight: 700; + box-shadow: 0 -2px 0 var(--color-primary) inset; +} + +.tab-button.active::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background-color: var(--color-primary); +} + .predict-cards-grid { display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1.5rem; - max-width: 1200px; - margin: 0 auto; - padding: 0 1rem; + grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); + gap: clamp(2em, 5vw, 4em); + width: 100%; + max-width: min(1200px, 95vw); + margin-top: clamp(2rem, 5vh, 4rem); + padding: 0 clamp(0.5rem, 2vw, 1rem); } .predict-card { - background: var(--white-90); - border-radius: 12px; - padding: 1.5rem; - box-shadow: 0 4px 6px var(--black-10); - transition: transform 0.2s ease; - border: 2px solid var(--primary-color); + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + min-height: 160px; + padding: clamp(1.5rem, 3vw, 2rem); + border-radius: clamp(1rem, 3vw, 2rem); + border: 1px solid var(--color-primary); + background-color: var(--card-bg); + box-shadow: + 0 8px 32px var(--color-shadow-black), + 0 0 15px var(--glow-shadow), + 0 0 30px var(--glow-shadow); + backdrop-filter: blur(8px); + transition: all 0.3s ease; } .predict-card:hover { transform: translateY(-2px); + border-color: var(--color-primary); + box-shadow: + 0 12px 40px var(--color-shadow-black), + 0 0 20px var(--glow-shadow-hover), + 0 0 40px var(--glow-shadow), + 0 0 60px var(--glow-pink-light); } -.card-title { - font-size: 1.25rem; - font-weight: 600; +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; margin-bottom: 0.5rem; - color: var(--primary-color); +} + +.card-title { + font-size: clamp(1.3rem, 2.2vw, 1.5rem); + font-weight: 800; + margin: 0; + color: var(--text-color); + flex: 1; } .card-subtitle { - font-size: 0.875rem; + font-size: clamp(0.85rem, 1.5vw, 0.9rem); + line-height: 1.6; + font-weight: bold; color: var(--text-color); - margin-bottom: 1.5rem; + opacity: var(--opacity-light); + margin-bottom: clamp(1rem, 2vw, 1.5rem); } .card-options { display: flex; - gap: 1rem; + gap: clamp(1rem, 2vw, 1.5rem); + width: 100%; justify-content: center; } .option-button { - padding: 0.5rem 1.5rem; - border-radius: 20px; - border: 1px solid var(--primary-color); + flex: 1; + max-width: 120px; + padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.8rem, 1.5vw, 1rem); + font-size: clamp(0.85rem, 1.5vw, 0.9rem); + font-weight: 700; + color: var(--color-primary); background: transparent; - color: var(--primary-color); + border: 1px solid var(--color-primary); + border-radius: 0.4rem; cursor: pointer; - transition: all 0.2s ease; + transition: all 0.3s ease; } .option-button:hover { - background: var(--primary-color); - color: var(--white-90); + color: var(--background-color); + background: var(--color-primary); + transform: translateY(-1px); } .option-button.selected { - background: var(--primary-color); - color: var(--white-90); + color: var(--background-color); + background: var(--color-primary); + box-shadow: 0 0 15px var(--glow-shadow); +} + +.personal-predictions-container { + width: 100%; + max-width: min(800px, 95vw); + margin: 0 auto; + padding: clamp(2rem, 5vh, 4rem) clamp(0.5rem, 2vw, 1rem); +} + +.question-form { + display: flex; + flex-direction: column; + gap: 1rem; + width: 100%; +} + +.question-input { + width: 100%; + padding: clamp(1rem, 2vw, 1.5rem); + font-size: clamp(1rem, 2vw, 1.2rem); + border: 2px solid var(--color-primary); + border-radius: clamp(0.5rem, 1vw, 1rem); + background-color: var(--card-bg); + color: var(--text-color); + transition: all 0.3s ease; +} + +.question-input:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 15px var(--glow-shadow); +} + +.question-input::placeholder { + color: var(--text-color); + opacity: 0.6; +} + +.submit-button { + align-self: center; + padding: clamp(0.8rem, 1.5vw, 1rem) clamp(2rem, 3vw, 3rem); + font-size: clamp(0.9rem, 1.5vw, 1.1rem); + font-weight: 600; + color: var(--background-color); + background: var(--color-primary); + border: none; + border-radius: clamp(0.5rem, 1vw, 1rem); + cursor: pointer; + transition: all 0.3s ease; + min-width: 200px; +} + +.submit-button:hover { + transform: translateY(-2px); + box-shadow: 0 0 20px var(--glow-shadow-hover); +} + +.submit-button:active { + transform: translateY(0); +} + +.button-container { + display: flex; + justify-content: center; + margin-top: 2rem; +} + +.world-card { + max-width: 800px; + margin: 2rem auto; + text-align: left; +} + +.world-content { + width: 100%; +} + +.world-content p { + color: var(--text-color); + line-height: 1.2; + margin-bottom: 0.8rem; + font-size: clamp(0.85rem, 1.5vw, 0.9rem); + opacity: var(--opacity-light); + font-weight: 600; +} + +.synastry-card { + max-width: 800px; + margin: 2rem auto; + text-align: left; +} + +.synastry-content { + width: 100%; +} + +.synastry-content p { + color: var(--text-color); + line-height: 1.2; + margin-bottom: 0.8rem; + font-size: clamp(0.85rem, 1.5vw, 0.9rem); + opacity: var(--opacity-light); + font-weight: 600; +} + +.synastry-content ul { + list-style-type: none; + padding-left: 1.5rem; + margin: 1rem 0; +} + +.synastry-content li { + color: var(--text-color); + margin-bottom: 0.5rem; + position: relative; + padding-left: 1.5rem; + line-height: 1.3; + font-size: clamp(0.85rem, 1.5vw, 0.9rem); + opacity: var(--opacity-light); + font-weight: 600; +} + +.synastry-content li:before { + content: "•"; + color: var(--color-primary); + position: absolute; + left: 0; + font-size: 1.2rem; +} + +.view-chart-button { + background: none; + border: none; + color: var(--color-primary); + cursor: pointer; + padding: 0.5rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + margin-left: 0.5rem; +} + +.view-chart-button:hover { + background-color: rgba(var(--color-primary-rgb), 0.1); + transform: scale(1.1); +} + +.view-chart-button svg { + width: 1.2rem; + height: 1.2rem; } @media (max-width: 1024px) { diff --git a/src/styles/predictCards.css b/src/styles/predictCards.css deleted file mode 100644 index 2e82380..0000000 --- a/src/styles/predictCards.css +++ /dev/null @@ -1,299 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -.predict-cards-container { - width: 100%; - max-width: min(1200px, 95vw); - margin: 0 auto; - padding: clamp(0.5rem, 2vw, 1rem); -} - -.predict-tabs { - display: flex; - width: 100%; - margin-bottom: clamp(2rem, 5vh, 3rem); - border-bottom: 2px solid var(--color-primary); - background-color: var(--card-bg); - border-radius: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 0 0; - overflow: hidden; -} - -.tab-button { - flex: 1; - padding: clamp(0.6rem, 1.5vw, 1rem); - border: none; - background: none; - font-size: clamp(1rem, 2vw, 1.2rem); - font-weight: 600; - color: var(--text-color); - cursor: pointer; - transition: all 0.3s ease; - text-align: center; - position: relative; -} - -.tab-button:hover { - background-color: var(--color-primary); - color: var(--background-color); -} - -.tab-button.active { - color: var(--text-color); - background-color: var(--card-bg); - font-weight: 700; - box-shadow: 0 -2px 0 var(--color-primary) inset; -} - -.tab-button.active::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 2px; - background-color: var(--color-primary); -} - -.predict-cards-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); - gap: clamp(2em, 5vw, 4em); - width: 100%; - max-width: min(1200px, 95vw); - margin-top: clamp(2rem, 5vh, 4rem); - padding: 0 clamp(0.5rem, 2vw, 1rem); -} - -.predict-card { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - min-height: 160px; - padding: clamp(1.5rem, 3vw, 2rem); - border-radius: clamp(1rem, 3vw, 2rem); - border: 1px solid var(--color-primary); - background-color: var(--card-bg); - box-shadow: - 0 8px 32px var(--color-shadow-black), - 0 0 15px var(--glow-shadow), - 0 0 30px var(--glow-shadow); - backdrop-filter: blur(8px); - transition: all 0.3s ease; -} - -.predict-card:hover { - transform: translateY(-2px); - border-color: var(--color-primary); - box-shadow: - 0 12px 40px var(--color-shadow-black), - 0 0 20px var(--glow-shadow-hover), - 0 0 40px var(--glow-shadow), - 0 0 60px var(--glow-pink-light); -} - -.card-header { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - margin-bottom: 0.5rem; -} - -.card-title { - font-size: clamp(1.3rem, 2.2vw, 1.5rem); - font-weight: 800; - margin: 0; - color: var(--text-color); - flex: 1; -} - -.card-subtitle { - font-size: clamp(0.85rem, 1.5vw, 0.9rem); - line-height: 1.6; - font-weight: bold; - color: var(--text-color); - opacity: var(--opacity-light); - margin-bottom: clamp(1rem, 2vw, 1.5rem); -} - -.card-options { - display: flex; - gap: clamp(1rem, 2vw, 1.5rem); - width: 100%; - justify-content: center; -} - -.option-button { - flex: 1; - max-width: 120px; - padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.8rem, 1.5vw, 1rem); - font-size: clamp(0.85rem, 1.5vw, 0.9rem); - font-weight: 700; - color: var(--color-primary); - background: transparent; - border: 1px solid var(--color-primary); - border-radius: 0.4rem; - cursor: pointer; - transition: all 0.3s ease; -} - -.option-button:hover { - color: var(--background-color); - background: var(--color-primary); - transform: translateY(-1px); -} - -.option-button.selected { - color: var(--background-color); - background: var(--color-primary); - box-shadow: 0 0 15px var(--glow-shadow); -} - -.personal-predictions-container { - width: 100%; - max-width: min(800px, 95vw); - margin: 0 auto; - padding: clamp(2rem, 5vh, 4rem) clamp(0.5rem, 2vw, 1rem); -} - -.question-form { - display: flex; - flex-direction: column; - gap: 1rem; - width: 100%; -} - -.question-input { - width: 100%; - padding: clamp(1rem, 2vw, 1.5rem); - font-size: clamp(1rem, 2vw, 1.2rem); - border: 2px solid var(--color-primary); - border-radius: clamp(0.5rem, 1vw, 1rem); - background-color: var(--card-bg); - color: var(--text-color); - transition: all 0.3s ease; -} - -.question-input:focus { - outline: none; - border-color: var(--color-primary); - box-shadow: 0 0 15px var(--glow-shadow); -} - -.question-input::placeholder { - color: var(--text-color); - opacity: 0.6; -} - -.submit-button { - align-self: center; - padding: clamp(0.8rem, 1.5vw, 1rem) clamp(2rem, 3vw, 3rem); - font-size: clamp(0.9rem, 1.5vw, 1.1rem); - font-weight: 600; - color: var(--background-color); - background: var(--color-primary); - border: none; - border-radius: clamp(0.5rem, 1vw, 1rem); - cursor: pointer; - transition: all 0.3s ease; - min-width: 200px; -} - -.submit-button:hover { - transform: translateY(-2px); - box-shadow: 0 0 20px var(--glow-shadow-hover); -} - -.submit-button:active { - transform: translateY(0); -} - -.world-card { - max-width: 800px; - margin: 2rem auto; - text-align: left; -} - -.world-content { - width: 100%; -} - -.world-content p { - color: var(--text-color); - line-height: 1.2; - margin-bottom: 0.8rem; - font-size: clamp(0.85rem, 1.5vw, 0.9rem); - opacity: var(--opacity-light); - font-weight: 600; -} - -.synastry-card { - max-width: 800px; - margin: 2rem auto; - text-align: left; -} - -.synastry-content { - width: 100%; -} - -.synastry-content p { - color: var(--text-color); - line-height: 1.2; - margin-bottom: 0.8rem; - font-size: clamp(0.85rem, 1.5vw, 0.9rem); - opacity: var(--opacity-light); - font-weight: 600; -} - -.synastry-content ul { - list-style-type: none; - padding-left: 1.5rem; - margin: 1rem 0; -} - -.synastry-content li { - color: var(--text-color); - margin-bottom: 0.5rem; - position: relative; - padding-left: 1.5rem; - line-height: 1.3; - font-size: clamp(0.85rem, 1.5vw, 0.9rem); - opacity: var(--opacity-light); - font-weight: 600; -} - -.synastry-content li:before { - content: "•"; - color: var(--color-primary); - position: absolute; - left: 0; - font-size: 1.2rem; -} - -.view-chart-button { - background: none; - border: none; - color: var(--color-primary); - cursor: pointer; - padding: 0.5rem; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s ease; - margin-left: 0.5rem; -} - -.view-chart-button:hover { - background-color: rgba(var(--color-primary-rgb), 0.1); - transform: scale(1.1); -} - -.view-chart-button svg { - width: 1.2rem; - height: 1.2rem; -} diff --git a/src/utils/chartFilling.ts b/src/utils/chartFilling.ts index 2df9905..8e3e849 100644 --- a/src/utils/chartFilling.ts +++ b/src/utils/chartFilling.ts @@ -1,6 +1,5 @@ import { ChartData, - ZODIAC_SIGNS, HOUSE_ANGLES, ZODIAC_SYMBOLS, } from "../config/logiaChart"; @@ -34,12 +33,13 @@ export function updateOrderedSigns( ascendantSign: string, chartData: ChartData, ) { - const ascendantIndex = ZODIAC_SIGNS.findIndex( + const zodiacSigns = chartStrings.en.zodiacSigns; + const ascendantIndex = zodiacSigns.findIndex( (sign) => sign.toLowerCase() === ascendantSign.toLowerCase(), ); const orderedArray = [ - ...ZODIAC_SIGNS.slice(ascendantIndex), - ...ZODIAC_SIGNS.slice(0, ascendantIndex), + ...zodiacSigns.slice(ascendantIndex), + ...zodiacSigns.slice(0, ascendantIndex), ]; orderedSigns = new Map(); orderedArray.forEach((sign) => { @@ -66,13 +66,14 @@ export function drawZodiacSymbols( .attr("class", "tooltip tooltip-large"); const orderedArray = Array.from(orderedSigns.keys()); + const zodiacSigns = chartStrings.en.zodiacSigns; for (let index = 0; index < 12; index++) { const houseAngle = HOUSE_ANGLES[index]; const middleAngle = ((houseAngle + 15) * Math.PI) / 180; const x = zodiacRadius * Math.cos(middleAngle); const y = zodiacRadius * Math.sin(middleAngle); const signName = orderedArray[index].toLowerCase() as ZodiacSign; - const signSymbol = ZODIAC_ORDER[ZODIAC_SIGNS.indexOf(orderedArray[index])]; + const signSymbol = ZODIAC_ORDER[zodiacSigns.indexOf(orderedArray[index])]; g.append("text") .attr("x", x) @@ -234,64 +235,7 @@ export function drawPlanets( .attr("class", "planet-text ascendant-text"); } -export function calculateAspects( - planets: { name: string; position: number }[], -) { - const aspects = []; - for (let i = 0; i < planets.length; i++) { - for (let j = i + 1; j < planets.length; j++) { - const angle = Math.abs(planets[i].position - planets[j].position); - const normalizedAngle = Math.min(angle, 360 - angle); - - const aspectOrbs = { - conjunction: 8, - opposition: 8, - trine: 8, - square: 8, - sextile: 6, - }; - // Check for aspects - if (normalizedAngle <= aspectOrbs.conjunction) { - aspects.push({ - planet1: planets[i].name, - planet2: planets[j].name, - type: "conjunction", - orb: normalizedAngle, - }); - } else if (Math.abs(normalizedAngle - 180) <= aspectOrbs.opposition) { - aspects.push({ - planet1: planets[i].name, - planet2: planets[j].name, - type: "opposition", - orb: Math.abs(normalizedAngle - 180), - }); - } else if (Math.abs(normalizedAngle - 120) <= aspectOrbs.trine) { - aspects.push({ - planet1: planets[i].name, - planet2: planets[j].name, - type: "trine", - orb: Math.abs(normalizedAngle - 120), - }); - } else if (Math.abs(normalizedAngle - 90) <= aspectOrbs.square) { - aspects.push({ - planet1: planets[i].name, - planet2: planets[j].name, - type: "square", - orb: Math.abs(normalizedAngle - 90), - }); - } else if (Math.abs(normalizedAngle - 60) <= aspectOrbs.sextile) { - aspects.push({ - planet1: planets[i].name, - planet2: planets[j].name, - type: "sextile", - orb: Math.abs(normalizedAngle - 60), - }); - } - } - } - return aspects; -} export function calculateHouses(ascendantDegrees: number): number[] { return Array.from( From b0198812c6907dfca9ef53a1c6468b200415f666 Mon Sep 17 00:00:00 2001 From: von-steinkirch Date: Thu, 10 Jul 2025 18:54:45 -1000 Subject: [PATCH 2/9] fix linter --- src/components/Predict.tsx | 59 ++++++++++++++++++++++++++------------ src/styles/predict.css | 42 +++++++-------------------- src/utils/chartFilling.ts | 8 +----- 3 files changed, 51 insertions(+), 58 deletions(-) diff --git a/src/components/Predict.tsx b/src/components/Predict.tsx index 1a75175..ad1c253 100644 --- a/src/components/Predict.tsx +++ b/src/components/Predict.tsx @@ -11,26 +11,40 @@ interface PredictCard { subtitle: string; } -const worldEventCards: PredictCard[] = Object.entries(predictI18n.finance.targets).map( - ([key, target]) => ({ - id: key, - title: predictI18n.finance.assets[key as keyof typeof predictI18n.finance.assets], - subtitle: predictI18n.finance.subtitleTemplate - .replace('{key}', key) - .replace('{target}', target), - }), -); +const worldEventCards: PredictCard[] = Object.entries( + predictI18n.finance.targets, +).map(([key, target]) => ({ + id: key, + title: + predictI18n.finance.assets[key as keyof typeof predictI18n.finance.assets], + subtitle: predictI18n.finance.subtitleTemplate + .replace("{key}", key) + .replace("{target}", target), +})); const PredictCards: React.FC = () => { const [selectedOptions, setSelectedOptions] = useState< - Record + Record< + string, + | typeof predictI18n.optionValues.yes + | typeof predictI18n.optionValues.no + | null + > >({}); const [activeTab, setActiveTab] = useState< - typeof predictI18n.tabValues.world | typeof predictI18n.tabValues.personal | typeof predictI18n.tabValues.relationships | typeof predictI18n.tabValues.finance + | typeof predictI18n.tabValues.world + | typeof predictI18n.tabValues.personal + | typeof predictI18n.tabValues.relationships + | typeof predictI18n.tabValues.finance >(predictI18n.tabValues.personal); const [question, setQuestion] = useState(""); - const handleOptionClick = (cardId: string, option: typeof predictI18n.optionValues.yes | typeof predictI18n.optionValues.no) => { + const handleOptionClick = ( + cardId: string, + option: + | typeof predictI18n.optionValues.yes + | typeof predictI18n.optionValues.no, + ) => { setSelectedOptions((prev) => ({ ...prev, [cardId]: prev[cardId] === option ? null : option, @@ -50,7 +64,10 @@ const PredictCards: React.FC = () => {

{card.title}

-
@@ -58,13 +75,17 @@ const PredictCards: React.FC = () => {
@@ -116,11 +137,11 @@ const PredictCards: React.FC = () => {

{predictI18n.world.title}

-

- {predictI18n.world.description} -

+

{predictI18n.world.description}

- +
diff --git a/src/styles/predict.css b/src/styles/predict.css index 006e269..59a660c 100644 --- a/src/styles/predict.css +++ b/src/styles/predict.css @@ -1,7 +1,3 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - .predict-header { width: 100%; margin-top: 3rem; @@ -120,7 +116,7 @@ 0 0 60px var(--glow-pink-light); } -.card-header { +.predict-card .card-header { display: flex; justify-content: space-between; align-items: center; @@ -128,7 +124,7 @@ margin-bottom: 0.5rem; } -.card-title { +.predict-card .card-title { font-size: clamp(1.3rem, 2.2vw, 1.5rem); font-weight: 800; margin: 0; @@ -136,7 +132,7 @@ flex: 1; } -.card-subtitle { +.predict-card .card-subtitle { font-size: clamp(0.85rem, 1.5vw, 0.9rem); line-height: 1.6; font-weight: bold; @@ -145,14 +141,14 @@ margin-bottom: clamp(1rem, 2vw, 1.5rem); } -.card-options { +.predict-card .card-options { display: flex; gap: clamp(1rem, 2vw, 1.5rem); width: 100%; justify-content: center; } -.option-button { +.predict-card .option-button { flex: 1; max-width: 120px; padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.8rem, 1.5vw, 1rem); @@ -166,13 +162,13 @@ transition: all 0.3s ease; } -.option-button:hover { +.predict-card .option-button:hover { color: var(--background-color); background: var(--color-primary); transform: translateY(-1px); } -.option-button.selected { +.predict-card .option-button.selected { color: var(--background-color); background: var(--color-primary); box-shadow: 0 0 15px var(--glow-shadow); @@ -306,7 +302,7 @@ font-size: 1.2rem; } -.view-chart-button { +.predict-view-chart-button { background: none; border: none; color: var(--color-primary); @@ -320,30 +316,12 @@ margin-left: 0.5rem; } -.view-chart-button:hover { +.predict-view-chart-button:hover { background-color: rgba(var(--color-primary-rgb), 0.1); transform: scale(1.1); } -.view-chart-button svg { +.predict-view-chart-button svg { width: 1.2rem; height: 1.2rem; } - -@media (max-width: 1024px) { - .predict-cards-grid { - grid-template-columns: repeat(3, 1fr); - } -} - -@media (max-width: 768px) { - .predict-cards-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 480px) { - .predict-cards-grid { - grid-template-columns: 1fr; - } -} diff --git a/src/utils/chartFilling.ts b/src/utils/chartFilling.ts index 8e3e849..84e95a4 100644 --- a/src/utils/chartFilling.ts +++ b/src/utils/chartFilling.ts @@ -1,8 +1,4 @@ -import { - ChartData, - HOUSE_ANGLES, - ZODIAC_SYMBOLS, -} from "../config/logiaChart"; +import { ChartData, HOUSE_ANGLES, ZODIAC_SYMBOLS } from "../config/logiaChart"; import * as d3 from "d3"; import chartStrings from "../i18n/logiaChart.json"; @@ -235,8 +231,6 @@ export function drawPlanets( .attr("class", "planet-text ascendant-text"); } - - export function calculateHouses(ascendantDegrees: number): number[] { return Array.from( { length: 12 }, From 8bda87a3dfa7c2ca828724c2662ecfac964d96a2 Mon Sep 17 00:00:00 2001 From: von-steinkirch Date: Thu, 10 Jul 2025 22:15:27 -1000 Subject: [PATCH 3/9] dead code --- src/app/predict/page.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/app/predict/page.tsx b/src/app/predict/page.tsx index 759df69..f479000 100644 --- a/src/app/predict/page.tsx +++ b/src/app/predict/page.tsx @@ -5,14 +5,10 @@ import "../../styles/predict.css"; export default function PredictPage() { return (
-
-
-

{predictStrings.en.title}

-
-
- -
+
+

{predictStrings.en.title}

+
); } From e2a5455696734ae84bc167fd02f7be03c64fdfdf Mon Sep 17 00:00:00 2001 From: von-steinkirch Date: Thu, 10 Jul 2025 22:18:58 -1000 Subject: [PATCH 4/9] clean up json --- src/components/Predict.tsx | 48 +++++++++++++++++++------------------- src/i18n/predict.json | 10 -------- 2 files changed, 24 insertions(+), 34 deletions(-) diff --git a/src/components/Predict.tsx b/src/components/Predict.tsx index ad1c253..c4a8e25 100644 --- a/src/components/Predict.tsx +++ b/src/components/Predict.tsx @@ -26,24 +26,24 @@ const PredictCards: React.FC = () => { const [selectedOptions, setSelectedOptions] = useState< Record< string, - | typeof predictI18n.optionValues.yes - | typeof predictI18n.optionValues.no + | typeof predictI18n.options.yes + | typeof predictI18n.options.no | null > >({}); const [activeTab, setActiveTab] = useState< - | typeof predictI18n.tabValues.world - | typeof predictI18n.tabValues.personal - | typeof predictI18n.tabValues.relationships - | typeof predictI18n.tabValues.finance - >(predictI18n.tabValues.personal); + | typeof predictI18n.tabs.world + | typeof predictI18n.tabs.personal + | typeof predictI18n.tabs.relationships + | typeof predictI18n.tabs.finance + >(predictI18n.tabs.personal); const [question, setQuestion] = useState(""); const handleOptionClick = ( cardId: string, option: - | typeof predictI18n.optionValues.yes - | typeof predictI18n.optionValues.no, + | typeof predictI18n.options.yes + | typeof predictI18n.options.no, ) => { setSelectedOptions((prev) => ({ ...prev, @@ -74,17 +74,17 @@ const PredictCards: React.FC = () => {

{card.subtitle}

- {activeTab === predictI18n.tabValues.personal + {activeTab === predictI18n.tabs.personal ? renderPersonalPredictions() - : activeTab === predictI18n.tabValues.relationships + : activeTab === predictI18n.tabs.relationships ? renderRelationshipCards() - : activeTab === predictI18n.tabValues.finance + : activeTab === predictI18n.tabs.finance ? renderWorldEventCards() : renderWorldCards()}
diff --git a/src/i18n/predict.json b/src/i18n/predict.json index 0821663..9ca92d2 100644 --- a/src/i18n/predict.json +++ b/src/i18n/predict.json @@ -8,20 +8,10 @@ "relationships": "relationships", "world": "world" }, - "tabValues": { - "finance": "finance", - "personal": "personal", - "relationships": "relationships", - "world": "world" - }, "options": { "yes": "yes", "no": "no" }, - "optionValues": { - "yes": "yes", - "no": "no" - }, "personal": { "placeholder": "type your question here...", "submit": "submit" From 7b17a6b990883cf6d6cf04eaebf9ab5149e481a8 Mon Sep 17 00:00:00 2001 From: von-steinkirch Date: Thu, 10 Jul 2025 22:30:06 -1000 Subject: [PATCH 5/9] dead code --- src/styles/logia.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/styles/logia.css b/src/styles/logia.css index 3bf645e..5778d52 100644 --- a/src/styles/logia.css +++ b/src/styles/logia.css @@ -21,7 +21,6 @@ --color-glow-shadow: var(--glow-shadow); } -/* Dark theme overrides */ html.dark { --color-primary-rgb: 96, 165, 250; --color-primary: #60a5fa; @@ -778,8 +777,4 @@ html.dark { font-size: 2rem; margin-bottom: 1rem; } - - .logia-subtitle { - font-size: 1rem; - } } From 5a43e8315a3159128509acfd15629d2a7bc54e67 Mon Sep 17 00:00:00 2001 From: von-steinkirch Date: Thu, 10 Jul 2025 22:31:58 -1000 Subject: [PATCH 6/9] dead code --- src/utils/movingStars.tsx | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/src/utils/movingStars.tsx b/src/utils/movingStars.tsx index a0950ec..ab62e02 100644 --- a/src/utils/movingStars.tsx +++ b/src/utils/movingStars.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; interface StarPosition { top: number; @@ -15,42 +15,35 @@ const DecorativeStars: React.FC = () => { const [stars, setStars] = useState([]); useEffect(() => { - // Create a grid of positions const gridSize = 15; const positions: StarPosition[] = []; - // Generate base grid positions for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize; col++) { - // Skip positions in the header area if (row < 2) continue; - // Calculate base position const baseTop = (row / gridSize) * 100; const baseLeft = (col / gridSize) * 100; - // Only place stars in the outer areas (around the text box) const isInOuterArea = - baseTop < 25 || // Above the box - baseTop > 85 || // Below the box - baseLeft < 10 || // Left of the box - baseLeft > 90; // Right of the box + baseTop < 25 || + baseTop > 85 || + baseLeft < 10 || + baseLeft > 90; if (!isInOuterArea) continue; - // Add more randomness to the position - const top = baseTop + (Math.random() * 12 - 6); // ±6% variation - const left = baseLeft + (Math.random() * 12 - 6); // ±6% variation + const top = baseTop + (Math.random() * 12 - 6); + const left = baseLeft + (Math.random() * 12 - 6); const twinkleDelay = Math.random() * 2; const floatDelay = Math.random() * 7; - const size = Math.random() * 12 + 8; // Size range: 8-20px - const opacity = Math.random() * 0.5 + 0.2; // Varying opacity: 0.2-0.7 + const size = Math.random() * 12 + 8; + const opacity = Math.random() * 0.5 + 0.2; positions.push({ top, left, twinkleDelay, floatDelay, size, opacity }); } } - // Shuffle the positions and take the first 40 const shuffledPositions = positions .sort(() => Math.random() - 0.5) .slice(0, 40); From 4896c98b38b31ffd7e3a28eb21ca331741a6779f Mon Sep 17 00:00:00 2001 From: von-steinkirch Date: Thu, 10 Jul 2025 22:33:28 -1000 Subject: [PATCH 7/9] dead code --- src/utils/chartFilling.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/utils/chartFilling.ts b/src/utils/chartFilling.ts index 84e95a4..98d867b 100644 --- a/src/utils/chartFilling.ts +++ b/src/utils/chartFilling.ts @@ -120,27 +120,22 @@ export function drawPlanets( const signData = orderedSigns.get(sign); if (!signData) return; - // Calculate the middle angle for this house (15 degrees into the house) const middleAngle = ((houseAngle + 15) * Math.PI) / 180; - // Count planets in this sign and sort by angle (largest to smallest) const sortedPlanets = [...signData.planets].sort((a, b) => { const aPos = (a.position - houseAngle + 360) % 360; const bPos = (b.position - houseAngle + 360) % 360; - return bPos - aPos; // Reversed order + return bPos - aPos; }); const planetsInSign = sortedPlanets.length; - // Calculate spread based on number of planets (max 24 degrees to stay within house) const angleSpread = Math.min(24, planetsInSign * 5); sortedPlanets.forEach((planet, planetIndex) => { - // Calculate position within the spread - const angleStep = angleSpread / (planetsInSign - 1 || 1); // Avoid division by zero + const angleStep = angleSpread / (planetsInSign - 1 || 1); const offset = (planetIndex - (planetsInSign - 1) / 2) * angleStep; const angle = middleAngle + (offset * Math.PI) / 180; - // Calculate position with consistent radius const x = (radius - 45) * Math.cos(angle); const y = (radius - 45) * Math.sin(angle); From 0c8004a2596911637f5a181422c915c7b1c73fcf Mon Sep 17 00:00:00 2001 From: von-steinkirch Date: Thu, 10 Jul 2025 22:57:07 -1000 Subject: [PATCH 8/9] dead code --- src/app/globals.css | 127 ++++++-------------------------------------- 1 file changed, 16 insertions(+), 111 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 785967f..cc13868 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,7 +3,6 @@ @tailwind utilities; :root { - /* Theme Colors - Light */ --light-primary: rgb(87, 76, 145); --light-primary-rgb: 87, 76, 145; --light-background: rgb(224, 222, 226); @@ -24,34 +23,20 @@ --light-card-bg: rgba(65, 62, 62, 0.1); --light-info-bg: rgba(65, 62, 62, 0.2); --light-shadow-black: rgba(65, 62, 62, 0.2); - --light-shadow-white: rgba(224, 222, 226, 0.3); - --light-shadow-trending-light: rgba(87, 76, 145, 0.5); - --light-shadow-trending-dark: rgba(87, 76, 145, 0.3); --light-text-glow-normal: 0 0 10px rgba(87, 76, 145, 0.7); --light-text-glow-hover: 0 0 30px rgba(87, 76, 145, 0.7), 0 0 50px rgba(87, 76, 145, 0.5); --light-glow-pink-light: rgba(255, 192, 203, 0.7); --light-glow-pink-dark: rgba(190, 133, 195, 0.5); - --light-planet-symbol: #8a6cb3; /* Darker purple color for planet symbols */ - --light-ascendant: #cc6096; /* Pink color for ascendant */ - --light-gradient-purple: #a855f7; /* Purple for gradients */ - --light-gradient-pink: #ec4899; /* Pink for gradients */ - --light-glow-purple: rgba(168, 85, 247, 0.5); /* Purple glow effect */ - --light-white-80: rgba(255, 255, 255, 0.8); /* White 80% opacity */ - --light-white-60: rgba(255, 255, 255, 0.6); /* White 60% opacity */ - --light-white-90: rgba(255, 255, 255, 0.9); /* White 90% opacity */ - --light-white-70: rgba(255, 255, 255, 0.7); /* White 70% opacity */ - --light-white-10: rgba(255, 255, 255, 0.1); /* White 10% opacity */ - --light-white-05: rgba(255, 255, 255, 0.05); /* White 5% opacity */ - --light-white-20: rgba(255, 255, 255, 0.2); /* White 20% opacity */ - --light-white-30: rgba(255, 255, 255, 0.3); /* White 30% opacity */ - --light-black-10: rgba(0, 0, 0, 0.1); /* Black 10% opacity */ - --light-black-15: rgba(0, 0, 0, 0.15); /* Black 15% opacity */ - --light-nebula-purple: rgba(120, 119, 198, 0.3); /* Nebula purple */ - --light-nebula-pink: rgba(255, 119, 198, 0.3); /* Nebula pink */ - --light-nebula-blue: rgba(120, 219, 255, 0.2); /* Nebula blue */ + --light-planet-symbol: #8a6cb3; + --light-ascendant: #cc6096; + --light-gradient-purple: #a855f7; + --light-gradient-pink: #ec4899; + --light-glow-purple: rgba(168, 85, 247, 0.5); + --light-nebula-purple: rgba(120, 119, 198, 0.3); + --light-nebula-pink: rgba(255, 119, 198, 0.3); + --light-nebula-blue: rgba(120, 219, 255, 0.2); - /* Theme Colors - Dark */ --dark-primary: #60a5fa; --dark-primary-rgb: 96, 165, 250; --dark-background: rgb(8, 12, 18); @@ -72,38 +57,23 @@ --dark-card-bg: rgba(16, 20, 30, 0.8); --dark-info-bg: rgba(0, 170, 255, 0.1); --dark-shadow-black: rgba(0, 0, 0, 0.4); - --dark-shadow-white: rgba(255, 255, 255, 0.05); - --dark-shadow-trending-light: rgba(0, 170, 255, 0.5); - --dark-shadow-trending-dark: rgba(0, 170, 255, 0.3); --dark-text-glow-normal: 0 0 10px rgba(0, 170, 255, 0.7); --dark-text-glow-hover: 0 0 30px rgba(0, 170, 255, 0.7), 0 0 50px rgba(0, 170, 255, 0.5); --dark-glow-pink-light: rgba(255, 64, 129, 0.5); --dark-glow-pink-dark: rgba(52, 211, 153, 0.4); - --dark-planet-symbol: #8a6cb3; /* Darker purple color for planet symbols */ - --dark-ascendant: #cc6096; /* Pink color for ascendant */ - --dark-gradient-purple: #a855f7; /* Purple for gradients */ - --dark-gradient-pink: #ec4899; /* Pink for gradients */ - --dark-glow-purple: rgba(168, 85, 247, 0.5); /* Purple glow effect */ - --dark-white-80: rgba(255, 255, 255, 0.8); /* White 80% opacity */ - --dark-white-60: rgba(255, 255, 255, 0.6); /* White 60% opacity */ - --dark-white-90: rgba(255, 255, 255, 0.9); /* White 90% opacity */ - --dark-white-70: rgba(255, 255, 255, 0.7); /* White 70% opacity */ - --dark-white-10: rgba(255, 255, 255, 0.1); /* White 10% opacity */ - --dark-white-05: rgba(255, 255, 255, 0.05); /* White 5% opacity */ - --dark-white-20: rgba(255, 255, 255, 0.2); /* White 20% opacity */ - --dark-white-30: rgba(255, 255, 255, 0.3); /* White 30% opacity */ - --dark-black-10: rgba(0, 0, 0, 0.1); /* Black 10% opacity */ - --dark-black-15: rgba(0, 0, 0, 0.15); /* Black 15% opacity */ - --dark-nebula-purple: rgba(120, 119, 198, 0.3); /* Nebula purple */ - --dark-nebula-pink: rgba(255, 119, 198, 0.3); /* Nebula pink */ - --dark-nebula-blue: rgba(120, 219, 255, 0.2); /* Nebula blue */ + --dark-planet-symbol: #8a6cb3; + --dark-ascendant: #cc6096; + --dark-gradient-purple: #a855f7; + --dark-gradient-pink: #ec4899; + --dark-glow-purple: rgba(168, 85, 247, 0.5); + --dark-nebula-purple: rgba(120, 119, 198, 0.3); + --dark-nebula-pink: rgba(255, 119, 198, 0.3); + --dark-nebula-blue: rgba(120, 219, 255, 0.2); - /* Common Variables */ --transition-duration: 0.3s; --transition-timing: ease; - /* Default to light theme */ --color-primary: var(--light-primary); --color-primary-rgb: var(--light-primary-rgb); --color-background: var(--light-background); @@ -124,9 +94,6 @@ --color-card-bg: var(--light-card-bg); --color-info-bg: var(--light-info-bg); --color-shadow-black: var(--light-shadow-black); - --color-shadow-white: var(--light-shadow-white); - --color-shadow-trending-light: var(--light-shadow-trending-light); - --color-shadow-trending-dark: var(--light-shadow-trending-dark); --color-text-glow-normal: var(--light-text-glow-normal); --color-text-glow-hover: var(--light-text-glow-hover); --glow-pink-light: var(--light-glow-pink-light); @@ -136,22 +103,11 @@ --gradient-purple: var(--light-gradient-purple); --gradient-pink: var(--light-gradient-pink); --glow-purple: var(--light-glow-purple); - --white-80: var(--light-white-80); - --white-60: var(--light-white-60); - --white-90: var(--light-white-90); - --white-70: var(--light-white-70); - --white-10: var(--light-white-10); - --white-05: var(--light-white-05); - --white-20: var(--light-white-20); - --white-30: var(--light-white-30); - --black-10: var(--light-black-10); - --black-15: var(--light-black-15); --nebula-purple: var(--light-nebula-purple); --nebula-pink: var(--light-nebula-pink); --nebula-blue: var(--light-nebula-blue); --opacity-medium: 0.6; - /* Logia-specific colors */ --logia-error: #ef4444; --logia-error-dark: #dc2626; --logia-element-fire: var(--color-bullish); @@ -167,25 +123,15 @@ --background-color: var(--color-background); --glow-shadow-hover: var(--color-glow-shadow-hover); - /* Tooltip Variables */ --tooltip-font-size: 0.8rem; --tooltip-border-radius: 16px; --tooltip-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --tooltip-shadow: var(--glow-shadow); --tooltip-blur: blur(8px); --tooltip-large-bg: var(--color-primary); - --tooltip-quick-bg: var(--color-primary); - /* Opacity Variables */ --opacity-80: 0.8; - --opacity-90: 0.9; - --opacity-100: 1; - --opacity-10: 0.1; - /* Transition Variables */ - --transition-all: all 0.3s ease; - - /* Common variables */ --primary-color: var(--color-primary); --text-color: var(--color-text); --background-color: var(--color-background); @@ -199,13 +145,8 @@ --info-bg: var(--color-info-bg); --text-glow: var(--color-text-glow-normal); --text-glow-hover: var(--color-text-glow-hover); - --base-shadow: 0 0 5px var(--glow-shadow); - --trending-shadow-light: var(--color-shadow-trending-light); - --trending-shadow-dark: var(--color-shadow-trending-dark); - --black-30: rgba(0, 0, 0, 0.3); /* Black 30% opacity */ } -/* Dark theme */ html.dark { --color-primary: var(--dark-primary); --color-primary-rgb: var(--dark-primary-rgb); @@ -227,9 +168,6 @@ html.dark { --color-card-bg: var(--dark-card-bg); --color-info-bg: var(--dark-info-bg); --color-shadow-black: var(--dark-shadow-black); - --color-shadow-white: var(--dark-shadow-white); - --color-shadow-trending-light: var(--dark-shadow-trending-light); - --color-shadow-trending-dark: var(--dark-shadow-trending-dark); --color-text-glow-normal: var(--dark-text-glow-normal); --color-text-glow-hover: var(--dark-text-glow-hover); --glow-pink-light: var(--dark-glow-pink-light); @@ -239,22 +177,11 @@ html.dark { --gradient-purple: var(--dark-gradient-purple); --gradient-pink: var(--dark-gradient-pink); --glow-purple: var(--dark-glow-purple); - --white-80: var(--dark-white-80); - --white-60: var(--dark-white-60); - --white-90: var(--dark-white-90); - --white-70: var(--dark-white-70); - --white-10: var(--dark-white-10); - --white-05: var(--dark-white-05); - --white-20: var(--dark-white-20); - --white-30: var(--dark-white-30); - --black-10: var(--dark-black-10); - --black-15: var(--dark-black-15); --nebula-purple: var(--dark-nebula-purple); --nebula-pink: var(--dark-nebula-pink); --nebula-blue: var(--dark-nebula-blue); --opacity-medium: 0.6; - /* Logia-specific colors */ --logia-error: #ef4444; --logia-error-dark: #dc2626; --logia-element-fire: var(--color-bullish); @@ -270,25 +197,15 @@ html.dark { --background-color: var(--color-background); --glow-shadow-hover: var(--color-glow-shadow-hover); - /* Tooltip Variables */ --tooltip-font-size: 0.8rem; --tooltip-border-radius: 16px; --tooltip-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --tooltip-shadow: var(--glow-shadow); --tooltip-blur: blur(8px); --tooltip-large-bg: var(--color-primary); - --tooltip-quick-bg: var(--color-primary); - /* Opacity Variables */ --opacity-80: 0.8; - --opacity-90: 0.9; - --opacity-100: 1; - --opacity-10: 0.1; - - /* Transition Variables */ - --transition-all: all 0.3s ease; - /* Common variables */ --primary-color: var(--color-primary); --text-color: var(--color-primary); --background-color: var(--color-background); @@ -302,13 +219,8 @@ html.dark { --info-bg: var(--color-info-bg); --text-glow: var(--color-text-glow-normal); --text-glow-hover: var(--color-text-glow-hover); - --base-shadow: 0 0 5px var(--glow-shadow); - --trending-shadow-light: var(--color-shadow-trending-light); - --trending-shadow-dark: var(--color-shadow-trending-dark); - --black-30: rgba(0, 0, 0, 0.3); /* Black 30% opacity */ } -/* Base Styles */ body { font-family: var(--font-quicksand), @@ -324,7 +236,6 @@ body { text-rendering: optimizeLegibility; } -/* Animations */ @keyframes modalFadeIn { from { opacity: 0; @@ -360,7 +271,6 @@ body { } } -/* Utility Classes */ .glow-text { text-shadow: var(--text-glow); will-change: text-shadow; @@ -374,7 +284,6 @@ body { color: var(--bearish-color); } -/* Links */ a { color: var(--color-primary); text-decoration: none; @@ -385,12 +294,10 @@ a:hover { text-shadow: var(--text-glow-hover); } -/* Form Elements */ button { font-family: inherit; } -/* Transitions */ .theme-transition { transition: background-color var(--transition-duration) var(--transition-timing), @@ -398,14 +305,12 @@ button { border-color var(--transition-duration) var(--transition-timing); } -/* Reset */ * { box-sizing: border-box; margin: 0; padding: 0; } -/* Layout Components */ .app-container { min-height: 100vh; display: flex; From 9928ed6c0a5a0754b7b0a7373c719dded65675e4 Mon Sep 17 00:00:00 2001 From: von-steinkirch Date: Thu, 10 Jul 2025 23:03:40 -1000 Subject: [PATCH 9/9] lint --- src/components/Predict.tsx | 12 +++--------- src/utils/movingStars.tsx | 5 +---- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/src/components/Predict.tsx b/src/components/Predict.tsx index c4a8e25..afe709d 100644 --- a/src/components/Predict.tsx +++ b/src/components/Predict.tsx @@ -26,9 +26,7 @@ const PredictCards: React.FC = () => { const [selectedOptions, setSelectedOptions] = useState< Record< string, - | typeof predictI18n.options.yes - | typeof predictI18n.options.no - | null + typeof predictI18n.options.yes | typeof predictI18n.options.no | null > >({}); const [activeTab, setActiveTab] = useState< @@ -41,9 +39,7 @@ const PredictCards: React.FC = () => { const handleOptionClick = ( cardId: string, - option: - | typeof predictI18n.options.yes - | typeof predictI18n.options.no, + option: typeof predictI18n.options.yes | typeof predictI18n.options.no, ) => { setSelectedOptions((prev) => ({ ...prev, @@ -83,9 +79,7 @@ const PredictCards: React.FC = () => { diff --git a/src/utils/movingStars.tsx b/src/utils/movingStars.tsx index ab62e02..e852aed 100644 --- a/src/utils/movingStars.tsx +++ b/src/utils/movingStars.tsx @@ -26,10 +26,7 @@ const DecorativeStars: React.FC = () => { const baseLeft = (col / gridSize) * 100; const isInOuterArea = - baseTop < 25 || - baseTop > 85 || - baseLeft < 10 || - baseLeft > 90; + baseTop < 25 || baseTop > 85 || baseLeft < 10 || baseLeft > 90; if (!isInOuterArea) continue;