fin

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.tsx

@@ -4,6 +4,7 @@ import TierCard from './components/TierCard';
 import HistoryList from './components/HistoryList';
 import type { Upgrades } from './components/GubbleStore';
 import GubbleStore from './components/GubbleStore';
+import GameHeader from './components/GameHeader';
 
 // --- Scratch Card Game Types and State ---
 export type Tier = {
@@ -29,6 +30,9 @@ const TIERS: Tier[] = [
   { name: 'Emperor', unlockPrice: 10000000000, buyPrice: 8000000000, gubblePointChance: 0.7 },
   { name: 'God', unlockPrice: 100000000000, buyPrice: 80000000000, gubblePointChance: 0.8 },
   { name: 'Goddess', unlockPrice: 1000000000000, buyPrice: 800000000000, gubblePointChance: 0.9 },
+  { name: 'UltraGod', unlockPrice: 100000000000000, buyPrice: 80000000000000, gubblePointChance: 1.0 },
+  { name: 'UltraGoddess', unlockPrice: 1000000000000000, buyPrice: 800000000000000, gubblePointChance: 1.0 },
+  { name: 'Finale', unlockPrice: 10000000000000000, buyPrice: 8000000000000000, gubblePointChance: 1.0 },
 ];
 
 const START_MONEY = 6;
@@ -52,7 +56,7 @@ function App() {
   }[]>([]);
   // --- Gubble Store State ---
   const [isStoreOpen, setIsStoreOpen] = useState(false);
-  const [upgrades, setUpgrades] = useState<Upgrades>({ evenDouble: false, oddDouble: false, allTripple: false, gubbleDouble: false, addFourthNumber: false });
+  const [upgrades, setUpgrades] = useState<Upgrades>({ evenDouble: false, oddDouble: false, allTripple: false, gubbleDouble: false, addFourthNumber: false, autoscratcher: false });
   const [upgradeBought, setUpgradeBought] = useState(false);
 
   // Ref for scroll container
@@ -150,12 +154,7 @@ function App() {
   // --- UI ---
   return (
     <div className="min-h-screen bg-gray-900 flex flex-col items-center ">
-      <div className="flex flex-row items-center gap-6 mb-6 mt-2 w-full max-w-4xl justify-center">
+      <GameHeader money={money} gubblePoints={gubblePoints} formatter={formatter} setIsStoreOpen={setIsStoreOpen} />
-        <h1 className="text-3xl font-bold text-blue-600">Scratch Card Game</h1>
-        <div className="text-lg text-white">Money: <span className="font-mono font-bold">${formatter.format(money)}</span></div>
-        <div className="text-lg text-white">Gubble Points: <span className="font-mono font-bold">{formatter.format(gubblePoints)}</span></div>
-        <button className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded disabled:opacity-50" disabled={gubblePoints < 1} onClick={() => setIsStoreOpen(true)}>Open Gubble Point Store</button>
-      </div>
       <GubbleStore
         isOpen={isStoreOpen}
         onClose={handleStoreClose}
@@ -190,7 +189,7 @@ function App() {
           <Card card={card} setCard={setCard} setMoney={setMoney} setGubblePoints={setGubblePoints} upgrades={upgrades} />
         </>
       )}
-      <HistoryList history={history} />
+      <HistoryList history={history} formatter={formatter}/>
     </div>
   );
 }

src/components/Card.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Tier } from '../App';
 import type { Upgrades } from './GubbleStore';
+import ScratchFieldButton from './ScratchFieldButton';
 
 type CardProps = {
   card: {
@@ -35,50 +36,17 @@ const Card: React.FC<CardProps> = ({ card, setCard, setMoney, setGubblePoints, u
       </div>
       <div className="grid grid-cols-3 gap-4 mb-2">
         {card.fields.map((field, idx) => (
-          <button
+          <ScratchFieldButton
             key={idx}
-            className={`w-16 h-16 flex items-center justify-center rounded-lg border-2 text-2xl font-bold transition
+            field={field}
-              ${field.scratched ? (field.won ? 'bg-green-900 border-green-700 text-green-300' : 'bg-gray-700 border-gray-600 text-gray-400') : 'bg-yellow-900 border-yellow-700 text-yellow-300 hover:bg-yellow-800'}`}
+            idx={idx}
-            disabled={field.scratched}
+            card={card}
-            onMouseMove={() => {
+            setCard={setCard}
-              if (field.scratched) return;
+            setMoney={setMoney}
-              // Gubble point gain (with upgrade)
+            setGubblePoints={setGubblePoints}
-              if (Math.random() < (card.tier?.gubblePointChance ?? 0)) {
+            upgrades={upgrades}
-                setGubblePoints((g) => g + (upgrades?.gubbleDouble ? 2 : 1));
+            formatter={formatter}
-                return;
+          />
-              }
-              // Determine win amount
-              let won = null;
-              if (card.winningNumbers.includes(field.value)) {
-                won = 0;
-                if (idx < 2) won = Math.ceil((card.tier?.buyPrice ?? 0) * 0.5);
-                else if (idx < 4) won = Math.ceil((card.tier?.buyPrice ?? 0) * 0.8);
-                else won = Math.ceil((card.tier?.buyPrice ?? 0) * 1.2);
-                // Apply upgrades
-                if (upgrades?.allTripple) {
-                  won = won * 2;
-                } 
-                if (upgrades?.evenDouble && field.value % 2 === 0) {
-                  won = won * 2;
-                } 
-                if (upgrades?.oddDouble && field.value % 2 === 1) {
-                  won = won * 2;
-                }
-              }
-              setCard((prev) => {
-                if (!prev) return prev;
-                const newFields = prev.fields.map((f, i) => i === idx ? { ...f, scratched: true, won } : f);
-                return { ...prev, fields: newFields };
-              });
-              if (won) setMoney((m) => m + won);
-            }}
-          >
-            {field.scratched ? (
-              <span>{field.value}{field.won ? <span className="block text-xs font-normal text-green-300">+${formatter.format(field.won)}</span> : ''}</span>
-            ) : (
-              <span className="text-3xl select-none">?</span>
-            )}
-          </button>
         ))}
       </div>
       <div className="text-xs text-gray-400">Scratch each field one at a time. Winnings: 1-2 = 50%, 3-4 = 80%, 5-6 = 120% of card price.</div>

src/components/GameHeader.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface GameHeaderProps {
+  money: number;
+  gubblePoints: number;
+  formatter: Intl.NumberFormat;
+  setIsStoreOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const GameHeader: React.FC<GameHeaderProps> = ({ money, gubblePoints, formatter, setIsStoreOpen }) => (
+  <div className="flex flex-row items-center gap-6 mb-6 mt-2 w-full max-w-4xl justify-center">
+    <h1 className="text-3xl font-bold text-blue-600">Rubellos Glücksspiel</h1>
+    <div className="text-lg text-white">Money: <span className="font-mono font-bold">${formatter.format(money)}</span></div>
+    <div className="text-lg text-white">Gubble Points: <span className="font-mono font-bold">{formatter.format(gubblePoints)}</span></div>
+    <button
+      className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded disabled:opacity-50"
+      disabled={gubblePoints < 1}
+      onClick={() => setIsStoreOpen(true)}
+    >
+      Open Gubble Point Store
+    </button>
+  </div>
+);
+
+export default GameHeader; 

src/components/GubbleStore.tsx

@@ -6,6 +6,7 @@ type Upgrades = {
   allTripple: boolean;
   gubbleDouble: boolean;
   addFourthNumber: boolean;
+  autoscratcher: boolean;
 };
 
 type GubbleStoreProps = {
@@ -22,6 +23,7 @@ const UPGRADE_LIST: { key: keyof Upgrades; label: string; cost: number; descript
   { key: 'allTripple', label: 'Tripple All Winnings', cost: 150, description: 'Tripple all winnings.' },
   { key: 'gubbleDouble', label: 'Double Gubble Point Gains', cost: 50, description: 'Double gubble point gains.' },
   { key: 'addFourthNumber', label: 'Add Fourth Winning Number', cost: 200, description: 'Adds a fourth winning number to each card.' },
+  { key: 'autoscratcher', label: 'Auto Scratcher', cost: 400, description: 'Automatically scratches all tiles when you buy a card.' },
 ];
 
 const GubbleStore: React.FC<GubbleStoreProps> = ({ isOpen, onClose, gubblePoints, upgrades, onBuyUpgrade }) => {
@@ -32,6 +34,7 @@ const GubbleStore: React.FC<GubbleStoreProps> = ({ isOpen, onClose, gubblePoints
         <button className="absolute top-2 right-2 text-gray-400 hover:text-gray-200 text-2xl" onClick={onClose}>&times;</button>
         <h2 className="text-2xl font-bold mb-4 text-blue-300">Gubble Point Store</h2>
         <div className="mb-4 text-gray-100">Gubble Points: <span className="font-mono font-bold">{gubblePoints}</span></div>
+        <div><p className="text-gray-400 text-sm mb-4">When you buy an upgrade, you will lose all your money and unlocked tiers. And return to the start with the upgrades enabled.</p></div>
         <ul className="space-y-4">
           {UPGRADE_LIST.map(upg => (
             <li key={upg.key} className="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-gray-800 rounded p-3 border border-gray-700">

src/components/HistoryList.tsx

@@ -9,9 +9,10 @@ type HistoryItem = {
 
 type HistoryListProps = {
   history: HistoryItem[];
+  formatter: Intl.NumberFormat;
 };
 
-const HistoryList: React.FC<HistoryListProps> = React.memo(({ history }) => {
+const HistoryList: React.FC<HistoryListProps> = React.memo(({ history, formatter }) => {
   if (history.length === 0) return null;
   return (
     <div className="w-full max-w-md mb-8">
@@ -21,7 +22,7 @@ const HistoryList: React.FC<HistoryListProps> = React.memo(({ history }) => {
           <li key={i} className="p-3 flex flex-col sm:flex-row sm:items-center sm:justify-between">
             <div>
               <span className="font-bold text-blue-300">{h.tier}</span>
-              <span className="ml-2 text-gray-400">Win: ${h.winnings}</span>
+              <span className="ml-2 text-gray-400">Win: ${formatter.format(h.winnings)}</span>
             </div>
             <div className="flex gap-2 mt-2 sm:mt-0">
               {h.winningNumbers.map((n, j) => (

src/components/ScratchFieldButton.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { Upgrades } from './GubbleStore';
+import type { CardProps } from './Card';
+
+const ScratchFieldButton: React.FC<{
+  field: { value: number; scratched: boolean; won: number | null };
+  idx: number;
+  card: CardProps['card'];
+  setCard: CardProps['setCard'];
+  setMoney: CardProps['setMoney'];
+  setGubblePoints: CardProps['setGubblePoints'];
+  upgrades?: Upgrades;
+  formatter: Intl.NumberFormat;
+}> = ({ field, idx, card, setCard, setMoney, setGubblePoints, upgrades, formatter }) => {
+  const handleScratch = () => {
+    if (field.scratched) return;
+    // Gubble point gain (with upgrade)
+    if (Math.random() < (card.tier?.gubblePointChance ?? 0)) {
+      setGubblePoints((g) => g + (upgrades?.gubbleDouble ? 2 : 1));
+    }
+    // Determine win amount
+    let won = null;
+    if (card.winningNumbers.includes(field.value)) {
+      won = 0;
+      if (idx < 2) won = Math.ceil((card.tier?.buyPrice ?? 0) * 0.5);
+      else if (idx < 4) won = Math.ceil((card.tier?.buyPrice ?? 0) * 0.8);
+      else won = Math.ceil((card.tier?.buyPrice ?? 0) * 1.2);
+      // Apply upgrades
+      if (upgrades?.allTripple) {
+        won = won * 2;
+      } 
+      if (upgrades?.evenDouble && field.value % 2 === 0) {
+        won = won * 2;
+      } 
+      if (upgrades?.oddDouble && field.value % 2 === 1) {
+        won = won * 2;
+      }
+    }
+    setCard((prev) => {
+      if (!prev) return prev;
+      const newFields = prev.fields.map((f, i) => i === idx ? { ...f, scratched: true, won } : f);
+      return { ...prev, fields: newFields };
+    });
+    if (won) setMoney((m) => m + won);
+  };
+  if (upgrades?.autoscratcher) {
+    handleScratch();
+  }
+
+  return (
+    <button
+      className={`w-16 h-16 flex items-center justify-center rounded-lg border-2 text-2xl font-bold transition
+        ${field.scratched ? (field.won ? 'bg-green-900 border-green-700 text-green-300' : 'bg-gray-700 border-gray-600 text-gray-400') : 'bg-yellow-900 border-yellow-700 text-yellow-300 hover:bg-yellow-800'}`}
+      disabled={field.scratched}
+      onMouseMove={handleScratch}
+    >
+      {field.scratched ? (
+        <span>{field.value}{field.won ? <span className="block text-xs font-normal text-green-300">+${formatter.format(field.won)}</span> : ''}</span>
+      ) : (
+        <span className="text-3xl select-none">?</span>
+      )}
+    </button>
+  );
+};
+
+export default ScratchFieldButton; 

vite.config.ts

@@ -4,5 +4,6 @@ import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
+  base: './',
   plugins: [react(), tailwindcss()],
 })