source for lucas.co
x
index.html | 2 +-
js.js | 274 ++++++++++++++++++++++++++-----------------------------------
2 files changed, 117 insertions(+), 159 deletions(-)
diff --git a/index.html b/index.html
index b919917..d948da9 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
<head>
<link rel="stylesheet" href="css.css">
-<script src="js.js"></script>
+<script type="module" src="https://lucas.co/js.js"></script>
</head>
<body id="body" onload="loadPage()">
diff --git a/js.js b/js.js
index aedeae7..2c7a475 100644
--- a/js.js
+++ b/js.js
@@ -1,10 +1,8 @@
-async function stinky(d1, d2, d3) {
- const response = await fetch("https://raw.githubusercontent.com/lsgalante/lucas_co/main/info.json?token=GHSAT0AAAAAACFZORYKOTML4F5SY6YPPRP2ZGJL66Q");
+import data from "./info.json" assert {type: "json"};
- const data = await response.json();
+// import_json();
- return data[d1][d2][d3];
-}
+// console.log(data.x);
const n_tabs = 5;
@@ -14,163 +12,43 @@ function loadPage() {
populate();
}
-class globals_class {
- constructor() {}
-
- main_text(idx) {
- const main_text = {
- tab0: "me one",
- tab1: "me two",
- tab2: "me three",
- tab3: "me four",
- tab4: "me five",
- tab5: "me six"
- }
- return main_text[idx];
- }
-}
-
-class box_class {
- constructor() {}
-
- x() { return 400; }
-
- y() { return 250; }
-
- left() { return window.innerWidth / 2 - this.x() / 2; }
-
- top() {return window.innerHeight / 2 - this.y() / 2; }
-
- text_margin() { return 25; }
-
- return_box() {
- let box = document.createElement("div");
- box.id = "box";
- box.style.position = "fixed";
-
- box.style.left = this.left().toString() + "px";
- box.style.top = this.top().toString() + "px";
-
- box.style.width = this.x().toString() + "px";
- box.style.height = this.y().toString() + "px";
-
- box.style.padding = 0;
-
- box.style.borderStyle = "solid";
- box.style.borderWidth = "1px";
- return box;
- }
-}
-
-class tab_class {
- constructor(ct, idx, id) {
- this.ct = ct;
- this.idx = idx;
- this.id = id;
-
- this.box_ = new box_class;
- }
-
- x() {
- const x = [
- this.box_.x() / this.ct,
- this.box_.y() / this.ct,
- this.box_.x() / this.ct,
- this.box_.y() / this.ct
- ]
- return x[this.idx];
- }
-
- y() {
- const y = 25;
- return y;
- }
-
- left() {
- const x = this.x();
-
- const box_left = this.box_.left();
- const box_x = this.box_.x();
-
- let left = [
- box_left + x * this.id,
- box_left + box_x - x / 2 + this.y() / 2,
- box_left + x * this.id,
- box_left - x / 2 - this.y() / 2
- ]
- return left[this.idx];
- }
-
- top() {
- const x = this.x();
-
- const box_y = this.box_.y();
- const box_top = this.box_.top();
-
- const top = [
- box_top - this.y(),
- box_top + x / 2 - this.y() / 2 + x * this.id,
- box_top + box_y,
- box_top + x / 2 - this.y() / 2 + x * this.id
- ]
- return top[this.idx];
+function main_text(idx) {
+
+ const main_text = {
+ tab0: "me one",
+ tab1: "me two",
+ tab2: "me three",
+ tab3: "me four",
+ tab4: "me five",
+ tab5: "me six"
}
- border_radius() { return 45; }
-
- transform() { return "rotate(" + (this.idx * 90).toString() + "deg)" }
-
- return_tab() {
- let tab = document.createElement("div");
-
- tab.style.position = "fixed";
-
- tab.style.height = this.y().toString() + "px";
- tab.style.width = this.x().toString() + "px";
-
- tab.style.left = this.left().toString() + "px";
- tab.style.top = this.top().toString() + "px";
-
- tab.style.borderTopLeftRadius = this.border_radius() + "px";
- tab.style.borderTopRightRadius = this.border_radius() + "px";
-
- tab.style.borderStyle = "solid";
- tab.style.borderColor = "black";
- tab.style.borderWidth = "1px";
-
- tab.style.backgroundColor = "white";
-
- tab.style.color = "black";
- tab.style.fontSize = 12;
-
- tab.style.textAlign = "center";
- tab.style.lineHeight = "26px";
-
- tab.style.transform = this.transform();
-
- return tab;
- }
+ return main_text[idx];
}
function populate() {
const body = document.getElementById("body");
body.style.backgroundColor = "#c8c7db";
-
- make_box();
-
const info = tab_idx(n_tabs);
- make_tab(info);
+ let box = make_box();
+ let tabs = make_tabs(info, box)
+
+ document.body.append(box);
+ document.body.append(tabs);
}
function make_box() {
- const globals_ = new globals_class();
- const box_instance = new box_class();
+
+ let box = document.createElement("div");
+
+ box.id = "box";
- let box = box_instance.return_box();
+ box = stylize_box(box);
let text_box = document.createElement("div");
- let inner_text = globals_.main_text("tab0");
+
+ let inner_text = main_text("tab0");
text_box.id = "text_box";
@@ -180,12 +58,34 @@ function make_box() {
box.append(text_box);
- document.body.append(box);
+ return box;
+}
+
+function stylize_box(box) {
+ const x = 400;
+ const y = 250;
+
+ const left = window.innerWidth / 2 - x / 2;
+ const top = window.innerHeight / 2 - y / 2;
+
+ const text_margin = 25;
+
+ box.style.position = "fixed";
+ box.style.left = left.toString() + "px";
+ box.style.top = top.toString() + "px";
+
+ box.style.width = x.toString() + "px";
+ box.style.height = y.toString() + "px";
+
+ box.style.padding = 0;
+
+ box.style.borderStyle = "none";
+ // box.style.borderWidth = "1px";
+
+ return box;
}
-function make_tab(info) {
- const globals_ = new globals_class();
- const box_ = new box_class();
+function make_tabs(info, box) {
let cts = info["cts"];
let ids = info["ids"];
@@ -197,9 +97,9 @@ function make_tab(info) {
let ct = cts[idx];
let id = ids[i];
- const tab_ = new tab_class(ct, idx, id);
+ let tab = document.createElement("div");
- let tab = tab_.return_tab();
+ tab = stylize_tab(box, tab, ct, idx, id);
let tab_id = "tab_" + String(i);
tab.id = tab_id;
@@ -207,8 +107,6 @@ function make_tab(info) {
tab.onmouseenter = function() {tab_enter(tab_id)};
tab.onmouseleave = function() {tab_leave(tab_id)};
tab.onclick = function() {tab_click(tab_id, i)};
-
-
tab.innerText = "title";
@@ -216,6 +114,68 @@ function make_tab(info) {
}
}
+function stylize_tab(box, tab, ct, idx, id) {
+ const box_x = 400;
+ const box_y = 250;
+
+ const box_left = window.innerWidth / 2 - box_x / 2;
+ const box_top = window.innerHeight / 2 - box_y / 2;
+
+ const x = [
+ box_x / ct,
+ box_y / ct,
+ box_x / ct,
+ box_y / ct
+ ][idx]
+
+ const y = 25;
+
+ let left = [
+ box_left + x * id,
+ box_left + box_x - x / 2 + y / 2,
+ box_left + x * id,
+ box_left - x / 2 - y / 2
+ ][idx]
+
+ const top = [
+ box_top - y,
+ box_top + x / 2 - y / 2 + x * id,
+ box_top + box_y,
+ box_top + x / 2 - y / 2 + x * id
+ ][idx];
+
+ const border_radius = 45;
+
+ const transform = "rotate(" + (idx * 90).toString() + "deg)";
+
+ tab.style.position = "fixed";
+
+ tab.style.height = y.toString() + "px";
+ tab.style.width = x.toString() + "px";
+
+ tab.style.left = left.toString() + "px";
+ tab.style.top = top.toString() + "px";
+
+ tab.style.borderTopLeftRadius = border_radius + "px";
+ tab.style.borderTopRightRadius = border_radius + "px";
+
+ tab.style.borderStyle = "solid";
+ tab.style.borderColor = "black";
+ tab.style.borderWidth = "1px";
+
+ tab.style.backgroundColor = "white";
+
+ tab.style.color = "black";
+ tab.style.fontSize = 12;
+
+ tab.style.textAlign = "center";
+ tab.style.lineHeight = "26px";
+
+ tab.style.transform = transform;
+
+ return tab;
+}
+
function tab_idx(n_tabs) {
let idcs = [];
let ids = [];
@@ -262,9 +222,7 @@ function tab_click(tab_id, i) {
tab.style.color = "white";
tab.style.backgroundColor = "black";
- const globals_ = new globals_class();
-
- const text = globals_.main_text(tab_id);
+ const text = main_text(tab_id);
const text_box = document.getElementById("text_box");