Update website
This commit is contained in:
parent
f8764ff86b
commit
53c0ad4f4a
6 changed files with 179 additions and 2 deletions
28
www/editor.js
Normal file
28
www/editor.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
export const url = "https://libreinternet.club/";
|
||||
|
||||
// Return username:password encoded in base64
|
||||
export function get_login_creds() {
|
||||
const username = editorusername.value;
|
||||
const password = editorpassword.value;
|
||||
return btoa(`${username}:${password}`);
|
||||
}
|
||||
|
||||
async function send_request() {
|
||||
const response_options = {
|
||||
method: editormethod.value,
|
||||
headers: {
|
||||
"Authorization": `Basic ${get_login_creds()}`,
|
||||
},
|
||||
};
|
||||
// Browser will fail the request if body is added to GET or HEAD
|
||||
if (response_options.method != "GET") {
|
||||
response_options.body = editorbody.value;
|
||||
}
|
||||
// NGINX is nonstandard in not having this as the default
|
||||
if (response_options.method == "PROPFIND") {
|
||||
response_options.headers["Depth"] = "infinity";
|
||||
}
|
||||
const response = await fetch(new Request("https://libreinternet.club/" + editorurl.value, response_options));
|
||||
editorresponse.value = await response.text();
|
||||
}
|
||||
globalThis.send_request = send_request;
|
||||
BIN
www/events/libre_local_1.png
Normal file
BIN
www/events/libre_local_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
|
|
@ -3,8 +3,10 @@
|
|||
<head>
|
||||
<title>Libre Internet Club</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script type="module" src="editor.js" defer></script>
|
||||
<script type="module" src="tictactoe.js" defer></script>
|
||||
<link rel="stylesheet" href="tictactoe.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<img src="banner.gif" />
|
||||
</div>
|
||||
|
|
@ -13,9 +15,65 @@
|
|||
<li><a href="https://discord.gg/U9MQTv952">Join Discord</a></li>
|
||||
<li><a href="https://matrix.to/#/#Libre_Internet:matrix.org">Matrix</a></li>
|
||||
</ul>
|
||||
<h2><marquee>Upcoming Events</marquee></h2>
|
||||
<div class="infoblock">
|
||||
<h1>Libre Local Event</h1>
|
||||
<img src="events/libre_local_1.png" style="text-align: center; display: block;" />
|
||||
<p>Thursday, May 21, 2026 from 12-4pm @ UoA North Campus ED 262 (Education South)</p>
|
||||
<p>This event will involve discussions, presentations, and the potential for software demos. However, we also aim for the comfort of attendees. Introverted or shy attendees may feel more comfortable simply listening in or reading some of the provided event materials, and that's OK! Attendees may move in and out of the room at any time.
|
||||
</p>
|
||||
<p>Anyone is free to attend, in part or in full, regardless of their knowledge level or background (as long as they follow the code of conduct)!</p>
|
||||
<p>Poster art by Mimi</p>
|
||||
</div>
|
||||
<h2>
|
||||
Members
|
||||
</h2>
|
||||
<ul><a href="https://sjkillen.ca">Spencer</a></ul>
|
||||
<ul>
|
||||
<li><a href="https://sjkillen.ca">Spencer</a></li>
|
||||
<li>You! (Add yourself here using the site editor below!</li>
|
||||
</ul>
|
||||
<div class="infoblock">
|
||||
<h2>Edit Site!</h2>
|
||||
<p>username: <input id="editorusername" disabled type="text" value="libreinternet" /></p>
|
||||
<p>password: <input id="editorpassword" type="text" /></p>
|
||||
<select id="editormethod">
|
||||
<option value="GET">GET</option>
|
||||
<option value="PROPFIND">PROPFIND</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="MKCOL">MKCOL</option>
|
||||
<option value="DELETE">DELETE</option>
|
||||
</select>
|
||||
<input disabled type="text" value="https://libreinternet.club/"/>
|
||||
<input id="editorurl" placeholder="<complete URL here>" type="text" value=""/>
|
||||
<button onclick="send_request()">Send request</button>
|
||||
<br />
|
||||
body:
|
||||
<br />
|
||||
<textarea id="editorbody"></textarea>
|
||||
<br />
|
||||
response:
|
||||
<br />
|
||||
<textarea disabled id="editorresponse"></textarea>
|
||||
</div>
|
||||
<h2>Tic Tac Toe!</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td><button onclick="tictactoe.play_move(this)" class="tictactoe" id="tictactoebutton0"></button></td>
|
||||
<td><button onclick="tictactoe.play_move(this)" class="tictactoe" id="tictactoebutton1"></button></td>
|
||||
<td><button onclick="tictactoe.play_move(this)" class="tictactoe" id="tictactoebutton2"></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button onclick="tictactoe.play_move(this)" class="tictactoe" id="tictactoebutton3"></button></td>
|
||||
<td><button onclick="tictactoe.play_move(this)" class="tictactoe" id="tictactoebutton4"></button></td>
|
||||
<td><button onclick="tictactoe.play_move(this)" class="tictactoe" id="tictactoebutton5"></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button onclick="tictactoe.play_move(this)" class="tictactoe" id="tictactoebutton6"></button></td>
|
||||
<td><button onclick="tictactoe.play_move(this)" class="tictactoe" id="tictactoebutton7"></button></td>
|
||||
<td><button onclick="tictactoe.play_move(this)" class="tictactoe" id="tictactoebutton8"></button></td>
|
||||
</tr>
|
||||
</table>
|
||||
<button onclick="tictactoe.reload()">Reload</button>
|
||||
<button onclick="tictactoe.reset()">Reset</button>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,16 @@
|
|||
body {
|
||||
margin-top: 20px;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
background-color: coral;
|
||||
}
|
||||
|
||||
.infoblock {
|
||||
background-color: lightgreen;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#banner img {
|
||||
width: 100%;
|
||||
background-color: papayawhip;
|
||||
}
|
||||
|
|
|
|||
4
www/tictactoe.css
Normal file
4
www/tictactoe.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
button.tictactoe {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
74
www/tictactoe.js
Normal file
74
www/tictactoe.js
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import { url } from "./editor.js";
|
||||
|
||||
const gameurl = `${url}ticktactoegamestate`;
|
||||
const board = [
|
||||
tictactoebutton0,
|
||||
tictactoebutton1,
|
||||
tictactoebutton2,
|
||||
tictactoebutton3,
|
||||
tictactoebutton4,
|
||||
tictactoebutton5,
|
||||
tictactoebutton6,
|
||||
tictactoebutton7,
|
||||
tictactoebutton8,
|
||||
];
|
||||
let state = "";
|
||||
state = await reload();
|
||||
|
||||
|
||||
function display_state(state) {
|
||||
for (const cell of board) {
|
||||
cell.innerText = "";
|
||||
}
|
||||
let x_to_move = true;
|
||||
for (const action of state) {
|
||||
board[Number(action)].innerText = x_to_move ? "X" : "O";
|
||||
x_to_move = !x_to_move;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetch_gamestate() {
|
||||
const response = await fetch(new Request(gameurl));
|
||||
if (response.status == 200) {
|
||||
return response.text();
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
async function push_gamestate(state) {
|
||||
const response = await fetch(
|
||||
new Request(gameurl, { method: "PUT", body: state }),
|
||||
);
|
||||
if (response.status < 200 || response.status > 299) {
|
||||
throw new Error(`Returned status code ${response.status}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function play_move(cell) {
|
||||
const index = board.indexOf(cell);
|
||||
if (index == -1) {
|
||||
return;
|
||||
}
|
||||
const next_state = state + index;
|
||||
await push_gamestate(next_state);
|
||||
state = next_state;
|
||||
display_state(state);
|
||||
}
|
||||
|
||||
async function reload() {
|
||||
state = await fetch_gamestate();
|
||||
display_state(state);
|
||||
return state;
|
||||
}
|
||||
|
||||
async function reset() {
|
||||
await push_gamestate("");
|
||||
state = "";
|
||||
display_state(state);
|
||||
}
|
||||
|
||||
globalThis.tictactoe = {
|
||||
play_move: play_move,
|
||||
reload: reload,
|
||||
reset: reset,
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue