~johanvandegriff/games.johanv.xyz

ref: 56868d8a29174487dc2e2ae368b4905ee614d3e3 games.johanv.xyz/templates/boggle/lobby.html -rw-r--r-- 8.2 KiB
56868d8aJohan Vandegriff added full trace to error print, viewport on upload page 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 (beta)</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' %}