mirror of
https://git.sr.ht/~emersion/gamja
synced 2025-04-23 12:33:45 -04:00
wip: migrate to vue
This commit is contained in:
Simon Ser
parent
65d675b461
commit
b543645fc1
11 changed files with 5489 additions and 139 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1 +1,2 @@
|
|||
node_modules
|
||||
/public/main.js
|
||||
|
|
|
|||
31
components/App.html
Normal file
31
components/App.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<section id="sidebar">
|
||||
<ul id="buffer-list">
|
||||
<!--<li class="active"><a href="#">##soju-playground</a></li>-->
|
||||
</ul>
|
||||
</section>
|
||||
<section id="buffer">
|
||||
<!--<div class="logline">
|
||||
<a href="#" class="timestamp">12:27:42</a>
|
||||
<<a href="#" class="nick">emersion</a>>
|
||||
Hi there!
|
||||
</div>-->
|
||||
</section>
|
||||
<form id="composer">
|
||||
<input type="text" placeholder="Type a message">
|
||||
</form>
|
||||
|
||||
<section id="connect">
|
||||
<Connect/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Connect from "./Connect.html";
|
||||
|
||||
export default {
|
||||
components: { Connect },
|
||||
};
|
||||
</script>
|
||||
59
components/Connect.html
Normal file
59
components/Connect.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<form v-on:click="$emit('submit', this.data)">
|
||||
<h2>Connect to IRC</h2>
|
||||
|
||||
<label>
|
||||
Nickname:<br/>
|
||||
<input type="username" v-model="nick" autofocus required/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
|
||||
<label for="connect-password">Password:</label><br/>
|
||||
<input type="password" name="password" id="connect-password"/>
|
||||
<br/><br/>
|
||||
|
||||
<input type="checkbox" name="remember-me" id="connect-remember-me"/>
|
||||
<label for="connect-remember-me">Remember me</label>
|
||||
<br/><br/>
|
||||
|
||||
<details>
|
||||
<summary>Advanced options</summary>
|
||||
|
||||
<br/>
|
||||
|
||||
<label for="connect-url">Server URL:</label><br/>
|
||||
<input type="url" name="url" id="connect-url"/>
|
||||
<br/><br/>
|
||||
|
||||
<label for="connect-username">Username:</label><br/>
|
||||
<input type="username" name="username" id="connect-username" placeholder="Same as nickname"/>
|
||||
<br/><br/>
|
||||
|
||||
<label for="connect-realname">Real name:</label><br/>
|
||||
<input type="text" name="realname" id="connect-realname" placeholder="Same as nickname"/>
|
||||
<br/><br/>
|
||||
|
||||
<label for="connect-pass">Server password:</label><br/>
|
||||
<input type="text" name="pass" id="connect-pass" placeholder="None"/>
|
||||
<br/><br/>
|
||||
|
||||
<label for="connect-autojoin">Auto-join channels:</label><br/>
|
||||
<input type="text" name="autojoin" id="connect-autojoin" placeholder="Comma-separated list of channels"/>
|
||||
<br/>
|
||||
</details>
|
||||
|
||||
<br/>
|
||||
|
||||
<button>Connect</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nick: "",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
77
index.html
77
index.html
|
|
@ -1,77 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IRC client</title>
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<section id="sidebar">
|
||||
<ul id="buffer-list">
|
||||
<!--<li class="active"><a href="#">##soju-playground</a></li>-->
|
||||
</ul>
|
||||
</section>
|
||||
<section id="buffer">
|
||||
<!--<div class="logline">
|
||||
<a href="#" class="timestamp">12:27:42</a>
|
||||
<<a href="#" class="nick">emersion</a>>
|
||||
Hi there!
|
||||
</div>-->
|
||||
</section>
|
||||
<form id="composer">
|
||||
<input type="text" placeholder="Type a message">
|
||||
</form>
|
||||
|
||||
<section id="connect">
|
||||
<form>
|
||||
<h2>Connect to IRC</h2>
|
||||
|
||||
<label for="connect-nick">Nickname:</label><br/>
|
||||
<input type="username" name="nick" id="connect-nick" autofocus required/>
|
||||
<br/><br/>
|
||||
|
||||
<label for="connect-password">Password:</label><br/>
|
||||
<input type="password" name="password" id="connect-password"/>
|
||||
<br/><br/>
|
||||
|
||||
<input type="checkbox" name="remember-me" id="connect-remember-me"/>
|
||||
<label for="connect-remember-me">Remember me</label>
|
||||
<br/><br/>
|
||||
|
||||
<details>
|
||||
<summary>Advanced options</summary>
|
||||
|
||||
<br/>
|
||||
|
||||
<label for="connect-url">Server URL:</label><br/>
|
||||
<input type="url" name="url" id="connect-url"/>
|
||||
<br/><br/>
|
||||
|
||||
<label for="connect-username">Username:</label><br/>
|
||||
<input type="username" name="username" id="connect-username" placeholder="Same as nickname"/>
|
||||
<br/><br/>
|
||||
|
||||
<label for="connect-realname">Real name:</label><br/>
|
||||
<input type="text" name="realname" id="connect-realname" placeholder="Same as nickname"/>
|
||||
<br/><br/>
|
||||
|
||||
<label for="connect-pass">Server password:</label><br/>
|
||||
<input type="text" name="pass" id="connect-pass" placeholder="None"/>
|
||||
<br/><br/>
|
||||
|
||||
<label for="connect-autojoin">Auto-join channels:</label><br/>
|
||||
<input type="text" name="autojoin" id="connect-autojoin" placeholder="Comma-separated list of channels"/>
|
||||
<br/>
|
||||
</details>
|
||||
|
||||
<br/>
|
||||
|
||||
<button>Connect</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<script type="module">
|
||||
import "./assets/client.js";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +1,12 @@
|
|||
import * as irc from "./irc.js";
|
||||
import * as irc from "./lib/irc.js";
|
||||
|
||||
import Vue from "vue";
|
||||
import App from "./components/App.html";
|
||||
|
||||
new Vue({
|
||||
el: "body",
|
||||
render: (createElement) => createElement(App),
|
||||
});
|
||||
|
||||
var server = {
|
||||
name: "server",
|
||||
5392
package-lock.json
generated
5392
package-lock.json
generated
File diff suppressed because it is too large
Load diff
19
package.json
19
package.json
|
|
@ -1,10 +1,19 @@
|
|||
{
|
||||
"name": "gamja",
|
||||
"devDependencies": {
|
||||
"http-server": "^0.12.3"
|
||||
},
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "http-server ."
|
||||
"build": "webpack --mode production",
|
||||
"watch": "webpack --watch --mode development",
|
||||
"start": "webpack-dev-server"
|
||||
},
|
||||
"private": true
|
||||
"dependencies": {
|
||||
"vue": "^2.6.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vue-loader": "^15.9.3",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
14
public/index.html
Normal file
14
public/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IRC client</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<p>Please enable JavaScript to use gamja.</p>
|
||||
</noscript>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
25
webpack.config.js
Normal file
25
webpack.config.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
const path = require("path");
|
||||
const VueLoaderPlugin = require("vue-loader/lib/plugin");
|
||||
|
||||
module.exports = {
|
||||
entry: "./index.js",
|
||||
output: {
|
||||
filename: "main.js",
|
||||
path: path.resolve(__dirname, "public"),
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.html$/,
|
||||
include: [path.resolve(__dirname, "components")],
|
||||
loader: 'vue-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
],
|
||||
devServer: {
|
||||
contentBase: "public",
|
||||
},
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue