Skip to content

Commit

Permalink
Sharing
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasahle
thomasahle committed Dec 3, 2023
1 parent c5c5c6c commit 1e98843
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 12 deletions.
7 changes: 6 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <h1>CODEWORDS</h1>
</div>
<div class="div-during-game not-today">
Showing <code>CODEWORDS</code> for <span class="date"></span>.
Go to <span class="link" id="todays-link">Todays's</span>.
Go to <span class="link" id="todays-link">Today's</span>.
</div>
<div class="div-during-game is-today">
<code>CODEWORDS</code> for <span class="date"></span>.
Expand Down Expand Up @@ -131,6 +131,11 @@ <h3 class="gap-above">Rounds Used When Winning</h3>

<h3 class="gap-above">Intended Clues From Game</h3>
<div id="post-game-analysis"></div>

<p class="gap-above" style="position: relative">
<span id="message" class="modal-message" style="display: none;">Copied results to clipboard!</span>
<button type="button" class="share-button" id="shareButton">Share <i class="ti ti-share"></i></button>
</p>
</div>
</div>
</body>
Expand Down
64 changes: 54 additions & 10 deletions website/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,21 @@ function parseDate(dateStr) {
return new Date(dateStr + 'T00:00');
}

function toLongDate(date, includeYear = true) {
const options = {
year: includeYear ? 'numeric' : undefined, // Include year based on the flag
month: 'long',
day: 'numeric'
};
return parseDate(date).toLocaleDateString(undefined, options);
}

function toShortDate(date) {
return date.getFullYear() + '-' +
String(date.getMonth() + 1).padStart(2, '0') + '-' +
String(date.getDate()).padStart(2, '0');
}

function checkSetAndGetDateHash() {
const dateFromHash = window.location.hash.substring(1); // Remove the '#' character
const dateRegex = /^\d{4}-\d{2}-\d{2}$/; // Simple regex for YYYY-MM-DD format
Expand All @@ -56,7 +71,7 @@ function checkSetAndGetDateHash() {

// Check if the date matches the format and is not NaN, and is not in the future
if (!dateFromHash.match(dateRegex) || isNaN(inputDate.getTime()) || inputDate > today) {
const todayStr = today.toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
const todayStr = toShortDate(today);
window.location.hash = '#' + todayStr;
return todayStr;
}
Expand Down Expand Up @@ -197,8 +212,7 @@ async function main(date, datas) {

// Footer
for (const span of document.getElementsByClassName("date")) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
span.textContent = parseDate(date).toLocaleDateString(undefined, options);
span.textContent = toLongDate(date);
}
}

Expand Down Expand Up @@ -289,7 +303,7 @@ async function main(date, datas) {
}
const curDate = parseDate(date);
curDate.setDate(curDate.getDate() - 1); // Subtract one day
const yesterday = curDate.toISOString().split('T')[0];
const yesterday = toShortDate(curDate);
window.location.hash = '#' + yesterday;
}

Expand Down Expand Up @@ -319,10 +333,10 @@ async function main(date, datas) {
}

init();
initMenu(data, datas);
initMenu(date, datas);
}

function initMenu(gameData, allGameDatas) {
function initMenu(date, allGameDatas) {
const statsButton = document.getElementById('stats-button');
const statsLink = document.getElementById('stats-link');
const helpButton = document.getElementById('help-button');
Expand All @@ -331,11 +345,13 @@ function initMenu(gameData, allGameDatas) {
const statsModal = document.getElementById('stats-modal');
const helpModal = document.getElementById('help-modal');
const analysisDiv = document.getElementById('post-game-analysis');
const shareButton = document.getElementById('shareButton');

const data = {
helpShown: false,
statsShown: false,
}
const gameData = allGameDatas[date];

statsButton.onclick = function() {
data.statsShown = true;
Expand Down Expand Up @@ -378,6 +394,28 @@ function initMenu(gameData, allGameDatas) {
render();
}

shareButton.onclick = function() {

const {shareString, logString} = compileLog(gameData.hints, gameData.revealed, gameData.secret);
let copyString = `CODENAMES ${toLongDate(date, false)}, ${gameData.hints.length}/${MAX_ROUNDS}`;
copyString += "\n\n" + shareString;

// Copying the string to the clipboard
navigator.clipboard.writeText(copyString).then(function() {
// Show the message
const message = document.getElementById('message');
message.style.display = 'inline';

// Hide the message after 2 seconds
setTimeout(function() {
message.style.display = 'none';
}, 2000);
}).catch(function(error) {
// Handle any errors here
console.error('Error copying text: ', error);
});
}

function render() {
statsModal.style.display = data.statsShown ? "block" : "none";
helpModal.style.display = data.helpShown ? "block" : "none";
Expand All @@ -394,7 +432,7 @@ function initMenu(gameData, allGameDatas) {
const {longestStreak, longestEnd, currentStreak} = findStreaks(allGameDatas);
document.getElementById('currentStreak').textContent = currentStreak;
document.getElementById('maxStreak').textContent = longestStreak;
document.getElementById('maxStreak').setAttribute("title", `Streak ended ${longestEnd}`);
document.getElementById('maxStreak').setAttribute("title", `Streak ended ${toShortDate(longestEnd)}`);

// Create bars. I like the bars.
let distribution = JSON.parse(localStorage.getItem('guessDistribution'))
Expand All @@ -418,7 +456,8 @@ function initMenu(gameData, allGameDatas) {
// Log of clues
if (isGameOver(gameData)) {
console.log("Making log");
analysisDiv.innerHTML = compileLog(gameData.hints, gameData.revealed, gameData.secret);
const {shareString, logString} = compileLog(gameData.hints, gameData.revealed, gameData.secret);
analysisDiv.innerHTML = logString;
} else {
console.log("Making log");
analysisDiv.innerHTML = "<p>Come back here after the game.</p>";
Expand Down Expand Up @@ -603,6 +642,7 @@ function makeHint(matrix, words, stopwords, board, secret, aggressiveness) {


function compileLog(hints, revealed, secret) {
let shareString = "";
let s = "<ol class=\"log-list\">";
let j = 0;
for (let i = 0; i < hints.length; i++) {
Expand Down Expand Up @@ -630,6 +670,7 @@ function compileLog(hints, revealed, secret) {
for (let word of intended) {
if (!guessed.includes(word)) {
s += `<li class="small-card">${word}<span>(Intended clue)</span></li>`;
shareString += "⬜";
}
}
for (let word of guessed) {
Expand All @@ -638,15 +679,18 @@ function compileLog(hints, revealed, secret) {
} else {
s += `<li class="small-card good">${word}<span>(Guessed by chance)</span></li>`;
}
shareString += "🟧";
}
if (mistake !== null) {
s += `<li class="small-card bad">${mistake}<span>(Incorrect)</span></li>`;
shareString += "🟫";
}
shareString += "\n";

s += "</ul></li>";
}
s += "</ol>";
return s;
return {shareString, logString: s};
}

function findStreaks(datesObject) {
Expand Down Expand Up @@ -701,7 +745,7 @@ function findStreaks(datesObject) {

return {
longestStreak,
longestEnd: longestEnd ? longestEnd.toISOString().split('T')[0] : null,
longestEnd,
currentStreak
};
}
Expand Down
33 changes: 32 additions & 1 deletion website/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ body.game-win {
background: #fffae6;
}
body.game-lost {
background: #ffefef;
background: #ffeae6;
}

.container {
Expand Down Expand Up @@ -439,3 +439,34 @@ body:not(.today) .is-today {
.row-label {
width: 1rem;
}

.share-button {
display: flex;
gap: .5rem;
justify-content: center;
align-items: center;

margin:auto;

height: 3rem;
border-radius: 1.5rem;

padding: 0 2rem;
background-color: #5fab1b;
color: white;

cursor: pointer;
font-size: 105%;
}

.modal-message {
background: black;
padding: 1rem;
border-radius: 5px;
color: white;

position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -110%);
}

0 comments on commit 1e98843

Please sign in to comment.