From 1cd30f8e690ccc9b0de8bc2303f22789aa221b92 Mon Sep 17 00:00:00 2001
From: Bojun6667 <99935026+Bojun6667@users.noreply.github.com>
Date: Thu, 5 Jan 2023 10:37:16 +0800
Subject: [PATCH 1/3] Update README.md

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2695c2b..50350e3 100644
--- a/README.md
+++ b/README.md
@@ -3,9 +3,10 @@
 欄位 | 內容
 -----|--------
 學期 | 111 學年上學期
-學生 |  xxx
-學號末兩碼 | xx
+學生 |  黃柏鈞
+學號末兩碼 | 20
 教師 | [陳鍾誠](https://www.nqu.edu.tw/educsie/index.php?act=blog&code=list&ids=4)
 學校科系 | [金門大學資訊工程系](https://www.nqu.edu.tw/educsie/index.php)
 課程教材 | https://gitlab.com/cccnqu111/ws
 
+#本網頁是複製老師的專案並修改

From d008ba66ec4ddbfda13394aa2c80d9bc5a7b1d7f Mon Sep 17 00:00:00 2001
From: Bojun6667 <99935026+Bojun6667@users.noreply.github.com>
Date: Thu, 5 Jan 2023 11:15:21 +0800
Subject: [PATCH 2/3] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 50350e3..ea25fc1 100644
--- a/README.md
+++ b/README.md
@@ -9,4 +9,4 @@
 學校科系 | [金門大學資訊工程系](https://www.nqu.edu.tw/educsie/index.php)
 課程教材 | https://gitlab.com/cccnqu111/ws
 
-#本網頁是複製老師的專案並修改
+# 本網頁是複製老師的專案並修改

From 938e61be8e86a78b20179e40c1069133679b1ed3 Mon Sep 17 00:00:00 2001
From: Bojun6667 <99935026+Bojun6667@users.noreply.github.com>
Date: Thu, 5 Jan 2023 11:16:18 +0800
Subject: [PATCH 3/3] Add files via upload

---
 ws111a/README.md         |  11 +
 ws111a/app.js            |  60 ++++++
 ws111a/db.js             | 142 +++++++++++++
 ws111a/hello1.js         |   1 +
 ws111a/public/Myweb.css  | 109 ++++++++++
 ws111a/public/Myweb.js   | 446 +++++++++++++++++++++++++++++++++++++++
 ws111a/public/index.html |  23 ++
 ws111a/server.js         |  77 +++++++
 ws111a/web.db            | Bin 0 -> 20480 bytes
 9 files changed, 869 insertions(+)
 create mode 100644 ws111a/README.md
 create mode 100644 ws111a/app.js
 create mode 100644 ws111a/db.js
 create mode 100644 ws111a/hello1.js
 create mode 100644 ws111a/public/Myweb.css
 create mode 100644 ws111a/public/Myweb.js
 create mode 100644 ws111a/public/index.html
 create mode 100644 ws111a/server.js
 create mode 100644 ws111a/web.db

diff --git a/ws111a/README.md b/ws111a/README.md
new file mode 100644
index 0000000..b5443f1
--- /dev/null
+++ b/ws111a/README.md
@@ -0,0 +1,11 @@
+# 課程：網站設計進階 -- 筆記、習題與報告
+
+欄位 | 內容
+-----|--------
+學期 | 111 學年上學期
+學生 |  xxx
+學號末兩碼 | xx
+教師 | [陳鍾誠](https://www.nqu.edu.tw/educsie/index.php?act=blog&code=list&ids=4)
+學校科系 | [金門大學資訊工程系](https://www.nqu.edu.tw/educsie/index.php)
+課程教材 | https://gitlab.com/cccnqu111/ws
+
diff --git a/ws111a/app.js b/ws111a/app.js
new file mode 100644
index 0000000..b1e411b
--- /dev/null
+++ b/ws111a/app.js
@@ -0,0 +1,60 @@
+import * as db from './db.js'
+import {Server, sendJson, bodyParams, sendStatus, Status} from './server.js'
+
+db.open()
+
+const server = new Server()
+server.public("/public")
+
+server.router.get('/', home)
+.post('/login', login)
+.post('/signup', signup)
+.post('/rank', rank)
+
+
+async function home(ctx) {
+    ctx.response.redirect("/public/#home")
+}
+
+async function signup(ctx) {
+  const params = await bodyParams(ctx)
+  console.log('params=', params)
+  let user = await db.userGet(params.user)
+  if (user == null) { // user name available
+    console.log('signup:params=', params)
+    await db.userAdd({user:params.user, pass:params.password, email:params.email})
+    sendStatus(ctx, Status.OK)
+  }
+  else
+    sendStatus(ctx, Status.Fail)
+}
+
+async function login(ctx) {
+  const params = await bodyParams(ctx)
+  let user = await db.userGet(params.user)
+  console.log('login:user=', user)
+  if (user != null && user.pass == params.password) {
+    await ctx.state.session.set('user', user)
+    sendStatus(ctx, Status.OK)
+  } else
+    sendStatus(ctx, Status.Fail)
+}
+
+async function rank(ctx){
+  let user = await ctx.state.session.get('user')
+  console.log('user=',user.user)
+  const params = await bodyParams(ctx)
+  let user1 = params.user
+  console.log('user1=',user1)
+  let click = params.c
+  console.log('click=',click)
+  let player = {user:user, click:click}
+  if(user.user == user1){
+    console.log("error")
+    await db.rankAdd(player)
+    sendStatus(ctx, Status.OK)
+  }
+  else{sendStatus(ctx, Status.Fail)}
+}
+
+await server.listen(8000)
diff --git a/ws111a/db.js b/ws111a/db.js
new file mode 100644
index 0000000..1793ddc
--- /dev/null
+++ b/ws111a/db.js
@@ -0,0 +1,142 @@
+import { DB } from "https://deno.land/x/sqlite/mod.ts";
+
+let db = null
+const NLIMIT = 100
+
+export async function open() {
+  db = new DB("web.db");
+  db.query(`CREATE TABLE IF NOT EXISTS users 
+              (uid INTEGER PRIMARY KEY AUTOINCREMENT, 
+               user TEXT, pass TEXT, email TEXT)`)
+  // https://www.sqlitetutorial.net/sqlite-full-text-search/
+  // db.query(`CREATE VIRTUAL TABLE posts USING FTS5(title, body)`)
+  db.query(`CREATE TABLE IF NOT EXISTS rank(user TEXT, click INTEGER NOT NULL)`)
+}
+
+export async function clear() {
+  db.query(`DELETE FROM users`)
+}
+
+export async function close() {
+  db.close()
+}
+
+export async function rankAdd(user){
+  db.query(`INSERT INTO rank (user, click) VALUES (?,?)`, 
+                        [user.user, user.click])
+}
+
+export async function userAdd(user) {
+  db.query(`INSERT INTO users (user, pass, email) VALUES (?,?,?)`, 
+                        [user.user, user.pass, user.email])
+}
+
+export async function userGet(user1) {
+  let q = db.query(`SELECT uid, user, pass, email FROM users 
+                    WHERE user=?`, [user1])
+  console.log(`userGet(${user1})=${q}`)
+  if (q.length <=0) return null
+  let [uid, user, pass, email] = q[0]
+  return {uid, user, pass, email}
+}
+
+export async function userList() {
+  let q = db.query(`SELECT user FROM users`, [])
+  let users = []
+  for (let [user] of q) {
+    users.push(user)
+  }
+  return users
+}
+
+export async function replyAdd(reply) {
+  let time = reply.time || Date.now()
+  db.query('INSERT INTO replys (mid, msg, user, time) VALUES (?,?,?,?)',
+          [reply.mid, reply.msg, reply.user, time])
+}
+
+export async function msgAdd(msg) {
+  let time=msg.time || Date.now()
+  let r = db.query(`INSERT INTO msgs (msg, ufrom, uto, time) VALUES (?,?,?,?)`, 
+    [msg.msg, msg.ufrom, msg.uto, time])
+  r = db.query('SELECT last_insert_rowid()')
+  let mid = r[0][0]
+  let replys = msg.replys || []
+  for (let reply of replys) {
+    reply.mid = mid
+    replyAdd(reply)
+    // r = db.query('INSERT INTO replys (mid, msg, user, time) VALUES (?,?,?,?)',
+    //  [mid, reply.msg, reply.user, time])
+  }
+  return mid
+}
+
+export async function msgGet(mid) {
+  let q = db.query(`SELECT mid, msg, ufrom, uto, time
+                    FROM msgs WHERE mid=?`, [mid])
+  if (q.length <=0) return null
+  let [_mid, msg, ufrom, uto, time] = q[0]
+  q = db.query(`SELECT msg, user, time FROM replys WHERE mid=? ORDER BY time DESC`, [mid])
+  let replys = []
+  for (let [msg, user, time] of q) {
+    replys.push({msg, user, time})
+  }
+  return {mid, msg, ufrom, uto, time, replys}
+}
+
+export function queryToMsgs(q) {
+  let msgs = []
+  for (let [mid, msg, ufrom, uto, time] of q) {
+    msgs.push({mid, msg, ufrom, uto, time})
+  }
+  return msgs
+}
+
+export async function msgTo(user) {
+  let q = db.query(`SELECT mid, msg, ufrom, uto, time
+                    FROM msgs WHERE uto=? and uto!=ufrom 
+                    ORDER BY time DESC LIMIT ${NLIMIT}`, [user])
+  return queryToMsgs(q)
+}
+
+export async function msgBy(user) {
+  let q = db.query(`SELECT mid, msg, ufrom, uto, time
+            FROM msgs WHERE ufrom=? ORDER BY time DESC LIMIT ${NLIMIT}`, [user])
+  return queryToMsgs(q)
+}
+
+export async function msgFollow(follower) {
+  let q = db.query(`SELECT mid, msg, ufrom, uto, time FROM vFollowMsg 
+                    WHERE follower=? ORDER BY time DESC LIMIT ${NLIMIT}`, [follower])
+  return queryToMsgs(q)
+}
+
+export async function msgKey(key) {
+  let q = db.query(`SELECT mid, msg, ufrom, uto, time FROM msgs 
+                    WHERE LOWER(msg) LIKE '%${key.toLowerCase()}%'
+                    ORDER BY time DESC LIMIT ${NLIMIT}`, [])
+  return queryToMsgs(q)
+}
+
+export function followAdd(follower, user) {
+  db.query(`INSERT INTO follows (follower, user) VALUES (?,?)`, 
+                                [follower, user])
+}
+
+export async function followTo(user) {
+  let q = db.query(`SELECT user FROM follows WHERE follower=?`, [user])
+  let follows = []
+  for (let [follow] of q) {
+    follows.push(follow)
+  }
+  return follows
+}
+
+export async function followBy(user) {
+  let q = db.query(`SELECT follower FROM follows WHERE user=?`, [user])
+  let followers = []
+  for (let [follower] of q) {
+    followers.push(follower)
+  }
+  return followers
+}
diff --git a/ws111a/hello1.js b/ws111a/hello1.js
new file mode 100644
index 0000000..a909c6f
--- /dev/null
+++ b/ws111a/hello1.js
@@ -0,0 +1 @@
+console.log('hello 你好!')
diff --git a/ws111a/public/Myweb.css b/ws111a/public/Myweb.css
new file mode 100644
index 0000000..740bf6f
--- /dev/null
+++ b/ws111a/public/Myweb.css
@@ -0,0 +1,109 @@
+body{
+    text-align: center;
+    background-color: rgb(246, 243, 239);
+}
+
+ul{
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+ul a, .dropbtn {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+ul a:hover, .dropdown:hover .dropbtn {
+    background-color: red;
+}
+
+ul.dropdown{
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+}
+
+.dropdown-content a:hover {background-color: #f1f1f1;}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+#container {
+    width: 400px;
+    height: 200px;
+    position: relative;
+    background: white;
+    margin: auto;
+}
+#animate {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    background-color: red;
+    margin: auto;
+}
+div.legends {
+    margin: 5px;
+    border: 1px solid #ccc;
+    width: 180px;
+    float: left;
+}
+
+div.legends:hover {
+    border: 1px solid rgb(243, 9, 9);
+}
+
+div.legends img {
+    width: 100%;
+    height: auto;
+}
+
+div.legends desc{
+    padding: 15px;
+    text-align: center;
+}
+div.seasons {
+    margin: 5px;
+    border: 1px solid #ccc;
+    display: block;
+    margin: auto;
+    width: 180px;
+}
+
+div.seasons:hover {
+    border: 1px solid rgb(243, 9, 9);
+}
+
+div.seasons img {
+    width: 100%;
+    height: auto;
+}
+
+div.seasons desc{
+    padding: 15px;
+    text-align: center;
+}
+
+/* games */
diff --git a/ws111a/public/Myweb.js b/ws111a/public/Myweb.js
new file mode 100644
index 0000000..e9ee798
--- /dev/null
+++ b/ws111a/public/Myweb.js
@@ -0,0 +1,446 @@
+window.onhashchange = async function () {
+  var tokens = window.location.hash.split('/')
+  var user
+  switch (tokens[0]) {
+    case '#home':
+      await home()
+      break
+    case '#signup':
+      await signup()
+      break
+    case '#login':
+      await login()
+      break
+    case '#userSays':
+      let user = uriDecode(tokens[1])
+      await userSays(user)
+      break
+    case '#playgame':
+      await playgame()
+      break;
+    case '#legends':
+      await legends()
+      break;
+    case '#seasons':
+      await seasons()
+      break;
+    default:
+      console.log(`Error:hash=${tokens[0]}`)
+      // Ui.goto('#home')
+      break
+  }
+}
+
+window.onload = function () {
+  window.onhashchange()
+}
+
+async function home() {
+  Ui.show(`<h2>個人資料</h2>
+  <img src = https://upload.cc/i1/2022/05/06/bdj9VP.jpg alt = "大頭照" width="150">
+  <p>姓名:黃柏鈞</p>
+  <p>生日:92/04/30</p>
+  <p>興趣:玩遊戲、看影片、煮東西</p>
+  <p>Gmail:a0902301355@gmail.com</p>
+  <p>學歷:自強國小/自強國中/中和高中</p>
+  <p>目前就讀:國立金門大學資訊工程學系</p>`)
+}
+
+async function signup() {
+  Ui.show(`
+  <form>
+  <h1>註冊</h1>
+  <p><input type="text" placeholder="使用者" id="user"></p>
+  <p><input type="password" placeholder="密碼" id="password"></p>
+  <p><input type="email" placeholder="電子信箱" id="email"></p>
+  <p><button onclick="serverSignup()">註冊</button></p>
+  </form>`)
+}
+
+async function login() {
+  Ui.show(`
+  <form>
+  <h1>登入</h1>
+  <p><input type="text" placeholder="使用者" id="user"></p>
+  <p><input type="password" placeholder="密碼" id="password"></p>
+  <p><button onclick="serverLogin()">登入</button></p>
+  </form>`)
+}
+
+async function serverSignup() {
+  let user = Ui.id('user').value
+  let password = Ui.id('password').value
+  let email = Ui.id('email').value
+  let r = await Server.post('/signup', {user, password, email})
+  console.log('serverLogin: r=', r)
+  if (r.status == Status.OK) {
+    alert('註冊成功，開始登入使用!')
+    Ui.goto('#login')
+  } else {
+    alert('註冊失敗，請選擇另一個使用者名稱!')
+  }
+}
+
+async function serverLogin() {
+  let user = Ui.id('user').value
+  let password = Ui.id('password').value
+  let r = await Server.post('/login', {user, password})
+  console.log('serverLogin: r=', r)
+  if (r.status == Status.OK) {
+    localStorage.setItem('user', user)
+    alert('登入成功歡迎' + user)
+    Ui.goto(`#playgame/${user}`)
+  } else
+    alert('登入失敗: 請輸入正確的帳號密碼!')
+}
+var c = 0
+var number = 10
+var timeoutID = setInterval(1000)
+async function playgame() {
+  Ui.show(`
+  <br>
+  <br>
+  <p id="count">目前點擊次數:</p>
+  <div id="timer">10</div>
+  <button onclick="start()">game start</button>
+  <button onclick="reset()">game reset</button>
+  <br>
+  <button onclick="rank()">儲存紀錄</button>
+  <br>
+  <div>
+    <button><img src="https://upload.cc/i1/2022/11/21/EVsnQk.png" width="300" height="300" alt="圖片" onclick="game()"></button>
+  </div>
+  `)
+}
+
+async function game() {
+  let r = document.getElementById("count")
+  c += 1
+  r.innerHTML = `目前點擊次數:${c}`
+
+  if(number == 0){
+    document.getElementById("Button").disabled = true;
+  }
+}
+
+async function start(){
+  var timer = document.querySelector("#timer");
+  timeoutID = setInterval(function(){
+    number -- ;
+    if(number <= 0 )
+      number = 0;
+    timer.innerText = number + 0 }, 1000);
+    if(number == 0){
+      timeoutID = clearInterval(timeoutID)
+    }
+  return game
+}
+
+async function reset(){
+  number = 10
+  timeoutID = clearInterval(timeoutID)
+  c = 0
+}
+
+async function rank(){
+  let user = localStorage.getItem('user')
+  let r = await Server.post('/rank', {user, c})
+  if (r.status == Status.OK){
+    alert("已儲存紀錄")
+  }
+  else{alert("儲存失敗")}
+}
+
+async function legends() {
+  Ui.show(`<h1>Apex 人物整理</h1>
+  <h2>Apex Legends</h2>
+  <div class="legends">
+  <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/bloodhound?isLocalized=true">
+    <img src="https://upload.cc/i1/2022/06/16/3onyG2.png" alt="Bloodhound" width="652" height="730">
+  </a>
+  <div class="desc">Bloodhound</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/makoa-gibraltar?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/N7Yxwq.png" alt="Gibraltar" width="652" height="730">
+    </a>
+    <div class="desc">Gibraltar</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/lifeline?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/AQn90D.png" alt="Lifeline" width="652" height="730">
+    </a>
+    <div class="desc">Lifeline</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/pathfinder?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/sGFjZc.png" alt="Pathfinder" width="652" height="730">
+    </a>
+    <div class="desc">Pathfinder</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/wraith?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/4X35mS.png" alt="Wraith" width="652" height="730">
+    </a>
+    <div class="desc">Wraith</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/bangalore?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/Uwoiud.png" alt="Bangalore" width="652" height="730">
+    </a>
+    <div class="desc">Bangalore</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/caustic?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/4eWUSg.png" alt="Caustic" width="652" height="730">
+    </a>
+    <div class="desc">Caustic</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/mirage?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/dAmr14.png" alt="Mirage" width="652" height="730">
+    </a>
+    <div class="desc">Mirage</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/octane?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/EWvaeI.png" alt="Octane" width="652" height="730">
+    </a>
+    <div class="desc">Octane</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/wattson?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/ewVc6Y.png" alt="Wattson" width="652" height="730">
+    </a>
+    <div class="desc">Wattson</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/crypto?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/OQEkNS.png" alt="Crypto" width="652" height="730">
+    </a>
+    <div class="desc">Crypto</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/revenant?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/ydxXc6.png" alt="Revenant" width="652" height="730">
+    </a>
+    <div class="desc">Revenant</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/loba?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/gTyuK9.png" alt="Loba" width="652" height="730">
+    </a>
+    <div class="desc">Loba</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/rampart?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/Dlzfae.png" alt="Rampart" width="652" height="730">
+    </a>
+    <div class="desc">Rampart</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/horizon?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/CsTGFd.png" alt="Horizon" width="652" height="730">
+    </a>
+    <div class="desc">Horizon</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/fuse?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/tdYM6A.png" alt="Fuse" width="652" height="730">
+    </a>
+    <div class="desc">Fuse</div>
+  </div>
+
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/valkyrie?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/JauvnX.png" alt="Valkyrie" width="652" height="730">
+    </a>
+    <div class="desc">Valkyrie</div>
+  </div>
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/seer?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/8gSraP.png" alt="Seer" width="652" height="730">
+    </a>
+    <div class="desc">Seer</div>
+  </div>
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/ash?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/ZQefWL.png" alt="Ash" width="652" height="730">
+    </a>
+    <div class="desc">Ash</div>
+  </div>
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/mad-maggie?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/o0Y7vi.png" alt="Mad Maggie" width="652" height="730">
+    </a>
+    <div class="desc">Mad Maggie</div>
+  </div>
+  <div class="legends">
+    <a target="_blank" href="https://www.ea.com/games/apex-legends/about/characters/newcastle?isLocalized=true">
+      <img src="https://upload.cc/i1/2022/06/16/HZWLOy.png" alt="Newcastle" width="652" height="730">
+    </a>
+    <div class="desc">Newcastle</div>
+  </div>`)
+}
+
+async function seasons(){
+  Ui.show(`<h1>Apex 各季影片整理</h1>
+  <h2>Apex Seasons</h2>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/7M4Vds3fI9E">
+        <img src="https://upload.cc/i1/2022/06/16/CVZEvf.png" alt="Season1" width="640" height="360">
+      </a>
+      <div class="desc">Season1</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/zsUd40fvFm8">
+        <img src="https://upload.cc/i1/2022/06/16/UPC4bE.png" alt="Season2" width="640" height="360">
+      </a>
+      <div class="desc">Season2</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/C3q_SibAOc4">
+        <img src="https://upload.cc/i1/2022/06/16/OrComG.png" alt="Season3" width="640" height="360">
+      </a>
+      <div class="desc">Season3</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/DFY_scgPl80">
+        <img src="https://upload.cc/i1/2022/06/16/lCmgMA.png" alt="Season4" width="640" height="360">
+      </a>
+      <div class="desc">Season4</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/quACziGJqQM">
+        <img src="https://upload.cc/i1/2022/06/16/y82Cne.png" alt="Season5" width="640" height="360">
+      </a>
+      <div class="desc">Season5</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/SCUXdRb5abU">
+        <img src="https://upload.cc/i1/2022/06/16/wjZFWJ.png" alt="Season6" width="640" height="360">
+      </a>
+      <div class="desc">Season6</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/YV12-kknruM">
+        <img src="https://upload.cc/i1/2022/06/16/w6BUjv.png" alt="Season7" width="640" height="360">
+      </a>
+      <div class="desc">Season7</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/Z-xDoDSDM2Y">
+        <img src="https://upload.cc/i1/2022/06/16/4eIfXV.png" alt="Season8" width="640" height="360">
+      </a>
+      <div class="desc">Season8</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/ChZaqqoNg-0">
+        <img src="https://upload.cc/i1/2022/06/16/yVGQzx.png" alt="Season9" width="640" height="360">
+      </a>
+      <div class="desc">Season9</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/bOD88NwyShM">
+        <img src="https://upload.cc/i1/2022/06/16/Bg6cJt.png" alt="Season10" width="640" height="360">
+      </a>
+      <div class="desc">Season10</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/N-7j2ejytyI">
+        <img src="https://upload.cc/i1/2022/06/16/J9VQGq.png" alt="Season11" width="640" height="360">
+      </a>
+      <div class="desc">Season11</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/OtVABKfc_AE">
+        <img src="https://upload.cc/i1/2022/06/16/pehRxr.png" alt="Season12" width="640" height="360">
+      </a>
+      <div class="desc">Season12</div>
+  </div>
+  <div class="seasons">
+      <a target="_blank" href="https://youtu.be/cOFuEQEvC3E">
+        <img src="https://upload.cc/i1/2022/06/16/4CYo9P.png" alt="Season13" width="640" height="360">
+      </a>
+      <div class="desc">Season13</div>
+  </div>`)
+}
+
+// ====================== Server ====================
+const Server = {}
+
+Server.get = async function(path) {
+  let r = await window.fetch(path, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+  return {status:r.status, obj:await r.json()}
+}
+
+Server.post = async function(path, params) {
+  let r = await window.fetch(path, {
+    body: JSON.stringify(params),
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+  return {status:r.status, obj:await r.json()}
+}
+
+const Status = {
+  OK:200,
+  Fail:400,
+  Unauthorized:401,
+  Forbidden:403,
+  NotFound:404,
+}
+
+// ========================= Ui ======================
+const Ui = {}
+
+Ui.id = function(path) {
+  return document.getElementById(path)
+}
+
+Ui.one = function(path) {
+  return document.querySelector(path)
+}
+
+Ui.showPanel = function(name) {
+  document.querySelectorAll('.panel').forEach((node)=>node.style.display='none')
+  Ui.id(name).style.display = 'block'
+}
+
+Ui.show = function (html) {
+  Ui.id('main').innerHTML = html
+}
+
+Ui.openNav = function () {
+  Ui.id('mySidenav').style.width = '200px'
+}
+
+Ui.closeNav = function () {
+  Ui.id('mySidenav').style.width = '0'
+}
+
+Ui.goto = function (hash) {
+  window.location.hash = hash
+}
diff --git a/ws111a/public/index.html b/ws111a/public/index.html
new file mode 100644
index 0000000..145ffa8
--- /dev/null
+++ b/ws111a/public/index.html
@@ -0,0 +1,23 @@
+<html>
+    <head>
+        <link rel = "stylesheet" href = "Myweb.css"/>
+    </head>
+    <body>
+        <ul>
+          <a style="float: left;" href="#home">Home</a>
+          <a style="float: left;" href="#news">News</a>
+          <div style="float: left;" class="dropdown">
+            <a href="javascript:void(0)" class="dropbtn">APEX</a>
+            <div class="dropdown-content">
+              <a href="https://www.ea.com/zh-tw/games/apex-legends">Apex official website</a>
+              <a href="#legends">Legends</a>
+              <a href="#seasons">Season Videos</a>
+            </div>
+          </div>
+          <a style="float: right;" href="#login">Log in</a>
+          <a style="float: right;" href="#signup">Sign up</a>
+        </ul>
+        <div id ="main"></div>
+        <script src="Myweb.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ws111a/server.js b/ws111a/server.js
new file mode 100644
index 0000000..cf1af49
--- /dev/null
+++ b/ws111a/server.js
@@ -0,0 +1,77 @@
+import { Application, Router, send } from "https://deno.land/x/oak/mod.ts";
+import { Session } from "https://deno.land/x/oak_sessions/mod.ts";
+
+export class Server {
+    constructor() {
+        this.app = new Application()
+        this.router = new Router()
+    }
+    public(path) {
+        this.router.get(`${path}/(.*)`, async (ctx)=>{
+          console.log(ctx.request.url.pathname)
+          await send(ctx, ctx.request.url.pathname, {
+              root: `${Deno.cwd()}/`,
+              index: "index.html",
+          })
+        })
+    }
+    async listen(port) {
+        this.app.use(Session.initMiddleware())
+        this.app.use(this.router.routes())
+        this.app.use(this.router.allowedMethods())
+        console.log(`Server run at http://127.0.0.1:${port}`)
+        await this.app.listen({ port })
+    }
+}
+
+export function sendJson(ctx, obj) {
+  ctx.response.type = 'application/json'
+  ctx.response.body = obj
+}
+
+export const Status = {
+  OK:200,
+  Fail:400,
+  Unauthorized:401,
+  Forbidden:403,
+  NotFound:404,
+}
+
+export function sendStatus(ctx, status) {
+  ctx.response.type = 'application/json'
+  ctx.response.status = status
+  ctx.response.body = {status}
+}
+
+export async function bodyParams(ctx) {
+  let body = ctx.request.body()
+  if (body.type === "json") {
+    let params = await body.value
+    console.log('bodyParams:', params)
+    return params
+  } else {
+    console.log(`Error: body.type=${body.type}`)
+  }
+}
+/*
+export async function formParams(ctx) {
+  let body = ctx.request.body()
+  if (body.type === "form") {
+    let params = await formParse(body)
+    console.log('params=',params)
+    return params
+  }
+  return null
+}
+
+export async function formParse(body) {
+  const pairs = await body.value
+  const obj = {}
+  for (const [key, value] of pairs) {
+    obj[key] = value
+  }
+  return obj
+}
+*/
+
+
diff --git a/ws111a/web.db b/ws111a/web.db
new file mode 100644
index 0000000000000000000000000000000000000000..c0568fa2d2f670173b88c972ff649ab4beddebc8
GIT binary patch
literal 20480
zcmeI&&uZH+90zbIu4kOFxHJT_9yVbpO=xJh^aYX?Q^HcW^ITX?#>qV6#&-TVd4Tk|
z$Js0N4fY=Gt@lc54NE#GV>@*4{Sn!ge*P))=O)nSPrY~^vTx&A8qC=t*(8*bHe-Yk
zjW_k7QGVBX+u*GTG4@nwWZ&O@#otmYSHu_@uPaxTt*45RhX4d1009U<00Izz00bZa
zfqx}Hcg%wWdiio543aRPCIf#SrW0Rw385NKE_Z&H^jm9h`>l;5*Y0>W^Ew}THnSe(
zEmkk<)*=sQmhRbKye97rlXy6?^seLC$F|FyQ;#|4y<WM&Kk&O*tI_3D{`)M*Mxv=l
zF3(KFvL3J5Q#Dy~pD9Y#mL-P&XeDQ*7v|m`?H3Asm+a@^bP;AlA@*xmSrJ%E*0UfD
zo4m5I+@hLkn)FhUa|)4MUP>$Va)_1LO4JweS5|PHx!seF+h-r`KI@!&r(K6naAG@N
zbG?j-$(U4UlOWF@9>X+<6ZzbbdvoIlF>Z{X{Dy!41Rwwb2tWV=5P$##AOHafK;T&j
zyirv0wz_*!#QWAE|Fxqajg$T1INdI(q*mL_!Z>-yBZ{JSB=-9vw@FoER;z>Y#Ui_}
z6Z?N^+!Eu~xPBI&hebdD0uX=z1Rwwb2tWV=5P$##An?}$Rh=IR&`XL*<v9aI?Em?p
ye*^>|009U<00Izz00bZa0SG_<0uX=z1Rwwb2tWV=5P$##AOHafKmY>&vA`WZKEa{@

literal 0
HcmV?d00001