improved example (#5)

sliemeobn · web-flow · commit 9ba39c68b8f5 · 2024-10-20T19:34:53.000+02:00
diff --git a/Examples/Embedded/Public/index.html b/Examples/Embedded/Public/index.html
@@ -3,9 +3,10 @@
   <head>
     <title>Swiftle</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
 
-  <body>
+  <body style="background-color: black">
     <script src="./index.js" type="module"></script>
   </body>
 </html>
diff --git a/Examples/Embedded/Sources/EmbeddedApp/Views.swift b/Examples/Embedded/Sources/EmbeddedApp/Views.swift
@@ -6,14 +6,14 @@ struct GameView: View {
     var onRestart: () -> Void
 
     var content: some View {
-        main(.class("flex flex-col items-center h-screen bg-black text-white")) {
+        main(.class("flex flex-col gap-5 items-center h-screen bg-black text-white")) {
             div(.class("flex gap-4 items-center pt-5")) {
                 SwiftLogo()
                 h1(.class("text-2xl uppercase tracking-wider font-serif")) { "Swiftle" }
                 SwiftLogo()
             }
 
-            div(.class("flex flex-col gap-1 font-mono py-5 relative")) {
+            div(.class("flex flex-col gap-1 font-mono relative")) {
                 for guess in game.guesses {
                     GuessView(guess: guess)
                 }
@@ -22,6 +22,19 @@ struct GameView: View {
             }
 
             KeyboardView(keyboard: game.keyboard, onKeyPressed: onKeyPressed)
+
+            footer {
+                p(.class("text-xs text-gray-400 text-center")) {
+                    "This is a proof of concept demo of an Embedded Swift Wasm app."
+                    br()
+                    "Find the source code in the "
+                    a(.href("https://github.com/sliemeobn/elementary-dom"),
+                      .class("text-orange-600 hover:underline"))
+                    {
+                        "elementary-dom github repository."
+                    }
+                }
+            }
         }
     }
 }
@@ -98,10 +111,11 @@ struct KeyboardLetterView: View {
                 guess.letter.value
             }
         }
-        .attributes(.class("bg-gray-400"), when: guess.status == .unknown)
-        .attributes(.class("bg-green-600"), when: guess.status == .correctPosition)
-        .attributes(.class("bg-yellow-600"), when: guess.status == .inWord)
-        .attributes(.class("bg-gray-600"), when: guess.status == .notInWord)
+        .enabledMobileActive()
+        .attributes(.class("bg-gray-400 active:bg-gray-300"), when: guess.status == .unknown)
+        .attributes(.class("bg-gray-600 active:bg-gray-500"), when: guess.status == .notInWord)
+        .attributes(.class("bg-yellow-600 active:bg-yellow-500"), when: guess.status == .inWord)
+        .attributes(.class("bg-green-600 active:bg-green-500"), when: guess.status == .correctPosition)
         .onClick { _ in
             onKeyPressed(.letter(guess.letter))
         }
@@ -115,7 +129,8 @@ struct EnterKeyView: View {
         button(.class("flex justify-center items-center w-12 h-10 p-2 rounded-sm")) {
             img(.src("enter.svg"))
         }
-        .attributes(.class("bg-gray-400"))
+        .enabledMobileActive()
+        .attributes(.class("bg-gray-400 active:bg-gray-300"))
         .onClick { _ in
             onKeyPressed(.enter)
         }
@@ -129,7 +144,8 @@ struct BackspaceKeyView: View {
         button(.class("flex justify-center items-center w-12 h-10 p-1 rounded-sm")) {
             img(.src("backspace.svg"))
         }
-        .attributes(.class("bg-gray-400"))
+        .enabledMobileActive()
+        .attributes(.class("bg-gray-400 active:bg-gray-300"))
         .onClick { _ in
             onKeyPressed(.backspace)
         }
@@ -143,7 +159,7 @@ struct GameEndOverlay: View {
     var content: some View {
         if game.state != .playing {
             div(.class("absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center")) {
-                div(.class("bg-gray-600 p-5 rounded-md flex flex-col gap-4 items-center w-full mx-2")) {
+                div(.class("bg-gray-600 p-5 rounded-md flex flex-col gap-4 items-center w-full mx-2 shadow-lg")) {
                     h1(.class("text-xl uppercase tracking-wider")) {
                         game.state == .won ? "Nice job!" : "Oh no!"
                     }
@@ -157,3 +173,9 @@ struct GameEndOverlay: View {
         }
     }
 }
+
+extension View where Tag == HTMLTag.button {
+    func enabledMobileActive() -> _AttributedElement<Self> {
+        attributes(.custom(name: "ontouchstart", value: ""))
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -6,14 +6,14 @@ struct GameView: View {`
`6`	`6`	`var onRestart: () -> Void`
`7`	`7`
`8`	`8`	`var content: some View {`
`9`		`- main(.class("flex flex-col items-center h-screen bg-black text-white")) {`
	`9`	`+ main(.class("flex flex-col gap-5 items-center h-screen bg-black text-white")) {`
`10`	`10`	`div(.class("flex gap-4 items-center pt-5")) {`
`11`	`11`	`SwiftLogo()`
`12`	`12`	`h1(.class("text-2xl uppercase tracking-wider font-serif")) { "Swiftle" }`
`13`	`13`	`SwiftLogo()`
`14`	`14`	`}`
`15`	`15`
`16`		`- div(.class("flex flex-col gap-1 font-mono py-5 relative")) {`
	`16`	`+ div(.class("flex flex-col gap-1 font-mono relative")) {`
`17`	`17`	`for guess in game.guesses {`
`18`	`18`	`GuessView(guess: guess)`
`19`	`19`	`}`
`@@ -22,6 +22,19 @@ struct GameView: View {`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`KeyboardView(keyboard: game.keyboard, onKeyPressed: onKeyPressed)`
	`25`	`+`
	`26`	`+ footer {`
	`27`	`+ p(.class("text-xs text-gray-400 text-center")) {`
	`28`	`+ "This is a proof of concept demo of an Embedded Swift Wasm app."`
	`29`	`+ br()`
	`30`	`+ "Find the source code in the "`
	`31`	`+ a(.href("https://github.com/sliemeobn/elementary-dom"),`
	`32`	`+ .class("text-orange-600 hover:underline"))`
	`33`	`+ {`
	`34`	`+ "elementary-dom github repository."`
	`35`	`+ }`
	`36`	`+ }`
	`37`	`+ }`
`25`	`38`	`}`
`26`	`39`	`}`
`27`	`40`	`}`
`@@ -98,10 +111,11 @@ struct KeyboardLetterView: View {`
`98`	`111`	`guess.letter.value`
`99`	`112`	`}`
`100`	`113`	`}`
`101`		`- .attributes(.class("bg-gray-400"), when: guess.status == .unknown)`
`102`		`- .attributes(.class("bg-green-600"), when: guess.status == .correctPosition)`
`103`		`- .attributes(.class("bg-yellow-600"), when: guess.status == .inWord)`
`104`		`- .attributes(.class("bg-gray-600"), when: guess.status == .notInWord)`
	`114`	`+ .enabledMobileActive()`
	`115`	`+ .attributes(.class("bg-gray-400 active:bg-gray-300"), when: guess.status == .unknown)`
	`116`	`+ .attributes(.class("bg-gray-600 active:bg-gray-500"), when: guess.status == .notInWord)`
	`117`	`+ .attributes(.class("bg-yellow-600 active:bg-yellow-500"), when: guess.status == .inWord)`
	`118`	`+ .attributes(.class("bg-green-600 active:bg-green-500"), when: guess.status == .correctPosition)`
`105`	`119`	`.onClick { _ in`
`106`	`120`	`onKeyPressed(.letter(guess.letter))`
`107`	`121`	`}`
`@@ -115,7 +129,8 @@ struct EnterKeyView: View {`
`115`	`129`	`button(.class("flex justify-center items-center w-12 h-10 p-2 rounded-sm")) {`
`116`	`130`	`img(.src("enter.svg"))`
`117`	`131`	`}`
`118`		`- .attributes(.class("bg-gray-400"))`
	`132`	`+ .enabledMobileActive()`
	`133`	`+ .attributes(.class("bg-gray-400 active:bg-gray-300"))`
`119`	`134`	`.onClick { _ in`
`120`	`135`	`onKeyPressed(.enter)`
`121`	`136`	`}`
`@@ -129,7 +144,8 @@ struct BackspaceKeyView: View {`
`129`	`144`	`button(.class("flex justify-center items-center w-12 h-10 p-1 rounded-sm")) {`
`130`	`145`	`img(.src("backspace.svg"))`
`131`	`146`	`}`
`132`		`- .attributes(.class("bg-gray-400"))`
	`147`	`+ .enabledMobileActive()`
	`148`	`+ .attributes(.class("bg-gray-400 active:bg-gray-300"))`
`133`	`149`	`.onClick { _ in`
`134`	`150`	`onKeyPressed(.backspace)`
`135`	`151`	`}`
`@@ -143,7 +159,7 @@ struct GameEndOverlay: View {`
`143`	`159`	`var content: some View {`
`144`	`160`	`if game.state != .playing {`
`145`	`161`	`div(.class("absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center")) {`
`146`		`- div(.class("bg-gray-600 p-5 rounded-md flex flex-col gap-4 items-center w-full mx-2")) {`
	`162`	`+ div(.class("bg-gray-600 p-5 rounded-md flex flex-col gap-4 items-center w-full mx-2 shadow-lg")) {`
`147`	`163`	`h1(.class("text-xl uppercase tracking-wider")) {`
`148`	`164`	`game.state == .won ? "Nice job!" : "Oh no!"`
`149`	`165`	`}`
`@@ -157,3 +173,9 @@ struct GameEndOverlay: View {`
`157`	`173`	`}`
`158`	`174`	`}`
`159`	`175`	`}`
	`176`	`+`
	`177`	`+extension View where Tag == HTMLTag.button {`
	`178`	`+ func enabledMobileActive() -> _AttributedElement<Self> {`
	`179`	`+ attributes(.custom(name: "ontouchstart", value: ""))`
	`180`	`+ }`
	`181`	`+}`