ObsidianBlk
/
nespaint
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Server now uses ejs to serve the index html. Broke the original index.html file into ejs file located in the /views folder.

dev-bank
Bryan Miller 5 years ago
parent
71f9956c74
commit
ad0b29b0dc
8 changed files with 278 additions and 2 deletions
Split View Show Diff Stats
  1. +5
    -2
      server.js
  2. +14
    -0
      views/head.html
  3. +8
    -0
      views/header.html
  4. +21
    -0
      views/index.html
  5. +5
    -0
      views/modal.html
  6. +213
    -0
      views/surface.html
  7. +3
    -0
      views/tail.html
  8. +9
    -0
      views/tools.html

+ 5
- 2
server.js View File

@@ -4,9 +4,12 @@ const express = require("express");
const app = express();
var port = 8000;

app.set('views', path.join(__dirname, "/views"));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use("/app", express.static(path.join(__dirname, "/app")));
app.get('/', function(req, res){
res.sendFile(path.join(__dirname, "/index.html"));
res.render('index.html');
});

app.listen(port, () => console.log("NESPaint listening on port ${port}!"));
app.listen(port, () => console.log("NESPaint listening on port " + port + "!"));

+ 14
- 0
views/head.html View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>NES Painter</title>

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" href="app/css/nespaint.css">
</head>
<body>

+ 8
- 0
views/header.html View File

@@ -0,0 +1,8 @@
<div class="header">
<div class="home-menu pure-menu pure-menu-horizontal">
<a class="pure-menu-heading" href="">
<span class="color-NES-06">NES </span>
<span class="color-NES-random">P</span><span class="color-NES-random">a</span><span class="color-NES-random">i</span><span class="color-NES-random">n</span><span class="color-NES-random">t</span>
</a>
</div>
</div>

+ 21
- 0
views/index.html View File

@@ -0,0 +1,21 @@
<%- include('head.html'); %>

<%- include('modal.html'); %>
<%- include('header.html'); %>

<div class="content-wrapper">
<div class="pure-g">

<%- include('tools.html', {
toolbtns:[
{emitargs:'{"id":"Welcome"}', faicon:"fa-brush"},
{emitargs:'{"id":"Welcome"}', faicon:"fa-eraser"},
{emitargs:'{"id":"Welcome"}', faicon:"fa-eye-dropper"}
]
}); %>

<%- include('surface.html'); %>

</div>
</div>
<%- include('tail.html'); %>

+ 5
- 0
views/modal.html View File

@@ -0,0 +1,5 @@
<div id="Welcome" class="modal">
<div class="modal-content">
Welcome to the modal!
</div>
</div>

+ 213
- 0
views/surface.html View File

@@ -0,0 +1,213 @@
<div class="pure-u-2-3">
<div class="pure-g">
<div class="pure-u-1 simple-padding">
<canvas id="painter" width:"128" height:"256"></canvas>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="simple-padding">
NES System Palette
</div>
<div class="NES-palette simple-padding">
<div class="pure-g">
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="00">00</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="01">01</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="02">02</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="03">03</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="04">04</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="05">05</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="06">06</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="07">07</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="08">08</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="09">09</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="0A">0A</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="0B">0B</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="0C">0C</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="0D">0D</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="0E">0E</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="0F">0F</button></div>
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="10">10</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="11">11</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="12">12</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="13">13</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="14">14</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="15">15</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="16">16</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="17">17</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="18">18</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="19">19</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="1A">1A</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="1B">1B</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="1C">1C</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="1D">1D</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="1E">1E</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="1F">1F</button></div>
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="20">20</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="21">21</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="22">22</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="23">23</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="24">24</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="25">25</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="26">26</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="27">27</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="28">28</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="29">29</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="2A">2A</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="2B">2B</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="2C">2C</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="2D">2D</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="2E">2E</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="2F">2F</button></div>
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="30">30</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="31">31</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="32">32</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="33">33</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="34">34</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="35">35</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="36">36</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="37">37</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="38">38</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="39">39</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="3A">3A</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="3B">3B</button></div>
</div>
</div>
<div class="pure-u-1-4">
<div class="pure-g">
<div class="pure-u-1-4"><button class="pure-button" nesidx="3C">3C</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="3D">3D</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="3E">3E</button></div>
<div class="pure-u-1-4"><button class="pure-button" nesidx="3F">3F</button></div>
</div>
</div>
</div>
</div>
</div>
<div class="pure-u-1-2">
<div class-"simple-padding">
Drawing Palettes
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="simple-padding">
Palette 1
</div>
<div class="simple-padding">
<div class="pure-button-group" role="group">
<button class="pure-button" cidx="0" pidx="0">0</button>
<button class="pure-button" cidx="1" pidx="0">1</button>
<button class="pure-button" cidx="2" pidx="0">2</button>
<button class="pure-button" cidx="3" pidx="0">3</button>
</div>
</div>
</div>
<div class="pure-u-1-2">
<div class="simple-padding">
Palette 2
</div>
<div class="simple-padding">
<div class="pure-button-group" role="group">
<button class="pure-button" cidx="0" pidx="1">0</button>
<button class="pure-button" cidx="1" pidx="1">1</button>
<button class="pure-button" cidx="2" pidx="1">2</button>
<button class="pure-button" cidx="3" pidx="1">3</button>
</div>
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="simple-padding">
Palette 3
</div>
<div class="simple-padding">
<div class="pure-button-group" role="group">
<button class="pure-button" cidx="0" pidx="2">0</button>
<button class="pure-button" cidx="1" pidx="2">1</button>
<button class="pure-button" cidx="2" pidx="2">2</button>
<button class="pure-button" cidx="3" pidx="2">3</button>
</div>
</div>
</div>
<div class="pure-u-1-2">
<div class="simple-padding">
Palette 4
</div>
<div class="simple-padding">
<div class="pure-button-group" role="group">
<button class="pure-button" cidx="0" pidx="3">0</button>
<button class="pure-button" cidx="1" pidx="3">1</button>
<button class="pure-button" cidx="2" pidx="3">2</button>
<button class="pure-button" cidx="3" pidx="3">3</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

+ 3
- 0
views/tail.html View File

@@ -0,0 +1,3 @@
</body>
<script src="app/js/main.js" type="module"></script>
</html>

+ 9
- 0
views/tools.html View File

@@ -0,0 +1,9 @@
<div class="pure-u-1-8 simple-padding">
<div class="pure-button-group" role="group" aria-label="...">
<% toolbtns.forEach((btn) => { %>
<button emit="modal-open" emit-args="<%= btn.emitargs %>" class="pure-button">
<i class="fa <%= btn.faicon %>"></i>
</button>
<% }); %>
</div>
</div>

Write Preview
Loading…
Cancel
Save