rewrap

add songs directory with first song
branch hop
16 changed files with 203 additions and 124 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1 @@
+this is a barely functional wrapper for the main game
--- a/about.html
+++ b/about.html
@ -3,48 +3,41 @@
 <html>
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Chordia</title>
 <link rel="stylesheet" href="main.css">
 </head>

 <body>

-<div id="topBar" class="hBar">
+<div id="top" class="bar">
+    top bar things go here
 </div>

-<div id="centerRow">
-    <div id="leftBar" class="vBar">
-    </div>
-
-    <gamewindow style="text-align: center;">
-        <h1 style="color: aqua;">chordia.io</h1>
-        <p style="color: aqua;">------------------------------------------------</p>
-        <p><b>Programming:</b></p>
-        <p>Derek Olsen (orpheusui)</p>
-        <p>Ben Zah (ZahBenjamin)</p>
-        <p>Alex Swanson (EyYoTony)</p>
-
-        <p><b>Storyboarding:</b></p>
-        <p>Brandon Weed</p>
-    
-        <p style="color: aqua;">------------------------------------------------</p>
-    
-        <p>COPYRIGHT © 2021 Team Chordia</p>
-    
-        <p>All rights reserved.</p>
-    </gamewindow>
-
-    <div id="rightBar" class="vBar">
-    </div>
-
-    <div id="botBar" class="hBar">
+<div id="game" class="gamewindow">
+    <h1 style="color: aqua;">chordia.io</h1>
+    <p style="color: aqua;">------------------------------------------------</p>
+    <p><b>Programming:</b></p>
+    <p>Derek Olsen (orpheusui)</p>
+    <p>Ben Zah (ZahBenjamin)</p>
+    <p>Alex Swanson (EyYoTony)</p>
+
+    <p><b>Storyboarding:</b></p>
+    <p>Brandon Weed</p>
+
+    <p style="color: aqua;">------------------------------------------------</p>
+
+    <p>COPYRIGHT © 2021 Team Chordia</p>
+
+    <p>All rights reserved.</p>
+</div>
+<div id="bottom" class="bar">
        <a href="https://git.andrewzah.com/dolsen/chordia/" target="_blank">© 2021 chordia.io</a>
        <a href="https://itch.io/jam/top-jam-1" target="_blank">TOP Jam-1</a>
        <a href="about.html" class="currentPage">About</a>
-        <a href="index.html" style="border-left: aqua;">Chordia</a>
-    </div>
+        <a href="index.html">Chordia</a>
 </div>
-
-
 </body>
+
+<script src="game.js"></script>
 </html>
--- a/index.html
+++ b/index.html
@ -3,38 +3,28 @@
 <html>
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Chordia</title>
 <link rel="stylesheet" href="main.css">
 </head>

 <body>

-<div id="topBar" class="hBar">
-    top bar things go here
-</div>
-
-<div id="centerRow">
-    <div id="leftBar" class="vBar">
-        <button>@</button>
-        <button>&</button>
-        <button>!</button>
+    <div id="top" class="bar">
+        top bar things go here
    </div>

-        <gamewindow id="test-target">
-            <player id="player"></player>
-        </gamewindow>
+    <div class="gamewindow">
+        <div id="game">

-    <div id="rightBar" class="vBar">
-        <button>#</button>
-        <button>$</button>
-        <button>%</button>
-    </div>
+        </div>
    </div>
-    <div id="botBar" class="hBar">
-        <a href="https://git.andrewzah.com/dolsen/chordia/" target="_blank">© 2021 chordia.io</a>
-        <a href="https://itch.io/jam/top-jam-1" target="_blank">TOP Jam-1</a>
-        <a href="about.html">About</a>
-        <a href="index.html" class="currentPage">Chordia</a>
+
+    <div id="bottom" class="bar">
+            <a href="https://git.andrewzah.com/dolsen/chordia/" target="_blank">© 2021 chordia.io</a>
+            <a href="https://itch.io/jam/top-jam-1" target="_blank">TOP Jam-1</a>
+            <a href="about.html">About</a>
+            <a href="index.html" class="currentPage">Chordia</a>
    </div>
 </body>

--- a/main.css
+++ b/main.css
@ -1,13 +1,12 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');

-html {
+html, body {
    height: 100%;
 }

 body {
    margin: 0;
    padding: 0;
-    border: hidden;

    background-color: black;
    font-family: 'Roboto Mono', monospace;
@ -15,55 +14,52 @@ body {
    height: 100%;
 }

-a {
-    color: white;
-}
+.gamewindow {
+    display: flex;
+    aspect-ratio: 16 / 9;
+    justify-content: center;

-div.hBar {
+    outline: solid;
+    outline-color: aqua;
+    outline-width: 1px;
+    outline-offset: -1px;
+
+    margin-left: auto;
+    margin-right: auto;
 }

-div.vBar {
+#game {
    display: block;
    position: relative;
-    border-style: solid;
-    border-width: 1px;
-    border-color: aqua;
-    width: 40px;
-}
+    height: 80%;
+    aspect-ratio: 16 / 9;

-div#topBar {
-    top: 0px;
-    height: 5%;
+    outline: solid;
+    outline-color: aqua;
+    outline-width: 1px;
+    outline-offset: -1px;
 }

-div#leftBar {
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    border-right-width: 0;
+#column {
+    box-sizing: border-box;
+    width: fit-content;
 }

-div#rightBar {
-    right: 0;
+.bar {
    display: flex;
-    flex-direction: column;
-    border-left-width: 0;
+    background-color: coral;
+    width: 100%;
+    height: 10%;
 }

-div#botBar {
+#bottom {
    display: flex;
-    flex-flow: row-reverse;
-    position: relative;
-    border-style: solid;
-    border-color: aqua;
-    border-width: 0px;
-    top: 90%;
-    height: 5%;
-    width: 100%;
-    vertical-align: middle;
+    flex-direction: row-reverse;
+    background-color: cornflowerblue;
+    right: 0px;
 }

-div#botBar a {
+div#bottom a {
    border-left-style: solid;
    border-color: aqua;
    border-width: 1px;
@ -74,13 +70,14 @@ div#botBar a {
    padding-bottom: 4px;
 }

-div#botBar :hover {
+div#bottom :hover {
    background-color: aqua;
    color: black;
 }

 p {
    color: white;
+    margin: 0;
 }

 p > b {
@ -90,38 +87,4 @@ p > b {
 .currentPage {
    background-color: aqua;
    color: black;
-}
-
-div#centerRow {
-    position: absolute;
-    top: 5%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    flex-flow: row;
-    height: 70%;
-}
-
-gamewindow {
-    position: relative;
-    display: inline;
-    size: initial;
-    width: 90%;
-    height: 90%
-    max-width: 1200px;
-    max-height: 600px;
-    border-style: solid;
-    border-width: 1px;
-    border-color: aqua;
-    z-index: 1;
-    background-color: lightblue;
-}
-
-player {
-    height: 32px;
-    width: 32px;
-    position: absolute;
-    left: 0px;
-    bottom: 0px;
-    background-color: blueviolet;
-}
+}
--- a/main.old.css
+++ b/main.old.css
@ -0,0 +1,132 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
+
+html {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    border: hidden;
+
+    background-color: black;
+    font-family: 'Roboto Mono', monospace;
+    color: white;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+}
+
+a {
+    color: white;
+}
+
+div.hBar {
+    background-color: lightgreen;
+    max-width: 1280px;
+}
+
+div.vBar {
+    display: block;
+    position: relative;
+    border-style: solid;
+    border-width: 1px;
+    border-color: aqua;
+    width: 40px;
+    background-color: lightsalmon;
+}
+
+div#topBar {
+    top: 0px;
+    height: 10%;
+}
+
+div#leftBar {
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    border-right-width: 0;
+}
+
+div#rightBar {
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    border-left-width: 0;
+}
+
+div#botBar {
+    display: flex;
+    flex-flow: row-reverse;
+    position: relative;
+    border-style: solid;
+    border-color: aqua;
+    border-width: 0px;
+    height: 10%;
+    width: 100%;
+    vertical-align: middle;
+    background-color: lightslategrey;
+}
+
+div#botBar a {
+    border-left-style: solid;
+    border-color: aqua;
+    border-width: 1px;
+    text-decoration: none;
+    padding-left: 8px;
+    padding-right: 8px;70
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+div#botBar :hover {
+    background-color: aqua;
+    color: black;
+}
+
+p {
+    color: white;
+}
+
+p > b {
+    color: aqua;
+}
+
+.currentPage {
+    background-color: aqua;
+    color: black;
+}
+
+div#centerRow {
+    position: relative;
+    width: 100%;
+    padding-top: 56.25%; /* 16:9 Aspect Ratio */
+    display: flex;
+    justify-content: center;
+    flex-flow: row;
+    height: 80%;
+    max-height: 600px;
+}
+
+gamewindow {
+    position: relative;
+    display: inline;
+    size: initial;
+    width: 90%;
+    padding-top: 56.25%
+    border-style: solid;
+    border-width: 1px;
+    border-color: aqua;
+    z-index: 1;
+    background-color: lightblue;
+}
+
+player {
+    height: 32px;
+    width: 32px;
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    background-color: blueviolet;
+}
--- a/songs/lasershark/130BPM
+++ b/songs/lasershark/130BPM
--- a/songs/lasershark/Laser
+++ b/songs/lasershark/Laser
--- a/songs/lasershark/Laser
+++ b/songs/lasershark/Laser
--- a/songs/lasershark/lasershark-maxvelocity-intro.mid
+++ b/songs/lasershark/lasershark-maxvelocity-intro.mid
--- a/songs/lasershark/lasershark-maxvelocity.mid
+++ b/songs/lasershark/lasershark-maxvelocity.mid
--- a/songs/lasershark/lasershark-novelocity-intro.mid
+++ b/songs/lasershark/lasershark-novelocity-intro.mid
--- a/songs/lasershark/lasershark-novelocity.mid
+++ b/songs/lasershark/lasershark-novelocity.mid
--- a/songs/lasershark/song.json
+++ b/songs/lasershark/song.json
--- a/songs/lasershark/with
+++ b/songs/lasershark/with
--- a/songs/lasershark/with
+++ b/songs/lasershark/with
--- a/songs/lasershark/with
+++ b/songs/lasershark/with
Author	SHA1	Message	Date
Derek Olsen	99a57a4614	rewrap	1 year ago
Derek Olsen	846f77f15d	add songs directory with first song	1 year ago
Derek Olsen	c9773f3f29	branch hop	1 year ago
				`@ -0,0 +1 @@`
				`this is a barely functional wrapper for the main game`