master-mind-web-game/index.html at master · medjabri1/master-mind-web-game · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MasterMind</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="shortcut icon" href="./assets/logo.png" type="image/x-icon">
    <script src="./main.js" defer></script>
</head>
<body>
    <div class="container">

        <div class="game">

            <div class="panel home-screen active">
                <h2 class="title">Welcome to <span>Master-Mind</span></h2>
                <img src="./assets/play.png" class="play-button" alt="play button icon">
                <span class="help-button">How to play?</span>
            </div>

            <div class="panel main-game">
                <div class="game-display">
                    <div class="master-mind"></div>
                    <div class="results"></div>
                </div>
                <div class="game-board">

                    <div class="game-info">
                        <h2 class="game-title">Master-Mind</h2>
                        <p class="attempts">Attempts remaining : <span class="attempts-remaining-nbr">8</span></p>
                    </div>

                    <div class="game-play">

                        <p>Colors :</p>
                        <div class="colors-list"></div>

                        <p>Current row :</p>
                        <div class="current-row"></div>

                        <span class="confirm-button">Confirm</span>

                    </div>

                </div>
            </div>

            <div class="panel help-screen">
                <h2 class="title">What to do?</h2>
                <p>You have to guess the circles colors order generated by the computer in an exact amount of attempts!</p>

                <h2 class="title">Hints available?</h2>
                <p>
                    In the side panel of the game you will see a number of small cricles depending of number of colors chosen,
                    <br>
                    Black cirlce means that you have one circle with the right color and placed in the right place,
                    <br>
                    White cirlce means that you have ont cirlce with the right color but placed in the wrong place.
                    <br>
                    <br>
                    For more difficulty, hints will be given just for distinct color, for example if you have two circles placed in the right place but they have the same color you will get just one black hint.
                </p>

                <span class="home-screen-button">Back</span>
            </div>

            <div class="panel won-screen">
                <h2 class="title">You WON!</h2>
                <img src="./assets/medal.png" class="won-icon" alt="WON medal icon">
                <span class="home-screen-button">Home</span>
                <span class="restart-button">Restart</span>
            </div>

            <div class="panel lose-screen">
                <h2 class="title">You Lost!</h2>
                <img src="./assets/sad.png" class="sad-icon" alt="Sadicon">
                <span class="home-screen-button">Home</span>
                <span class="restart-button">Restart</span>
            </div>

        </div>

    </div>
</body>
</html>