74 lines
1.9 KiB
HTML
74 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Graffiti JS Demo</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
<script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script>
|
|
<script type="importmap">{ "imports": {
|
|
"vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.esm-browser.prod.min.js",
|
|
"graffiti-vue": "../plugins/vue/plugin.js"
|
|
}}</script>
|
|
<script type="module">
|
|
import { createApp } from 'vue'
|
|
import { Name, SetMyName } from './components/name.js'
|
|
import Chat from './components/chat.js'
|
|
import Moderation from './components/moderation.js'
|
|
import PrivateMessaging from './components/private-messaging.js'
|
|
import GraffitiVue from 'graffiti-vue'
|
|
createApp()
|
|
.use(GraffitiVue)
|
|
.component('Name', Name)
|
|
.component('SetMyName', SetMyName)
|
|
.component('Chat', Chat)
|
|
.component('Moderation', Moderation)
|
|
.component('PrivateMessaging', PrivateMessaging)
|
|
.mount('#app')
|
|
</script>
|
|
</head>
|
|
<body id="app">
|
|
|
|
<h1>Graffiti Demo</h1>
|
|
|
|
<h2>Connection Status</h2>
|
|
|
|
<p>
|
|
Connected to the Graffiti server? <b>{{ $graffitiConnected }}</b>
|
|
</p>
|
|
|
|
<h2>Logging In</h2>
|
|
|
|
<p>
|
|
<button @click="$graffitiToggleLogIn">
|
|
{{ !$graffitiMyID? 'Log In' : 'Log Out' }}
|
|
</button>
|
|
</p>
|
|
|
|
<p v-if="$graffitiMyID">
|
|
My Graffiti ID is <b>{{ $graffitiMyID }}</b>
|
|
</p>
|
|
|
|
<h2>Profile</h2>
|
|
|
|
<p>
|
|
My name is: <name :of="$graffitiMyID"></name>
|
|
</p>
|
|
|
|
<set-my-name :tags="[$graffitiMyID]"></set-my-name>
|
|
|
|
<h2>Chatting</h2>
|
|
|
|
<chat></chat>
|
|
|
|
<h2>Moderation</h2>
|
|
|
|
<moderation></moderation>
|
|
|
|
<h2>Private Messaging</h2>
|
|
|
|
<private-messaging></private-messaging>
|
|
</body>
|
|
</html>
|