~johanvandegriff/games.johanv.xyz

ref: 7b7344562a48457af619b906c62139ac5239bd5c games.johanv.xyz/templates/boggle/lobby.html -rw-r--r-- 8.5 KiB
7b734456Johan Vandegriff finished UI for BoggleCV :D 10 months ago
                                                                                
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
{% include 'header.html' %}

<div id="app" class="gameArea">
    <div class="leftCol">
        <h1 class="scale">Boggle 2.0 Lobby</h1>
        <p class="scale">Welcome, {{ username }}! Select a game type, or join an existing game.</p>
        <form>
            <input type="hidden" name="username" value="{{ username }}"/>
            <input type="hidden" name="page" value="upload"/>
            <input class="greenButton" type="submit" value="BoggleCV (new!)"/>
        </form>
        <p>Take a picture of a Boggle board and BoggleCV will use machine learning to detect the letters. Then you can play it here like a normal game, and see what words the computer found.</p>
        <form method="{{ formMethod }}">
            <input class="radioHide" type="radio" name="preset" id="5x5" value="5x5" v-model="preset">
            <label class="leftCol grayBox" for="5x5">
                5x5, find words with 4 letters or more in 3 minutes<br/>
                <img class="hideSmall" src="/static/boggle/5x5.png" style="width:70%"/>
            </label>

            <input class="radioHide" type="radio" name="preset" id="4x4" value="4x4" v-model="preset">
            <label class="rightCol grayBox" for="4x4">
                4x4, find words with 3 letters or more in 3 minutes<br/>
                <img class="hideSmall" src="/static/boggle/4x4.png" style="width:70%"/>
            </label>

            <input class="radioHide" type="radio" name="preset" id="custom" value="custom" v-model="preset">
            <label class="singleCol grayBox" for="custom">
                Custom Board<br/>
                <select class="customSelect" name="size" v-model="size" v-on:click="preset='custom'">
                        <option>2x2</option>
                        <option>3x3</option>
                        <option>4x4</option>
                        <option>5x5</option>
                        <option>6x6</option>
                        <option>7x7</option>
                        <option>8x8</option>
                </select>, find words with
                <select class="customSelect" name="letters" v-model.number="letters" v-on:click="preset='custom'">
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                </select> letters or more in
                <select class="customSelect" name="minutes" v-model.number="minutes" v-on:click="preset='custom'">
                        <option>0.5</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                </select> minutes
            </label>
            <input class="radioHide" type="radio" name="preset" id="random" value="random" v-model="preset">
            <label class="singleCol grayBox" for="random">
                Random Board!<br/>
            </label>
            <input type="hidden" name="username" value="{{ username }}"/>
            <input type="hidden" name="action" value="create"/>
            <input type="hidden" name="page" value="pregame"/>
            <input class="greenButton" type="submit" value="Create Game"/>
        </form>
        <br/>
        <form method="{{ formMethod }}">
            <input type="hidden" name="username" value="{{ username }}"/>
            <input type="hidden" name="page" value="stats"/>
            <input class="purpleButton" type="submit" value="Past Games & Stats"/>
        </form>
        <br/>
        <form method="{{ formMethod }}" onsubmit="removeCookie()">
            <input class="grayButton" type="submit" value="Logout"/>
        </form>
    </div>
    <div class="rightCol">
        <h2 class="scale">Video Call</h2>
        <p><a target="_blank" href="https://drive.confuzer.cloud/index.php/call/wscgqe9r">Join the video chat!</a></p>
        <h2 class="scale" style="margin-bottom: 1em">Current Games</h2>

        <div v-for="game in games" class="grayBox" v-cloak>
            <div style="padding: 5px; border-bottom: 2px solid black;">
            <form method="{{ formMethod }}">
                <span v-if="!game.isStarted">
                    <input class="greenButton" type="submit" value="Join"/>
                    Game #[[ game._id ]] (waiting...)
                    <input type="hidden" name="id" v-bind:value="game._id"/>
                    <input type="hidden" name="action" value="join"/>
                    <input type="hidden" name="page" value="pregame"/>
                </span>
                <span v-else-if="!game.isDone">
                    <input class="blueButton" type="submit" value="Join Late"/>
                    Game #[[ game._id ]] (time left: [[ showTime(game.secondsLeft) ]])
                    <input type="hidden" name="id" v-bind:value="game._id"/>
                    <input type="hidden" name="action" value="join"/>
                    <input type="hidden" name="page" value="play"/>
                </span>
                <span v-else>
                    <input class="purpleButton" type="submit" value="View"/>
                    Game #[[ game._id ]] (time's up!)
                    <input type="hidden" name="id" v-bind:value="game._id"/>
                    <input type="hidden" name="page" value="view"/>
                </span>
                <input type="hidden" name="username" value="{{ username }}"/>
                <input type="hidden" name="id" :value="game._id"/>
            </form>
            </div>
            <div>
                [[ game.size ]]x[[ game.size ]], [[ game.letters ]] letters, [[ game.minutes ]] min, [[ game.players.length ]] players:
                <span v-for="(player, i) in game.players"><span v-if="i>0">, </span>[[ player ]]</span>
            </div>
        </div>
    </div>
    <div class="singleCol"></div>
</div>

{% include 'boggle/common.html' %}

<script>
    function removeCookie() {
        document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    }
    const REMOVE_COMPLETED_FROM_LOBBY_TIMEOUT = {{ remove_completed_from_lobby_timeout }}; //remove games that are finished after this many seconds
    const app = new Vue ({
        delimiters: ['[[',']]'],
        el: "#app",
        data: {
            games: [],
            size: "6x6",
            letters: 4,
            minutes: 3,
            preset: "5x5"
        },
        created () {
            this.getGames();
        },
        methods: {
            everySecond: function() {
                newgames = []
                for (var i=0; i<this.games.length; i++) {
                    game = this.games[i];
                    if (game.isStarted) {
                        game.secondsLeft--;
                        if (game.secondsLeft <= 0) {
                            game.isDone = true;
                        }
                        if (game.secondsLeft > -REMOVE_COMPLETED_FROM_LOBBY_TIMEOUT) {
                            newgames.push(game);
                        }
                    } else {
                        newgames.push(game);
                    }
                }
                this.games = newgames;
            },
            //show time in the mm:ss format, with zero-padding on the seconds
            showTime: function (t) {
                var minutes = Math.floor(t / 60);
                var seconds = (t % 60);
                return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
            },
            getGames: function() {
                fetch('?request=games&page=lobby')
                .then(response => response.json())
                .then(json => {
                    json.games.sort((a, b) => (a._id < b._id) ? 1 : -1)
                    this.games = json.games
                })
            }
        },
        // watch: {
        //     size: function(val) {this.preset = "custom"},
        //     letters: function(val) {this.preset = "custom"},
        //     minutes: function(val) {this.preset = "custom"}
        // }
        mounted () {
            setInterval(() => {
                this.everySecond();
            }, 1000);
            setInterval(() => {
                this.getGames();
            }, 5000);
        }
    });
</script>

{% include 'footer.html' %}