glow-maze/index.html at main · Zahir-R/glow-maze · 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">
    <meta name="description" content="Light Up - A puzzle game where you illuminate a grid using limited light sources.">
    <meta name="keywords" content="Glow Maze, puzzle game, grid, illuminate, light sources, torch, bulb, flashlight">
    <link rel="stylesheet" href="./styles.css">
    <link rel="icon" href="images/bulb-accent.png" type="image/png">
    <title>Glow Maze - Puzzle Game of Light and Logic</title>
</head>

<body>
    <header>
        <h1 translate="no">Glow Maze</h1>
        <h2>Highlight every corner!</h2>
    </header>

    <main>
        <div id="level-counter">
            <span>Level: 1</span>
            <div class="control-buttons">
                <div id="options-menu" class="options-menu">
                    <div class="top-row"></div>
                    <div class="middle-row"></div>
                    <div class="bottom-row"></div>
                    <div class="menu-label">Menu</div>
                </div>
                <div id="help-menu" class="help-menu">
                    <p>?</p>
                    <div class="help-label">Help</div>
                </div>
            </div>
        </div>

        <div class="grid-section">
            <section class="grid-board" id="grid-container"></section>

            <div id="light-selector" role="group" aria-label="Light source selector">
                <button id="bulb-btn" aria-label="Select bulb as light source">
                    <img src="images/bulb.png" alt="Bulb">
                    <span id="bulb-count" class="inventory-count">10</span>
                </button>
                <button id="flashlight-btn" aria-label="Select flashlight as light source">
                    <img src="images/flashlight.png" alt="Flashlight">
                    <span id="flashlight-count" class="inventory-count">5</span>
                </button>
            </div>
        </div>

        <div id="message-container"></div>

        <div class="modal-overlay" style="display: none;">
            <div class="modal-content" style="display: none;">
                <h2 class="menu-title">Game Menu</h2>

                <div class="menu-options">
                    <button id="restart-level" class="menu-btn restart-level">
                        <svg class="icon" viewBox="0 0 24 24">
                            <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"/>
                        </svg>
                        Restart Level
                    </button>
                    <button id="restart-game" class="menu-btn restart-game">
                        <svg class="icon" viewBox="0 0 24 24">
                            <path d="M13,3H11V13H13V3M17.83,5.17L16.41,6.59C18.05,7.91 19,9.9 19,12A7,7 0 0,1 12,19C8.14,19 5,15.88 5,12C5,9.91 5.95,7.91 7.58,6.58L6.17,5.17C2.38,8.39 1.92,14.07 5.14,17.86C8.36,21.64 14.04,22.1 17.83,18.88C21.61,15.66 22.06,9.97 18.85,6.18L17.83,5.17Z"/>
                        </svg>
                        Restart Game
                    </button>
                    <button id="close-menu" class="menu-btn close">
                        <svg class="icon" viewBox="0 0 24 24">
                            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
                        </svg>
                        Close Menu
                    </button>
                </div>
            </div>
        </div>

        <section class="info" aria-label="Instructions">
            <h2>How to play</h2>
            <p>Each cell must be illuminated to complete the level. Select the object you want to use and click on the cell to illuminate the surroundings.</p>
            <p>Bulbs and Flashlights emit light differently: bulbs illuminate all adjacent cells around them, while flashlights shine in a straight line.</p>
            <p>Tap or click on the objects to remove them. Clicking on the flashlights will rotate them 90 degrees.</p>
            <p>There may be more than one solution to the puzzles, but try to use the least amount of luminous objects because they are limited.</p>
        </section>

        <div id="help-modal" class="modal" style="display: none;">
            <div class="modal-overlay"></div>
            <div class="modal-content">
                <button class="close-modal">&times;</button>
                <button class="prev-slide">&lt;</button>
                <button class="next-slide">&gt;</button>

                <div class="slide">
                    <div id="help-grid-container" class="grid-board"></div>
                    <div class="explanation">
                        <p id="slide-explanation">Bulbs illuminate adjacent cells in all directions. Flashlights shine in a straight line and can be rotated.</p>
                    </div>
                </div>

                <div class="slide-indicators">
                    <span class="dot active"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>
            </div>
        </div>
    </main>

    <script type="module" src="./js/main.js"></script>
</body>
</html>