-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (104 loc) · 5.38 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Munchkin Level Counter</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@^2.0.0/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.19/dist/umd/quasar.mat.min.css" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script>
window.quasarConfig = {
brand: {
// primary: '#e46262',
},
}
</script>
<script defer src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.19/dist/umd/quasar.mat.umd.min.js"></script>
<script defer src="WebRTC-P2P.js"></script>
<script defer src="Player.class.js"></script>
<script defer src="PlayerForm.vue.js"></script>
<script defer src="ui.js"></script>
</head>
<body>
<div id="level-counter">
<q-layout>
<q-layout-header>
<q-toolbar>
<!-- showLeft is a model attached to left side drawer below -->
<q-btn flat round dense
@click="l.showLeft = !l.showLeft"
icon="menu"></q-btn>
<q-toolbar-title>
Level Counter
</q-toolbar-title>
<q-btn flat round icon="person_add" @click="addPlayer" title="Add Player" class="q-mr-sm"></q-btn>
<q-btn flat round :icon="rollIcon()" @click="rollDice" wait-for-ripple></q-btn>
</q-toolbar>
</q-layout-header>
<!-- optional -->
<q-layout-drawer side="left" v-model="l.showLeft">
<div class="layout-drawer-container q-pa-md">
<div class="social column q-mb-md">
<q-btn @click="inviteFriend" label="Invite friend"></q-btn>
<q-btn @click="joinFriend" label="Join friend"></q-btn>
</div>
<hr>
<div class="about q-mt-md">
<p>This is an experiment in VueJS (and WebRTC P2P, work but not already implemented)</p>
<p>For a web-app (TODO PWA) of a level counter for <a href="http://www.worldofmunchkin.com/game/" target="_blank">munchkin game</a></p>
<p>For now, It's ugly, but it work for basic functionnality</p>
<p><a href="https://github.com/munckin-level-counter/munckin-level-counter.github.io">Source code</a></p>
</div>
</div>
</q-layout-drawer>
<q-page-container class="q-pa-md">
<q-table ref="players" :data.sync="players" class="q-my-md"
:columns="playersColumns" :visible-columns="['name', 'level', 'force']"
selection="single" :selected.sync="l.selected"
row-key="id" :rows-per-page-options="[]">
<q-td slot="body-cell-name" slot-scope="props" :props="props">
<span class='color-bubble' :style="{background: props.row.color}"> </span>
{{ props.row.name }}
</q-td>
<div slot="bottom" slot-scope="props" class="row justify-between items-center fit">
<q-btn
round dense icon="chevron_left" color="primary"
class="q-mr-md" @click="previous"
></q-btn>
<h5 class="flex items-center" style="margin: 0"><span class='color-bubble' :style="{background: selected.color}"> </span> {{ selected.name }}</h5>
<q-btn
round dense icon="chevron_right" color="primary"
@click="next"
></q-btn>
</div>
</q-table>
<form-player :player="selected"></form-player>
</q-page-container>
<!-- optional -->
<q-layout-footer>
</q-layout-footer>
</q-layout>
</div>
<template id="form-player-component">
<form class="selected-player" v-if="player">
<q-color stack-label="Color" v-model="player.color"></q-color>
<q-input stack-label="Name" v-model="player.name"></q-input>
<q-input stack-label="Level" v-model="player.level"
type="number" min="1"
:after="levelInput"></q-input>
<q-input stack-label="Stuff" v-model="player.stuff"
type="number" min="0"
:after="stuffInput"></q-input>
<q-input stack-label="Modifier" v-model="player.modifier"
type="number"
:after="modifierInput"></q-input>
<q-btn round @click="player.switch()">{{ player.sex }}</q-btn>
<q-btn round icon="delete_forever" @click="remove()"></q-btn>
<slot></slot>
</form>
</template>
</body>
</html>