fix safari audio issues

Author: zigster64

README.md

@@ -111,7 +111,7 @@ This code is interesting for the following reasons :
 
 - Its all written in Zig
 - It uses the excellent http.zig library https://github.com/karlseguin/http.zig
-- Generated docker image = about 300kb
+- Generated docker image = 770Kb (compressed) All it has is the compiled executable (2.5MB), which includes all bundled assets in the single file binary
 - Run stats - uses about 60MB RAM and really low CPU %
 - Its about as simple as doing the same thing in Go, there is really nothing too nasty required in the code.  
 - The router, and all the HTML contents is part of the Game object ... the implications of this are that it is possible to create 'web components' using this

src/game.zig

@@ -4,6 +4,9 @@ const Board = @import("board.zig");
 const Errors = @import("errors.zig");
 
 const start_countdown_timer: i64 = 30;
+const initial_countdown_timer: i64 = 120;
+const all_players: u8 = 100;
+
 const Self = @This();
 
 const MAX_PLAYERS = 8;
@@ -105,8 +108,9 @@ fn watcherThread(self: *Self) void {
                 }
 
                 self.game_mutex.lock();
-                self.current_player = 100;
+                self.current_player = all_players;
                 self.state = .winner;
+                self.expiry_time = std.time.timestamp() + start_countdown_timer;
                 self.signal(.victory);
                 self.game_mutex.unlock();
             }
@@ -153,7 +157,10 @@ fn signal(self: *Self, ev: Event) void {
     // locks the event_mutex (not the game_mutex) - so that it can broadcast all event threads
     self.event_mutex.lock();
     self.last_event = ev;
-    self.expiry_time = std.time.timestamp() + self.countdown_timer;
+    const new_expiry_time = std.time.timestamp() + self.countdown_timer;
+    if (self.expiry_time < new_expiry_time) {
+        self.expiry_time = new_expiry_time;
+    }
     self.event_condition.broadcast();
     self.event_mutex.unlock();
 
@@ -171,7 +178,7 @@ fn reboot(self: *Self) void {
     self.players = 2;
     self.needed_to_win = 3;
     self.flipper_chance = 0;
-    self.expiry_time = std.time.timestamp() + 100;
+    self.expiry_time = std.time.timestamp() + initial_countdown_timer;
     self.signal(.init);
 }
 
@@ -184,7 +191,7 @@ fn restart(self: *Self, req: *httpz.Request, res: *httpz.Response) !void {
     res.body = "restarted";
     self.state = .init;
     self.countdown_timer = start_countdown_timer;
-    self.expiry_time = std.time.timestamp() + 100;
+    self.expiry_time = std.time.timestamp() + initial_countdown_timer;
     self.signal(.init);
 }
 
@@ -197,7 +204,7 @@ fn clock(self: *Self, stream: std.net.Stream) !void {
     try w.writeAll("event: clock\n");
     var remaining = self.expiry_time - std.time.timestamp();
     if (self.state == .running and remaining > 0) {
-        try stream.writer().print("data: {d} seconds remaining ...\n\n", .{self.expiry_time - std.time.timestamp()});
+        try stream.writer().print("data: {d} seconds remaining ...\n\n", .{remaining});
     } else {
         try w.writeAll("data: 🕑\n\n");
     }
@@ -219,30 +226,35 @@ fn zeroWing(self: *Self, req: *httpz.Request, res: *httpz.Response) !void {
 fn yourTurnAudio(self: *Self, req: *httpz.Request, res: *httpz.Response) !void {
     _ = self;
     _ = req;
+    res.header("Content-Type", "audio/mpeg");
     res.body = @embedFile("audio/your-turn.mp3");
 }
 
 fn zeroWingAudio(self: *Self, req: *httpz.Request, res: *httpz.Response) !void {
     _ = self;
     _ = req;
+    res.header("Content-Type", "audio/mpeg");
     res.body = @embedFile("audio/zero-wing.mp3");
 }
 
 fn nukeAudio(self: *Self, req: *httpz.Request, res: *httpz.Response) !void {
     _ = self;
     _ = req;
+    res.header("Content-Type", "audio/mpeg");
     res.body = @embedFile("audio/nuke.mp3");
 }
 
 fn victoryAudio(self: *Self, req: *httpz.Request, res: *httpz.Response) !void {
     _ = self;
     _ = req;
+    res.header("Content-Type", "audio/mpeg");
     res.body = @embedFile("audio/victory.mp3");
 }
 
 fn lostAudio(self: *Self, req: *httpz.Request, res: *httpz.Response) !void {
     _ = self;
     _ = req;
+    res.header("Content-Type", "audio/mpeg");
     res.body = @embedFile("audio/lost.mp3");
 }
 

src/html/index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 
 <head>
@@ -9,7 +10,7 @@
     <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
     <script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>
 
-    <meta name="app-version" content="20230726.1" desc="now with audio">
+    <meta name="app-version" content="20230727.1" desc="fixed safari audio">
 
     <link rel="stylesheet" href="styles.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -45,12 +46,17 @@
         Player <span id="player" hx-swap-oob="true">
     </div>
 
+    <div>
+        <input class="blue-button" type="button" value="Enable Audio" onclick="yourTurnAudio.play()">
+    </div>
+
     <script>
-        let yourTurnAudio = new Audio("audio/your-turn.mp3")
-        let zeroWingAudio = new Audio("audio/zero-wing.mp3")
-        let nukeAudio = new Audio("audio/nuke.mp3")
-        let victorAudio = new Audio("audio/victory.mp3")
-        let lostAudio = new Audio("audio/lost.mp3")
+        // define some audio snippets
+        const yourTurnAudio = new Audio("audio/your-turn.mp3")
+        const zeroWingAudio = new Audio("audio/zero-wing.mp3")
+        const nukeAudio = new Audio("audio/nuke.mp3")
+        const victoryAudio = new Audio("audio/victory.mp3")
+        const lostAudio = new Audio("audio/lost.mp3")
 
         // Just some minimal vanilla-JS to add a couple of helper functions
         function getPlayer() {

src/html/styles.css

@@ -117,6 +117,28 @@ body {
     box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
 }
 
+.blue-button {
+    border: 0;
+    line-height: 2.5;
+    padding: 0 20px;
+    font-size: 1rem;
+    text-align: center;
+    color: #fff;
+    text-shadow: 1px 1px 1px #000;
+    border-radius: 10px;
+    background-color: rgba(0, 100, 200, 1);
+    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
+    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
+}
+
+.blue-button:hover {
+    background-color: rgba(255, 0, 0, 1);
+}
+
+.blue-button:active {
+    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
+}
+
 .green-button {
     border: 0;
     line-height: 2.5;