~johanvandegriff/games.johanv.xyz

ref: 56868d8a29174487dc2e2ae368b4905ee614d3e3 games.johanv.xyz/templates/boggle/pregame.html -rw-r--r-- 3.8 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
{% include 'header.html' %}

<div id="app" class="gameArea" v-cloak><form method="{{ formMethod }}">
    <div class="leftCol">
        <h1 class="scale" style="margin-bottom: 1em">Boggle 2.0</h1>
        <p class="scale" v-if="game != undefined">
            Game #[[ game._id ]]<br/>
            [[ game.size ]]x[[ game.size ]], [[ game.letters ]] letters, [[ game.minutes ]] min<br/>
            <span v-if="isHost">
                host (you): [[ username ]]<br/>
            </span>
            <span v-else>
                host: [[ game.players[0] ]]<br/>
                you: [[ username ]]<br/>
            </span>
            Waiting for players...<br/>
        </p>
        <span v-if="isHost">
            <form method="{{ formMethod }}">
                <input type="hidden" name="username" value="{{ username }}"/>
                <input type="hidden" name="action" value="start"/>
                <input type="hidden" name="id" value="{{ id }}"/>
                <input type="hidden" name="page" value="play"/>
                <input class="greenButton" style="float: left; margin: 10px;" type="submit" value="Begin"/>
            </form>
        </span>
        <form method="{{ formMethod }}">
            <input type="hidden" name="username" value="{{ username }}"/>
            <input type="hidden" name="action" value="cancel"/>
            <input type="hidden" name="id" value="{{ id }}"/>
            <input type="hidden" name="page" value="lobby"/>
            <input class="redButton" style="float: left; margin: 10px;" type="submit" value="Cancel" v-if="isHost"/>
            <input class="redButton" style="float: left; margin: 10px;" type="submit" value="Leave Game" v-if="isNotHost"/>
        </form>
        <br/><br/>
    </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>[[ game.players.length ]] players total</h2>
        <p class="scale" v-if="game != undefined">
            <span v-for="(player, i) in game.players"><span v-if="i>0">, </span>[[ player ]]</span>
        </p>
    </div>
    <div class="singleCol"></div>
</form></div>

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

<script>
    const app = new Vue ({
        delimiters: ['[[',']]'],
        el: "#app",
        data: {
            game: undefined,
            username: "{{ username }}",
            isHost: false,
            isNotHost: false
        },
        created () {
            fetch('?request=game&id={{ id }}')
            .then(response => response.json())
            .then(json => {
                this.game = json.game
                console.log(this.game)
                this.isHost = (this.game.players[0] == this.username)
                this.isNotHost = !this.isHost;
            })
        },
        methods: {
            getBasic: function() {
                fetch('?request=basic&id={{ id }}')
                .then(response => response.json())
                .then(json => {
                    console.log(json)
                    if (Object.keys(json).length == 0) { //game has been deleted
                        window.location = "?username={{ username }}&page=lobby"; //go back to lobby
                    }
                    this.game.players = json.players;
                    this.isHost = (this.game.players[0] == this.username)
                    this.isNotHost = !this.isHost;
                    if (json.isStarted) {
                        window.location = "?username={{ username }}&id={{ id }}&page=play";
                    }
                })
            }
        },
        mounted () {
            setInterval(() => {
                this.getBasic();
            }, 1000);
        }
    });
</script>

{% include 'footer.html' %}