programming3/index.html at main · vpetrosyan5/programming3 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <script src="./p5.js"></script>
    <script src="./game.js"></script>
    <title>Game</title>
</head>
<body>
    <h1 style="margin: 0px">Simulation Game</h1>
    <br>
    <h3>CHARACTERS:</h3>
    <h3 class="hint" style="color:lightgrey">Click on texts to view info</h3>
    <br>
    <div style="display: flex; justify-content: center">
        <h3 class="characterDesc" style="color:#8a6e69" onclick="alert('Empty Cell')">Dirt</h3>
        <div>
            <h3 class="characterDesc" id="grassT" style="color:#29d958" onclick="alert('Grass Cell')">Grass <button onclick="removecell(1)">Remove</button></h3>

        </div>

        <h3 class="characterDesc" id="grassEaterT" style="color:#d9a429" onclick="alert('Grass Eater, eats grass to survive')"> Grass Eater</h3>
        <h3 class="characterDesc" id="predatorT" style="color:brown" onclick="alert('Predator, eats Grass eaters to survive')"> Predator</h3>
        <h3 class="characterDesc" id="dpredatorT" style="color:black" onclick="alert('Dangerous Predator, eats Grass, Grass Eaters and Predators to survive')"> Dangerous Predator</h3>
        <h3 class="characterDesc" style="color:rgb(135, 135, 135)" onclick="alert('Thunder, burns neighboring grass cells')"> Thunder</h3>
        <h3 class="characterDesc" id="fireT" style="color:red" onclick="alert('Fire, burns grass and spreads')"> Fire</h3>
    </div>
    <br>

    <h3 class="hint" style="color:lightgrey"> Click on cells to create thunderstorms!</h3>
    <button id="deletec" onClick="deleteCellsDialog()">Delete Cells</button>
    <button id="season" onClick="changeSeason()">Change Season</button>
    <button id="statbut" onClick="switchStats()">Show Stats</button>
    <br>
</body>

</html>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
    body
    {
        background-color: #f3f3f3;
        color:rgb(43, 47, 49);
        font-family: 'Montserrat', sans-serif;
    }
    button
    {
        transition-duration: 0.4s;
        box-shadow: none;
        margin: 10px;
        padding: 10px;
        border: none;
        cursor: pointer;
    }
    button:hover
    {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    }
    *
    {
        margin: 0px;
        padding:0px;
        text-align: center;
    }
    .characterDesc{
        margin-right: 30px;
        cursor: pointer;
    }
    .characterDesc:hover{
        text-decoration: underline;

    }
    .hint
    {
        font-style: italic;
    }

</style>