Lamp: Init first version with fixed colors

server/lamp/index.ts

@@ -0,0 +1,53 @@
+import * as path from "path";
+import express from 'express';
+import { State, state, display } from '../server';
+import { Color } from '../color';
+import { HtmlColors } from '../htmlColors';
+
+export const lamp = express();
+lamp.use(express.json());
+
+const LAMP_FPS = 20;
+
+lamp.get('/', (req, res) => {
+    res.sendFile(path.join(__dirname, '..', '..', 'static', 'lamp.html'));
+});
+
+lamp.post('/color', (req, res) => {
+    const { r, g, b, w } = req.body;
+    currentColor = new Color(r, g, b, w);
+    startLamp();
+    res.send("OK");
+});
+
+let isLampRunning = false;
+let currentColor: Color = HtmlColors.black;
+
+function startLamp() {
+    if (!isLampRunning) {
+        isLampRunning = true;
+        tick();
+    }
+
+    function tick() {
+        // Loop timing, keep at the beginning
+        const tickStart = Date.now();
+
+        display.drawAll(currentColor);
+        display.render();
+
+        if (!display.isDisplay) {
+            console.log(currentColor);
+        }
+
+        // Loop timing, keep at the end
+        if (state === State.IDLE) {
+            const tickEnd = Date.now();
+            const diff = tickStart - tickEnd;
+            const waitingTime = 1 / LAMP_FPS * 1000 + diff;
+            setTimeout(() => tick(), waitingTime);
+        } else {
+            isLampRunning = false;
+        }
+    }
+}

server/server.ts

@@ -8,6 +8,7 @@ import { Color } from './color';
 import { HtmlColors } from './htmlColors';
 import { GameOptions } from "./types/GameOptions";
 import { Line } from './types/Line';
+import { lamp } from './lamp';
 
 let gameOptions: GameOptions = {
     BattleRoyale: {
@@ -30,7 +31,7 @@ let gameOptions: GameOptions = {
     }
 };
 
-let app = express();
+const app = express();
 const expressWs = expressWsWrapper(app);
 const NB_LED = 300;
 const MINIMUM_PLAYERS = 2;
@@ -43,20 +44,18 @@ let game: Game = null;
 let startTime = Date.now();
 let currentDisplayAnim;
 
-enum State {
+export enum State {
     IDLE,
     WAITING,
     GAME,
     END,
 }
 
-let state: State = State.IDLE;
+export let state: State = State.IDLE;
 let cooldown;
 let ledAnim;
 
-app.use((req, res, next) => {
-    return next();
-});
+app.use('/lamp', lamp);
 
 app.use('/static', express.static(__dirname + '/../static'));
 
@@ -95,7 +94,7 @@ if (process.argv.includes('--no-display')) {
 }
 
 const invertOrientation = process.argv.includes('--invert');
-const display: Display = new Display(NB_LED, DISPLAY_API_ROOT_HOSTNAME, DISPLAY_API_ROOT_PORT, isDisplay, invertOrientation);
+export const display: Display = new Display(NB_LED, DISPLAY_API_ROOT_HOSTNAME, DISPLAY_API_ROOT_PORT, isDisplay, invertOrientation);
 
 displayServerStarted();
 

static/lamp.css

@@ -0,0 +1,59 @@
+/* latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/static/Montserrat.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+* {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+}
+
+body {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    font-size: 4vw;
+    font-family: Montserrat, sans-serif;
+}
+
+#container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #333333;
+    color: white;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+input[type="checkbox"] {
+    width: 2vw;
+    height: 2vw;
+}
+
+input[type="radio"] {
+    width: 1.4vw;
+    height: 1.4vw;
+}
+
+input[type="number"] {
+    font-size: 2vw;
+    text-align: right;
+    max-width: 5vw;
+}
+
+label {
+    font-size: 2vw;
+}

static/lamp.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
+    <meta name="theme-color" content="#777777">
+    <title>Orbital</title>
+    <link href="/static/normalize.css" rel="stylesheet">
+    <link href="/static/lamp.css" rel="stylesheet">
+</head>
+<body>
+    <div id="container">
+        <h1>Lamp</h1>
+        <input type="color" id="color-picker">
+    </div>
+    <script src="/static/lamp.js"></script>
+</body>
+</html>

static/lamp.js

@@ -0,0 +1,19 @@
+const colorPicker = document.getElementById("color-picker");
+colorPicker.addEventListener('input', () => {
+    const hexColor = colorPicker.value;
+    const color = {
+        r: parseInt(hexColor.substring(1, 3), 16),
+        g: parseInt(hexColor.substring(3, 5), 16),
+        b: parseInt(hexColor.substring(5, 7), 16),
+        w: 0,
+    }
+
+    sendColor(color)
+});
+
+function sendColor(color) {
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", "/lamp/color", true);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.send(JSON.stringify(color));
+}