PrismTanker.github.io/index.html at main · PrismTanker/PrismTanker.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
<!DOCTYPE html>
<html>
    <head>
        <title>X-Wing 2.0 Wildspace Scenareo Selector</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="css/style.css">
        <!-- TODO some missing header stuff -->
        <!-- JQuery 3.6.4 Slim (Minified, if need to debug change to uncompressed) -->
        <!-- <script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous"></script> -->
        <!-- Slim doesn't include Ajax -_- -->
        <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
        <script src="js/load_data.js"></script>
    </head>

    <body>
        <!-- Fixed Navigation Header -->
        <header>
            <button id="card_selection_button" type="button"> Card Selection </button>
            <h1>Wildspace Scenareo Selector</h1>
            <h2>Legacy Project Links:</h2>

            <div class = "horizontal">
                <a href="https://x2po.org/">
                    <h3>Home Page</h3>
                </a>

                <a href="http://xwing-legacy.com/">
                    <h3>Squad Builder</h3>
                </a>
            </div>
        </header>

        <main>
            <!-- Hidden after start button pressed -->
            <div id="initial_prompt">
                <h1>Select your card pool using the button above, then:</h1>
                <button>Select Scenareo</button> <!-- Handlers defined in onReady -->
            </div>

            <!-- Hidden until start button pressed -->
            <div id="the_tool" class="hidden">
                <h1>Eliminate cards by selecting them</h1>

                <!-- Separated Card Sets -->
                <div id="scenareo_selector">
                    <div class="tool_set" id="Environments_tool">
                        <h2>Environments</h2>
                        <div class="card_row horizontal">
                            <!-- Filled out in selectCard -->
                            <img> <!-- TODO empty img throws warnings-->
                            <img>
                            <img>
                            <img>
                        </div>
                    </div>

                    <div class="tool_set" id="Objectives_tool">
                        <h2>Objectives</h2>
                        <div class="card_row horizontal">
                            <img>
                            <img>
                            <img>
                            <img>
                        </div>
                    </div>

                    <div class="tool_set" id="Wildcards_tool">
                        <h2>Wildcards</h2>
                        <div class="card_row horizontal">
                            <img>
                            <img>
                            <img>
                            <img>
                        </div>
                    </div>
                </div>

                <!-- Results display hidden until selection complete -->
                <div id="results_display" class="horizontal hidden">
                    <div id="Environments_result" class="result">
                        <h2>Environment</h2>
                        <img>
                    </div>

                    <div id="Objectives_result" class="result">
                        <h2>Objective</h2>
                        <img>
                    </div>

                    <div id="Wildcards_result" class="result">
                        <h2>Wildcard</h2>
                        <img>
                    </div>
                </div>

                <div class = "horizontal">
                    <h3>You can reselect cards and start again at any time</h3>
                    <button id="tool_reset">Reset Selection</button>
                </div>
            </div>

            <!-- Hidden by default, toggled with header button -->
            <div id="card_selector" class="toggled">
                <p id="invalid_selection_warning" class="warning_text hidden">You must have at least 3 cards selected per category!</p>
                <h1>Select cards from which to randomly draw</h1>
                <h2>Click/Tap cards to cycle card count</h2>

                <!-- Filters -->
                <div id="filters" class="horizontal">
                    <input id="text_filter" type="text" placeholder="Text filter" form="filter">

                    <label for="Environments_filter">Environments</label>
                    <input id="Environments_filter" type="checkbox" checked="checked" form="filter">

                    <label for="Objectives_filter">Objectives</label>
                    <input id="Objectives_filter" type="checkbox" checked="checked" form="filter">

                    <label for="Wildcards_filter">Wildcards</label>
                    <input id="Wildcards_filter" type="checkbox" checked="checked" form="filter">
                </div>

                <div id="card_display">
                    <!-- Will be filled by initBrowser -->
                </div>
            </div>

        </main>

        <script src="js/scenareo_selection.js"></script>
        <script src="js/card_selection.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>