alternative page desc

data/data.go

@@ -1 +1,28 @@
 package data
+
+import (
+	"fmt"
+
+	"github.com/gookit/goutil/jsonutil"
+)
+
+var (
+	Devs = make(map[string]Dev)
+)
+
+type Dev struct {
+	Email string // map key
+	// Profile     Profile
+}
+
+var devs_file = "data/devs.json"
+
+func SaveDevs() {
+	jsonutil.WritePretty(devs_file, Devs)
+}
+func LoadDevs() {
+	err := jsonutil.ReadFile(devs_file, &Devs)
+	if err != nil {
+		fmt.Println(err)
+	}
+}

go.mod

@@ -3,3 +3,5 @@ module dofdev
 go 1.23.2
 
 require github.com/gorilla/mux v1.8.1
+
+require github.com/gookit/goutil v0.6.17 // indirect

go.sum

@@ -1,2 +1,4 @@
+github.com/gookit/goutil v0.6.17 h1:SxmbDz2sn2V+O+xJjJhJT/sq1/kQh6rCJ7vLBiRPZjI=
+github.com/gookit/goutil v0.6.17/go.mod h1:rSw1LchE1I3TDWITZvefoAC9tS09SFu3lHXLCV7EaEY=
 github.com/gorilla/mux v1.8.1 h1:TuBL49tXwgrFYWhqrNgrUNEY92u81SPhu7sTdzQEiWY=
 github.com/gorilla/mux v1.8.1/go.mod h1:AKf9I4AEqPTmMytcMc0KkNouC66V3BtZ4qD5fmWSiMQ=

server.go

@@ -5,6 +5,7 @@ import (
 	"log"
 	"net/http"
 
+	"dofdev/data"
 	"dofdev/src/router"
 	"dofdev/tem"
 )
@@ -12,6 +13,9 @@ import (
 func init() {
 	fmt.Println("init()")
 	tem.Load()
+
+	data.LoadDevs()
+	fmt.Println(len(data.Devs), "devs")
 }
 
 func main() {

src/router/router.go

@@ -5,6 +5,7 @@ import (
 
 	"dofdev/web/pages/about"
 	braillexr "dofdev/web/pages/braille_xr"
+	"dofdev/web/pages/dev"
 	"dofdev/web/pages/games"
 	"dofdev/web/pages/mono"
 	"dofdev/web/pages/moves"
@@ -20,6 +21,7 @@ func New() *mux.Router {
 	r.PathPrefix(("/public/")).Handler(http.StripPrefix("/public/", http.FileServer(http.Dir("web/public/"))))
 	r.HandleFunc("/", mono.Handler)
 	r.HandleFunc("/about", about.Handler)
+	r.HandleFunc("/dev", dev.Handler)
 	r.HandleFunc("/moves", moves.Handler)
 	r.HandleFunc("/move/{hash}", moves.MoveHandler)
 	r.HandleFunc("/games", games.Handler)

tem/html/core/head.html

@@ -8,8 +8,8 @@
   <meta name="description" content="{{ .Desc }}">
   <meta name="og:image" content="/public/img/knuckles_owo.png">
   <link rel="shortcut icon" href="https://media.dof.dev/kit/logo.svg" type="image/svg+xml">
-  <link rel="stylesheet" href="/public/style.css?v4">
-  <script src="/public/js/mono.js?v1"></script>
+  <link rel="stylesheet" href="/public/style.css?v6">
+  <script src="/public/js/mono.js?v2"></script>
   <link rel="canonical" href="https://{{ .Host }}{{ .PagePath }}">
 </head>
 
@@ -63,12 +63,12 @@
   </div>
   <div id="nav_border"></div>
 
-  <div class="disabled" style="display: flex; gap: 12px;">
-    <a href="/settings">
-      <img src="/public/img/icons/settings.svg?v2" height="32" width="auto" />
+  <div style="display: flex; gap: 12px;">
+    <a href="/dev">
+      <img src="/public/img/icons/dev.svg?v1" height="32" width="auto" />
     </a>
-    <a href="/profile">
-      <img src="/public/img/profile-pic.png?v1" height="32" width="auto" style="border-radius: 16px;" />
+    <a href="/settings" class="disabled">
+      <img src="/public/img/icons/settings.svg?v2" height="32" width="auto" />
     </a>
   </div>
 </div>
@@ -81,7 +81,7 @@
       gap: 6px;
     "
   >
-    <a href="/" class="onpage">
+    <a href="/">
       <img src="/public/img/icons/home.svg?v1" height="32" width="auto" />
       <div>home</div>
     </a>

tem/html/pages/about.html

@@ -15,7 +15,7 @@
 
 <div style="height: 12px; width: 100%;"></div>
 
-<img src='https://media.dof.dev/kit/logotype.svg?v22' width='256'>
+<img src='https://media.dof.dev/kit/logotype.svg?v25' width='256'>
 <p>degrees of freedom development</p>
 
 <div style="height: 12px; width: 100%;"></div>

tem/html/pages/dev.html

@@ -0,0 +1,31 @@
+{{ template "head.html" .}}
+
+<div style='height: 30vh; width: 100%;'></div>
+
+<h1>dev</h1>
+
+<!-- <div>{{ .Data.Dev.Email }}</div> -->
+
+<div
+  style="
+    padding: 6px 12px;
+    border-radius: 6px;
+    background: var(--col-01);
+    color: var(--col-10);
+  "
+>
+  <textarea rows="1" spellcheck="false">{{ .Data.Dev.Email }}</textarea>
+</div>
+
+<div style="height: 32px;"></div>
+
+<a href="javascript:post()" id="post_btn" class="btn">post</a>
+
+<script>
+  function post() {
+    console.log("post")
+    post_btn = elbyid("post_btn")
+    post_btn.classList.add("bob")
+    post_btn.classList.add("disabled")
+  }
+</script>

tem/html/pages/game.html

@@ -60,7 +60,56 @@
   >degrees of freedom development</div> -->
 </div>
 
+<div
+  style="
+    position: relative;
+    width: 100%;
+    padding: 12px;
+  "
+>
   <h2>notes</h2>
   <pre>{{ .Data.Game.Notes }}</pre>
 
-<div style='height: 44px; width: 100%;'></div>
+  <div style='height: 128px; width: 100%;'></div>
+
+  <div
+    style="
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 300px;
+      width: 300px;
+    "
+  >
+    <video src='/public/games/{{ .Data.Hash }}_alpha.webm' autoplay loop muted
+      style="
+        width: fit-content;
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+      "
+    ></video>
+    <div
+      style="
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      "
+    >
+      <div
+        style="
+          outline: 2px solid var(--col-04);
+          border-radius: 12px;
+          height: 140px;
+          width: 110px;
+        "
+      ></div>
+    </div>
+  </div>
+</div>

tem/html/pages/games.html

@@ -17,6 +17,8 @@
   <p>{{ .Desc }}</p>
 </div>
 
+<p>we make high degree of freedom games that maximize a player's input bandwidth, in stark opposition to the mainstream games of today where you merely follow an arrow on the ground and mash some buttons as the game is played for you - as we believe human expression should not be boiled down to the lowest common denominator and predicted away by asymptotic algorithms.</p>
+
 
 {{ range $hash, $game := .Data.Games }}
   <div>

web/pages/dev/dev.go

@@ -0,0 +1,22 @@
+package dev
+
+import (
+	"dofdev/data"
+	"dofdev/tem"
+	"net/http"
+)
+
+func Handler(w http.ResponseWriter, r *http.Request) {
+	data := struct {
+		Dev data.Dev
+	}{
+		Dev: data.Devs["ethan@dof.dev"],
+	}
+	tem.Render(
+		w, r,
+		"dev.html",
+		"dev",
+		"account management",
+		data,
+	)
+}

web/pages/games/games.go

@@ -62,6 +62,7 @@ func Handler(w http.ResponseWriter, r *http.Request) {
 		w, r,
 		"games.html",
 		"games",
+		// "high input bandwidth games",
 		"dof driven games",
 		data,
 	)

web/public/js/mono.js

@@ -16,6 +16,15 @@ document.addEventListener("DOMContentLoaded", () => {
   const main_el = elbyid("main");
   const top_img_el = elbyid("top_img");
 
+  const currentPath = window.location.pathname;
+  const sideLinks = side_el.getElementsByTagName('a');
+  
+  for (const link of sideLinks) {
+    if (link.pathname === currentPath) {
+      link.classList.add('onpage');
+    }
+  }
+
   nav_fade = () => {
     if (window.scrollY == 0) {
       if (!side_open) {

web/public/style.css

@@ -134,9 +134,6 @@ body {
       margin: 0;
     }
   }
-  > a.onpage {
-    background-color: #11111166;
-  }
   > #support {
     display: none;
   }
@@ -144,6 +141,9 @@ body {
     display: none;
   }
 }
+#side a.onpage {
+  background-color: #11111133;
+}
 #side a:hover {
   background-color: #11111166;
   transition: 0.166s;
@@ -236,7 +236,8 @@ a,
 b,
 i,
 code,
-span {
+span,
+textarea {
   display: inline;
   font-family: inherit;
   font-size: inherit;
@@ -246,15 +247,15 @@ a {
   cursor: pointer;
   text-decoration: underline;
 }
-a:focus {
-  filter: brightness(1.333);
-}
 b {
   font-weight: bold;
 }
 i {
   font-style: italic;
 }
+textarea {
+  display: block;
+}
 pre {
   white-space: pre-wrap;
 }
@@ -282,6 +283,53 @@ img {
   display: block;
   margin: 0 auto;
 }
+.btn {
+  padding: 6px 12px;
+  border-radius: 6px;
+  color: var(--col-10);
+  outline: 2px solid var(--col-10);
+  font-weight: bold;
+  letter-spacing: 1px;
+  text-shadow: 1px 1px 1px var(--col-05);
+  text-decoration: none;
+  background: linear-gradient(
+    135deg,
+    rgb(0 255 0 / 33%),
+    rgb(0 255 0 / 0%) 50%
+  ),
+  linear-gradient(
+    225deg,
+    rgb(255 255 0 / 33%),
+    rgb(255 255 0 / 0%) 50%
+  ),
+  linear-gradient(
+    -45deg,
+    rgb(255 0 0 / 33%), 
+    rgb(255 0 0 / 0%) 50%
+  ),
+  linear-gradient(
+    45deg,
+    rgb(0 0 255 / 33%),
+    rgb(0 0 255 / 0%) 50%
+  );
+  background-size: 600% 1200%;
+  background-position: 50% 50%;
+  transition: 0.333s;
+}
+.btn:hover {
+  background-size: 100% 100%;
+}
+.bob {
+  animation: bob 0.333s infinite alternate;
+}
+@keyframes bob {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-4px);
+  }
+}
 /* keep this at the end */
 .disabled {
   filter: grayscale(100%);