TLCgames.github.io/index.html at main · TLCgames/TLCgames.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Three Kins</title>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <main>
        <gameArea>

            <header>
                <score id="1">0</score>

                <h1>
                <span>The Three Kins</span>
                <button id="gameControl">Start Game</button>
                </h1>

                <score id="2">0</score>
            </header>

            <div id="phase"><button id="tutorial">Tutorial</button></div>

            <div id="info">Info</div>

            <div id="relations">View Relations</div>

            <div id="playArea" class="row gx-0">

                <board id="board" class="col-8">
                    <div id="slot0"></div>
                    <div id="slot1"></div>
                    <div id="slot2"></div>
                    <div id="slot3"></div>
                    <div id="slot4"></div>
                    <div id="slot5"></div>
                    <div id="slot6"></div>
                    <div id="slot7"></div>
                    <div id="slot8"></div>
                </board>

                <div id="tray" class="col-4">
                    <div id="tray0"></div>
                    <div id="tray1"></div>
                    <div id="tray2"></div>
                    <div id="tray3"></div>
                    <div id="tray4"></div>
                    <div id="tray5"></div>
                    <div id="tray6"></div>
                    <div id="tray7"></div>
                </div>

            </div>


                <!-- <leftHeader id="score">
                    <header>Score</header>
                    <player1>
                        <player>P 1</player>
                        <score id="1">0</score>
                    </player1>
                    <player2>
                        <player>P 2</player>
                        <score id="2">0</score>
                    </player2>
                </leftHeader>

                <header>
                    <span>The Three Kins</span>
                    <p><button id="gameControl">Start Game</button></p>
                </header>

                <rightHeader id="phase">Phase 0: Press start to get four random chips for each player.</rightHeader>


            <left>
                <ul class="list-unstyled">
                    <li>Evens numbers:</li>
                    <li>2, 4, 6, 8</li>
                    <li>Odd numbers:</li>
                    <li>1, 3, 5, 7, 9</li>
                    <li>Factors of 6:</li>
                    <li>1, 2, 3, 6</li>
                    <li>Factors of 8:</li>
                    <li>1, 2, 4, 8</li>
                    <li>Factors of 9</li>
                    <li>1, 3, 9</li>
                </ul>
            </left>

            <board id="board">
                <div id="slot0"></div>
                <div id="slot1"></div>
                <div id="slot2"></div>
                <div id="slot3"></div>
                <div id="slot4"></div>
                <div id="slot5"></div>
                <div id="slot6"></div>
                <div id="slot7"></div>
                <div id="slot8"></div>
            </board>

            <right>
                <ul class="list-unstyled">
                    <li>Multiples of 3:</li>
                    <li>3, 6, 9</li>
                    <li>Perfect squares:</li>
                    <li>1, 4, 9</li>
                    <li>Prime numbers:</li>
                    <li>2, 3, 5, 7</li>
                    <li>Sums:</li>
                    <li>a + b = c</li>
                    <li>(e.g. 2 + 3 = 5)</li>
                </ul>
            </right>

            <leftFooter id="info">Info</leftFooter>

            <footer id="tray">
                <div id="tray0"></div>
                <div id="tray1"></div>
                <div id="tray2"></div>
                <div id="tray3"></div>
                <div id="tray4"></div>
                <div id="tray5"></div>
                <div id="tray6"></div>
                <div id="tray7"></div>
            </footer>

            <rightFooter id="score">
                A TLC Game
            </rightFooter> -->

        </gameArea>
    </main>
</body>

<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> -->
<script src="js/engine.js"></script>
</body>
</html>