MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-12-25 19:54:25 +01:00
Code Issues Projects Releases Wiki Activity

Implement base of period groups

Browse source
This commit is contained in:
Hans5958 2022-04-14 13:41:13 +07:00
parent 225d44b146
commit a6868219fd
4 changed files with 239 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/_css/style.css
View file

@ -1317,4 +1317,32 @@ #donateWindow a.button svg {
#donateWindow a.button path {
color: white;
}
#periods {
display: flex;
flex-direction: column;
}
.period-group {
background-color: #888;
border: 1px black solid;
padding: .5em
}
.period-group[data-active="true"] {
border-color: lime;
box-shadow: 0px 0px lime;
}
.period-group input {
width: 100%;
}
#periods .period-visible {
margin-bottom: 0;
}
#drawControls p {
margin-bottom: 0.5em;
}

220
web/_js/draw.js
View file

@ -13,6 +13,33 @@
========================================================================
*/
var finishButton = document.getElementById("finishButton");
var resetButton = document.getElementById("resetButton");
var undoButton = document.getElementById("undoButton");
var redoButton = document.getElementById("redoButton");
var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
var entryId = 0
var objectInfoBox = document.getElementById("objectInfo");
var hintText = document.getElementById("hint");
var periodGroups = document.getElementById('periodGroups')
var periodGroupTemplate = document.getElementById('period-group').content.firstElementChild.cloneNode(true)
var exportButton = document.getElementById("exportButton");
var cancelButton = document.getElementById("cancelButton");
var exportOverlay = document.getElementById("exportOverlay");
var exportCloseButton = document.getElementById("exportCloseButton");
var exportBackButton = document.getElementById("exportBackButton")
var path = [];
var pathWithPeriods = []
var periodGroupElements = []
var drawing = true;
function initDraw(){
wrapper.classList.remove('listHidden')
@ -21,26 +48,9 @@ function initDraw(){
window.renderBackground = renderBackground
window.updateHovering = updateHovering
var finishButton = document.getElementById("finishButton");
var resetButton = document.getElementById("resetButton");
var undoButton = document.getElementById("undoButton");
var redoButton = document.getElementById("redoButton");
var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
var entryId = 0
var objectInfoBox = document.getElementById("objectInfo");
var hintText = document.getElementById("hint");
var startPeriodField = document.getElementById('startPeriodField')
var endPeriodField = document.getElementById('endPeriodField')
var periodVisbilityInfo = document.getElementById('periodVisbilityInfo')
var exportButton = document.getElementById("exportButton");
var cancelButton = document.getElementById("cancelButton");
var exportOverlay = document.getElementById("exportOverlay");
var exportCloseButton = document.getElementById("exportCloseButton");
var exportBackButton = document.getElementById("exportBackButton")
// var startPeriodField = document.getElementById('startPeriodField')
// var endPeriodField = document.getElementById('endPeriodField')
// var periodVisbilityInfo = document.getElementById('periodVisbilityInfo')
var rShiftPressed = false;
var lShiftPressed = false;
@ -53,9 +63,6 @@ function initDraw(){
container.style.cursor = "crosshair";
var path = [];
var drawing = true;
var undoHistory = [];
render(path);
@ -294,21 +301,20 @@ function initDraw(){
objectDraw.style.display = "none";
hintText.style.display = "none";
document.getElementById("nameField").focus();
if (period >= startPeriodField.value * 1 && period <= endPeriodField.value * 1) {
periodVisbilityInfo.textContent = ""
} else {
periodVisbilityInfo.textContent = "Not visible during this period!"
}
// if (isOnPeriod()) {
// periodVisbilityInfo.textContent = ""
// } else {
// periodVisbilityInfo.textContent = "Not visible during this period!"
// }
}
function reset(){
path = [];
updatePath([])
undoHistory = [];
finishButton.disabled = true;
undoButton.disabled = true; // Maybe make it undo the cancel action in the future
redoButton.disabled = true;
drawing = true;
render(path);
objectInfoBox.style.display = "none";
objectDraw.style.display = "block";
hintText.style.display = "block";
@ -433,10 +439,15 @@ function initDraw(){
})
}
if(path.length >= 3){
finishButton.disabled = false;
if (Array.isArray(path)) {
pathWithPeriods.push([defaultPeriod, path])
} else if (typeof path === "object") {
pathWithPeriods = Object.entries(path)
}
render(path)
console.log(pathWithPeriods)
initPeriodGroups()
zoom = 4;
@ -454,13 +465,146 @@ function initDraw(){
}
document.addEventListener('timeupdate', (event) => {
if (period >= startPeriodField.value && period <= endPeriodField.value) {
periodVisbilityInfo.textContent = ""
} else {
periodVisbilityInfo.textContent = "Not visible during this period!"
}
updatePeriodGroups()
})
}
function isOnPeriod(start = parseInt(startPeriodField.value), end = parseInt(endPeriodField.value), current = period) {
console.log(start, end, current, current >= start && current <= end)
return current >= start && current <= end
}
function initPeriodGroups() {
periodGroupElements = []
console.log(pathWithPeriods)
pathWithPeriods.forEach(([period, path], index) => {
let periodGroupEl = periodGroupTemplate.cloneNode(true)
periodGroupEl.id = "periodGroup" + index
let startPeriodEl = periodGroupEl.querySelector('.period-start')
let endPeriodEl = periodGroupEl.querySelector('.period-end')
let periodVisibilityEl = periodGroupEl.querySelector('.period-visible')
let [start, end] = parsePeriod(period)
startPeriodEl.id = "periodStart" + index
startPeriodEl.previousSibling.for = startPeriodEl.id
endPeriodEl.id = "periodEnd" + index
endPeriodEl.previousSibling.for = endPeriodEl.id
periodVisibilityEl.id = "periodVisibility" + index
startPeriodEl.value = start
startPeriodEl.max = maxPeriod
endPeriodEl.value = end
endPeriodEl.max = maxPeriod
startPeriodEl.addEventListener('input', () => {
updatePeriodGroups()
})
endPeriodEl.addEventListener('input', () => {
updatePeriodGroups()
})
periodGroups.appendChild(periodGroupEl)
periodGroupElements.push({
periodGroupEl,
startPeriodEl,
endPeriodEl,
periodVisibilityEl
})
})
console.log(periodGroupTemplate)
updatePeriodGroups()
}
function updatePeriodGroups() {
var pathToActive = []
var lastActivePathIndex
var currentActivePathIndex
periodGroupElements.forEach((elements, index) => {
let {
periodGroupEl,
startPeriodEl,
endPeriodEl,
periodVisibilityEl
} = elements
if (periodGroupEl.dataset.active === "true") lastActivePathIndex = index
if (isOnPeriod(
parseInt(startPeriodEl.value),
parseInt(endPeriodEl.value),
period
)) {
pathToActive = pathWithPeriods[index][1]
currentActivePathIndex = index
periodGroupEl.dataset.active = true
} else {
periodGroupEl.dataset.active = false
}
pathWithPeriods[index][0] = formatPeriod(
parseInt(startPeriodEl.value),
parseInt(endPeriodEl.value),
period
)
})
console.log('lastActivePathIndex: ' + lastActivePathIndex)
console.log('currentActivePathIndex: ' + currentActivePathIndex)
if (lastActivePathIndex !== undefined) {
if (lastActivePathIndex === currentActivePathIndex) {
// just update the path
pathWithPeriods[currentActivePathIndex] = [
formatPeriod(
parseInt(periodGroupElements[currentActivePathIndex].startPeriodEl.value),
parseInt(periodGroupElements[currentActivePathIndex].endPeriodEl.value)
),
path
]
console.log(pathWithPeriods[currentActivePathIndex])
} else if (currentActivePathIndex === undefined) {
updatePath([])
console.log(path + 'empty!')
} else {
// switch the path
}
} else {
updatePath(pathToActive)
}
drawing = currentActivePathIndex !== undefined
}
function parsePeriod(periodString) {
// TODO: Support for multiple/alternative types of canvas
if (period.search('-') + 1) {
var [start, end] = period.split('-').map(i => parseInt(i))
return [start, end]
} else {
let period = parseInt(periodString)
return [period, period]
}
}
function formatPeriod(start, end) {
if (start === end) return start
else return start + "-" + end
}
function updatePath(path) {
path = []
render(path)
if(path.length >= 3){
finishButton.disabled = false;
}
}

23
web/_js/time.js
View file

@ -97,14 +97,15 @@ let slider = document.getElementById("timeControlsSlider");
let tooltip = document.getElementById("timeControlsTooltip")
let image = document.getElementById("image");
let defaultPeriod = timeConfig.length
let defaultPeriod = timeConfig.length - 1
let maxPeriod = timeConfig.length - 1
var period = defaultPeriod
window.period = period
// SETUP
slider.max = timeConfig.length - 1;
document.querySelector('#startPeriodField').max = defaultPeriod
document.querySelector('#endPeriodField').max = defaultPeriod
// document.querySelector('#period-group .period-start').max = defaultPeriod
// document.querySelector('#period-group .period-end').max = defaultPeriod
slider.value = slider.max;
updateTime(slider.value)
@ -112,15 +113,15 @@ slider.addEventListener("input", (event) => {
updateTime(parseInt(event.target.value))
})
document.querySelector('#startPeriodField').oninput = (event) => {
slider.value = parseInt(event.target.value)
updateTime(parseInt(event.target.value))
};
// document.querySelector('#period-group .period-start').oninput = (event) => {
// slider.value = parseInt(event.target.value)
// updateTime(parseInt(event.target.value))
// };
document.querySelector('#endPeriodField').oninput = (event) => {
slider.value = parseInt(event.target.value)
updateTime(parseInt(event.target.value))
};
// document.querySelector('#period-group .period-end').oninput = (event) => {
// slider.value = parseInt(event.target.value)
// updateTime(parseInt(event.target.value))
// };
const dispatchTimeUpdateEvent = (period = slider.value, atlas = atlas) => {
const timeUpdateEvent = new CustomEvent('timeupdate', {

23
web/index.html
View file

@ -173,7 +173,7 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
</div>
<div id="timeControls">
<div id="timeControlsTooltip"><p>Time control slider</p></div>
<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
<input type="range" min="0" max="1" value="1" class="slider" id="timeControlsSlider">
</div>
<div id="author">
<p>Code owned by <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="author">Place Atlas</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>. Site powered by <a href="https://www.netlify.com">Netlify</a>. Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
@ -193,6 +193,11 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
<label id="highlightUnchartedLabel" title="Highlight uncharted areas of the map" class="checkboxLabel button">
<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
</label>
<div id="periods">
<p>Periods</p>
<div id="periodGroups">
</div>
</div>
</div>
<div id="objectInfo">
<label for="nameField">Name</label>
@ -203,11 +208,6 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
<input id="websiteField" type="text" value="" placeholder="https://example.com">
<label for="subredditField">Subreddit</label>
<input id="subredditField" type="text" value="" placeholder="/r/example">
<label for="websiteField">Start Period</label>
<input id="startPeriodField" type="range" min="0">
<label for="websiteField">End Period</label>
<input id="endPeriodField" type="range" min="0">
<p id="periodVisbilityInfo" style="text-align: center">Not visible during this period!</p>
<div id="infoButtons">
<button id="cancelButton">Back</button>
<button id="exportButton">OK</button>
@ -277,6 +277,17 @@ <h2>Donation Links</h2>
</div>
</div>
</div>
<template id="period-group">
<div class="period-group">
<label for="period-start">Start Period</label>
<input class="period-start" type="range" min="0">
<label for="period-end">End Period</label>
<input class="period-end" type="range" min="0">
<p class="period-visible"></p>
</div>
</template>
<script type="text/javascript" src="./_js/time.js"></script>
<script type="text/javascript" src="./_js/infoblock.js"></script>
<script type="text/javascript" src="./_js/pointInPolygon.js"></script>