Words at War

Developer
Dave
Size
32,346 Kb
Views
16,192
  1. Words at War Previews
  2. Words at War HTML Codes
  3. Words at War CSS Codes
  4. Words at War JS Codes

How do I make an words at war?

What is a words at war? How do you make a words at war? This script and codes were developed by Dave on 17 September 2022, Saturday.

Words at War Previews
IQ Test

Words at War - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Words at War</title> <link rel='stylesheet prefetch' href='css/jqorem.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg class="h-hide" xmlns="http://www.w3.org/2000/svg"> <symbol id="heart-icon" viewBox="0 0 24 24"> <path fill="currentColor" fill-rule="evenodd" d="M7 3c-1.536 0-3.078.5-4.25 1.7-2.343 2.4-2.28 6.1 0 8.5L12 23l9.25-9.8c2.28-2.4 2.343-6.1 0-8.5-2.343-2.3-6.157-2.3-8.5 0l-.75.8-.75-.8C10.078 3.5 8.535 3 7 3z"/> </symbol> <symbol id="chunky-arrow-icon" viewBox="0 0 292 292"> <path d="M286.935 69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952 0-9.233 1.807-12.85 5.424C1.807 72.997 0 77.28 0 82.227c0 4.95 1.807 9.23 5.424 12.848L133.33 222.982c3.622 3.617 7.903 5.428 12.85 5.428s9.234-1.81 12.848-5.428L286.935 95.074c3.613-3.617 5.427-7.898 5.427-12.847 0-4.948-1.814-9.23-5.427-12.85z"/> </symbol>
</svg>
<div class="h-spacing"> <form id="startScreen" onSubmit="event.preventDefault()"> <ul> <li class="h-spacing"> <label for="player1Name">Player 1 Name:</label> <input id="player1Name" class="c-text-input" type="text" value="Player 1" /> </li> <li class="h-spacing"> <label for="player2Name">Player 2 Name:</label> <input id="player2Name" class="c-text-input" type="text" value="Player 2" /> </li> </ul> <button class="c-button" onClick="startGame(event)">Start game</button> </form>
</div>
<div id="canvas" class="h-hide"> <div class="l-grid l-grid--space-between h-spacing"> <div class="l-grid__item"> <h3 class="js-player1">Player 1</h3> <svg class="c-icon c-icon--heart"> <use xlink:href="#heart-icon" /> </svg> <svg class="c-icon c-icon--heart"> <use xlink:href="#heart-icon" /> </svg> <svg class="c-icon c-icon--heart"> <use xlink:href="#heart-icon" /> </svg> <svg class="c-icon c-icon--arrow-down is-active"> <use xlink:href="#chunky-arrow-icon" /> </svg> </div> <div class="l-grid__item"> <h3 class="js-player2">Player 2</h3> <svg class="c-icon c-icon--heart"> <use xlink:href="#heart-icon" /> </svg> <svg class="c-icon c-icon--heart"> <use xlink:href="#heart-icon" /> </svg> <svg class="c-icon c-icon--heart"> <use xlink:href="#heart-icon" /> </svg> <svg class="c-icon c-icon--arrow-down"> <use xlink:href="#chunky-arrow-icon" /> </svg> </div> </div> <form name="game-form" style="position: relative;" onSubmit="saveWord(event)"> <div id="letter-box" class="c-letter-box"></div> <div id="app"></div> <input id="player1Word" type="hidden"> <div> <button class="c-button" type="submit">Submit</button> <button class="c-button c-button--secondary" onClick="clearWord(event)">Clear</button> </div> </form>
</div> <script src="js/index.js"></script>
</body>
</html>

Words at War - Script Codes CSS Codes

$cell-size: $shell-g-spacing-4x-large;
$icon-size: $shell-g-spacing;
$g-color-brand: #19a9e5;
$g-color-grey-300: #d2d7df;
$g-color-grey-700: #8e9aad;
$board-color: $g-color-grey-300;
/** * Font size. */
$g-form-font-size: $shell-g-font-size-small;
/** * Transitions. */
$g-form-transition: 0.2s ease;
/** * Textual inputs and select lists. */
$g-form-textual-input-select-list-height: 45;
$g-form-textual-input-select-list-padding-ends: $shell-g-spacing-small;
$g-form-textual-input-select-list-padding-sides: $shell-g-spacing;
/** * Active `box-shadow`. */
$g-box-shadow-active: inset 0 0 0 1px $g-color-brand, 0 0 0 2px rgba($g-color-brand, 0.25);
$g-box-shadow-textual-input-select-list-focus: inset 0 0 0 0 rgba($shell-g-color-white, 0), $g-box-shadow-active;
$g-box-shadow-textual-input-select-list-validation-error: 0 0 0 1px #e85244;
/* stylelint-enable */
/** * Textual inputs. */
$g-box-shadow-textual-input: inset 0 2px 0 0 rgba($g-color-grey-700, 0.1), inset 0 0 0 1px $g-color-grey-300, 0 1px 0 0 $shell-g-color-white;
body { padding: rem($shell-g-spacing);
}
.c-text-input { background-color: $shell-g-color-white; border: 0; border-radius: $shell-g-border-radius; box-shadow: $g-box-shadow-textual-input; color: $shell-g-color-text; font-size: rem($g-form-font-size); min-height: rem($g-form-textual-input-select-list-height); // [1] outline: 0; // [2] padding: rem($g-form-textual-input-select-list-padding-ends) rem($g-form-textual-input-select-list-padding-sides); transition: box-shadow $g-form-transition; width: 100%; // [2] &:focus { box-shadow: $g-box-shadow-textual-input-select-list-focus; // [3] } &.is-invalid, &.is-invalid:focus { box-shadow: $g-box-shadow-textual-input-select-list-validation-error; }
}
.c-button { background-color: #2cc36b; border: 1px solid #2cc36b; border-radius: 3px; color: #fff; padding: rem($shell-g-spacing-small) rem($shell-g-spacing-large);
}
.c-button--secondary { color: #2cc36b; background-color: transparent; border-color: 1px solid currentColor;
}
.c-icon { height: rem($icon-size); width: rem($icon-size);
}
.c-icon--heart { color: red;
}
.c-icon--heart.is-empty { display: none;
}
.c-board { border: 1px solid $board-color; float: left;
}
/* Cells */
// placeholder to keep cell space when moved out
.c-cell { background-color: #fff; height: rem($cell-size); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; width: rem($cell-size);
}
/* Hide checkbox */
.c-cell__input { left: -9999px; position: absolute;
}
.c-cell__label { align-items: center; background-color: #fafafa; display: flex; height: rem($cell-size); justify-content: center; text-transform: uppercase; width: rem($cell-size);
}
.c-cell__label:hover { background-color: #f1f1f1;
}
/* active */
.c-cell__input:checked + .c-cell__label { background-color: #ff7f00; color: #fff; position: absolute; top: 0;
}
/* accessibility */
.c-cell__input:checked:focus + .c-cell__label,
.c-cell__input:not(:checked):focus + .c-cell__label { border: 1px dotted #ff7f00;
}
.c-row { display: flex;
}
.c-letter-box { padding-top: rem($cell-size + 5);
}
.c-icon--arrow-down { display: none;
}
.c-icon--arrow-down.is-active { display: block; height: rem(50); width: rem(50);
}

Words at War - Script Codes JS Codes

'use strict';
var settings = { boardSize: 5, vowelRatio: 6
};
var letters = { vowels: 'aeiou', consonants: 'bcdfghjklmnpqrstvwxyz'
};
var players = { 1: { name: 'Frog', word: '' }, 2: { name: 'Davis', word: '' }
};
var state = { wordElements: [], pieceWidth: '', activePlayer: 1
};
// Elements
var app = document.getElementById('app');
var canvas = document.getElementById('canvas');
var player1Word = document.getElementById('player1Word');
var startScreen = document.getElementById('startScreen');
var getCellMarkUp = function getCellMarkUp(i, j, letter) { return '<div class="c-cell">\n <input id="r' + i + '-c' + j + '" class="c-cell__input" type="checkbox" name="word" value="' + letter + '" onClick="handleClick(this)">\n <label for="r' + i + '-c' + j + '" class="c-cell__label">' + letter + '</label> \n </div>';
};
var saveWord = function saveWord(e) { e.preventDefault(); players[state.activePlayer].word = player1Word.value; clearWord();
};
var clearWord = function clearWord(e) { if (e) { e.preventDefault(); } var checkBoxes = document.getElementsByName('word'); for (var i = 0, max = checkBoxes.length; i < max; i++) { checkBoxes[i].checked = false; } state.wordElements = [];
};
var getRandomRange = function getRandomRange(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;
};
var getLetterType = function getLetterType() { return getRandomRange(1, 10) < settings.vowelRatio ? letters.vowels : letters.consonants;
};
var getLetter = function getLetter() { var type = getLetterType(); return type.charAt(Math.floor(Math.random() * type.length));
};
var createEl = function createEl(type, classList) { var el = document.createElement(type); el.classList.add(classList); return el;
};
var updateWord = function updateWord(array) { return player1Word.value = array.map(function (el) { return el.value; }).join('');
};
var handleClick = function handleClick(input) { var newArray = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1]; if (!input.checked) { newArray = state.wordElements.filter(function (word) { return word.id !== input.id; }); } else { newArray = [{ id: input.id, value: input.value }].concat(state.wordElements); } // be good to do something like Object.assign state.wordElements = newArray; updateWord(state.wordElements); setPositionOfLetter(input);
};
var getLabel = function getLabel(el) { return el.parentNode.getElementsByTagName('label')[0];
};
var calculateOffset = function calculateOffset(i, pieceWidth) { return i * pieceWidth + 'px';
};
var setPositionOfLetter = function setPositionOfLetter(input) { var labelCount = state.wordElements.length; var label = getLabel(input); label.style.left = calculateOffset(labelCount - 1, state.pieceWidth);
};
var setUp = function setUp(boardSize) { var boardEl = createEl('div', 'c-board'); var board = generateBoard(boardSize, boardEl); app.appendChild(board); for (var p in players) { document.getElementsByClassName('js-player' + p)[0].innerHTML = players[p].name; } render();
};
var render = function render() { canvas.classList.remove('h-hide'); startScreen.classList.add('h-hide'); state.pieceWidth = document.getElementsByClassName('c-cell')[0].offsetWidth;
};
var generateBoard = function generateBoard(boardSize, boardEl) { var board = boardEl; for (var i = 0; i < boardSize; i++) { var row = createEl('div', 'c-row'); for (var j = 0; j < boardSize; j++) { var letter = getLetter(); var cell = getCellMarkUp(i, j, letter); row.innerHTML += cell; } board.appendChild(row); } return board;
};
var startGame = function startGame(e) { return setUp(settings.boardSize);
};
Words at War - Script Codes
Words at War - Script Codes
Home Page Home
Developer Dave
Username DaveOrDead
Uploaded September 17, 2022
Rating 3
Size 32,346 Kb
Views 16,192
Do you need developer help for Words at War?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dave (DaveOrDead) Script Codes
Name
Toggle component
Closures
Shell CSS lib
Flexbox Grid - equal height
Character Gen - React
Inline-block grid
Email validation
Cors
Password validation
Flexbox grid mark 2
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!