BitstreamBluffs/index.html at main · truevox/BitstreamBluffs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>BitstreamBluffs</title>
    <!-- Load Phaser from CDN -->
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>

    <!-- Load retro game fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">

    <!-- Font preloader script to ensure fonts are loaded before game starts -->
    <script>
        // Store a reference to when fonts are ready
        window.fontsLoaded = false;

        // Function to check if fonts are loaded
        function checkFontsLoaded() {
            if (document.fonts && document.fonts.check) {
                // Modern browsers - use Font Loading API
                const isPressStartLoaded = document.fonts.check('1em "Press Start 2P"');
                const isVT323Loaded = document.fonts.check('1em "VT323"');

                window.fontsLoaded = isPressStartLoaded && isVT323Loaded;

                if (!window.fontsLoaded) {
                    // Try again in 100ms
                    setTimeout(checkFontsLoaded, 100);
                }
            } else {
                // Fallback for browsers without Font Loading API
                // Set a timeout to allow fonts to load
                setTimeout(function() {
                    window.fontsLoaded = true;
                }, 1000); // Give fonts 1 second to load
            }
        }

        // Start checking fonts
        checkFontsLoaded();

        // Start computing the game seed early
        // This will trigger the SHA-256 computation in the background
        window.earlySeedGeneration = true;

        // Preload fonts with invisible elements
        document.addEventListener('DOMContentLoaded', function() {
            // Create and add elements with our custom fonts
            const pressStartPreloader = document.createElement('div');
            pressStartPreloader.style.fontFamily = '"Press Start 2P"';
            pressStartPreloader.style.position = 'absolute';
            pressStartPreloader.style.visibility = 'hidden';
            pressStartPreloader.textContent = 'BITSTREAM BLUFFS';
            document.body.appendChild(pressStartPreloader);

            const vt323Preloader = document.createElement('div');
            vt323Preloader.style.fontFamily = 'VT323';
            vt323Preloader.style.position = 'absolute';
            vt323Preloader.style.visibility = 'hidden';
            vt323Preloader.textContent = 'SEED';
            document.body.appendChild(vt323Preloader);

            // Additionally trigger a check after DOM is loaded
            checkFontsLoaded();
        });
    </script>

    <!-- Load our game modules -->
    <script type="module">
        // Import our main game script which will handle loading all other modules
        import './js/main.js';
    </script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #000000; /* Black background for the page */
            overflow: hidden; /* Prevent scrollbars on the page itself */
            touch-action: none; /* Prevent default touch behaviors like pinch zoom */
        }

        #game-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        canvas {
            display: block; /* Removes default inline spacing */
            width: 100%;
            height: 100%;
            object-fit: contain; /* Maintains aspect ratio */
        }

        /* Hide address bar on mobile devices when possible */
        @media screen and (max-width: 768px) {
            html {
                height: calc(100% + 60px);
            }
        }
    </style>
</head>
<body>
    <div id="game-container"></div>
</body>
</html>