deploy at 2024-09-16 13:21:26.356100

config.ini

@@ -0,0 +1,6 @@
+[DEFAULT]
+dataset_id = space-backup
+db_dir = data
+private_backup = True
+interval = 15
+

main.py

@@ -4,7 +4,7 @@ from svgs import fasthtml_logo
 from fasthtml_hf import setup_hf_backup
 
 app,rt = fast_app(
-	#live=True,
+	live=True,
 	id=int,
 	title=str,
 	done=bool,
@@ -25,12 +25,14 @@ function game() {
     cds.sort((a, b) => 0.5 - Math.random());
     
     return {
+        card_clicks: 0,
         cheats: 3,
         cards: cds,
         get flippedCards() {
             return this.cards.filter(card => card.flipped);
         },
         flipCard(card) {
+            this.card_clicks += 1;
             if( card.cleared ) { return; }
             if( this.flippedCards.length <= 1 ) { card.flipped = ! card.flipped; }
              
@@ -61,7 +63,8 @@ function game() {
                 c.flipped = false;
                 c.cleared = false;
             });
-            this.cheats  = 3;
+            this.cheats = 3;
+            this.card_clicks = 0;
             setTimeout(() => {
                 this.cards.sort((a, b) => 0.5 - Math.random());   
             }, 500);
@@ -76,7 +79,7 @@ function game() {
                     this.cards.forEach(c => {
                         c.flipped = false;
                     });
-                }, 500);
+                }, 750);
             }
         },
     };
@@ -129,9 +132,14 @@ def get(): return Title('Card Memory Game in FastHTML'), Div(
                     cls='grid grid-cols-6 gap-4 w-[944px]'
                 ),
             ),
-            cls='flex items-center justify-center my-20'
+            cls='flex items-center justify-center mt-10'
         ),
         Div(
+            Div(
+                Div(),
+                cls='flex items-center justify-center my-5 font-bold',
+                **{"x-text": "'Card clicks: ' + card_clicks"},
+            ),
             Div(
                 A(
                     'Restart Game',
@@ -145,16 +153,20 @@ def get(): return Title('Card Memory Game in FastHTML'), Div(
                 ),
                 cls='flex items-center justify-center gap-4'
             ),
-            P(
-                'Cheat mode reveals all tiles! But you only have three per game so use wisely!',
+            Div(
+                'Reveal all the matching pairs of cards in the fewest clicks possible.',
                 cls='mt-6 flex items-center justify-center gap-4'
             ),
+            Div(
+                'Click the \'Cheat Mode\' button to reveal all tiles, but you only have three per game so use wisely!',
+                cls='flex items-center justify-center gap-4'
+            ),
         ),
         cls='mb-20',
         x_data='game()',
     ),
     Footer(
-        A('Made by David Gwyer - Follow me on X', href="https://x.com/dgwyer", _target="_blank", cls="drop-shadow-lg text-lg"),
+        A('Created by David Gwyer - Follow me on X', href="https://x.com/dgwyer", _target="_blank", cls="drop-shadow-lg text-lg"),
         cls='bg-gray-800 text-white text-center py-8'
     ),
     cls='bg-gray-100 text-gray-800'

public/app.css

@@ -526,24 +526,30 @@ video {
   margin-bottom: 5rem;
 }
 
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
 
-.mt-4 {
-  margin-top: 1rem;
+.mt-6 {
+  margin-top: 1.5rem;
 }
 
 .mb-20 {
   margin-bottom: 5rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
-.mt-6 {
-  margin-top: 1.5rem;
+.mt-10 {
+  margin-top: 2.5rem;
 }
 
 .flex {
@@ -566,6 +572,18 @@ video {
   width: 944px;
 }
 
+.w-96 {
+  width: 24rem;
+}
+
+.w-\[500px\] {
+  width: 500px;
+}
+
+.w-\[400px\] {
+  width: 400px;
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -629,11 +647,6 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;