InternetEnemies.github.io/index.html at main · InternetEnemies/InternetEnemies.github.io · 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
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf8">
    <title>Combat Critters</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <script>
        const features = [
            {
                name:"Trading",
                desc:"Trade items in exchange for other items.",
                iframe:"<iframe src=\"https://www.youtube.com/embed/29EG5N9KiSU?si=GJtFn9kfNJT4ZtRu\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>"
            },
            {
                name:"Battles",
                desc:"Battle computer controlled opponents with your cards.",
                iframe:"<iframe src=\"https://www.youtube.com/embed/7mwzEAh34rU?si=Vv5udtBd5DmTR-ve\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>"
            },
            {
                name:"Card Catalog and Collecting",
                desc:"Collect cards and browse the catalog of all available cards.",
                iframe:"<iframe src=\"https://www.youtube.com/embed/LF7U3iDQBy4?si=6B3iNM5gwNtk65iN\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>"
            },
            {
                name:"Currency",
                desc:"Obtain currency to spend on items in the game",
                iframe:"<iframe src=\"https://www.youtube.com/embed/J3g8dVlU-Ro?si=tikYSu7cfZryaILy\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>"
            },
            {
                name:"Deck Builder",
                desc:"Build your deck",
                iframe:"<iframe src=\"https://www.youtube.com/embed/AlfJwE-PJ3M?si=3dF7rKjJa_Q7gqJD\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>"
            },
            {
                name:"Pack Opening",
                desc:"Open packs to obtain cards",
                iframe:"<iframe src=\"https://www.youtube.com/embed/ox7tvFP8QX8?si=ezk_AZWjx4SGA1Sr\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>"
            },
            {
                name:"Marketplace",
                desc:"Browse the market and purchase items",
                iframe:"<iframe src=\"https://www.youtube.com/embed/xBJSshGuxvA?si=miWtMB4v9ALNMYcX\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>"
            },
            {
                name:"Trade Up",
                desc:"Trade up 5 of your cards for a better card",
                iframe:"<iframe src=\"https://www.youtube.com/embed/ASY6K1LFzCw?si=JxcU4jjYENZmUHjA\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>"
            }

        ]

        const getCard = ({name, desc, iframe}) => {
            return `
    <div class="card m-2">
        ${iframe}
        <div class="card-body">
            <h5 class="card-title feature-name">${name}</h5>
            <p class="card-text feature-description">
                ${desc}
            </p>
        </div>
    </div>
    `
        }

        $(document).ready(() => {
            features.forEach((feature) => {
                $("#features").append(getCard(feature))
            })
        })
    </script>

    <style>
        .card {
            width:18rem;
        }
    </style>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg bg-dark navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href=".">Combat Critters</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href=".">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="team.html">Our Team</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="postmortem.html">Postmortem</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="p-5 bg-primary text-white text-center">
    <h1>Combat Critters</h1>
    <p>A simple deck building game.</p>
</div>

<main style="min-height: 100vh">
    <div class="container mt-5">
        <div id="vision">
            <h2>Vision</h2>
            <p>
                The purpose of Combat Critters is to let our audience engage with a simple, fun, and exciting deck management card game allowing them to collect and battle with their favourite cards.
            </p>

            <h5>
                What is Combat Critters?
            </h5>
            <p>
                Combat Critters is a deck management card game that allows players to build and manage their own custom deck of cards. After creating a deck that perfectly suits their needs, they can take it to battle against opponents. These opponents provide players with the same thrilling battle experience as playing the game with physical cards at a table. The increasing difficulty of these opponents also gives players a reason to progress their deck. With our currency system, players can fully curate their own deck of cards to use in battle. Currency is obtained in various ways such as selling cards or winning battles. With this currency, players can buy new cards on the market place, building upon their own deck. Players will be able to share their favourite hand-crafted decks with friends. Additionally, they can request to trade cards with friends if they are looking for an upgrade or want to help their friend’s progress in the game. Our trade-up system allows players to upgrade their cards, ensuring their decks stay fresh and always get stronger. They can also open up various card packs that will grant them access to new cards, helping them build out their personal decks.
            </p>

            <h5>
                Who is Combat Critters for?
            </h5>
            <p>
                Combat Critters is designed primarily for individuals with an interest in trading cards and competitive gaming. It will allow players of all age groups to collect their favourite cards and personalize their own card decks. We fully expect our primary player demographic to be those of all ages with an interest in card games. Combat Critter’s simple and exciting design makes it suitable for everyone.
            </p>

            <h5>
                Why is Combat Critters valuable?
            </h5>
            <p>
                Combat Critters is designed primarily for individuals with an interest in trading cards and competitive gaming. It will allow players of all age groups to collect their favourite cards and personalize their own card decks. We fully expect our primary player demographic to be those of all ages with an interest in card games. Combat Critter’s simple and exciting design makes it suitable for everyone.
            </p>

            <h5>
                How will Combat Critters be successful?
            </h5>
            <p>
                Combat Critters’ success will be measured from multiple goals. Firstly, this will be a success if players find it easier and more efficient than playing card games in person. Secondly, our project will be considered successful if 60% of registered players are still actively playing our game within four months of release.
            </p>

        </div>

        <hr/>

        <div class="mt-3">
            <h2>Features</h2>
            <div class="d-flex flex-wrap justify-content-between" id="features">
            </div>
        </div>
    </div>
</main>

<div class="mt-5 p-4 bg-dark text-white text-center" style="bottom:0; position: relative; width: 100%">
    Page feels kinda wrong without this but idk what to put here so have a cat =^.^=
</div>

</body>
</html>