CrystalCollector/index.html at main · Jeff-Ashear/CrystalCollector · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crystal Collector</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="icon" href="./assets/images/favicon.jfif">
    <link rel="stylesheet" href="./assets/css/styles.css">
    <link rel="stylesheet" href="./assets/css/cheatAnim.css">

</head>

<body>
    <!-- Hello!  Thank you so much for taking the time to look over my humble bootstrap + keyframes demo with a pinch of js.  There is a testing (or cheat) mode described in the instructions. The purpose of this SPA is to demonstrate facility with the timing and presentation of meaningful user feedback with multiple conditions.-->
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid justify-content-center">
            <a class="navbar-brand" href="#">
                <img src="./assets/images/favicon.jfif" alt="" width="30" height="24"
                    class="d-inline-block align-text-top">
                Crystal Collector 2
                <img src="./assets/images/favicon.jfif" alt="" width="30" height="24"
                    class="d-inline-block align-text-top">
            </a>
        </div>
    </nav>

    <!-- being instructions accordion -->
    <div class="row instructions justify-content-center">
        <div class="accordion col-6 col-12-sm" id="accordionFlushExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="flush-headingOne">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                        Instructions
                    </button>
                </h2>
                <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
                    data-bs-parent="#accordionFlushExample">
                    <div class="accordion-body">
                        <p>Do you ever wish that every time you petted a crystal skull it would immediately be added to your collection without the need to search the rainforest for hidden temple ruins and evade ancient traps?  I know you do.  Well now is your chance.</p><br><br>
                        <p><strong>Match the number on the top right.</strong> This is achieved by clicking on the
                            crystal skulls. Each skull represents a unique random number between 1 and 10. Each time you
                            click a skull it's number will be added
                            to your score. If your score exceeds the "Match Me" number you lose the round. If you match
                            the number, you win
                            that round! Each round your score is set to zero and the number to match as well as each
                            skull's number is
                            re-rolled. Have fun!</p>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="cheatSwitch">
                            <label class="form-check-label" for="flexSwitchCheckDefault">Allow cheat code input.</label>
                        </div>
                        <p id="cheatInstructions" style="display: none">While the above switch is on, you may enable
                            cheats. Input the following code: <br><br>
                            Pink, black, black, blue, black. <br><br>
                            Cheat buttons will appear at the bottom of the page. These will allow you to quickly input
                            win or loss conditions without having to play the game for testing purposes, or for, well,
                            cheating.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End instructions accordion -->

    <!-- begin gameboard -->
    <div class="container interface" id="board">
        <!-- begin scoreboard -->
        <div class="interface">
            <div class="row" id="scoreboard">
                <div class="row">
                    <div class="col-4">
                        <h1 id="random">0</h1>
                    </div>
                    <div class="col-2">
                        <h1 id="wins">0</h1>
                    </div>
                    <div class="col-2">
                        <h1 id="losses">0</h1>
                    </div>
                    <div class="col-4 d-flex justify-content-end">
                        <h1 id="score">0</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col-4">Match Me</div>
                    <div class="col-2">Wins</div>
                    <div class="col-2">Losses</div>
                    <div class="col-4 d-flex justify-content-end">Score</div>
                </div>
            </div>
        </div>
        <!-- end scoreboard -->

        <!-- begin user controller interface, or if you prefer, clicky pictures -->
        <div class="row interface" id="controlls">
            <!-- Begin the testing/cheat interface.  It is not displayed until the conditions are met as outlined in the instructions. -->
            <div id="chtBtnDiv" class="row justify-content-center" style="display: none">
                <div class="col-12">
                    <div id="cheatBar" class="row row-cols-3 chtImgs justify-content-center">
                        <img src="./assets/images/Key2.png" alt="" id="winBtn" class="img-fluid chtBtns col"
                            style="width: 25%; height: auto;" title="Click this Key for an instant win.">
                        <img src="./assets/images/Hammer.png" alt="" id="lossBtn" class="img-fluid chtBtns col"
                            style="width: 25%; height: auto;" title="Click this hammer for an instant loss">
                        <img src="./assets/images/Peek.png" alt="" id="peekBtn" class="img-fluid chtBtns col"
                            style="width: 25%; height: auto;"
                            title="Click this magnifying glass to show the value of each skull.">
                    </div>
                </div>
            </div>
            <!-- end testing controlls -->

            <!-- begin game controlls begin  -->
            <div class="row justify-content-center">
                <div class="card col-6 col-12-sm" id="aSkull" style="width: 18rem;">
                    <img src="./assets/images/skull1.jfif" style="opacity: 100%" alt="" id="skull1"
                        class="card-img-top">
                    <h2 class="card-title you">
                        </h4>
                </div>
                <div class="card col-6 col-12-sm" id="bSkull" style="width: 18rem;">
                    <img src="./assets/images/skull2.jfif" alt="" id="skull2" class="card-img-top">
                    <h4 class="card-title outcome"></h4>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="card col-6 col-12-sm" id="cSkull" style="width: 18rem;">
                    <img src="./assets/images/skull3.jfif" alt="" id="skull3" class="card-img-bottom">
                    <h4 class="card-title you"></h4>
                </div>
                <div class="card col-6 col-12-sm" id="dSkull" style="width: 18rem;">
                    <img src="./assets/images/skull4.jfif" alt="" id="skull4" class="card-img-bottom">
                    <h2 class="card-title outcome">
                        </h4>
                </div>
            </div>
        </div>
        <!-- end game controlls -->
    </div>

    <!-- begin footer -->
    <footer class="row text-center mt-auto">
        <div class="col-12 ">Copyright 2022, Jeff Ashear</div>
    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
        integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"
        integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
        crossorigin="anonymous"></script>
    <script src="./assets/js/gameLogic.js"></script>
</body>

</html>