feat: base config
This commit is contained in:
@@ -4,3 +4,13 @@
|
|||||||
### [Tool link](https://klemek.github.io/legume/)
|
### [Tool link](https://klemek.github.io/legume/)
|
||||||
|
|
||||||
TODO docs
|
TODO docs
|
||||||
|
|
||||||
|
## Roadmap
|
||||||
|
|
||||||
|
- [x] Empty project from template
|
||||||
|
- [x] Configuration
|
||||||
|
- [ ] Generate table
|
||||||
|
- [ ] Copy table option
|
||||||
|
- [ ] Save last state in cookies
|
||||||
|
- [ ] Other format: raw text
|
||||||
|
- [ ] Other format: SVG
|
||||||
|
|||||||
+57
-5
@@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Légume 🥦</title>
|
<title>🥦 Légume</title>
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="style.css" />
|
||||||
<link rel="stylesheet" href="material-colors.css" />
|
<link rel="stylesheet" href="material-colors.css" />
|
||||||
<script src="https://unpkg.com/lucide@0"></script>
|
<script src="https://unpkg.com/lucide@0"></script>
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
</script>
|
</script>
|
||||||
<script type="module" src="main.js"></script>
|
<script type="module" src="main.js"></script>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta property="og:title" content="Légume 🥦">
|
<meta property="og:title" content="🥦 Légume">
|
||||||
<meta property="og:description" content="🧅 VJ Table Generator 🥕">
|
<meta property="og:description" content="🧅 VJ Table Generator 🥕">
|
||||||
<meta property="org:url" content="https://klemek.github.io/legume/">
|
<meta property="org:url" content="https://klemek.github.io/legume/">
|
||||||
</head>
|
</head>
|
||||||
@@ -24,10 +24,62 @@
|
|||||||
<body>
|
<body>
|
||||||
<main id="app" style="display: none">
|
<main id="app" style="display: none">
|
||||||
<h1>
|
<h1>
|
||||||
Légume 🥦
|
{{vegetable}} Légume
|
||||||
</h1>
|
</h1>
|
||||||
<br />
|
<table class="config">
|
||||||
<p v-html="content"></p>
|
<colgroup>
|
||||||
|
<col style="width: 25%">
|
||||||
|
<col>
|
||||||
|
<col style="width: 25%">
|
||||||
|
</colgroup>
|
||||||
|
<tr>
|
||||||
|
<td><label for="start-time">Start time:</label></td>
|
||||||
|
<td><input v-model="config.startTime" id="start-time" type="time" /></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="end-time">End time:</label></td>
|
||||||
|
<td><input v-model="config.endTime" id="end-time" type="time" /></td>
|
||||||
|
<td>Total: {{getTime(totalDuration)}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="duration">Slot duration:</label></td>
|
||||||
|
<td><input v-model="config.duration" id="duration" type="range" min="5" v-bind:max="totalDuration" step="5" />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span v-if="config.duration > totalDuration * 0.25" title="slot duration might be too big">
|
||||||
|
<i icon="triangle-alert"></i> {{config.duration}} minutes
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
{{config.duration}} minutes
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="seed">Seed:</label></td>
|
||||||
|
<td><input v-model="config.seed" type="number" /></td>
|
||||||
|
<td><button @click="newSeed"><i icon="dices"></i></button></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="candidates">Candidates:</label></td>
|
||||||
|
<td><textarea v-model="config.candidates" id="candidates" rows="8"></textarea></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>
|
||||||
|
<button class="full" title="Adds mixes (2 candidates) for some time slots"
|
||||||
|
@click="config.back2back = !config.back2back">🥣 With mixes: {{
|
||||||
|
config.back2back ? '✅' : '❌' }}</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>
|
||||||
|
<button class="full" title="Ends event with all candidates (aka salad)"
|
||||||
|
@click="config.endWithAll = !config.endWithAll">🥗 With salad: {{
|
||||||
|
config.endWithAll ? '✅' : '❌' }}</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
<br />
|
<br />
|
||||||
<small class="footer">
|
<small class="footer">
|
||||||
<i icon="at-sign"></i> <a href="https://github.com/klemek" target="_blank">klemek</a>
|
<i icon="at-sign"></i> <a href="https://github.com/klemek" target="_blank">klemek</a>
|
||||||
|
|||||||
@@ -10,32 +10,127 @@ const utils = {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
/* eslint-disable no-bitwise */
|
||||||
|
randomSeed() {
|
||||||
|
return (Math.random() * 2 ** 32) >>> 0;
|
||||||
|
},
|
||||||
|
splitmix32(seed) {
|
||||||
|
let tmp = seed;
|
||||||
|
// eslint-disable-next-line func-names
|
||||||
|
return function () {
|
||||||
|
tmp |= 0;
|
||||||
|
tmp = (tmp + 0x9e3779b9) | 0;
|
||||||
|
tmp ^= tmp >>> 16;
|
||||||
|
tmp = Math.imul(tmp, 0x21f0aaad);
|
||||||
|
tmp ^= tmp >>> 15;
|
||||||
|
tmp = Math.imul(tmp, 0x735a2d97);
|
||||||
|
return ((tmp ^= tmp >>> 15) >>> 0) / 4294967296;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
/* eslint-enable no-bitwise */
|
||||||
|
randomInt(max, seed) {
|
||||||
|
const prng = utils.splitmix32(seed);
|
||||||
|
return Math.floor(prng() * max);
|
||||||
|
},
|
||||||
|
shuffleSeeded(array, seed) {
|
||||||
|
const output = array.slice();
|
||||||
|
const prng = utils.splitmix32(seed);
|
||||||
|
for (let iteration = 0; iteration < array.length * 4; iteration += 1) {
|
||||||
|
const i1 = Math.floor(prng() * array.length);
|
||||||
|
const i2 = Math.floor(prng() * array.length);
|
||||||
|
const tmp = output[i2];
|
||||||
|
output[i2] = output[i1];
|
||||||
|
output[i1] = tmp;
|
||||||
|
}
|
||||||
|
return output;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const VEGETABLES = {
|
||||||
|
"🥦": "Broccoli",
|
||||||
|
"🥕": "Carrot",
|
||||||
|
"🧅": "Onion",
|
||||||
|
"🌶️": "Pepper",
|
||||||
|
"🍆": "Eggplant",
|
||||||
|
"🥔": "Potato",
|
||||||
|
"🍄": "Mushroom",
|
||||||
|
"🧄": "Garlic",
|
||||||
|
"🥬": "Lettuce",
|
||||||
|
"🥒": "Cucumber",
|
||||||
|
"🥑": "Avocado",
|
||||||
|
"🌽": "Corn",
|
||||||
|
"🫘": "Beans",
|
||||||
|
"🫚": "Ginger",
|
||||||
|
"🫛": "Pea",
|
||||||
|
"": "Radish",
|
||||||
};
|
};
|
||||||
|
|
||||||
const app = createApp({
|
const app = createApp({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
content:
|
config: {
|
||||||
"Fill this page with <i>whatever</i> you're going to develop.<br><b>Then enjoy!</b>",
|
startTime: "21:00",
|
||||||
|
endTime: "03:00",
|
||||||
|
duration: 30,
|
||||||
|
seed: utils.randomSeed(),
|
||||||
|
candidates:
|
||||||
|
"🥦 Broccoli\n🥕 Carrot\n🧅 Onion\n🌶️ Pepper\n🍆 Eggplant\n🥔 Potato",
|
||||||
|
endWithAll: true,
|
||||||
|
back2back: true,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
currentYear() {
|
vegetable() {
|
||||||
return new Date().getFullYear();
|
return Object.keys(VEGETABLES)[
|
||||||
|
utils.randomInt(Object.keys(VEGETABLES).length, this.config.seed)
|
||||||
|
];
|
||||||
|
},
|
||||||
|
startTimeMinute() {
|
||||||
|
return Math.floor(
|
||||||
|
Date.parse(`1970-01-01T${this.config.startTime}:00Z`) / 60000
|
||||||
|
);
|
||||||
|
},
|
||||||
|
endTimeMinute() {
|
||||||
|
const result = Math.floor(
|
||||||
|
Date.parse(`1970-01-01T${this.config.endTime}:00Z`) / 60000
|
||||||
|
);
|
||||||
|
return result < this.startTimeMinute ? result + 1440 : result;
|
||||||
|
},
|
||||||
|
totalDuration() {
|
||||||
|
return this.endTimeMinute - this.startTimeMinute;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
vegetable() {
|
||||||
|
document.title = `${this.vegetable} Légume`;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {},
|
|
||||||
updated() {
|
updated() {
|
||||||
utils.updateIcons();
|
utils.updateIcons();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
document.title = `${this.vegetable} Légume`;
|
||||||
setTimeout(this.showApp);
|
setTimeout(this.showApp);
|
||||||
utils.updateIcons();
|
utils.updateIcons();
|
||||||
|
this.config.candidates = utils
|
||||||
|
.shuffleSeeded(Object.keys(VEGETABLES), this.config.seed)
|
||||||
|
.map((key) => `${key} ${VEGETABLES[key]}`)
|
||||||
|
.slice(0, 6)
|
||||||
|
.join("\n");
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getTime(minutes) {
|
||||||
|
return `${(minutes / 60).toFixed(0).padStart(2, "0")}:${(minutes % 60)
|
||||||
|
.toFixed(0)
|
||||||
|
.padStart(2, "0")}`;
|
||||||
|
},
|
||||||
showApp() {
|
showApp() {
|
||||||
document.getElementById("app").setAttribute("style", "");
|
document.getElementById("app").setAttribute("style", "");
|
||||||
},
|
},
|
||||||
|
newSeed() {
|
||||||
|
this.config.seed = utils.randomSeed();
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user