~johanvandegriff/games.johanv.xyz

ref: f3ab080cb2304ef9778ae9c0914f203e8fd8c2a6 games.johanv.xyz/templates/boggle/lobby.html -rw-r--r-- 8.2 KiB
f3ab080cJohan Vandegriff added upload page to send images thru BoggleCV :) 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
{% include 'header.html' %}

<div id="app" class="gameArea">
    <div class="leftCol">
        <form method="{{ formMethod }}">
            <h1 class="scale">Boggle 2.0 Lobby</h1>
            <p class="scale">Welcome, {{ username }}! Select a game type, or join an existing game.</p>
            <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>
        <p><a href="?username={{ username}}&page=upload">process an image with BoggleCV</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' %}